/* ==== Global ==== */
*{font-family:'Poppins',sans-serif;scroll-behavior:smooth}
body{min-height:100vh;display:flex;flex-direction:column;color:#001f3f;background:#f8fbff}

/* ==== Glass Navbar ==== */
.glass-nav-blue{
    background:linear-gradient(135deg,rgba(2,129,255,.95),rgba(0,126,255,.98))!important;
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(255,255,255,.2);
    box-shadow:0 4px 25px rgba(0,0,80,.3);
    transition:all .4s ease;
}
.glass-nav-blue .navbar-brand,
.glass-nav-blue .nav-link,
.glass-nav-blue .dropdown-toggle{
    color:#fff!important;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.text-gold{color:#ffd700!important;line-height:1.5}
.glass-nav-blue .nav-link:hover,
.glass-nav-blue .dropdown-item:hover{
    color:#80e5ff!important;transform:translateY(-2px);transition:.3s ease;
}
.glass-nav-blue .nav-link.active{
    color:#ffd700!important;font-weight:700;
    text-shadow:0 0 10px rgba(255,215,0,.7);
}
.nav-item{font-size:15px}

/* ==== Glass Dropdown (Base) ==== */
.glass-dropdown{
    background:rgba(0,51,102,.97);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.2);
    border-radius:14px;
    margin-top:10px;
    box-shadow:0 10px 30px rgba(0,0,0,.3);
    min-width:220px;
    padding:0.5rem 0;
}
.glass-dropdown .dropdown-item{
    color:#e6f2ff!important;padding:12px 20px;transition:.3s;
}
.glass-dropdown .dropdown-item:hover{
    background:linear-gradient(90deg,rgba(0,128,255,.5),rgba(0,64,128,.7));
    color:#ffd700!important;border-radius:8px;margin:4px 8px;
}

/* ==== Icons ==== */
.nav-link i,.dropdown-item i{
    font-size:15px;transition:all .3s ease;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));
}
.icon-home{color:#00ccff}.icon-about{color:#ffcc00}
.icon-academics{color:#00e676}.icon-office{color:#ff9800}
.icon-activity{color:#ff4081}.icon-gallery{color:#e91e63}
.icon-contact{color:#ff4081}.icon-login{color:#4caf50}
.nav-link:hover i,.dropdown-item:hover i{
    transform:scale(1.2);filter:drop-shadow(0 0 8px rgba(255,255,255,.6));
}
.nav-link.active i{
    color:#ffd700!important;
    animation:pulseGold 1.5s infinite;
}
@keyframes pulseGold{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}

/* ==== Logo ==== */
.logo-img{
    height:59px;transition:all .3s;
    filter:drop-shadow(0 2px 5px rgba(0,0,0,.3)) brightness(1.5);
}
.navbar-brand:hover .logo-img{
    transform:scale(1.12);
    filter:drop-shadow(0 4px 8px rgba(0,0,0,.4)) brightness(1.7);
}
.text-grey-custom{color:#fff;font-size:16px;}

/* ==== CONTAINER ==== */
.navbar-container{
    max-width:1400px;margin:0 auto;padding:0 15px;
}

/* -------------------------------------------------
   DROPDOWNS – DESKTOP (SIDE-BY-SIDE)
   ------------------------------------------------- */
.dropend .dropdown-toggle::after{
    margin-left:.5rem;vertical-align:middle;
}
.dropend .dropdown-menu{
    top:0;left:100%;margin-top:-6px;border-radius:14px;
}
.dropend:hover > .dropdown-menu{display:block}

/* -------------------------------------------------
   DROPDOWNS – MOBILE (VERTICAL STACK, FULLY WORKING)
   ------------------------------------------------- */
@media (max-width: 992px) {
    /* 1. Reset all dropdowns to stay inside navbar */
    .dropdown-menu,
    .dropend .dropdown-menu {
        position: static !important;
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 10px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,.15);
        background: rgba(0,51,102,.97);
        backdrop-filter: blur(12px);
        padding: 0.5rem 0;
    }

    /* 2. Show on .show (Bootstrap adds this on click) */
    .dropdown-menu.show,
    .dropend .dropdown-menu.show {
        display: block !important;
    }

    /* 3. Arrow: down when closed, up when open */
    .dropdown-toggle::after,
    .dropend .dropdown-toggle::after {
        transform: rotate(-90deg) !important;
        transition: transform .2s ease;
    }
    .dropdown-toggle[aria-expanded="true"]::after,
    .dropend .dropdown-toggle.rotated::after {
        transform: rotate(0deg) !important;
    }

    /* 4. Indent nested items */
    .dropdown-menu .dropdown-item {
        padding-left: 2.5rem !important;
        font-size: 0.95rem;
    }
    .dropdown-menu .dropdown-menu .dropdown-item {
        padding-left: 3.5rem !important;
    }

    /* 5. Scroll long menus */
    .navbar-collapse {
        max-height: 70vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 1rem;
    }

    /* 6. Responsive logo & text */
    .logo-img { height: 50px !important; }
    .school-name { font-size: 14px !important; }
    .text-grey-custom { font-size: 13px !important; }
    .navbar-nav { flex-wrap: wrap; }
}

/* -------------------------------------------------
   OTHER SECTIONS (unchanged)
   ------------------------------------------------- */
.principal-section {
  background: linear-gradient(135deg, #f9fbff, #eef3ff);
  color: #333;
}
.principal-img {
  max-width: 340px;
  border: 5px solid #fff;
  transition: transform 0.4s ease;
}
.principal-img:hover {
  transform: scale(1.05);
}

.stats-section {
  background: linear-gradient(189deg, #07FFD0, #0066cc);
}
.stats-section .counter {
  font-size: 2.4rem;
  color: #fff;
}
.stats-section i {
  display: block;
  margin-bottom: 0.4rem;
  transition: transform 0.3s;
}
.stats-section i:hover {
  transform: scale(1.2);
}

.gallery-section {
  background: linear-gradient(135deg, #f8fbff, #eef3ff);
}
.gallery-section h2 { font-family: 'Poppins', sans-serif; }
.gallery-img {
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gallery-img:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

.btn-gradient {
  background: linear-gradient(135deg, #007bff, #00c6ff);
  color: #fff !important;
  border: none;
  border-radius: 50px;
  transition: all 0.3s ease;
}
.btn-gradient:hover {
  background: linear-gradient(135deg, #00c6ff, #007bff);
  transform: translateY(-3px);
}

.footer {
  background: linear-gradient(135deg, #002b55, #004d99, #0066cc);
  color: #fff;
}
.social-link {
  font-size: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  transition: all 0.3s ease;
}
.social-link.facebook { background-color: #3b5998; }
.social-link.twitter { background-color: #1da1f2; }
.social-link.instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.social-link.youtube { background-color: #ff0000; }
.social-link:hover {
  transform: scale(1.15);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}
.hover-cyan:hover { color: #00e6ff !important; }

.footer-link {
  color: #fff;
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.3s ease, transform 0.2s ease;
  padding: 4px 0;
}
.footer-link:hover {
  color: #00e6ff;
  transform: translateX(4px);
}
.quick-links li { margin-bottom: 6px; }

@media (max-width: 768px) {
  .principal-section { text-align: center; }
  .principal-section img { max-width: 80%; margin: 0 auto; }
  .footer, .quick-links { text-align: center; }
  .social-icons { justify-content: center; }
  iframe { height: 200px; }
  .top-bar .row > div { text-align: center !important; }
  .top-bar .d-flex { justify-content: center !important; margin-top: 8px; }
  .search-form { width: 100%; max-width: 200px; }
}

/* Body padding for fixed navbar */
@media (max-width:992px){ body{padding-top:46px} }