/* =========
   Base
   ========= */
:root{
  --bg: #f7fafc;
  --surface: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --brand: #265173;      /* Deep, trustworthy blue */
  --brand-2: #3c8dbc;    /* Accent */
  --border: #e5e7eb;
  --shadow: 0 10px 25px rgba(31,41,55,0.08);
  --radius: 14px;
}

*{ box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

h1,h2,h3,h4{ font-family: Outfit, Inter, Arial, sans-serif; margin: 0 0 .5rem; }
h1{ font-size: clamp(1.8rem, 3vw + 1rem, 3rem); line-height: 1.1; }
h2{ font-size: clamp(1.4rem, 1.6vw + .9rem, 2rem); }
h3{ font-size: clamp(1.1rem, 1.2vw + .7rem, 1.25rem); }
p{ margin: 0 0 1rem; color: var(--text); }

a{ color: var(--brand); text-decoration: none; }
a:hover{ text-decoration: underline; }

.container{ width: min(1120px, 92%); margin-inline: auto; }

/* =========
   Header
   ========= */
.site-header{
  background: var(--surface);
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--border);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 1rem 0; gap: 1rem;
}
.brand{ display:flex; align-items:center; gap:.75rem; text-decoration:none; }
.brand .logo{
  width: 110px; height: auto; flex:0 0 auto; border-radius:8px; box-shadow:none; object-fit:contain;
}
.brand-text{ display:flex; flex-direction:column; line-height:1.05; }
.brand-text strong{ font-family: Outfit, Inter, sans-serif; font-size:1.2rem; }
.brand-text em{ font-style: normal; color: var(--muted); font-size:.95rem; }

/* Menu */
.nav .menu{
  display:flex; align-items:center; gap:.5rem;
  list-style:none; margin:0; padding:0;
}
.nav .menu a{
  display:inline-block; padding:.6rem .8rem; border-radius:10px; color:var(--text); text-decoration:none;
}
.nav .menu a:hover{ background:#f2f6fb; text-decoration:none; }
.nav .menu a.active{ font-weight:600; color: var(--brand); }
.nav .menu .cta-link{ background: var(--brand); color:#fff; border:1px solid transparent; }
.nav .menu .cta-link:hover{ background:#1f4663; }

/* Mobile nav toggle */
.nav-toggle{ display:none; background:transparent; border:none; cursor:pointer; padding:.25rem; margin-left:.25rem; }
.nav-toggle-bar{ display:block; width:24px; height:2px; background:var(--text); margin:5px 0; border-radius:2px; }

/* =========
   Hero
   ========= */
.hero{
  position: relative;
  min-height: 56vh;
  display:flex; align-items:center;
  background: linear-gradient(180deg, rgba(38,81,115,.08), rgba(0,0,0,0) 60%);
}
.hero-media{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover;          /* fill hero area */
  object-position: center;    /* center focus */
  filter: saturate(1.05) contrast(1.02) brightness(.95);
}
@media (max-width: 768px){
  .hero-media{ object-position: top center; } /* better mobile focus */
}
.hero::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(15,47,73,.50), rgba(15,47,73,.35), rgba(15,47,73,.15) 60%, rgba(15,47,73,0));
}
.hero-content{
  position:relative; z-index:1; color:#fff; text-shadow: 0 2px 16px rgba(0,0,0,.25);
  padding: 3rem 0;
}
.hero p{ color:#e6f1fb; font-size: 1.05rem; max-width: 62ch; }
.nowrap{ white-space: nowrap; }

/* Buttons */
.btn{ display:inline-block; padding:.85rem 1.1rem; border-radius:12px; font-weight:600; border:1px solid var(--border); transition: transform .15s, box-shadow .15s, background .15s; text-decoration:none; white-space:nowrap; }
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--brand); color:#fff; border-color: transparent; }
.btn-primary:hover{ background:#1f4663; text-decoration:none; }
.btn-outline{ background:#fff; color:var(--brand); border-color:#cfe2f3; }
.btn-outline:hover{ background:#f5fbff; }

/* =========
   Sections
   ========= */
.section{ padding: 64px 0; }
.section.alt{ background: #f3f7fb; }
.section-head{ text-align:center; margin-bottom: 2rem; }
.section-head p{ color: var(--muted); }

/* Grid helpers */
.grid{ display:grid; gap: 1rem; }
.features{ grid-template-columns: repeat(6, 1fr); }
.feature{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding: 1.1rem; text-align:left; box-shadow: var(--shadow); }
.cards{ grid-template-columns: repeat(5, 1fr); }
.card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding: 1.1rem; box-shadow: var(--shadow); }

/* Admissions block */
.admissions{
  display:grid; grid-template-columns: 1.2fr .8fr; gap: 1.2rem;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.25rem;
}
.admissions .admissions-media{
  min-height: 240px; border-radius: 12px; background:#e8f2fb; display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.admissions .admissions-media img{
  width:100%; height:100%; object-fit: cover; object-position:center;
}

/* Facilities */
.facilities{ grid-template-columns: repeat(6, 1fr); }
.facility{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.facility .img{ height: 150px; background:#dde9f5; display:flex; }
.facility .img img{ width:100%; height:100%; object-fit: cover; }
.facility figcaption{ padding: .8rem; font-weight: 500; text-align:center; }

/* Why Choose Us */
.why{ grid-template-columns: repeat(3, 1fr); }
.why-item{ background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: .9rem 1rem; box-shadow: var(--shadow); }

/* Gallery Carousel */
.carousel{
  position: relative; overflow: hidden; border-radius: var(--radius);
  background: var(--surface); border:1px solid var(--border); box-shadow: var(--shadow);
  height: 420px; max-width: 100%;
}
.carousel-track{
  display:flex; height:100%; transition: transform .45s ease; will-change: transform;
}
.slide{ flex: 0 0 100%; height:100%; display:flex; }
.slide img{ width:100%; height:100%; object-fit: contain; } /* show full image without cropping */
.carousel-btn{
  position:absolute; top:50%; transform: translateY(-50%); z-index:2;
  width: 42px; height: 42px; border-radius: 50%; display:grid; place-items:center; cursor:pointer;
  background: rgba(255,255,255,.9); border:1px solid var(--border); box-shadow: var(--shadow); backdrop-filter: blur(4px);
  transition: transform .15s ease, background .15s ease;
}
.carousel-btn:hover{ background:#fff; transform: translateY(-50%) scale(1.05); }
.carousel .prev{ left: .75rem; }
.carousel .next{ right: .75rem; }
.center{ text-align:center; }
.mt-16{ margin-top: 1rem; }
@media (max-width: 768px){ .carousel{ height: 260px; } }

/* News */
.news{ list-style:none; margin:0; padding:0; display:grid; gap: .75rem; }
.news article{ background: var(--surface); border:1px solid var(--border); border-radius: 12px; padding: .9rem 1rem; box-shadow: var(--shadow); }
.text-link{ color: var(--brand-2); }

/* Placeholder soft pattern (kept for any .ph fallback) */
.ph{
  background-image:
    radial-gradient(circle at 10% 10%, rgba(60,141,188,.18) 0 12%, transparent 13% 100%),
    linear-gradient(135deg, rgba(38,81,115,.18), transparent 40%);
}

/* =========
   Footer
   ========= */
.site-footer{ margin-top: 40px; background: #0f2f49; color: #dbeafe; }
.footer-grid{ display:grid; grid-template-columns: 1.2fr .8fr .8fr; gap: 1.25rem; padding: 32px 0; }
.brand--footer .logo{ box-shadow: none; }
.logo-footer{ width: 100px; height:auto; display:block; object-fit:contain; margin-bottom:.5rem; border-radius:8px; box-shadow:none; }
.footer-note{ color:#c2ddf5; margin-top:.35rem; }
.footer-nav h4, .footer-contact h4{ margin-bottom:.5rem; font-size:1rem; color:#fff; }
.footer-nav ul{ list-style:none; margin:0; padding:0; display:grid; gap:.35rem; }
.footer-nav a{ color:#dbeafe; text-decoration:none; }
.footer-nav a:hover{ text-decoration:underline; }
.footer-contact, .footer-contact p, .footer-contact a{ color:#dbeafe; text-decoration:none; }
.footer-contact a:hover{ text-decoration:underline; }
.social{ display:flex; gap:.5rem; margin-top:.5rem; }
.social-link{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:#123754; color:#dbeafe; text-decoration:none; border:1px solid rgba(255,255,255,.15); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding:10px 0 18px; font-size:.9rem; color:#cfe2f3; }

/* =========
   Responsive
   ========= */
@media (max-width: 1100px){
  .features{ grid-template-columns: repeat(3, 1fr); }
  .cards{ grid-template-columns: repeat(3, 1fr); }
  .facilities{ grid-template-columns: repeat(3, 1fr); }
  .why{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px){
  .admissions{ grid-template-columns: 1fr; }
}
@media (max-width: 780px){
  .nav-toggle{ display:block; }
  .nav .menu{
    position: absolute; left:0; right:0; top: 100%;
    background: #fff; border-bottom:1px solid var(--border);
    display:none; flex-direction:column; gap: .25rem;
    padding: .5rem; box-shadow: var(--shadow);
  }
  .nav .menu.open{ display:flex; }
  body.nav-open{ overflow:hidden; }

  .features{ grid-template-columns: repeat(2, 1fr); }
  .cards{ grid-template-columns: repeat(2, 1fr); }
  .facilities{ grid-template-columns: repeat(2, 1fr); }
  .why{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
}