/* ============================================= */
/* Root Variables - used throughout the website  */
/* ============================================= */
:root {
  --mc-primary: #0056b3;      /* Main brand blue color */
  --mc-primary-dark: #004277;  /* Darker shade of blue for hover/focus */
  --mc-accent: #ffd700;       /* Accent color (gold) for highlights */
}

/* ========== GENERAL BODY STYLES ========== */
body {
  margin: 0; /* Removes default margin */
  font-family: 'Segoe UI', system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; 
  /* Clean, modern sans-serif font */
}

/* ============================================= */
/* TOP HEADER                    */
/* ============================================= */
/* Applies to <header class="top-header"> */
.top-header {
  background-color: var(--mc-primary); /* Blue background */
  color: #fff;                         /* White text */
  text-align: center;                   /* Centers text horizontally */
  padding: 20px 16px 12px;              /* Top / sides / bottom spacing */
  font-weight: 500;                     /* Semi-bold text */
  font-size: 20px;                      /* Medium-sized text */
}

.top-header h1 {
  font-size: 2.5rem; /* Larger title size inside header */
}

/* ============================================= */
/* NAVBAR                   */
/* ============================================= */
/* Applies to <nav class="navbar"> */
.navbar {
  background-color: #003c82; /* Dark blue background */
}

/* Navbar links (<a class="nav-link"> inside navbar) */
.navbar .nav-link {
  color: #ffffff;   /* White text */
  position: relative; /* Needed for custom underline effect */
  font-weight: 500;   /* Semi-bold text */
  font-size: 17px;    /* Medium text size */
}

/* Link hover and focus state */
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: var(--mc-accent); /* Turns gold on hover */
}

/* Active link (applied to current page link) */
.navbar .nav-link.active {
  color: var(--mc-accent); /* Gold for active link */
  font-weight: 700;       /* Bold text */
}

/* Creates underline animation effect on navbar links */
.navbar .nav-link::after {
  content: '';                    /* Empty element for underline */
  position: absolute;             /* Positioned relative to the link */
  left: 50%;                      /* Starts centered */
  bottom: 6px;                    /* A little above baseline */
  width: 0;                       /* Initially hidden */
  height: 2px;                    /* Thin underline */
  background-color: var(--mc-accent); /* Gold underline */
  transition: width 0.25s ease, left 0.25s ease; /* Smooth animation */
  transform: translateX(-50%);    /* Keep underline centered */
}

/* When hovered, the underline expands */
.navbar .nav-link:hover::after {
  width: 60%; /* Expands to 60% width */
}

/* ============================================= */
/* NAVBAR MOBILE VIEW (<=768px)        */
/* ============================================= */
@media (max-width: 767.98px) {
  .navbar {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem; /* Taller navbar for touch */
  }

  .navbar-toggler {
    font-size: 1.5rem;    /* Bigger hamburger menu */
    padding: 0.2rem 0.2rem; /* Compact padding */
  }

  .navbar .nav-link {
    font-size: 1.1rem;    /* Bigger font size for tap targets */
    padding-top: 0.75rem;   /* More vertical space */
    padding-bottom: 0.75rem;
  }
  
  .navbar .nav-link::after {
    display: none; /* Remove underline effect in mobile menu */
  }

  .navbar-collapse {
    background-color: #003c82; /* Keep dark blue when expanded */
    padding: 0.5rem 0.5rem;
  }
}

/* ============================================= */
/* HERO SECTION                */
/* ============================================= */
/* Container of hero text */
.hero-content {
  position: relative;   /* Layer above background image */
  z-index: 1;           /* Ensure above overlay */
  max-width: 800px;     /* Keep text narrow */
  margin: 0 auto;
  text-align: center;
  animation: fadeSlide 1s ease forwards; /* Fade+slide animation */
}

/* Keyframes for hero text fade+slide */
@keyframes fadeSlide {
  0%   { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Hero wrapper */
.hero {
  position: relative;
  height: clamp(250px, 40vh, 450px); /* Responsive height */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hero background image */
.hero-bg {
  position: absolute;
  inset: 0; /* Stretches to fill hero section */
  width: 100%;
  height: 100%;
  object-fit: cover;       
  object-position: center;
  filter: brightness(60%); /* Dark overlay */
  z-index: 0;              /* Behind content */
}

/* Hero text content */
.hero-content {
  position: relative;
  z-index: 1;           
  text-align: center;
  max-width: 800px;
  padding: 0 1rem;
  color: #fff;   /* White text */
  animation: fadeSlide 1s ease forwards;
}

.hero-content h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: #fff;
  text-shadow: 0 3px 8px rgba(0,0,0,0.45); /* Shadow for readability */
}

.hero-content .lead {
  font-size: 1.25rem;
  color: #f0f0f0;
  font-weight: 400;
  margin-bottom: 0;
}

/* Mobile tweaks for hero */
@media (max-width: 767px) {
  .hero-logo       { width: 90px; }
  .hero-content h1{ font-size: 2rem; }
  .hero-content .lead { font-size: 1rem; }
}

/* ============================================= */
/* ABOUT SECTION (main-about)        */
/* ============================================= */
/* Applies to <section class="main-about"> */
.main-about {
  padding: 80px 20px; 
  background: linear-gradient(135deg, #ffffff, #f0f8ff); /* Subtle gradient */
}

/* Section headings */
.section-title {
  font-size: 2.5rem;
  color: #003c82;
  font-weight: bold;
}

.section-subtitle {
  font-size: 1.2rem;
  color: #555;
  max-width: 700px;   /* Restrict width */
  margin: 0 auto;     /* Center horizontally */
}

/* Individual cards inside about section */
.about-card {
  background-color: white;
  border-radius: 15px;                  /* Rounded corners */
  padding: 30px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); /* Subtle shadow */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;                         /* Fills column height */
  text-align: center;
}

/* Hover effect for about cards */
.about-card:hover {
  transform: translateY(-5px);         /* Lifts card slightly */
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); /* Stronger shadow */
}

/* Icon inside cards */
.about-card .icon {
  font-size: 2.5rem;
  color: #0056b3; /* Blue icons */
  margin-bottom: 15px;
}

/* Card title */
.about-card h5 {
  font-weight: bold;
  color: #003c82;
}

/* Card text */
.about-card p {
  color: #555;
}

/* Wide cards (take more width, used for bottom rows) */
.about-card.wide {
  text-align: left;
  padding: 40px;
}

/* ============================================= */
/* HOW IT WORKS SECTION (NEW)          */
/* ============================================= */
.main-how-it-works {
  padding: 80px 20px;
  background-color: #f0f8ff; /* Light blue background to separate it */
}

.step-card {
  background-color: white;
  border-radius: 15px;
  padding: 40px 25px 30px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
  text-align: center;
  position: relative; /* For the step number */
  border-top: 4px solid var(--mc-primary); /* Brand color accent */
}

.step-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.step-card .icon {
  font-size: 2.5rem;
  color: var(--mc-primary);
  margin-bottom: 15px;
}

.step-card h5 {
  font-weight: bold;
  color: #003c82;
  margin-bottom: 10px;
}

.step-card p {
  color: #555;
  font-size: 0.9rem;
}

.step-number {
  position: absolute;
  top: -22px; /* Position it half-way above the card's top border */
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--mc-primary);
  color: white;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  border: 4px solid white;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* ============================================= */
/* WHY MANDACARE SECTION             */
/* ============================================= */
.main-purpose {
  padding: 80px 20px;
  background: #ffffff; /* Re-added for section separation */
}

.main-purpose .row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem; /* Spacing between cards */
}

/* Purpose cards (Mission, Vision, etc.) */
.purpose-card {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  background-color: #fff;
  padding: 30px 25px;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.07);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  min-height: 320px; /* Ensures cards are tall enough */
}

/* Hover lift effect */
.purpose-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.12);
}

/* Purpose card icon */
.purpose-card .icon {
  font-size: 2.4rem;
  color: #0056b3;
  margin-bottom: 15px;
}

/* Card heading */
.purpose-card h5 {
  color: #003c82;
  font-weight: bold;
  margin-bottom: 10px;
}

/* Card text */
.purpose-card p {
  font-size: 0.95rem;
  color: #555;
}

/* ============================================= */
/* DEVELOPERS SECTION              */
/* ============================================= */
.main-developers {
  padding: 80px 20px;
  background: #f8f9fa; /* Changed to a very light gray */
}

/* Developer cards */
.dev-card {
  background: #ffffff;
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  padding: 25px 20px;
  text-align: center;
  transition: transform .3s ease, box-shadow .3s ease;
}

.dev-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.12);
}

/* Developer image */
.dev-card img {
  width: 100%;
  aspect-ratio: 1 / 1;       
  object-fit: cover;         /* Crops image properly */
  border-radius: 12px;
}

/* Developer name */
.dev-card h5 {
  color: #003c82;
  font-weight: 700;
  margin-top: 18px;
  margin-bottom: 4px;
}

/* Role under name */
.dev-card .role {
  color: #0056b3;
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 8px;
}

/* Short description */
.dev-card .bio {
  font-size: 0.9rem;
  color: #555;
}

/* ============================================= */
/* FOOTER STYLES                 */
/* ============================================= */
footer {
  background-color: #1a1a1a; /* Dark background */
  color: #ccc;               /* Light gray text */
  padding: 40px 20px;
}

footer a {
  color: #ccc;               /* Gray links */
  text-decoration: none;
}
footer a:hover {
  color: #fff;               /* White on hover */
  text-decoration: underline;
}

/* ============================================= */
/* RESPONSIVE SECTION PADDING & ALIGNMENT   */
/* ============================================= */
@media (max-width: 767px) {
  .main-about,
  .main-how-it-works,
  .main-purpose,
  .main-developers {
    padding: 60px 15px;
  }
  
  .about-card.wide {
    text-align: center; /* Center text in mobile */
  }
}

@media (max-width: 575px) {
  .main-developers {
    padding: 60px 15px;
  }
}