* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }


/* color */
:root {
    --primary-blue: #004372;
    --blue-primary: #004372;
    --primary-red: #c41e3a;
    --red-primary: #c41e3a;
    --red-accent: #c41e3a;
    --accent-red: #c41e3a;
    --light-blue: #e6f2ff;
    --dark-blue: #002a4a;
    --light-red: #ffe6ea;
    --yellow-accent: #ffd700;
    --green-accent: #4caf50;
    --orange-accent: #ff9800;
    --gradient-blue: linear-gradient(135deg, #004372 0%, #0066b3 100%);
    --gradient-red: linear-gradient(135deg, #c41e3a 0%, #e63946 100%);
    --career-shadow: rgba(0, 67, 114, 0.15);
    --text-dark: #1a1a1a;
    --text-light: #666666;
    --background-light: #f8f9fa;
    --background-white: #ffffff;
    --white: #ffffff;
    --shadow-sm: 0 2px 8px rgba(0, 67, 114, 0.1);
    --shadow-md: 0 4px 20px rgba(0, 67, 114, 0.15);
    --shadow-lg: 0 8px 40px rgba(0, 67, 114, 0.2);
    --shadow-color: rgba(0, 67, 114, 0.15);
    --text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-soft: 0 6px 20px rgba(0, 67, 114, 0.12);
    --career-light-gray: #f8f9fa;
}


.clr-white{color: #fff;}


.nav-menu a {
    text-decoration: none;
    color: #000;
    padding: 8px 15px;
    display: block;
}

.nav-menu a.active {
    background-color: #c41e3a; /* red */
    color: #fff;
}
    

        .container {
            width: 100%;
            max-width: 1650px;
            margin: 0 auto;
        }

        .mt-1{margin-top: 1rem;}
        .mt-2{margin-top: 2rem;}
        .mt-3{margin-top: 3rem;}
        .mt-4{margin-top: 4rem;}
        .mt-5{margin-top: 5rem;}

        .mb-1{margin-bottom: 1rem;}
        .mb-2{margin-bottom: 2rem;}
        .mb-3{margin-bottom: 3rem;}
        .mb-4{margin-bottom: 4rem;}
        .mb-5{margin-bottom: 5rem;}

        .mtb-5{margin: 5rem 0;}

        .pt-0{padding-top: 0;}
        .pt-1{padding-top: 1rem;}
        .pt-2{padding-top: 2rem;}
        .pt-3{padding-top: 3rem;}
        .pt-4{padding-top: 4rem;}
        .pt-5{padding-top: 5rem;}

        .pb-0{padding-bottom: 0;}
        .pb-1{padding-bottom: 1rem;}
        .pb-2{padding-bottom: 2rem;}
        .pb-3{padding-bottom: 3rem;}
        .pb-4{padding-bottom: 4rem;}
        .pb-5{padding-bottom: 5rem;}

        .ptb-5{padding: 5rem 0;}


        .common-header {
            text-align: center;
            margin-bottom: 20px;
        }

        @media (max-width: 992px){
        .common-header h1, h2{font-size: 2.5rem;}
        }

.common-header h1, h2 {
    font-size: 2.5rem;
    color: #c41e3a;
    font-weight: 700;
    animation: fadeInDown 1s ease;
}


.topblack-area {
    display: flex;
    padding: 5px 0;
    background: linear-gradient(135deg, #c41e3a 0%, #004372 100%);
}
.top-start {
    display: flex;
    align-items: center;
}
.top-start a {
    color: #fff;
    margin-right: 15px;
    font-size: 16px;
    text-decoration: none;
}
.topblack-block{display: flex; justify-content: space-between;}
.top-social {
    font-size: 16px;
}

.top-social a {
    margin-left: 8px;
    color: #333;
    font-size: 16px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    background: #eaeaea;
    border-radius: 50%;
    transition: 0.3s ease;
    text-decoration: none;
}

.top-social a:hover {
    background: #c41e3a;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}


/* Top bar */
.top-navbar {
    background: #f5f5f5;
    padding: 10px 0 5px 0;
}

.topbar-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-buttons {
    display: flex;
    gap: 10px;
}

.tb-btn {
    background: #c11e3b;
    color: #fff;
    padding: 12px 25px;
    font-size: 17px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s ease;
    display: inline-block;
    line-height: 20px;
}

.tb-btn i {
    margin-right: 6px;
    font-size: 14px;
}

.tb-btn.admission {
    background: #034271;
}

.tb-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    opacity: 0.9;
}
.top-end{display: flex;}


/* -----------------------------------
   RESPONSIVE TOP BAR
----------------------------------- */

/* Tablet (max-width: 991px) */
@media (max-width: 991px) {
    .topbar-block {
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        gap: 10px;
    }

    .top-start {
        width: 100%;
        justify-content: space-around;
        display: flex;
        gap: 15px;
    }

    .top-end {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
}

/* Mobile (max-width: 600px) */
@media (max-width: 600px) {

    .top-start {
        gap: 5px;
    }

    .topblack-area {
    padding: 5px 10px;
    }

    .top-navbar {
        padding: 15px 10px;
    }

    /* Buttons full width on small device */
    .top-buttons {
        width: 100%;
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-right: 0;
    }

    .tb-btn {
        padding: 7px 12px;
        font-size: 12px;
    }

    /* Social Icons center aligned */
    .top-social {
        margin-top: 5px;
        text-align: center;
        font-size: 13px;
    }

    .top-social a {
        width: 28px;
        height: 28px;
        font-size: 14px;
        margin-left: 5px;
    }
}





      
/* Navigation Styles */
nav {
    background: linear-gradient(253deg, #111111 0%, #111111 100%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

        .nav-container {
            width: 100%;
            max-width: 1500px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            color: white;
            font-size: 1.5em;
            font-weight: bold;
        }

        .logo img{height: 90px;}

        .menu-toggle {
            display: none;
            background: none;
            border: none;
            color: white;
            font-size: 1.8em;
            cursor: pointer;
        }

        .nav-menu {
            list-style: none;
            display: flex;
            margin: 0;
            padding: 0;
        }

        .nav-menu > li {
            position: relative;
        }

        .nav-menu > li > a {
            display: block;
            color: white;
            text-decoration: none;
            padding: 20px 20px;
            transition: background 0.3s;
            font-size: 16px;
        }

        .nav-menu > li > a:hover {
            background: rgba(255,255,255,0.1);
        }

.nav-menu li a.active {
    color: #111111 !important;
    font-weight: 600;
    background-color: #fff;
}

.nav-menu li.active > a {
    color: #ff6600 !important;
    font-weight: 600;
}

.dropdown-third li.active > a {
    color: #ff6600 !important;
}


        /* Dropdown Arrow */
        .has-dropdown > a::after {
            font-family: "FontAwesome";
            content: "\f0d7";   /* fa-caret-down */
            margin-left: 6px;
            font-size: 14px;
            font-weight: normal;
        }

        /* Second Level Dropdown */
        .dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            background: white;
            min-width: 220px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.3s ease;
            list-style: none;
            padding: 0;
        }

        .nav-menu > li:hover > .dropdown {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .dropdown li {
            position: relative;
        }

        .dropdown li a {
            display: block;
            padding: 12px 20px;
            color: #333;
            text-decoration: none;
            transition: all 0.3s;
            border-bottom: 1px solid #f0f0f0;
        }

        .dropdown li:last-child a {
            border-bottom: none;
        }

        .dropdown li a:hover {
            color: white;
            padding-left: 25px;
            background: linear-gradient(135deg, #004372 0%, #c41e3a 100%);
        }

        /* Third Level Dropdown */
        .dropdown-third {
            position: absolute;
            top: 0;
            left: 100%;
            background: white;
            min-width: 200px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            opacity: 0;
            visibility: hidden;
            transform: translateX(-10px);
            transition: all 0.3s ease;
            list-style: none;
            padding: 0;
        }

        .dropdown li:hover > .dropdown-third {
            opacity: 1;
            visibility: visible;
            transform: translateX(0);
        }

        .has-dropdown-third > a {
            position: relative;
            padding-right: 18px; /* space for arrow */
        }

        .has-dropdown-third > a::after {
            font-family: "FontAwesome";
            content: "\f0da";   /* fa-caret-right */
            font-size: 14px;
            position: absolute;
            right: 15px;           /* RIGHT SIDE FIX */
            top: 50%;
            transform: translateY(-50%);
        }


        /* Mobile Styles */
        @media (max-width: 768px) {
            .menu-toggle {
                display: block;
            }

            .nav-container span{color: #fff; margin-right: 20px;}

            .nav-container {
                padding: 0 0 0 20px;
            }

                .nav-menu {
                    position: absolute;
                    top: 100%;
                    left: 0;
                    right: 0;
                    background: #004372;
                    flex-direction: column;
                    max-height: 0;
                    overflow: hidden;
                    transition: max-height 0.3s ease;
                }

            .nav-menu.active {
                max-height: 800px;
            }

            .nav-menu > li > a {
                padding: 15px 20px;
                border-bottom: 1px solid rgba(255,255,255,0.1);
            }

            .dropdown {
                position: static;
                opacity: 1;
                visibility: visible;
                transform: none;
                box-shadow: none;
                background: rgba(255,255,255,0.1);
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.3s ease;
            }

            .dropdown.active {
                max-height: 500px;
            }

            .dropdown li a {
                color: white;
                padding-left: 40px;
                border-bottom: 1px solid rgba(255,255,255,0.1);
            }

            .dropdown li a:hover {
                background: rgba(255,255,255,0.2);
                padding-left: 45px;
            }

            .dropdown-third {
                position: static;
                opacity: 1;
                visibility: visible;
                transform: none;
                box-shadow: none;
                background: rgba(255,255,255,0.05);
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.3s ease;
            }

            .dropdown-third.active {
                max-height: 300px;
            }

            .dropdown-third li a {
                padding-left: 60px;
            }

            .dropdown-third li a:hover {
                padding-left: 65px;
            }

            .has-dropdown > a::after,
            .has-dropdown-third > a::after {
                float: right;
            }
        }

        .slider-wrapper {
            padding: 0;
        }

        /* Slider Styles */
        .slider-container {
            width: 100;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0,0,0,0.2);
        }

        .slider {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }

        .slide {
            min-width: 100%;
            position: relative;
            height: 500px;
        }

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

        .slide-content {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
            color: white;
            padding: 40px 40px 90px 40px;
            text-align: center;
        }

        .slide-content h2 {
            font-size: 3em;
            margin-bottom: 5px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
            color: #fff;
        }

        .slide-content p {
            font-size: 1.4em;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
        }

        /* Slider Navigation */
        .slider-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255,255,255,0.9);
            border: none;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            font-size: 1.5em;
            cursor: pointer;
            transition: all 0.3s;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        }

        .slider-nav:hover {
            background: white;
            transform: translateY(-50%) scale(1.1);
        }

        .slider-nav.prev {
            left: 20px;
        }

        .slider-nav.next {
            right: 20px;
        }

        /* Slider Dots */
        .slider-dots {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            z-index: 10;
        }

        .dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255,255,255,0.5);
            cursor: pointer;
            transition: all 0.3s;
            border: 2px solid white;
        }

        .dot.active {
            background: white;
            width: 30px;
            border-radius: 6px;
        }

        /* Responsive Slider */
        @media (max-width: 767px) {
            .slide {
                height: 350px;
            }

            .top-social{display: none;}

            .slide-content {
                padding: 20px;
            }

            .slide-content h2 {
                font-size: 1.8em;
            }

            .slide-content p {
                font-size: 1em;
            }

            .slider-nav {
                width: 40px;
                height: 40px;
                font-size: 1.2em;
            }

            .slider-nav.prev {
                left: 10px;
            }

            .slider-nav.next {
                right: 10px;
            }
        }

        h1 {
            text-align: center;
            color: #c41e3a;
            font-size: 3em;
            margin-bottom: 20px;
            font-weight: bold;
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-bottom: 20px;
        }

        .card {
            position: relative;
            height: 300px;
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.15);
        }

        .card-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .card-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 100%);
            padding: 30px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .card-title {
            color: white;
            font-size: 2em;
            margin-bottom: 15px;
            font-weight: 600;
        }

        .card-text {
            color: white;
            line-height: 1.6;
            text-align: justify;
            font-size: 0.95em;
        }

        /* Color variations for different cards */
        .card-1 .card-overlay {
            background: linear-gradient(to right, rgba(30, 144, 255, 0.9) 0%, rgba(30, 144, 255, 0.7) 100%);
        }

        .card-2 .card-overlay {
            background: linear-gradient(to right, rgba(139, 0, 139, 0.85) 0%, rgba(255, 0, 255, 0.6) 100%);
        }

        .card-3 .card-overlay {
            background: linear-gradient(to right, rgba(72, 61, 139, 0.9) 0%, rgba(72, 61, 139, 0.7) 100%);
        }

        .card-4 .card-overlay {
            background: linear-gradient(to right, rgba(205, 92, 92, 0.9) 0%, rgba(205, 92, 92, 0.7) 100%);
        }

        .card-5 .card-overlay {
            background: linear-gradient(to right, rgba(0, 128, 128, 0.9) 0%, rgba(0, 128, 128, 0.7) 100%);
        }

        .card-6 .card-overlay {
            background: linear-gradient(to right, rgba(220, 20, 60, 0.95) 0%, rgba(220, 20, 60, 0.8) 100%);
        }

        @media (max-width: 1024px) {
            .grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .container {
            max-width: 95%;
            }
        }

        @media (max-width: 640px) {
            .grid {
                grid-template-columns: 1fr;
            }

            h1 {
                font-size: 2em;
            }

            .card-title {
                font-size: 1.5em;
            }

            .card-text {
                font-size: 0.9em;
            }
        }




        /* Welcome section */
        .welcome-text {
            text-align: justify;
            line-height: 1.8;
            color: #555;
            font-size: 1.05rem;
            animation: fadeIn 1.2s ease;
            margin-bottom: 20px;
        }

        .welcome-text p{margin-bottom: 20px;}

        .welcome-block .container {
            display: flex;
            gap: 90px;
        }

        .welcome-block .container .welcometxt-block{width: 60%;}
        .welcome-block .container .school-video{width: 40%;}

        .read-more-btn {
            display: inline-block;
            padding: 15px 45px;
            background: white;
            color: #004372;
            border: 2px solid #004372;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.3s ease;
            cursor: pointer;
            font-size: 0.9rem;
        }

        .read-more-btn:hover {
            background: #004372;
            color: white;
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(8, 145, 178, 0.3);
        }

        .btn-container {
            text-align: center;
            animation: fadeIn 1.4s ease;
        }

        .stats-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-top: 0;
        }

        .stat-card {
            background: white;
            border: 3px solid;
            border-radius: 15px;
            padding: 10px 20px;
            text-align: center;
            transition: all 0.4s ease;
            animation: fadeInUp 1s ease;
            position: relative;
            overflow: hidden;
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.1) 100%);
            transform: translateX(-100%);
            transition: transform 0.6s ease;
        }

        .stat-card:hover::before {
            transform: translateX(0);
        }

        .stat-card:nth-child(1) {
            border-color: #10b981;
            animation-delay: 0.2s;
        }

        .stat-card:nth-child(2) {
            border-color: #d97706;
            animation-delay: 0.4s;
        }

        .stat-card:nth-child(3) {
            border-color: #8b5cf6;
            animation-delay: 0.6s;
        }

        .stat-card:nth-child(4) {
            border-color: #004372;
            animation-delay: 0.8s;
        }

        .stat-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
        }

        .stat-number {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 10px;
            position: relative;
        }

        .stat-card:nth-child(1) .stat-number {
            color: #10b981;
        }

        .stat-card:nth-child(2) .stat-number {
            color: #d97706;
        }

        .stat-card:nth-child(3) .stat-number {
            color: #8b5cf6;
        }

        .stat-card:nth-child(4) .stat-number {
            color: #004372;
        }

        .stat-label {
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-weight: 600;
            color: #666;
        }

        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @media (max-width: 768px) {
            .welcome-block .container {
                flex-direction: column;
            }
            .welcome-block .container .welcometxt-block {
                width: 100% !important;
            }
            .school-video{
                width: 100% !important;
            }
            .welcome-block {
                padding: 40px 20px;
            }

            .welcome-header h1 {
                font-size: 2rem;
            }

            .welcome-text {
                font-size: 0.95rem;
            }

            .stats-container {
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                gap: 20px;
            }

            .stat-number {
                font-size: 2.5rem;
            }
        }




/* Toppers */
        .topper-block{
            position: relative;
            background-color: var(--primary-blue);
        }

        /* Background decorative elements */
        .topper-block::before,
        .topper-block::after {
            content: '';
            position: absolute;
            width: 200px;
            height: 200px;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text x="20" y="60" font-size="50" opacity="0.05" fill="white">📚</text></svg>');
            background-size: contain;
            background-repeat: no-repeat;
            z-index: 0;
        }

        .topper-block::before {
            top: 10%;
            left: 2%;
        }

        .topper-block::after {
            bottom: 10%;
            right: 2%;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text x="20" y="60" font-size="50" opacity="0.05" fill="white">✏️</text></svg>');
        }

        .header-section {
            text-align: center;
            margin-bottom: 50px;
            position: relative;
            z-index: 1;
        }

        .celebration-icon {
            margin-bottom: 20px;
        }

        .celebration-icon svg {
            width: 70px;
            height: 70px;
            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
        }

        @keyframes celebrate {
            0%, 100% { transform: rotate(0deg) scale(1); }
            25% { transform: rotate(-8deg) scale(1.05); }
            75% { transform: rotate(8deg) scale(1.05); }
        }

        .header-section h1 {
            font-size: 3.2rem;
            color: white;
            font-weight: 700;
            letter-spacing: 3px;
            text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
        }

        .toppers-wrapper {
            display: flex;
            justify-content: center;
            gap: 50px;
            align-items: flex-start;
            position: relative;
            z-index: 1;
        }

        .class-section {
            position: relative;
        }

        .class-number {
            font-size: 8rem;
            color: rgba(255, 255, 255, 0.12);
            font-weight: 900;
            position: absolute;
            top: -60px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 0;
            letter-spacing: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
        }

        .students-container {
            background: white;
            border-radius: 0;
            padding: 0;
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4);
            display: flex;
            position: relative;
            z-index: 1;
            margin-top: 40px;
        }

        .student-card {
            text-align: center;
            padding: 35px 0;
            width: 181.2px;
            border-right: 1px solid #d0d0d0;
            transition: all 0.3s ease;
            background: white;
            position: relative;
        }

        .student-card:last-child {
            border-right: none;
        }

        .student-card:hover {
            background: #fafafa;
            transform: translateY(-8px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            z-index: 10;
        }

        .student-photo {
            width: 130px;
            height: 130px;
            border-radius: 50%;
            margin: 0 auto 18px;
            border: 4px dotted #c0c0c0;
            padding: 6px;
            position: relative;
            background: white;
        }

        .student-photo img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
            background: linear-gradient(135deg, #e8e8e8 0%, #d0d0d0 100%);
        }

        .percentage {
            background: linear-gradient(135deg, #fff9c4 0%, #fff176 100%);
            border: 2.5px solid #ffd600;
            border-radius: 25px;
            padding: 6px 18px;
            display: inline-block;
            margin-bottom: 12px;
            font-weight: 800;
            color: #333;
            font-size: 1rem;
            box-shadow: 0 3px 8px rgba(255, 214, 0, 0.3);
        }

        .student-name {
            font-size: 1.05rem;
            color: #c41e3a;
            padding: 0 10px;
            font-weight: 700;
            margin-top: 10px;
            line-height: 1.4;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Responsive Design */
        @media (max-width: 1400px) {
            .toppers-wrapper {
                gap: 30px;
            }

            .student-card {
                width: 180px;
                padding: 30px 20px;
            }

            .student-photo {
                width: 115px;
                height: 115px;
            }
        }

        @media (max-width: 1200px) {
            .toppers-wrapper {
                flex-direction: column;
                align-items: center;
            }

            .class-section {
                width: 100%;
                max-width: 850px;
                margin-bottom: 60px;
            }

            .students-container {
                justify-content: center;
            }
        }

        @media (max-width: 900px) {
            .header-section h1 {
                font-size: 2.5rem;
            }

            .class-number {
                font-size: 6rem;
                top: -50px;
            }

            .students-container {
                flex-wrap: wrap;
            }

            .student-card {
                width: calc(50% - 1px);
                border-right: 1px solid #d0d0d0;
                border-bottom: 1px solid #d0d0d0;
            }

            .student-card:nth-child(2n) {
                border-right: none;
            }

            .student-card:nth-child(3),
            .student-card:nth-child(4) {
                border-bottom: none;
            }
        }

        @media (max-width: 600px) {
            .header-section h1 {
                font-size: 2rem;
                letter-spacing: 2px;
            }

            .celebration-icon svg {
                width: 60px;
                height: 60px;
            }

            .class-number {
                font-size: 5rem;
            }

            .students-container {
                flex-direction: column;
            }

            .student-card {
                width: 100%;
                border-right: none;
                border-bottom: 1px solid #d0d0d0;
            }

            .student-card:last-child {
                border-bottom: none;
            }
        }
        @media (min-width: 1201px) and (max-width: 1700px) {
            .toppers-wrapper {
                flex-direction: column !important;
                align-items: center !important;
            }
        }




/* School Life */
.school-area{background-color: #f7f7f7;}
.schoollife-section{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.schoollife-block {
    color: #fff;
    text-align: center;
    font-size: 16px;
    transition: 0.3s ease;
    position: relative;
}

.schoollife-block img{
    width: 100%;
    height: auto;
}

.school-overlap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 30px;
    padding: 20px;
    color: #fff;
    text-align: justify;
    width: 70%;
}


.schoollife-block:nth-child(1) .school-overlap {
    background: #215BE2c7;
    color: #fff;
}

.schoollife-block:nth-child(2) .school-overlap { 
    background: #261267c7; 
    color: #fff;
}

.schoollife-block:nth-child(3) .school-overlap { 
    background: #0D7681c7; 
    color: #fff;
}

.schoollife-block:nth-child(4) .school-overlap { 
    background: #B00000c7; 
    color: #fff;
}

.schoollife-block:nth-child(5) .school-overlap { 
    background: #005E96c7; 
    color: #fff;
}

.schoollife-block:nth-child(6) .school-overlap { 
    background: #111111c7; 
    color: #fff;
}

.school-overlap h3 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 10px;
}

.school-overlap p {
    font-size: 16px;
    line-height: 24px;
}

.read-more {
    color: #333;
    font-weight: 600;
    cursor: pointer;
    display: none;
    margin-top: 5px;
    padding: 8px 10px;
    background-color: #fff;
    text-decoration: none;
    font-size: 15px;
    margin-top: 20px;
}


/* Hover Effect */
.schoollife-block {
    transition: all 0.35s ease;
}

.schoollife-block:hover {
    transform: translateY(0) scale(1.02); /* lift + zoom */
}


/* Responsive */
@media (max-width: 991px) {
    .schoollife-section {
        grid-template-columns: repeat(2, 1fr); /* 2 columns per row on tablet */
    }
}

@media (max-width: 600px) {
    .schoollife-section {
        grid-template-columns: 1fr; /* 1 column per row on mobile */
    }
    .school-overlap{
    bottom: 20px;
    width: 95%;
    }
}





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

.gallery-box {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

.gallery-box img {
    width: 100%;
    transition: .35s ease;
    border-radius: 20px;
}

.gallery-box:hover img {
    transform: scale(1.1);
    background-color: #000;
    opacity: 0.9;
    cursor: pointer;
}

.gallery-box::before{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    opacity: 0;
    transition: .3s;
}

.gallery-box:hover::before{
    opacity: 1;
}


.gallery-box:hover::after{
    opacity: 1;
}




.awards-box {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

.awards-box img {
    width: 100%;
    transition: .35s ease;
    border-radius: 20px;
}

.awards-box:hover img {
    transform: scale(1.1);
    background-color: #000;
    opacity: 0.9;
}

.awards-box::before{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    opacity: 0;
    transition: .3s;
}

.awards-box:hover::before{
    opacity: 1;
}


.awards-box:hover::after{
    opacity: 1;
}


.popup{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.popup img{
    max-width: 80%;
    max-height: 80%;
    border-radius: 10px;
    transition: .3s;
}

.popup .close{
    position: absolute;
    top: 20px;
    right: 35px;
    font-size: 45px;
    color: #fff;
    cursor: pointer;
}

.popup .nav{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 55px;
    color: #fff;
    padding: 10px;
    cursor: pointer;
    transition: .3s;
    user-select: none;
}

.popup .prev{ left: 25px; }
.popup .next{ right: 25px; }

.popup .nav:hover{
    color: #0d6efd;
}

/* Responsive */
@media (max-width: 991px) {
    .gallery-block {
        grid-template-columns: repeat(2, 1fr); /* 2 columns per row on tablet */
    }
    .gallery-area{padding: 20px 0 0 0;}
}

@media (max-width: 600px) {
    .gallery-block {
        grid-template-columns: 1fr; /* 1 column per row on mobile */
    }
}






.step-area{background-color: #fff;}
.step-block {
    display: flex;
    align-items: center;
    gap: 100px;
}
.steptxt{text-align: left;}
.steptxt h2{margin-bottom: 20px;}

.step-start p {
    font-size: 19px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.step-start span {
    display: flex;
    margin-top: 4%;
    gap: 20px;
}
.step-start span a {
    border-radius: 5px;
    border: 1px #333 solid;
    color: #222;
    text-decoration: none;
    padding: 15px 30px;
    font-size: 20px;
    transition: all 0.3s ease;
}

.step-start span a:hover {
    background: #c41e3a;
    border: 1px #c41e3a solid;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgb(196 30 58 / 32%);
}

.step-end img {
    width: 100%;height: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px,
                rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
    border: 2px #ffffff solid;
    animation: floatUpDown 2s ease-in-out infinite;
}

/* Up–Down Animation */
@keyframes floatUpDown {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

@media (min-width: 992px) {
.step-start{width: 60%;}
.step-end{width: 40%;}

@media (max-width: 992px) {
.step-area{padding: 0 1rem 5rem 1rem;}
}

@media (max-width: 575px) {
.step-start span{flex-direction: column;}
.step-block{flex-direction: column; gap: 40px;}
}



/* Counter */
.counter-section{
    background: url('../images/counter-bg.png') center/cover no-repeat;
    padding: 80px 0;
    position: relative;
    color: #fff;
}

.counter-section::before{
    content:"";
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: rgba(0,0,0,0.8); /* transparent black */
}

.counter-container{
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 1200px;
    margin: auto;
    flex-wrap: wrap;
}

.counter-box{
    text-align: center;
    width: 250px;
    margin: 20px 0;
}

.counter-box i{
    font-size: 48px;
    margin-bottom: 15px;
    color: #ffd700;
}

.counter-number{
    font-size: 42px;
    font-weight: bold;
}

.counter-title{
    font-size: 18px;
    margin-top: 5px;
}



/* Awards Section */
.awards-section {
    text-align: center;
}

.awards-container {
    display: flex;
    gap: 25px;
    justify-content: space-between;
}

.awards-container  img {
    width: 20%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: transform .3s ease;
}

.award-item img:hover {
    transform: scale(1.05);
}






/* academics */
.wing-top-text {
    text-align: center;
    color: #333;
    font-size: 17px;
    width: 70%;
    margin: 0 auto 40px auto;
    display: -webkit-box;
    -webkit-line-clamp: 2;   /* maximum 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Main container grid */
.wing-container {
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

/* Each box */
.wing-box {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 25px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.12);
    border-left: 6px solid #001a72; /* blue border left (like sample) */
}

/* Icons */
.wing-box img {
    width: 60px;
    height: auto;
}

/* Text area */
.wing-content h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #000;
}

.wing-content p {
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* Hover Effect */
.wing-box {
    transition: all 0.3s ease;
}

.wing-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.18);
    border-left-color: #c41e3a;   /* changes blue to orange/red on hover */
}

/* Icon hover effect (optional) */
.wing-box img {
    transition: transform 0.3s ease;
}

.wing-box:hover img {
    transform: scale(1.15);
}


/* Responsive */
@media (max-width: 768px) {
    .wing-container {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .awards-container{flex-direction: column;}
}

@media (max-width: 575px) {
.wing-top-text {
    width: 90%;
}
.wing-container {
padding: 0 20px;
}
.wing-box {
    padding: 25px 20px;
}
}





/* Infrastructure */
.infra-header h2 {
font-size: 2.5rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 15px;
}

.infra-header p {
font-size: 1rem;
color: #555;
max-width: 700px;
margin: 0 auto;
line-height: 1.6;
}

.infra-container {
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: center;
margin-top: 40px;
}

.infra-box {
background: #f9f9f9;
border-radius: 10px;
overflow: hidden;
width: 300px;
transition: transform 0.3s, box-shadow 0.3s;
cursor: pointer;
}

.infra-box:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.infra-img img {
width: 100%;
height: 200px;
object-fit: cover;
}

.infra-content {
padding: 20px;
text-align: center;
}

.infra-content h3 {
font-size: 1.5rem;
margin-bottom: 10px;
color: #333;
}

.infra-content p {
font-size: 0.95rem;
color: #666;
line-height: 1.5;
}

/* Responsive */
@media (max-width: 992px) {
.infra-container {
gap: 20px;
}
}

@media (max-width: 768px) {
.infra-container {
flex-direction: column;
align-items: center;
}
.infra-box {
width: 90%;
}
}






/* Infrastructure */
.infrastructure-section {
background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
url('../images/infrastructure-bg.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
padding: 80px 0;
color: white;
}

.section-header p {
    font-size: 1rem;
    line-height: 1.8;
    max-width: 900px;
    margin: 0 auto;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

        .cards-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }

        .card {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0,0,0,0.4);
        }

        .card-image {
            width: 100%;
            height: 220px;
            object-fit: cover;
        }

        .card-content {
            padding: 25px;
            color: #333;
        }

        .card-content h3 {
            font-size: 1.5rem;
            margin-bottom: 15px;
            color: #2c3e50;
        }

        .card-content p {
            font-size: 0.95rem;
            line-height: 1.6;
            color: #555;
        }

        @media (max-width: 768px) {
            .section-header h1 {
                font-size: 2rem;
            }

            .section-header p {
                font-size: 0.9rem;
            }

            .cards-container {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .infrastructure-section {
                padding: 50px 15px;
            }
        }

        @media (max-width: 480px) {
            .section-header h1 {
                font-size: 1.75rem;
            }

            .card-content {
                padding: 20px;
            }

            .card-content h3 {
                font-size: 1.25rem;
            }
            .section-header p {
                font-size: 1rem !important;
                max-width: 90%
                text-align: justify;
            }
            .card{height: auto;}
        }





/* Footer */ 

.footer-section {
    background-image: url(../images/footer-bg.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 3vw 0 0 0;
    border-top: solid 10px #f5f5f5;
    font-size: 0;
    position: relative;
}        

.footer-logo img{width: 80%; height: auto;}

        .footer-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" fill="%23f5f5f5" opacity="0.3"></path></svg>') no-repeat top center;
            background-size: cover;
            pointer-events: none;
        }

        .footer-container {
            max-width: 1500px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
            gap: 40px;
            position: relative;
            z-index: 1;
        }

        .footer-column h3 {
            color: #333;
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 20px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .footer-column ul {
            list-style: none;
        }

        .footer-column ul li {
            margin-bottom: 12px;
        }

        .footer-column ul li a {
            color: #333;
            text-decoration: none;
            font-size: 16px;
            transition: color 0.3s ease;
        }

        .footer-column ul li a:hover {
            color: #111;
        }

        .logo-section {
            grid-column: 1;
        }

        .logo-section h2 {
            font-size: 32px;
            color: #333;
            margin-bottom: 30px;
        }

        .contact-info {
            color: #666;
            font-size: 14px;
            line-height: 1.8;
        }

        .contact-info p {
            margin-bottom: 8px;
            font-size: 16px;
            color: #333;
        }

        .contact-info p .fa{
            margin-right: 5px;
            color: #333;
        }

        .location-icon {
            text-indent: -11px;
            padding-left: 16px;
        }

        .social-icons {
            display: flex;
            gap: 12px;
            margin-top: 20px;
        }

        .social-icons a {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-decoration: none;
            transition: transform 0.3s ease;
        }

        .social-icons a:hover {
            transform: translateY(-3px);
        }

        .social-icons .facebook {
            background: #3b5998;
        }

        .social-icons .youtube {
            background: #ff0000;
        }

        .social-icons .instagram {
            background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
        }

        .social-icons .linkedin {
            background: #0077b5;
        }

        .copyright {
            text-align: center;
            padding: 20px;
            color: #333;
            font-size: 16px;
            background: rgba(240, 240, 240, 0.9);
            margin-top: 40px;
        }

        @media (max-width: 1024px) {
            .footer-container {
                grid-template-columns: 1fr 1fr 1fr;
            }
        }

        @media (max-width: 768px) {
        .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        padding: 0 20px;
        }
        .step-start span a {
            padding: 15px 20px;
            font-size: 16px;
        }

        }

@media (max-width: 480px) {
.footer-container{grid-template-columns: 1fr;}
.top-start a{margin-right: 0; font-size: 14px;} 
.logo img{height: 50px;}
.slide{height: 160px;}
.slide-content h2{font-size: 1.1em;}
.slide-content p{font-size: 13px; width: 80%; margin: 0 auto;}
}       


@media (max-width: 767px){
.award-item img{width: 100%;} 
}


@media (min-width: 768px) and (max-width: 1200px){
.menu-hide{display: none;}  
}


@media (min-width: 768px) and (max-width: 992px){
.nav-menu > li > a{padding: 20px 15px;}
}


@media (min-width: 768px) and (max-width: 1500px){
.cards-container{grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));}
.wing-container {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 0 20px !important;
}
.awards-container {
    flex-direction: column;
}
.container{padding: 0 20px;}
.footer-section{padding: 40px 20px 0 20px;}
}        


@media (min-width: 768px){
.nav-container span{display: none;}
}     




/* Main breadcrumb area */
.breadcrumb-area {
    width: 100%;
    background-image: url('../images/about-banner.jpg'); /* Replace with your image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 80px 20px; 
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dark overlay for readability */
.breadcrumb-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1;
}

/* Content */
.breadcrumb-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    width: 100%;
    max-width: 900px;
}

/* Heading */
.breadcrumb-content h1 {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #fff;
}

/* Breadcrumb */
.breadcrumb-content p {
    font-size: 18px;
    opacity: 0.9;
}

/* Responsive for tablet */
@media (max-width: 992px) {
    .breadcrumb-content h1 {
        font-size: 34px;
    }
    .breadcrumb-content p {
        font-size: 16px;
    }
}

/* Responsive for mobile */
@media (max-width: 576px) {
    .breadcrumb-area {
        padding: 60px 20px;
    }

    .breadcrumb-content h1 {
        font-size: 28px;
    }

    .breadcrumb-content p {
        font-size: 14px;
    }
}





.mission-vision-section {
    padding: 60px 0;
}

.mv-row {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 60px;
}

.mv-row.reverse {
    flex-direction: row-reverse;
}

.mv-text {
    flex: 1;
}

.mv-text h2 {
    font-size: 28px;
    margin-bottom: 15px;
}

.mv-text p {
    font-size: 16px;
    line-height: 1.7;
}

.mv-img {
    flex: 1;
}

.mv-img img {
    width: 100%;
    border-radius: 10px;
    display: block;
}

/* -------- Responsive for Mobile -------- */
@media(max-width: 768px) {
    .mv-row,
    .mv-row.reverse {
        flex-direction: column;
        text-align: center;
    }

    .mv-row.reverse .mv-img {
        order: 1;
    }
    
    .mv-row.reverse .mv-text {
        order: 2;
    }
}


.mission-container{display: flex; gap: 50px}

.mission-block{
    padding: 0;
}

.mission-block img{
    width: 100%;
    height: auto;
}

.mission-block h3{
    font-size: 22px;
    margin: 15px 0;
    color: #c41e3a;
}

.mission-block p {
    font-size: 17px;
    margin: 0;
    text-align: justify;
    line-height: 30px;
}

.mission-card{padding: 20px; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;}



/* ---------- infrastructure ---------- */
.infrastructure {
    width: 100%;
    padding: 40px 0;
}

.infrastructure .container {
    width: 90%;
    max-width: 1400px;
    margin: auto;
}

.infrastructure .title {
    text-align: center;
    font-size: 36px;
    margin-bottom: 25px;
    font-weight: bold;
}

/* ---------- TEXT ---------- */
.infrastructure .intro,
.infrastructure .intro-list {
    font-size: 18px;
    margin-bottom: 15px;
    line-height: 1.6;
}

.infrastructure .intro-list {
    margin-left: 20px;
}

/* ---------- GRID ---------- */
.infrastructure .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin-top: 40px;
}

.infrastructure .grid img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* ---------- CARD ---------- */
.infrastructure .card2 {
    background: #fff;
    border-radius: 10px;
}

.podtext {
    background: #F8FAF8 !important;
    border-radius: 10px !important;
    padding: 30px !important;
}

.infrastructure .card2 p {
    font-size: 18px;
    color: #333;
    line-height: 30px;
}

.infrastructure .card2 h2 {
    margin-bottom: 10px;
    font-size: 22px;
}

.infrastructure .img-card2 img {
    width: 100%;
    border-radius: 10px;
    display: block;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 992px) {
    .infrastructure .grid {
        grid-template-columns: 1fr;
    }
    .infrastructure .card2 h2 {
        font-size: 20px;
    }
}

@media (max-width: 600px) {
    .infrastructure .title {
        font-size: 28px;
    }
    .infrastructure .card2 {
        padding: 15px;
    }
}




.content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            padding: 50px;
        }

        .contact-info {
            padding: 20px;
        }

        .contact-info h2 {
            color: #c41e3a;
            margin-bottom: 30px;
            font-size: 2em;
        }

        .info-item {
            display: flex;
            align-items: start;
            margin-bottom: 25px;
            padding: 20px;
            background: #f8f9ff;
            border-radius: 10px;
            transition: transform 0.3s;
        }

        .info-item:hover {
            transform: translateX(10px);
        }

        .icon {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, #c41e3a 0%, #004372 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5em;
            margin-right: 20px;
            flex-shrink: 0;
        }

        .info-item div h3 {
            color: #333;
            margin-bottom: 5px;
        }

        .info-item div p {
            color: #666;
            line-height: 1.6;
        }

        .form-section {
            padding: 20px;
        }

        .form-section h2 {
            color: #c41e3a;
            margin-bottom: 30px;
            font-size: 2em;
        }

        .form-group {
            margin-bottom: 25px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #333;
            font-weight: bold;
        }

        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 15px;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            font-size: 1em;
            transition: border-color 0.3s;
        }

        .form-group input:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: #c41e3a;
        }

        .form-group textarea {
            resize: vertical;
            min-height: 120px;
        }

        .submit-btn {
            width: 100%;
            padding: 15px;
            background: linear-gradient(135deg, #c41e3a 0%, #004372 100%);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 1.1em;
            cursor: pointer;
            transition: transform 0.3s;
        }

        .submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(196, 30, 58, 0.4);
        }

        .map-section {
            padding: 50px;
        }

        .map-section h2 {
            color: #c41e3a;
            margin-bottom: 30px;
            font-size: 2em;
            text-align: center;
        }

        .map-container {
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        @media (max-width: 767px) {
            .content {
                grid-template-columns: 1fr;
                padding: 0;
            }

            .form-section {
                padding: 0;
            }

            .header h1 {
                font-size: 1.8em;
            }

            .map-section {
                padding: 0;
            }
        }
















.hero-section2 {
    background: linear-gradient(135deg, #c41e3a 0%, #004372 100%);
    color: white;
    padding: 80px 20px 100px;
    text-align: center;
    position: relative;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

        .hero-section2::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120"><path d="M0,0 Q300,50 600,0 T1200,0 L1200,120 L0,120 Z" fill="rgba(255,255,255,0.05)"/></svg>');
            opacity: 0.3;
        }

        .hero-content2 {
            position: relative;
            z-index: 1;
            max-width: 900px;
            margin: 0 auto;
        }

        .hero-content2 h1 {
            font-size: 4em;
            margin-bottom: 20px;
            font-weight: 700;
            text-shadow: 2px 2px 10px rgba(0,0,0,0.2);
            color: #fff;
        }

        .hero-content2 p {
            font-size: 1.5em;
            opacity: 0.95;
            line-height: 1.6;
        }

        .intro-card {
            background: white;
            padding: 60px;
            border-radius: 25px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
            margin: 60px 0;
            text-align: center;
        }

        .intro-card h2 {
            color: #c41e3a;
            font-size: 2.5em;
            margin-bottom: 20px;
        }

        .intro-card p {
            font-size: 1.2em;
            color: #555;
            line-height: 1.8;
            max-width: 800px;
            margin: 0 auto;
        }

        .section-title {
            text-align: center;
            font-size: 2.8em;
            color: #004372;
            margin-bottom: 50px;
            position: relative;
            padding-bottom: 20px;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: linear-gradient(90deg, #c41e3a, #004372);
        }

        .facilities-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
            gap: 40px;
            margin-bottom: 80px;
        }

        .facility-card {
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 5px 25px rgba(0,0,0,0.08);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border: 2px solid transparent;
        }

        .facility-card:hover {
            transform: translateY(-12px);
            box-shadow: 0 20px 50px rgba(196, 30, 58, 0.15);
            border-color: #c41e3a;
        }

        .facility-header {
            background: linear-gradient(135deg, #c41e3a 0%, #004372 100%);
            padding: 40px 30px;
            text-align: center;
            position: relative;
        }

        .facility-icon {
            font-size: 4em;
            margin-bottom: 15px;
            display: block;
            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
        }

        .facility-header h3 {
            color: white;
            font-size: 1.8em;
            font-weight: 600;
        }

        .facility-body {
            padding: 35px 30px;
        }

        .facility-description {
            color: #666;
            font-size: 1.05em;
            line-height: 1.7;
            margin-bottom: 25px;
        }

        .facility-list {
            list-style: none;
        }

        .facility-list li {
            padding: 12px 0 12px 35px;
            color: #333;
            font-size: 1em;
            position: relative;
            border-bottom: 1px solid #f0f0f0;
        }

        .facility-list li:last-child {
            border-bottom: none;
        }

        .facility-list li::before {
            content: '✓';
            position: absolute;
            left: 0;
            top: 12px;
            width: 24px;
            height: 24px;
            background: linear-gradient(135deg, #c41e3a, #004372);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8em;
            font-weight: bold;
        }

        .stats-section {
            background: #004372;
            padding: 80px 40px;
            margin: 80px -20px;
            position: relative;
            border-radius: 30px;
        }

        .stats-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 0%, transparent 50%),
                        radial-gradient(circle at 80% 50%, rgba(255,255,255,0.1) 0%, transparent 50%);
        }

        .stats-content {
            max-width: 1400px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 40px;
            margin-top: 50px;
        }

        .stat-item {
            text-align: center;
            padding: 30px;
            background: rgba(255,255,255,0.1);
            border-radius: 15px;
            backdrop-filter: blur(10px);
            border: 2px solid rgba(255,255,255,0.2);
            transition: all 0.3s ease;
        }

        .stat-item:hover {
            background: rgba(255,255,255,0.2);
            transform: scale(1.05);
        }

        .stat-number {
            font-size: 3.5em;
            font-weight: 700;
            color: white;
            margin-bottom: 10px;
            text-shadow: 2px 2px 8px rgba(0,0,0,0.2);
        }

        .stat-label {
            font-size: 1.2em;
            color: white;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .stats-title {
            text-align: center;
            font-size: 2.8em;
            color: white;
            margin-bottom: 20px;
        }

        .gallery-section {
            margin: 80px 0;
        }

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

        .gallery-item:hover {
            transform: scale(1.02);
           box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
        }

        .gallery-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1;
        }

        .gallery-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            z-index: 2;
            width: 100%;
            padding: 20px;
        }

        .gallery-icon {
            font-size: 5em;
            margin-bottom: 20px;
            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
        }

        .gallery-title {
            color: #444;
            font-size: 22px;
            font-weight: 600;
        }

        .cta-section2 {
            background: white;
            padding: 60px;
            border-radius: 25px;
            text-align: center;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
            margin: 80px 0;
        }

        .cta-section h2 {
            color: #c41e3a;
            font-size: 2.5em;
            margin-bottom: 20px;
        }

        .cta-section p {
            color: #666;
            font-size: 1.2em;
            margin-bottom: 30px;
        }

        .cta-button {
            display: inline-block;
            padding: 18px 50px;
            background: linear-gradient(135deg, #c41e3a 0%, #004372 100%);
            color: #fff;
            text-decoration: none;
            border-radius: 50px;
            font-size: 1.2em;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 5px 20px rgba(196, 30, 58, 0.3);
        }

        .cta-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 30px rgba(196, 30, 58, 0.4);
        }

        @media (max-width: 1024px) {
            .facilities-container {
                grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            }
        }

        @media (max-width: 768px) {
            .hero-content h1 {
                font-size: 2.5em;
            }

            .hero-content p {
                font-size: 1.2em;
            }

            .intro-card {
                padding: 40px 30px;
            }

            .section-title {
                font-size: 2em;
            }

            .facilities-container {
                grid-template-columns: 1fr;
            }

            .stats-section {
                padding: 60px 20px;
            }

            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 20px;
            }

            .gallery-grid {
                grid-template-columns: 1fr;
            }

            .cta-section {
                padding: 40px 30px;
            }
        }        






/* ===== School History Page Styles ===== */
        .school-history-page {
            background-color: #f6f9fc;
            padding: 50px 15px;
        }

        .school-history-container {
            max-width: 1100px;
            margin: auto;
            background: #ffffff;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
        }

        .school-history-heading {
            text-align: center;
            margin-bottom: 35px;
        }

        .school-history-heading h2 {
            font-size: 32px;
            color: #004372;
            margin-bottom: 10px;
        }

        .school-history-heading span {
            display: inline-block;
            width: 80px;
            height: 4px;
            background-color: #c41e3a;
            border-radius: 2px;
        }

        .school-history-content {
            line-height: 1.8;
            color: #333333;
            font-size: 16px;
        }

        .school-history-content p {
            margin-bottom: 18px;
        }

        .school-history-highlight {
            background: #004372;
            color: #ffffff;
            padding: 25px;
            border-radius: 8px;
            margin-top: 30px;
        }

        .school-history-highlight h3 {
            margin-bottom: 10px;
            font-size: 22px;
            color: #ffffff;
        }

        .school-history-highlight p {
            margin: 0;
            font-size: 15px;
        }

        @media (max-width: 768px) {
            .school-history-container {
                padding: 25px;
            }

            .school-history-heading h2 {
                font-size: 26px;
            }
        }        







 .history-hero {
            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
                        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400"><rect fill="%23004372" width="1200" height="400"/><path fill="%23c41e3a" opacity="0.5" d="M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,400L1392,400C1344,400,1248,400,1152,400C1056,400,960,400,864,400C768,400,672,400,576,400C480,400,384,400,288,400C192,400,96,400,48,400L0,400Z"/></svg>');
            background-size: cover;
            background-position: center;
            padding: 100px 20px;
            text-align: center;
            color: white;
        }

        .hero-title {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            color: #fff;
        }

        .hero-subtitle {
            font-size: 1.3rem;
            font-weight: 300;
            max-width: 700px;
            margin: 0 auto;
        }

        .history-container {
            max-width: 1400px;
            margin: -50px auto 0;
            padding: 0 20px 60px;
        }

        .timeline-section {
            background: white;
            border-radius: 20px;
            padding: 50px 40px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
            margin-bottom: 40px;
        }

        .section-title {
            font-size: 2.2rem;
            color: #004372;
            margin-bottom: 30px;
            text-align: center;
            position: relative;
            padding-bottom: 15px;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: linear-gradient(to right, #004372, #c41e3a);
            border-radius: 2px;
        }

        .timeline {
            position: relative;
            padding: 20px 0;
        }

        .timeline::before {
            content: '';
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 4px;
            height: 100%;
            background: linear-gradient(to bottom, #004372, #c41e3a);
        }

        .timeline-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 50px;
            position: relative;
        }

        .timeline-item:nth-child(even) {
            flex-direction: row-reverse;
        }

        .timeline-content {
            width: 45%;
            background: #f8f9ff;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .timeline-content:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 67, 114, 0.2);
        }

        .timeline-year {
            font-size: 1.8rem;
            font-weight: 700;
            color: #004372;
            margin-bottom: 10px;
        }

        .timeline-text {
            font-size: 1.05rem;
            color: #555;
            line-height: 1.7;
        }

        .timeline-dot {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 20px;
            background: white;
            border: 4px solid #004372;
            border-radius: 50%;
            z-index: 1;
        }

        .achievements-section {
            background: white;
            border-radius: 20px;
            padding: 50px 40px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
            margin-bottom: 40px;
        }

        .achievement-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
            margin-top: 30px;
        }

        .achievement-card {
            background: linear-gradient(135deg, #004372 0%, #c41e3a 100%);
            padding: 30px;
            border-radius: 15px;
            color: white;
            text-align: center;
            transition: transform 0.3s ease;
        }

        .achievement-card:hover {
            transform: scale(1.05);
        }

        .achievement-icon {
            font-size: 3rem;
            margin-bottom: 15px;
        }

        .achievement-title {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .achievement-description {
            font-size: 0.95rem;
            opacity: 0.9;
        }

        .legacy-section {
            background: white;
            border-radius: 20px;
            padding: 50px 40px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
        }

        .legacy-content {
            font-size: 1.1rem;
            color: #555;
            line-height: 1.8;
            text-align: center;
            max-width: 900px;
            margin: 0 auto;
        }

        @media (max-width: 768px) {
            .hero-title {
                font-size: 2rem;
            }

            .hero-subtitle {
                font-size: 1rem;
            }

            .section-title {
                font-size: 1.7rem;
            }

            .timeline::before {
                left: 20px;
            }

            .timeline-item {
                flex-direction: column !important;
                align-items: flex-start;
                padding-left: 50px;
            }

            .timeline-content {
                width: 100%;
            }

            .timeline-dot {
                left: 20px;
            }

            .achievement-grid {
                grid-template-columns: 1fr;
            }

            .history-container {
                padding: 0 15px 40px;
            }

            .timeline-section,
            .achievements-section,
            .legacy-section {
                padding: 30px 20px;
            }
        }        





/* Principal Message Banner Section */
        .principal-message-banner {
            background: linear-gradient(135deg, #004372 0%, #0066b3 100%);
            color: white;
            padding: 80px 20px 60px;
            text-align: center;
            position: relative;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 67, 114, 0.3);
        }
        
        .principal-message-banner::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
            animation: banner-animation 20s linear infinite;
        }
        
        @keyframes banner-animation {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .principal-message-banner-content {
            position: relative;
            z-index: 1;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .principal-message-banner-title {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 15px;
            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
            letter-spacing: 1px;
            color: #fff;
        }
        
        .principal-message-banner-subtitle {
            font-size: 1.3rem;
            font-weight: 300;
            text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
        }
        
        /* Principal Message Container */
        .principal-message-container {
            max-width: 1200px;
            margin: -40px auto 60px;
            padding: 0 20px;
        }
        
        /* Principal Message Card */
        .principal-message-card {
            background: white;
            border-radius: 20px;
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
            overflow: hidden;
            transition: transform 0.3s ease;
        }
        
        .principal-message-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
        }
        
        /* Principal Profile Section */
        .principal-profile-section {
            display: flex;
            gap: 40px;
            padding: 50px;
            align-items: flex-start;
            background: linear-gradient(to right, #f8f9fa, #ffffff);
            border-bottom: 3px solid #004372;
        }
        
        .principal-profile-image-wrapper {
            flex-shrink: 0;
        }
        
        .principal-profile-image {
            width: 250px;
            height: 300px;
            border-radius: 15px;
            object-fit: cover;
            box-shadow: 0 10px 30px rgba(0, 67, 114, 0.3);
            border: 5px solid #004372;
        }
        
        .principal-profile-info {
            flex: 1;
        }
        
        .principal-profile-name {
            font-size: 2.5rem;
            color: #004372;
            margin-bottom: 10px;
            font-weight: 700;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
        }
        
        .principal-profile-designation {
            font-size: 1.3rem;
            color: #c41e3a;
            margin-bottom: 20px;
            font-weight: 600;
        }
        
        .principal-profile-credentials {
            font-size: 1rem;
            color: #666;
            margin-bottom: 25px;
            font-style: italic;
        }
        
        .principal-profile-quote {
            background: linear-gradient(135deg, #004372 0%, #0066b3 100%);
            color: white;
            padding: 20px 25px;
            border-radius: 10px;
            font-size: 1.1rem;
            font-style: italic;
            position: relative;
            box-shadow: 0 5px 15px rgba(0, 67, 114, 0.3);
        }
        
        .principal-profile-quote::before {
            content: '"';
            font-size: 4rem;
            position: absolute;
            top: -10px;
            left: 10px;
            opacity: 0.3;
        }
        
        /* Principal Message Content Section */
        .principal-message-content-section {
            padding: 50px;
        }
        
        .principal-message-greeting {
            font-size: 1.5rem;
            color: #004372;
            margin-bottom: 30px;
            font-weight: 600;
        }
        
        .principal-message-paragraph {
            font-size: 1.1rem;
            color: #333;
            margin-bottom: 25px;
            text-align: justify;
            line-height: 1.8;
        }
        
        .principal-message-highlight {
            background: linear-gradient(120deg, #fff4e6 0%, #ffe4cc 100%);
            padding: 30px;
            border-radius: 15px;
            margin: 30px 0;
            border-left: 5px solid #c41e3a;
            box-shadow: 0 5px 20px rgba(196, 30, 58, 0.1);
        }
        
        .principal-message-highlight-title {
            font-size: 1.5rem;
            color: #c41e3a;
            margin-bottom: 15px;
            font-weight: 700;
        }
        
        /* Principal Vision Section */
        .principal-vision-section {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 25px;
            margin: 40px 0;
        }
        
        .principal-vision-card {
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            border-top: 4px solid #004372;
        }
        
        .principal-vision-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 35px rgba(0, 67, 114, 0.2);
        }
        
        .principal-vision-icon {
            font-size: 3rem;
            margin-bottom: 15px;
        }
        
        .principal-vision-card-title {
            font-size: 1.3rem;
            color: #004372;
            margin-bottom: 15px;
            font-weight: 700;
        }
        
        .principal-vision-card-text {
            font-size: 1rem;
            color: #555;
            line-height: 1.7;
        }
        
        /* Principal Message Closing Section */
        .principal-message-closing {
            background: linear-gradient(135deg, #004372 0%, #0066b3 100%);
            padding: 40px;
            border-radius: 15px;
            color: white;
            text-align: center;
            margin-top: 40px;
            box-shadow: 0 10px 30px rgba(0, 67, 114, 0.3);
        }
        
        .principal-message-closing-text {
            font-size: 1.3rem;
            margin-bottom: 20px;
            line-height: 1.8;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
        }
        
        .principal-signature {
            font-size: 1.5rem;
            font-weight: 700;
            margin-top: 20px;
            font-family: cursive;
        }
        
        .principal-signature-title {
            font-size: 1rem;
            margin-top: 5px;
            opacity: 0.9;
        }

        .principal-profile-section {
            margin-top: 30px;
        }
        
        /* Responsive Design */
        
        /* Mini Mobile (320px - 374px) */
        @media screen and (max-width: 374px) {

            .principal-message-banner {
                padding: 50px 15px 40px;
            }
            
            .principal-message-banner-title {
                font-size: 1.8rem;
            }
            
            .principal-message-banner-subtitle {
                font-size: 1rem;
            }
            
            .principal-profile-section {
                flex-direction: column;
                padding: 25px 15px;
                gap: 25px;
            }
            
            .principal-profile-image {
                width: 100%;
                height: 280px;
            }
            
            .principal-profile-name {
                font-size: 1.8rem;
            }
            
            .principal-profile-designation {
                font-size: 1.1rem;
            }
            
            .principal-message-content-section {
                padding: 25px 15px;
            }
            
            .principal-message-greeting {
                font-size: 1.2rem;
            }
            
            .principal-message-paragraph {
                font-size: 1rem;
            }
            
            .principal-vision-section {
                grid-template-columns: 1fr;
            }
        }
        
        /* Small Mobile (375px - 639px) */
        @media screen and (min-width: 375px) and (max-width: 639px) {
            .principal-message-banner {
                padding: 60px 20px 45px;
            }
            
            .principal-message-banner-title {
                font-size: 2.2rem;
            }
            
            .principal-message-banner-subtitle {
                font-size: 1.1rem;
            }
            
            .principal-profile-section {
                flex-direction: column;
                padding: 30px 20px;
                gap: 30px;
            }
            
            .principal-profile-image {
                width: 100%;
                height: 320px;
            }
            
            .principal-profile-name {
                font-size: 2rem;
            }
            
            .principal-profile-designation {
                font-size: 1.2rem;
            }
            
            .principal-message-content-section {
                padding: 30px 20px;
            }
            
            .principal-vision-section {
                grid-template-columns: 1fr;
            }
        }
        
        /* Tablet (640px - 1023px) */
        @media screen and (min-width: 640px) and (max-width: 1023px) {
            .principal-message-banner-title {
                font-size: 2.5rem;
            }
            
            .principal-profile-section {
                padding: 40px 30px;
            }
            
            .principal-profile-image {
                width: 220px;
                height: 280px;
            }
            
            .principal-message-content-section {
                padding: 40px 30px;
            }
            
            .principal-vision-section {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        /* Mini Laptop (1024px - 1279px) */
        @media screen and (min-width: 1024px) and (max-width: 1279px) {
            .principal-message-banner-title {
                font-size: 2.8rem;
            }
            
            .principal-vision-section {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        
        /* Big Desktop & Mac (1280px+) */
        @media screen and (min-width: 1280px) {
            .principal-message-container {
                max-width: 1400px;
            }
            
            .principal-vision-section {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        
        /* iPhone Specific */
        @media only screen 
        and (min-device-width: 375px) 
        and (max-device-width: 812px) 
        and (-webkit-device-pixel-ratio: 3) {
            .principal-profile-section {
                padding: 30px 20px;
            }
            
            .principal-message-paragraph {
                font-size: 1.05rem;
            }
        }
        
        /* Print Styles */
        @media print {
            .principal-message-banner {
                background: #004372;
                color: white;
            }
            
            .principal-message-card {
                box-shadow: none;
                border: 1px solid #ddd;
            }
        }        








/* About Banner Section */
        .about-banner {
            position: relative;
            background: linear-gradient(135deg, var(--primary-blue) 0%, #0066a8 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            padding: 70px 0;
        }
        
        .about-banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><path d="M0,300 Q300,200 600,300 T1200,300 L1200,600 L0,600 Z" fill="rgba(255,255,255,0.05)"/></svg>') no-repeat center;
            background-size: cover;
            opacity: 0.3;
        }
        
        .about-banner-content {
            position: relative;
            z-index: 2;
            text-align: center;
            color: var(--text-light);
            padding: 20px;
            animation: bannerFadeIn 1s ease-out;
        }
        
        @keyframes bannerFadeIn {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .about-banner-title {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 15px;
            text-shadow: 2px 4px 8px rgba(0, 0, 0, 0.3);
            letter-spacing: 1px;
            color: #fff
        }
        
        .about-banner-subtitle {
            font-size: 1.3rem;
            font-weight: 300;
            text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
            opacity: 0.95;
            color: #fff;
        }
        
        /* Introduction Section */
        .about-introduction {
            padding: 80px 20px;
            background: var(--background-white);
        }
        
        .about-container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .about-intro-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }
        
        .about-intro-text {
            animation: slideInLeft 0.8s ease-out;
        }
        
        @keyframes slideInLeft {
            from {
                opacity: 0;
                transform: translateX(-50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        .about-intro-image {
            animation: slideInRight 0.8s ease-out;
        }
        
        @keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        .section-heading {
            font-size: 2.2rem;
            color: var(--primary-blue);
            text-align: center;
            margin-bottom: 1rem;
            font-weight: 700;
        }
    
        
        .about-intro-text p {
            font-size: 1.1rem;
            line-height: 1.8;
            margin-bottom: 20px;
            color: #333;
        }
        
        .about-intro-image img {
            width: 100%;
            height: auto;
            border-radius: 15px;
            box-shadow: var(--shadow-strong);
            transition: transform 0.3s ease;
        }
        
        .about-intro-image img:hover {
            transform: scale(1.02);
        }
        
        /* Mission Vision Section */
        .about-mission-vision {
            padding: 80px 20px;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        }
        
        .about-mission-vision-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
            margin-top: 50px;
        }
        
        .about-mission-card,
        .about-vision-card,
        .about-values-card{
            background: var(--background-white);
            padding: 50px 40px;
            border-radius: 20px;
            box-shadow: var(--shadow-medium);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .about-mission-card:hover,
        .about-vision-card:hover,
        .about-values-card:hover{
            transform: translateY(-10px);
            box-shadow: var(--shadow-strong);
        }
        
        .card-icon {
            font-size: 3.5rem;
            margin-bottom: 25px;
            display: inline-block;
        }
        
        .card-title {
            font-size: 2rem;
            color: var(--primary-blue);
            margin-bottom: 20px;
            font-weight: 600;
        }
        
        .card-description {
            font-size: 1.05rem;
            line-height: 1.8;
            color: #555;
        }
        
        /* Values Section */
        .about-values {
            padding: 80px 20px;
            background: var(--background-white);
        }
        
        .about-values-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 35px;
            margin-top: 50px;
        }
        
        .about-value-item {
            text-align: center;
            padding: 40px 30px;
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            border-radius: 15px;
            box-shadow: var(--shadow-soft);
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }
        
        .about-value-item:hover {
            border-color: var(--primary-blue);
            box-shadow: var(--shadow-medium);
            transform: translateY(-5px);
        }
        
        .value-icon {
            font-size: 3rem;
            margin-bottom: 20px;
            display: inline-block;
        }
        
        .value-title {
            font-size: 1.4rem;
            color: var(--primary-blue);
            margin-bottom: 15px;
            font-weight: 600;
        }
        
        .value-description {
            line-height: 1.6;
            color: #666;
            font-size: 1.1rem;
        }
        
        /* Leadership Section */
        .about-leadership {
            padding: 80px 20px;
            background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
        }
        
        .about-leadership-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
            margin-top: 50px;
        }
        
        .leadership-card {
            text-align: center;
            background: var(--background-white);
            padding: 40px 30px;
            border-radius: 20px;
            box-shadow: var(--shadow-soft);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .leadership-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(0, 67, 114, 0.05), transparent);
            transition: left 0.5s ease;
        }
        
        .leadership-card:hover::before {
            left: 100%;
        }
        
        .leadership-card:hover {
            box-shadow: var(--shadow-medium);
            transform: translateY(-10px);
        }
        
        .leadership-image {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            margin: 0 auto 25px;
            border: 5px solid var(--primary-blue);
            box-shadow: 0 5px 20px rgba(0, 67, 114, 0.3);
            overflow: hidden;
        }
        
        .leadership-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .leadership-name {
            font-size: 1.5rem;
            color: var(--primary-blue);
            margin-bottom: 10px;
            font-weight: 600;
        }
        
        .leadership-position {
            font-size: 1.2rem;
            color: var(--primary-red);
            margin-bottom: 15px;
            font-weight: 500;
        }
        
        .leadership-bio {
            font-size: 1.1rem;
            line-height: 1.6;
            color: #666;
        }
        
        /* Facilities Section */
        .about-facilities {
            padding: 80px 20px;
            background: var(--background-white);
        }
        
        .about-facilities-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
            margin-top: 50px;
        }
        
        .facility-item {
            text-align: center;
            padding: 35px 25px;
            color: #333;
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            border-radius: 15px;
            box-shadow: var(--shadow-soft);
            transition: all 0.3s ease;
        }
        
        .facility-item:hover {
            box-shadow: var(--shadow-strong);
            transform: translateY(-8px);
        }
        
        .facility-icon {
            font-size: 3rem;
            margin-bottom: 20px;
            transition: transform 0.3s ease;
        }
        
        .facility-item:hover .facility-icon {
            transform: scale(1.1) rotate(5deg);
        }
        
        .facility-name {
            font-size: 1.2rem;
            font-weight: 600;
            color: #333;
        }
        
        /* CTA Section */
        .about-cta {
            padding: 80px 20px;
            background: linear-gradient(135deg, var(--primary-red) 0%, #a01629 100%);
            text-align: center;
            color: var(--text-light);
        }
        
        .cta-title {
            font-size: 2.5rem;
            margin-bottom: 20px;
            text-shadow: 2px 3px 6px rgba(0, 0, 0, 0.3);
            color: #fff;
        }
        
        .cta-description {
            font-size: 1.2rem;
            margin-bottom: 35px;
            opacity: 0.95;
            color: #fff;
        }
        
        .cta-button {
            display: inline-block;
            padding: 18px 50px;
            background: var(--white);
            color: var(--primary-red);
            text-decoration: none;
            font-size: 1.1rem;
            font-weight: 600;
            border-radius: 50px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
        }
        
        .cta-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
            background: var(--light-gray);
            color: var(--text-light);
        }
        
        /* Footer */
        .about-footer {
            padding: 40px 20px;
            background: var(--primary-blue);
            color: var(--text-light);
            text-align: center;
        }
        

        /* Responsive Design */
        
        /* Big Desktop (1920px and above) */
        @media screen and (min-width: 1920px) {
            .about-container {
                max-width: 1600px;
            }
            
        }
        
        /* Mac/Large Laptop (1440px - 1919px) */
        @media screen and (min-width: 1440px) and (max-width: 1919px) {
            .about-container {
                max-width: 1300px;
            }
        }
        
        /* Mini Laptop (1024px - 1439px) */
        @media screen and (min-width: 1024px) and (max-width: 1439px) {
            .about-container {
                max-width: 980px;
            }
            
            .about-banner-title {
                font-size: 3rem;
            }
            
            .section-heading {
                font-size: 2.2rem;
            }
        }
        
        /* Tablet (768px - 1023px) */
        @media screen and (min-width: 768px) and (max-width: 1023px) {
            .about-banner {
                height: 400px;
            }
            
            .about-banner-title {
                font-size: 2.5rem;
            }
            
            .about-banner-subtitle {
                font-size: 1.1rem;
            }
            
            .about-intro-content {
                grid-template-columns: 1fr;
                gap: 40px;
            }
            
            .about-mission-vision-grid {
                grid-template-columns: 1fr;
                gap: 30px;
            }
            
            .about-values-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 25px;
            }
            
            .timeline-content {
                width: 42%;
            }
            
            .about-leadership-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 30px;
            }
            
            .about-facilities-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 25px;
            }
        }
        
        /* Small Mobile (481px - 767px) */
        @media screen and (min-width: 481px) and (max-width: 767px) {
            .about-banner {
                height: 350px;
            }
            
            .about-banner-title {
                font-size: 2rem;
            }
            
            .about-banner-subtitle {
                font-size: 1rem;
            }
            
            .about-introduction,
            .about-mission-vision,
            .about-values,
            .about-history,
            .about-leadership,
            .about-facilities,
            .about-cta {
                padding: 60px 20px;
            }
            
            .about-intro-content {
                grid-template-columns: 1fr;
                gap: 30px;
            }
            
            .section-heading {
                font-size: 1.8rem;
            }
            
            .about-mission-vision-grid {
                grid-template-columns: 1fr;
                gap: 25px;
            }
            
            .about-values-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .about-timeline::before {
                left: 30px;
            }
            
            .timeline-item {
                justify-content: flex-start;
                padding-left: 70px;
            }
            
            .timeline-item:nth-child(odd) {
                justify-content: flex-start;
            }
            
            .timeline-content {
                width: 100%;
            }
            
            .timeline-dot {
                left: 30px;
            }
            
            .about-leadership-grid {
                grid-template-columns: 1fr;
                gap: 25px;
            }
            
            .about-facilities-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 20px;
            }
            
            .cta-title {
                font-size: 2rem;
            }
        }
        
        /* Mini Mobile (320px - 480px) and iPhone */
        @media screen and (max-width: 480px) {
            .about-banner {
                height: 300px;
            }
            
            .about-banner-title {
                font-size: 1.8rem;
            }
            
            .about-banner-subtitle {
                font-size: 0.95rem;
            }
            
            .about-introduction,
            .about-mission-vision,
            .about-values,
            .about-history,
            .about-leadership,
            .about-facilities,
            .about-cta {
                padding: 50px 15px;
            }
            
            .about-intro-content {
                grid-template-columns: 1fr;
                gap: 25px;
            }
            
            .section-heading {
                font-size: 1.6rem;
            }
            
            .about-intro-text p {
                font-size: 1rem;
            }
            
            .about-mission-vision-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .about-mission-card,
            .about-vision-card {
                padding: 35px 25px;
            }
            
            .card-title {
                font-size: 1.6rem;
            }
            
            .about-values-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .about-timeline::before {
                left: 20px;
            }
            
            .timeline-item {
                justify-content: flex-start;
                padding-left: 60px;
                margin-bottom: 40px;
            }
            
            .timeline-item:nth-child(odd) {
                justify-content: flex-start;
            }
            
            .timeline-content {
                width: 100%;
                padding: 25px 20px;
            }
            
            .timeline-year {
                font-size: 1.5rem;
            }
            
            .timeline-dot {
                left: 20px;
            }
            
            .about-leadership-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .about-facilities-grid {
                grid-template-columns: 1fr;
                gap: 15px;
            }
        }        




        /* Experience Campus Section */
.experience-section {
    background: linear-gradient(135deg, #004372, #c41e3a);
    padding: 70px 20px;
    text-align: center;
    border-radius: 20px;
    color: #ffffff;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    margin: 60px auto;
    max-width: 1200px;
}

.experience-section h2 {
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #fff;
}

.experience-section p {
    font-size: 1.1rem;
    max-width: 650px;
    margin: 0 auto 30px;
    opacity: 0.95;
    line-height: 1.7;
}

/* Call To Action Button */
.experience-section .cta-button {
    display: inline-block;
    padding: 14px 36px;
    background-color: var(--background-white);
    color: #004372;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 30px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.experience-section .cta-button:hover {
    background-color: #c41e3a;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25);
}

/* Responsive */
@media (max-width: 768px) {
    .experience-section {
        padding: 50px 15px;
    }

    .experience-section h2 {
        font-size: 1.9rem;
    }

    .experience-section p {
        font-size: 1rem;
    }
}












/* Campus Banner Section */
        .campus-banner {
            position: relative;
            background: var(--gradient-blue);
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 70px 0;
        }
        
        .campus-banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url('https://images.unsplash.com/photo-1562774053-701939374585?w=1920&q=80');
            background-size: cover;
            background-position: center;
            opacity: 0.3;
            animation: subtle-zoom 20s ease-in-out infinite alternate;
        }
        
        @keyframes subtle-zoom {
            from { transform: scale(1); }
            to { transform: scale(1.05); }
        }
        
        .campus-banner-content {
            position: relative;
            z-index: 2;
            text-align: center;
            padding: 2rem;
            max-width: 900px;
        }
        
        .campus-title {
            font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    text-shadow: 2px 4px 8px rgba(0, 0, 0, 0.3);
    letter-spacing: 1px;
    color: #fff;
        }
        
        .campus-subtitle {
            font-size: 1.5rem;
            color: var(--white);
            font-weight: 300;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
            animation: fade-slide-up 1s ease-out 0.2s both;
        }
        
        @keyframes fade-slide-down {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes fade-slide-up {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* Campus Introduction Section */
        .campus-intro-section {
            padding: 5rem 2rem;
            background: linear-gradient(180deg, var(--white) 0%, var(--light-blue) 100%);
        }
        
        .campus-intro-container {
            max-width: 1200px;
            margin: 0 auto;
            text-align: center;
        }
        
        .campus-intro-heading {
            font-size: 2.8rem;
            color: var(--primary-blue);
            margin-bottom: 1.5rem;
            font-weight: 700;
            position: relative;
            display: inline-block;
        }
        
        .campus-intro-heading::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: var(--gradient-red);
            border-radius: 2px;
        }
        
        .campus-intro-text {
            font-size: 1.2rem;
            color: var(--text-light);
            max-width: 900px;
            margin: 2rem auto 0;
            line-height: 1.9;
        }
        
        /* Campus Features Grid Section */
        .campus-features-section {
            padding: 5rem 2rem;
            background: var(--white);
        }
        
        .campus-features-container {
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .campus-features-heading {
            font-size: 2.8rem;
            color: var(--primary-blue);
            text-align: center;
            margin-bottom: 4rem;
            font-weight: 700;
        }
        
        .campus-features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 2.5rem;
        }
        
        .campus-feature-card {
            background: var(--white);
            border-radius: 16px;
            padding: 2.5rem;
            box-shadow: var(--shadow-md);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }
        
        .campus-feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: var(--gradient-red);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.4s ease;
        }
        
        .campus-feature-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-lg);
        }
        
        .campus-feature-card:hover::before {
            transform: scaleX(1);
        }
        
        .campus-feature-icon {
            width: 70px;
            height: 70px;
            background: var(--gradient-blue);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
            font-size: 2rem;
            box-shadow: var(--shadow-sm);
        }
        
        .campus-feature-title {
            font-size: 1.6rem;
            color: var(--primary-blue);
            margin-bottom: 1rem;
            font-weight: 600;
        }
        
        .campus-feature-description {
            font-size: 1.05rem;
            color: var(--text-light);
            line-height: 1.8;
        }
        
        /* Campus Gallery Section */
        .campus-gallery-section {
            padding: 5rem 2rem;
            background: var(--light-blue);
        }
        
        .campus-gallery-container {
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .campus-gallery-heading {
            font-size: 2.8rem;
            color: var(--primary-blue);
            text-align: center;
            margin-bottom: 4rem;
            font-weight: 700;
        }
        
        .campus-gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }
        
        .campus-gallery-item {
            position: relative;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: var(--shadow-md);
            height: 350px;
            cursor: pointer;
            transition: all 0.4s ease;
        }
        
        .campus-gallery-item:hover {
            transform: scale(1.03);
            box-shadow: var(--shadow-lg);
        }
        
        .campus-gallery-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }
        
        .campus-gallery-item:hover .campus-gallery-image {
            transform: scale(1.1);
        }
        
        .campus-gallery-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(0, 67, 114, 0.9) 0%, transparent 100%);
            padding: 2rem;
            transform: translateY(100%);
            transition: transform 0.4s ease;
        }
        
        .campus-gallery-item:hover .campus-gallery-overlay {
            transform: translateY(0);
        }
        
        .campus-gallery-caption {
            color: var(--white);
            font-size: 1.3rem;
            font-weight: 600;
            text-shadow: var(--text-shadow);
        }
        
        /* Campus Facilities Details Section */
        .campus-facilities-section {
            padding: 5rem 2rem;
            background: var(--white);
        }
        
        .campus-facilities-container {
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .campus-facilities-heading {
            font-size: 2.8rem;
            color: var(--primary-blue);
            text-align: center;
            margin-bottom: 4rem;
            font-weight: 700;
        }
        
        .campus-facilities-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
        }
        
        .campus-facility-item {
            background: linear-gradient(135deg, var(--light-blue) 0%, var(--white) 100%);
            padding: 2rem;
            border-radius: 12px;
            border-left: 5px solid var(--accent-red);
            box-shadow: var(--shadow-sm);
            transition: all 0.3s ease;
        }
        
        .campus-facility-item:hover {
            transform: translateX(10px);
            box-shadow: var(--shadow-md);
            border-left-width: 8px;
        }
        
        .campus-facility-name {
            font-size: 1.4rem;
            color: var(--primary-blue);
            font-weight: 600;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            gap: 0.8rem;
        }
        
        .campus-facility-icon-small {
            font-size: 1.5rem;
        }
        
        .campus-facility-info {
            font-size: 1.05rem;
            color: var(--text-light);
            line-height: 1.7;
        }
        
        /* Campus Statistics Section */
        .campus-stats-section {
            padding: 5rem 2rem;
            background: var(--gradient-blue);
            color: var(--white);
            position: relative;
            overflow: hidden;
        }
        
        .campus-stats-section::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -20%;
            width: 500px;
            height: 500px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 50%;
        }
        
        .campus-stats-section::after {
            content: '';
            position: absolute;
            bottom: -30%;
            left: -10%;
            width: 400px;
            height: 400px;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 50%;
        }
        
        .campus-stats-container {
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }
        
        .campus-stats-heading {
            font-size: 2.8rem;
            text-align: center;
            margin-bottom: 4rem;
            font-weight: 700;
            text-shadow: var(--text-shadow);
        }
        
        .campus-stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 3rem;
        }
        
        .campus-stat-card {
            text-align: center;
            padding: 2rem;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            backdrop-filter: blur(10px);
            border: 2px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
        }
        
        .campus-stat-card:hover {
            transform: scale(1.05);
            background: rgba(255, 255, 255, 0.15);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
        }
        
        .campus-stat-number {
            font-size: 3.5rem;
            font-weight: 800;
            margin-bottom: 0.5rem;
            background: linear-gradient(135deg, var(--white) 0%, var(--light-blue) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .campus-stat-label {
            font-size: 1.2rem;
            font-weight: 500;
            opacity: 0.95;
        }
        
        /* Campus Virtual Tour CTA Section */
        .campus-tour-section {
            padding: 5rem 2rem;
            background: linear-gradient(135deg, var(--light-blue) 0%, var(--white) 100%);
        }
        
        .campus-tour-container {
            max-width: 900px;
            margin: 0 auto;
            text-align: center;
            padding: 4rem;
            background: var(--white);
            border-radius: 20px;
            box-shadow: var(--shadow-lg);
        }
        
        .campus-tour-heading {
            font-size: 2.5rem;
            color: var(--primary-blue);
            margin-bottom: 1.5rem;
            font-weight: 700;
        }
        
        .campus-tour-text {
            font-size: 1.2rem;
            color: var(--text-light);
            margin-bottom: 2.5rem;
            line-height: 1.8;
        }
        
        .campus-tour-button {
            display: inline-block;
            padding: 1.2rem 3rem;
            background: var(--gradient-red);
            color: var(--white);
            font-size: 1.2rem;
            font-weight: 600;
            border-radius: 50px;
            text-decoration: none;
            box-shadow: var(--shadow-md);
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
        }
        
        .campus-tour-button:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-lg);
        }
        
        /* Responsive Design */
        
        /* Mini Mobile (320px - 374px) */
        @media screen and (max-width: 374px) {
            .campus-title {
                font-size: 2rem;
            }
            
            .campus-subtitle {
                font-size: 1rem;
            }
            
            .campus-intro-heading,
            .campus-features-heading,
            .campus-gallery-heading,
            .campus-facilities-heading,
            .campus-stats-heading {
                font-size: 1.8rem;
            }
            
            .campus-features-grid,
            .campus-gallery-grid,
            .campus-facilities-list,
            .campus-stats-grid {
                grid-template-columns: 1fr;
            }
            
            .campus-feature-card,
            .campus-facility-item {
                padding: 1.5rem;
            }
            
            .campus-intro-section,
            .campus-features-section,
            .campus-gallery-section,
            .campus-facilities-section,
            .campus-stats-section,
            .campus-tour-section {
                padding: 3rem 1rem;
            }
        }
        
        /* Small Mobile (375px - 479px) */
        @media screen and (min-width: 375px) and (max-width: 479px) {
            .campus-title {
                font-size: 2.5rem;
            }
            
            .campus-subtitle {
                font-size: 1.1rem;
            }
            
            .campus-intro-heading,
            .campus-features-heading,
            .campus-gallery-heading,
            .campus-facilities-heading,
            .campus-stats-heading {
                font-size: 2rem;
            }
            
            .campus-features-grid,
            .campus-gallery-grid,
            .campus-facilities-list {
                grid-template-columns: 1fr;
            }
        }
        
        /* Regular Mobile (480px - 767px) */
        @media screen and (min-width: 480px) and (max-width: 767px) {
            .campus-title {
                font-size: 3rem;
            }
            
            .campus-subtitle {
                font-size: 1.2rem;
            }
            
            .campus-intro-heading,
            .campus-features-heading,
            .campus-gallery-heading,
            .campus-facilities-heading,
            .campus-stats-heading {
                font-size: 2.3rem;
            }
        }
        
        /* Tablet (768px - 1023px) */
        @media screen and (min-width: 768px) and (max-width: 1023px) {
            .campus-title {
                font-size: 3.5rem;
            }
            
            .campus-features-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .campus-gallery-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .campus-facilities-list {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .campus-stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        /* Mini Laptop (1024px - 1365px) */
        @media screen and (min-width: 1024px) and (max-width: 1365px) {
            .campus-features-grid {
                grid-template-columns: repeat(3, 1fr);
            }
            
            .campus-gallery-grid {
                grid-template-columns: repeat(3, 1fr);
            }
            
            .campus-facilities-list {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        
        /* Regular Desktop (1366px - 1919px) */
        @media screen and (min-width: 1366px) and (max-width: 1919px) {
            .campus-features-grid {
                grid-template-columns: repeat(3, 1fr);
            }
            
            .campus-gallery-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }
        
        /* Big Desktop (1920px and above) */
        @media screen and (min-width: 1920px) {
            
            .campus-subtitle {
                font-size: 1.8rem;
            }
            
            .campus-intro-heading,
            .campus-features-heading,
            .campus-gallery-heading,
            .campus-facilities-heading,
            .campus-stats-heading {
                font-size: 2.2rem;
            }
            
            .campus-features-grid {
                grid-template-columns: repeat(4, 1fr);
            }
            
            .campus-gallery-grid {
                grid-template-columns: repeat(4, 1fr);
            }
            
            .campus-facilities-list {
                grid-template-columns: repeat(4, 1fr);
            }
        }
        
        /* iPhone Specific (including iPhone 12, 13, 14, 15 Pro Max) */
        @media screen and (min-device-width: 390px) and (max-device-width: 430px) and (-webkit-device-pixel-ratio: 3) {
            
            .campus-title {
                font-size: 2.5rem;
            }
        }
        
        /* Mac/Retina Display Optimization */
        @media screen and (-webkit-min-device-pixel-ratio: 2), 
               screen and (min-resolution: 192dpi) {
            .campus-feature-card,
            .campus-gallery-item,
            .campus-facility-item {
                box-shadow: 0 4px 24px rgba(0, 67, 114, 0.12);
            }
        }
        
        /* Browser Compatibility */
        @supports (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px)) {
            .campus-stat-card {
                -webkit-backdrop-filter: blur(10px);
                backdrop-filter: blur(10px);
            }
        }
        
        /* Print Styles */
        @media print {
            .campus-banner {
                height: auto;
                page-break-inside: avoid;
            }
            
            .campus-feature-card,
            .campus-gallery-item,
            .campus-facility-item {
                page-break-inside: avoid;
                box-shadow: none;
                border: 1px solid #ccc;
            }
        }













/* Primary School Banner Section */
        .primary-school-banner {
            position: relative;
            background: linear-gradient(135deg, var(--primary-blue) 0%, #0066b3 100%);
            padding: 80px 20px;
            text-align: center;
            overflow: hidden;
            box-shadow: 0 10px 40px rgba(0, 67, 114, 0.3);
        }
        
        .primary-school-banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 20% 30%, rgba(255, 215, 0, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(196, 30, 58, 0.1) 0%, transparent 50%);
            animation: bannerGlow 8s ease-in-out infinite;
        }
        
        @keyframes bannerGlow {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }
        
        .primary-school-banner-content {
            position: relative;
            z-index: 2;
            max-width: 1000px;
            margin: 0 auto;
        }
        
        .primary-school-main-title {
            font-family: 'Baloo 2', cursive;
            font-size: 4rem;
            font-weight: 800;
            color: var(--white);
            margin-bottom: 20px;
            text-shadow: 
                3px 3px 6px rgba(0, 0, 0, 0.3),
                0 0 30px rgba(255, 215, 0, 0.3);
            animation: titleBounce 2s ease-in-out infinite;
        }
        
        @keyframes titleBounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        
        .primary-school-tagline {
            font-size: 1.5rem;
            color: var(--white);
            margin-bottom: 30px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            font-weight: 500;
        }
        
        .primary-school-cta-button {
            display: inline-block;
            padding: 18px 45px;
            background: linear-gradient(135deg, var(--primary-red) 0%, #e63950 100%);
            color: var(--white);
            text-decoration: none;
            border-radius: 50px;
            font-size: 1.2rem;
            font-weight: 700;
            box-shadow: 
                0 8px 25px rgba(196, 30, 58, 0.4),
                inset 0 -2px 4px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        }
        
        .primary-school-cta-button:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 
                0 12px 35px rgba(196, 30, 58, 0.5),
                inset 0 -2px 4px rgba(0, 0, 0, 0.2);
        }
        
        /* Welcome Introduction Section */
        .welcome-introduction-section {
            padding: 80px 20px;
            background: linear-gradient(180deg, var(--light-blue) 0%, var(--white) 100%);
        }
        
        .welcome-introduction-container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .welcome-introduction-title {
            font-family: 'Baloo 2', cursive;
            font-size: 3rem;
            color: var(--primary-blue);
            text-align: center;
            margin-bottom: 40px;
            text-shadow: 2px 2px 4px rgba(0, 67, 114, 0.2);
        }
        
        .welcome-introduction-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            align-items: center;
        }
        
        .welcome-introduction-text {
            font-size: 1.1rem;
            line-height: 1.8;
            color: var(--text-dark);
        }
        
        .welcome-introduction-text p {
            margin-bottom: 20px;
        }
        
        .welcome-introduction-image {
            position: relative;
            border-radius: 30px;
            overflow: hidden;
            box-shadow: 
                0 20px 60px rgba(0, 67, 114, 0.2),
                0 0 0 15px rgba(255, 215, 0, 0.1);
            animation: imageFloat 6s ease-in-out infinite;
        }
        
        @keyframes imageFloat {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(2deg); }
        }
        
        .welcome-introduction-image img {
            width: 100%;
            height: auto;
            display: block;
        }
        
        /* Educational Programs Features Section */
        .educational-programs-features {
            padding: 80px 20px;
            background: linear-gradient(135deg, var(--white) 0%, var(--light-red) 100%);
        }
        
        .educational-programs-container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .educational-programs-heading {
            font-family: 'Baloo 2', cursive;
            font-size: 3rem;
            color: var(--primary-red);
            text-align: center;
            margin-bottom: 60px;
            text-shadow: 2px 2px 4px rgba(196, 30, 58, 0.2);
        }
        
        .educational-programs-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
        }
        
        .educational-program-card {
            background: var(--white);
            border-radius: 25px;
            padding: 40px 30px;
            text-align: center;
            box-shadow: 
                0 10px 40px rgba(0, 0, 0, 0.1),
                inset 0 0 0 3px rgba(255, 215, 0, 0.3);
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }
        
        .educational-program-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: linear-gradient(90deg, var(--yellow-accent), var(--green-accent), var(--orange-accent));
        }
        
        .educational-program-card:hover {
            transform: translateY(-15px) rotate(2deg);
            box-shadow: 
                0 20px 60px rgba(0, 67, 114, 0.2),
                inset 0 0 0 3px rgba(255, 215, 0, 0.5);
        }
        
        .educational-program-icon {
            font-size: 4rem;
            margin-bottom: 20px;
            display: inline-block;
            animation: iconBounce 2s ease-in-out infinite;
        }
        
        @keyframes iconBounce {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }
        
        .educational-program-card-title {
            font-family: 'Baloo 2', cursive;
            font-size: 1.6rem;
            color: var(--primary-blue);
            margin-bottom: 15px;
            font-weight: 700;
        }
        
        .educational-program-card-description {
            font-size: 1rem;
            color: var(--text-light);
            line-height: 1.6;
        }
        
        /* Learning Facilities Showcase Section */
        .learning-facilities-showcase {
            padding: 80px 20px;
            background: linear-gradient(180deg, var(--primary-blue) 0%, #003357 100%);
            position: relative;
            overflow: hidden;
        }
        
        .learning-facilities-showcase::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 10% 20%, rgba(255, 215, 0, 0.1) 0%, transparent 40%),
                radial-gradient(circle at 90% 80%, rgba(196, 30, 58, 0.1) 0%, transparent 40%);
        }
        
        .learning-facilities-container {
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }
        
        .learning-facilities-title {
            font-family: 'Baloo 2', cursive;
            font-size: 3rem;
            color: var(--white);
            text-align: center;
            margin-bottom: 60px;
            text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
        }
        
        .learning-facilities-gallery {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
        }
        
        .learning-facility-item {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 45px rgba(0, 0, 0, 0.3);
            transition: all 0.4s ease;
        }
        
        .learning-facility-item:hover {
            transform: scale(1.05) rotate(-2deg);
            box-shadow: 0 20px 60px rgba(255, 215, 0, 0.4);
        }
        
        .learning-facility-item img {
            width: 100%;
            height: 250px;
            object-fit: cover;
            display: block;
            transition: all 0.4s ease;
        }
        
        .learning-facility-item:hover img {
            transform: scale(1.1);
        }
        
        .learning-facility-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(0, 67, 114, 0.95) 0%, transparent 100%);
            padding: 20px;
            transform: translateY(100%);
            transition: all 0.4s ease;
        }
        
        .learning-facility-item:hover .learning-facility-overlay {
            transform: translateY(0);
        }
        
        .learning-facility-name {
            font-family: 'Baloo 2', cursive;
            font-size: 1.2rem;
            color: var(--white);
            font-weight: 700;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        }
        
        /* Student Achievement Highlights Section */
        .student-achievement-highlights {
            padding: 80px 20px;
            background: linear-gradient(135deg, var(--light-blue) 0%, var(--light-red) 50%, var(--light-blue) 100%);
        }
        
        .student-achievement-container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .student-achievement-heading {
            font-family: 'Baloo 2', cursive;
            font-size: 3rem;
            color: var(--primary-red);
            text-align: center;
            margin-bottom: 60px;
            text-shadow: 2px 2px 4px rgba(196, 30, 58, 0.2);
        }
        
        .student-achievement-stats {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 40px;
        }
        
        .student-achievement-stat-box {
            background: var(--white);
            border-radius: 30px;
            padding: 50px 30px;
            text-align: center;
            box-shadow: 
                0 15px 50px rgba(0, 0, 0, 0.15),
                inset 0 0 0 4px var(--yellow-accent);
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }
        
        .student-achievement-stat-box::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255, 215, 0, 0.1), transparent);
            transform: rotate(45deg);
            animation: shimmer 3s infinite;
        }
        
        @keyframes shimmer {
            0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
            100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
        }
        
        .student-achievement-stat-box:hover {
            transform: translateY(-10px) scale(1.05);
            box-shadow: 
                0 25px 70px rgba(0, 67, 114, 0.25),
                inset 0 0 0 4px var(--yellow-accent);
        }
        
        .student-achievement-number {
            font-family: 'Baloo 2', cursive;
            font-size: 4rem;
            font-weight: 800;
            background: linear-gradient(135deg, var(--primary-blue), var(--primary-red));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .student-achievement-label {
            font-size: 1.2rem;
            color: var(--text-dark);
            font-weight: 600;
        }
        
        /* Parent Testimonials Reviews Section */
        .parent-testimonials-reviews {
            padding: 80px 20px;
            background: linear-gradient(180deg, var(--white) 0%, var(--light-blue) 100%);
        }
        
        .parent-testimonials-container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .parent-testimonials-heading {
            font-family: 'Baloo 2', cursive;
            font-size: 3rem;
            color: var(--primary-blue);
            text-align: center;
            margin-bottom: 60px;
            text-shadow: 2px 2px 4px rgba(0, 67, 114, 0.2);
        }
        
        .parent-testimonials-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
        }
        
        .parent-testimonial-card {
            background: var(--white);
            border-radius: 25px;
            padding: 40px;
            box-shadow: 
                0 10px 40px rgba(0, 0, 0, 0.1),
                inset 0 0 0 3px rgba(196, 30, 58, 0.2);
            transition: all 0.4s ease;
            position: relative;
        }
        
        .parent-testimonial-card::before {
            content: '"';
            position: absolute;
            top: 20px;
            left: 30px;
            font-size: 6rem;
            font-family: 'Baloo 2', cursive;
            color: var(--light-blue);
            line-height: 1;
        }
        
        .parent-testimonial-card:hover {
            transform: translateY(-10px);
            box-shadow: 
                0 20px 60px rgba(0, 67, 114, 0.2),
                inset 0 0 0 3px var(--primary-red);
        }
        
        .parent-testimonial-text {
            font-size: 1.05rem;
            line-height: 1.7;
            color: var(--text-dark);
            margin-bottom: 25px;
            position: relative;
            z-index: 2;
        }
        
        .parent-testimonial-author {
            font-family: 'Baloo 2', cursive;
            font-size: 1.2rem;
            color: var(--primary-blue);
            font-weight: 700;
        }
        
        .parent-testimonial-role {
            font-size: 0.95rem;
            color: var(--text-light);
            font-style: italic;
        }
        
        /* Admission Enrollment Process Section */
        .admission-enrollment-process {
            padding: 80px 20px;
            background: linear-gradient(135deg, var(--primary-red) 0%, #b01830 100%);
            position: relative;
            overflow: hidden;
        }
        
        .admission-enrollment-process::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 30% 40%, rgba(255, 215, 0, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
        }
        
        .admission-enrollment-container {
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }
        
        .admission-enrollment-title {
            font-family: 'Baloo 2', cursive;
            font-size: 3rem;
            color: var(--white);
            text-align: center;
            margin-bottom: 60px;
            text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
        }
        
        .admission-enrollment-steps {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
        }
        
        .admission-enrollment-step {
            background: var(--white);
            border-radius: 20px;
            padding: 40px 25px;
            text-align: center;
            box-shadow: 0 15px 45px rgba(0, 0, 0, 0.2);
            transition: all 0.4s ease;
            position: relative;
        }
        
        .admission-enrollment-step::after {
            content: '→';
            position: absolute;
            right: -25px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 3rem;
            color: var(--white);
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        .admission-enrollment-step:last-child::after {
            display: none;
        }
        
        .admission-enrollment-step:hover {
            transform: translateY(-10px) scale(1.05);
            box-shadow: 0 25px 65px rgba(0, 0, 0, 0.3);
        }
        
        .admission-enrollment-step-number {
            font-family: 'Baloo 2', cursive;
            font-size: 3rem;
            font-weight: 800;
            background: linear-gradient(135deg, var(--primary-blue), var(--primary-red));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 15px;
        }
        
        .admission-enrollment-step-title {
            font-family: 'Baloo 2', cursive;
            font-size: 1.3rem;
            color: var(--primary-blue);
            margin-bottom: 10px;
            font-weight: 700;
        }
        
        .admission-enrollment-step-description {
            font-size: 0.95rem;
            color: var(--text-light);
            line-height: 1.5;
        }
        
        /* Contact Information Details Section */
        .contact-information-details {
            padding: 80px 20px;
            background: linear-gradient(180deg, var(--light-blue) 0%, var(--white) 100%);
        }
        
        .contact-information-container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .contact-information-heading {
            font-family: 'Baloo 2', cursive;
            font-size: 3rem;
            color: var(--primary-blue);
            text-align: center;
            margin-bottom: 60px;
            text-shadow: 2px 2px 4px rgba(0, 67, 114, 0.2);
        }
        
        .contact-information-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
        }
        
        .contact-information-form {
            background: var(--white);
            border-radius: 25px;
            padding: 50px;
            box-shadow: 
                0 15px 50px rgba(0, 0, 0, 0.1),
                inset 0 0 0 3px rgba(255, 215, 0, 0.3);
        }
        
        .contact-information-form-group {
            margin-bottom: 25px;
        }
        
        .contact-information-form-label {
            display: block;
            font-family: 'Baloo 2', cursive;
            font-size: 1.1rem;
            color: var(--primary-blue);
            margin-bottom: 8px;
            font-weight: 600;
        }
        
        .contact-information-form-input,
        .contact-information-form-textarea {
            width: 100%;
            padding: 15px 20px;
            border: 3px solid var(--light-blue);
            border-radius: 15px;
            font-family: 'Fredoka', sans-serif;
            font-size: 1rem;
            transition: all 0.3s ease;
        }
        
        .contact-information-form-input:focus,
        .contact-information-form-textarea:focus {
            outline: none;
            border-color: var(--primary-blue);
            box-shadow: 0 5px 20px rgba(0, 67, 114, 0.2);
        }
        
        .contact-information-form-textarea {
            resize: vertical;
            min-height: 120px;
        }
        
        .contact-information-submit-button {
            width: 100%;
            padding: 18px;
            background: linear-gradient(135deg, var(--primary-red) 0%, #e63950 100%);
            color: var(--white);
            border: none;
            border-radius: 50px;
            font-family: 'Baloo 2', cursive;
            font-size: 1.3rem;
            font-weight: 700;
            cursor: pointer;
            box-shadow: 
                0 8px 25px rgba(196, 30, 58, 0.4),
                inset 0 -2px 4px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        }
        
        .contact-information-submit-button:hover {
            transform: translateY(-3px);
            box-shadow: 
                0 12px 35px rgba(196, 30, 58, 0.5),
                inset 0 -2px 4px rgba(0, 0, 0, 0.2);
        }
        
        .contact-information-details-box {
            background: linear-gradient(135deg, var(--primary-blue) 0%, #0066b3 100%);
            border-radius: 25px;
            padding: 50px;
            color: var(--white);
            box-shadow: 0 15px 50px rgba(0, 67, 114, 0.3);
        }
        
        .contact-information-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 30px;
            padding: 20px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            transition: all 0.3s ease;
        }
        
        .contact-information-item:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateX(10px);
        }
        
        .contact-information-icon {
            font-size: 2.5rem;
            margin-right: 20px;
            flex-shrink: 0;
        }
        
        .contact-information-text {
            flex: 1;
        }
        
        .contact-information-item-title {
            font-family: 'Baloo 2', cursive;
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 5px;
        }
        
        .contact-information-item-value {
            font-size: 1.05rem;
            opacity: 0.9;
        }
        
        /* Final Call To Action Section */
        .final-call-to-action {
            padding: 80px 20px;
            background: linear-gradient(135deg, var(--yellow-accent) 0%, var(--orange-accent) 100%);
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .final-call-to-action::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.2) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
            animation: ctaGlow 6s ease-in-out infinite;
        }
        
        @keyframes ctaGlow {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.6; }
        }
        
        .final-call-to-action-container {
            max-width: 900px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }
        
        .final-call-to-action-title {
            font-family: 'Baloo 2', cursive;
            font-size: 3.5rem;
            color: var(--primary-blue);
            margin-bottom: 25px;
            text-shadow: 
                3px 3px 6px rgba(0, 0, 0, 0.2),
                0 0 30px rgba(255, 255, 255, 0.5);
            animation: ctaTitlePulse 2s ease-in-out infinite;
        }
        
        @keyframes ctaTitlePulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }
        
        .final-call-to-action-text {
            font-size: 1.4rem;
            color: var(--text-dark);
            margin-bottom: 40px;
            font-weight: 500;
            text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
        }
        
        .final-call-to-action-button {
            display: inline-block;
            padding: 22px 55px;
            background: linear-gradient(135deg, var(--primary-red) 0%, #e63950 100%);
            color: var(--white);
            text-decoration: none;
            border-radius: 50px;
            font-family: 'Baloo 2', cursive;
            font-size: 1.4rem;
            font-weight: 800;
            box-shadow: 
                0 10px 30px rgba(196, 30, 58, 0.5),
                inset 0 -3px 5px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
            text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
        }
        
        .final-call-to-action-button:hover {
            transform: translateY(-5px) scale(1.1);
            box-shadow: 
                0 15px 45px rgba(196, 30, 58, 0.6),
                inset 0 -3px 5px rgba(0, 0, 0, 0.2);
        }
        
        /* Responsive Design */
        
        /* Mac and Big Desktop (1920px and above) */
        @media screen and (min-width: 1920px) {
            .primary-school-banner {
                padding: 120px 40px;
            }
            
            .primary-school-main-title {
                font-size: 5rem;
            }
            
            .educational-programs-grid,
            .parent-testimonials-grid {
                gap: 60px;
            }
            
            .learning-facilities-gallery {
                gap: 50px;
            }
        }
        
        /* Mini Laptop (1024px - 1366px) */
        @media screen and (max-width: 1366px) {
            .primary-school-main-title {
                font-size: 3.5rem;
            }
            
            .welcome-introduction-title,
            .educational-programs-heading,
            .learning-facilities-title,
            .student-achievement-heading,
            .parent-testimonials-heading,
            .admission-enrollment-title,
            .contact-information-heading {
                font-size: 2.5rem;
            }
            
            .educational-programs-grid {
                gap: 30px;
            }
            
            .learning-facilities-gallery {
                gap: 25px;
            }
        }
        
        /* Tablet (768px - 1023px) */
        @media screen and (max-width: 1023px) {
            .primary-school-main-title {
                font-size: 3rem;
            }
            
            .primary-school-tagline {
                font-size: 1.3rem;
            }
            
            .welcome-introduction-content {
                grid-template-columns: 1fr;
                gap: 40px;
            }
            
            .educational-programs-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .learning-facilities-gallery {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .student-achievement-stats {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .parent-testimonials-grid {
                grid-template-columns: 1fr;
            }
            
            .admission-enrollment-steps {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .admission-enrollment-step::after {
                display: none;
            }
            
            .contact-information-grid {
                grid-template-columns: 1fr;
            }
        }
        
        /* Small Mobile (481px - 767px) */
        @media screen and (max-width: 767px) {
            .primary-school-banner {
                padding: 60px 20px;
            }
            
            .primary-school-main-title {
                font-size: 2.5rem;
            }
            
            .primary-school-tagline {
                font-size: 1.1rem;
            }
            
            .primary-school-cta-button {
                padding: 15px 35px;
                font-size: 1.1rem;
            }
            
            .welcome-introduction-section,
            .educational-programs-features,
            .learning-facilities-showcase,
            .student-achievement-highlights,
            .parent-testimonials-reviews,
            .admission-enrollment-process,
            .contact-information-details,
            .final-call-to-action {
                padding: 60px 20px;
            }
            
            .welcome-introduction-title,
            .educational-programs-heading,
            .learning-facilities-title,
            .student-achievement-heading,
            .parent-testimonials-heading,
            .admission-enrollment-title,
            .contact-information-heading,
            .final-call-to-action-title {
                font-size: 2rem;
            }
            
            .educational-programs-grid {
                grid-template-columns: 1fr;
            }
            
            .learning-facilities-gallery {
                grid-template-columns: 1fr;
            }
            
            .student-achievement-stats {
                grid-template-columns: 1fr;
            }
            
            .admission-enrollment-steps {
                grid-template-columns: 1fr;
            }
            
            .contact-information-form,
            .contact-information-details-box {
                padding: 35px;
            }
        }
        
        /* Mini Mobile (320px - 480px) */
        @media screen and (max-width: 480px) {
            .primary-school-main-title {
                font-size: 2rem;
            }
            
            .primary-school-tagline {
                font-size: 1rem;
            }
            
            .primary-school-cta-button {
                padding: 12px 30px;
                font-size: 1rem;
            }
            
            .welcome-introduction-title,
            .educational-programs-heading,
            .learning-facilities-title,
            .student-achievement-heading,
            .parent-testimonials-heading,
            .admission-enrollment-title,
            .contact-information-heading,
            .final-call-to-action-title {
                font-size: 1.8rem;
            }
            
            .educational-program-icon {
                font-size: 3rem;
            }
            
            .learning-facility-item img {
                height: 200px;
            }
            
            .student-achievement-number {
                font-size: 3rem;
            }
            
            .contact-information-form,
            .contact-information-details-box {
                padding: 25px;
            }
            
            .final-call-to-action-button {
                padding: 18px 40px;
                font-size: 1.2rem;
            }
        }
        
        /* iPhone Specific (375px - 428px) */
        @media screen and (min-width: 375px) and (max-width: 428px) {
            .primary-school-main-title {
                font-size: 2.2rem;
            }
            
            .educational-program-card,
            .parent-testimonial-card {
                padding: 30px 25px;
            }
        }        








/* Typography */
        .page-title {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 15px;
            text-shadow: 2px 4px 8px rgba(0, 0, 0, 0.3);
            letter-spacing: 1px;
            color: #fff;
        }
        
        .subsection-title {
            font-size: clamp(1.3rem, 3vw, 1.8rem);
            font-weight: 600;
            color: var(--primary-blue);
            margin-bottom: 1rem;
        }
        
        .content-text {
            font-size: clamp(1rem, 2vw, 1.1rem);
            line-height: 1.8;
            color: var(--text-dark);
            margin-bottom: 1rem;
        }
        
        /* Banner Section */
        .banner-section {
            position: relative;
            width: 100%;
            background: linear-gradient(135deg, var(--primary-blue) 0%, var(--dark-blue) 50%, var(--light-blue) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
            padding: 70px 0;
        }
        
        .banner-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><rect fill="%23004372" width="1200" height="600"/><circle cx="100" cy="100" r="80" fill="%230066a1" opacity="0.3"/><circle cx="1000" cy="400" r="120" fill="%23c41e3a" opacity="0.2"/><circle cx="600" cy="300" r="150" fill="%23ffffff" opacity="0.1"/></svg>');
            background-size: cover;
            opacity: 0.4;
        }
        
        .banner-content {
            position: relative;
            z-index: 2;
            text-align: center;
            padding: 2rem;
            max-width: 1000px;
        }
        
        .banner-subtitle {
            font-size: clamp(1.1rem, 2.5vw, 1.5rem);
            color: #fff;
            font-weight: 300;
            margin-bottom: 2rem;
            text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        .banner-decorative-line {
            width: 120px;
            height: 3px;
            background: linear-gradient(90deg, var(--accent-red), var(--text-light));
            margin: 0 auto;
            border-radius: 2px;
            box-shadow: 0 2px 8px rgba(196, 30, 58, 0.4);
        }
    
        
        /* Introduction Section */
        .introduction-section {
            background: var(--background-white);
            padding: clamp(2rem, 5vw, 4rem);
            border-radius: 16px;
            margin-bottom: 3rem;
            box-shadow: 0 8px 30px var(--shadow-color);
            border-left: 5px solid var(--accent-red);
        }
        
        /* Features Grid */
        .features-section {
            margin-bottom: 4rem;
        }
        
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: clamp(1.5rem, 3vw, 2.5rem);
            margin-top: 2rem;
        }
        
        .feature-card {
            background: var(--background-white);
            padding: clamp(1.5rem, 3vw, 2.5rem);
            border-radius: 12px;
            box-shadow: 0 6px 20px var(--shadow-color);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border-top: 4px solid var(--primary-blue);
            position: relative;
            overflow: hidden;
        }
        
        .feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, var(--accent-red), transparent);
            opacity: 0.1;
            border-radius: 0 0 0 100%;
        }
        
        .feature-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 35px rgba(0, 67, 114, 0.25);
        }
        
        .feature-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
            box-shadow: 0 4px 15px rgba(0, 67, 114, 0.3);
        }
        
        .feature-icon svg {
            width: 30px;
            height: 30px;
            fill: var(--text-light);
        }
        
        /* Academic Programs Section */
        .academic-programs-section {
            background: linear-gradient(135deg, var(--background-white) 0%, var(--background-light) 100%);
            padding: clamp(2rem, 5vw, 4rem);
            border-radius: 16px;
            margin-bottom: 3rem;
            box-shadow: 0 8px 30px var(--shadow-color);
        }
        
        .programs-list {
            display: flex;
            flex-direction: column;
            gap: 2rem;
            margin-top: 2rem;
        }
        
        .program-item {
            background: var(--background-white);
            padding: clamp(1.5rem, 3vw, 2rem);
            border-radius: 12px;
            border-left: 6px solid var(--accent-red);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
        }
        
        .program-item:hover {
            border-left-width: 10px;
            box-shadow: 0 8px 25px rgba(196, 30, 58, 0.2);
            transform: translateX(5px);
        }
        
        .program-name {
            font-family: 'Trebuchet MS', sans-serif;
            font-size: clamp(1.2rem, 2.5vw, 1.5rem);
            font-weight: 600;
            color: var(--primary-blue);
            margin-bottom: 0.8rem;
        }
        
        /* Image Gallery Section */
        .gallery-section {
            margin-bottom: 4rem;
        }
        
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: clamp(1rem, 2vw, 2rem);
            margin-top: 2rem;
        }
        
        .gallery-item {
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 6px 20px var(--shadow-color);
            transition: transform 0.3s ease;
            aspect-ratio: 4/3;
        }
        
        .gallery-item:hover {
            transform: scale(1.05);
        }
        
        .gallery-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .gallery-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(0, 67, 114, 0.95), transparent);
            color: #fff;
            padding: 1.5rem 1rem 1rem;
            font-size: clamp(0.9rem, 2vw, 1.1rem);
            font-weight: 600;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
        }
        
        /* Facilities Section */
        .facilities-section {
            background: var(--primary-blue);
            color: var(--text-light);
            padding: clamp(2rem, 5vw, 4rem);
            border-radius: 16px;
            margin-bottom: 3rem;
            box-shadow: 0 10px 40px rgba(0, 67, 114, 0.3);
            position: relative;
            overflow: hidden;
        }
        
        .facilities-section::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -10%;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, var(--accent-red) 0%, transparent 70%);
            opacity: 0.15;
            border-radius: 50%;
        }
        
        .facilities-section .section-heading {
            color: #fff;
        }

        .facilities-list {
            list-style: none;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: clamp(1rem, 2vw, 1.5rem);
            margin-top: 2rem;
            position: relative;
        }
        
        .facility-item {
            background: rgba(255, 255, 255, 0.1);
            padding: 1.5rem;
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
            color: #fff;
        }
        
        .facility-item:hover {
            background: rgba(255, 255, 255, 0.15);
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        }

        
        /* Call to Action Section */

        
        .cta-title {
            font-family: 'Trebuchet MS', sans-serif;
            font-size: clamp(1.8rem, 4vw, 2.5rem);
            font-weight: 700;
            margin-bottom: 1rem;
            text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
        }
        
        .cta-description {
            font-size: clamp(1rem, 2vw, 1.2rem);
            margin-bottom: 2rem;
            opacity: 0.95;
        }
        
        .cta-button {
            display: inline-block;
            padding: 1rem 2.5rem;
            background: var(--background-white);
            color: var(--primary-blue);
            font-family: 'Trebuchet MS', sans-serif;
            font-size: clamp(1rem, 2vw, 1.1rem);
            font-weight: 600;
            text-decoration: none;
            border-radius: 50px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
        }
        
        .cta-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            background: var(--background-light);
        }
        
        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .banner-content {
            animation: fadeInUp 1s ease-out;
        }
        
        .feature-card {
            animation: fadeInUp 0.6s ease-out backwards;
        }
        
        .feature-card:nth-child(1) { animation-delay: 0.1s; }
        .feature-card:nth-child(2) { animation-delay: 0.2s; }
        .feature-card:nth-child(3) { animation-delay: 0.3s; }
        .feature-card:nth-child(4) { animation-delay: 0.4s; }
        
        /* Responsive Design */
        
        /* Mini Mobile (320px - 374px) */
        @media screen and (max-width: 374px) {
            .page-container {
                padding: 1.5rem 1rem;
            }
            
            .banner-section {
                height: 350px;
            }
            
            .features-grid {
                grid-template-columns: 1fr;
            }
            
            .gallery-grid {
                grid-template-columns: 1fr;
            }
        }
        
        /* Small Mobile (375px - 639px) */
        @media screen and (min-width: 375px) and (max-width: 639px) {
            .features-grid {
                grid-template-columns: 1fr;
            }
            
            .gallery-grid {
                grid-template-columns: 1fr;
            }
        }
        
        /* Tablet (640px - 1023px) */
        @media screen and (min-width: 640px) and (max-width: 1023px) {
            .features-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .gallery-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .facilities-list {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        /* Mini Laptop (1024px - 1279px) */
        @media screen and (min-width: 1024px) and (max-width: 1279px) {
            .features-grid {
                grid-template-columns: repeat(3, 1fr);
            }
            
            .gallery-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        
        /* Big Desktop (1920px and above) */
        @media screen and (min-width: 1920px) {
                .page-container {
                    max-width: 1550px;
                }
        }
        
        /* Mac (Safari specific adjustments) */
        @supports (-webkit-backdrop-filter: blur(10px)) {
            .facility-item {
                -webkit-backdrop-filter: blur(10px);
            }
        }
        
        /* iPhone (iOS specific) */
        @supports (-webkit-touch-callout: none) {
            .banner-section {
                height: 60vh;
            }
            
            .gallery-item {
                -webkit-transform: translateZ(0);
                transform: translateZ(0);
            }
        }
        
        /* Cross-browser compatibility */
        @supports (display: grid) {
            .features-grid,
            .gallery-grid,
            .facilities-list {
                display: grid;
            }
        }
        
        @supports not (display: grid) {
            .features-grid,
            .gallery-grid,
            .facilities-list {
                display: flex;
                flex-wrap: wrap;
            }
        }        



        
        .banner-accent-line {
            width: 150px;
            height: 4px;
            background: linear-gradient(90deg, var(--text-light), var(--accent-red), var(--text-light));
            margin: 0 auto;
            border-radius: 2px;
            box-shadow: 0 3px 10px rgba(196, 30, 58, 0.5);
        }
        
        /* Container */
        .page-container {
            max-width: 1450px;
            margin: 0 auto;
            padding: clamp(2.5rem, 5vw, 5rem) clamp(1rem, 3vw, 2.5rem);
        }
        
        /* Introduction Section */
        .introduction-section {
            background: linear-gradient(135deg, var(--background-white) 0%, rgba(0, 67, 114, 0.03) 100%);
            padding: clamp(2.5rem, 5vw, 4.5rem);
            border-radius: 20px;
            margin-bottom: 4rem;
            box-shadow: 0 10px 40px var(--shadow-color);
            border-left: 6px solid var(--accent-red);
            position: relative;
            overflow: hidden;
        }
        
        .introduction-section::before {
            content: '';
            position: absolute;
            top: -100px;
            right: -100px;
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, rgba(196, 30, 58, 0.08) 0%, transparent 70%);
            border-radius: 50%;
        }
        
        /* Highlights Grid */
        .highlights-section {
            margin-bottom: 4rem;
        }
        
        .highlights-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: clamp(2rem, 3vw, 3rem);
            margin-top: 2.5rem;
        }
        
        .highlight-card {
            background: var(--background-white);
            padding: clamp(2rem, 3vw, 3rem);
            border-radius: 16px;
            box-shadow: 0 8px 25px var(--shadow-color);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            border-top: 5px solid var(--primary-blue);
            position: relative;
            overflow: hidden;
        }
        
        .highlight-card::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 120px;
            height: 120px;
            background: linear-gradient(135deg, var(--accent-red), transparent);
            opacity: 0.08;
            border-radius: 0 0 0 100%;
            transition: opacity 0.4s ease;
        }
        
        .highlight-card:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 15px 45px rgba(0, 67, 114, 0.3);
        }
        
        .highlight-card:hover::after {
            opacity: 0.15;
        }
        
        .highlight-icon {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.8rem;
            box-shadow: 0 6px 20px rgba(0, 67, 114, 0.35);
            position: relative;
        }
        
        .highlight-icon::before {
            content: '';
            position: absolute;
            inset: -3px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--accent-red), var(--primary-blue));
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: -1;
        }
        
        .highlight-card:hover .highlight-icon::before {
            opacity: 0.3;
        }
        
        .highlight-icon svg {
            width: 35px;
            height: 35px;
            fill: var(--text-light);
        }
        
        /* Academic Programs Section */
        .academic-programs-section {
            background: var(--primary-blue);
            color: var(--text-light);
            padding: clamp(2.5rem, 5vw, 5rem);
            border-radius: 20px;
            margin-bottom: 4rem;
            box-shadow: 0 12px 50px rgba(0, 67, 114, 0.4);
            position: relative;
            overflow: hidden;
        }
        
        .academic-programs-section::before {
            content: '';
            position: absolute;
            top: -200px;
            left: -200px;
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, var(--light-blue) 0%, transparent 70%);
            opacity: 0.2;
        }
        
        .academic-programs-section::after {
            content: '';
            position: absolute;
            bottom: -150px;
            right: -150px;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, var(--accent-red) 0%, transparent 70%);
            opacity: 0.15;
        }
        
        .academic-programs-section .section-heading {
            color: #fff;
        }
        
        .academic-programs-section .section-heading::after {
            background: linear-gradient(90deg, var(--accent-red), var(--text-light));
        }
        
        .programs-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: clamp(1.5rem, 3vw, 2.5rem);
            margin-top: 2.5rem;
            position: relative;
        }
        
        .program-card {
            background: rgba(255, 255, 255, 0.12);
            padding: clamp(1.8rem, 3vw, 2.5rem);
            border-radius: 14px;
            border: 1px solid rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(15px);
            transition: all 0.4s ease;
            position: relative;
        }
        
        .program-card::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 14px;
            padding: 2px;
            background: linear-gradient(135deg, var(--accent-red), transparent);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            opacity: 0;
            transition: opacity 0.4s ease;
        }
        
        .program-card:hover {
            background: rgba(255, 255, 255, 0.18);
            transform: translateY(-8px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
        }
        
        .program-card:hover::before {
            opacity: 1;
        }
        
        .program-number {
            font-size: 3rem;
            font-weight: 800;
            color: var(--accent-red);
            opacity: 0.3;
            line-height: 1;
            margin-bottom: 0.5rem;
        }
        
        /* Pathways Section */
        .pathways-section {
            margin-bottom: 4rem;
        }
        
        .pathways-container {
            display: flex;
            flex-direction: column;
            gap: 2.5rem;
            margin-top: 2.5rem;
        }
        
        .pathway-item {
            background: var(--background-white);
            padding: clamp(2rem, 4vw, 3rem);
            border-radius: 16px;
            box-shadow: 0 8px 30px var(--shadow-color);
            border-left: 8px solid var(--accent-red);
            transition: all 0.4s ease;
            position: relative;
        }
        
        .pathway-item::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 5px;
            background: linear-gradient(180deg, var(--accent-red), var(--primary-blue));
            opacity: 0;
            transition: opacity 0.4s ease;
        }
        
        .pathway-item:hover {
            border-left-width: 12px;
            box-shadow: 0 12px 40px rgba(196, 30, 58, 0.25);
            transform: translateX(8px);
        }
        
        .pathway-item:hover::after {
            opacity: 1;
        }
        
        .pathway-title {
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;
            font-size: clamp(1.5rem, 3vw, 2rem);
            font-weight: 700;
            color: var(--primary-blue);
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .pathway-badge {
            display: inline-block;
            padding: 0.4rem 1rem;
            background: linear-gradient(135deg, var(--accent-red), var(--primary-blue));
            color: #fff;
            font-size: 0.85rem;
            font-weight: 600;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            box-shadow: 0 3px 10px var(--red-shadow);
        }

        .acpro .program-card .program-number{color: #fff; opacity: 1;}
        .acpro .program-card .subsection-title{color: #fff !important; opacity: 1;}
        .acpro .program-card .content-text{color: #fff !important; opacity: 1;}
        
        /* College Preparation Section */
        .college-prep-section {
            background: linear-gradient(135deg, rgba(196, 30, 58, 0.05) 0%, rgba(0, 67, 114, 0.05) 100%);
            padding: clamp(2.5rem, 5vw, 4.5rem);
            border-radius: 20px;
            margin-bottom: 4rem;
            box-shadow: 0 10px 40px var(--shadow-color);
            border: 2px solid rgba(0, 67, 114, 0.1);
        }
        
        .prep-features-list {
            list-style: none;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: clamp(1.5rem, 2.5vw, 2rem);
            margin-top: 2rem;
        }
        
        .prep-feature-item {
            background: var(--background-white);
            padding: 1.8rem;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            display: flex;
            align-items: flex-start;
            gap: 1.2rem;
            transition: all 0.3s ease;
            border-left: 4px solid var(--accent-red);
        }
        
        .prep-feature-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px var(--red-shadow);
            border-left-width: 6px;
        }
        
        .prep-feature-icon {
            flex-shrink: 0;
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, var(--accent-red), var(--primary-blue));
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px var(--red-shadow);
        }
        
        .prep-feature-icon svg {
            width: 26px;
            height: 26px;
            fill: #fff;
        }
        
        .prep-feature-content {
            flex: 1;
        }
        
        .prep-feature-title {
            font-weight: 700;
            color: var(--primary-blue);
            margin-bottom: 0.5rem;
            font-size: 1.1rem;
        }
        
        /* Statistics Section */
        .statistics-section {
            background: linear-gradient(135deg, var(--accent-red) 0%, var(--primary-blue) 100%);
            color: var(--text-light);
            padding: clamp(2.5rem, 5vw, 4rem);
            border-radius: 20px;
            margin-bottom: 4rem;
        }
        
        .statistics-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: clamp(2rem, 4vw, 3rem);
            margin-top: 2.5rem;
        }
        
        .stat-item {
            text-align: center;
            padding: 2rem;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 14px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            transition: all 0.4s ease;
        }
        
        .stat-item:hover {
            background: rgba(255, 255, 255, 0.25);
            transform: scale(1.08);
        }
        
        .stat-label {
            font-size: clamp(1rem, 2vw, 1.2rem);
            font-weight: 500;
            opacity: 0.95;
            text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
        }
        
        /* Call to Action Section */
        .cta-section {
            background: linear-gradient(135deg, var(--primary-blue) 0%, var(--dark-blue) 100%);
            color: var(--text-light);
            padding: clamp(2.5rem, 5vw, 4rem);
            border-radius: 20px;
            text-align: center;
            margin-bottom: 3rem;
            position: relative;
            overflow: hidden;
        }
        
        .cta-section::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 150%;
            height: 150%;
            background: radial-gradient(circle, rgba(196, 30, 58, 0.2) 0%, transparent 70%);
            animation: pulse 8s ease-in-out infinite;
        }
        
        @keyframes pulse {
            0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
            50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.8; }
        }
        
        .cta-title {
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;
            font-size: clamp(2rem, 4.5vw, 3rem);
            font-weight: 800;
            margin-bottom: 1.2rem;
            text-shadow: 2px 4px 8px rgba(0, 0, 0, 0.4);
            position: relative;
            z-index: 1;
        }
        
        .cta-description {
            font-size: clamp(1.1rem, 2.2vw, 1.3rem);
            margin-bottom: 2.5rem;
            opacity: 0.95;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            position: relative;
            z-index: 1;
        }
       
        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(40px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes slideInLeft {
            from {
                opacity: 0;
                transform: translateX(-40px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        .banner-content {
            animation: fadeInUp 1.2s ease-out;
        }
        
        .highlight-card {
            animation: fadeInUp 0.7s ease-out backwards;
        }
        
        .highlight-card:nth-child(1) { animation-delay: 0.1s; }
        .highlight-card:nth-child(2) { animation-delay: 0.2s; }
        .highlight-card:nth-child(3) { animation-delay: 0.3s; }
        .highlight-card:nth-child(4) { animation-delay: 0.4s; }
        .highlight-card:nth-child(5) { animation-delay: 0.5s; }
        
        .pathway-item {
            animation: slideInLeft 0.8s ease-out backwards;
        }
        
        .pathway-item:nth-child(1) { animation-delay: 0.2s; }
        .pathway-item:nth-child(2) { animation-delay: 0.4s; }
        .pathway-item:nth-child(3) { animation-delay: 0.6s; }
        
        /* Responsive Design */
        
        /* Mini Mobile (320px - 374px) */
        @media screen and (max-width: 374px) {
            .page-container {
                padding: 1.5rem 1rem;
            }
            
            .banner-section {
                height: 400px;
            }
            
            .highlights-grid,
            .programs-grid,
            .gallery-grid {
                grid-template-columns: 1fr;
            }
            
            .statistics-grid {
                grid-template-columns: 1fr;
            }
        }
        
        /* Small Mobile (375px - 639px) */
        @media screen and (min-width: 375px) and (max-width: 639px) {
            .highlights-grid,
            .programs-grid,
            .gallery-grid {
                grid-template-columns: 1fr;
            }
            
            .statistics-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        /* Tablet (640px - 1023px) */
        @media screen and (min-width: 640px) and (max-width: 1023px) {
            .highlights-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .programs-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .gallery-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .statistics-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        /* Mini Laptop (1024px - 1279px) */
        @media screen and (min-width: 1024px) and (max-width: 1279px) {
            .highlights-grid {
                grid-template-columns: repeat(3, 1fr);
            }
            
            .programs-grid {
                grid-template-columns: repeat(3, 1fr);
            }
            
            .gallery-grid {
                grid-template-columns: repeat(3, 1fr);
            }
            
            .statistics-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }
        
        /* Big Desktop (1920px and above) */
        @media screen and (min-width: 1920px) {
            .page-container {
                max-width: 1550px;
            }
            
            .highlights-grid,
            .programs-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }
        
        /* Mac (Safari specific adjustments) */
        @supports (-webkit-backdrop-filter: blur(10px)) {
            .program-card,
            .stat-item {
                -webkit-backdrop-filter: blur(15px);
            }
        }
        
        /* iPhone (iOS specific) */
        @supports (-webkit-touch-callout: none) {
            .banner-section {
                height: 65vh;
                min-height: 450px;
            }
            
            .gallery-item {
                -webkit-transform: translateZ(0);
                transform: translateZ(0);
            }
            
            body {
                -webkit-text-size-adjust: 100%;
            }
        }
        
        /* Cross-browser compatibility */
        @supports (display: grid) {
            .highlights-grid,
            .programs-grid,
            .gallery-grid,
            .statistics-grid,
            .prep-features-list {
                display: grid;
            }
        }
        
        @supports not (display: grid) {
            .highlights-grid,
            .programs-grid,
            .gallery-grid,
            .statistics-grid,
            .prep-features-list {
                display: flex;
                flex-wrap: wrap;
            }
        }
        
        /* Firefox specific */
        @-moz-document url-prefix() {
            .highlight-card,
            .program-card {
                scrollbar-width: thin;
            }
        }






    .container {
        max-width: 1500px;
        margin: 0 auto;
        display: flex;
        gap: 25px;
        justify-content: flex-end;
        align-content: space-around;
        align-items: stretch;
        flex-wrap: nowrap;
        flex-direction: column;
    }
    .container1 {
        max-width: 1500px;
        margin: 0 auto;
        display: flex;
        gap: 25px;
        justify-content: flex-end;
        align-content: space-around;
        align-items: stretch;
        flex-wrap: nowrap;
    }
        
        .subjects-intro {
            text-align: center;
            margin: 60px 0;
            padding: 40px;
            background: white;
            border-radius: 15px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
        }
        
        .subjects-intro-heading {
            font-size: 2.5em;
            color: #004372;
            margin-bottom: 20px;
            text-shadow: 1px 1px 2px rgba(0, 67, 114, 0.1);
        }
        
        .subjects-intro-text {
            font-size: 1.2em;
            color: #555;
            line-height: 1.8;
            max-width: 900px;
            margin: 0 auto;
        }
        
        .subjects-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 35px;
            margin-bottom: 60px;
        }
        
        .subject-card {
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border-top: 5px solid #004372;
        }
        
        .subject-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 50px rgba(0, 67, 114, 0.25);
        }
        
        .subject-image-wrapper {
            width: 100%;
            height: 250px;
            overflow: hidden;
            position: relative;
        }
        
        .subject-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }
        
        .subject-card:hover .subject-image {
            transform: scale(1.1);
        }
        
        .subject-icon-overlay {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 60px;
            height: 60px;
            background: rgba(196, 30, 58, 0.9);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        }
        
        .subject-content {
            padding: 30px;
        }
        
        .subject-title {
            font-size: 1.8em;
            color: #004372;
            margin-bottom: 15px;
            text-shadow: 1px 1px 2px rgba(0, 67, 114, 0.1);
        }
        
        .subject-description {
            color: #666;
            line-height: 1.8;
            margin-bottom: 20px;
            font-size: 1.05em;
        }
        
        .subject-topics {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            padding: 20px;
            border-radius: 10px;
            margin-top: 20px;
        }
        
        .subject-topics-title {
            font-size: 1.2em;
            color: #c41e3a;
            margin-bottom: 12px;
            font-weight: 600;
        }
        
        .subject-topics-list {
            color: #555;
            line-height: 1.8;
        }
        
        .subjects-features {
            background: linear-gradient(135deg, #004372 0%, #0066b3 100%);
            color: white;
            padding: 60px 40px;
            border-radius: 20px;
            box-shadow: 0 10px 40px rgba(0, 67, 114, 0.3);
            width: 1500px;
            margin: 5rem auto;
        }
        
        .subjects-features-title {
            font-size: 2.5em;
            text-align: center;
            margin-bottom: 50px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
        }
        
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
        }
        
        .feature-item {
            background: rgba(255, 255, 255, 0.1);
            padding: 30px;
            border-radius: 15px;
            backdrop-filter: blur(10px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease;
        }
        
        .feature-item:hover {
            transform: translateY(-5px);
            background: rgba(255, 255, 255, 0.15);
        }
        
        .feature-icon {
            font-size: 3em;
            margin-bottom: 15px;
        }
        
        .feature-title {
            font-size: 1.5em;
            margin-bottom: 10px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
        }
        
        .feature-text {
            opacity: 0.95;
            line-height: 1.7;
        }
        
        /* Responsive Design */
        
        /* Mini Mobile (320px - 374px) */
        @media screen and (max-width: 374px) {
            .subjects-banner-title {
                font-size: 1.8em;
            }
            .subjects-banner-subtitle {
                font-size: 1em;
            }
            .subjects-intro-heading {
                font-size: 1.5em;
            }
            .subjects-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            .subject-card {
                margin: 0 10px;
            }
        }
        
        /* Small Mobile (375px - 575px) */
        @media screen and (min-width: 375px) and (max-width: 575px) {
            .subjects-banner-title {
                font-size: 2em;
            }
            .subjects-banner-subtitle {
                font-size: 1.1em;
            }
            .subjects-intro-heading {
                font-size: 1.8em;
            }
            .subjects-grid {
                grid-template-columns: 1fr;
                gap: 25px;
            }
        }
        
        /* Tablet (576px - 991px) */
        @media screen and (min-width: 576px) and (max-width: 991px) {
            .subjects-banner-title {
                font-size: 2.5em;
            }
            .subjects-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 30px;
            }
        }
        
        /* Mini Laptop (992px - 1199px) */
        @media screen and (min-width: 992px) and (max-width: 1199px) {
            .subjects-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        /* Big Desktop (1200px - 1599px) */
        @media screen and (min-width: 1200px) and (max-width: 1599px) {
            .subjects-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        
        /* Mac/Large Desktop (1600px+) */
        @media screen and (min-width: 1600px) {
            .subjects-container {
                max-width: 1600px;
            }
            .subjects-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }
        
        /* iPhone Specific */
        @media screen and (max-width: 428px) and (-webkit-min-device-pixel-ratio: 2) {
            .subjects-banner {
                padding: 60px 15px 40px;
            }
            .subjects-container {
                padding: 40px 15px;
            }
        }        






        /* Introduction Section */
        .examination-intro {
            background: #fff;
            padding: 50px;
            border-radius: 20px;
            margin: 50px 0;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
        }
        
        .examination-intro-heading {
            font-size: 2.5em;
            color: #004372;
            margin-bottom: 25px;
            text-shadow: 2px 2px 4px rgba(0, 67, 114, 0.1);
        }
        
        .examination-intro-text {
            font-size: 1.15em;
            color: #555;
            line-height: 1.8;
            margin-bottom: 15px;
        }
        
        /* Exam Types Grid */
        .examination-types-section {
            margin-bottom: 60px;
        }
        
        .examination-section-title {
            font-size: 2.8em;
            color: #004372;
            text-align: center;
            margin-bottom: 50px;
            text-shadow: 2px 2px 4px rgba(0, 67, 114, 0.1);
        }
        
        .examination-types-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 35px;
            margin-bottom: 40px;
        }
        
        .examination-type-card {
            background: linear-gradient(135deg, #fff 0%, #f8fbff 100%);
            padding: 40px;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            transition: all 0.4s ease;
            border-left: 6px solid #004372;
        }
        
        .examination-type-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 50px rgba(0, 67, 114, 0.2);
            border-left-color: #c41e3a;
        }
        
        .examination-type-icon {
            font-size: 3.5em;
            margin-bottom: 20px;
        }
        
        .examination-type-title {
            font-size: 1.8em;
            color: #004372;
            margin-bottom: 15px;
            text-shadow: 1px 1px 2px rgba(0, 67, 114, 0.1);
        }
        
        .examination-type-description {
            font-size: 1.05em;
            color: #666;
            line-height: 1.7;
        }
        
        /* Assessment Pattern */
        .examination-assessment-section {
            background: #fff;
            padding: 60px 50px;
            border-radius: 20px;
            margin-bottom: 50px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
        }
        
        .examination-assessment-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 30px;
        }
        
        .examination-assessment-table thead {
            background: linear-gradient(135deg, #004372 0%, #0066b3 100%);
        }
        
        .examination-assessment-table th {
            padding: 20px;
            color: #fff;
            font-size: 1.1em;
            text-align: left;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
        }
        
        .examination-assessment-table td {
            padding: 18px 20px;
            border-bottom: 1px solid #e0e0e0;
            font-size: 1.05em;
        }
        
        .examination-assessment-table tbody tr:hover {
            background: #f8f9fa;
        }
        
        /* Grading System */
        .examination-grading-section {
            background: linear-gradient(135deg, #004372 0%, #0066b3 100%);
            padding: 60px 50px;
            border-radius: 20px;
            margin-bottom: 50px;
            box-shadow: 0 15px 40px rgba(0, 67, 114, 0.3);
        }
        
        .examination-grading-title {
            font-size: 2.5em;
            color: #fff;
            margin-bottom: 40px;
            text-align: center;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
        }
        
        .examination-grading-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 25px;
        }
        
        .examination-grade-card {
            background: rgba(255, 255, 255, 0.95);
            padding: 30px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
            transition: all 0.3s ease;
        }
        
        .examination-grade-card:hover {
            transform: scale(1.05);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
        }
        
        .examination-grade-label {
            font-size: 2em;
            color: #004372;
            font-weight: bold;
            margin-bottom: 10px;
            text-shadow: 1px 1px 2px rgba(0, 67, 114, 0.1);
        }
        
        .examination-grade-range {
            font-size: 1.3em;
            color: #c41e3a;
            font-weight: bold;
        }
        
        .examination-grade-description {
            font-size: 0.95em;
            color: #666;
            margin-top: 10px;
        }
        
        /* Rules Section */
        .examination-rules-section {
            background: #fff;
            padding: 60px 50px;
            border-radius: 20px;
            margin-bottom: 50px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
        }
        
        .examination-rules-list {
            list-style: none;
            margin-top: 30px;
        }
        
        .examination-rule-item {
            padding: 20px;
            margin-bottom: 15px;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-left: 5px solid #004372;
            border-radius: 10px;
            font-size: 1.05em;
            color: #444;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
        }
        
        .examination-rule-item:hover {
            border-left-color: #c41e3a;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
            transform: translateX(10px);
        }
        
        .examination-rule-item::before {
            content: "✓";
            display: inline-block;
            width: 30px;
            height: 30px;
            background: linear-gradient(135deg, #004372 0%, #0066b3 100%);
            color: #fff;
            border-radius: 50%;
            text-align: center;
            line-height: 30px;
            margin-right: 15px;
            font-weight: bold;
            box-shadow: 0 3px 10px rgba(0, 67, 114, 0.3);
        }
        
        /* Results Section */
        .examination-results-section {
            background: linear-gradient(135deg, #c41e3a 0%, #9a1830 100%);
            padding: 60px 50px;
            border-radius: 20px;
            box-shadow: 0 15px 40px rgba(196, 30, 58, 0.3);
            text-align: center;
            margin-bottom: 5rem;
        }
        
        .examination-results-title {
            font-size: 2.5em;
            color: #fff;
            margin-bottom: 25px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
        }
        
        .examination-results-text {
            font-size: 1.2em;
            color: #ffe0e6;
            line-height: 1.8;
            margin-bottom: 15px;
        }
        
        /* Responsive Design */
        @media (max-width: 1440px) {
            .examination-banner-title { font-size: 3.2em; }
        }
        
        @media (max-width: 1200px) {
            .examination-banner-title { font-size: 3em; }
            .examination-section-title { font-size: 2.5em; }
        }
        
        @media (max-width: 1024px) {
            .examination-banner-title { font-size: 2.8em; }
            .examination-intro { padding: 40px; }
            .examination-assessment-section { padding: 50px 40px; }
        }
        
        @media (max-width: 768px) {
            .examination-banner {
                padding: 60px 20px;
            }
            
            .examination-banner-title {
                font-size: 2.3em;
            }
            
            .examination-banner-subtitle {
                font-size: 1.2em;
            }
            
            .examination-intro {
                padding: 30px;
            }
            
            .examination-intro-heading {
                font-size: 2em;
            }
            
            .examination-section-title {
                font-size: 2em;
            }
            
            .examination-types-grid {
                grid-template-columns: 1fr;
                gap: 25px;
            }
            
            .examination-type-card {
                padding: 30px;
            }
            
            .examination-assessment-section {
                padding: 40px 30px;
            }
            
            .examination-assessment-table {
                font-size: 0.9em;
            }
            
            .examination-assessment-table th,
            .examination-assessment-table td {
                padding: 12px 10px;
            }
            
            .examination-grading-section {
                padding: 40px 30px;
            }
            
            .examination-grading-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 20px;
            }
            
            .examination-rules-section {
                padding: 40px 30px;
            }
            
            .examination-results-section {
                padding: 40px 30px;
            }
        }
        
        @media (max-width: 480px) {
            .examination-banner {
                padding: 50px 15px;
            }
            
            .examination-banner-title {
                font-size: 1.8em;
            }
            
            .examination-banner-subtitle {
                font-size: 1em;
            }
            
            .examination-container {
                padding: 40px 15px;
            }
            
            .examination-intro {
                padding: 25px;
            }
            
            .examination-intro-heading {
                font-size: 1.7em;
            }
            
            .examination-intro-text {
                font-size: 1em;
            }
            
            .examination-section-title {
                font-size: 1.7em;
            }
            
            .examination-type-card {
                padding: 25px;
            }
            
            .examination-type-title {
                font-size: 1.5em;
            }
            
            .examination-assessment-section {
                padding: 30px 20px;
            }
            
            .examination-assessment-table {
                font-size: 0.85em;
            }
            
            .examination-grading-section {
                padding: 30px 20px;
            }
            
            .examination-grading-title {
                font-size: 2em;
            }
            
            .examination-grading-grid {
                grid-template-columns: 1fr;
            }
            
            .examination-rules-section {
                padding: 30px 20px;
            }
            
            .examination-rule-item {
                font-size: 0.95em;
                padding: 15px;
            }
            
            .examination-results-section {
                padding: 30px 20px;
            }
            
            .examination-results-title {
                font-size: 2em;
            }
        }
        
        @media (max-width: 375px) {
            .examination-banner-title {
                font-size: 1.6em;
            }
            
            .examination-type-icon {
                font-size: 3em;
            }
            
            .examination-assessment-table th,
            .examination-assessment-table td {
                padding: 10px 8px;
                font-size: 0.8em;
            }
        }
        
        @media (min-width: 2560px) {
            .examination-container {
                max-width: 2000px;
            }
            
            .examination-banner-title {
                font-size: 4.5em;
            }
            
            .examination-section-title {
                font-size: 3.5em;
            }
        }






        /* Library Introduction Section */
        .library-intro {
            padding: 80px 20px;
            background: var(--white);
        }

        .library-intro-container {
            max-width: 1550px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            align-items: center;
        }

        .library-intro-text h2 {
            font-size: 2.5em;
            color: var(--blue-primary);
            margin-bottom: 25px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        }

        .library-intro-text p {
            font-size: 1.1em;
            line-height: 1.8;
            margin-bottom: 20px;
            color: #555;
        }

        .library-intro-image {
            position: relative;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 67, 114, 0.2);
        }

        .library-intro-image img {
            width: 100%;
            height: auto;
            display: block;
            transition: transform 0.5s ease;
        }

        .library-intro-image:hover img {
            transform: scale(1.05);
        }

        /* Library Features Section */
        .library-features {
            padding: 80px 20px;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        }

        .library-features-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .library-features h2 {
            text-align: center;
            font-size: 2.8em;
            color: var(--blue-primary);
            margin-bottom: 60px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        }

        .library-features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
        }

        .library-feature-card {
            background: var(--white);
            padding: 35px;
            border-radius: 15px;
            text-align: center;
            transition: all 0.4s ease;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
            border: 2px solid transparent;
        }

        .library-feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0, 67, 114, 0.2);
            border-color: var(--blue-primary);
        }

        .library-feature-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 25px;
            background: linear-gradient(135deg, var(--blue-primary) 0%, var(--red-accent) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.2em;
            color: var(--white);
            box-shadow: 0 5px 15px rgba(196, 30, 58, 0.3);
        }

        .library-feature-card h3 {
            font-size: 1.5em;
            color: var(--blue-primary);
            margin-bottom: 15px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
        }

        .library-feature-card p {
            color: #666;
            line-height: 1.7;
        }

        /* Library Collections Section */
        .library-collections {
            padding: 80px 20px;
            background: var(--white);
        }

        .library-collections-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .library-collections h2 {
            text-align: center;
            font-size: 2.8em;
            color: var(--blue-primary);
            margin-bottom: 60px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        }

        .library-collections-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 35px;
        }

        .library-collection-item {
            background: linear-gradient(135deg, var(--light-gray) 0%, #ffffff 100%);
            padding: 40px 30px;
            border-radius: 15px;
            text-align: center;
            transition: all 0.4s ease;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
            position: relative;
            overflow: hidden;
        }

        .library-collection-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(0, 67, 114, 0.1), transparent);
            transition: left 0.5s ease;
        }

        .library-collection-item:hover::before {
            left: 100%;
        }

        .library-collection-item:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 40px rgba(196, 30, 58, 0.2);
        }

        .library-collection-icon {
            font-size: 3.5em;
            color: var(--red-accent);
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(196, 30, 58, 0.2);
        }

        .library-collection-item h3 {
            font-size: 1.4em;
            color: var(--blue-primary);
            margin-bottom: 15px;
        }

        .library-collection-count {
            font-size: 2.5em;
            font-weight: bold;
            color: var(--red-accent);
            margin-bottom: 10px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        }

        /* Library Services Section */
        .library-services {
            padding: 80px 20px;
            background: linear-gradient(135deg, var(--blue-primary) 0%, #003057 100%);
            position: relative;
        }

        .library-services::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('https://images.unsplash.com/photo-1481627834876-b7833e8f5570?w=1600') center/cover;
            opacity: 0.05;
        }

        .library-services-container {
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }

        .library-services h2 {
            text-align: center;
            font-size: 2.8em;
            color: var(--white);
            margin-bottom: 60px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }

        .library-services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
        }

        .library-service-box {
            background: rgba(255, 255, 255, 0.95);
            padding: 35px;
            border-radius: 15px;
            text-align: center;
            transition: all 0.4s ease;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(10px);
        }

        .library-service-box:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 15px 40px rgba(255, 255, 255, 0.3);
            background: var(--white);
        }

        .library-service-box i {
            font-size: 3em;
            color: var(--red-accent);
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(196, 30, 58, 0.2);
        }

        .library-service-box h3 {
            font-size: 1.5em;
            color: var(--blue-primary);
            margin-bottom: 15px;
        }

        .library-service-box p {
            color: #555;
            line-height: 1.7;
        }

        /* Library Timings Section */
        .library-timings {
            padding: 80px 20px;
            background: var(--white);
        }

        .library-timings-container {
            max-width: 1000px;
            margin: 0 auto;
            text-align: center;
        }

        .library-timings h2 {
            font-size: 2.8em;
            color: var(--blue-primary);
            margin-bottom: 50px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        }

        .library-timings-table {
            background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 67, 114, 0.15);
        }

        .library-timing-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 30px;
            margin-bottom: 15px;
            background: var(--white);
            border-radius: 10px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
        }

        .library-timing-row:hover {
            transform: translateX(10px);
            box-shadow: 0 5px 20px rgba(196, 30, 58, 0.15);
        }

        .library-timing-day {
            font-weight: bold;
            font-size: 1.3em;
            color: var(--blue-primary);
        }

        .library-timing-hours {
            font-size: 1.2em;
            color: var(--red-accent);
            font-weight: 600;
        }

        /* Library Rules Section */
        .library-rules {
            padding: 80px 20px;
            background: linear-gradient(135deg, #fef5f5 0%, #ffffff 100%);
        }

        .library-rules-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .library-rules h2 {
            text-align: center;
            font-size: 2.8em;
            color: var(--blue-primary);
            margin-bottom: 60px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        }

        .library-rules-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
        }

        .library-rule-card {
            background: var(--white);
            padding: 30px;
            border-radius: 15px;
            border-left: 5px solid var(--red-accent);
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
        }

        .library-rule-card:hover {
            transform: translateX(10px);
            box-shadow: 0 10px 30px rgba(196, 30, 58, 0.2);
        }

        .library-rule-card i {
            font-size: 2.5em;
            color: var(--red-accent);
            margin-bottom: 15px;
            text-shadow: 1px 1px 2px rgba(196, 30, 58, 0.2);
        }

        .library-rule-card h3 {
            font-size: 1.3em;
            color: var(--blue-primary);
            margin-bottom: 10px;
        }

        .library-rule-card p {
            color: #666;
            line-height: 1.7;
        }

        /* Library Digital Resources Section */
        .library-digital {
            padding: 80px 20px;
            background: var(--white);
        }

        .library-digital-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .library-digital h2 {
            text-align: center;
            font-size: 2.8em;
            color: var(--blue-primary);
            margin-bottom: 60px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        }

        .library-digital-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 35px;
        }

        .library-digital-card {
            background: linear-gradient(135deg, var(--blue-primary) 0%, #0066a8 100%);
            padding: 40px;
            border-radius: 15px;
            text-align: center;
            color: var(--white);
            box-shadow: 0 10px 30px rgba(0, 67, 114, 0.3);
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }

        .library-digital-card::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
            transition: all 0.6s ease;
        }

        .library-digital-card:hover::before {
            top: -60%;
            right: -60%;
        }

        .library-digital-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 50px rgb(13 94 150 / 28%);
        }

        .library-digital-card i {
            font-size: 3.5em;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            position: relative;
            z-index: 1;
        }

        .library-digital-card h3 {
            font-size: 1.6em;
            margin-bottom: 15px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
            position: relative;
            z-index: 1;
        }

        .library-digital-card p {
            line-height: 1.7;
            position: relative;
            z-index: 1;
        }

        /* Animations */
        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Responsive Design */
        @media (max-width: 1400px) {
            .library-banner h1 {
                font-size: 3em;
            }
        }

        @media (max-width: 1024px) {
            .library-intro-container {
                grid-template-columns: 1fr;
                gap: 40px;
            }

            .library-banner h1 {
                font-size: 2.5em;
            }

            .library-features h2,
            .library-collections h2,
            .library-services h2,
            .library-timings h2,
            .library-rules h2,
            .library-digital h2 {
                font-size: 2.3em;
            }
        }

        @media (max-width: 768px) {
            .library-banner {
                padding: 60px 15px;
            }

            .library-banner h1 {
                font-size: 2em;
            }

            .library-banner p {
                font-size: 1.1em;
            }

            .library-intro,
            .library-features,
            .library-collections,
            .library-services,
            .library-timings,
            .library-rules,
            .library-digital {
                padding: 60px 15px;
            }

            .library-intro-text h2 {
                font-size: 2em;
            }

            .library-features h2,
            .library-collections h2,
            .library-services h2,
            .library-timings h2,
            .library-rules h2,
            .library-digital h2 {
                font-size: 1.9em;
                margin-bottom: 40px;
            }

            .library-features-grid,
            .library-collections-grid,
            .library-services-grid,
            .library-rules-grid,
            .library-digital-grid {
                grid-template-columns: 1fr;
                gap: 25px;
            }

            .library-timing-row {
                flex-direction: column;
                gap: 10px;
                text-align: center;
                padding: 20px;
            }

            .library-timing-row:hover {
                transform: translateY(-5px);
            }
        }

        @media (max-width: 480px) {
            .library-banner h1 {
                font-size: 1.6em;
            }

            .library-banner p {
                font-size: 1em;
            }

            .library-intro-text h2 {
                font-size: 1.7em;
            }

            .library-features h2,
            .library-collections h2,
            .library-services h2,
            .library-timings h2,
            .library-rules h2,
            .library-digital h2 {
                font-size: 1.6em;
            }

            .library-feature-card,
            .library-service-box,
            .library-digital-card {
                padding: 25px;
            }

            .library-collection-count {
                font-size: 2em;
            }
        }

        @media (max-width: 375px) {
            .library-banner h1 {
                font-size: 1.4em;
            }

            .library-features h2,
            .library-collections h2,
            .library-services h2,
            .library-timings h2,
            .library-rules h2,
            .library-digital h2 {
                font-size: 1.4em;
            }
        }














         /* Sports Section */
        .sports-activities-section {
            padding: 80px 20px;
            background: #ffffff;
        }
        
        
        .sports-activities-heading {
            text-align: center;
            font-size: 2.8rem;
            color: #004372;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 67, 114, 0.1);
        }
        
        .sports-activities-intro {
            text-align: center;
            font-size: 1.1rem;
            color: #666;
            max-width: 900px;
            margin: 0 auto 60px;
        }
        
        .sports-activities-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }
        
        .sports-activity-card {
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            border-radius: 15px;
            padding: 30px;
            text-align: center;
            transition: all 0.3s ease;
            box-shadow: 0 5px 20px rgba(0, 67, 114, 0.15);
            border: 2px solid transparent;
        }
        
        .sports-activity-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 35px rgba(196, 30, 58, 0.25);
            border-color: #c41e3a;
        }
        
        .sports-activity-icon {
            font-size: 3.5rem;
            margin-bottom: 20px;
            background: linear-gradient(135deg, #004372 0%, #0066b3 100%);
        }
        
        .sports-activity-name {
            font-size: 1.5rem;
            color: #004372;
            margin-bottom: 15px;
            font-weight: bold;
        }
        
        .sports-activity-description {
            font-size: 1rem;
            color: #666;
            line-height: 1.7;
        }
        
        /* Arts Section */
        .arts-activities-section {
            padding: 80px 20px;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        }
        
        .arts-activities-container {
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .arts-activities-heading {
            text-align: center;
            font-size: 2.8rem;
            color: #c41e3a;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(196, 30, 58, 0.1);
        }
        
        .arts-activities-intro {
            text-align: center;
            font-size: 1.1rem;
            color: #666;
            max-width: 900px;
            margin: 0 auto 60px;
        }
        
        .arts-activities-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }
        
        .arts-activity-card {
            background: linear-gradient(135deg, #ffffff 0%, #fff5f7 100%);
            border-radius: 15px;
            padding: 30px;
            text-align: center;
            transition: all 0.3s ease;
            box-shadow: 0 5px 20px rgba(196, 30, 58, 0.15);
            border: 2px solid transparent;
        }
        
        .arts-activity-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 35px rgba(0, 67, 114, 0.25);
            border-color: #004372;
        }
        
        .arts-activity-icon {
            font-size: 3.5rem;
            margin-bottom: 20px;
            background: linear-gradient(135deg, #c41e3a 0%, #e74c3c 100%);
        }
        
        .arts-activity-name {
            font-size: 1.5rem;
            color: #c41e3a;
            margin-bottom: 15px;
            font-weight: bold;
        }
        
        .arts-activity-description {
            font-size: 1rem;
            color: #666;
            line-height: 1.7;
        }
        
        /* Clubs Section */
        .clubs-activities-section {
            padding: 80px 20px;
            background: #ffffff;
        }
        
        .clubs-activities-container {
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .clubs-activities-heading {
            text-align: center;
            font-size: 2.8rem;
            color: #004372;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 67, 114, 0.1);
        }
        
        .clubs-activities-intro {
            text-align: center;
            font-size: 1.1rem;
            color: #666;
            max-width: 900px;
            margin: 0 auto 60px;
        }
        
        .clubs-activities-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }
        
        .clubs-activity-card {
            background: linear-gradient(135deg, #ffffff 0%, #f0f8ff 100%);
            border-radius: 15px;
            padding: 30px;
            text-align: center;
            transition: all 0.3s ease;
            box-shadow: 0 5px 20px rgba(0, 67, 114, 0.15);
            border: 2px solid transparent;
        }
        
        .clubs-activity-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 35px rgba(196, 30, 58, 0.25);
            border-color: #c41e3a;
        }
        
        .clubs-activity-icon {
            font-size: 3.5rem;
            margin-bottom: 20px;
            background: linear-gradient(135deg, #004372 0%, #c41e3a 100%);
        }
        
        .clubs-activity-name {
            font-size: 1.5rem;
            color: #004372;
            margin-bottom: 15px;
            font-weight: bold;
        }
        
        .clubs-activity-description {
            font-size: 1rem;
            color: #666;
            line-height: 1.7;
        }
        
        /* Events Section */
        .events-activities-section {
            padding: 80px 20px;
            background: linear-gradient(135deg, #004372 0%, #0066b3 100%);
            color: #ffffff;
        }
        
        .events-activities-container {
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .events-activities-heading {
            text-align: center;
            font-size: 2.8rem;
            color: #ffffff;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        .events-activities-intro {
            text-align: center;
            font-size: 1.1rem;
            color: #e0e0e0;
            max-width: 900px;
            margin: 0 auto 60px;
        }
        
        .events-activities-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }
        
        .events-activity-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 30px;
            text-align: center;
            transition: all 0.3s ease;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
            border: 2px solid rgba(255, 255, 255, 0.2);
        }
        
        .events-activity-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 35px rgba(196, 30, 58, 0.4);
            background: rgba(196, 30, 58, 0.2);
            border-color: #c41e3a;
        }
        
        .events-activity-icon {
            font-size: 3.5rem;
            margin-bottom: 20px;
            color: #ffffff;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        .events-activity-name {
            font-size: 1.5rem;
            color: #ffffff;
            margin-bottom: 15px;
            font-weight: bold;
        }
        
        .events-activity-description {
            font-size: 1rem;
            color: #e0e0e0;
            line-height: 1.7;
        }
        
        /* Benefits Section */
        .benefits-activities-section {
            padding: 80px 20px;
            background: linear-gradient(135deg, #fff5f7 0%, #ffe0e6 100%);
        }
        
        .benefits-activities-container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .benefits-activities-heading {
            text-align: center;
            font-size: 2.8rem;
            color: #c41e3a;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(196, 30, 58, 0.1);
        }
        
        .benefits-activities-intro {
            text-align: center;
            font-size: 1.1rem;
            color: #666;
            max-width: 900px;
            margin: 0 auto 60px;
        }
        
        .benefits-activities-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }
        
        .benefits-activity-item {
            background: #ffffff;
            border-radius: 15px;
            padding: 35px;
            box-shadow: 0 5px 20px rgba(196, 30, 58, 0.15);
            border-left: 5px solid #c41e3a;
            transition: all 0.3s ease;
        }
        
        .benefits-activity-item:hover {
            transform: translateX(10px);
            box-shadow: 0 10px 30px rgba(0, 67, 114, 0.25);
            border-left-color: #004372;
        }
        
        .benefits-activity-icon {
            font-size: 3rem;
            color: #c41e3a;
            margin-bottom: 15px;
        }
        
        .benefits-activity-title {
            font-size: 1.4rem;
            color: #004372;
            margin-bottom: 12px;
            font-weight: bold;
        }
        
        .benefits-activity-text {
            font-size: 1rem;
            color: #666;
            line-height: 1.7;
        }
        
        /* Responsive Design */
        @media screen and (max-width: 1600px) {
            .activities-banner-title {
                font-size: 3rem;
            }
        }
        
        @media screen and (max-width: 1200px) {
            .activities-banner-title {
                font-size: 2.5rem;
            }
            
            .sports-activities-heading,
            .arts-activities-heading,
            .clubs-activities-heading,
            .events-activities-heading,
            .benefits-activities-heading {
                font-size: 2.3rem;
            }
        }
        
        @media screen and (max-width: 992px) {
            .sports-activities-grid,
            .arts-activities-grid,
            .clubs-activities-grid,
            .events-activities-grid {
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            }
        }
        
        @media screen and (max-width: 768px) {
            .activities-banner-section {
                padding: 60px 20px;
            }
            
            .activities-banner-title {
                font-size: 2rem;
            }
            
            .activities-banner-subtitle {
                font-size: 1.1rem;
            }
            
            .sports-activities-section,
            .arts-activities-section,
            .clubs-activities-section,
            .events-activities-section,
            .benefits-activities-section {
                padding: 60px 20px;
            }
            
            .sports-activities-heading,
            .arts-activities-heading,
            .clubs-activities-heading,
            .events-activities-heading,
            .benefits-activities-heading {
                font-size: 2rem;
            }
            
            .sports-activities-grid,
            .arts-activities-grid,
            .clubs-activities-grid,
            .events-activities-grid {
                grid-template-columns: 1fr;
                gap: 25px;
            }
            
            .benefits-activities-list {
                grid-template-columns: 1fr;
            }
        }
        
        @media screen and (max-width: 480px) {
            .activities-banner-title {
                font-size: 1.8rem;
            }
            
            .activities-banner-subtitle {
                font-size: 1rem;
            }
            
            .sports-activities-heading,
            .arts-activities-heading,
            .clubs-activities-heading,
            .events-activities-heading,
            .benefits-activities-heading {
                font-size: 1.7rem;
            }
            
            .sports-activity-card,
            .arts-activity-card,
            .clubs-activity-card,
            .events-activity-card {
                padding: 25px;
            }
        }
        
        @media screen and (max-width: 360px) {
            .activities-banner-section {
                padding: 50px 15px;
            }
            
            .activities-banner-title {
                font-size: 1.5rem;
            }
            
            .sports-activities-section,
            .arts-activities-section,
            .clubs-activities-section,
            .events-activities-section,
            .benefits-activities-section {
                padding: 50px 15px;
            }
        }
        
        /* Safari specific fixes */
        @supports (-webkit-appearance: none) {
            .sports-activity-icon,
            .arts-activity-icon,
            .clubs-activity-icon {
                background-clip: text;
                -webkit-background-clip: text;
            }
        }











        .admission-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 60px 20px;
        }
        
        .admission-intro-section {
            background: #fff;
            padding: 50px;
            border-radius: 20px;
            margin: 60px 0;
            box-shadow: 0 10px 40px rgba(0, 67, 114, 0.1);
            border-left: 6px solid #c41e3a;
        }
        
        .admission-intro-title {
            color: #004372;
            font-size: 2.2rem;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .admission-intro-text {
            color: #555;
            font-size: 1.1rem;
            line-height: 1.8;
        }
        
        .admission-steps-section {
            margin-bottom: 60px;
        }
        
        .admission-section-title {
            text-align: center;
            color: #004372;
            font-size: 2.5rem;
            margin-bottom: 50px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
            position: relative;
            padding-bottom: 20px;
        }
        
        .admission-cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
            margin-bottom: 40px;
        }
        
        .admission-card {
            background: #fff;
            padding: 35px;
            border-radius: 15px;
            box-shadow: 0 8px 25px rgba(0, 67, 114, 0.15);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .admission-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(90deg, #c41e3a 0%, #004372 100%);
        }
        
        .admission-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(196, 30, 58, 0.2);
        }
        
        .admission-card-icon {
            font-size: 3.5rem;
            margin-bottom: 20px;
            display: block;
        }
        
        .admission-card-number {
            position: absolute;
            top: 15px;
            right: 20px;
            font-size: 3rem;
            font-weight: bold;
            color: rgba(0, 67, 114, 0.1);
        }
        
        .admission-card-title {
            color: #004372;
            font-size: 1.5rem;
            margin-bottom: 15px;
            font-weight: 600;
        }
        
        .admission-card-text {
            color: #666;
            line-height: 1.7;
        }
        
        .admission-documents-section {
            background: linear-gradient(135deg, #fff 0%, #fffbf0 100%);
            padding: 60px 30px;
            border-radius: 20px;
            margin-bottom: 60px;
            box-shadow: 0 10px 40px rgba(196, 30, 58, 0.1);
        }
        
        .admission-requirements-section {
            background: #fff;
            padding: 60px 30px;
            border-radius: 20px;
            box-shadow: 0 10px 40px rgba(0, 67, 114, 0.1);
        }
        
        .admission-timeline-section {
            background: linear-gradient(135deg, #004372 0%, #0066a8 100%);
            padding: 60px 30px;
            border-radius: 20px;
            margin-bottom: 60px;
            position: relative;
        }
        
        .admission-timeline-title {
            color: #fff;
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 50px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        .admission-timeline-card {
            background: rgba(255, 255, 255, 0.95);
            padding: 30px;
            border-radius: 15px;
            margin-bottom: 20px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
        }
        
        .admission-timeline-month {
            color: #c41e3a;
            font-size: 1.3rem;
            font-weight: bold;
            margin-bottom: 10px;
        }
        
        .admission-timeline-activity {
            color: #004372;
            font-weight: 600;
            margin-bottom: 8px;
        }
        
        .admission-timeline-description {
            color: #666;
        }
        
        .admission-fee-section {
            background: linear-gradient(135deg, #fff9e6 0%, #ffffff 100%);
            padding: 60px 30px;
            border-radius: 20px;
            margin-bottom: 60px;
            box-shadow: 0 10px 40px rgba(196, 30, 58, 0.1);
        }
        
        .admission-contact-section {
            background: linear-gradient(135deg, #c41e3a 0%, #e63e5f 100%);
            padding: 60px 40px;
            border-radius: 20px;
            text-align: center;
            color: #fff;
            box-shadow: 0 10px 40px rgba(196, 30, 58, 0.3);
            margin-bottom: 4rem;
        }
        
        .admission-contact-title {
            font-size: 2.3rem;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            color: #fff;
        }
        
        .admission-contact-text {
            font-size: 1.2rem;
            margin-bottom: 30px;
            opacity: 0.95;
        }
        
        .admission-contact-button {
            background: #fff;
            color: #c41e3a;
            padding: 15px 40px;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: bold;
            text-decoration: none;
            display: inline-block;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
        }
        
        .admission-contact-button:hover {
            transform: scale(1.05);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
        }
        
        /* Responsive Design */
        @media (max-width: 320px) {
            .admission-hero-title {
                font-size: 1.8rem;
            }
            .admission-hero-subtitle {
                font-size: 1rem;
            }
            .admission-cards-grid {
                grid-template-columns: 1fr;
            }
            .admission-card {
                padding: 25px;
            }
        }
        
        @media (min-width: 321px) and (max-width: 480px) {
            .admission-hero-title {
                font-size: 2rem;
            }
            .admission-hero-subtitle {
                font-size: 1.1rem;
            }
            .admission-cards-grid {
                grid-template-columns: 1fr;
            }
        }
        
        @media (min-width: 481px) and (max-width: 768px) {
            .admission-hero-title {
                font-size: 2.5rem;
            }
            .admission-cards-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (min-width: 769px) and (max-width: 1024px) {
            .admission-cards-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        
        @media (min-width: 1025px) and (max-width: 1440px) {
            .admission-cards-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }
        
        @media (min-width: 1441px) {
            .admission-container {
                max-width: 1600px;
            }
            .admission-cards-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }
        
        @media (min-width: 1920px) {
            .admission-hero-title {
                font-size: 3.5rem;
            }
        }







        /* Fee Structure Banner Section */
        .fee-banner-section {
            background: linear-gradient(135deg, #004372 0%, #c41e3a 100%);
            padding: 80px 20px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .fee-banner-section::before {
            position: absolute;
            font-size: 200px;
            opacity: 0.1;
            top: -50px;
            right: -50px;
            animation: float 6s ease-in-out infinite;
        }
        
        .fee-banner-section::after {
            position: absolute;
            font-size: 150px;
            opacity: 0.1;
            bottom: -30px;
            left: -30px;
            animation: float 8s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }
        
        .fee-banner-title {
            font-size: 3.5rem;
            color: #fff;
            margin-bottom: 15px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            position: relative;
            z-index: 1;
        }
        
        .fee-banner-subtitle {
            font-size: 1.4rem;
            color: #ffd700;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
            position: relative;
            z-index: 1;
        }
        
        /* Fee Cards Section */
        .fee-cards-section {
            padding: 80px 0;
            max-width: 1500px;
            margin: 0 auto;
        }
        
        .fee-section-heading {
            text-align: center;
            font-size: 2.8rem;
            color: #004372;
            margin-bottom: 20px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        }
        
        .fee-section-description {
            text-align: center;
            font-size: 1.2rem;
            color: #666;
            margin-bottom: 60px;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .fee-cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-bottom: 40px;
        }
        
        .fee-card {
            background: #fff;
            border-radius: 20px;
            padding: 35px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .fee-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(90deg, #004372 0%, #c41e3a 100%);
        }
        
        .fee-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0,0,0,0.25);
        }
        
        .fee-card-icon {
            font-size: 3.5rem;
            margin-bottom: 20px;
            display: block;
        }
        
        .fee-card-title {
            font-size: 2rem;
            color: #004372;
            margin-bottom: 15px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.05);
        }
        
        .fee-card-amount {
            font-size: 1.5rem;
            color: #c41e3a;
            font-weight: bold;
            margin-bottom: 20px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        }
        
        .fee-card-details {
            list-style: none;
            margin-bottom: 20px;
        }
        
        .fee-card-details li {
            padding: 10px 0;
            border-bottom: 1px solid #eee;
            color: #555;
            font-size: 1rem;
        }
        
        .fee-card-details li:last-child {
            border-bottom: none;
        }
        
        .fee-card-details li::before {
            content: '✓ ';
            color: #c41e3a;
            font-weight: bold;
            margin-right: 8px;
        }
        
        /* Payment Options Section */
        .payment-options-section {
            padding: 80px 20px;
            background: linear-gradient(135deg, #fff 0%, #f0f4f8 100%);
        }
        
        .payment-options-container {
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .payment-heading {
            text-align: center;
            font-size: 2.5rem;
            color: #004372;
            margin-bottom: 60px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        }
        
        .payment-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
        }
        
        .payment-card {
            background: #fff;
            padding: 40px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 8px 25px rgba(0,0,0,0.12);
            transition: all 0.3s ease;
        }
        
        .payment-card:hover {
            transform: scale(1.05);
            box-shadow: 0 12px 35px rgba(196,30,58,0.2);
        }
        
        .payment-icon {
            font-size: 3rem;
            margin-bottom: 20px;
            display: block;
        }
        
        .payment-title {
            font-size: 1.5rem;
            color: #004372;
            margin-bottom: 15px;
        }
        
        .payment-description {
            color: #666;
            font-size: 1rem;
        }
        
        /* Scholarship Section */
        .scholarship-section {
            padding: 80px 20px;
            background: linear-gradient(135deg, #004372 0%, #c41e3a 100%);
            color: #fff;
        }
        
        .scholarship-container {
            max-width: 1200px;
            margin: 0 auto;
            text-align: center;
        }
        
        .scholarship-heading {
            font-size: 2.5rem;
            margin-bottom: 30px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            color: #fff !important;
        }
        
        .scholarship-content {
            font-size: 1.2rem;
            line-height: 1.8;
            margin-bottom: 40px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
        }
        
        .scholarship-benefits {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 25px;
            margin-top: 50px;
        }
        
        .benefit-card {
            background: rgba(255,255,255,0.1);
            padding: 30px;
            border-radius: 15px;
            backdrop-filter: blur(10px);
            border: 2px solid rgba(255,255,255,0.2);
            transition: all 0.3s ease;
        }
        
        .benefit-card:hover {
            background: rgba(255,255,255,0.2);
            transform: translateY(-5px);
        }
        
        .benefit-icon {
            font-size: 3.2rem;
            margin-bottom: 15px;
            display: block;
        }
        
        .benefit-title {
            font-size: 1.3rem;
            margin-bottom: 10px;
        }
        
        .benefit-text {
            font-size: 1rem;
            opacity: 0.9;
        }
        
        /* Responsive Design */
        @media (max-width: 1440px) {
            .fee-banner-title { font-size: 3rem; }
            .fee-section-heading { font-size: 2.5rem; }
        }
        
        @media (max-width: 1024px) {
            .fee-banner-title { font-size: 2.5rem; }
            .fee-section-heading { font-size: 2.2rem; }
            .fee-cards-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
        }
        
        @media (max-width: 768px) {
            .fee-banner-section { padding: 60px 15px; }
            .fee-banner-title { font-size: 2rem; }
            .fee-banner-subtitle { font-size: 1.1rem; }
            .fee-cards-section { padding: 50px 15px; }
            .fee-section-heading { font-size: 1.8rem; }
            .fee-cards-grid { grid-template-columns: 1fr; gap: 20px; }
            .payment-grid { grid-template-columns: 1fr; }
            .scholarship-heading { font-size: 2rem; }
        }
        
        @media (max-width: 480px) {
            .fee-banner-title { font-size: 1.6rem; }
            .fee-banner-subtitle { font-size: 0.95rem; }
            .fee-section-heading { font-size: 1.5rem; }
            .fee-card { padding: 25px; }
            .fee-card-title { font-size: 1.4rem; }
            .fee-card-amount { font-size: 1.8rem; }
            .scholarship-heading { font-size: 1.6rem; }
            .scholarship-content { font-size: 1rem; }
        }
        
        @media (max-width: 375px) {
            .fee-banner-section { padding: 50px 10px; }
            .fee-banner-title { font-size: 1.4rem; }
            .fee-cards-section { padding: 40px 10px; }
            .fee-card { padding: 20px; }
            .payment-card { padding: 30px 20px; }
        }
        
        @media (min-width: 1920px) {
            .fee-banner-title { font-size: 2.8rem; }
            .fee-section-heading { font-size: 2.5rem; }
            .fee-cards-grid { max-width: 1800px; margin: 0 auto; }
        }
        
        @media (min-width: 2560px) {
            .fee-banner-section { padding: 120px 20px; }
            .fee-banner-title { font-size: 5rem; }
            .fee-section-heading { font-size: 4rem; }
        }



.download-area{margin: 4rem 0;}

.download-forms-container {
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
            padding: 40px 20px;
        }
        
        .download-forms-header {
            text-align: center;
            margin-bottom: 50px;
            animation: fadeInDown 0.8s ease;
        }
        
        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .download-forms-title {
            font-size: 48px;
            color: #004372;
            margin-bottom: 15px;
            text-shadow: 2px 2px 4px rgba(0, 67, 114, 0.2);
            font-weight: 700;
        }
        
        .download-forms-subtitle {
            font-size: 18px;
            color: #666;
            max-width: 700px;
            margin: 0 auto;
            line-height: 1.8;
        }
        
        .download-forms-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-bottom: 50px;
        }
        
        .download-form-card {
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            animation: fadeInUp 0.8s ease;
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .download-form-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(90deg, #004372 0%, #c41e3a 100%);
        }
        
        .download-form-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0, 67, 114, 0.2);
        }
        
        .form-card-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #004372 0%, #0066b3 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            box-shadow: 0 5px 15px rgba(0, 67, 114, 0.3);
        }
        
        .form-card-icon svg {
            width: 40px;
            height: 40px;
            fill: white;
        }
        
        .form-card-title {
            font-size: 22px;
            color: #004372;
            margin-bottom: 12px;
            text-align: center;
            font-weight: 600;
        }
        
        .form-card-description {
            font-size: 14px;
            color: #666;
            margin-bottom: 20px;
            text-align: center;
            line-height: 1.6;
        }
        
        .form-card-details {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-bottom: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
        }
        
        .form-detail-item {
            display: flex;
            align-items: center;
            font-size: 13px;
            color: #555;
        }
        
        .form-detail-item::before {
            content: '✓';
            color: #c41e3a;
            font-weight: bold;
            margin-right: 8px;
        }
        
        .form-download-button {
            width: 100%;
            padding: 14px 28px;
            background: linear-gradient(135deg, #c41e3a 0%, #a01828 100%);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
            box-shadow: 0 5px 15px rgba(196, 30, 58, 0.3);
        }
        
        .form-download-button:hover {
            background: linear-gradient(135deg, #a01828 0%, #c41e3a 100%);
            box-shadow: 0 8px 20px rgba(196, 30, 58, 0.4);
            transform: scale(1.02);
        }
        
        .download-instructions-section {
            background: white;
            border-radius: 15px;
            padding: 40px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            margin-top: 50px;
        }
        
        .instructions-title {
            font-size: 32px;
            color: #004372;
            margin-bottom: 25px;
            text-align: center;
            text-shadow: 1px 1px 3px rgba(0, 67, 114, 0.2);
        }
        
        .instructions-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }
        
        .instruction-item {
            padding: 20px;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 10px;
            border-left: 4px solid #c41e3a;
            transition: all 0.3s ease;
        }
        
        .instruction-item:hover {
            transform: translateX(5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .instruction-number {
            display: inline-block;
            width: 35px;
            height: 35px;
            background: linear-gradient(135deg, #004372 0%, #0066b3 100%);
            color: white;
            border-radius: 50%;
            text-align: center;
            line-height: 35px;
            font-weight: bold;
            margin-right: 12px;
            box-shadow: 0 3px 8px rgba(0, 67, 114, 0.3);
        }
        
        .instruction-text {
            display: inline;
            color: #333;
            font-size: 15px;
        }
        
        /* Responsive Design */
        @media (max-width: 1400px) {
            .download-forms-container {
                max-width: 1200px;
            }
        }
        
        @media (max-width: 1024px) {
            .download-forms-title {
                font-size: 40px;
            }
            
            .download-forms-grid {
                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                gap: 25px;
            }
        }
        
        @media (max-width: 768px) {
            .download-forms-container {
                padding: 30px 15px;
            }
            
            .download-forms-title {
                font-size: 32px;
            }
            
            .download-forms-subtitle {
                font-size: 16px;
            }
            
            .download-forms-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .instructions-title {
                font-size: 26px;
            }
            
            .download-instructions-section {
                padding: 30px 20px;
            }
        }
        
        @media (max-width: 480px) {
            .download-forms-title {
                font-size: 28px;
            }
            
            .download-form-card {
                padding: 25px 20px;
            }
            
            .form-card-title {
                font-size: 20px;
            }
            
            .form-download-button {
                font-size: 14px;
                padding: 12px 24px;
            }
        }
        
        @media (max-width: 375px) {
            .download-forms-container {
                padding: 20px 10px;
            }
            
            .download-forms-title {
                font-size: 24px;
            }
            
            .form-card-icon {
                width: 70px;
                height: 70px;
            }
        }
        
        @media (min-width: 1920px) {
            .download-forms-container {
                max-width: 1600px;
            }
            
            .download-forms-title {
                font-size: 56px;
            }
        }        






        .eligibility-main-container {
            width: 100%;
            overflow-x: hidden;
        }
        
        /* Eligibility Introduction Section */
        .eligibility-introduction-section {
            padding: 60px 20px;
            background: linear-gradient(135deg, #004372 0%, #0056a0 100%);
            color: white;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .eligibility-introduction-section::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -10%;
            width: 500px;
            height: 500px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 50%;
        }
        
        .eligibility-intro-content {
            max-width: 1550px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }
        
        .eligibility-main-title {
            font-size: 2.8rem;
            font-weight: 700;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        .eligibility-intro-description {
            font-size: 1.2rem;
            line-height: 1.8;
            margin-bottom: 15px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
        }
        
        /* Eligibility Cards Section */
        .eligibility-cards-section {
            padding: 80px 20px;
            width: 1550px;
            margin: 0 auto;
        }
        
        .eligibility-section-header {
            text-align: center;
            margin-bottom: 60px;
        }
        
        .eligibility-section-title {
            font-size: 2.5rem;
            color: #004372;
            margin-bottom: 15px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        }
        
        .eligibility-section-subtitle {
            font-size: 1.1rem;
            color: #666;
        }
        
        .eligibility-cards-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .eligibility-card {
            background: white;
            border-radius: 15px;
            padding: 35px 25px;
            text-align: center;
            transition: all 0.4s ease;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
            border: 2px solid transparent;
            position: relative;
            overflow: hidden;
        }
        
        .eligibility-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(90deg, #004372 0%, #c41e3a 100%);
        }
        
        .eligibility-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0, 67, 114, 0.2);
            border-color: #004372;
        }
        
        .eligibility-card-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 25px;
            background: linear-gradient(135deg, #004372 0%, #0056a0 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            color: white;
            box-shadow: 0 5px 15px rgba(0, 67, 114, 0.3);
        }
        
        .eligibility-card-title {
            font-size: 1.5rem;
            color: #004372;
            margin-bottom: 15px;
            font-weight: 700;
        }
        
        .eligibility-card-description {
            font-size: 1rem;
            color: #555;
            line-height: 1.7;
        }
        
        /* Additional Information Section */
        .eligibility-additional-info-section {
            padding: 80px 20px;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        }
        
        .eligibility-info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .eligibility-info-card {
            background: white;
            border-radius: 20px;
            padding: 40px 30px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
            transition: all 0.4s ease;
            border-left: 5px solid #c41e3a;
        }
        
        .eligibility-info-card:hover {
            transform: scale(1.03);
            box-shadow: 0 12px 35px rgba(196, 30, 58, 0.2);
        }
        
        .eligibility-info-card-title {
            font-size: 1.8rem;
            color: #004372;
            margin-bottom: 20px;
            font-weight: 700;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
        }
        
        .eligibility-info-card-content {
            font-size: 1.05rem;
            color: #444;
            line-height: 1.8;
        }
        
        .eligibility-info-list {
            list-style: none;
            padding-left: 0;
        }
        
        .eligibility-info-list li {
            padding: 12px 0;
            padding-left: 30px;
            position: relative;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .eligibility-info-list li:last-child {
            border-bottom: none;
        }
        
        .eligibility-info-list li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: #c41e3a;
            font-weight: bold;
            font-size: 1.2rem;
        }
        
        /* Important Notes Section */
        .eligibility-notes-section {
            padding: 80px 20px;
            background: linear-gradient(135deg, #004372 0%, #002847 100%);
            color: white;
        }
        
        .eligibility-notes-container {
            max-width: 1200px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 50px 40px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(10px);
        }
        
        .eligibility-notes-title {
            font-size: 2.2rem;
            margin-bottom: 30px;
            text-align: center;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            color: #fff !important;
        }
        
        .eligibility-notes-content {
            font-size: 1.1rem;
            line-height: 1.9;
            text-align: center;
        }
        
        /* Responsive Design */
        @media (max-width: 1440px) {
            .eligibility-cards-container {
                grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            }
        }
        
        @media (max-width: 1200px) {
            .eligibility-main-title {
                font-size: 2.4rem;
            }
            
            .eligibility-section-title {
                font-size: 2.2rem;
            }
        }
        
        @media (max-width: 1024px) {
            .eligibility-cards-container {
                grid-template-columns: repeat(2, 1fr);
                gap: 25px;
            }
            
            .eligibility-info-grid {
                grid-template-columns: 1fr;
            }
        }
        
        @media (max-width: 768px) {
            .eligibility-introduction-section {
                padding: 40px 15px;
            }
            
            .eligibility-main-title {
                font-size: 2rem;
            }
            
            .eligibility-intro-description {
                font-size: 1rem;
            }
            
            .eligibility-cards-section {
                padding: 50px 15px;
            }
            
            .eligibility-section-title {
                font-size: 1.8rem;
            }
            
            .eligibility-cards-container {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .eligibility-notes-container {
                padding: 30px 25px;
            }
        }
        
        @media (max-width: 480px) {
            .eligibility-main-title {
                font-size: 1.7rem;
            }
            
            .eligibility-card {
                padding: 25px 20px;
            }
            
            .eligibility-card-icon {
                width: 60px;
                height: 60px;
                font-size: 2rem;
            }
            
            .eligibility-card-title {
                font-size: 1.3rem;
            }
            
            .eligibility-info-card {
                padding: 30px 20px;
            }
            
            .eligibility-notes-title {
                font-size: 1.7rem;
            }
        }
        
        @media (max-width: 375px) {
            .eligibility-introduction-section {
                padding: 30px 10px;
            }
            
            .eligibility-main-title {
                font-size: 1.5rem;
            }
            
            .eligibility-section-title {
                font-size: 1.5rem;
            }
            
            .eligibility-card-title {
                font-size: 1.2rem;
            }
        }
        
        @media (min-width: 1920px) {
            .eligibility-cards-container {
                grid-template-columns: repeat(4, 1fr);
                max-width: 1800px;
            }
            
            .eligibility-main-title {
                font-size: 3.2rem;
            }
        }
        
        @media (min-width: 2560px) {
            .eligibility-intro-content {
                max-width: 1400px;
            }
            
            .eligibility-cards-container {
                max-width: 2200px;
            }
            
            .eligibility-main-title {
                font-size: 3.8rem;
            }
        }






        /* Alumni Introduction Section */
        .alumni-intro {
            padding: 60px 20px 0 20px;
            background: linear-gradient(to bottom, #f8f9fa, #ffffff);
        }
        
        .alumni-intro-container {
            max-width: 1200px;
            margin: 0 auto;
            text-align: center;
        }
        
        .alumni-intro-heading {
            font-size: 2.5rem;
            color: #004372;
            margin-bottom: 25px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
            text-align: center;
        }
        
        .alumni-intro-text {
            font-size: 1.1rem;
            color: #555;
            line-height: 1.8;
            text-align: center;
        }
        
        /* Alumni Cards Section */
        .alumni-cards-section {
            padding: 80px 20px;
        }
        
        .alumni-cards-container {
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .alumni-section-title {
            text-align: center;
            font-size: 2.5rem;
            color: #004372;
            margin-bottom: 60px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        }
        
        .alumni-cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 35px;
        }
        
        .alumni-card {
            background: #ffffff;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 8px 25px rgba(0,67,114,0.15);
            transition: all 0.4s ease;
            position: relative;
        }
        
        .alumni-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(196,30,58,0.25);
        }
        
        .alumni-card-image {
            width: 100%;
            height: 280px;
            object-fit: cover;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-size: 4rem;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .alumni-card-image img {
            height: 100%;
            object-fit: cover;
        }
        
        .alumni-card-content {
            padding: 25px;
        }
        
        .alumni-card-name {
            font-size: 1.5rem;
            color: #004372;
            margin-bottom: 10px;
            font-weight: 600;
        }
        
        .alumni-card-batch {
            font-size: 0.95rem;
            color: #c41e3a;
            margin-bottom: 12px;
            font-weight: 500;
        }
        
        .alumni-card-profession {
            font-size: 1.1rem;
            color: #555;
            margin-bottom: 15px;
            font-weight: 500;
        }
        
        .alumni-card-description {
            font-size: 0.95rem;
            color: #666;
            line-height: 1.6;
        }
        
        .alumni-card-badge {
            position: absolute;
            top: 15px;
            right: 15px;
            background: linear-gradient(135deg, #c41e3a, #ff4757);
            color: #ffffff;
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
            box-shadow: 0 4px 10px rgba(196,30,58,0.3);
        }
        
        /* Responsive Design */
        
        /* Mini Mobile (320px - 375px) */
        @media (max-width: 375px) {
            .alumni-banner {
                padding: 50px 15px;
            }
            
            .alumni-banner-title {
                font-size: 2rem;
            }
            
            .alumni-banner-subtitle {
                font-size: 1rem;
            }
            
            .alumni-intro-heading {
                font-size: 1.6rem;
            }
            
            .alumni-section-title {
                font-size: 1.8rem;
            }
            
            .alumni-cards-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
        }
        
        /* Small Mobile (376px - 480px) */
        @media (min-width: 376px) and (max-width: 480px) {
            .alumni-banner-title {
                font-size: 2.3rem;
            }
            
            .alumni-banner-subtitle {
                font-size: 1.1rem;
            }
            
            .alumni-intro-heading {
                font-size: 1.9rem;
            }
            
            .alumni-section-title {
                font-size: 2rem;
            }
            
            .alumni-cards-grid {
                grid-template-columns: 1fr;
            }
        }
        
        /* Tablet (481px - 768px) */
        @media (min-width: 481px) and (max-width: 768px) {
            .alumni-banner-title {
                font-size: 2.8rem;
            }
            
            .alumni-cards-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        /* Mini Laptop (769px - 1024px) */
        @media (min-width: 769px) and (max-width: 1024px) {
            .alumni-cards-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        
        /* Big Desktop (1025px - 1440px) */
        @media (min-width: 1025px) and (max-width: 1440px) {
            .alumni-cards-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }
        
        /* Mac/Large Desktop (1441px+) */
        @media (min-width: 1441px) {
            .alumni-cards-container {
                max-width: 1600px;
            }
            
            .alumni-cards-grid {
                grid-template-columns: repeat(4, 1fr);
                gap: 40px;
            }
        }
        
        /* iPhone Specific */
        @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) {
            .alumni-banner {
                padding: 60px 20px;
            }
            
            .alumni-card-image {
                height: 250px;
            }
        }







        /* Section Styles */
        .student-corner-section {
            padding: 60px 0;
        }
        
        .student-corner-section-title {
            text-align: center;
            margin-bottom: 50px;
        }
        
        .student-corner-section-title h2 {
            font-size: 2.5rem;
            color: #004372;
            margin-bottom: 10px;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
        }
        
        .student-corner-section-title p {
            font-size: 1.1rem;
            color: #666;
        }
        
        /* Cards Grid */
        .student-corner-cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }
        
        .student-corner-card {
            background: #fff;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            position: relative;
        }
        
        .student-corner-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0, 67, 114, 0.2);
        }
        
        .student-corner-card-image {
            width: 100%;
            height: 220px;
            object-fit: cover;
        }
        
        .student-corner-card-content {
            padding: 25px;
        }
        
        .student-corner-card-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #004372 0%, #0066b3 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            box-shadow: 0 5px 15px rgba(0, 67, 114, 0.3);
        }
        
        .student-corner-card-icon svg {
            width: 30px;
            height: 30px;
            fill: #fff;
        }
        
        .student-corner-card-title {
            font-size: 1.5rem;
            color: #004372;
            margin-bottom: 12px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
        }
        
        .student-corner-card-text {
            font-size: 1rem;
            color: #666;
            line-height: 1.7;
        }
        
        .student-corner-card-badge {
            position: absolute;
            top: 15px;
            right: 15px;
            background: linear-gradient(135deg, #c41e3a 0%, #e63950 100%);
            color: #fff;
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: bold;
            box-shadow: 0 3px 10px rgba(196, 30, 58, 0.4);
        }
        
        /* Achievements Section */
        .student-achievements-section {
            background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
        }
        
        /* Activities Section */
        .student-activities-section {
            background: linear-gradient(135deg, #e8ecf1 0%, #dce3ea 100%);
        }
        
        /* Clubs Section */
        .student-clubs-section {
            background: linear-gradient(135deg, #fff 0%, #f5f7fa 100%);
        }
        
        /* Events Section */
        .student-events-section {
            background: linear-gradient(135deg, #f8f9fa 0%, #e8ecf1 100%);
        }
        
        
        /* Testimonials Section */
        .student-testimonials-section {
            background: linear-gradient(135deg, #004372 0%, #0066b3 100%);
            color: #fff;
        }
        
        .student-testimonials-section .student-corner-section-title h2,
        .student-testimonials-section .student-corner-section-title p {
            color: #fff;
            text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
        }
        
        .student-testimonials-section .student-corner-card {
            background: rgba(255, 255, 255, 0.95);
        }
        
        /* Resources Section */
        .student-resources-section {
            background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
        }
        
        /* Gallery Section */
        .student-gallery-section {
            background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
        }
        
        /* Responsive Design */
        @media (max-width: 1200px) {
            .student-corner-cards-grid {
                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            }
        }
        
        @media (max-width: 768px) {
            .student-corner-banner h1 {
                font-size: 2.2rem;
            }
            
            .student-corner-banner p {
                font-size: 1.1rem;
            }
            
            .student-corner-section-title h2 {
                font-size: 2rem;
            }
            
            .student-corner-cards-grid {
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                gap: 20px;
            }
            
            .student-corner-section {
                padding: 40px 0;
            }
        }
        
        @media (max-width: 480px) {
            .student-corner-banner {
                padding: 60px 15px;
            }
            
            .student-corner-banner h1 {
                font-size: 1.8rem;
            }
            
            .student-corner-banner p {
                font-size: 1rem;
            }
            
            .student-corner-cards-grid {
                grid-template-columns: 1fr;
            }
            
            .student-corner-card-content {
                padding: 20px;
            }
        }
        
        @media (min-width: 1920px) {
            .student-corner-container {
                max-width: 1600px;
            }
            
            .student-corner-banner h1 {
                font-size: 3.5rem;
            }
        }










        /* Section Styles */
        .student-corner-section {
            padding: 60px 0;
        }
        
        .student-corner-section-title {
            text-align: center;
            margin-bottom: 50px;
        }
        
        .student-corner-section-title h2 {
            font-size: 2.5rem;
            color: #004372;
            margin-bottom: 10px;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
        }
        
        .student-corner-section-title p {
            font-size: 1.1rem;
            color: #666;
        }
        
        /* Cards Grid */
        .student-corner-cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }
        
        .student-corner-card {
            background: #fff;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            position: relative;
        }
        
        .student-corner-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0, 67, 114, 0.2);
        }
        
        .student-corner-card-image {
            width: 100%;
            height: 220px;
            object-fit: cover;
        }
        
        .student-corner-card-content {
            padding: 25px;
        }
        
        .student-corner-card-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #004372 0%, #0066b3 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            box-shadow: 0 5px 15px rgba(0, 67, 114, 0.3);
        }
        
        .student-corner-card-icon svg {
            width: 30px;
            height: 30px;
            fill: #fff;
        }
        
        .student-corner-card-title {
            font-size: 1.5rem;
            color: #004372;
            margin-bottom: 12px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
        }
        
        .student-corner-card-text {
            font-size: 1rem;
            color: #666;
            line-height: 1.7;
        }
        
        .student-corner-card-badge {
            position: absolute;
            top: 15px;
            right: 15px;
            background: linear-gradient(135deg, #c41e3a 0%, #e63950 100%);
            color: #fff;
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: bold;
            box-shadow: 0 3px 10px rgba(196, 30, 58, 0.4);
        }
        
        /* Achievements Section */
        .student-achievements-section {
            background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
        }
        
        /* Activities Section */
        .student-activities-section {
            background: linear-gradient(135deg, #e8ecf1 0%, #dce3ea 100%);
        }
        
        /* Clubs Section */
        .student-clubs-section {
            background: linear-gradient(135deg, #fff 0%, #f5f7fa 100%);
        }
        
        /* Events Section */
        .student-events-section {
            background: linear-gradient(135deg, #f8f9fa 0%, #e8ecf1 100%);
        }
    
        
        /* Testimonials Section */
        .student-testimonials-section {
            background: linear-gradient(135deg, #004372 0%, #0066b3 100%);
            color: #fff;
        }
        
        .student-testimonials-section .student-corner-section-title h2,
        .student-testimonials-section .student-corner-section-title p {
            color: #fff;
            text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
        }
        
        .student-testimonials-section .student-corner-card {
            background: rgba(255, 255, 255, 0.95);
        }
        
        /* Resources Section */
        .student-resources-section {
            background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
        }
        
        /* Gallery Section */
        .student-gallery-section {
            background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
        }
        
        /* Responsive Design */
        @media (max-width: 1200px) {
            .student-corner-cards-grid {
                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            }
        }
        
        @media (max-width: 768px) {
            .student-corner-banner h1 {
                font-size: 2.2rem;
            }
            
            .student-corner-banner p {
                font-size: 1.1rem;
            }
            
            .student-corner-section-title h2 {
                font-size: 2rem;
            }
            
            .student-corner-cards-grid {
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                gap: 20px;
            }
            
            .student-corner-section {
                padding: 40px 0;
            }
        }
        
        @media (max-width: 480px) {
            .student-corner-banner {
                padding: 60px 15px;
            }
            
            .student-corner-banner h1 {
                font-size: 1.8rem;
            }
            
            .student-corner-banner p {
                font-size: 1rem;
            }
            
            .student-corner-cards-grid {
                grid-template-columns: 1fr;
            }
            
            .student-corner-card-content {
                padding: 20px;
            }
        }
        
        @media (min-width: 1920px) {
            .student-corner-container {
                max-width: 1600px;
            }
            
            .student-corner-banner h1 {
                font-size: 3.5rem;
            }
        }









        /* Media Release Introduction Section */
        .media-release-intro-section {
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            padding: 50px;
            border-radius: 20px;
            margin-bottom: 60px;
            box-shadow: 0 10px 30px rgba(0, 67, 114, 0.15);
            border-left: 5px solid #004372;
            margin-top: 5rem;
        }
        
        .media-release-intro-title {
            font-size: 2.2rem;
            color: #004372;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .media-release-intro-text {
            font-size: 1.1rem;
            color: #555;
            line-height: 1.8;
        }
        
        /* Media Release Grid Section */
        .media-release-grid-section {
            background: transparent;
            padding: 40px 0;
        }
        
        .media-release-section-heading {
            font-size: 2.5rem;
            color: #004372;
            text-align: center;
            margin-bottom: 50px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
            position: relative;
        }
        
        .media-release-section-heading::after {
            content: '';
            display: block;
            width: 100px;
            height: 4px;
            background: linear-gradient(90deg, #c41e3a 0%, #004372 100%);
            margin: 20px auto 0;
            border-radius: 2px;
        }
        
        .media-release-cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 35px;
            padding: 20px 0;
        }
        
        /* Media Release Card Styles */
        .media-release-card {
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 8px 25px rgba(0, 67, 114, 0.12);
            transition: all 0.4s ease;
            position: relative;
            border: 2px solid transparent;
        }
        
        .media-release-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(196, 30, 58, 0.25);
            border-color: #c41e3a;
        }
        
        .media-release-card-image-wrapper {
            position: relative;
            overflow: hidden;
            height: 240px;
            background: linear-gradient(135deg, #004372 0%, #c41e3a 100%);
        }
        
        .media-release-card-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .media-release-card:hover .media-release-card-image {
            transform: scale(1.1);
        }
        
        .media-release-card-date-badge {
            position: absolute;
            top: 15px;
            right: 15px;
            background: linear-gradient(135deg, #c41e3a 0%, #8b0000 100%);
            color: #fff;
            padding: 8px 16px;
            border-radius: 25px;
            font-size: 0.85rem;
            font-weight: bold;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
        }
        
        .media-release-card-category {
            position: absolute;
            bottom: 15px;
            left: 15px;
            background: linear-gradient(135deg, #004372 0%, #001f3f 100%);
            color: #fff;
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
        }
        
        .media-release-card-content {
            padding: 25px;
        }
        
        .media-release-card-title {
            font-size: 1.4rem;
            color: #004372;
            margin-bottom: 15px;
            line-height: 1.4;
            font-weight: 700;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
        }
        
        .media-release-card-description {
            font-size: 0.95rem;
            color: #666;
            margin-bottom: 20px;
            line-height: 1.7;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .media-release-card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 15px;
            border-top: 2px solid #e9ecef;
        }
        
        .media-release-read-more-btn {
            background: linear-gradient(135deg, #004372 0%, #002855 100%);
            color: #fff;
            padding: 10px 24px;
            border-radius: 25px;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.9rem;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(0, 67, 114, 0.3);
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
        }
        
        .media-release-read-more-btn:hover {
            background: linear-gradient(135deg, #c41e3a 0%, #8b0000 100%);
            box-shadow: 0 6px 16px rgba(196, 30, 58, 0.4);
            transform: translateX(5px);
        }
        
        .media-release-share-icon {
            font-size: 1.2rem;
            color: #004372;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .media-release-share-icon:hover {
            color: #c41e3a;
            transform: scale(1.2);
        }
        
        /* Archive Section */
        .media-release-archive-section {
            background: linear-gradient(135deg, #004372 0%, #001f3f 100%);
            padding: 60px 20px;
            margin-top: 80px;
            text-align: center;
            border-radius: 20px;
        }
        
        .media-release-archive-title {
            font-size: 2.2rem;
            color: #fff;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        .media-release-archive-text {
            font-size: 1.1rem;
            color: #e0e0e0;
            margin-bottom: 30px;
        }
        
        .media-release-archive-btn {
            background: linear-gradient(135deg, #c41e3a 0%, #8b0000 100%);
            color: #fff;
            padding: 15px 40px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: 700;
            font-size: 1.1rem;
            display: inline-block;
            transition: all 0.3s ease;
            box-shadow: 0 6px 20px rgba(196, 30, 58, 0.4);
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
        }
        
        .media-release-archive-btn:hover {
            background: linear-gradient(135deg, #fff 0%, #f0f0f0 100%);
            color: #004372;
            box-shadow: 0 8px 25px rgba(255, 255, 255, 0.5);
            transform: translateY(-5px);
        }
        
        /* Responsive Design */
        
        /* Mini Mobile (320px - 374px) */
        @media screen and (max-width: 374px) {
            .media-release-main-title {
                font-size: 1.8rem;
            }
            
            .media-release-subtitle {
                font-size: 0.9rem;
            }
            
            .media-release-intro-section {
                padding: 25px 15px;
            }
            
            .media-release-intro-title {
                font-size: 1.5rem;
            }
            
            .media-release-section-heading {
                font-size: 1.8rem;
            }
            
            .media-release-cards-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .media-release-card-title {
                font-size: 1.1rem;
            }
            
            .media-release-archive-title {
                font-size: 1.6rem;
            }
        }
        
        /* Small Mobile (375px - 480px) */
        @media screen and (min-width: 375px) and (max-width: 480px) {
            .media-release-main-title {
                font-size: 2rem;
            }
            
            .media-release-subtitle {
                font-size: 1rem;
            }
            
            .media-release-intro-section {
                padding: 30px 20px;
            }
            
            .media-release-intro-title {
                font-size: 1.7rem;
            }
            
            .media-release-section-heading {
                font-size: 2rem;
            }
            
            .media-release-cards-grid {
                grid-template-columns: 1fr;
                gap: 25px;
            }
        }
        
        /* Tablet (481px - 768px) */
        @media screen and (min-width: 481px) and (max-width: 768px) {
            .media-release-main-title {
                font-size: 2.3rem;
            }
            
            .media-release-cards-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 30px;
            }
        }
        
        /* Mini Laptop (769px - 1024px) */
        @media screen and (min-width: 769px) and (max-width: 1024px) {
            .media-release-cards-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 30px;
            }
        }
        
        /* Desktop (1025px - 1440px) */
        @media screen and (min-width: 1025px) and (max-width: 1440px) {
            .media-release-cards-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        
        /* Big Desktop & Mac (1441px+) */
        @media screen and (min-width: 1441px) {
            .media-release-container {
                max-width: 1600px;
            }
            
            .media-release-cards-grid {
                grid-template-columns: repeat(4, 1fr);
                gap: 40px;
            }
            
            .media-release-main-title {
                font-size: 3.5rem;
            }
        }
        
        /* iPhone Specific */
        @media only screen 
            and (min-device-width: 375px) 
            and (max-device-width: 812px) 
            and (-webkit-min-device-pixel-ratio: 3) {
            .media-release-title-section {
                padding: 50px 20px;
            }
            
            .media-release-card-image-wrapper {
                height: 200px;
            }
        }
        
        /* Cross-browser compatibility */
        @supports (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px)) {
            .media-release-card {
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
            }
        }










        /* ========================================
           INTRODUCTION SECTION
           ======================================== */
        /* Admission Requirements Section */
        .admission-requirements-section {
            padding: 80px 20px;
            background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%);
        }
        
        .admission-requirements-container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .requirements-section-heading {
            text-align: center;
            color: #004372;
            font-size: 2.5em;
            margin-bottom: 50px;
            text-shadow: 2px 2px 4px rgba(0, 67, 114, 0.2);
            position: relative;
            padding-bottom: 20px;
        }
        
        .requirements-section-heading::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 4px;
            background: linear-gradient(to right, #c41e3a, #004372);
            border-radius: 2px;
        }
        
        .requirements-cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
            margin-bottom: 40px;
        }
        
        .requirement-card {
            background: #ffffff;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 8px 25px rgba(0, 67, 114, 0.15);
            transition: all 0.3s ease;
            border: 2px solid transparent;
            position: relative;
            overflow: hidden;
        }
        
        .requirement-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(to right, #c41e3a, #004372);
        }
        
        .requirement-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0, 67, 114, 0.25);
            border-color: #004372;
        }
        
        .requirement-card-icon {
            font-size: 3em;
            margin-bottom: 20px;
            display: block;
        }
        
        .requirement-card-title {
            color: #004372;
            font-size: 1.4em;
            margin-bottom: 15px;
            font-weight: 600;
        }
        
        .requirement-card-description {
            color: #555;
            font-size: 1em;
            line-height: 1.7;
        }
        
        /* Application Form Section */
        .application-form-section {
            padding: 80px 20px;
            background: linear-gradient(135deg, #f0f4f8 0%, #e6eef5 100%);
        }
        
        .application-form-container {
            max-width: 900px;
            margin: 0 auto;
            background: #ffffff;
            padding: 50px;
            border-radius: 20px;
            box-shadow: 0 15px 50px rgba(0, 67, 114, 0.2);
        }
        
        .form-section-heading {
            text-align: center;
            color: #004372;
            font-size: 2.5em;
            margin-bottom: 40px;
            text-shadow: 2px 2px 4px rgba(0, 67, 114, 0.1);
        }
        
        .admission-application-form {
            display: flex;
            flex-direction: column;
            gap: 30px;
        }
        
        .form-group-section {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            border-left: 5px solid #c41e3a;
        }
        
        .form-section-title {
            color: #004372;
            font-size: 1.8em;
            margin-bottom: 25px;
            font-weight: 600;
            text-shadow: 1px 1px 2px rgba(0, 67, 114, 0.1);
        }
        
        .form-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .form-field-group {
            display: flex;
            flex-direction: column;
        }
        
        .form-field-label {
            color: #004372;
            font-weight: 600;
            margin-bottom: 8px;
            font-size: 1em;
        }
        
        .form-input-field,
        .form-select-field,
        .form-textarea-field {
            padding: 12px 15px;
            border: 2px solid #d1d9e0;
            border-radius: 8px;
            font-size: 1em;
            transition: all 0.3s ease;
            background: #ffffff;
        }
        
        .form-input-field:focus,
        .form-select-field:focus,
        .form-textarea-field:focus {
            outline: none;
            border-color: #004372;
            box-shadow: 0 0 15px rgba(0, 67, 114, 0.2);
        }
        
        .form-textarea-field {
            min-height: 120px;
            resize: vertical;
            font-family: inherit;
        }
        
        .required-field-mark {
            color: #c41e3a;
        }
        
        .form-submit-button {
            background: linear-gradient(135deg, #c41e3a 0%, #a01830 100%);
            color: #ffffff;
            padding: 18px 50px;
            border: none;
            border-radius: 50px;
            font-size: 1.2em;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 8px 25px rgba(196, 30, 58, 0.3);
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
            margin: 30px auto 0;
            display: block;
        }
        
        .form-submit-button:hover {
            background: linear-gradient(135deg, #a01830 0%, #c41e3a 100%);
            transform: translateY(-3px);
            box-shadow: 0 12px 35px rgba(196, 30, 58, 0.4);
        }
        
        .form-submit-button:active {
            transform: translateY(-1px);
        }
        
        /* Documents Required Section */
        .documents-required-section {
            padding: 80px 20px;
            background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%);
        }
        
        .documents-required-container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .documents-section-heading {
            text-align: center;
            color: #004372;
            font-size: 2.5em;
            margin-bottom: 50px;
            text-shadow: 2px 2px 4px rgba(0, 67, 114, 0.2);
        }
        
        .documents-cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
        }
        
        .document-card {
            background: #ffffff;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 15px 40px rgb(133 133 133 / 25%);
            transition: all 0.3s ease;
            border: 2px solid transparent;
            text-align: center;
        }
        
        .document-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgb(133 133 133 / 25%);
            border-color: #c41e3a;
        }
        
        .document-card-icon {
            font-size: 3.5em;
            margin-bottom: 20px;
            display: block;
        }
        
        .document-card-title {
            color: #c41e3a;
            font-size: 1.3em;
            margin-bottom: 12px;
            font-weight: 600;
        }
        
        .document-card-description {
            color: #555;
            font-size: 0.95em;
            line-height: 1.6;
        }
        
        /* Contact Information Section */
        .contact-information-section {
            padding: 80px 20px;
            background: linear-gradient(135deg, #004372 0%, #0066b3 100%);
            text-align: center;
        }
        
        .contact-information-container {
            max-width: 1000px;
            margin: 0 auto;
        }
        
        .contact-section-heading {
            color: #ffffff;
            font-size: 2.5em;
            margin-bottom: 40px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        .contact-details-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
        }
        
        .contact-detail-card {
            background: rgba(255, 255, 255, 0.15);
            padding: 30px;
            border-radius: 15px;
            backdrop-filter: blur(10px);
            border: 2px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
        }
        
        .contact-detail-card:hover {
            background: rgba(255, 255, 255, 0.25);
            transform: scale(1.05);
        }
        
        .contact-card-icon {
            font-size: 2.5em;
            margin-bottom: 15px;
            display: block;
        }
        
        .contact-card-title {
            color: #ffffff;
            font-size: 1.3em;
            margin-bottom: 10px;
            font-weight: 600;
        }
        
        .contact-card-info {
            color: #e0f2ff;
            font-size: 1em;
        }
        
        /* Responsive Design */
        @media screen and (max-width: 1400px) {
            .apply-now-main-heading {
                font-size: 2.7em;
            }
        }
        
        @media screen and (max-width: 1024px) {
            .apply-now-main-heading {
                font-size: 2.4em;
            }
            
            .requirements-section-heading,
            .form-section-heading,
            .documents-section-heading,
            .contact-section-heading {
                font-size: 2.2em;
            }
            
            .application-form-container {
                padding: 40px 30px;
            }
        }
        
        @media screen and (max-width: 768px) {
            .apply-now-introduction-section {
                padding: 60px 20px;
            }
            
            .apply-now-main-heading {
                font-size: 2em;
            }
            
            .apply-now-subtitle {
                font-size: 1.1em;
            }
            
            .apply-now-description {
                font-size: 1em;
            }
            
            .requirements-section-heading,
            .form-section-heading,
            .documents-section-heading,
            .contact-section-heading {
                font-size: 1.9em;
            }
            
            .requirements-cards-grid,
            .documents-cards-grid {
                grid-template-columns: 1fr;
            }
            
            .application-form-container {
                padding: 30px 20px;
            }
            
            .form-row {
                grid-template-columns: 1fr;
            }
        }
        
        @media screen and (max-width: 480px) {
            .apply-now-introduction-section {
                padding: 40px 15px;
            }
            
            .apply-now-main-heading {
                font-size: 1.7em;
            }
            
            .apply-now-subtitle {
                font-size: 1em;
            }
            
            .requirements-section-heading,
            .form-section-heading,
            .documents-section-heading,
            .contact-section-heading {
                font-size: 1.6em;
            }
            
            .requirement-card,
            .document-card {
                padding: 20px;
            }
            
            .application-form-container {
                padding: 25px 15px;
            }
            
            .form-group-section {
                padding: 20px;
            }
            
            .form-section-title {
                font-size: 1.5em;
            }
            
            .form-submit-button {
                padding: 15px 40px;
                font-size: 1.1em;
            }
        }
        
        @media screen and (max-width: 375px) {
            .apply-now-main-heading {
                font-size: 1.5em;
            }
            
            .requirements-cards-grid,
            .documents-cards-grid {
                gap: 20px;
            }
        }
        
        @media screen and (min-width: 1920px) {
            .apply-now-introduction-container,
            .admission-requirements-container,
            .application-form-container,
            .documents-required-container,
            .contact-information-container {
                max-width: 1400px;
            }
            
            .apply-now-main-heading {
                font-size: 3.5em;
            }
        }
        
        @media screen and (min-width: 2560px) {
            .apply-now-introduction-container,
            .admission-requirements-container,
            .application-form-container,
            .documents-required-container,
            .contact-information-container {
                max-width: 1800px;
            }
            
            .apply-now-main-heading {
                font-size: 4em;
            }
            
            .requirements-section-heading,
            .form-section-heading,
            .documents-section-heading,
            .contact-section-heading {
                font-size: 3em;
            }
        }












        /* Career Positions Section */
        .career-positions-section {
            padding: 40px 0 100px 0;
            background: var(--career-light-gray);
            position: relative;
        }
        
        .career-positions-container {
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .career-section-header {
            text-align: center;
        }
        
        .career-section-title {
            font-size: 3rem;
            font-weight: 700;
            color: var(--career-blue);
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 67, 114, 0.1);
            position: relative;
            display: inline-block;
        }
        
        .career-section-title::after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 4px;
            background: var(--red-primary);
            border-radius: 2px;
            box-shadow: 0 2px 4px rgba(196, 30, 58, 0.3);
        }
        
        .career-section-description {
            font-size: 1.2rem;
            color: var(--career-text);
            max-width: 700px;
            margin: 30px auto 0;
            line-height: 1.9;
        }
        
        /* Career Cards Grid */
        .career-cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 35px;
            margin-top: 50px;
        }
        
        .career-position-card {
            background: var(--career-white);
            border-radius: 20px;
            padding: 40px 35px;
            box-shadow: 0 8px 25px var(--career-shadow);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
            overflow: hidden;
            border: 2px solid transparent;
        }
        
        .career-position-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: var(--career-gradient-1);
            transform: scaleX(0);
            transition: transform 0.4s ease;
            transform-origin: left;
        }
        
        .career-position-card:hover::before {
            transform: scaleX(1);
        }
        
        .career-position-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0, 67, 114, 0.25);
            border-color: var(--career-blue);
        }
        
        .career-card-icon {
            width: 80px;
            height: 80px;
            margin-bottom: 25px;
            background: var(--career-gradient-1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            box-shadow: 0 5px 15px rgba(0, 67, 114, 0.3);
            transition: all 0.3s ease;
        }
        
        .career-position-card:hover .career-card-icon {
            transform: rotate(10deg) scale(1.1);
            box-shadow: 0 8px 20px rgba(0, 67, 114, 0.4);
        }
        
        .career-card-title {
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--career-blue);
            margin-bottom: 15px;
            text-shadow: 1px 1px 2px rgba(0, 67, 114, 0.1);
        }
        
        .career-card-description {
            font-size: 1rem;
            color: var(--career-text);
            line-height: 1.8;
            margin-bottom: 20px;
        }
        
        .career-card-requirements {
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid var(--career-medium-gray);
        }
        
        .career-requirements-title {
            font-weight: 600;
            color: var(--red-primary);
            margin-bottom: 12px;
            font-size: 1.05rem;
        }
        
        .career-requirements-list {
            list-style: none;
            padding: 0;
        }
        
        .career-requirements-list li {
            padding-left: 25px;
            position: relative;
            margin-bottom: 10px;
            font-size: 0.95rem;
            color: var(--career-dark-gray);
        }
        
        .career-requirements-list li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--red-primary);
            font-weight: bold;
            font-size: 1.1rem;
        }
        
        .career-apply-button {
            display: inline-block;
            margin-top: 25px;
            padding: 14px 35px;
            background: var(--red-primary);
            color: var(--white);
            text-decoration: none;
            border-radius: 30px;
            font-weight: 600;
            font-size: 1rem;
            box-shadow: 0 5px 15px rgba(196, 30, 58, 0.3);
            transition: all 0.3s ease;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
        }
        
        .career-apply-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(196, 30, 58, 0.4);
        }
        
        /* Career Benefits Section */
        .career-benefits-section {
            padding: 100px 20px;
            background: var(--career-white);
            position: relative;
        }
        
        .career-benefits-container {
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .career-benefits-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 40px;
            margin-top: 60px;
        }
        
        .career-benefit-card {
            text-align: center;
            padding: 40px 30px;
            background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
            border-radius: 20px;
            box-shadow: 0 5px 20px rgba(0, 67, 114, 0.1);
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }
        
        .career-benefit-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 30px rgba(0, 67, 114, 0.2);
            border-color: var(--red-primary);
        }
        
        .career-benefit-icon {
            width: 90px;
            height: 90px;
            margin: 0 auto 25px;
            background: var(--red-primary);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            box-shadow: 0 5px 15px rgba(196, 30, 58, 0.3);
            transition: all 0.3s ease;
            transform: rotate(-5deg);
        }
        
        .career-benefit-card:hover .career-benefit-icon {
            transform: rotate(0deg) scale(1.1);
        }
        
        .career-benefit-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--career-blue);
            margin-bottom: 15px;
        }
        
        .career-benefit-description {
            font-size: 1rem;
            color: var(--career-text);
            line-height: 1.7;
        }
        
        /* Career Application Process Section */
        .career-process-section {
            padding: 100px 20px;
            background: linear-gradient(135deg, #004372 0%, #c41e3a 100%);
            color: var(--white);
            position: relative;
            overflow: hidden;
        }
        
        .career-process-section::before {
            content: '';
            position: absolute;
            top: -100px;
            right: -100px;
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
            border-radius: 50%;
        }
        
        .career-process-container {
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }
        
        .career-process-steps {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-top: 60px;
        }
        
        .career-process-step {
            text-align: center;
            padding: 35px 25px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            border: 2px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
        }
        
        .career-process-step:hover {
            background: rgba(255, 255, 255, 0.15);
            transform: scale(1.05);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }
        
        .career-step-number {
            width: 70px;
            height: 70px;
            margin: 0 auto 25px;
            background: var(--career-white);
            color: var(--career-blue);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            font-weight: 700;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }
        
        .career-step-title {
            font-size: 1.6rem;
            font-weight: 700;
            margin-bottom: 15px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
        }
        
        .career-step-description {
            font-size: 1rem;
            line-height: 1.7;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
        }
        
        /* Career Contact Section */
        .career-contact-section {
    padding: 60px 0;
    background: var(--career-light-gray);
}
        
        .career-contact-container {
            max-width: 900px;
            margin: 0 auto;
            text-align: center;
        }
        
        .career-contact-card {
            border-radius: 25px;
            margin-top: 40px;
        }
        
        .career-contact-info {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 35px;
            margin-top: 40px;
        }
        
        .career-contact-item {
            padding: 25px;
            background: var(--career-light-gray);
            border-radius: 15px;
            transition: all 0.3s ease;
            text-align: center;
        }
        
        .career-contact-icon {
            font-size: 2.5rem;
            margin-bottom: 15px;
        }
        
        .career-contact-label {
            font-weight: 600;
            margin-bottom: 10px;
            font-size: 1.1rem;
        }
        
        .career-contact-detail {
            font-size: 1rem;
        }
        
        /* Responsive Design */
        
        /* Mini Mobile (320px - 375px) */
        @media screen and (max-width: 375px) {
            .career-intro-title {
                font-size: 2rem;
            }
            
            .career-intro-subtitle {
                font-size: 1rem;
            }
            
            .career-section-title {
                font-size: 2rem;
            }
            
            .career-cards-grid {
                grid-template-columns: 1fr;
                gap: 25px;
            }
            
            .career-position-card {
                padding: 30px 25px;
            }
            
            .career-card-icon {
                width: 60px;
                height: 60px;
                font-size: 2rem;
            }
            
            .career-card-title {
                font-size: 1.4rem;
            }
            
            .career-contact-card {
                padding: 40px 25px;
            }
        }
        
        /* Small Mobile (376px - 480px) */
        @media screen and (min-width: 376px) and (max-width: 480px) {
            .career-intro-title {
                font-size: 2.3rem;
            }
            
            .career-intro-subtitle {
                font-size: 1.1rem;
            }
            
            .career-section-title {
                font-size: 2.2rem;
            }
            
            .career-cards-grid {
                grid-template-columns: 1fr;
            }
        }
        
        /* Tablet (481px - 768px) */
        @media screen and (min-width: 481px) and (max-width: 768px) {
            .career-intro-title {
                font-size: 2.8rem;
            }
            
            .career-section-title {
                font-size: 2.5rem;
            }
            
            .career-cards-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        /* Mini Laptop (769px - 1024px) */
        @media screen and (min-width: 769px) and (max-width: 1024px) {
            .career-intro-title {
                font-size: 3rem;
            }
            
            .career-cards-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        /* Big Desktop (1025px - 1440px) */
        @media screen and (min-width: 1025px) and (max-width: 1440px) {
            .career-cards-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        
        /* Mac / Large Desktop (1441px+) */
        @media screen and (min-width: 1441px) {
            .career-intro-container,
            .career-positions-container,
            .career-benefits-container,
            .career-process-container {
                max-width: 1600px;
            }
            
            .career-cards-grid {
                grid-template-columns: repeat(4, 1fr);
            }
            
            .career-intro-title {
                font-size: 4rem;
            }
            
            .career-section-title {
                font-size: 2.5rem;
            }
        }
        
        /* iPhone Specific (iPhone 12, 13, 14 Pro) */
        @media screen and (min-width: 390px) and (max-width: 428px) {
            .career-intro-section {
                padding: 60px 20px;
            }
            
            .career-positions-section,
            .career-benefits-section,
            .career-process-section,
            .career-contact-section {
                padding: 70px 20px;
            }
        }
        
        /* Browser Compatibility */
        @supports (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px)) {
            .career-process-step {
                -webkit-backdrop-filter: blur(10px);
                backdrop-filter: blur(10px);
            }
        }
        
        /* Animation Keyframes */
        @keyframes career-fade-in {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .career-position-card {
            animation: career-fade-in 0.6s ease-out backwards;
        }
        
        .career-position-card:nth-child(1) { animation-delay: 0.1s; }
        .career-position-card:nth-child(2) { animation-delay: 0.2s; }
        .career-position-card:nth-child(3) { animation-delay: 0.3s; }
        .career-position-card:nth-child(4) { animation-delay: 0.4s; }
        .career-position-card:nth-child(5) { animation-delay: 0.5s; }
        .career-position-card:nth-child(6) { animation-delay: 0.6s; }
        .career-position-card:nth-child(7) { animation-delay: 0.7s; }
        .career-position-card:nth-child(8) { animation-delay: 0.8s; }
        .career-position-card:nth-child(9) { animation-delay: 0.9s; }
        .career-position-card:nth-child(10) { animation-delay: 1s; }





        /* FAQ Cards Grid Section */
        .faq-cards-section {
            margin: 5rem 0;
        }
        
        .faq-cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 30px;
            margin-top: 30px;
        }
        
        /* Individual FAQ Card */
        .faq-card {
            background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 8px 25px rgba(0, 67, 114, 0.15);
            transition: all 0.4s ease;
            cursor: pointer;
            border: 2px solid transparent;
            position: relative;
            overflow: hidden;
        }
        
        .faq-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 5px;
            height: 100%;
            background: linear-gradient(180deg, #004372 0%, #c41e3a 100%);
            transition: width 0.4s ease;
        }
        
        .faq-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 40px rgba(0, 67, 114, 0.25);
            border-color: #004372;
        }
        
        .faq-card:hover::before {
            width: 100%;
            opacity: 0.05;
        }
        
        .faq-card-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #004372 0%, #0066b2 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            box-shadow: 0 5px 15px rgba(0, 67, 114, 0.3);
        }
        
        .faq-card-icon svg {
            width: 30px;
            height: 30px;
            fill: #ffffff;
        }
        
        .faq-card-question {
            font-size: 1.3rem;
            color: #004372;
            font-weight: 700;
            margin-bottom: 15px;
            line-height: 1.4;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        }
        
        .faq-card-answer {
            font-size: 1rem;
            color: #555;
            line-height: 1.8;
            display: none;
            margin-top: 15px;
            padding-top: 15px;
            border-top: 2px solid #e8ecf1;
        }
        
        .faq-card.active .faq-card-answer {
            display: block;
            animation: fadeIn 0.5s ease;
        }
        
        .faq-card-toggle {
            font-size: 1.5rem;
            color: #c41e3a;
            font-weight: bold;
            float: right;
            transition: transform 0.3s ease;
        }
        
        .faq-card.active .faq-card-toggle {
            transform: rotate(45deg);
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* Additional FAQ Section */
        .additional-faq-section {
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            border-radius: 20px;
            padding: 50px 30px;
            box-shadow: 0 10px 30px rgba(0, 67, 114, 0.15);
            margin-top: 50px;
        }
        
        .additional-faq-title {
            font-size: 2.2rem;
            color: #004372;
            text-align: center;
            margin-bottom: 40px;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
        }
        
        .additional-faq-list {
            max-width: 900px;
            margin: 0 auto;
        }
        
        .additional-faq-item {
            background: #ffffff;
            border-radius: 12px;
            padding: 25px;
            margin-bottom: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            border-left: 4px solid #c41e3a;
            transition: all 0.3s ease;
        }
        
        .additional-faq-item:hover {
            box-shadow: 0 8px 25px rgba(196, 30, 58, 0.2);
            transform: translateX(5px);
        }
        
        .additional-faq-question {
            font-size: 1.2rem;
            color: #004372;
            font-weight: 600;
            margin-bottom: 10px;
        }
        
        .additional-faq-answer {
            font-size: 1rem;
            color: #666;
            line-height: 1.7;
        }
        
        /* Contact CTA Section */
        .faq-contact-section {
            text-align: center;
            padding: 60px 30px;
            background: linear-gradient(135deg, #c41e3a 0%, #a01830 100%);
            border-radius: 20px;
            margin-top: 50px;
            box-shadow: 0 10px 40px rgba(196, 30, 58, 0.3);
        }
        
        .faq-contact-title {
            font-size: 2.2rem;
            color: #ffffff;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
        }
        
        .faq-contact-text {
            font-size: 1.2rem;
            color: #f0f0f0;
            margin-bottom: 30px;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .faq-contact-button {
            display: inline-block;
            padding: 15px 40px;
            background: #fff;
            color: #c41e3a;
            text-decoration: none;
            border-radius: 50px;
            font-weight: 700;
            font-size: 1.1rem;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
        }
        
        .faq-contact-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
            background: #004372;
            color: #ffffff;
        }
        
        /* Responsive Design */
        
        /* Mini Mobile (320px - 375px) */
        @media (max-width: 375px) {
            .faq-page-title {
                font-size: 1.8rem;
            }
            
            .faq-page-subtitle {
                font-size: 1rem;
            }
            
            .faq-cards-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .faq-card {
                padding: 20px;
            }
            
            .faq-card-question {
                font-size: 1.1rem;
            }
            
            .additional-faq-title {
                font-size: 1.6rem;
            }
            
            .faq-contact-title {
                font-size: 1.6rem;
            }
        }
        
        /* Small Mobile (376px - 480px) */
        @media (min-width: 376px) and (max-width: 480px) {
            .faq-page-title {
                font-size: 2rem;
            }
            
            .faq-page-subtitle {
                font-size: 1.1rem;
            }
            
            .faq-cards-grid {
                grid-template-columns: 1fr;
                gap: 25px;
            }
        }
        
        /* Tablet (481px - 768px) */
        @media (min-width: 481px) and (max-width: 768px) {
            .faq-page-title {
                font-size: 2.5rem;
            }
            
            .faq-cards-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 25px;
            }
        }
        
        /* Mini Laptop (769px - 1024px) */
        @media (min-width: 769px) and (max-width: 1024px) {
            .faq-cards-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 30px;
            }
        }
        
        /* Big Desktop (1440px+) */
        @media (min-width: 1440px) {
            .faq-page-container {
                max-width: 1600px;
            }
            
            .faq-page-title {
                font-size: 3.5rem;
            }
            
            .faq-cards-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 35px;
            }
        }
        
        /* Mac Display (2560px+) */
        @media (min-width: 2560px) {
            .faq-page-container {
                max-width: 2200px;
            }
            
            .faq-page-title {
                font-size: 4rem;
            }
            
            .faq-cards-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }
        
        /* iPhone Specific */
        @media only screen 
        and (min-device-width: 375px) 
        and (max-device-width: 812px) 
        and (-webkit-min-device-pixel-ratio: 3) {
            .faq-card {
                padding: 25px;
            }
            
            .faq-page-header {
                padding: 30px 15px;
            }
        }







        /* Cards Grid */
        .testimonials-cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 25px;
            max-width: 1500px;
            margin: auto;
        }

        /* Individual Card */
        .testimonial-card-item {
            background: linear-gradient(135deg, #ffffff, #f0f4f8);
            border-radius: 14px;
            padding: 22px;
            box-shadow: 0 8px 20px rgba(0, 67, 114, 0.15);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .testimonial-card-item:hover {
            transform: translateY(-6px);
            box-shadow: 0 14px 30px rgba(196, 30, 58, 0.25);
        }

        /* Profile Image */
        .testimonial-card-image {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            overflow: hidden;
            margin-bottom: 15px;
            border: 3px solid #c41e3a;
        }

        .testimonial-card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Name */
        .testimonial-card-name {
            font-size: 18px;
            font-weight: bold;
            color: #004372;
            margin-bottom: 4px;
        }

        /* Role */
        .testimonial-card-role {
            font-size: 16px;
            color: #c41e3a;
            margin-bottom: 10px;
        }

        /* Message */
        .testimonial-card-text {
            font-size: 15px;
            line-height: 1.6;
            color: #444;
        }

        /* Responsive Tweaks */
        @media (max-width: 480px) {
            .testimonials-page-title {
                font-size: 24px;
            }
            .testimonial-card-text {
                font-size: 13px;
            }
        }

        @media (min-width: 1200px) {
            .testimonials-page-section {
                padding: 70px 0;
            }
        }








/* ==================== 
   Admission form 
   ====================
*/
.admission-block {
    padding: 60px 0;
    background: linear-gradient(to bottom, #f8f9fa, #ffffff);
}
.ad-container{
    max-width:950px;
    margin:auto;
}

.ad-page-header{
    background:#fff;
    border-radius:16px;
    padding:35px;
    margin-bottom:25px;
    border-top:4px solid #1c4f9c;
    border-left:4px solid #d71920;
    box-shadow:0 10px 30px rgba(0,0,0,0.06);
}

.ad-breadcrumb{
    font-size:13px;
    color:#7b879d;
    margin-bottom:15px;
}

.ad-page-header h1{
    font-size:42px;
    margin-bottom:10px;
    font-weight:700;
}

.ad-page-header p{
    color:#7d8799;
    font-size:15px;
}

.ad-form-card{
    background:#fff;
    border-radius:16px;
    overflow:hidden;
    margin-bottom:28px;
    border-top:4px solid #1c4f9c;
    border-left:4px solid #d71920;
    box-shadow:0 10px 30px rgba(0,0,0,0.06);
}

.ad-card-header{
    display:flex;
    align-items:flex-start;
    gap:18px;
    padding:25px 28px;
    border-bottom:1px solid #edf0f5;
}

.ad-step-number{
    width:40px;
    height:40px;
    min-width:40px;
    border-radius:10px;
    background:#163d7c;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    box-shadow:0 5px 15px rgba(22,61,124,0.25);
}

.ad-card-header h2{
    font-size:24px;
    margin-bottom:6px;
}

.ad-card-header p{
    color:#8a94a6;
    font-size:14px;
}

.ad-card-body{
    padding:30px 28px;
}

.ad-form-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
}

.ad-form-group{
    display:flex;
    flex-direction:column;
}

.ad-full{
    grid-column:1 / -1;
}

.ad-form-group label{
    font-size:14px;
    font-weight:600;
    margin-bottom:10px;
    color:#33456b;
}

.ad-required{
    color:#d71920;
}

.ad-form-group input,
.ad-form-group select,
.ad-form-group textarea{
    width:100%;
    height:54px;
    border:1px solid #dde3ef;
    background:#f7f9fc;
    border-radius:10px;
    padding:0 16px;
    font-size:15px;
    color:#233456;
    outline:none;
    transition:0.3s;
}

.ad-form-group textarea{
    height:120px;
    resize:none;
    padding-top:15px;
}

.ad-form-group input:focus,
.ad-form-group select:focus,
.ad-form-group textarea:focus{
    border-color:#1c4f9c;
    background:#fff;
    box-shadow:0 0 0 4px rgba(28,79,156,0.08);
}

.ad-tabs{
    display:flex;
    gap:12px;
    margin-bottom:30px;
}

.ad-tab-btn{
    border:none;
    padding:14px 24px;
    border-radius:30px;
    background:#f1f3f8;
    color:#4d5d7f;
    cursor:pointer;
    font-weight:600;
    transition:0.3s;
}

.ad-tab-btn.ad-active{
    background:#163d7c;
    color:#fff;
    box-shadow:0 8px 20px rgba(22,61,124,0.25);
}

.ad-submit-area{
    text-align:center;
    margin-top:35px;
}

.ad-save-btn{
    border:none;
    background:#163d7c;
    color:#fff;
    height:58px;
    padding:0 45px;
    border-radius:12px;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:0.3s;
    box-shadow:0 10px 25px rgba(22,61,124,0.25);
}

.ad-save-btn:hover{
    transform:translateY(-3px);
}

.ad-save-btn i{
    margin-right:10px;
}

@media(max-width:768px){

    .ad-page-header{
        padding:25px;
    }

    .ad-page-header h1{
        font-size:30px;
    }

    .ad-card-header h2{
        font-size:22px;
    }

    .ad-form-grid{
        grid-template-columns:1fr;
    }

}