:root {
        --primary-blue: #f4f5f1;
        --secondary-blue: #283593;
        --accent-gold: #ffb300;
        --accent-green: #00A85A;
        --light-bg: #f5f7fa;
    }

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

    /* Header Styles */
    .header-top {
        background-color: var(--primary-blue);
        color: white;
        padding: 8px 0;
        font-size: 14px;
    }

    .school-title {
        color: var(--accent-green);
        font-weight: 700;
        font-size: 28px;
        letter-spacing: 1px;
        white-space: nowrap;
    }

    @media (max-width: 640px) {
        .school-title {
            font-size: 14px;
            white-space: wrap;
        }
    }

    .social-icon {
        width: 36px;               /* same box width */
        height: 36px;              /* same box height */
        background: var(--accent-green);
        color: #fff;
        border-radius: 4px;
        display: flex;             /* center icon */
        align-items: center;
        justify-content: center;
        font-size: 18px;           /* same icon size */
        text-decoration: none;
    }

    .social-icon i {
        color: #fff;
    }


    /* Navbar Styles */
    .navbar-custom {
        background-color: var(--accent-green);
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        padding: 0;
    }

    .navbar-nav .nav-link {
        color: #fff;
        font-weight: 500;
        padding: 15px 20px;
        border-right: none !important;
    }

    .navbar-nav .nav-link:hover {
        color: var(--accent-green);
        background-color: #f8f9fa;
    }

    /* Default icon */
    .home-link .home-icon { transition: all 0.3s ease; }
    .about-link .about-icon { transition: all 0.3s ease; }
    .academic-link .academic-icon { transition: all 0.3s ease; }
    .achievement-link .achievement-icon { transition: all 0.3s ease; }
    .admission-link .admission-icon { transition: all 0.3s ease; }
    .online-link .online-icon { transition: all 0.3s ease; }
    .spsc-link .spsc-icon { transition: all 0.3s ease; }
    .contact-link .contact-icon { transition: all 0.3s ease; }
    .notice-link .notice-icon { transition: all 0.3s ease; }

    /* Hover icon */
    .home-link:hover .home-icon { content: url('/assets/images/icons/Asset_1_green.png'); }
    .about-link:hover .about-icon { content: url('/assets/images/icons/Asset_2_green.png'); }
    .academic-link:hover .academic-icon { content: url('/assets/images/icons/Asset_3_green.png'); }
    .achievement-link:hover .achievement-icon { content: url('/assets/images/icons/Asset_10_green.png'); }
    .admission-link:hover .admission-icon { content: url('/assets/images/icons/Asset_4_green.png'); }
    .online-link:hover .online-icon { content: url('/assets/images/icons/Asset_5_green.png'); }
    .spsc-link:hover .spsc-icon { content: url('/assets/images/icons/Asset_6_green.png'); }
    .contact-link:hover .contact-icon { content: url('/assets/images/icons/Asset_7_green.png'); }
    .notice-link:hover .notice-icon { content: url('/assets/images/icons/Asset_8_green.png'); }

    /* ================================
    MULTI LEVEL DROPDOWN MENU
    ================================ */

    /* Remove Bootstrap click behavior */
    .navbar .dropdown-toggle::after {
        display: none;
    }

    /* Hover open main dropdown */
    .navbar .dropdown:hover > .dropdown-menu {
        display: block;
    }

    /* Dropdown base style */
    .dropdown-menu {
        border-radius: 0;
        border: 1px solid #e0e0e0;
        padding: 0;
        min-width: 220px;
    }

    /* Dropdown items */
    .dropdown-menu .dropdown-item {
        padding: 10px 16px;
        font-size: 14px;
        color: #333;
        background-color: #fff;
        white-space: nowrap;
    }

    /* Hover effect */
    .dropdown-menu .dropdown-item:hover {
        background-color: var(--accent-green);
        color: #fff;
    }

    /* ================================
    SUBMENU STYLES
    ================================ */

    .dropdown-submenu {
        position: relative;
    }

    /* Right arrow indicator */
    .dropdown-submenu > a::after {
        content: "▸";
        float: right;
        margin-top: 2px;
    }

    /* Position child menus */
    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-left: 0;
        display: none;
    }

    /* Show submenu on hover */
    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }

    .dropdown-menu {
        z-index: 1050;
    }

    /* Career Button */
    .career-btn,
    .login-btn {
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }


    .career-btn {
        background-color: var(--accent-gold);
        color: var(--accent-green);
        border-radius: 4px;
        padding: 8px 20px;
        font-weight: 600;
    }

    .career-btn:hover {
        background-color: #fff;
        color: #000;
    }

    /* Login Button */
    .login-btn {
        background-color: #fff;
        color: var(--accent-green);
        border-radius: 4px;
        padding: 8px 20px;
        font-weight: 600;
    }

    .login-btn:hover {
        background-color: var(--accent-gold);
        color: var(--accent-green);
    }


    /* Notice Bar Main Wrapper */
    .notice-bar {
        width: 100%;
        background: red;
        display: flex;
        align-items: center;
        overflow: hidden;
        height: 40px;
        font-weight: 600;
    }

    /* FIXED LEFT BOX */
    .notice-fixed {
        background: white;
        color: red;
        padding: 10px 25px;
        font-size: 18px;
        white-space: nowrap;
    }

    /* SCROLL WRAPPER */
    .notice-scroll {
        flex: 1;
        overflow: hidden;
        position: relative;
    }

    /* SCROLLING TEXT */
    .notice-text {
        white-space: nowrap;
        display: inline-block;
        padding-left: 100%;
        animation: scrollText 20s linear infinite;
        color: white;
    }

    /* KEYFRAME ANIMATION */
    @keyframes scrollText {
        0% { transform: translateX(0); }
        100% { transform: translateX(-100%); }
    }

    /* Slider Wrapper */
    .hero-slider {
        position: relative;
        width: 100%;
        height: 80%;
        overflow: hidden;
    }

    /* Each Slide */
    .slides {
        display: flex;
        width: 100%;
        height: 100%;
        transition: transform 0.8s ease-in-out;
    }

    .slide {
        width: 100%;
        flex-shrink: 0;
        height: 100%;
    }

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

    /* Pagination Dots */
    .slider-dots {
        position: absolute;
        bottom: 15px;
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 10px;
    }

    .dot {
        width: 8px;
        height: 8px;
        background: #ffffff80;
        border-radius: 50%;
        cursor: pointer;
        transition: 0.3s ease;
    }

    .dot.active {
        background: #fff;
        width: 10px;
        height: 10px;
    }

    /* ABOUT Sections */
    /* ABOUT TITLE */
    .about-title {
        background: white;
        color: #19a979;
        font-weight: 700;
        padding: 8px 25px;
        display: inline-block;
        border: 1px solid #19a979;
        border-radius: 8px;
        font-size: 24px;
        box-shadow: 0 4px 8px rgba(25, 169, 121, 0.45);
    }

    /* MAIN SECTION */
    .about-section {
        padding: 50px 0;
        background: #fff;
        line-height: 1.7;
    }

    /* LEFT TEXT */
    .about-text {
        font-size: 18px;
        margin-bottom: 18px;
        color: #333;
    }

    /* ADMIT NOW BUTTON */
    .admit-now-btn {
        background: #b7d6db;
        padding: 8px 14px;
        border-radius: 30px;
        color: #333;
        font-weight: 600;
        text-decoration: none;
        display: inline-block;
        margin: 0 auto;
    }

    /* Add to your CSS file */
    .about-full {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
    }

    .about-full.expanded {
        max-height: 2000px; /* Adjust based on your content */
        transition: max-height 0.5s ease-in;
    }

    /* RIGHT BOX */
    .side-box {
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 0 8px rgba(0,0,0,0.2);
        overflow: hidden;
    }

    /* BODY */
    .side-box-body {
        padding: 20px 20px;
    }

    .side-box-body ul {
        padding: 0;
        margin: 0;
        list-style: circle;
        list-style-position: inside;
    }

    .side-box-body li {
        margin-bottom: 12px;
        font-size: 15px;
        color: #333;
        text-align: left;
    }

    .side-box-body a {
        text-decoration: none;
        color: #000;
    }

    .side-box-header {
    text-align: center;
    }

    .side-box-header img {
        display: block;
        margin: 0 auto;
    }

    /* SCROLL AREA */
    .scroll-area {
        max-height: 240px;
        overflow-y: auto;
    }

    /* Custom scrollbar */
    .scroll-area::-webkit-scrollbar {
        width: 6px;
    }

    .scroll-area::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
    }

    /* Feature Sections */
    .feature-card {
        border: none;
        border-radius: 8px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        height: 100%;
        transition: transform 0.3s;
    }

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

    .feature-icon {
        color: var(--accent-green);
        font-size: 40px;
        margin-bottom: 15px;
    }

    /* Campus Tour Section */
    .campus-tour-section {
        padding: 60px 0;
    }

    .campus-tour-btn {
        border: 2px solid #1fa35b;
        color: #1fa35b;
        font-weight: 700;
        font-size: 24px;
        padding: 10px 30px;
        border-radius: 6px;
        background: #fff;
        transition: 0.3s ease;
        text-decoration: none;
    }

    .campus-tour-btn:hover {
        background: #1fa35b;
        color: #fff;
    }

    .campus-tour-box {
        border: 4px solid #1fa35b;
        border-radius: 12px;
        overflow: hidden;
        position: relative;
    }

    .campus-tour-image {
        height: 100%;
    }

    .campus-tour-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .campus-tour-content {
        padding: 40px 40px 20px 40px;
        background: #fff;
    }

    .campus-tour-content p {
        font-size: 16px;
        line-height: 1.7;
        color: #111;
        margin-bottom: 0;
    }

    .content-text {
        flex-grow: 1;
    }

    .read-more {
        display: inline-block;
        background: #fff;
        border: 2px solid #ccc;
        padding: 8px 20px;
        font-size: 15px;
        font-weight: 500;
        border-radius: 30px;
        color: #333;
        text-decoration: none;
        transition: 0.3s ease;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .read-more:hover {
        border-color: #1fa35b;
        color: #1fa35b;
        background: #f8fffb;
    }

    /* Footer */
    .footer {
        background-color: var(--accent-green);
    }

    .footer h4 {
        font-weight: bold;
    }

    .footer .social-icons a:hover {
        opacity: 0.8;
    }

    /* Adjust logo sizes on smaller screens */
    @media (max-width: 767px) {
        .footer img {
            max-height: 60px !important;
        }
        .footer h4 {
            font-size: 1.2rem;
        }
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .navbar-nav .nav-link {
            border-right: none;
            border-bottom: 1px solid #eee;
        }

        .hero-title {
            font-size: 32px;
        }

        .hero-subtitle {
            font-size: 16px;
        }
    }