/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  line-height: 1.6;
  color: #222;
  scroll-behavior: smooth;
  width: 100%;
  overflow-x: hidden;
  margin: 0;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  background: #f7fafd;
  color: #252525;
}

/* Navbar */
header {
  background: #fff;
  padding: 8px 18px;
  position: relative;
  /* keep it on top so hero sits under it */
  left: 0;
  right: 0;
  top: 0;
  z-index: 500;
  /* allow header to grow rather than force fixed height
       (important: menu can either expand header or menu overlays page) */
  min-height: 64px;
  display: flex;
  align-items: center;
}

.navbar {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.navbar .logo {
  color: white;
  font-weight: bold;
}

.inter-adi {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.navbar .logo img {
  max-height: 50px;
  width: auto;
  display: block;
}

/* Desktop nav default */
.navbar ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 28px;
}

.navbar ul li a {
  color: #111;
  font-weight: 500;
  text-decoration: none;
  padding: 6px 4px;
  line-height: 1;
  font-family: "Inter", sans-serif;
}

.nav-cta {
  border: 1px solid #1E40AF;
  border-radius: 10px;
  color: #1E40AF;
}

.nav-cta-one {
  font-weight: bold;
  color: #1E40AF;
}

/* ---------- HAMBURGER (mobile only) ---------- */
/* default: hide hamburger on desktop; show only on mobile */
.hamburger {
  display: none;
  /* changed: don't show on desktop by default */
  background: white;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: 12px;
  z-index: 1100;
  /* ensure it's above the menu */
}

/* bars */
.hamburger .bar {
  display: block;
  width: 24px;
  height: 2.5px;
  margin: 5px 0;
  background: black;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* transform to "X" when open */
.hamburger.open .bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.open .bar:nth-child(2) {
  opacity: 0;
  pointer-events: none;
}

.hamburger.open .bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ========== MOBILE NAV ========== */
/* Activate at mobile widths */
@media (max-width: 768px) {

  /* show hamburger button on mobile */
  .hamburger {
    display: block;
  }

  /* Layout tweaks for navbar */
  .navbar {
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  /* Make the nav an overlay that drops down from the header.
       Using absolute positioning avoids header height clipping.
       The nav will be limited to the viewport height and will scroll if content is long. */
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1040;
    /* above header content but below hamburger if needed */
    width: 100%;
    list-style: none;
    margin: 8px 0 0 0;
    padding: 0;
    overflow: hidden;
    /* visually collapsed when closed */
    max-height: 0;
    /* collapsed */
    display: flex;
    /* keep it rendered */
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background-color: white;
    /* visible overlay */
    transition: max-height 320ms ease, padding 220ms ease;
    box-shadow: 0 8px 20px rgba(2, 8, 23, 0.08);
    border-radius: 8px;
    /* allow vertical scrolling for long menus when open */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* soft clip so we don't exceed viewport visually */
    max-width: 100%;
  }

  /* expanded state (JS toggles this class)
       Use calc(100vh - headerHeight) to occupy available viewport without covering the header */
  .nav-links.open {
    max-height: calc(100vh - 64px);
    /* full viewport minus header */
    padding: 12px 12px 18px 12px;
  }

  /* keep each item spaced comfortably */
  .nav-links li {
    width: auto;
    margin: 6px 0;
  }

  .nav-links li a {
    display: inline-block;
    padding: 8px 12px;
    font-size: 15px;
    color: #111;
    text-decoration: none;
    white-space: nowrap;
  }

  /* Make sure logo doesn't get too big on mobile */
  .navbar .logo img {
    max-height: 48px;
    width: auto;
    display: block;
  }

  /* adjust hero spacing to avoid overlap */
  .about-hero {
    padding-top: 60px;
    padding-left: 18px;
    padding-right: 18px;
    height: auto;
  }
}

/* extra tiny tweak */
@media (max-width: 380px) {
  .navbar .logo img {
    max-height: 45px;
  }

  .nav-links li a {
    font-size: 14px;
    padding: 7px 10px;
  }
}

/* Prevent horizontal scrollbars and white space on mobile */
html,
body {
  width: 100%;
  overflow-x: hidden;
}

/* Ensure desktop nav behaves correctly across all browsers */
.nav-links {
  display: flex;
  gap: 20px;
}

/* remove duplicate/overlapping mobile blocks (we already defined mobile styles above) */
/* Ensure no weird overflow from inner flex layouts */
.program,
.about,
.stats,
.news,
.research,
.publishers {
  width: 100%;
  max-width: 100vw;
  margin: 0 auto;
  overflow-x: hidden;
}

/* SECTION 1: Blue Gradient Header */
.about-hero {
  width: 100%;
  padding: 60px 0 40px 0;
  background: linear-gradient(120deg, #2d4ae9 0%, #43c6fc 100%);
  color: #fff;
  text-align: center;
}

.about-hero-content h1 {
  font-size: 2.6rem;
  font-weight: bold;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

.about-hero-content p {
  font-size: 1.13rem;
  max-width: 700px;
  margin: 0 auto;
  font-weight: 400;
  line-height: 1.7;
}

/* SECTION 2: Journey/Timeline */
.journey-section {
  background: #fff;
  padding: 50px 0 40px 0;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}

.journey-title {
  font-weight: 700;
  font-size: 1.3rem;
  margin-bottom: 35px;
  color: #192855;
}

.journey-timeline {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-bottom: 10px;
  width: 100%;
  flex-wrap: wrap;
}

.journey-item {
  max-width: 260px;
  margin-bottom: 0;
  text-align: center;
}

.journey-year {
  font-size: 2.1rem;
  font-weight: bold;
  color: #43c6fc;
  margin-bottom: 7px;
}

.journey-label {
  font-size: 1.1rem;
  color: #333;
  font-weight: 600;
  margin-bottom: 8px;
}

.journey-desc {
  font-size: 0.96rem;
  color: #6a7297;
  line-height: 1.6;
}

/* Responsiveness check */
@media (max-width: 650px) {
  .journey-timeline {
    flex-direction: column;
    align-items: center;
    gap: 36px;
  }

  .journey-item {
    max-width: 370px;
    max-width: 90vw;
    width: 100%;
    text-align: center;
    margin: 0 auto;
  }

  .journey-title {
    font-size: 1.08rem;
    padding: 0 6vw;
    text-align: center;
  }
}


/* SECTION 3: Mission & Vision */
.mission-vision {
  background: #f7fafd;
  display: flex;
  max-width: 1050px;
  margin: 0 auto 35px auto;
  padding: 35px 0;
  gap: 40px;
  justify-content: space-between;
}

.mission-block,
.vision-block {
  flex: 1;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(44, 76, 167, 0.07);
  padding: 28px 30px;
  min-width: 300px;
}

.mission-block h2,
.vision-block h2 {
  color: #192855;
  font-size: 1.17rem;
  font-weight: 700;
  margin-bottom: 14px;
  letter-spacing: 0.5px;
}

.mission-block ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
  font-size: 1rem;
}

.mission-block ul li {
  margin-bottom: 10px;
  padding-left: 18px;
  position: relative;
  color: #222;
}

.mission-block ul li:before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #43c6fc;
  font-size: 1.02rem;
}

.vision-block p {
  font-size: 0.97rem;
  color: #334;
  line-height: 1.7;
  margin-bottom: 0;
}

/* SECTION 4: Founder */
.leadership-section {
  background: #f7fafd;
  border-radius: 0;
  max-width: 1200px;
  margin: 0 auto 35px auto;
  padding: 50px 12px 24px 12px;
}

.leadership-title {
  text-align: center;
  font-size: 1.24rem;
  color: #22388b;
  font-weight: 700;
  margin-bottom: 36px;
  letter-spacing: 0.2px;
}

/* New Founder Card styles */
.founder-card {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  max-width: 1100px;
  margin: 0 auto 40px auto;
}

.founder-img-wrap {
  min-width: 340px;
  width: 340px;
  height: 340px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(92, 128, 255, 0.11);
  border: 4px solid #e8f1fa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.founder-placeholder {
  width: 290px;
  height: 290px;
  background: #e0e3eb;
  border-radius: 9px;
  color: #b8b9c1;
  font-size: 1.18rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', Arial, sans-serif;
  text-align: center;
  border: 2px solid #dbeaf1;
}

.founder-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 10px;
}

.founder-journey-title {
  font-size: 1.22rem;
  font-weight: 700;
  font-family: 'Inter', Arial, sans-serif;
  color: #22388b;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
  display: block;
}

.founder-name {
  font-size: 0.9rem;
  font-weight: 600;
  font-family: 'Inter', Arial, sans-serif;
  color: #162f64;
  margin-bottom: 20px;
  display: block;
  max-width: 270px;
}

.founder-quote-flex {
  display: flex;
  align-items: stretch;
  margin-top: 2px;
}

.founder-quote {
  font-size: 0.8rem;
  line-height: 1.75;
  color: #3e4660;
  background: #fff;
  border-left: 4px solid #43c6fc;
  padding: 32px 28px;
  border-radius: 13px;
  margin: 0;
  box-shadow: 0 14px 40px rgba(64, 98, 202, 0.11);
  font-style: italic;
  max-width: 670px;
}

/* Mobile Responsive Adjustment */
@media (max-width: 1020px) {
  .founder-card {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 98vw;
  }

  .founder-img-wrap {
    margin-bottom: 0;
  }

  .founder-card-body {
    width: 100%;
    text-align: center;
    align-items: center;
  }

  .founder-name,
  .founder-journey-title {
    max-width: 100%;
  }

  .founder-quote-flex {
    justify-content: center;
  }

  .founder-quote {
    max-width: 95vw;
  }
}



/* SECTION 5: Mentor/Exemplary Mentorship */
.mentor-section {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 44px;
  margin-top: 0;
}

.mentor-card {
  display: flex;
  align-items: center;
  background: #f7fafd;
  border-radius: 18px;
  box-shadow: 0 8px 38px rgba(44, 76, 159, 0.09);
  max-width: 1050px;
  width: 100%;
  padding: 42px 34px;
  gap: 45px;
}

.mentor-img-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 230px;
}

.mentor-img {
  width: 168px;
  height: 168px;
  object-fit: cover;
  border-radius: 50%;
  background: #e7ecf6;
  margin-bottom: 22px;
  border: none;
  box-shadow: 0 2px 14px rgba(44, 76, 159, 0.10);
}

.mentor-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mentor-name {
  font-size: 1.14rem;
  font-weight: 700;
  color: #22388b;
  font-family: 'Inter', Arial, sans-serif;
  margin-bottom: 3px;
}

.mentor-title {
  font-size: 1.04rem;
  color: #43c6fc;
  font-weight: 500;
  margin-bottom: 1px;
}

.mentor-title-note {
  font-size: 0.8rem;
  color: #33a0e0;
  margin-bottom: 10px;
}

.mentor-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.mentor-heading {
  font-size: 1.03rem;
  color: #1d3557;
  font-weight: 600;
  margin-bottom: 12px;
  font-family: 'Inter', Arial, sans-serif;
}

.mentor-desc {
  font-size: 1rem;
  color: #26375b;
  font-family: 'Inter', Arial, sans-serif;
}

.mentor-desc p {
  margin-bottom: 20px;
  line-height: 1.5;
}

.mentor-desc-highlight {
  margin-top: 0;
  margin-bottom: 0;
  color: #23385a;
  font-weight: 500;
  letter-spacing: 0.01em;
}

@media (max-width: 960px) {
  .mentor-card {
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 22px 8vw;
    max-width: 99vw;
  }

  .mentor-content {
    align-items: center;
    text-align: center;
  }

  .mentor-img-wrap {
    margin-bottom: 0;
    width: 100%;
  }

  .mentor-img {
    margin-bottom: 10px;
  }
}

/* SECTION 6: Core Values */
.core-values-section {
  background: #f7fafd;
  padding: 55px 0 38px 0;
  text-align: center;
}

.core-values-title {
  font-weight: 700;
  font-size: 1.17rem;
  color: #192855;
  margin-bottom: 34px;
}

.core-values-row {
  display: flex;
  gap: 40px;
  justify-content: center;
  flex-wrap: wrap;
}

.core-value-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(44, 76, 167, 0.07);
  padding: 24px 26px;
  min-width: 240px;
  max-width: 320px;
  font-size: 1rem;
  color: #23385a;
  font-weight: 500;
  text-align: center;
}

.core-value-card .core-card-title {
  font-size: 1.08rem;
  font-weight: 700;
  color: #43c6fc;
  margin-bottom: 7px;
}

.core-value-card .core-card-desc {
  font-size: 0.96rem;
  color: #192855;
  font-weight: 400;
  margin-bottom: 0;
}

/* SECTION 7: Recognitions */
.recognition-section {
  background: #fff;
  padding: 40px 0 18px 0;
  text-align: center;
}

.recognition-title {
  font-weight: 700;
  font-size: 1.17rem;
  color: #192855;
  margin-bottom: 30px;
}

.recognition-row {
  display: flex;
  gap: 38px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.recognition-logo {
  height: 80px;
  margin: 0 16px;
  object-fit: contain;
  vertical-align: middle;
}

.recognition-meta {
  font-size: 0.97rem;
  color: #333;
  margin-bottom: 0;
  margin-top: 10px;
}

/* Responsive adjustments */
@media (max-width: 900px) {

  .core-values-row,
  .mission-vision {
    flex-direction: column;
    gap: 24px;
    align-items: center;
  }

  .journey-timeline {
    flex-direction: column;
    gap: 20px;
  }

  .founder-row {
    flex-direction: column;
    gap: 22px;
    align-items: center;
  }

  .mentor-card {
    flex-direction: column;
    gap: 18px;
    align-items: center;
  }
}

footer {
  background-color: #f5f5f5;
  color: #000;
  font-size: 14px;
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20px 40px;
}

.footer-section {
  flex: 1 1 200px;
  margin-bottom: 12px;
}

.footer-section h4 {
  margin-bottom: 15px;
  font-size: 16px;
}

.footer-section ul {
  list-style: none;
}

.footer-section ul li {
  margin-bottom: 8px;
}

.footer-section a {
  color: inherit;
  text-decoration: none;
}

.footer-section a:hover {
  text-decoration: underline;
}

.social-icons {
  display: flex;
  gap: 12px;
  margin-bottom: 15px;
}

.social-icons a {
  font-size: 20px;
  color: #000;
  transition: color 0.3s;
}

.social-icons a:hover {
  color: #0073e6;
}

.bottom-links {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.footer-bottom {
  background-color: #1439b3;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
}

.footer-bottom .left p:first-child {
  font-weight: bold;
  margin-bottom: 5px;
}

.footer-bottom .right {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-bottom .right a {
  color: #fff;
  text-decoration: none;
}

.footer-bottom .right a:hover {
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
  .footer-top {
    flex-direction: column;
    padding: 30px 20px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }

  .footer-bottom .right {
    justify-content: center;
  }

  .bottom-links {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 10px;
  }
}