:root {
            /* Color Palette */
            --primary-blue: #1E88E5;
            --secondary-blue: #64B5F6;
            --dark-blue: #1565C0;
            --light-blue: #E3F2FD;
            
            --primary-red: #D32F2F;
            --secondary-red: #EF5350;
            --dark-red: #B71C1C;
            
            --primary-yellow: #FFB300;
            --secondary-yellow: #FFD54F;
            --dark-yellow: #FF8F00;
            
            --white: #FFFFFF;
            --light-gray: #F5F7FA;
            --medium-gray: #E0E0E0;
            --dark-gray: #424242;
            --text-dark: #212121;
            --text-light: #757575;
            
            --font-heading: 'Playfair Display', serif;
            --font-body: 'Poppins', sans-serif;
            
            --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
            --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
            --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.2);
        }

        body {
            font-family: var(--font-body);
            color: var(--text-dark);
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: var(--font-heading);
        }

        .bg-primary-blue {
            background-color: var(--primary-blue) !important;
        }

        .bg-gradient-blue {
            background: linear-gradient(135deg, var(--primary-blue), var(--dark-blue)) !important;
        }

        .bg-light-blue {
            background-color: var(--light-blue) !important;
        }

        .text-primary-blue {
            color: #163f82 !important;
        }

        .text-primary-red {
            color: var(--primary-red) !important;
        }

        .text-primary-yellow {
            color: var(--primary-yellow) !important;
        }

        /* Preloader */
        .preloader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, var(--light-blue), var(--white));
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.3s ease-out;
        }

        .preloader.hidden {
            opacity: 0;
            pointer-events: none;
        }

        .loader-ring {
            width: 80px;
            height: 80px;
            border: 8px solid var(--light-blue);
            border-top-color: var(--primary-blue);
            border-right-color: var(--primary-red);
            border-bottom-color: var(--primary-yellow);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            position: relative;
        }

        .loader-ring::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
            background-image: url('../images/ashokchakra.png');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            border-radius: 8px;
            z-index: 1;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* Top Bar */
        .top-bar {
            background:#163f82;
            color: var(--white);
            font-size: 0.875rem;
            padding: 0.2rem 0.2rem;
        }

        .marquee-text {
            animation: marquee 20s linear infinite;
        }

        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        /* Header */ 
        .header {
            background: linear-gradient(135deg, var(--light-yellow) 50%, var(--dark-blue) 50%);
            border-bottom: 3px solid var(--primary-blue);
            box-shadow: var(--shadow-sm);
        }

        /* Header Responsive Styles */
        @media (max-width: 991px) and (min-width: 768px) {
            .header .row {
                display: flex;
                flex-wrap: wrap;
            }
            
            .header .col-12 {
                flex: 0 0 auto;
                margin-bottom: 0;
            }
            
            .header .col-12:first-child {
                width: 33.333333%;
            }
            
            .header .col-12:nth-child(2) {
                width: 41.666667%;
            }
            
            .header .col-12:last-child {
                width: 25%;
                margin-top: 0 !important;
            }
            
            .header .col-12:last-child .d-flex {
                align-items: flex-end;
            }
        }

        @media (max-width: 767px) {
            .header .row {
                text-align: center;
            }
            
            .header .col-12 {
                margin-bottom: 1rem;
            }
            
            .header .col-12:last-child {
                margin-bottom: 0;
            }
        }

        @media (max-width: 575px) {
            .header .college-name {
                font-size: 1.1rem !important;
            }
            
            .header .affiliation {
                font-size: 0.65rem;
            }
            
            .header small {
                font-size: 0.75rem;
            }
            
            .header .badge-grade {
                font-size: 0.75rem;
                padding: 0.25rem 0.75rem;
            }
        }

        .affiliation {
            color: var(--primary-red);
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .college-name {
            color: #123c80;
            font-weight: 700;
            text-transform: uppercase;
            text-shadow: 1px 2px #c2c3c4;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }

        .badge-grade {
            background: linear-gradient(135deg, var(--primary-yellow), var(--dark-yellow));
            color: var(--dark-gray);
            border: 2px solid var(--primary-yellow);
        }

        /* Main Navigation - Mega Menu */
        .navbar-main {
            background: linear-gradient(90deg, var(--dark-blue), var(--primary-blue)) !important;
            box-shadow: var(--shadow-md);
            padding: 0;
            font-size: 0.85rem;
        }

        .navbar-main .navbar-nav .nav-link {
            color: var(--white) !important;
            font-weight: 500;
            padding: 0.8rem 0.8rem !important;
            transition: all 0.3s;
            font-size: 0.85rem;
            white-space: nowrap;
            position: relative;
        }

        .navbar-main .navbar-nav .nav-link:hover {
            background: rgba(255, 255, 255, 0.1);
            color: var(--secondary-yellow) !important;
        }

        .navbar-main .navbar-nav .nav-link i {
            margin-right: 6px;
            font-size: 0.9rem;
        }

        /* Mega Menu Dropdown */
        .dropdown-menu.mega-menu {
            width: 650px;
            max-width: 90vw;
            padding: 1.5rem;
            border: none;
            border-radius: 8px;
            box-shadow: var(--shadow-lg);
            background: var(--white);
            margin-top: 0;
            border-top: 3px solid var(--primary-yellow);
        }

        .mega-menu-content {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
        }

        .mega-menu-column h6 {
            color: #163f82;
            font-family: 'Roboto', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
            font-size: 0.9rem;
            font-weight: 600;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid var(--medium-gray);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .mega-menu-column ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .mega-menu-column ul li {
            margin-bottom: 0.4rem;
        }

        .mega-menu-column ul li a {
            color: var(--text-dark);
            text-decoration: none;
            font-size: 0.8rem;
            padding: 0.4rem 0.8rem;
            display: block;
            border-radius: 4px;
            transition: all 0.3s;
            border-left: 3px solid transparent;
        }

        .mega-menu-column ul li a:hover {
            background: var(--light-blue);
            color: var(--primary-blue);
            border-left-color: var(--primary-blue);
            padding-left: 1rem;
        }

        /* Regular Dropdown */
        .dropdown-menu.regular-menu {
            min-width: 220px;
            border: none;
            border-radius: 8px;
            box-shadow: var(--shadow-md);
            background: var(--white);
            padding: 0.5rem 0;
            font-size: 0.85rem;
        }

        .dropdown-menu.regular-menu .dropdown-item {
            padding: 0.6rem 1.2rem;
            font-size: 0.85rem;
            color: var(--text-dark);
            border-left: 3px solid transparent;
            transition: all 0.3s;
        }

        .dropdown-menu.regular-menu .dropdown-item:hover {
            background: var(--light-blue);
            color: var(--primary-blue);
            border-left-color: var(--primary-blue);
            padding-left: 1.4rem;
        }

        /* Mobile Menu Adjustments */
        @media (max-width: 991px) {
            .navbar-main .navbar-nav {
                background: linear-gradient(135deg, var(--dark-blue), var(--primary-blue));
                padding: 1rem;
                border-radius: 8px;
                margin-top: 1rem;
            }
            
            .navbar-main .navbar-nav .nav-link {
                padding: 0.6rem 1rem !important;
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            }
            
            .dropdown-menu.mega-menu,
            .dropdown-menu.regular-menu {
                position: static !important;
                float: none !important;
                width: 100% !important;
                margin: 0.5rem 0 0 0;
                box-shadow: none;
                border: 1px solid rgba(255, 255, 255, 0.1);
                background: rgba(255, 255, 255, 0.05);
            }
            
            .mega-menu-content {
                grid-template-columns: 1fr;
                gap: 1rem;
            }
            
            .mega-menu-column h6 {
                color: var(--secondary-yellow);
                border-bottom-color: rgba(255, 255, 255, 0.1);
            }
            
            .mega-menu-column ul li a,
            .dropdown-menu.regular-menu .dropdown-item {
                color: rgba(255, 255, 255, 0.9);
                border-left-color: transparent;
            }
            
            .mega-menu-column ul li a:hover,
            .dropdown-menu.regular-menu .dropdown-item:hover {
                background: rgba(255, 255, 255, 0.1);
                color: var(--white);
            }
            
            .dropdown-toggle::after {
                float: right;
                margin-top: 0.5rem;
            }
        }

        /* Mega Menu Dropdown Styles */
        .dropdown-menu {
            display: none;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.3s ease;
            margin: 0;
            padding: 0;
        }

        .dropdown.show .dropdown-menu {
            display: block;
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        /* Desktop hover effects */
        @media (min-width: 992px) {
            .dropdown:hover .dropdown-menu {
                display: block;
                opacity: 1;
                visibility: visible;
                transform: translateY(0);
            }
        }

        /* Mobile dropdown adjustments */
        @media (max-width: 991px) {
            .dropdown-menu {
                position: static !important;
                float: none !important;
                width: 100% !important;
                margin: 0.5rem 0 0 0;
                box-shadow: none;
                border: 1px solid rgba(255, 255, 255, 0.1);
                background: rgba(255, 255, 255, 0.05);
                border-radius: 0;
            }
            
            .dropdown-menu.show {
                display: block;
            }
        }

        /* Ensure dropdowns are visible */
        .dropdown-menu.mega-menu,
        .dropdown-menu.regular-menu {
            display: block;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.3s ease;
            z-index: 1000;
        }

        .dropdown.show .dropdown-menu.mega-menu,
        .dropdown.show .dropdown-menu.regular-menu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        /* Search Form in Navbar */
        .navbar-search .form-control {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: var(--white);
            font-size: 0.85rem;
            padding: 0.4rem 1rem;
            border-radius: 20px;
            min-width: 200px;
        }

        .navbar-search .form-control::placeholder {
            color: rgba(255, 255, 255, 0.7);
        }

        .navbar-search .btn {
            background: transparent;
            border: none;
            color: var(--white);
            padding: 0.4rem 0.8rem;
            font-size: 0.9rem;
        }

        /* Language Selector */
        .language-selector .btn {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: var(--white);
            font-size: 0.8rem;
            padding: 0.3rem 0.8rem;
            border-radius: 4px;
        }

        .language-selector .dropdown-menu {
            min-width: 150px;
            font-size: 0.8rem;
        }

        /* Hero Carousel */
        .carousel-item {
            height: 600px;
        }

        .carousel-item img {
            object-fit: cover;
            height: 100%;
        }

        .carousel-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(30, 136, 229, 0.9) 0%, rgba(211, 47, 47, 0.7) 100%);
        }

        .carousel-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: var(--white);
            width: 90%;
            max-width: 800px;
            padding: 3rem;
            background: rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(1px);
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .carousel-content h2 {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }

        .carousel-content p {
            font-size: 1.25rem;
            margin-bottom: 2rem;
        }

        .slide-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
        }

        /* Carousel Controls */
        .carousel-control-prev,
        .carousel-control-next {
            width: 5%;
        }

        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            background-color: rgba(0, 0, 0, 0.5);
            background-size: 50% 50%;
            border-radius: 50%;
            width: 50px;
            height: 50px;
        }

        .carousel-indicators button {
            background-color: rgba(255, 255, 255, 0.5);
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin: 0 5px;
        }

        .carousel-indicators button.active {
            background-color: #ffb300;
        }

        /* Buttons */
        .btn-primary {
            background: linear-gradient(135deg, var(--primary-yellow), var(--dark-yellow));
            border: none;
            color: var(--dark-gray);
            font-weight: 600;
            padding: 12px 32px;
            border-radius: 30px;
            box-shadow: var(--shadow-md);
            transition: all 0.3s;
        }

        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-lg);
            background: linear-gradient(135deg, var(--dark-yellow), var(--primary-yellow));
        }

        .btn-outline-light {
            border: 2px solid var(--white);
            background: transparent;
            color: var(--white);
            padding: 12px 32px;
            border-radius: 30px;
            font-weight: 600;
            transition: all 0.3s;
        }

        .btn-outline-light:hover {
            background: var(--white);
            color: var(--primary-blue);
            transform: translateY(-3px);
        }

        /* Stats Section */
        .stats-section {
            background: linear-gradient(135deg, var(--light-blue), var(--white));
            padding: 4rem 0;
            border-top: 3px solid var(--primary-blue);
            border-bottom: 3px solid var(--primary-blue);
        }

        .stat-card {
            text-align: center;
            padding: 2rem;
            background: var(--white);
            border-radius: 16px;
            box-shadow: var(--shadow-md);
            transition: all 0.3s;
            border-top: 4px solid var(--primary-blue);
        }

        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-lg);
        }

        .stat-icon {
            font-size: 2.5rem;
            color: var(--primary-blue);
            margin-bottom: 1rem;
        }

        .stat-number {
            font-size: 3rem;
            font-weight: 700;
            color: var(--primary-red);
            margin-bottom: 0.5rem;
        }

        /* Content Boxes */
        .content-box {
            background: var(--white);
            border-radius: 16px;
            box-shadow: var(--shadow-md);
            overflow: hidden;
            margin-bottom: 2rem;
            border: 1px solid var(--medium-gray);
        }

        .box-header {
            background: linear-gradient(90deg, var(--primary-blue), var(--dark-blue));
            color: var(--white);
            padding: 1rem 1.5rem;
        }

        /* Programs */
        .program-card {
            background: var(--light-blue);
            padding: 1.5rem;
            border-radius: 8px;
            border-left: 4px solid var(--primary-yellow);
            transition: all 0.3s;
            height: 100%;
        }

        .program-card:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-md);
        }

        .program-card .stat-icon {
            font-size: 2rem;
            color: var(--primary-blue);
            margin-bottom: 0.5rem;
        }

        /* News Cards */
        .news-card {
            background: var(--white);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            transition: all 0.3s;
            height: 100%;
        }

        .news-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-md);
        }

        .news-date {
            position: absolute;
            bottom: 10px;
            left: 10px;
            background: rgba(30, 136, 229, 0.9);
            color: var(--white);
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.8rem;
        }

        /* Notice Board */
        .notice-item {
            padding: 12px 0;
            border-bottom: 1px solid var(--medium-gray);
        }

        .notice-badge {
            background: var(--primary-red);
            color: var(--white);
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
        }

        /* Quick Links */
        .quick-link-item {
            background: var(--white);
            padding: 1rem;
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: var(--text-dark);
            transition: all 0.3s;
            border-bottom: 2px solid transparent;
        }

        .quick-link-item:hover {
            background: var(--light-blue);
            color: var(--primary-blue);
            border-bottom-color: var(--primary-blue);
        }

        /* Events */
        .event-date {
            background: var(--light-blue);
            padding: 8px;
            border-radius: 8px;
            text-align: center;
            min-width: 60px;
        }

        .event-day {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-red);
            line-height: 1;
        }

        /* Facilities */
        .facility-card {
            background: var(--white);
            padding: 2rem;
            border-radius: 16px;
            text-align: center;
            box-shadow: var(--shadow-md);
            transition: all 0.3s;
            border-top: 4px solid var(--primary-blue);
            height: 100%;
        }

        .facility-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-lg);
            border-top-color: var(--primary-yellow);
        }

        .facility-icon {
            font-size: 3rem;
            color: var(--primary-blue);
            margin-bottom: 1rem;
            height: 80px;
            width: 80px;
            background: var(--light-blue);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
        }

        /* Gallery */
        .gallery-item {
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            height: 250px;
        }

        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }

        .gallery-item:hover img {
            transform: scale(1.1);
        }

        .gallery-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(30, 136, 229, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .gallery-item:hover .gallery-overlay {
            opacity: 1;
        }

        /* Footer */
        .footer {
            background: linear-gradient(135deg, var(--dark-blue), #0d47a1);
            color: var(--white);
            margin-top: 4rem;
        }

        .footer h4 {
            color: var(--secondary-yellow);
            position: relative;
            padding-bottom: 8px;
            margin-bottom: 1.5rem;
        }

        .footer h4::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 2px;
            background: var(--primary-red);
        }

        .footer a {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            transition: color 0.3s;
        }

        .footer a:hover {
            color: var(--secondary-yellow);
        }

        .footer-social a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            margin-right: 8px;
            transition: all 0.3s;
        }

        .footer-social a:hover {
            background: var(--primary-red);
            transform: translateY(-3px);
        }

        /* Back to Top */
        .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, var(--primary-blue), var(--dark-blue));
            color: var(--white);
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            box-shadow: var(--shadow-md);
            z-index: 100;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s;
        }

        .back-to-top.visible {
            opacity: 1;
            visibility: visible;
        }

        .back-to-top:hover {
            background: linear-gradient(135deg, var(--primary-red), var(--dark-red));
            transform: translateY(-3px);
            box-shadow: var(--shadow-lg);
        }

        /* Responsive Adjustments */
        @media (max-width: 768px) {
            .carousel-item {
                height: 400px;
            }
            
            .carousel-content {
                padding: 1.5rem;
            }

            .carousel-content h2 {
                font-size: 2rem;
            }
            
            .stat-card {
                margin-bottom: 1rem;
            }
            
            .navbar-nav .nav-link {
                padding: 0.75rem 1rem !important;
            }
        }

        /* Custom container override */
        .custom-container {
            max-width: 1300px;
            padding-left: 20px;
            padding-right: 20px;
            margin-top: 8px;
            border-radius: 12px;
        }

        @media (max-width: 768px) {
            .custom-container {
                padding-left: 15px;
                padding-right: 15px;
            }
        }
  
/* ==============================  
ABOUT PAGE SPECIFIC STYLES