/* ======================================================
   GLOBAL RESET & TYPOGRAPHY
====================================================== */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Inter', sans-serif;
}

body{
  background:#f4f6fb;
  color:#222;
  font-size:16px;
  line-height:1.65;
}

h1,h2,h3,h4{
  font-family:'Playfair Display', serif;
  letter-spacing:0.4px;
}

/* ======================================================
   TOP BAR
====================================================== */
.topbar{
  background:#062b55;
  color:#fff;
  padding:10px 40px;
  display:flex;
  justify-content:space-between;
  font-size:14px;
}

/* ======================================================
   HEADER / BRANDING
====================================================== */
header{
  background:linear-gradient(135deg,#021b79,#0575e6);
  color:#fff;
  padding:50px 60px;
  display:flex;
  align-items:center;
  gap:40px;
}

.logo-wrap{
  width:170px;
  height:170px;
  border-radius:50%;
  background:rgba(255,255,255,0.15);
  backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 20px 45px rgba(0,0,0,0.45);
}

.logo-wrap img{
  width:130px;
  height:auto;
  background:#fff;
  border-radius:50%;
  padding:12px;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,0.4));
}
/* ======================================================
   ADMISSION ANIMATION
====================================================== */
.admission-badge {
  position: relative;
  display: inline-block;
  padding: 15px 35px;
  background: linear-gradient(90deg, #ff5722, #ff9800);
  border-radius: 50px; /* Oval shape */
  color: #fff;
  font-weight: 600;
  font-size: 18px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  text-align: center;
  margin-left: 20px; /* space from logo */
  
  /* Blinking animation */
  animation: blink 1.5s infinite alternate;
}

/* Blinking keyframes */
@keyframes blink {
  0% {
    opacity: 1;
    box-shadow: 0 0 10px rgba(255,87,34,0.6), 0 0 20px rgba(255,152,0,0.6);
  }
  50% {
    opacity: 0.8;
    box-shadow: 0 0 20px rgba(255,87,34,0.8), 0 0 40px rgba(255,152,0,0.8);
  }
  100% {
    opacity: 1;
    box-shadow: 0 0 10px rgba(255,87,34,0.6), 0 0 20px rgba(255,152,0,0.6);
  }
}

/* Text stays on top */
.admission-badge span {
  position: relative;
  z-index: 2;
}

/* Hover glow (optional) */
.admission-badge:hover {
  transform: scale(1.05);
  transition: 0.3s;
}

/* Responsive */
@media(max-width:768px){
  .admission-badge {
    font-size: 16px;
    padding: 12px 25px;
    margin-left: 10px;
  }
}



header h1{
  font-size:56px;
  font-weight:700;
  margin-bottom:6px;
}

header h2{
  font-size:26px;
  font-weight:500;
  color:#ffeb3b;
  margin-bottom:8px;
}

header p{
  font-size:18px;
   color:#fcdb04;
  opacity:0.95;
}

/* ======================================================
   NAVBAR
====================================================== */
nav{
  background:#0b3c7a;
  position:relative;
  z-index:1000;
}

.menu-toggle{
  display:none;
  font-size:26px;
  color:#fff;
  padding:15px 20px;
  cursor:pointer;
}

nav ul{
  list-style:none;
  display:flex;
  padding:0 40px;
}

nav li{
  position:relative;
}

nav a{
  display:block;
  padding:16px 22px;
  color:#fff;
  text-decoration:none;
  font-weight:500;
}

nav a:hover{
  background:#ff5722;
}

/* ======================================================
   DROPDOWN – DESKTOP
====================================================== */
nav ul ul{
  position:absolute;
  top:110%;
  left:0;
  background:#fff;
  min-width:220px;
  border-radius:12px;
  padding:8px 0;
  box-shadow:0 20px 40px rgba(0,0,0,0.18);
  display:none;
  opacity:0;
  transform:translateY(12px);
  transition:all 0.3s ease;
  z-index:2000;
}

nav li:hover > ul{
  display:block;
  opacity:1;
  transform:translateY(0);
}

nav ul ul li{
  position:relative;
}

nav ul ul li a{
  padding:12px 22px;
  color:#0b3c7a;
  transition:all 0.3s;
}

nav ul ul li a:hover{
  background:linear-gradient(90deg,#0b3c7a,#0575e6);
  color:#fff;
  padding-left:30px;
}

/* SECOND LEVEL */
nav ul ul ul{
  top:0;
  left:100%;
  transform:translateX(10px);
  opacity:0;
  display:none;
}

nav ul ul li:hover > ul{
  display:block;
  opacity:1;
  transform:translateX(0);
}

nav li:has(ul) > a::after{
  content:'▼';
  font-size:10px;
  margin-left:6px;
}

/* ======================================================
   SLIDER
====================================================== */
.slider{
  width:100%;
  height:80vh;
  position:relative;
  overflow:hidden;
}

.slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1s ease;
}

.slide.active{
  opacity:1;
}

.slide img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.caption{
  position:absolute;
  bottom:40px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(0,0,0,.6);
  color:#fff;
  padding:15px 30px;
  font-size:26px;
  border-radius:6px;
}

/* ======================================================
   FEATURES SECTION
====================================================== */
.features{
  background:#1e88e5;
  padding:60px 40px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:30px;
}

.feature{
  background:#fff;
  padding:30px;
  text-align:center;
  border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,.15);
  position:relative;
  overflow:hidden;
  text-decoration:none;
  color:#222;
  transition:0.4s;
}

.feature:hover{
  transform:translateY(-8px);
}

/* ICON */
.icon-circle{
  width:70px;
  height:70px;
  background:#0b3c7a;
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:32px;
  margin:0 auto 15px;
  transition:0.4s;
}

.feature:hover .icon-circle{
  background:#ff5722;
  transform:rotate(8deg) scale(1.1);
}

/* OVERLAY */
.feature::after{
  content:'Click to Open';
  position:absolute;
  inset:0;
  background:rgba(11,60,122,0.88);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  font-weight:600;
  opacity:0;
  transition:0.4s;
}

.feature:hover::after{
  opacity:1;
}

/* ======================================================
   COURSES
====================================================== */
.section-title{
  text-align:center;
  margin:60px 0 30px;
  color:#0b3c7a;
}

.row1{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:25px;
  padding:0 40px 60px;
}

.course-card{
  background:#fff;
  text-decoration:none;
  color:#222;
  padding:30px 20px;
  border-radius:15px;
  text-align:center;
  position:relative;
  transition:0.4s;
  box-shadow:0 8px 18px rgba(0,0,0,0.12);
}

.course-card:hover{
  transform:translateY(-10px);
  box-shadow:0 18px 35px rgba(0,0,0,0.3);
}

.course-icon{
  width:75px;
  height:75px;
  background:#0b3c7a;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 20px;
  color:#fff;
  font-size:30px;
}

.course-card::after{
  content:'View Course';
  position:absolute;
  inset:0;
  background:rgba(11,60,122,0.9);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  opacity:0;
  transition:0.4s;
  border-radius:15px;
}

.course-card:hover::after{
  opacity:1;
}
/* ======================================================
   COURSES WE OFFER – BLUE BACKGROUND
====================================================== */
.row1{
  background:linear-gradient(135deg,
    #0b3c7a 0%,
    #085090 50%,
    #42a5f5 100%
  );
  padding:70px 40px;
  position:relative;
  overflow:hidden;
}


/* Soft overlay to reduce harshness */
/* .row1::before{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(255, 255, 255, 0.842);
  z-index:0;
} */

/* .row1 > *{
  position:relative;
  z-index:1;
} */



/* ======================================================
   COLORFUL SECTIONS – COURSES & FEATURES
====================================================== */

/* Section background */
.features,
.row1{
  background:linear-gradient(135deg,#eef4ff,#ffffff);
}

/* ======================================================
   COURSE CARD COLORS
====================================================== */

/* IIT-JEE / NEET */
.course-card:nth-child(1){
  border-top:6px solid #1e88e5;
}
.course-card:nth-child(1) .course-icon{
  background:#1e88e5;
}
.course-card:nth-child(1)::after{
  background:rgba(30,136,229,0.9);
}

/* FOUNDATION */
.course-card:nth-child(2){
  border-top:6px solid #43a047;
}
.course-card:nth-child(2) .course-icon{
  background:#43a047;
}
.course-card:nth-child(2)::after{
  background:rgba(67,160,71,0.9);
}

/* OLYMPIAD */
.course-card:nth-child(3){
  border-top:6px solid #8e24aa;
}
.course-card:nth-child(3) .course-icon{
  background:#8e24aa;
}
.course-card:nth-child(3)::after{
  background:rgba(142,36,170,0.9);
}

/* NIMCET */
.course-card:nth-child(4){
  border-top:6px solid #fb8c00;
}
.course-card:nth-child(4) .course-icon{
  background:#fb8c00;
}
.course-card:nth-child(4)::after{
  background:rgba(251,140,0,0.9);
}

/* GATE */
.course-card:nth-child(5){
  border-top:6px solid #00897b;
}
.course-card:nth-child(5) .course-icon{
  background:#00897b;
}
.course-card:nth-child(5)::after{
  background:rgba(0,137,123,0.9);
}

.features{
  background:linear-gradient(135deg,
    #0b3c7a 0%,
    #085090 50%,
    #42a5f5 100%
  );
  padding:70px 40px;
  position:relative;
  overflow:hidden;
}


/* Soft overlay to reduce harshness */
.features::before{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(255, 255, 255, 0.842);
  z-index:0;
}

.features > *{
  position:relative;
  z-index:1;
}

/* Features background */
.features{
  background:linear-gradient(135deg,
    #0ba5b3 0%,
    #778a9b 50%,
    #286fa9 100%
  );
}

/* Courses background */
.row1{
  background:linear-gradient(135deg,
    #07b9b6 0%,
    #56a1ab 50%,
    #6083a0 100%
  );
}
.course-card:hover .course-icon{
  transform:rotate(6deg) scale(1.15);
  transition:0.4s;
}

/* ======================================================
   FEATURE CARD COLORS (MATCHED STYLE)
====================================================== */

/* Photo Gallery */
.gallery-card{
  border-top:6px solid #1e88e5;
}
.gallery-card .icon-circle{
  background:#1e88e5;
}
.gallery-card::after{
  background:rgba(30,136,229,0.9);
}

/* Admission Notice */
.feature-card:nth-child(2){
  border-top:6px solid #fb8c00;
}
.feature-card:nth-child(2) .icon-circle{
  background:#fb8c00;
}
.feature-card:nth-child(2)::after{
  background:rgba(251,140,0,0.9);
}

/* Fees Structure */
.feature-card:nth-child(3){
  border-top:6px solid #43a047;
}
.feature-card:nth-child(3) .icon-circle{
  background:#43a047;
}
.feature-card:nth-child(3)::after{
  background:rgba(67,160,71,0.9);
}

/* Parents Zone */
.feature-card:nth-child(4){
  border-top:6px solid #8e24aa;
}
.feature-card:nth-child(4) .icon-circle{
  background:#8e24aa;
}
.feature-card:nth-child(4)::after{
  background:rgba(142,36,170,0.9);
}

/* ======================================================
   COLORFUL BACKGROUND – FEATURES SECTION
====================================================== */
.features{
  background:linear-gradient(135deg,
    #0b3c7a 0%,
    #1e88e5 50%,
    #42a5f5 100%
  );
  padding:70px 40px;
  position:relative;
  overflow:hidden;
}


/* Soft overlay to reduce harshness */
.features::before{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(255, 255, 255, 0.326);
  z-index:0;
}

.features > *{
  position:relative;
  z-index:1;
}


/* ======================================================
   DIRECTOR MESSAGE
====================================================== */
.director-message{
  background:linear-gradient(135deg,#eef4ff,#ffffff);
  padding:80px 40px;
}

.director-card{
  max-width:1100px;
  margin:auto;
  background:#fff;
  border-radius:20px;
  display:grid;
  grid-template-columns:280px 1fr;
  gap:40px;
  padding:40px;
  box-shadow:0 25px 60px rgba(0,0,0,0.15);
}

.director-photo img{
  width:220px;
  height:220px;
  border-radius:50%;
  object-fit:cover;
  border:6px solid #0b3c7a;
  display: none;
}

.director-content h2{
  color:#0b3c7a;
  font-size:32px;
  margin-bottom:15px;
}


/* ======================================================
   FOOTER
====================================================== */
footer{
  background:#020c2b;
  color:#ccc;
  padding:60px 40px;
}

footer .cols{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:30px;
}

footer h4{
  color:#fff;
  margin-bottom:12px;
}

footer ul{
  list-style:none;
}

/* ======================================================
   PAGE CONTENT – HERO / CARDS / TABLE / CTA / BADGES
   (used by course detail pages, about, contact, etc.)
====================================================== */
.hero{
  background:linear-gradient(135deg,#021b79 0%,#0575e6 100%);
  color:#fff;
  text-align:center;
  padding:60px 20px;
}
.hero h1{font-size:36px;margin-bottom:10px}
.hero p{font-size:18px;color:#d6e6ff}

.container{
  width:90%;
  max-width:1100px;
  margin:30px auto;
  padding:0 20px;
}

main.container{
  padding-bottom:40px;
}

.card{
  background:#fff;
  border-radius:14px;
  padding:24px 28px;
  margin-bottom:25px;
  box-shadow:0 4px 18px rgba(0,0,0,.08);
  border:1px solid #e7e9ff;
}
.card h3{
  margin:0 0 14px;
  color:#0b3c7a;
}
.card p{color:#555}
.card ul{margin:10px 0 0 18px;color:#444}
.card ul li{margin-bottom:6px}

.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  margin:28px 0;
}
@media(min-width:800px){
  .grid{grid-template-columns:1fr 1fr}
  .card.half{margin-bottom:0}
}

/* Tables */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:14px;
  border:1px solid #e6e8ff;
  background:#fff;
}
.table th,.table td{padding:12px 16px;text-align:left}
.table thead th{background:#eef2ff;color:#0b3c7a;font-weight:600}
.table tr+tr td{border-top:1px solid #eef0ff}

/* Faculty list */
.faculty-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;
}
.faculty{
  background:#f7f9ff;
  padding:18px;
  border-radius:12px;
  border:1px solid #e0e4f0;
  transition:transform .2s;
}
.faculty:hover{transform:translateY(-4px)}
.faculty h4{margin:0 0 6px;color:#0b3c7a}
.faculty .role{font-size:13px;color:#666;font-style:italic;margin-bottom:8px}

/* Badges */
.badge{
  display:inline-block;
  padding:7px 14px;
  margin:5px 5px 0 0;
  border-radius:20px;
  background:#ff5722;
  color:#fff;
  font-size:13px;
  font-weight:600;
}

/* CTA Section */
.cta{
  margin:30px 0;
  background:linear-gradient(135deg,#0b3c7a,#0575e6);
  color:#fff;
  border-radius:14px;
  padding:28px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.cta h3{margin:0 0 6px;color:#fff}
.cta p{color:#dce6f8;margin:0}

/* Buttons */
.btn{
  display:inline-block;
  padding:12px 24px;
  border-radius:10px;
  background:#ff5722;
  color:#fff;
  font-weight:700;
  text-decoration:none;
  transition:0.3s;
}
.btn:hover{background:#e64a19}
.btn.secondary{
  background:transparent;
  color:#fff;
  border:2px solid #fff;
}
.btn.secondary:hover{background:rgba(255,255,255,.15)}

/* Enroll Button */
.enroll-btn{
  display:inline-block;
  padding:14px 35px;
  border-radius:50px;
  background:linear-gradient(90deg,#ff5722,#ff9800);
  color:#fff;
  font-weight:700;
  font-size:17px;
  text-decoration:none;
  transition:all 0.3s ease;
  box-shadow:0 4px 15px rgba(255,87,34,0.4);
}
.enroll-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(255,87,34,0.6);
}
.fee-highlight{
  color:#ff5722;
  font-weight:700;
}

/* Faculty Grid (faculty.php page) */
.faculty-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
  margin-top:30px;
}
.faculty-card{
  background:#fff;
  border-radius:14px;
  box-shadow:0 4px 18px rgba(0,0,0,.08);
  padding:24px;
  text-align:center;
  transition:transform .2s;
}
.faculty-card:hover{transform:translateY(-5px)}
.faculty-card h3{color:#0b3c7a;margin-bottom:10px}
.faculty-card p{font-size:14px;color:#555;margin-bottom:15px}

/* ======================================================
   RESPONSIVE
====================================================== */
@media(max-width:768px){

  header{
    flex-direction:column;
    text-align:center;
    padding:40px 20px;
  }

  nav ul{
    display:none;
    flex-direction:column;
    padding:0;
    background:#0b3c7a;
  }

  nav ul.show{
    display:flex;
  }

  .menu-toggle{
    display:block;
  }

  nav ul ul{
    position:static;
    transform:none;
    opacity:1;
    display:none;
    background:#f7f9fc;
  }

  nav li.dropdown-submenu.open > ul{
    display:block;
  }

  .slider{
    height:60vh;
  }
}
/* ======================================================
   DIRECTOR MESSAGE – MOBILE FIX
====================================================== */
@media (max-width: 768px){

  .director-card{
    grid-template-columns:1fr;   /* Stack vertically */
    text-align:center;
    padding:30px;
  }

  .director-photo{
    margin-bottom:20px;
  }

  .director-photo img{
    width:180px;
    height:180px;
    margin:auto;
  }

  .director-content h2{
    font-size:26px;
  }

  .director-content p{
    font-size:15px;
    line-height:1.7;
  }
}
/* ======================================================
   FOOTER – MOBILE FIX
====================================================== */
@media (max-width: 768px){

  footer{
    padding:40px 20px;
    text-align:center;
  }

  footer .cols{
    grid-template-columns:1fr;   /* Stack columns */
    gap:25px;
  }

  footer h4{
    font-size:18px;
    margin-bottom:10px;
  }

  footer p,
  footer li{
    font-size:15px;
    line-height:1.6;
  }

  footer ul{
    padding:0;
  }

  footer li{
    margin-bottom:10px;
    cursor:pointer;
  }

  footer li:hover{
    color:#fff;
  }

  /* Social text spacing */
  footer .cols div:last-child p{
    margin-top:8px;
  }
}

/* ======================================================
   PAGE CONTENT – RESPONSIVE
====================================================== */
@media(max-width:768px){
  .hero{padding:40px 15px}
  .hero h1{font-size:26px}
  .hero p{font-size:15px}
  .grid{grid-template-columns:1fr}
  .cta{flex-direction:column;text-align:center}
  .faculty-list{grid-template-columns:1fr}
  .faculty-grid{grid-template-columns:1fr}
}