/* =========================================================
   Delhi Public School, Bhairoganj — brand stylesheet
   Palette pulled directly from the school emblem:
   Red ring, Green lettering & shield, Navy "BHAIROGANJ",
   Gold accent dots, cream/white base.
   ========================================================= */

:root{
  --dps-red:      #D2141F;
  --dps-red-dark: #A80F18;
  --dps-green:    #147A3D;
  --dps-green-dark:#0C5C2C;
  --dps-navy:     #0E2A5E;
  --dps-navy-dark:#081B3D;
  --dps-gold:     #F4B400;
  --dps-cream:    #FFFBF2;
  --dps-ink:      #22262B;
  --dps-muted:    #6B7280;
  --radius-lg: 18px;
  --radius-md: 12px;
  --shadow-soft: 0 10px 30px rgba(14,42,94,.10);
  --shadow-pop: 0 16px 40px rgba(210,20,31,.18);
}

*{box-sizing:border-box;}

body{
  font-family:'Nunito Sans', 'Segoe UI', sans-serif;
  color:var(--dps-ink);
  background:var(--dps-cream);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5, .font-display{
  font-family:'Poppins','Segoe UI',sans-serif;
  font-weight:700;
  color:var(--dps-navy);
}

a{ text-decoration:none; }
img{max-width:100%; display:block;}

.text-dps-red{color:var(--dps-red)!important;}
.text-dps-green{color:var(--dps-green)!important;}
.text-dps-navy{color:var(--dps-navy)!important;}
.text-dps-gold{color:var(--dps-gold)!important;}
.bg-dps-red{background:var(--dps-red)!important;}
.bg-dps-green{background:var(--dps-green)!important;}
.bg-dps-navy{background:var(--dps-navy)!important;}
.bg-dps-cream{background:var(--dps-cream)!important;}

/* ---------- Top utility bar ---------- */
.topbar{
  background:var(--dps-navy);
  color:#eaf0ff;
  font-size:.85rem;
  border-bottom:3px solid var(--dps-gold);
}
.topbar a{ color:#eaf0ff; }
.topbar a:hover{ color:var(--dps-gold); }
.topbar .divider{ opacity:.35; margin:0 .6rem; }
.topbar .social-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.12);
  margin-left:.4rem;
  transition:.2s;
}
.topbar .social-icon:hover{ background:var(--dps-gold); color:var(--dps-navy)!important; transform:translateY(-2px); }

/* ---------- Header ---------- */
.site-header{
  background:#fff;
  padding:.9rem 0;
}
.brand-logo{
  height:78px;width:78px;object-fit:contain;
  filter:drop-shadow(0 4px 10px rgba(210,20,31,.25));
}
.brand-title{
  font-family:'Poppins',sans-serif;
  font-weight:800;
  font-size:1.55rem;
  color:var(--dps-green);
  line-height:1.15;
  margin-bottom:0;
}
.brand-sub{
  color:var(--dps-navy);
  font-weight:700;
  letter-spacing:.12em;
  font-size:.78rem;
  text-transform:uppercase;
}
.brand-tag{
  color:var(--dps-red);
  font-weight:600;
  font-size:.82rem;
  font-style:italic;
}
.header-cta .btn{
  border-radius:50px;
  font-weight:700;
  padding:.65rem 1.6rem;
}

/* ---------- Navbar / dropdowns ---------- */
.navbar-dps{
  background:linear-gradient(90deg,var(--dps-green) 0%,var(--dps-green-dark) 100%);
  box-shadow:var(--shadow-soft);
  position:sticky; top:0; z-index:1030;
}
.navbar-dps .nav-link{
  color:#fff!important;
  font-weight:700;
  font-size:.93rem;
  letter-spacing:.02em;
  padding:.9rem 1rem!important;
  transition:.2s;
  position:relative;
}
.navbar-dps .nav-link:hover,
.navbar-dps .nav-link.active{
  color:var(--dps-gold)!important;
}
.navbar-dps .nav-item.dropdown:hover .dropdown-menu{
  display:block;
  margin-top:0;
  animation:fadeDown .18s ease;
}
@keyframes fadeDown{ from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);} }
.navbar-dps .dropdown-menu{
  border:none;
  border-radius:0 0 var(--radius-md) var(--radius-md);
  box-shadow:0 18px 36px rgba(0,0,0,.18);
  padding:.5rem 0;
  border-top:3px solid var(--dps-gold);
}
.navbar-dps .dropdown-item{
  font-weight:600;
  color:var(--dps-navy);
  padding:.55rem 1.3rem;
}
.navbar-dps .dropdown-item:hover{
  background:var(--dps-cream);
  color:var(--dps-red);
  padding-left:1.6rem;
}
.navbar-dps .dropdown-toggle::after{ vertical-align:.15em; }
.navbar-toggler{ border-color:rgba(255,255,255,.5); }

/* ---------- Hero / carousel ---------- */
.hero-carousel{ position:relative; }
.hero-carousel .carousel-item{ height:78vh; min-height:460px; }
.hero-carousel .carousel-item img{
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.55) saturate(1.05);
}
.hero-carousel .carousel-caption{
  bottom:auto; top:50%; transform:translateY(-50%);
  text-align:left; left:6%; right:6%; max-width:780px;
}
.hero-carousel .carousel-caption .eyebrow{
  display:inline-block; background:var(--dps-gold); color:var(--dps-navy-dark);
  font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  font-size:.75rem; padding:.35rem .9rem; border-radius:50px; margin-bottom:1rem;
}
.hero-carousel .carousel-caption h1{
  color:#fff; font-size:clamp(2rem,4.6vw,3.6rem); font-weight:800; line-height:1.08;
  text-shadow:0 3px 18px rgba(0,0,0,.35);
}
.hero-carousel .carousel-caption p{
  color:#f4f4f4; font-size:1.1rem; max-width:600px; margin-top:1rem;
}
.hero-carousel .carousel-indicators [data-bs-target]{
  width:34px; height:5px; border-radius:4px; background:rgba(255,255,255,.55); border:none;
}
.hero-carousel .carousel-indicators .active{ background:var(--dps-gold); }
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next{ width:6%; }

/* Inner page banner */
.page-banner{
  position:relative; padding:5.2rem 0 3.4rem; overflow:hidden;
  background:linear-gradient(120deg,var(--dps-navy) 0%,var(--dps-navy-dark) 60%, var(--dps-green-dark) 130%);
}
.page-banner::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 85% 20%, rgba(244,180,0,.20), transparent 45%);
}
.page-banner h1{ color:#fff; font-size:clamp(1.9rem,3.4vw,2.7rem); position:relative; z-index:2;}
.page-banner .breadcrumb{ position:relative; z-index:2; }
.page-banner .breadcrumb-item, .page-banner .breadcrumb-item a{ color:#cdd8ef; font-weight:600;}
.page-banner .breadcrumb-item.active{ color:var(--dps-gold); }
.page-banner .breadcrumb-item+.breadcrumb-item::before{ color:#cdd8ef; }

/* ---------- Marquee notice strip ---------- */
.notice-strip{
  background:var(--dps-red); color:#fff; padding:.6rem 0; overflow:hidden; white-space:nowrap;
}
.notice-strip .badge-label{
  background:var(--dps-navy-dark); padding:.4rem 1rem; font-weight:800; letter-spacing:.05em;
  flex-shrink:0;
}
.notice-marquee{ 
  display:inline-block; 
  padding-left:100%; 
  animation:marquee 30s linear infinite; 
  font-weight:600;
  font-size:.95rem;
}
.notice-strip:hover .notice-marquee{ animation-play-state:paused; }
@keyframes marquee{ 
  0%{transform:translateX(0);} 
  100%{transform:translateX(-100%);} 
}

/* ---------- Cards / sections ---------- */
.section-pad{ padding:4.5rem 0; }
.section-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  color:var(--dps-red); font-weight:800; text-transform:uppercase;
  letter-spacing:.12em; font-size:.8rem; margin-bottom:.6rem;
}
.section-eyebrow::before{
  content:""; width:26px; height:3px; background:var(--dps-gold); display:inline-block; border-radius:2px;
}
.section-title{ font-size:clamp(1.7rem,2.6vw,2.3rem); }

.card-dps{
  background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-soft);
  border:1px solid rgba(14,42,94,.06); transition:.25s;
  overflow:hidden; height:100%;
}
.card-dps:hover{ transform:translateY(-6px); box-shadow:var(--shadow-pop); }
.icon-badge{
  width:60px; height:60px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--dps-green),var(--dps-green-dark));
  color:#fff; font-size:1.5rem; margin-bottom:1rem;
}
.icon-badge.gold{ background:linear-gradient(135deg,var(--dps-gold),#c98f00); color:var(--dps-navy-dark); }
.icon-badge.red{ background:linear-gradient(135deg,var(--dps-red),var(--dps-red-dark)); }
.icon-badge.navy{ background:linear-gradient(135deg,var(--dps-navy),var(--dps-navy-dark)); }

.stat-block{ text-align:center; padding:1.4rem .5rem; }
.stat-num{ font-family:'Poppins',sans-serif; font-weight:800; font-size:2.6rem; color:var(--dps-gold);}
.stat-label{ color:#dfe6f7; font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:.78rem;}
.stats-band{ background:linear-gradient(120deg,var(--dps-navy),var(--dps-navy-dark)); }

.founder-shield{ border-radius:var(--radius-lg); box-shadow:var(--shadow-pop); border:6px solid #fff; }

.btn-dps-red{ background:var(--dps-red); border-color:var(--dps-red); color:#fff; font-weight:700; border-radius:50px;}
.btn-dps-red:hover{ background:var(--dps-red-dark); border-color:var(--dps-red-dark); color:#fff;}
.btn-dps-outline{ border:2px solid #fff; color:#fff; font-weight:700; border-radius:50px;}
.btn-dps-outline:hover{ background:#fff; color:var(--dps-navy); }
.btn-dps-gold{ background:var(--dps-gold); border-color:var(--dps-gold); color:var(--dps-navy-dark); font-weight:800; border-radius:50px;}
.btn-dps-gold:hover{ background:#dba300; border-color:#dba300; color:#fff;}
.btn-dps-green{ background:var(--dps-green); border-color:var(--dps-green); color:#fff; font-weight:700; border-radius:50px;}
.btn-dps-green:hover{ background:var(--dps-green-dark); }

.timeline{ border-left:3px solid var(--dps-gold); padding-left:1.6rem; }
.timeline .t-item{ position:relative; padding-bottom:2rem; }
.timeline .t-item::before{
  content:""; position:absolute; left:-2.02rem; top:.25rem;
  width:16px; height:16px; border-radius:50%;
  background:var(--dps-red); border:3px solid var(--dps-gold);
}

/* Gallery */
.gallery-item{ border-radius:var(--radius-md); overflow:hidden; position:relative; box-shadow:var(--shadow-soft); }
.gallery-item img{ transition:.4s; aspect-ratio:4/3; object-fit:cover; width:100%;}
.gallery-item:hover img{ transform:scale(1.08); }
.gallery-item .g-overlay{
  position:absolute; inset:0; background:linear-gradient(to top, rgba(14,42,94,.85), transparent 55%);
  opacity:0; transition:.3s; display:flex; align-items:flex-end; padding:1rem; color:#fff; font-weight:700;
}
.gallery-item:hover .g-overlay{ opacity:1; }
.gallery-filter .btn{
  border-radius:50px; font-weight:700; margin:.25rem; border:2px solid var(--dps-green); color:var(--dps-green);
}
.gallery-filter .btn.active, .gallery-filter .btn:hover{ background:var(--dps-green); color:#fff; }

/* Forms */
.form-control, .form-select{
  border-radius:10px; border:1.5px solid #dfe3ea; padding:.7rem 1rem;
}
.form-control:focus, .form-select:focus{
  border-color:var(--dps-green); box-shadow:0 0 0 .2rem rgba(20,122,61,.15);
}
.contact-card{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-pop); }

/* Footer */
.site-footer{ background:var(--dps-navy-dark); color:#c7d2ea; }
.site-footer h5{ color:#fff; font-weight:800; margin-bottom:1.1rem; }
.site-footer a{ color:#c7d2ea; }
.site-footer a:hover{ color:var(--dps-gold); }
.footer-links li{ margin-bottom:.55rem; }
.footer-links a::before{ content:"›  "; color:var(--dps-gold); }
.footer-bottom{ background:#050f26; font-size:.85rem; padding:1rem 0; }
.footer-social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px;height:38px;border-radius:50%; background:rgba(255,255,255,.08); margin-right:.5rem;
}
.footer-social a:hover{ background:var(--dps-gold); color:var(--dps-navy-dark)!important; }
.footer-logo{ height:56px; }

/* Back to top */
.back-to-top{
  position:fixed; right:22px; bottom:22px; z-index:1050;
  width:46px; height:46px; border-radius:50%;
  background:var(--dps-red); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(210,20,31,.4); opacity:0; visibility:hidden; transition:.3s;
}
.back-to-top.show{ opacity:1; visibility:visible; }

/* Misc */
.divider-gold{ width:70px; height:4px; background:var(--dps-gold); border-radius:4px; margin:.8rem 0 1.4rem; }
.zigzag-img{ border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); }
.quick-links-band{ margin-top:-70px; position:relative; z-index:5; }
.quick-link-card{
  background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-pop);
  padding:1.6rem 1.2rem; text-align:center; height:100%; transition:.25s; display:block;
}
.quick-link-card:hover{ transform:translateY(-8px); background:var(--dps-green); }
.quick-link-card:hover .icon-badge{ background:#fff; color:var(--dps-green); }
.quick-link-card:hover h6, .quick-link-card:hover p{ color:#fff!important; }

@media (max-width:991px){
  .navbar-dps .nav-item.dropdown:hover .dropdown-menu{ display:none; }
  .quick-links-band{ margin-top:1.5rem; }
  .hero-carousel .carousel-item{ height:62vh; }
  
  /* Mobile navbar improvements */
  .navbar-dps .navbar-collapse {
    background: var(--dps-navy-dark);
    padding: 1rem 0;
    margin-top: 0.5rem;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
  }
  
  .navbar-dps .nav-link {
    padding: 0.85rem 1rem !important;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  
  .navbar-dps .nav-item:last-child .nav-link {
    border-bottom: none;
  }
  
  .navbar-dps .dropdown-menu {
    background: rgba(14, 42, 94, 0.95);
    border: none;
    padding: 0.5rem 0;
    border-radius: 0;
    box-shadow: none;
  }
  
  .navbar-dps .dropdown-item {
    color: #eaf0ff;
    padding: 0.6rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  
  .navbar-dps .dropdown-item:hover {
    background: rgba(244, 180, 0, 0.15);
    color: var(--dps-gold);
    padding-left: 1.8rem;
  }
  
  .navbar-dps .dropdown-toggle::after {
    margin-left: auto;
    transition: transform 0.3s;
  }
  
  .navbar-dps .dropdown.show .dropdown-toggle::after {
    transform: rotate(180deg);
  }
  
  /* Hero carousel mobile */
  .hero-carousel .carousel-caption {
    left: 4%;
    right: 4%;
    max-width: 100%;
  }
  
  .hero-carousel .carousel-caption h1 {
    font-size: 1.8rem;
  }
  
  .hero-carousel .carousel-caption p {
    font-size: 0.95rem;
  }
  
  /* Page banner mobile */
  .page-banner {
    padding: 3.5rem 0 2rem;
  }
  
  .page-banner h1 {
    font-size: 1.8rem;
  }
  
  /* Section padding mobile */
  .section-pad {
    padding: 3rem 0;
  }
  
  /* Cards mobile */
  .card-dps {
    margin-bottom: 1.5rem;
  }
  
  /* Card grid mobile fix */
  .row.g-4 > * {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  .row.g-4 {
    margin-left: -1rem !important;
    margin-right: -1rem !important;
  }
  
  /* Quick links mobile */
  .quick-link-card {
    padding: 1.2rem 1rem;
  }
  
  /* Stats band mobile */
  .stat-block {
    padding: 1rem 0.5rem;
  }
  
  .stat-num {
    font-size: 1.8rem;
  }
  
  /* Footer mobile */
  .site-footer {
    text-align: center;
  }
  
  .footer-links {
    margin-bottom: 1.5rem;
  }
  
  .footer-bottom {
    text-align: center;
  }
  
  /* Forms mobile */
  .contact-card {
    margin-bottom: 1.5rem;
  }
  
  /* Gallery mobile */
  .gallery-filter .btn {
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
  }
}

@media (max-width:767px){
  /* Hero carousel small mobile */
  .hero-carousel .carousel-item {
    height: 50vh;
    min-height: 350px;
  }
  
  .hero-carousel .carousel-caption h1 {
    font-size: 1.5rem;
  }
  
  .hero-carousel .carousel-caption .eyebrow {
    font-size: 0.65rem;
    padding: 0.3rem 0.7rem;
  }
  
  /* Page banner small mobile */
  .page-banner {
    padding: 2.5rem 0 1.5rem;
  }
  
  .page-banner h1 {
    font-size: 1.5rem;
  }
  
  /* Section padding small mobile */
  .section-pad {
    padding: 2rem 0;
  }
  
  /* Section titles small mobile */
  .section-title {
    font-size: 1.6rem;
  }
  
  /* Cards small mobile */
  .card-dps {
    border-radius: var(--radius-md);
  }
  
  /* Card grid small mobile fix */
  .row.g-4 > * {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  
  .row.g-4 {
    margin-left: -0.75rem !important;
    margin-right: -0.75rem !important;
  }
  
  /* Icon badges small mobile */
  .icon-badge {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }
  
  /* Stats small mobile */
  .stat-num {
    font-size: 1.5rem;
  }
  
  .stat-label {
    font-size: 0.7rem;
  }
  
  /* Footer small mobile */
  .footer-logo {
    height: 45px;
  }
  
  /* Forms small mobile */
  .form-control, .form-select {
    font-size: 16px;
  }
  
  /* Back to top small mobile */
  .back-to-top {
    width: 40px;
    height: 40px;
    right: 15px;
    bottom: 15px;
  }
  
  /* Topbar small mobile */
  .topbar {
    font-size: 0.75rem;
    padding: 0.4rem 0;
  }
  
  .topbar .social-icon {
    width: 26px;
    height: 26px;
  }
  
  /* Header small mobile */
  .brand-logo {
    height: 65px;
    width: 65px;
  }
  
  .brand-title {
    font-size: 1.3rem;
  }
  
  .brand-sub {
    font-size: 0.7rem;
  }
  
  .brand-tag {
    font-size: 0.75rem;
  }
  
  /* Navbar small mobile */
  .navbar-dps .nav-link {
    font-size: 0.9rem;
    padding: 0.75rem 1rem !important;
  }
  
  /* Notice strip small mobile */
  .notice-strip {
    padding: 0.5rem 0;
  }
  
  .notice-strip .badge-label {
    padding: 0.3rem 0.8rem;
    font-size: 0.75rem;
  }
  
  .notice-marquee {
    font-size: 0.85rem;
  }
}