/* Zoom In - Zoom Out (Pulse) Animation */
    @keyframes zoomInOut {
        0% { transform: scale(1); }       /* Normal size */
        100% { transform: scale(1.08); }  /* Halka sa bada (8% zoom) */
    }

    .zoom-text {
        display: inline-block; /* Transform kaam karne ke liye zaroori hai */
        animation: zoomInOut 1.5s infinite alternate ease-in-out; 
        /* 1.5s me zoom hoga, infinite matlab lagatar chalta rahega, alternate matlab wapas normal hoga */
    }
    .topbar-container{
    background:var(--primary-grad);
}
.mh-title h1{
    color:var(--primary-start);
}
.bottom-navbar{
    background:linear-gradient(
        90deg,
        var(--nav-start),
        var(--nav-end)
    );
}
.nav-item-dropdown>a{
    color:var(--nav-text);
}


:root{
    --primary-grad: linear-gradient(
        90deg,
        var(--primary-start),
        var(--primary-end)
    );

    --text-white:#ffffff;
    --nav-bg:#ffffff;
    --dark-text:#1e293b;
}

        body { margin: 0; font-family: 'Inter', sans-serif; overflow-x: hidden; }

        /* ==========================================
           1. TOP BAR (Blue Section)
           ========================================== */
        .topbar-container {
            background: var(--primary-grad);
            color: var(--text-white);
            padding: 8px 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 13px;
            font-weight: 500;
        }

        .top-left { display: flex; gap: 20px; align-items: center; }
        .top-left a { color: white; text-decoration: none; }

        .top-center {
            flex: 1; margin: 0 30px; overflow: hidden; position: relative;
            background: rgba(0,0,0,0.15); border-radius: 20px; padding: 4px 0;
        }
        .notice-ticker {
            display: inline-block; white-space: nowrap; animation: ticker-slide 15s linear infinite;
        }
        @keyframes ticker-slide {
            0% { transform: translateX(100%); } 100% { transform: translateX(-100%); }
        }
        .notice-item { margin-right: 150px; display: inline-block; }

        .top-right .portal-btn {
            background: rgba(255,255,255,0.2); padding: 5px 12px; border-radius: 4px;
            text-decoration: none; color: white; font-weight: 700; border: 1px solid rgba(255,255,255,0.3); transition: 0.3s;
        }
        .top-right .portal-btn:hover { background: white; color: <?php echo $colors[0]; ?>; }


        /* ==========================================
           2. MIDDLE HEADER (White Section)
           ========================================== */
        .middle-header {
            background: #ffffff;
            padding: 15px 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 4px 10px rgba(0,0,0,0.03);
        }

        .mh-logo img {
            max-height: 70px; /* Logo ki height */
            object-fit: contain;
        }

        .mh-title {
            text-align: center;
            flex: 1;
        }
        .mh-title h1 {
            margin: 0;
            font-size: 32px;
            font-weight: 800;
            color: <?php echo $colors[0]; ?>; /* Theme color se match */
            text-transform: uppercase;
            letter-spacing: 1px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        }
        .mh-title p {
            margin: 5px 0 0 0;
            font-size: 14px;
            color: #64748b;
            font-weight: 600;
            letter-spacing: 2px;
        }

        .mh-action .student-login-btn {
            background: #10b981; /* Green color to make it pop */
            color: white;
            padding: 12px 25px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 700;
            font-size: 15px;
            box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
            transition: 0.3s;
            display: inline-block;
        }
        .mh-action .student-login-btn:hover {
            transform: translateY(-2px);
            background: #059669;
            box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
        }


        /* ==========================================
           3. BOTTOM NAV BAR (Full Width Colored)
           ========================================== */
        .bottom-navbar {
            background: linear-gradient(90deg, <?php echo $nav['nav_gradient_start']; ?>, <?php echo $nav['nav_gradient_end']; ?>);
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        .nav-container {
            display: flex;
            justify-content: center; /* Menu center mein aayega */
            padding: 0 5%;
        }

        .nav-menu {
            list-style: none; display: flex; margin: 0; padding: 0; gap: 5px;
        }
        .nav-item-dropdown { position: relative; }
        
        /* Menu Links */
        .nav-item-dropdown > a {
            display: block;
            padding: 16px 25px;
            color: <?php echo $nav['nav_text_color']; ?>;
            text-decoration: none;
            font-weight: 600;
            font-size: 15px;
            text-transform: uppercase;
            transition: 0.3s;
        }
        .nav-item-dropdown:hover > a {
            background: rgba(0,0,0,0.15); /* Hover effect block banayega */
        }

        /* Dropdown Submenu */
        .submenu { 
            display: none; position: absolute; top: 100%; left: 0; background: #ffffff; 
            padding: 10px 0; min-width: 200px; box-shadow: 0 10px 25px rgba(0,0,0,0.15); 
            border-radius: 0 0 8px 8px; z-index: 1001; border-top: 3px solid <?php echo $nav['nav_gradient_start']; ?>;
        }
        .nav-item-dropdown:hover .submenu { display: block; }
        .submenu a { 
            color: #334155 !important; font-size: 14px; display: block; padding: 10px 20px; 
            text-decoration: none; font-weight: 500; border-bottom: 1px solid #f1f5f9;
        }
        .submenu a:hover { color: <?php echo $colors[0]; ?> !important; background: #f8fafc; padding-left: 25px; }

        /* Hamburger Icon */
        .menu-toggle { display: none; padding: 12px 20px; color: <?php echo $nav['nav_text_color']; ?>; font-size: 22px; cursor: pointer; font-weight: bold; width: 100%; text-align: right; box-sizing: border-box;}


        /* --- HERO SECTION --- */
        .hero-boxed-wrapper { background: #0f172a; padding: 40px 5% 100px; display: flex; justify-content: center; }
        .slider-container-box { width: 100%; max-width: 1200px; height: 500px; border-radius: 30px; overflow: hidden; position: relative; box-shadow: 0 30px 60px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); }
        .hero-carousel { position: relative; width: 100%; height: 100%; }
        .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease-in-out; z-index: 1; }
        .slide.active { opacity: 1; z-index: 2; }
        .slider-img-fixed { width: 100%; height: 100%; object-fit: cover; object-position: center; }
        .slide-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 50%, rgba(15,23,42,0.4)); }

        /* =========================================
           📱 MOBILE RESPONSIVE CSS
           ========================================= */
        @media (max-width: 768px) {
            .top-left { display: none; } 
            .top-center { margin: 0 10px; }
            .top-right .portal-btn { font-size: 11px; padding: 5px 10px; }

            /* Middle Header Mobile Adjustments */
            .middle-header { flex-direction: column; text-align: center; gap: 15px; padding: 20px 5%; }
            .mh-title h1 { font-size: 24px; }
            .mh-title p { font-size: 11px; }
            .mh-action { width: 100%; }
            .mh-action .student-login-btn { display: block; width: 100%; box-sizing: border-box; }

            /* Navbar Mobile Fix */
            .nav-container { padding: 0; flex-direction: column; }
            .menu-toggle { display: block; border-bottom: 1px solid rgba(255,255,255,0.1); } 
            
            .nav-menu {
                display: none; flex-direction: column; width: 100%; background: #ffffff;
            }
            .nav-menu.active { display: flex; } 
            
            .nav-item-dropdown > a { color: #1e293b !important; border-bottom: 1px solid #e2e8f0; padding: 15px 20px; } 
            
            .nav-item-dropdown:hover .submenu { position: static; box-shadow: none; display: block; padding: 0; border: none;}
            .submenu a { padding: 12px 30px; background: #f8fafc; border-bottom: 1px solid #e2e8f0;}

            /* Slider Mobile Fix */
            .slider-container-box { height: 250px; border-radius: 15px; }
            .hero-boxed-wrapper { padding: 20px 5% 60px; }
        }

.whatsapp-float {
    position: fixed; bottom: 30px; right: 30px; background-color: #25d366; color: #FFF;
    border-radius: 50px; text-align: center; font-size: 25px; box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
    z-index: 1000; display: flex; align-items: center; padding: 10px 20px; text-decoration: none; transition: 0.3s;
}
.whatsapp-float i { font-size: 30px; }
.whatsapp-float span { font-size: 16px; margin-left: 10px; font-weight: 600; display: none; }
.whatsapp-float:hover { transform: scale(1.1); background-color: #128c7e; color: #fff; }
@media (min-width: 768px) { .whatsapp-float span { display: inline-block; } }