/* =====================================================
   STYLE.CSS
   Faizan School System Website Main CSS
   Updated, Cleaned, Commented Version
===================================================== */


/* =====================================================
   01 - GLOBAL SETTINGS
   Website ki basic spacing, fonts, body, image, links
===================================================== */

*{
  margin:0; /* default margin remove */
  padding:0; /* default padding remove */
  box-sizing:border-box; /* width calculation easy */
  font-family:'Segoe UI', Arial, sans-serif; /* website font */
}

html, body{
  width:100%; /* full page width */
  max-width:100%; /* extra horizontal width stop */
  overflow-x:hidden; /* side scroll remove */
  margin:0; /* browser default margin remove */
  padding:0; /* browser default padding remove */
}

body{
  background:#f5f7fa; /* website background */
  color:#102a43; /* default text color */
  padding-top:88px; /* fixed header ke liye space */
}

img{
  max-width:100%; /* image overflow stop */
  display:block; /* image bottom gap remove */
}

a{
  text-decoration:none; /* link underline remove */
  color:inherit; /* parent color use */
}


/* =====================================================
   02 - HEADER / TOP MENU
   Logo, navbar, active menu, mobile button
===================================================== */

.main-header{
  width:100%; /* full header width */
  height:88px; /* desktop header height */
  position:fixed; /* header top par fixed */
  top:0; /* top se start */
  left:0; /* left se start */
  z-index:9999; /* header sab ke upar */
  display:flex; /* logo aur menu same line */
  align-items:center; /* vertical center */
  justify-content:space-between; /* logo left menu right */
  padding:0 55px; /* left right space */
  margin-top:0 !important; /* top gap remove */
  background:rgba(0,0,0,0.28); /* transparent black */
  backdrop-filter:blur(10px); /* glass effect */
  -webkit-backdrop-filter:blur(10px); /* safari support */
  box-shadow:0 8px 30px rgba(0,0,0,0.18); /* soft shadow */
}

.main-header::after{
  content:""; /* border create */
  position:absolute; /* header ke andar */
  left:0; /* left start */
  bottom:0; /* bottom line */
  width:100%; /* full line */
  height:1px; /* thin line */
  background:rgba(255,255,255,0.45); /* white transparent line */
}

.logo img{
  width:72px; /* logo width */
  height:72px; /* logo height */
  object-fit:contain; /* logo crop na ho */
  border-radius:50%; /* round logo */
}

.navbar{
  display:flex; /* menu links line me */
  align-items:center; /* center align */
  gap:12px; /* links gap */
}

.navbar a{
  color:#fff; /* white text */
  font-size:15px; /* menu text size */
  font-weight:800; /* bold menu */
  text-transform:uppercase; /* capital letters */
  letter-spacing:0.3px; /* letter gap */
  padding:13px 12px; /* link spacing */
  position:relative; /* underline ke liye */
  text-shadow:0 2px 4px rgba(0,0,0,0.45); /* text readable */
}

.navbar a::after{
  content:""; /* underline create */
  position:absolute; /* link ke andar */
  left:50%; /* center se start */
  bottom:5px; /* text ke necha */
  width:0; /* normal hidden */
  height:3px; /* underline height */
  background:#fff; /* underline color */
  border-radius:10px; /* round underline */
  transform:translateX(-50%); /* exact center */
  transition:0.3s ease; /* smooth effect */
}

.navbar a:hover::after,
.navbar a.active::after{
  width:45%; /* hover active underline */
}

.menu-btn{
  display:none; /* desktop par hide */
  background:rgba(255,255,255,0.14); /* button bg */
  color:#fff; /* icon color */
  border:1px solid rgba(255,255,255,0.4); /* border */
  width:45px; /* button width */
  height:45px; /* button height */
  border-radius:8px; /* button round */
  font-size:28px; /* icon size */
  cursor:pointer; /* pointer */
  transition:transform 0.3s ease, background 0.3s ease; /* hover smooth */
}

.menu-btn:hover{
  transform:scale(1.08); /* hover zoom */
}


/* =====================================================
   03 - ANNOUNCEMENT BAR
   Front website running announcement text
===================================================== */

.announcement-bar{
  width:100%; /* full width */
  background:#000; /* black background */
  color:#fff; /* white text */
  overflow:hidden; /* moving text hide outside */
  white-space:nowrap; /* text one line */
  padding:8px 0; /* top bottom space */
  border-top:3px solid hsl(59,100%,57%); /* yellow top border */
  border-bottom:3px solid hsl(59,100%,57%); /* yellow bottom border */
}

.announcement-text{
  display:inline-block; /* animation ke liye */
  white-space:nowrap; /* line break stop */
  padding-left:100%; /* right se start */
  font-size:20px; /* text size */
  font-weight:500; /* medium bold */
  animation:announcementMove 22s linear infinite; /* moving animation */
}

@keyframes announcementMove{
  from{transform:translateX(0);} /* start position */
  to{transform:translateX(-100%);} /* left move */
}

/* =====================================================
   MANAGE ANNOUNCEMENT PREVIEW
   Speaker icon text ke sath proper align hoga
===================================================== */
.announcement-bar{
  width:100%;
  background:#000;
  color:#fff;
  overflow:hidden;
  white-space:nowrap;
  padding:8px 0;
  border-top:3px solid hsl(59,100%,57%);
  border-bottom:3px solid hsl(59,100%,57%);
}

.announcement-text{
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  padding-left:100%;
  font-size:20px;
  font-weight:500;
  animation:announcementMove 22s linear infinite;
}

.announcement-icon{
  display:inline-block;
  flex-shrink:0;
}

.announcement-message{
  display:inline-block;
}

@keyframes announcementMove{
  from{
    transform:translateX(0);
  }
  to{
    transform:translateX(-100%);
  }
}
/* =====================================================
   05 - HOME PAGE HERO SLIDER
   Main slider, cover image, heading, arrows
===================================================== */

.hero-slider{
  position:relative; /* slides ke liye */
  width:100%; /* full width */
  height:520px; /* desktop height */
  overflow:hidden; /* extra image hide */
  margin-top:-88px; /* header overlay effect */
  background:#111; /* fallback background */
}

.hero-slide{
  position:absolute; /* slides overlap */
  inset:0; /* full cover */
  opacity:0; /* hidden */
  visibility:hidden; /* hidden */
  transition:opacity 1s ease-in-out; /* fade smooth */
}

.hero-slide.active{
  opacity:1; /* active show */
  visibility:visible; /* visible */
  z-index:2; /* above others */
}

.hero-slide img{
  width:100%; /* full image width */
  height:100%; /* full image height */
  object-fit:cover; /* cover crop */
  object-position:center center; /* center image */
}

.hero-slider::after{
  content:""; /* dark overlay */
  position:absolute; /* slider ke upar */
  inset:0; /* full overlay */
  background:rgba(0,0,0,0.42); /* dark layer */
  z-index:3; /* image ke upar */
}

.hero-content{
  position:absolute; /* center content */
  top:50%; /* vertical center */
  left:50%; /* horizontal center */
  transform:translate(-50%, -50%); /* exact center */
  z-index:4; /* overlay ke upar */
  width:90%; /* responsive width */
  text-align:center; /* text center */
  color:#fff; /* white text */
}

.hero-content h1{
  font-size:52px; /* heading size */
  margin-bottom:12px; /* heading bottom space */
  font-weight:800; /* bold */
  text-shadow:0 5px 15px rgba(0,0,0,0.55); /* readable */
}

.hero-content p{
  font-size:22px; /* subtitle size */
  text-shadow:0 4px 12px rgba(0,0,0,0.55); /* readable */
}

.slider-btn{
  position:absolute; /* arrow fixed in slider */
  top:50%; /* vertical center */
  transform:translateY(-50%); /* exact center */
  z-index:5; /* content ke upar */
  width:48px; /* button width */
  height:48px; /* button height */
  border-radius:50%; /* round button */
  border:none; /* border remove */
  background:rgba(0,0,0,0.45); /* dark bg */
  color:#fff; /* white arrow */
  font-size:34px; /* arrow size */
  cursor:pointer; /* pointer */
}

.slider-btn.prev,
.prev{
  left:25px; /* left arrow position */
}

.slider-btn.next,
.next{
  right:25px; /* right arrow position */
}

.slider-btn:hover{
  background:rgba(0,0,0,0.75); /* hover dark */
}

.hero-slider.no-cover .slider-btn,
.hero-slider.no-cover .prev,
.hero-slider.no-cover .next{
  display:none !important; /* no cover par arrows hide */
}


/* =====================================================
   06 - HERO SLIDER IMAGE ANIMATIONS
   Fade, right-left, left-right, zoom, up-down
===================================================== */

.hero-slide.fade img{
  animation:coverFade 4s ease-in-out infinite; /* fade effect */
}

.hero-slide.right-left img{
  width:110%; /* movement ke liye extra width */
  animation:moveRightLeft 6s ease-in-out infinite alternate; /* right to left */
}

.hero-slide.left-right img{
  width:110%; /* movement ke liye extra width */
  animation:moveLeftRight 6s ease-in-out infinite alternate; /* left to right */
}

.hero-slide.zoom img{
  animation:slowZoom 7s ease-in-out infinite alternate; /* zoom effect */
}

.hero-slide.up-down img{
  height:110%; /* movement ke liye extra height */
  animation:moveUpDown 6s ease-in-out infinite alternate; /* up down */
}

@keyframes coverFade{
  0%{opacity:.85;} /* dim start */
  50%{opacity:1;} /* full visible */
  100%{opacity:.85;} /* dim end */
}

@keyframes moveRightLeft{
  from{transform:translateX(0);} /* start */
  to{transform:translateX(-8%);} /* left move */
}

@keyframes moveLeftRight{
  from{transform:translateX(-8%);} /* left start */
  to{transform:translateX(0);} /* normal */
}

@keyframes slowZoom{
  from{transform:scale(1);} /* normal */
  to{transform:scale(1.12);} /* zoom */
}

@keyframes moveUpDown{
  from{transform:translateY(0);} /* normal */
  to{transform:translateY(-8%);} /* up */
}


/* =====================================================
   07 - INNER PAGES COVER
   Academics, Gallery, About, Contact page top section
===================================================== */

.page-hero{
  height:310px; /* cover height */
  background:linear-gradient(135deg,#133667,#3f9ff9); /* default blue */
  display:flex; /* center content */
  justify-content:center; /* horizontal center */
  align-items:center; /* vertical center */
  text-align:center; /* text center */
  color:#fff; /* white text */
  position:relative; /* overlay support */
  overflow:hidden; /* extra hide */
  margin-top:-88px; /* header overlay */
  padding-top:88px; /* header space */
}

.page-hero h1,
.page-hero h2{
  font-size:42px; /* page title size */
  margin-bottom:10px; /* title bottom space */
}


/* =====================================================
   08 - DEFAULT COVER BACKGROUND
   Jab cover image upload na ho to blue gradient show hoga
===================================================== */

.default-cover{
  width:100%; /* full width */
  height:100%; /* full height */
  background:linear-gradient(135deg,#0b3d91 0%,#1976d2 50%,#64b5f6 100%); /* blue gradient */
}


/* =====================================================
   09 - COMMON SECTION TITLES
   Section heading, paragraph, see more button
===================================================== */

.section-title{
  text-align:center; /* title center */
  margin-bottom:45px; /* title bottom gap */
}

.section-title h2{
  font-size:38px; /* heading size */
  color:#0b3d91; /* blue heading */
  margin-bottom:12px; /* heading bottom space */
}

.section-title p{
  font-size:18px; /* paragraph size */
  color:#555; /* soft text */
}

.see-more-box{
  text-align:center; /* button center */
  margin-top:40px; /* top gap */
}

.see-more-btn{
  display:inline-block; /* button shape */
  background:#0b3d91; /* button blue */
  color:#fff; /* white text */
  padding:13px 35px; /* button spacing */
  border-radius:30px; /* round button */
  font-size:17px; /* text size */
  font-weight:bold; /* bold */
  transition:0.3s; /* hover smooth */
}

.see-more-btn:hover{
  background:#062b66; /* dark blue hover */
  transform:translateY(-2px); /* button lift */
}


/* =====================================================
   10 - HOME PAGE ACADEMICS SECTION
   Academic cards on home page
===================================================== */

.academics-preview{
  padding:80px 60px; /* section spacing */
  background:#f5f7fa; /* light background */
}

.academics-cards{
  display:grid; /* cards grid */
  grid-template-columns:repeat(3,1fr); /* 3 columns */
  gap:25px; /* cards gap */
}

.academic-card{
  background:#fff; /* card white */
  padding:35px 25px; /* card spacing */
  text-align:center; /* center text */
  border-radius:18px; /* card round */
  box-shadow:0 8px 22px rgba(0,0,0,0.08); /* soft shadow */
}

.academic-card h3{
  font-size:24px; /* card title */
  color:#0b3d91; /* blue title */
  margin-bottom:12px; /* title gap */
}

.academic-card p{
  font-size:16px; /* text size */
  color:#2d2d2d; /* text color */
  line-height:1.7; /* readable */
  text-align:justify; /* paragraph clean */
}


/* =====================================================
   11 - HOME PAGE GALLERY SECTION
   Gallery cards and image text
===================================================== */

.gallery-preview{
  padding:80px 60px; /* section space */
  background:#ebeced; /* light gray */
}

.gallery-grid{
  display:grid; /* gallery grid */
  grid-template-columns:repeat(4,1fr); /* 4 columns */
  gap:20px; /* image gap */
}

.gallery-box{
  width:100%; /* full card */
  height:auto; /* content based */
  background:#fff; /* white card */
  border-radius:14px; /* card round */
  overflow:hidden; /* image crop inside */
  box-shadow:0 6px 18px rgba(0,0,0,0.12); /* card shadow */
}

.gallery-box img{
  width:100%; /* full image */
  height:220px; /* fixed image height */
  object-fit:cover; /* image crop */
  object-position:center center; /* image center */
  cursor:pointer; /* zoom pointer */
  transition:0.4s ease; /* hover smooth */
}

.gallery-text{
  padding:14px 15px; /* text spacing */
  text-align:center; /* text center */
}

.gallery-text h3{
  margin:0 0 8px; /* heading spacing */
  color:#0b3f91; /* blue heading */
  font-size:20px; /* heading size */
}

.gallery-text p{
  margin:0; /* default margin remove */
  color:#444; /* text color */
  font-size:15px; /* text size */
  line-height:1.6; /* readable */
  text-align:justify; /* clean paragraph */
}


/* =====================================================
   12 - HOME PAGE ABOUT SECTION
   About image and content layout
===================================================== */

.about-preview{
  padding:90px 60px; /* section spacing */
  background:#fff; /* white bg */
}

.about-preview .about-container,
.about-container{
  display:grid; /* image text grid */
  grid-template-columns:420px 1fr; /* image fixed text flexible */
  gap:45px; /* image text gap */
  align-items:center; /* vertical align */
  background:#fff; /* box bg */
  padding:25px; /* box inner space */
  margin-bottom:35px; /* bottom gap */
  border-radius:25px; /* box round */
  box-shadow:0 8px 25px rgba(0,0,0,0.08); /* soft shadow */
}

.about-preview .about-image,
.about-image{
  width:100%; /* image box width */
  height:auto; /* auto height */
  padding:0; /* extra spacing remove */
  margin:0; /* extra margin remove */
  background:transparent; /* no bg */
  overflow:hidden; /* radius work */
  border-radius:20px; /* image box round */
}

.about-preview .about-image img,
.about-image img{
  display:block; /* bottom gap remove */
  width:100%; /* full width */
  height:auto; /* original ratio */
  max-height:450px; /* max image height */
  object-fit:contain; /* image crop na ho */
  object-position:center center; /* center image */
  border-radius:20px; /* image round */
  margin:0; /* margin remove */
}

.about-preview .about-content,
.about-content{
  padding:10px; /* content space */
  text-align:left; /* text left */
}

.about-preview .about-content h2,
.about-content h2{
  font-size:38px; /* heading size */
  color:#0b3d91; /* heading blue */
  margin-bottom:15px; /* heading gap */
}

.about-preview .about-content p,
.about-content p{
  font-size:17px; /* text size */
  color:#555; /* text color */
  line-height:1.8; /* readable */
  margin-bottom:14px; /* para gap */
  text-align:justify; /* clean paragraph */
}


/* =====================================================
   13 - HOME PAGE CONTACT SECTION
   Contact cards with optional images
===================================================== */

.contact-preview{
  padding:80px 60px; /* section space */
  background:linear-gradient(to bottom,#f8fbff,#eef5ff); /* light blue bg */
}

.contact-container{
  display:grid; /* contact grid */
  grid-template-columns:repeat(3,1fr); /* 3 cards */
  gap:25px; /* card gap */
}

.contact-card{
  background:#fff; /* white card */
  padding:35px 25px; /* card spacing */
  text-align:center; /* text center */
  border-radius:18px; /* card round */
  box-shadow:0 8px 22px rgba(0,0,0,0.08); /* soft shadow */
  overflow:hidden; /* image inside */
}

.contact-card img{
  width:100%; /* image width */
  height:auto; /* ratio keep */
  max-height:260px; /* image max height */
  object-fit:contain; /* image full show */
  border-radius:16px; /* image round */
  display:block; /* gap remove */
  margin-bottom:15px; /* image text gap */
}

.contact-card h3{
  font-size:22px; /* card title */
  color:#0b3d91; /* title blue */
  margin-bottom:12px; /* title gap */
}

.contact-card p{
  font-size:17px; /* text size */
  color:#000; /* black text */
  text-align:justify; /* clean paragraph */
}


/* =====================================================
   14 - CMS DYNAMIC DATA BLOCKS
   Image left, image right, image top, text only
===================================================== */

.cms-card{
  max-width:1100px; /* max card width */
  margin:40px auto; /* center card */
  padding:25px; /* inner spacing */
  background:#fff; /* white card */
  border-radius:18px; /* card round */
  box-shadow:0 10px 30px rgba(0,0,0,0.10); /* shadow */
  display:flex; /* image text row */
  align-items:center; /* vertical center */
  gap:30px; /* image text gap */
}

.cms-image{
  flex:1; /* image flexible */
  height:400px; /* image box height */
  background:#f5f7fa; /* image bg */
  border-radius:15px; /* box round */
  overflow:hidden; /* image inside */
  display:flex; /* center image */
  align-items:center; /* vertical center */
  justify-content:center; /* horizontal center */
}

.cms-image img{
  width:100% !important; /* full width */
  height:100% !important; /* full height */
  object-fit:contain !important; /* image crop na ho */
  object-position:center center !important; /* center image */
  border-radius:15px; /* image round */
  background:#f5f7fa; /* image bg */
}

.cms-text{
  flex:1; /* text flexible */
}

.cms-text h2{
  font-size:30px; /* title size */
  color:#0b4da2; /* blue title */
  margin-bottom:15px; /* title gap */
}

.cms-text p{
  font-size:17px; /* paragraph size */
  line-height:1.8; /* readable */
  color:#333; /* text color */
}

.image_right{
  flex-direction:row-reverse; /* image right side */
}

.image_left{
  flex-direction:row; /* image left side */
}

.image_top{
  flex-direction:column; /* image top */
  text-align:center; /* center text */
}

.text_only{
  display:block; /* only text layout */
}


/* =====================================================
   15 - CMS GRID SECTION
   Dynamic multiple cards, gallery cards, academic blocks
===================================================== */

.cms-grid-section{
  padding:40px 20px; /* section spacing */
  background:#f5f7fa; /* default bg */
}

.cms-grid-section:nth-of-type(odd){
  background:#f4f9ff; /* odd section bg */
}

.cms-grid-section:nth-of-type(even){
  background:#ebeced; /* even section bg */
}

.cms-grid{
  max-width:1200px; /* grid max width */
  margin:auto; /* center grid */
  display:grid; /* grid layout */
  grid-template-columns:repeat(3,1fr); /* 3 columns */
  gap:18px; /* card gap */
}

.cms-grid-card{
  background:#fff; /* card bg */
  border-radius:18px; /* card round */
  overflow:hidden; /* image inside */
  box-shadow:0 8px 24px rgba(0,0,0,0.08); /* shadow */
  transition:0.3s; /* hover smooth */
  padding:8px; /* inner spacing */
}

.cms-grid-card:hover{
  transform:translateY(-5px); /* hover lift */
}

.cms-grid-image{
  width:100%; /* image box width */
  height:220px; /* image box height */
  background:#fff; /* white bg */
  overflow:hidden; /* image inside */
  border-radius:12px; /* image box round */
  display:flex; /* center image */
  align-items:center; /* vertical center */
  justify-content:center; /* horizontal center */
}

.cms-grid-image img{
  width:100% !important; /* full width */
  height:100% !important; /* full height */
  object-fit:contain !important; /* full image show */
  object-position:center center !important; /* center image */
  background:#fff; /* white bg */
}

.cms-grid-text{
  padding:12px; /* text spacing */
  text-align:center; /* center text */
}

.cms-grid-text h3{
  color:#0b3d91; /* title blue */
  font-size:24px; /* title size */
  margin-bottom:8px; /* title gap */
}

.cms-grid-text p{
  color:#333; /* text color */
  font-size:16px; /* text size */
  line-height:1.6; /* readable */
  text-align:justify; /* clean paragraph */
}


/* =====================================================
   16 - GALLERY IMAGE ZOOM SYSTEM
   Click image zoom overlay
===================================================== */

.no-scroll{
  overflow:hidden; /* zoom open par body scroll stop */
}

.gallery-box img.zoomed{
  position:fixed; /* screen center */
  top:50%; /* vertical center */
  left:50%; /* horizontal center */
  transform:translate(-50%,-50%); /* exact center */
  width:auto !important; /* auto width */
  height:auto !important; /* auto height */
  max-width:90vw; /* max screen width */
  max-height:90vh; /* max screen height */
  object-fit:contain !important; /* full image show */
  z-index:99999; /* top layer */
  background:#fff; /* white bg */
  padding:10px; /* image padding */
  border-radius:12px; /* round image */
  box-shadow:0 0 0 9999px rgba(0,0,0,0.8); /* dark overlay */
}

.zoom-gallery-img{
  cursor:pointer; /* zoom pointer */
}

.full-zoom-overlay{
  position:fixed; /* full screen */
  inset:0; /* all sides */
  z-index:999999; /* very top */
  background:rgba(0,0,0,0.88); /* dark overlay */
  display:none; /* default hidden */
  align-items:center; /* vertical center */
  justify-content:center; /* horizontal center */
  padding:20px; /* mobile gap */
}

.full-zoom-overlay.active{
  display:flex; /* overlay show */
}

.full-zoom-overlay img{
  max-width:95vw; /* image max width */
  max-height:92vh; /* image max height */
  width:auto; /* original width */
  height:auto; /* original height */
  object-fit:contain; /* full image */
  background:#fff; /* white bg */
  border-radius:10px; /* round */
}

.zoom-close{
  position:absolute; /* close button */
  top:20px; /* top space */
  right:30px; /* right space */
  color:#fff; /* white close */
  font-size:55px; /* close size */
  font-weight:bold; /* bold close */
  cursor:pointer; /* pointer */
  z-index:1000000; /* overlay ke upar */
  line-height:1; /* height control */
  transition:0.3s; /* hover smooth */
}

.zoom-close:hover{
  transform:scale(1.15); /* hover zoom */
}


/* =====================================================
   17 - POPUP ANNOUNCEMENT SYSTEM
   Home page popup announcement
===================================================== */

.popup-overlay{
  position:fixed; /* full screen */
  inset:0; /* all sides */
  width:100%; /* full width */
  height:100%; /* full height */
  background:rgba(0,0,0,0.65); /* dark overlay */
  display:flex; /* popup center */
  align-items:center; /* vertical center */
  justify-content:center; /* horizontal center */
  z-index:999999; /* top layer */
  padding:15px; /* mobile space */
}

.popup-content{
  position:relative; /* close button support */
  width:90%; /* responsive width */
  max-width:520px; /* max popup width */
  max-height:90vh; /* popup max height */
  background:#fff; /* popup white */
  border-radius:18px; /* popup round */
  padding:25px 20px 20px; /* inner space */
  text-align:center; /* center text */
  box-shadow:0 15px 45px rgba(0,0,0,0.35); /* popup shadow */
  animation:popupZoom 0.35s ease; /* open animation */
  overflow:auto; /* long content scroll */
}

.popup-content h2{
  color:#0b3d91; /* heading blue */
  font-size:26px; /* heading size */
  margin-bottom:15px; /* heading gap */
  line-height:1.3; /* heading spacing */
}

.popup-content img{
  width:100%; /* image width */
  max-height:420px; /* image max height */
  object-fit:contain; /* image crop na ho */
  display:block; /* image block */
  margin:auto; /* center image */
  border-radius:12px; /* image round */
}

.popup-close{
  position:absolute; /* close position */
  top:10px; /* top space */
  right:12px; /* right space */
  width:36px; /* button width */
  height:36px; /* button height */
  border:none; /* border remove */
  border-radius:50%; /* round */
  background:#dc3545; /* red bg */
  color:#fff; /* white x */
  font-size:26px; /* x size */
  line-height:36px; /* center x */
  cursor:pointer; /* pointer */
  font-weight:bold; /* bold */
  z-index:10; /* content ke upar */
}

.popup-close:hover{
  background:#b02a37; /* dark red hover */
}

@keyframes popupZoom{
  from{
    transform:scale(0.85); /* small start */
    opacity:0; /* hidden start */
  }
  to{
    transform:scale(1); /* normal */
    opacity:1; /* visible */
  }
}


/* =====================================================
   18 - FOOTER SECTION
   Website footer, links, contact info
===================================================== */

.footer{
  background:#0b3d91; /* footer blue */
  color:#fff; /* footer white text */
  padding-top:60px; /* top spacing */
}

.footer-container{
  max-width:1300px; /* footer max width */
  margin:auto; /* center footer */
  padding:0 60px; /* left right space */
  display:grid; /* footer grid */
  grid-template-columns:repeat(4,1fr); /* 4 columns */
  gap:40px; /* column gap */
}

.footer-box h3{
  margin-bottom:20px; /* title gap */
  font-size:24px; /* title size */
}

.footer-box p{
  line-height:1.8; /* readable */
  color:#e6e6e6; /* soft white */
}

.footer-box ul{
  list-style:none; /* bullets remove */
}

.footer-box ul li{
  margin-bottom:12px; /* list gap */
}

.footer-box ul li a{
  color:#e6e6e6; /* link color */
}

.footer-bottom{
  text-align:center; /* center copyright */
  margin-top:50px; /* top gap */
  padding:20px; /* spacing */
  border-top:1px solid rgba(255,255,255,0.2); /* top border */
}

.footer-bottom p{
  color:#dcdcdc; /* copyright text */
}


/* =====================================================
   19 - CLICKABLE HOME CARDS
   Full card clickable system
===================================================== */

.home-click-card{
  text-decoration:none; /* underline remove */
  color:inherit; /* original color */
  cursor:pointer; /* pointer */
  display:block; /* full card clickable */
}


/* =====================================================
   20 - RESPONSIVE DESIGN TABLET
   Screens below 992px
===================================================== */

@media(max-width:992px){

  .main-header{
    padding:0 25px; /* header side space less */
  }

  .navbar a{
    font-size:13px; /* menu text small */
    padding:11px 8px; /* link spacing small */
  }

  .gallery-grid,
  .cms-grid{
    grid-template-columns:repeat(2,1fr); /* 2 columns */
  }

  .footer-container{
    grid-template-columns:1fr 1fr; /* footer 2 columns */
    padding:0 25px; /* footer side space */
  }
}


/* =====================================================
   21 - RESPONSIVE DESIGN MOBILE
   Screens below 768px
===================================================== */

@media(max-width:768px){

  body{
    padding-top:76px; /* mobile header space */
  }

  .main-header{
    height:76px; /* mobile header height */
    padding:0 15px; /* mobile side space */
    background:rgba(0,0,0,1); /* solid black */
  }

  .logo img{
    width:58px; /* mobile logo width */
    height:58px; /* mobile logo height */
  }

  .menu-btn{
    display:block; /* mobile menu show */
    z-index:9999; /* button top */
  }

  .navbar{
    position:absolute; /* dropdown position */
    top:76px; /* header ke necha */
    left:0; /* left start */
    width:100%; /* full width */
    display:flex !important; /* animation ke liye flex */
    flex-direction:column; /* links column */
    background:#0b3f91 !important; /* blue mobile bg */
    backdrop-filter:blur(12px); /* blur effect */
    z-index:9998; /* header ke necha */
    padding:0 15px; /* side padding */
    max-height:0; /* default closed */
    overflow:hidden; /* closed content hide */
    opacity:0; /* hidden */
    transform:translateY(-10px); /* thora upar */
    transition:max-height 0.8s ease, opacity 0.6s ease, transform 0.35s ease; /* smooth open close */
    box-shadow:0 10px 25px rgba(0,0,0,0.20); /* dropdown shadow */
  }

  .navbar.show,
  .navbar.active{
    max-height:500px; /* dropdown open height */
    opacity:1; /* show */
    transform:translateY(0); /* normal position */
    padding:15px; /* open spacing */
  }

  .navbar a{
    width:100%; /* full link width */
    display:block; /* block link */
    text-align:center; /* center text */
    color:#fff !important; /* white text */
    text-shadow:none !important; /* shadow remove */
    font-size:16px; /* mobile font */
    font-weight:600; /* medium bold */
    padding:14px 20px; /* link spacing */
    margin-bottom:8px; /* link gap */
    border-radius:20px; /* link round */
    opacity:0; /* animation hidden */
    transform:translateX(-12px); /* left se aaye */
    transition:all 0.6s ease; /* link animation */
  }

  .navbar.show a,
  .navbar.active a{
    opacity:1; /* links show */
    transform:translateX(0); /* normal */
  }

  .navbar.show a:hover,
  .navbar.show a.active,
  .navbar.active a:hover,
  .navbar.active a.active{
    background:#fff !important; /* hover white */
    color:#0b3f91 !important; /* hover blue text */
  }

  .navbar a:hover::after,
  .navbar a.active::after{
    width:35%; /* mobile underline */
  }

  .hero-slider{
    height:420px; /* mobile slider height */
    margin-top:-76px; /* header overlay */
  }

  .hero-content h1{
    font-size:34px; /* mobile heading */
  }

  .hero-content p{
    font-size:16px; /* mobile subtitle */
  }

  .page-hero{
    height:240px; /* mobile page cover */
    margin-top:-76px; /* header overlay */
    padding-top:76px; /* header space */
  }

  .page-hero h1,
  .page-hero h2{
    font-size:28px; /* mobile page title */
  }

  .academics-preview,
  .gallery-preview,
  .about-preview,
  .contact-preview{
    padding:60px 20px; /* mobile section space */
  }

  .academics-cards,
  .contact-container,
  .gallery-grid,
  .cms-grid{
    grid-template-columns:1fr; /* one column */
  }

  .about-preview .about-container,
  .about-container{
    grid-template-columns:1fr; /* about one column */
    gap:25px; /* mobile gap */
    padding:20px; /* mobile box space */
  }

  .about-preview .about-image img,
  .about-image img{
    max-height:none; /* image full height allow */
  }

  .cms-card,
  .image_left,
  .image_right{
    flex-direction:column; /* cms mobile column */
  }

  .cms-image,
  .cms-text{
    width:100%; /* full width */
  }

  .cms-image{
    height:300px; /* mobile cms image height */
  }

  .footer-container{
    grid-template-columns:1fr; /* footer one column */
  }

  .zoom-close{
    top:15px; /* close top */
    right:20px; /* close right */
    font-size:45px; /* close size */
  }
}


/* =====================================================
   22 - RESPONSIVE DESIGN SMALL MOBILE
   Screens below 600px
===================================================== */

@media(max-width:600px){

  .cms-grid-image{
    height:210px; /* small mobile image height */
  }

  .announcement-text{
    font-size:14px; /* announcement small */
    animation-duration:18s; /* faster movement */
  }

  .popup-content{
    width:95%; /* popup wider */
    padding:22px 14px 16px; /* popup spacing */
    border-radius:14px; /* popup round */
  }

  .popup-content h2{
    font-size:21px; /* popup title small */
    margin-bottom:12px; /* title gap */
  }

  .popup-content img{
    max-height:330px; /* popup image height */
  }

  .popup-close{
    width:32px; /* close width */
    height:32px; /* close height */
    line-height:32px; /* x center */
    font-size:24px; /* x size */
  }
}


/* =====================================================
   23 - RESPONSIVE DESIGN EXTRA SMALL MOBILE
   Screens below 480px
===================================================== */

@media(max-width:480px){

  .hero-slider{
    height:380px; /* extra small slider */
  }

  .hero-content h1{
    font-size:30px; /* heading smaller */
  }

  .hero-content p{
    font-size:17px; /* subtitle size */
  }

  .slider-btn{
    width:42px; /* arrow width */
    height:42px; /* arrow height */
    font-size:28px; /* arrow size */
  }
}



/* Admin panel */

/* TOP BAR */

.top-bar{
    background:#1f238b;
    color:#fff;
    height:40px;
    padding:0 30px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-top:2px solid #f4c400;
    font-size:14px;
}

.top-left{
    display:flex;
    gap:25px;
}

.top-left span{
    display:flex;
    align-items:center;
    gap:5px;
}

.top-right a{
    color:#fff;
    text-decoration:none;
    font-weight:600;
}

.top-right a:hover{
    color:#f4c400;
}

@media(max-width:768px){

    .top-bar{
        height:auto;
        padding:10px;
        flex-direction:column;
        gap:8px;
    }

    .top-left{
        flex-direction:column;
        gap:5px;
        text-align:center;
    }
}