/* ===============================
   THEME
=============================== */

:root{
  --black:#0b120c;
  --green:#1f3d2b;
  --red:#b31c1c;
  --gold:#c9a24d;
  --cream:#f5f0e6;
}

/* ===============================
   RESET
=============================== */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:'Poppins',sans-serif;
  background:var(--cream);
  color:#222;
  line-height:1.7;
  overflow-x:hidden;
}

.container{
  width:92%;
  max-width:1200px;
  margin:auto;
}

.container.narrow{
  max-width:820px;
}


/* ===============================
   HEADER
=============================== */

.site-header{
  background:linear-gradient(90deg,#1f3d2b,#16281d);

  border-bottom:1px solid rgba(201,162,77,.35);
}

.header-flex{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:20px;
}

/* LOGO */

.logo-area{
  display:flex;
  align-items:center;
  gap:14px;
}

.logo-area img{
  height:90px;
}

.logo-text h1{
  font-family:'Playfair Display',serif;
  font-size:24px;
  color:var(--gold);
}

.logo-text span{
  color:#9fb38c;
  font-size:12px;
  letter-spacing:2px;
}


/* NAV */

.main-nav{
  display:flex;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
}

.main-nav a{
  color:var(--cream);
  text-decoration:none;
  font-size:14px;
  position:relative;
}

.main-nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:0;
  height:2px;
  background:var(--gold);
  transition:.3s;
}

.main-nav a:hover::after,
.main-nav a.active::after{
  width:100%;
}


/* SOCIAL ICONS */

.nav-social{
  display:flex;
  gap:8px;
  background:#fff;
  padding:6px 10px;
  border-radius:30px;
}

.nav-social img{
  width:22px;
  height:22px;
  transition:.3s;
}

.nav-social img:hover{
  transform:scale(1.15);
}


/* ===============================
   ADMISSION BAR
=============================== */

.admission-bar{
  background:linear-gradient(90deg,#b31c1c,#8d1515);
  color:#fff;
  font-weight:600;
  font-size:14px;
  padding:10px 0;
  overflow:hidden;
  white-space:nowrap;
  position:sticky;
  top:0;
  z-index:999;
}

.admission-track{
  display:inline-block;
  padding-left:100%;
  animation:scrollText 14s linear infinite;
}

.admission-bar a{
  color:#ffe082;
  font-weight:700;
  text-decoration:none;
}

@keyframes scrollText{
  from{transform:translateX(0)}
  to{transform:translateX(-100%)}
}


/* ===============================
   HERO SLIDER
=============================== */

.hero-slider{
  position:relative;
  height:80vh;
  overflow:hidden;
}

.hero-slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity 1.3s ease;
}

.hero-slide.active{
  opacity:1;
  z-index:1;
}

.hero-slide::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
}

.hero-content{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:20px;
  color:#fff;
}

.hero-content h2{
  font-family:'Playfair Display',serif;
  font-size:42px;
  max-width:900px;
  color:var(--gold);
}

.hero-content p{
  margin-top:14px;
  font-size:14px;
  letter-spacing:1.5px;
}


/* ===============================
   SECTIONS
=============================== */

.section{
  padding:90px 0;
}

.section h2{
  font-family:'Playfair Display',serif;
  font-size:32px;
  text-align:center;
  margin-bottom:24px;
  color:var(--green);
}

.section p{
  text-align:center;
  color:#555;
}


/* ===============================
   SPLIT LAYOUT
=============================== */

.split-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  align-items:center;
}

.split.reverse .split-grid{
  direction:rtl;
}

.split.reverse .split-text{
  direction:ltr;
}

.split-image img{
  width:100%;
  border-radius:10px;
  box-shadow:0 15px 30px rgba(0,0,0,.12);
}


/* ===============================
   CARDS
=============================== */

.course-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:30px;
  margin-top:50px;
}

.course-card{
  background:#fff;
  padding:30px;
  border-top:5px solid var(--red);
  box-shadow:0 15px 30px rgba(0,0,0,.08);
}


/* ===============================
   LEADERSHIP
=============================== */

.leadership-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:30px;
  margin-top:40px;
}

.leader-card{
  background:#fff;
  text-align:center;
  padding:30px;
  border-radius:16px;
  box-shadow:0 10px 25px rgba(0,0,0,.1);
}

.leader-card img{
  width:150px;
  height:150px;
  object-fit:cover;
  border-radius:50%;
  margin-bottom:14px;
}

.leader-contact{
  display:inline-block;
  background:var(--red);
  color:#fff;
  padding:8px 16px;
  border-radius:25px;
  font-size:14px;
  text-decoration:none;
  margin:10px 0;
}


/* ===============================
   FOOTER
=============================== */

.site-footer{
  background:var(--black);
  color:#aaa;
  text-align:center;
  padding:24px 0;
  font-size:13px;
}


/* ===============================
   MOBILE
=============================== */

@media (max-width:768px){

  .header-flex{
    flex-direction:column;
    text-align:center;
  }

  .main-nav{
    justify-content:center;
  }

  .hero-slider{
    height:60vh;
  }

  .hero-content h2{
    font-size:24px;
  }

  .section{
    padding:60px 0;
  }

  .split-grid{
    grid-template-columns:1fr;
    gap:30px;
  }

  .course-grid{
    grid-template-columns:1fr;
  }

  .leader-card{
    padding:22px;
  }
}
/* ================= PROGRAM TIMELINE ================= */

.program-timeline{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:35px;
  margin-top:40px;
}

.program-card{
  background:#fff;
  padding:35px;
  border-top:5px solid var(--green);
  box-shadow:0 18px 40px rgba(0,0,0,.08);
  text-align:center;
  transition:.3s;
}

.program-card:hover{
  transform:translateY(-6px);
}

.program-card h3{
  font-family:'Playfair Display',serif;
  color:var(--green);
  margin:12px 0;
}

.program-year{
  font-size:13px;
  letter-spacing:2px;
  color:#777;
  text-transform:uppercase;
}

.program-eligibility{
  margin-top:18px;
  font-weight:500;
  color:var(--red);
}

/* final level highlight */
.program-card.highlight{
  border-top:5px solid var(--gold);
  background:#faf7ef;
}
.affiliation-image{
  width:100%;
  max-width:600px;
  margin:20px auto;
  display:block;
  border-radius:6px;
  box-shadow:0 20px 45px rgba(0,0,0,.15);
}
/* ================= GOOGLE MAP ================= */

.map-wrapper{
  margin-top:35px;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 20px 45px rgba(0,0,0,.12);
}

.map-wrapper iframe{
  width:100%;
  height:380px;
  border:0;
  display:block;
}

/* mobile */
@media (max-width:768px){
  .map-wrapper iframe{
    height:300px;
  }
}
/* ================= CONTACT FORM PREMIUM ================= */

.contact-form{
  margin-top:40px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.contact-form input,
.contact-form textarea{
  padding:14px 16px;
  border:1px solid #dcdcdc;
  border-radius:6px;
  font-family:'Poppins',sans-serif;
  font-size:14px;
  transition:.2s;
  background:#fff;
}

.contact-form input:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:var(--green);
  box-shadow:0 0 0 2px rgba(31,61,43,.1);
}

.contact-form button{
  background:var(--green);
  color:#fff;
  border:none;
  padding:14px;
  border-radius:6px;
  font-weight:500;
  cursor:pointer;
  transition:.25s;
}

.contact-form button:hover{
  background:#163021;
}

/* mobile */
@media(max-width:768px){
  .form-row{
    grid-template-columns:1fr;
  }
}
/* ================= CONTACT FORM CARD FIX ================= */

.form-card{
  max-width:720px;      /* magic number */
  margin:50px auto;     /* center */
  background:#ffffff;
  padding:40px;
  border-radius:10px;
  box-shadow:0 20px 50px rgba(0,0,0,.10);
}

/* tighten inputs */
.contact-form{
  width:100%;
}

/* better textarea height */
.contact-form textarea{
  min-height:130px;
}

/* mobile spacing */
@media(max-width:768px){
  .form-card{
    margin:25px 15px;
    padding:25px;
  }
}
/* ================= WHY CHOOSE ICONS ================= */

.why-card{
  text-align:center;
  padding:40px 25px;
}

.why-icon{
  width:70px;
  height:70px;
  margin:0 auto 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(31,61,43,.08);
  border-radius:50%;
  color:var(--green);
}

.why-icon svg{
  width:32px;
  height:32px;
}
/* ================= WIDE SECTION IMAGES ================= */

.section-image{
  padding-top:0;
}

.section-banner{
  width:100%;
  height:320px;
  object-fit:cover;
  display:block;
  border-radius:10px;
  margin-bottom:35px;
  box-shadow:0 20px 50px rgba(0,0,0,.15);
}

/* mobile */
@media(max-width:768px){
  .section-banner{
    height:200px;
  }
}
/* ================= AFFILIATION STRIP ================= */

.affiliation-strip{
  background:var(--green);
  color:#fff;
  padding:18px 0;
}

.affiliation-flex{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  text-align:center;
}

.affiliation-icon svg{
  width:28px;
  height:28px;
}

/* ================= STATS ================= */

.stats-section{
  background:#f7f8f6;
}

.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:25px;
  text-align:center;
}

.stat-card{
  padding:25px;
}

.stat-card svg{
  width:30px;
  height:30px;
  color:var(--green);
  margin-bottom:10px;
}

.stat-card h3{
  font-size:26px;
  color:var(--green);
}

/* ================= FACILITIES ================= */

.facility-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:25px;
}

.facility-card{
  text-align:center;
}

.facility-card img{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:8px;
  margin-bottom:10px;
  box-shadow:0 15px 40px rgba(0,0,0,.12);
}

/* ================= QUICK CONTACT ================= */

.quick-contact{
  position:sticky;
  bottom:0;
  display:flex;
  z-index:1000;
}

.quick-contact a{
  flex:1;
  padding:15px;
  text-align:center;
  color:#fff;
  font-weight:500;
  text-decoration:none;
}

.quick-contact a:first-child{
  background:var(--green);
}

.quick-contact a:last-child{
  background:#25D366;
}