/* Define Color Palette as CSS Variables */
:root {
  --cr-purple: #9E74B3;
  --cr-orange: #ED902F;
  --cr-blue: #2871B9;
  --cr-green: #1CA35D;
  --cr-dark-text: #212529; 
}

/* Custom Logo Styling */
.navbar-brand img {
  max-height: 40px; 
  width: auto;
}

/* Updated Primary Button using CSS Variable */
.btn-craniorate-primary {
  background-color: var(--cr-blue);
  border-color: var(--cr-blue);
  color: #ffffff;
}

.btn-craniorate-primary:hover {
  /* We can generate a slightly darker shade for the hover state */
  background-color: #1F5A9A; /* Darker shade of #2871B9 */
  border-color: #1D548F;
  color: #ffffff;
}

/* Example classes for future icon features */
.text-purple { color: var(--cr-purple); }
.text-orange { color: var(--cr-orange); }
.text-green { color: var(--cr-green); }
.text-blue { color: var(--cr-blue); }

/* Consistent Card Styling */
.card {
  border: 1px solid #dee2e6; /* A subtle border */
  transition: all 0.3s ease-in-out;
}

.card:hover {
  transform: translateY(-5px); /* A slight lift on hover */
  box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* A soft shadow on hover */
}

.icon-circle {
  height: 60px;
  width: 60px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bg-blue {
  background-color: var(--cr-blue);
}

.bg-green {
  background-color: var(--cr-green);
}

.bg-orange {
  background-color: var(--cr-orange);
}

.bg-purple {
  background-color: var(--cr-purple);
}

.logo-features-grid {
  /* This class now only serves as a marker, the Bootstrap row handles the layout. 
     We remove the fixed width and height. */
  margin: 0 auto;
}

.quadrant {
  /* We remove the fixed min-height and use aspect-ratio instead */
  aspect-ratio: 1 / 1; /* This makes the element a perfect square */
  padding: 30px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  
  /* Mask properties */
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  
  transition: transform 0.3s ease;
}

.quadrant:hover {
  transform: scale(1.03);
  z-index: 10;
}

/* Apply the specific shape and color to each quadrant */
.quadrant-objective {
  mask-image: url('logo-top-left.svg');
  background-color: var(--cr-purple);
}

.quadrant-holistic {
  mask-image: url('logo-top-right.svg');
  background-color: var(--cr-orange);
}

.quadrant-easy-to-use {
  mask-image: url('logo-bottom-left.svg');
  background-color: var(--cr-green);
}

.quadrant-clinically-relevant {
  mask-image: url('logo-bottom-right.svg');
  background-color: var(--cr-blue);
}

.quadrant h5 {
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.quadrant p {
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* --- RESPONSIVE FIXES --- */

/* This media query targets screens MEDIUM and LARGER (desktops) */
@media (min-width: 768px) {
  .logo-features-grid {
    /* We can set a max-width on desktop to keep the logo from getting too large */
    max-width: 600px; 
  }

  .quadrant-easy-to-use,
  .quadrant-clinically-relevant {
    /* Apply the negative margin ONLY on desktop to create the seamless logo effect */
    margin-top: -50px; 
    min-height: 300px;
    min-width: 300px;
  }
}