/* =========================
   Cambridge School – Base Styles (Hybrid Responsive Banners & Slider)
   ========================= */

/* Theme Variables */
:root{ --brand:#3f51b5; --brand-dark:#1a237e; --accent:#00bcd4; --text:#222; --muted:#555; --bg:#f7f9ff; --light:#ebf1ff; --border:#d0d7f9; --radius:10px; --shadow:0 4px 12px rgba(0,0,0,.08); }

/* Reset */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Segoe UI", Tahoma, sans-serif;
  line-height:1.6;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}

/* Popup Overlay */
.popup-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  visibility: hidden;
  opacity: 0;
  transition: right 0.3s ease-in-out,  opacity 0.4s ease, visibility 0.4s ease;
}
.popup-overlay.active {
  visibility: visible;
  opacity: 1;
}
.popup-box {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  max-width: 400px;
  width: 90%;
  position: relative;
  box-shadow: 0 6px 24px rgba(0,0,0,0.3);
}
.popup-box img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 12px;
}
.popup-box .popup-link {
  display: inline-block;
  margin-top: 8px;
  padding: 10px 16px;
  background: #004080;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  transition: right 0.3s ease-in-out,  background 0.3s;
}
.popup-box .popup-link:hover {
  background: #ff6600;
}
.popup-close {
  position: absolute;
  top: 8px; right: 8px;
  font-size: 24px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
}


/* Utility */
.container{max-width:1200px;margin-inline:auto;padding-inline:20px}

/* Top Bar */
.top-bar{
  background:var(--brand);color:#fff;display:flex;justify-content:space-between;align-items:center;
  padding:8px 20px;font-size:14px
}
.top-bar a{color:#fff;text-decoration:none;margin-right:12px}
.top-bar a:hover,.top-bar a:focus-visible{text-decoration:underline;outline:none}

/* Header */
header{
  position:sticky;top:0;z-index:1000;background:#fff;border-bottom:2px solid #eee;
  display:flex;align-items:center;justify-content:space-between;padding:12px 20px
}
.logo img{height:60px;inline-size:auto}

nav ul{list-style:none;display:flex;gap:20px;align-items:center}
nav ul li{position:relative}
nav ul li a{
  text-decoration:none;color:var(--brand);font-weight:600;padding:8px 12px;border-radius:8px;
  transition: right 0.3s ease-in-out, color .2s, background .2s, transform .15s
}
nav ul li a:hover,nav ul li a:focus-visible{color:var(--accent);background:rgba(0,0,0,.03);outline:none}
nav ul li a.active{color:#fff;background:var(--brand)}

/* Dropdown */
.dropdown-content{
  display:none;position:absolute;top:calc(100% + 8px);left:0;background:#fff;border:1px solid #ddd;
  min-width:220px;border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,.12);padding:8px
}
.dropdown-content li a{display:block;padding:10px 12px;color:var(--brand);border-radius:8px}
.dropdown-content li a:hover,.dropdown-content li a:focus-visible{background:rgba(0,0,0,.04);outline:none}
.dropdown:hover .dropdown-content{display:block}

/* Hamburger (mobile) */
.menu-toggle{display:none;font-size:28px;cursor:pointer;color:var(--brand);z-index:1100}

/* =========================
   Slider – Hybrid Responsive
   ========================= */
.slider{position:relative;max-width:100%;overflow:hidden;background:#000}
.slides{display:flex;transition: right 0.3s ease-in-out, transform .8s ease-in-out;width:100%}
.slide{min-width:100%;flex-shrink:0}
.slide img{
  width:100%;
  aspect-ratio:16 / 9;   /* responsive */
  object-fit:cover;
  max-height:450px;      /* cap height */
  image-rendering:auto;
  backface-visibility:hidden;
}

/* Navigation Arrows */
.navigation .prev,.navigation .next{
  position:absolute;top:50%;transform:translateY(-50%);font-size:30px;color:#fff;padding:8px;
  background:rgba(0,0,0,.4);border-radius:50%;cursor:pointer;user-select:none;border:none;line-height:1
}
.navigation .prev{left:15px}
.navigation .next{right:15px}

/* Dots */
.dots{text-align:center;position:absolute;bottom:15px;width:100%}
.dot{height:12px;width:12px;margin:0 4px;background:#bbb;border-radius:50%;display:inline-block;cursor:pointer;border:none}
.dot.active{background:var(--accent);border:2px solid #fff}

/* =========================
   Page Banner – Hybrid Responsive
   ========================= */
.page-banner{
  width:100%;
  aspect-ratio:16 / 6;   /* shorter aspect ratio */
  max-height:240px;      /* cap height */
  background-size:cover;
  background-position:center;
  position:relative;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:30px;
}
.page-banner .banner-overlay{
  background:rgba(0,0,0,.55);
  padding:14px 28px;
  border-radius:8px
}
.page-banner h1{
  color:#fff;
  font-size:30px;
  font-weight:700;
  text-align:center;
  letter-spacing:1px
}

/* Default fallback banner */
.page-banner{background-image:url("images/default-banner.jpg")}



/* =========================
   Content Sections
   ========================= */
main{padding:40px 20px;text-align:center}
main h1, main h2{color:var(--brand)}
main h1{font-size:32px;margin-bottom:18px}
main h2{font-size:28px;margin-bottom:20px}
main p{max-width:900px;margin-inline:auto;color:var(--muted)}

/* About Us Section */
.about-us{padding:50px 20px;background:var(--light)}
.about-container{display:flex;align-items:center;justify-content:center;gap:30px;max-width:1100px;margin:auto;flex-wrap:wrap}
.about-image img{width:100%;max-width:350px;border-radius:var(--radius);box-shadow:var(--shadow)}
.about-content{flex:1;min-width:280px}
.about-content h2{color:var(--brand);font-size:28px;margin-bottom:15px}
.about-content p{margin-bottom:20px;text-align:justify;color:var(--text)}
.read-more{
  display:inline-block;text-decoration:none;color:#fff;background:var(--brand);padding:10px 18px;border-radius:8px;
  font-weight:600;transition: right 0.3s ease-in-out, transform .15s, background .2s
}
.read-more:hover,.read-more:focus-visible{background:var(--accent);outline:none;transform:translateY(-1px)}

/* Infrastructure */
.infrastructure{padding:60px 20px;background:#fff}
.infrastructure h2{text-align:center;font-size:30px;color:var(--brand);margin-bottom:15px}
.infrastructure p{text-align:center;max-width:800px;margin:0 auto 40px;color:var(--muted)}
.infra-gallery{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(220px,1fr));gap:20px;max-width:1100px;margin:auto
}
.infra-gallery img{
  width:100%;height:180px;object-fit:cover;border-radius:var(--radius);box-shadow:0 4px 10px rgba(0,0,0,.1);
  transition: right 0.3s ease-in-out, transform .25s ease
}
.infra-gallery img:hover{transform:scale(1.04)}
.view-more{text-align:center;margin-top:30px}

/* Footer */
footer{background:var(--brand);color:#fff;text-align:center;padding:22px;margin-top:20px}
footer p{margin-bottom:10px}
.social-icons{display:flex;justify-content:center;gap:15px}
.social-icons a{color:#fff;font-size:20px;transition: right 0.3s ease-in-out, transform .25s, color .25s}
.social-icons a:hover{color:var(--accent);transform:scale(1.15)}

/* Focus */
a:focus-visible,button:focus-visible,.menu-toggle:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:8px}

/* =========================
   Mobile
   ========================= */
@media (max-width:768px){
  .menu-toggle{display:block;position:absolute;top:50%;right:20px;transform:translateY(-50%)}
  nav ul{
    flex-direction:column;background:var(--brand);position:fixed;top:60px;right:-100%;width:260px;height:calc(100% - 60px);
    overflow-y:auto;padding:16px;transition: right 0.3s ease-in-out, right .3s ease-in-out;z-index:1000
  }
  nav ul.active{right:0}
  nav ul li a{color:#fff;padding:14px;border-bottom:1px solid rgba(255,255,255,.18);background:transparent;border-radius:8px}
  .dropdown-content{position:static;display:none;background:var(--brand-dark);padding-left:8px;border:none;box-shadow:none;border-radius:0}
  .dropdown-content li a{color:#fff;padding:12px 14px}
  .dropdown.open .dropdown-content{display:flex;flex-direction:column}

  /* Banner adjustments */
  .page-banner{
    aspect-ratio:16 / 7;
    max-height:200px;
  }
  .page-banner h1{font-size:22px;padding:8px 16px}

  /* Slider adjustments */
  .slide img{max-height:280px}
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
}