/* ----- Reset & Base ----- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
               Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  line-height: 1.6;
  color: #333;
  background: #fff;
}

/* ----- Header / Nav ----- */
header {
  background: #fff;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0,0,0,.08);
}

nav {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.logo {
  font-family: "Poppins", sans-serif;
  font-weight: 600;        /* semi-bold */
  font-size: 2rem;         /* branding size */
  letter-spacing: 0.5px;   /* modern spacing */
  color: #00B8D4;          /* brand highlight color */
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 2rem;
}
.nav-links a {
  color: #333;
  text-decoration: none;
  font-weight: 500;
  transition: color .2s;
}
.nav-links a:hover { color: #00B8D4; }

.cta-buttons { display: flex; gap: 1rem; }
.btn {
  padding: .75rem 1.25rem;
  border-radius: 6px;
  border: 2px solid transparent;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.btn-primary { background:#00B8D4; color:#fff; }
.btn-primary:hover { background:#0097A7; }
.btn-outline { background:transparent; color:#00B8D4; border-color:#00B8D4; }
.btn-outline:hover { background:#00B8D4; color:#fff; }

/* ----- Main spacing (offset fixed header) ----- */
main { margin-top: 80px; }

/* ----- Hero ----- */
.hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 5%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  min-height: 70vh;
}
.hero-content h1 { font-size: 3rem; color:#3B2F5A; margin-bottom:1rem; }
.hero-content .highlight { color:#00B8D4; }
.hero-content .italic { font-style: italic; font-weight:400; }
.hero-content p { font-size:1.1rem; color:#666; margin-top:.5rem; }
.hero-buttons { display:flex; gap:1rem; margin-top:2rem; }
.hero-image img {
  width:100%; height:400px;
  object-fit:cover;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}

/* ----- About ----- */
.about { background:#f8f9fa; padding:4rem 5%; }
.about-container {
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr;
  gap:3rem; align-items:center;
}
.about-content h2 { font-size:2.25rem; color:#3B2F5A; margin-bottom:1rem; }
.about-content p { font-size:1.05rem; color:#666; margin:.75rem 0; }
.about-image img {
  width:100%; height:300px;
  object-fit:cover; border-radius:12px;
}

/* ----- Vision & Mission ----- */
.vision-mission { padding:4rem 5%; }
.vision-mission-container {
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:3rem;
}
.vision-card, .mission-card {
  padding:2.25rem; border-radius:14px;
  color:#fff; text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.vision-card { background:linear-gradient(135deg,#00B8D4,#0097A7); }
.mission-card { background:linear-gradient(135deg,#3B2F5A,#2C1810); }
.vision-card h3, .mission-card h3 { font-size:2rem; margin-bottom:1rem; }
.vision-card p, .mission-card p { font-size:1.05rem; line-height:1.8; }

/* ----- Goals ----- */
.goals { background:#f8f9fa; padding:4rem 5%; }
.goals-container { max-width:1200px; margin:0 auto; }
.goals h2 { text-align:center; font-size:2.25rem; color:#3B2F5A; margin-bottom:2rem; }
.goals-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.5rem;
}
.goal-card {
  background:#fff; border-radius:12px; padding:1.5rem; text-align:center;
  box-shadow:0 6px 18px rgba(0,0,0,.06); transition:transform .2s;
}
.goal-card:hover { transform:translateY(-4px); }
.goal-number {
  width:56px; height:56px; border-radius:50%;
  margin:0 auto 1rem;
  background:#00B8D4; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700;
}

/* ----- Services ----- */
.services { padding:4rem 5%; }
.services-container { max-width:1200px; margin:0 auto; }
.services h2 { text-align:center; font-size:2.25rem; color:#3B2F5A; margin-bottom:2rem; }
.services-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.5rem;
}
.service-card {
  background:#fff; border-radius:12px; padding:1.5rem; text-align:center;
  border-left:4px solid #00B8D4;
  box-shadow:0 6px 18px rgba(0,0,0,.06); transition:transform .2s;
}
.service-card:hover { transform:translateY(-4px); }
.service-icon {
  width:56px; height:56px; border-radius:50%; background:#00B8D4; color:#fff;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 1rem; font-size:1.4rem;
}

/* ----- Footer ----- */
footer { background:#3B2F5A; color:#fff; padding:3rem 5% 1.25rem; }
.footer-content {
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.5rem;
}
.footer-section h3 { color:#00B8D4; margin-bottom:.5rem; }
.footer-section p, .footer-section a { color:#cfd6dd; text-decoration:none; line-height:1.8; }
.footer-section a:hover { color:#00B8D4; }
.footer-bottom {
  border-top:1px solid #4A3F6B;
  text-align:center; margin-top:1rem; padding-top:.75rem;
  color:#cfd6dd;
}

/* ----- Mobile ----- */
.mobile-menu-toggle { display:none; flex-direction:column; gap:4px; cursor:pointer; }
.mobile-menu-toggle span { width:26px; height:3px; background:#333; }
@media (max-width:768px){
  .nav-links{display:none}
  .mobile-menu-toggle{display:flex}
  .hero{grid-template-columns:1fr;text-align:center;padding:2rem 5%}
  .hero-content h1{font-size:2rem}
  .hero-buttons{justify-content:center}
  /* Hide navbar buttons on mobile */
  .cta-buttons{display:none}
  .about-container,.vision-mission-container{grid-template-columns:1fr}
  body.nav-open .nav-links{
    display:flex !important; position:absolute; top:64px; right:5%;
    background:#fff; padding:1rem; border-radius:8px;
    box-shadow:0 8px 24px rgba(0,0,0,.12);
    flex-direction:column; gap:1rem; z-index:1200;
  }
}