/* ===== Global Styles & Variables ===== */
        :root {
            /* New Professional Theme Colors */
            --primary-color: #2A3B4D;       /* Dark Slate Blue */
            --primary-color-rgb: 42, 59, 77;
            --secondary-color: #00C9A7;     /* Bright Teal */
            --secondary-color-rgb: 0, 201, 167;
            
            --accent-color-1: #3DDC97;     /* Modern Green (Success/Verification) */
            --accent-color-1-rgb: 61, 220, 151;
            --accent-color-2: #FF6B6B;     /* Warm Coral (Events/Highlight) */
            --accent-color-2-rgb: 255, 107, 107;
            --accent-color-3: #60A5FA;     /* Light Cool Blue (Info/Links) */
            --accent-color-3-rgb: 96, 165, 250;
            --accent-color-4: #FFD166;     /* Golden Yellow (Alternate CTAs) */
            --accent-color-4-rgb: 255, 209, 102;
            
            --dark-color: #1F2933;          /* Very Dark Gray (Text/Deep Backgrounds) */
            --dark-color-rgb: 31, 41, 51; 
            --medium-dark-color: #323F4B;   /* Slightly Lighter Dark Tones */
            --medium-dark-color-rgb: 50, 63, 75;
            
            --topbar-bg-rgb: 31, 41, 51; 
            --topbar-text-color: rgba(255,255,255,0.8);
            --topbar-link-hover-color: var(--secondary-color); 

            --navbar-bg-rgb: 255, 255, 255; 
            --navbar-link-color: var(--dark-color); 
            --navbar-link-hover-color: var(--primary-color); 
            --navbar-link-active-color: var(--primary-color);
            --navbar-border-color: #E5E9F2; 

            --light-color: #F5F7FA;         
            --white-color: #FFFFFF;
            --white-color-rgb: 255, 255, 255; 
            --gray-color: #7B8794;          
            --light-gray-alt: #EFF2F7;      

            --heading-font: 'Montserrat', sans-serif;
            --body-font: 'Open Sans', sans-serif;
            --border-radius: 0.5rem; 
            --border-radius-sm: 0.3rem; 
			--border-radius-lg: 0.8rem; 
            --transition-speed: 0.3s;
            --animation-duration: 0.8s; 
            --shadow-soft: 0 4px 12px rgba(0,0,0,0.06);
            --shadow-medium: 0 6px 18px rgba(0,0,0,0.08);
            --shadow-strong: 0 10px 30px rgba(0,0,0,0.1);
        }

        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            scroll-behavior: smooth; /* For smooth scroll to top */
            /* overflow-x: hidden; */ 
        }
		
		
    .page-loader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #0f172a;
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: opacity 0.7s ease-out, visibility 0.7s;
        visibility: visible;
        opacity: 1;
    }

    .scanner {
        width: 200px;
        height: 200px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .scanner::before, .scanner::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        border: 2px solid rgba(255, 255, 255, 0.1);
    }
    .scanner::before {
        border-right: none;
        border-left: none;
    }
     .scanner::after {
        border-top: none;
        border-bottom: none;
    }
    
    .scanner-logo {
        width: 120px;
        height: 120px;
        object-fit: cover;
        opacity: 0.5;
        animation: pulse 2.5s infinite;
    }

    .scanner .scan-line {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: var(--primary-color);
        border-radius: 4px;
        animation: scan 3s infinite linear;
        box-shadow: 0 0 15px var(--primary-color), 0 0 25px var(--primary-color);
    }
    
    .scanner-corners span {
        position: absolute;
        width: 30px;
        height: 30px;
        border: 3px solid var(--secondary-color);
        animation: corner-pulse 1.5s infinite;
    }
    .scanner-corners .top-left { top: -2px; left: -2px; border-right: none; border-bottom: none; }
    .scanner-corners .top-right { top: -2px; right: -2px; border-left: none; border-bottom: none; }
    .scanner-corners .bottom-left { bottom: -2px; left: -2px; border-right: none; border-top: none; }
    .scanner-corners .bottom-right { bottom: -2px; right: -2px; border-left: none; border-top: none; }


    @keyframes scan {
        0% { top: 0%; }
        50% { top: calc(100% - 3px); }
        100% { top: 0%; }
    }
    
    @keyframes pulse {
        0%, 100% { opacity: 0.4; transform: scale(0.98); }
        50% { opacity: 0.8; transform: scale(1); }
    }
    
    @keyframes corner-pulse {
        0%, 100% { border-color: var(--primary-color); }
        50% { border-color: var(--secondary-color); }
    }


    .page-loader.loaded {
        opacity: 0;
        visibility: hidden;
    }


        body {
            font-family: var(--body-font);
            background-color: var(--light-color); 
            color: var(--dark-color);
            line-height: 1.7;
        }

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

        .section-padding {
            padding: 80px 0; 
        }
        .section-padding-fluid { 
            padding-top: 80px;
            padding-bottom: 80px;
        }
      

        /* ===== New Custom Section Header Styling ===== */
        .custom-section-header {
            text-align: center;
            margin-bottom: 50px; 
        }
        .custom-section-badge,
        .custom-main-title,
        .custom-section-subtitle,
        .custom-divider-premium {
            opacity: 0; 
            transition-property: opacity, transform;
            transition-duration: var(--animation-duration);
            transition-timing-function: ease-out;
        }

        .custom-section-badge {
            display: inline-block;
            background-color: rgba(var(--primary-color-rgb), 0.1); 
            color: var(--primary-color);
            padding: 7px 20px; 
            border-radius: 50px;
            font-size: 0.85rem; 
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.7px; 
            margin-bottom: 12px; 
            transform: translateY(25px); 
        }
        .custom-section-header.in-view .custom-section-badge {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 0.15s;
        }

        .custom-main-title {
            font-size: 2.5rem; 
            font-weight: 800;
            color: var(--dark-color);
            margin-bottom: 12px; 
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transform: translateY(25px); 
        }
        .custom-section-header.in-view .custom-main-title {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 0.3s;
        }
        .custom-main-title .highlight-text { 
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;
        }

        .custom-section-subtitle {
            font-size: 1.1rem; 
            color: var(--gray-color);
            max-width: 650px; 
            margin: 0 auto 18px auto; 
            line-height: 1.7;
            transform: translateY(25px); 
        }
        .custom-section-header.in-view .custom-section-subtitle {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 0.45s;
        }

        .custom-divider-premium {
            width: 70px; 
            height: 3.5px;
            background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            margin: 0 auto; 
            border-radius: 2px;
            transform: scaleX(0); 
            transform-origin: center;
        }
        .custom-section-header.in-view .custom-divider-premium {
            opacity: 1;
            transform: scaleX(1);
            transition-delay: 0.6s;
        }

        /* ===== New Professional Button Theme ===== */
        .btn-pro-theme {
            display: inline-block;
            padding: 10px 25px;
            border-radius: 50px;
            font-family: var(--heading-font);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.75px;
            text-align: center;
            text-decoration: none;
            transition: all var(--transition-speed) ease-in-out;
            border: 2px solid transparent; 
            cursor: pointer;
            line-height: 1.5;
            box-shadow: 0 3px 8px rgba(0,0,0,0.1);
        }
        .btn-pro-theme:hover {
            transform: translateY(-2px); 
            box-shadow: 0 4px 15px rgba(0,0,0,0.15); 
        }
        .btn-pro-theme .btn-arrow {
            margin-left: 8px;
            transition: transform var(--transition-speed) ease;
            display: inline-block;
        }
        .btn-pro-theme:hover .btn-arrow {
            transform: translateX(5px);
        }

        .btn-pro-theme-gradient { /* Primary action button: Teal to Light Blue */
            background: linear-gradient(90deg, var(--secondary-color), var(--accent-color-3));
            color: var(--white-color);
        }
        .btn-pro-theme-gradient:hover {
            background: linear-gradient(90deg, var(--accent-color-3), var(--secondary-color));
            box-shadow: 0 4px 15px rgba(var(--secondary-color-rgb), 0.3);
        }

        .btn-pro-theme-outline-primary {
            background-color: transparent;
            color: var(--primary-color);
            border-color: var(--primary-color);
        }
        .btn-pro-theme-outline-primary:hover {
            background-color: var(--primary-color);
            color: var(--white-color);
        }
        
        .btn-pro-theme-outline-secondary { /* For secondary actions or on dark backgrounds */
            background-color: transparent;
            color: var(--secondary-color);
            border-color: var(--secondary-color);
        }
        .btn-pro-theme-outline-secondary:hover {
            background-color: var(--secondary-color);
            color: var(--dark-color); 
        }
        
        .btn-pro-theme.btn-sm {
            padding: 8px 20px;
            font-size: 0.78rem;
            letter-spacing: 0.5px;
        }
        
        .btn-pro-theme-accent-1 { /* Green for verification */
            background: var(--accent-color-1);
            color: var(--white-color);
            border-color: var(--accent-color-1);
        }
         .btn-pro-theme-accent-1:hover {
            background: var(--white-color);
            color: var(--accent-color-1);
            border-color: var(--accent-color-1);
        }


        /* ===== Topbar Revamped ===== */
        #topbar {
            background-color: rgba(var(--topbar-bg-rgb), 0.95); 
            backdrop-filter: blur(8px); 
            font-size: 1rem; 
            transition: all var(--transition-speed) ease;
            position: relative; 
            z-index: 1031; 
            padding: 0.6rem 0; 
            border-bottom: 1px solid rgba(255,255,255,0.12); 
        }
        #topbar .contact-info a {
            color: var(--topbar-text-color); 
            transition: color var(--transition-speed) ease;
            text-decoration: none;
            margin-right: 1.5rem; 
        }
        #topbar .contact-info a:last-child {
            margin-right: 0;
        }
        #topbar .contact-info a:hover {
            color: var(--topbar-link-hover-color); /* Teal */
        }
        #topbar .contact-info i {
            font-size: 1rem; 
            margin-right: 0.5rem; 
            color: var(--secondary-color); /* Teal icons */
        }
        #topbar .social-links-wrapper { 
            display: flex;
            align-items: center;
            justify-content: flex-end; 
        }
        #topbar .social-links-wrapper .social-links-label {
            color: var(--topbar-text-color);
            margin-right: 0.75rem;
            font-size: 0.8rem;
        }
        #topbar .social-links-wrapper a {
            display: inline-flex; 
            align-items: center;
            justify-content: center;
            width: 32px; 
            height: 32px;
            border-radius: 50%;
            background-color: rgba(255,255,255,0.1); 
            color: var(--white-color);
            margin-left: 10px; 
            transition: all var(--transition-speed) ease;
            font-size: 0.95rem; 
            border: 1px solid transparent; 
        }
        #topbar .social-links-wrapper a:hover {
            background-color: var(--secondary-color); /* Teal background */
            color: var(--dark-color); 
            transform: translateY(-2px) scale(1.1);
            border-color: var(--secondary-color);
        }

        #topbar .btn-topbar-login { 
            font-weight: 600; 
            text-transform: uppercase;
            letter-spacing: 0.5px;
            /* Using btn-pro-theme-outline-secondary for teal outline */
        }
        #topbar .btn-topbar-login i {
            margin-left: 0.4rem;
        }


        /* ===== Navigation Bar Revamped ===== */
        .navbar {
            padding: 0.9rem 0; 
            background-color: rgba(var(--navbar-bg-rgb), 0.95); 
            backdrop-filter: blur(12px); 
            box-shadow: 0 5px 25px rgba(var(--dark-color), 0.08); 
            transition: padding var(--transition-speed) ease, top var(--transition-speed) ease, box-shadow var(--transition-speed) ease, background-color var(--transition-speed) ease;
            position: relative; 
            top: 0; 
            left: 0;
            right: 0;
            z-index: 1030;
            border-bottom: 1px solid var(--navbar-border-color); 
        }
        .navbar-sticky { 
            position: fixed !important;
            top: 0 !important;
            width: 100%;
            padding: 0.65rem 0 !important; 
            background-color: rgba(var(--navbar-bg-rgb), 0.98) !important; 
            box-shadow: 0 8px 25px rgba(var(--dark-color), 0.12) !important; 
        }

        .navbar-brand img {
            max-height: 60px; 
            transition: opacity var(--transition-speed) ease;
        }
        .navbar-brand:hover img {
            opacity: 0.85;
        }
        .navbar-nav .nav-item {
            margin: 0 0.7rem; 
        }
        .navbar-nav .nav-link {
            font-family: var(--heading-font);
            font-weight: 600; 
            font-size: 0.88rem; 
            color: var(--navbar-link-color);
            padding: 10px 0px !important; 
            border-radius: var(--border-radius-sm);
            transition: color var(--transition-speed) ease, background-color var(--transition-speed) ease; /* Added background-color transition */
            position: relative;
            text-transform: uppercase; 
            letter-spacing: 0.8px; 
            display: flex; 
            align-items: center; 
        }
        .navbar-nav .nav-link > .underline-indicator { 
            content: '';
            position: absolute;
            width: 0;
            height: 3px; 
            bottom: -5px; 
            left: 50%;
            transform: translateX(-50%);
            background: var(--primary-color); 
            border-radius: 2px;
            transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); 
        }
        .navbar-nav .nav-link:hover > .underline-indicator,
        .navbar-nav .nav-link.active > .underline-indicator,
        .navbar-nav .nav-item.dropdown:hover .nav-link > .underline-indicator { 
            width: 100%; 
        }
        .navbar-nav .nav-link:hover,
        .navbar-nav .nav-link.active,
        .navbar-nav .nav-item.dropdown:hover .nav-link { 
            color: var(--navbar-link-hover-color); 
            background-color: transparent; 
        }

        .navbar-nav .dropdown-toggle::after { 
            display: none;
        }
        .navbar-nav .dropdown-icon {
            margin-left: 0.35em; 
            font-size: 0.75em; 
            transition: transform var(--transition-speed) cubic-bezier(0.25, 0.8, 0.25, 1);
            line-height: 1; 
            color: var(--gray-color); 
        }
        .navbar-nav .nav-link:hover .dropdown-icon,
        .navbar-nav .nav-link.active .dropdown-icon {
            color: var(--navbar-link-hover-color); 
        }
        .navbar-nav .nav-item.dropdown:hover .dropdown-toggle .dropdown-icon,
        .navbar-nav .nav-item.dropdown .dropdown-toggle[aria-expanded="true"] .dropdown-icon { 
            transform: rotate(180deg);
        }

        .dropdown-menu {
            border-radius: var(--border-radius); 
            border: none; 
            box-shadow: var(--shadow-strong); 
            padding: 0.6rem 0; 
            margin-top: 0.75rem !important; 
            animation: fadeInDropdown 0.25s ease-out;
            min-width: 240px; 
        }
        .dropdown-item {
            font-family: var(--body-font);
            font-size: 0.9rem; 
            padding: 0.7rem 1.75rem; 
            color: var(--dark-color);
            transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease, transform var(--transition-speed) ease;
            font-weight: 500;
        }
        .dropdown-item i {
            margin-right: 0.9rem; 
            color: var(--primary-color);
            font-size: 1.05rem;
            width: 20px; 
            text-align: center;
            transition: color var(--transition-speed) ease;
        }
        .dropdown-item:hover, .dropdown-item:focus {
            background-color: var(--primary-color);
            color: var(--white-color);
            transform: translateX(4px); 
        }
        .dropdown-item:hover i, .dropdown-item:focus i {
            color: var(--white-color);
        }
        .dropdown-divider {
            border-top: 1px solid var(--light-color);
            margin: 0.4rem 0;
        }

        .navbar .btn-navbar-login { 
            font-size: 0.8rem;
            padding: 0.7rem 1.8rem; 
            margin-left: 25px; 
            font-weight: 700; 
        }
        .navbar-toggler {
            border: 1px solid var(--navbar-border-color); 
            padding: 0.4rem 0.7rem; 
            border-radius: var(--border-radius-sm);
            transition: background-color 0.2s ease;
        }
        .navbar-toggler:hover {
            background-color: rgba(var(--dark-color),0.03);
        }
        .navbar-toggler:focus {
            box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25);
        }
        .navbar-toggler-icon {
           background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgb(42,59,77)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); 
        }

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


        /* ===== Home Slider (Hero Section) ===== */
        #home-slider {
             padding-top: 0; 
        }
        #home-slider .carousel-item {
            height: 100vh;
            min-height: 600px;
            background-size: cover;
            background-position: center center;
            position: relative;
        }
        #home-slider .carousel-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(rgba(var(--dark-color-rgb),0.5), rgba(var(--dark-color-rgb),0.7)); 
        }
        #home-slider .carousel-caption {
            bottom: 50%;
            left: 50%;
            transform: translate(-50%, 50%);
            text-align: center;
            width: 85%; 
            max-width: 850px;
            padding: 2.5rem; 
            background: rgba(var(--dark-color-rgb), 0.35);
            border-radius: var(--border-radius);
            backdrop-filter: blur(6px);
        }
        #home-slider .carousel-caption h5 {
            font-size: clamp(2.2rem, 5.5vw, 3.8rem);
            font-weight: 800;
            color: var(--white-color);
            margin-bottom: 1.2rem;
            text-shadow: 2px 2px 5px rgba(0,0,0,0.6);
            animation: slideInUp 1s ease-out;
        }
        #home-slider .carousel-caption p {
            font-size: clamp(1.05rem, 2.6vw, 1.3rem);
            color: rgba(255,255,255,0.95);
            margin-bottom: 1.8rem;
            animation: slideInUp 1s ease-out 0.3s;
            animation-fill-mode: backwards;
        }
        #home-slider .carousel-caption .btn-pro-theme { 
             animation: slideInUp 1s ease-out 0.6s;
             animation-fill-mode: backwards;
             /* Uses btn-pro-theme-gradient: Teal to Light Blue */
        }
        .carousel-indicators [data-bs-target] {
            width: 10px; 
            height: 10px;
            border-radius: 50%;
            background-color: rgba(255,255,255,0.4);
            border: 1px solid rgba(255,255,255,0.6);
            margin: 0 6px;
            transition: transform 0.2s ease, background-color 0.2s ease;
        }
        .carousel-indicators .active {
            background-color: var(--white-color);
            transform: scale(1.2); 
        }
        .carousel-control-prev, .carousel-control-next { /* Styling for the actual buttons */
            width: 3rem;
            height: 3rem;
            background-color: rgba(var(--dark-color-rgb), 0.3);
            border-radius: 50%;
            top: 50%;
            transform: translateY(-50%);
            transition: background-color var(--transition-speed) ease;
        }
        .carousel-control-prev:hover, .carousel-control-next:hover {
            background-color: rgba(var(--dark-color-rgb), 0.5);
        }
        .carousel-control-prev-icon, .carousel-control-next-icon {
            width: 1.5rem; /* Adjust icon size within the button */
            height: 1.5rem;
            background-size: 100%, 100%;
        }


        /* ===== Quick Links Section ===== */
        #quick-links-ribbon {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--medium-dark-color) 100%); 
            padding: 30px 0; 
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            position: relative; 
            z-index: 1029; 
            margin-top: 0; 
        }
        .ribbon-content-wrapper {
            display: flex;
            flex-wrap: wrap; 
            justify-content: space-between; 
            align-items: flex-start; 
        }
        .quick-links-area {
            display: flex;
            flex-wrap: wrap; 
            gap: 10px; 
            align-items: stretch; 
        }
        .login-area {
            display: flex;
            flex-direction: column; 
            align-items: center; 
            gap: 12px; 
            padding: 20px;
            background-color: rgba(var(--dark-color-rgb), 0.7); 
            backdrop-filter: blur(5px);
            border-radius: var(--border-radius);
            margin-top: 20px; 
        }
        .login-area h5 {
            color: var(--secondary-color); /* Teal */
            font-size: 1.1rem; 
            margin-bottom: 15px; 
            text-transform: uppercase;
            letter-spacing: 0.6px;
            font-weight: 700;
            border-bottom: 1px solid var(--secondary-color);
            padding-bottom: 8px;
            display: inline-block;
        }
        .login-area .login-button-group {
            display: flex;
            flex-direction: row; 
            flex-wrap: wrap; 
            gap: 10px; 
            justify-content: center; 
        }
        .login-area .btn-pro-theme {
            text-align: center;
        }

         @media (min-width: 992px) { 
            .login-area {
                align-items: flex-start; 
                padding-left: 30px; 
                border-left: 1px solid rgba(255,255,255,0.15); 
                margin-top: 0;
                padding-top: 0; 
                border-top: none;
            }
        }


        .quick-link-item-ribbon {
            color: var(--white-color);
            text-decoration: none;
            padding: 18px 15px; 
            display: flex;
            flex-direction: column; 
            align-items: center;
            text-align: center;
            border-radius: var(--border-radius); 
            transition: background-color var(--transition-speed) ease, transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
            background-color: rgba(255,255,255,0.05); 
            border: 1px solid rgba(255,255,255,0.1); 
            flex: 1; 
        }
        .quick-link-item-ribbon:hover {
            background-color: rgba(var(--secondary-color-rgb), 0.2); 
            transform: translateY(-4px) scale(1.03);
            color: var(--secondary-color);
            box-shadow: 0 5px 12px rgba(0,0,0,0.15);
        }
        .quick-link-icon-ribbon {
            font-size: 2.2rem; 
            margin-bottom: 10px;
            color: var(--secondary-color); /* Teal */
            transition: color var(--transition-speed) ease, transform var(--transition-speed) ease;
        }
        .quick-link-item-ribbon:hover .quick-link-icon-ribbon {
            color: var(--secondary-color); 
            transform: scale(1.08); 
        }
        .quick-link-item-ribbon span {
            font-size: 0.8rem; 
            font-weight: 500; 
            text-transform: uppercase;
            letter-spacing: 0.4px;
        }

        /* ===== Top Performance Section ===== */
		
        #top-performance {
            background-color: var(--light-color); 
            padding: 50px 0; 
        }
        .performance-card {
            background-color: rgba(var(--white-color), 0.9); 
            backdrop-filter: blur(6px); 
            -webkit-backdrop-filter: blur(6px);
            padding: 2rem; 
            border-radius: var(--border-radius);
            transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease, border-color var(--transition-speed) ease;
            border: 2px dashed rgba(var(--primary-color-rgb), 0.4); 
            box-shadow: 0 6px 15px rgba(var(--dark-color-rgb), 0.08); 
            height: 100%;
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            position: relative; 
            overflow: hidden; 
        }
        .performance-card:hover {
            transform: translateY(-10px) scale(1.02); 
            box-shadow: 0 12px 30px rgba(var(--secondary-color-rgb), 0.2); 
            border-color: var(--secondary-color); 
        }
        .performance-card-title {
            font-size: 1.3rem; 
            color: var(--primary-color); 
            font-weight: 700;
            margin-bottom: 1.5rem; 
            text-transform: uppercase;
            letter-spacing: 1px;
            position: relative;
            padding-bottom: 0.75rem; 
            text-align: center; 
            width: 100%; 
            z-index: 1; /* Above canvas */
        }
        .performance-card-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 50px; 
            height: 3px; 
            background-color: var(--secondary-color); 
            border-radius: 2px;
        }
        .performance-card-content { 
            display: flex;
            flex-direction: column; 
            align-items: center; 
            width: 100%;
            margin-top: 1rem; 
            position: relative; 
            z-index: 1; /* Above canvas */
        }
        .director-photo-wrapper {
            width: 110px; 
            height: 110px;
            border-radius: 50%;
            overflow: hidden;
            margin-bottom: 1.2rem; 
            border: 4px solid var(--secondary-color); 
            box-shadow: 0 4px 15px rgba(var(--secondary-color-rgb), 0.3); 
            flex-shrink: 0; 
        }
        .director-photo-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .performance-details { 
            flex-grow: 1; 
            text-align: center; 
        }
        .performance-center-name {
            font-size: 1.15rem; 
            font-weight: 600;
            color: var(--dark-color);
            margin-bottom: 0.3rem;
        }
        .performance-center-address {
            font-size: 0.85rem; 
            color: var(--gray-color);
            margin-bottom: 0.3rem;
        }
        .performance-center-address i {
            color: var(--primary-color); 
            margin-right: 0.3rem;
        }
        .performance-student-count {
            font-size: 0.95rem; 
            color: var(--accent-color-1); 
            font-weight: 600;
            margin-top: 0.75rem;
        }
        .performance-student-count i {
            margin-right: 0.4rem;
        }
        
        .fireworks-canvas-enhanced {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0; /* Behind card content */
            pointer-events: none; 
        }


        @media (min-width: 768px) { 
            .performance-card-content {
                flex-direction: row; 
                align-items: center; 
            }
            .director-photo-wrapper {
                margin-bottom: 0; 
                margin-right: 1.5rem; 
            }
            .performance-details {
                text-align: left; 
            }
        }


        /* ===== About Us Section ===== */
        #about {
            background-color: var(--white-color); 
        }
        #about .about-img-container {
            position: relative;
            padding: 15px;
        }
        #about .about-img-container::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 80%;
            height: 80%;
            background-color: rgba(var(--primary-color-rgb), 0.08); 
            border-radius: var(--border-radius);
            z-index: 0; 
            transform: translate(15px, 15px);
            transition: all var(--transition-speed) ease;
        }
        #about:hover .about-img-container::before {
            transform: translate(5px,5px) scale(1.05);
        }
        #about .about-img {
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-medium);
            transition: transform var(--transition-speed) ease;
            position: relative; 
            z-index: 1;
        }
         #about:hover .about-img {
            transform: scale(1.03);
             box-shadow: var(--shadow-strong);
        }
        #about .content .lead {
            font-weight: 600;
            margin-bottom: 1.5rem;
            color: var(--dark-color);
        }
        #about .content ul {
            list-style: none;
            padding: 0;
        }
        #about .content ul li {
            padding-left: 28px;
            position: relative;
            margin-bottom: 10px;
            color: var(--gray-color);
        }
        #about .content ul i {
            position: absolute;
            left: 0;
            top: 4px;
            font-size: 20px;
            color: var(--primary-color);
        }

        /* Accordion Styling for About Section */
        .about-accordion .accordion-item {
            background-color: var(--white-color);
            border: 1px solid var(--navbar-border-color);
            border-radius: var(--border-radius-sm) !important; 
            margin-bottom: 15px;
            box-shadow: var(--shadow-soft);
            overflow: hidden; 
        }
        .about-accordion .accordion-item:last-child {
            margin-bottom: 0;
        }

        .about-accordion .accordion-button {
            background-color: rgba(var(--primary-color-rgb), 0.05); 
            color: var(--primary-color);
            font-family: var(--heading-font);
            font-weight: 600;
            font-size: 1.1rem;
            padding: 1rem 1.5rem;
            border-radius: 0 !important; 
            border-bottom: 1px solid var(--navbar-border-color); 
        }
        .about-accordion .accordion-item:first-of-type .accordion-button {
             border-top-left-radius: var(--border-radius-sm) !important;
             border-top-right-radius: var(--border-radius-sm) !important;
        }
         .about-accordion .accordion-item:last-of-type .accordion-button.collapsed {
             border-bottom-left-radius: var(--border-radius-sm) !important;
             border-bottom-right-radius: var(--border-radius-sm) !important;
             border-bottom: 0; 
        }


        .about-accordion .accordion-button:not(.collapsed) {
            background-color: var(--primary-color);
            color: var(--white-color);
            box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
            border-bottom-color: transparent; 
        }

        .about-accordion .accordion-button:focus {
            box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25);
            border-color: var(--primary-color);
            z-index: 3;
        }

        .about-accordion .accordion-button::after {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232A3B4D'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); /* Updated fill color */
            transition: transform .2s ease-in-out;
        }
        .about-accordion .accordion-button:not(.collapsed)::after {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
            transform: rotate(-180deg);
        }

        .about-accordion .accordion-body {
            padding: 1.5rem;
            font-size: 0.95rem;
            color: var(--gray-color);
            background-color: var(--white-color);
            border-bottom-left-radius: var(--border-radius-sm) !important;
            border-bottom-right-radius: var(--border-radius-sm) !important;
        }
        .about-accordion .accordion-body p:last-child {
            margin-bottom: 0;
        }

        /* ===== Counter Section ===== */
.enhanced-counter-section {
  background-color: var(--light-gray-alt); 
  padding-top: 60px;
  padding-bottom: 60px;
}

.counter-glass-card {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  padding: 40px 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease-in-out;
  position: relative;
}

.counter-glass-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.counter-icon-glow {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, var(--secondary-color), var(--accent-color-3));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #fff;
  margin: 0 auto 20px;
  box-shadow: 0 0 15px rgba(var(--primary-color-rgb), 0.5);
  transition: all 0.3s ease;
}

.counter-glass-card:hover .counter-icon-glow {
  transform: scale(1.1);
}

.counter-number {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--dark-color);
  margin-bottom: 8px;
  transition: color 0.3s;
}

.counter-label {
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--gray-color);
  letter-spacing: 0.6px;
}

@media (max-width: 767.98px) {
  .counter-glass-card {
    padding: 25px 15px;
  }
  .counter-number {
    font-size: 2rem;
  }
}




        /* ===== Student Verification Section - Revised Flex Design ===== */
        #student-verification {
            background-color: var(--light-gray-alt); 
        }
        .verification-flex-container {
            display: flex;
            background-color: var(--white-color);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-strong); 
            overflow: hidden; 
            transition: box-shadow var(--transition-speed) ease;
        }
        .verification-flex-container:hover {
            box-shadow: 0 15px 45px rgba(var(--accent-color-1-rgb), 0.2); /* Greenish shadow */
        }

        .verification-image-wrapper {
            flex: 0 0 45%; 
            position: relative; 
        }
        .verification-image-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block; 
        }

        .verification-content-wrapper {
            flex: 1;
            padding: 2.5rem 3rem; 
            display: flex;
            flex-direction: column;
            justify-content: center; 
        }
        .verification-content-wrapper .main-icon { 
            font-size: 3rem;
            color: var(--secondary-color); /* Green */
            margin-bottom: 1rem;
        }
        .verification-content-wrapper h4 {
            font-weight: 700;
            margin-bottom: 1rem;
            color: var(--secondary-color); /* Green heading */
            font-size: 1.75rem;
        }
        .verification-content-wrapper p {
            margin-bottom: 1.5rem;
            color: var(--gray-color);
            font-size: 0.95rem;
        }
        .verification-content-wrapper .form-control {
            border-radius: 50px;
            padding: 12px 20px;
            border: 1px solid #ced4da;
            transition: all var(--transition-speed) ease;
        }
        .verification-content-wrapper .form-control:focus {
            border-color: var(--secondary-color);
            box-shadow: 0 0 0 0.25rem rgba(var(--accent-color-1-rgb), 0.25);
        }


        /* ===== Apply for Franchise Section - Revised Full Width with Overlay ===== */
        #apply-franchise {
            background-image: url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); 
            background-size: cover;
            background-position: center center;
            background-attachment: fixed; 
            position: relative;
            color: var(--white-color); 
        }
        #apply-franchise::before { 
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(var(--dark-color-rgb), 0.8); /* Darker overlay for better contrast */
            z-index: 1;
        }
        #apply-franchise .container { 
            position: relative;
            z-index: 2;
        }
        #apply-franchise .custom-section-header .custom-section-badge {
            background-color: rgba(var(--secondary-color-rgb), 0.2); /* Teal tint */
            color: var(--secondary-color); /* Teal */
            border: 1px solid rgba(var(--secondary-color-rgb),0.4);
        }
        #apply-franchise .custom-section-header .custom-main-title {
            color: var(--white-color) !important;
        }
        #apply-franchise .custom-section-header .custom-main-title .highlight-text {
             background: linear-gradient(90deg, var(--secondary-color), var(--accent-color-4)); /* Teal to Golden Yellow */
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-fill-color: transparent;
        }
        #apply-franchise .custom-section-header .custom-section-subtitle {
            color: rgba(255,255,255,0.85) !important;
        }
        #apply-franchise .custom-section-header .custom-divider-premium {
            background: linear-gradient(90deg, var(--secondary-color) 0%, var(--white-color) 100%) !important;
        }

        .franchise-text-panel {
            background: rgba(var(--medium-dark-color-rgb), 0.7); /* Slightly lighter dark panel */
            backdrop-filter: blur(2px); 
            -webkit-backdrop-filter: blur(2px); 
            padding: 2.5rem; 
            border-radius: var(--border-radius);
            box-shadow: 0 10px 30px rgba(0,0,0,0.25); 
            color: var(--white-color);
            height: 100%; 
            display: flex;
            flex-direction: column;
            border: 1px solid rgba(255,255,255,0.1); 
        }
        .franchise-text-panel .main-icon {
            font-size: 3rem; 
            color: var(--secondary-color); /* Teal */
            margin-bottom: 1.2rem;
        }
        .franchise-text-panel h4 {
            color: var(--secondary-color); /* Teal */
            margin-bottom: 1.5rem;
            font-size: 1.75rem; 
        }
        .franchise-text-panel h5 {
            color: var(--white-color);
            font-size: 1.3rem; 
            border-bottom: 2px solid var(--secondary-color); 
            padding-bottom: 0.75rem;
            margin-bottom: 1.5rem;
            display: inline-block; 
        }
        .franchise-text-panel .franchise-main-paragraph {
            color: rgba(255,255,255,0.9);
            font-size: 1.05rem; 
            line-height: 1.9;
            flex-grow: 1; 
        }
        .franchise-text-panel .franchise-requirements li {
            color: rgba(255,255,255,0.9);
            font-size: 1rem;
            padding-left: 35px; 
            position: relative;
            margin-bottom: 1rem; 
        }
        .franchise-text-panel .franchise-requirements li i {
            color: var(--secondary-color); /* Teal */
            font-size: 1.25rem; 
            position: absolute;
            left: 0;
            top: 5px; 
        }
        .franchise-text-panel .btn-pro-theme-gradient { /* Teal to Light Blue gradient */
            margin-top: 2rem; 
            padding: 12px 30px; 
            font-size: 0.9rem;
        }
        .franchise-call-us-text {
            font-size: 1rem; /* Increased font size */
            color: rgba(255, 255, 255, 0.85); /* Slightly more opaque */
            font-style: italic;
            margin-top: 1.5rem; 
            text-align: center;
        }
        .franchise-call-us-text i {
            color: var(--secondary-color); 
            font-size: 1em; /* Adjusted icon size */
            margin-right: 0.4rem;
        }
        .franchise-phone-link {
            color: var(--accent-color-4); 
            font-weight: 600;
            text-decoration: none;
            transition: color var(--transition-speed) ease;
        }
        .franchise-phone-link:hover {
            color: var(--white-color);
            text-decoration: underline;
        }
		
		/* ===== COurse Category Section ===== */
		.course-categories-section {
            background-color: var(--white-color);
		}
.course-category-grid {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(2, 1fr); /* 2 per row by default (mobile) */
}

@media (min-width: 768px) {
  .course-category-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 per row on tablets & up */
  }
}

@media (min-width: 1200px) {
  .course-category-grid {
    grid-template-columns: repeat(3, 1fr); /* Keep 3 per row on large screens */
  }
}

.category-card-animated {
  overflow: hidden;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-medium);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  background-color: var(--grey-color);
  cursor: pointer;
}

.category-card-animated:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--shadow-strong);
}

.category-image-wrapper {
  position: relative;
  height: 220px;
  overflow: hidden;
  border-radius: var(--border-radius);
}

.category-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.category-card-animated:hover .category-image-wrapper img {
  transform: scale(1.1);
}

.category-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(var(--dark-color-rgb), 0.1), rgba(var(--dark-color-rgb), 0.9));
  color: var(--white-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 20px;
  transition: background 0.4s ease;
}

.category-overlay h5 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--white-color);
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.8px;
}

.category-overlay a.btn-pro-theme {
  font-size: 0.75rem;
  padding: 6px 20px;
  border-radius: 50px;
}




        /* ===== New Courses Section Styling ===== */
        .courses-section {
            background-color: var(--white-color);
            padding: 80px 0;
        }
        
        .course-swiper {
            padding-bottom: 50px; 
        }

        .courses-section .course-card {
            background: linear-gradient(145deg, var(--white-color) 0%, var(--light-gray-alt) 100%);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-medium);
            transition: all var(--transition-speed) ease-in-out;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            height: 100%; 
            border: 1px solid transparent; /* Initially transparent */
            position: relative;
        }
        .courses-section .course-card::before { /* Gradient border effect */
            content: "";
            position: absolute;
            inset: 0;
            border-radius: var(--border-radius); 
            padding: 2px; /* controlls border thickness */
            background:linear-gradient(145deg, var(--secondary-color), var(--accent-color-3)); 
            -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 var(--transition-speed) ease-in-out;
            pointer-events: none; /* Ensure border doesn't block clicks */
        }

        .courses-section .course-card:hover {
            transform: translateY(-12px) scale(1.03); /* More pronounced lift */
            box-shadow: 0 15px 35px rgba(var(--primary-color-rgb), 0.15), 0 5px 15px rgba(var(--secondary-color-rgb), 0.1);
        }
        .courses-section .course-card:hover::before {
            opacity: 1;
        }

        .courses-section .card-media {
            position: relative;
            height: 230px; /* Slightly increased height */
            overflow: hidden;
            border-top-left-radius: var(--border-radius); /* Match card radius */
            border-top-right-radius: var(--border-radius);
        }
        .courses-section .card-media::after { /* Subtle overlay for better text contrast if needed */
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: linear-gradient(to top, rgba(var(--dark-color-rgb), 0.3) 0%, transparent 50%);
            opacity: 0.7;
            transition: opacity var(--transition-speed) ease;
            pointer-events: none; /* Ensure overlay doesn't block clicks */
        }
        .courses-section .course-card:hover .card-media::after {
            opacity: 0.4;
        }
        .courses-section .card-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smoother zoom */
        }
        .courses-section .course-card:hover .card-image {
            transform: scale(1.12) rotate(1deg); /* Slight rotate on zoom */
        }
        .courses-section .learning-mode {
            position: absolute;
            top: 18px;
            left: 18px; /* Changed to left */
            background-color: var(--accent-color-4); /* Golden Yellow */
            color: var(--dark-color); /* Dark text for better contrast on yellow */
            padding: 6px 15px;
            border-radius: var(--border-radius-sm);
            font-size: 0.8rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            box-shadow: 0 3px 8px rgba(var(--dark-color-rgb), 0.2);
            z-index: 2;
        }
        .courses-section .card-body {
            padding: 25px;
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            background-color: var(--white-color); /* Ensure body has solid background */
            border-bottom-left-radius: var(--border-radius);
            border-bottom-right-radius: var(--border-radius);
            position: relative; /* Ensure card body is in stacking context */
            z-index: 1; /* Ensure card body is above pseudo elements if they were to interfere */
        }
        .courses-section .course-title {
            font-size: 1.35rem; /* Slightly larger */
            font-weight: 700;
            color: var(--primary-color); /* Primary color for title */
            margin-bottom: 12px;
            line-height: 1.35;
            transition: color var(--transition-speed) ease;
        }
        .courses-section .course-card:hover .course-title {
            color: var(--secondary-color); /* Teal on hover */
        }
        .courses-section .course-meta {
            display: flex;
            flex-wrap: wrap; /* Allow badges to wrap if needed */
            gap: 8px; /* Space between badges */
            font-size: 0.8rem; /* Smaller base font for meta items */
            margin-bottom: 18px;
        }
        .courses-section .course-meta span { /* Style as badges */
            display: inline-flex;
            align-items: center;
            background-color: rgba(var(--primary-color-rgb), 0.1); 
            color: var(--primary-color);
            padding: 7px 15px; /* Using custom-section-badge padding */
            border-radius: 50px; /* Using custom-section-badge border-radius */
            font-weight: 600; /* Using custom-section-badge font-weight */
            text-transform: uppercase; /* Using custom-section-badge text-transform */
            letter-spacing: 0.7px; /* Using custom-section-badge letter-spacing */
        }
        .courses-section .course-meta i {
            margin-right: 7px;
            color: var(--secondary-color); /* Teal for icons within badges */
            font-size: 0.9em;
        }
        .courses-section .course-excerpt {
            font-size: 0.92rem; /* Slightly larger */
            color: var(--gray-color);
            margin-bottom: 25px;
            flex-grow: 1; 
            line-height: 1.65;
        }
        .courses-section .cta-btn { 
            font-weight: 700; /* Bolder button text */
            text-align: center;
            margin-top: auto; 
            padding: 12px 30px; /* Larger button */
            font-size: 0.85rem;
            /* Uses btn-pro-theme-gradient: Teal to Light Blue */
        }
        .courses-section .btn-arrow {
            margin-left: 8px;
            transition: transform var(--transition-speed) ease;
        }
        .courses-section .cta-btn:hover .btn-arrow {
            transform: translateX(5px);
        }

        .courses-section .swiper-button-next,
        .courses-section .swiper-button-prev {
            color: var(--primary-color); 
            background-color: rgba(var(--white-color-rgb), 0.85);
            backdrop-filter: blur(4px);
            border-radius: 50%;
            width: 48px; /* Slightly larger */
            height: 48px;
            box-shadow: var(--shadow-medium);
            transition: all var(--transition-speed) ease;
        }
        .courses-section .swiper-button-next:hover,
        .courses-section .swiper-button-prev:hover {
            background-color: var(--primary-color);
            color: var(--white-color);
            transform: scale(1.1);
        }
        .courses-section .swiper-button-next::after,
        .courses-section .swiper-button-prev::after {
            font-size: 1.3rem; 
        }
        .courses-section .swiper-pagination {
            bottom: 15px !important; /* Ensure visibility */
        }
        .courses-section .swiper-pagination-bullet {
            background-color: var(--primary-color); 
            opacity: 0.4;
            transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease, background-color var(--transition-speed) ease;
            width: 10px; /* Slightly larger bullets */
            height: 10px;
        }
        .courses-section .swiper-pagination-bullet-active {
            opacity: 1;
            transform: scale(1.3);
            background-color: var(--secondary-color); 
        }
        .courses-section .view-all-container {
            text-align: center;
            margin-top: 50px; /* More space */
        }
        .courses-section .view-all-btn { 
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 12px 35px; /* Larger button */
             /* Uses btn-pro-theme-gradient: Teal to Light Blue */
        }


        /* ===== Recently Joined Training Centers Section - New Swiper Design ===== */
        #training-centers {
            background-color: var(--dark-color); /* Dark base */
            background-image: 
                linear-gradient(45deg, rgba(var(--medium-dark-color-rgb), 0.6) 25%, transparent 25%), 
                linear-gradient(-45deg, rgba(var(--medium-dark-color-rgb), 0.6) 25%, transparent 25%),
                linear-gradient(45deg, transparent 75%, rgba(var(--medium-dark-color-rgb), 0.6) 75%),
                linear-gradient(-45deg, transparent 75%, rgba(var(--medium-dark-color-rgb), 0.6) 75%);
            background-size: 60px 60px; /* Larger pattern */
            background-position: 0 0, 0 30px, 30px -30px, -30px 0px; /* Offset for complexity */
            padding-bottom: 60px; 
            color: var(--white-color); 
            position: relative; 
        }
        #training-centers::before { 
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: linear-gradient(to bottom, rgba(var(--dark-color-rgb),0.4), rgba(var(--dark-color-rgb),0.2)); /* Adjusted overlay */
            z-index: 0;
        }
        #training-centers .container {
            position: relative; 
            z-index: 1;
        }


        #training-centers .custom-section-header .custom-section-badge {
            background-color: rgba(var(--secondary-color-rgb), 0.2); /* Teal tint */
            color: var(--secondary-color); /* Teal */
            border: 1px solid rgba(var(--secondary-color-rgb),0.4);
        }
        #training-centers .custom-section-header .custom-main-title {
            color: var(--white-color);
        }
        #training-centers .custom-section-header .custom-main-title .highlight-text {
             background: linear-gradient(90deg, var(--secondary-color), var(--accent-color-4)); /* Teal to Golden Yellow */
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-fill-color: transparent;
        }
        #training-centers .custom-section-header .custom-section-subtitle {
            color: rgba(255,255,255,0.85);
        }
        #training-centers .custom-section-header .custom-divider-premium {
            background: linear-gradient(90deg, var(--secondary-color) 0%, var(--accent-color-4) 100%);
        }

        .training-center-swiper {
            padding-top: 20px; 
            padding-bottom: 50px; 
        }
        .training-center-slide-item {
            padding: 2rem 1.5rem; 
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between; 
            height: auto; 
            min-height: 450px; 
            transition: transform var(--transition-speed) ease; 
            position: relative; 
            background-color: rgba(var(--medium-dark-color-rgb), 0.3); /* Semi-transparent dark background for slide */
            backdrop-filter: blur(8px); /* Blur effect */
            -webkit-backdrop-filter: blur(8px);
            border-radius: var(--border-radius); 
            border: 1px solid rgba(var(--white-color), 0.15); /* Subtle border */
            box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* Subtle shadow to lift it */
        }
        .training-center-slide-item:hover {
            transform: translateY(-10px); 
            box-shadow: 0 10px 30px rgba(var(--secondary-color-rgb),0.2); /* Teal glow on hover */
        }
        .training-center-director-img-wrapper {
            width: 150px; 
            height: 150px;
            border-radius: 50%;
            overflow: hidden;
            margin-bottom: 1.8rem; 
            border: 6px solid var(--secondary-color); 
            box-shadow: 0 8px 30px rgba(var(--secondary-color-rgb), 0.4); 
            flex-shrink: 0; 
            transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
        }
        .training-center-slide-item:hover .training-center-director-img-wrapper {
            transform: scale(1.08);
            box-shadow: 0 12px 35px rgba(var(--secondary-color-rgb), 0.55);
        }
        .training-center-director-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .training-center-institute-name {
            font-size: 1.3rem; 
            font-weight: 700;
            color: var(--secondary-color); 
            margin-bottom: 0.6rem;
            line-height: 1.3;
        }
        .training-center-director-info {
            font-size: 1.1rem; 
            color: var(--white-color);
            margin-bottom: 0.4rem;
        }
        .training-center-director-info small {
            font-size: 0.9rem;
            color: rgba(255,255,255,0.8);
            text-transform: uppercase;
            display: block; 
            letter-spacing: 0.5px;
        }
        .training-center-address {
            font-size: 1rem;
            color: rgba(255,255,255,0.85);
            margin-top: 0.8rem; 
            margin-bottom: 1.8rem; 
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1.6;
        }
        .training-center-address i {
            color: var(--accent-color-3); 
            margin-right: 8px;
            font-size: 1.3rem; 
        }
        /* Button removed from recently joined centers
        .training-center-slide-item .btn-pro-theme {
            margin-top: auto; 
            padding: 12px 28px; 
            font-size: 0.9rem;
            background: var(--secondary-color); 
            color: var(--dark-color);
            border-color: var(--secondary-color);
        }
        .training-center-slide-item .btn-pro-theme:hover {
            background: var(--white-color);
            color: var(--primary-color);
            border-color: var(--white-color);
        }
        */

        #training-centers .swiper-button-next,
        #training-centers .swiper-button-prev {
            color: var(--white-color); 
            background-color: rgba(var(--secondary-color-rgb), 0.6); 
            border-radius: 50%;
            width: 50px; 
            height: 50px;
            box-shadow: var(--shadow-medium);
            transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease, transform 0.2s ease;
        }
        #training-centers .swiper-button-next:hover,
        #training-centers .swiper-button-prev:hover {
            background-color: var(--secondary-color);
            color: var(--dark-color); 
            transform: scale(1.1);
        }
        #training-centers .swiper-button-next::after,
        #training-centers .swiper-button-prev::after {
            font-size: 1.4rem; 
        }
        #training-centers .swiper-pagination {
            bottom: 15px !important; 
        }
        #training-centers .swiper-pagination-bullet {
            background-color: rgba(255,255,255,0.6); 
            opacity: 0.8;
            transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease, background-color var(--transition-speed) ease;
            width: 12px; 
            height: 12px;
        }
        #training-centers .swiper-pagination-bullet-active {
            opacity: 1;
            transform: scale(1.35);
            background-color: var(--secondary-color); 
        }


        /* ===== Latest Events Section - Swiper Integration ===== */
        #events {
            background-color: var(--white-color);
            padding-bottom: 60px; 
        }
        .event-swiper {
            padding-top: 20px;
            padding-bottom: 50px; 
        }
        #events .event-item {
            background: var(--white-color);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-medium);
            overflow: hidden;
            display: flex; 
            flex-direction: column; 
            height: 100%; 
            transition: all var(--transition-speed) ease;
            border: 1px solid var(--navbar-border-color); 
        }
        #events .event-item:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: var(--shadow-strong);
            border-color: var(--secondary-color); 
        }
        #events .event-item .event-image {
            flex-shrink: 0; 
            height: 220px; 
            overflow: hidden;
            width: 100%;
        }
        #events .event-item .event-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform var(--transition-speed) ease;
        }
        #events .event-item:hover .event-image img {
             transform: scale(1.08);
        }
        #events .event-item .event-date {
            background-color: var(--primary-color); 
            color: var(--white-color);
            padding: 15px; 
            text-align: center;
            transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
            width: 100%; 
            order: -1; 
            border-bottom: 1px solid rgba(0,0,0,0.1);
        }
         #events .event-item:hover .event-date { 
            background-color: var(--secondary-color); /* Teal */
            color: var(--dark-color);
        }
        #events .event-item .event-date span {
            display: block;
            font-size: 1.8rem; 
            font-weight: 700;
            line-height: 1;
        }
        #events .event-item .event-date small {
            font-size: 0.85rem; 
            font-weight: 600;
            text-transform: uppercase;
        }
        #events .event-item .event-content {
            padding: 20px; 
            flex-grow: 1; 
            display: flex;
            flex-direction: column;
        }
        #events .event-item .event-content h5 {
            font-size: 1.25rem; 
            font-weight: 700;
            margin-bottom: 10px;
        }
        #events .event-item .event-content h5 a {
            color: var(--dark-color);
            text-decoration: none;
            transition: color var(--transition-speed) ease;
        }
        #events .event-item .event-content h5 a:hover {
            color: var(--primary-color); 
        }
        #events .event-item .event-content p {
            font-size: 0.9rem; 
            color: var(--gray-color);
            margin-bottom: 15px;
            flex-grow: 1; 
        }
        #events .event-item .event-meta {
            font-size: 0.8rem; 
            color: var(--gray-color);
            margin-top: auto; 
            padding-bottom: 10px; /* Space for button */
        }
        #events .event-item .event-meta i {
            margin-right: 5px;
            color: var(--primary-color); 
        }
        #events .event-item .btn-pro-theme { /* Button for event card */
            margin-top: 1rem; /* Space above button */
        }


        #events .swiper-button-next,
        #events .swiper-button-prev {
            color: var(--primary-color);
            background-color: rgba(255,255,255,0.9);
            border-radius: 50%;
            width: 48px;
            height: 48px;
            box-shadow: var(--shadow-medium);
             transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease, transform 0.2s ease;
        }
        #events .swiper-button-next:hover,
        #events .swiper-button-prev:hover {
            background-color: var(--primary-color);
            color: var(--white-color);
            transform: scale(1.1);
        }
        #events .swiper-button-next::after,
        #events .swiper-button-prev::after {
            font-size: 1.3rem;
        }
        #events .swiper-pagination {
            bottom: 10px !important;
        }
        #events .swiper-pagination-bullet {
            background-color: var(--primary-color);
            opacity: 0.6;
            width: 12px;
            height: 12px;
        }
        #events .swiper-pagination-bullet-active {
            opacity: 1;
            background-color: var(--secondary-color); /* Teal */
            transform: scale(1.3);
        }

        /* Event Modal Styling */
        .event-modal-header {
            background: linear-gradient(90deg, var(--secondary-color), var(--accent-color-3)); /* Gradient from buttons */
            color: var(--white-color);
            border-bottom: none; /* Remove default border */
            padding: 1.5rem;
        }
        .event-modal-header .modal-title {
            font-weight: 700;
            font-size: 1.5rem;
        }
        .modal-body {
            padding: 1.5rem 2rem;
        }
        .event-modal-label {
            color: var(--primary-color);
            font-weight: 600;
            margin-right: 0.5rem;
        }
        .modal-body hr {
            margin-top: 1.2rem;
            margin-bottom: 1.2rem;
            border-top: 1px solid var(--navbar-border-color);
        }
        .modal-body ul {
            padding-left: 1.5rem;
            margin-bottom: 1rem;
        }
        .modal-body ul li {
            margin-bottom: 0.4rem;
            color: var(--gray-color);
        }
        .modal-body ul li::marker {
            color: var(--secondary-color);
        }
        .speaker-info {
            margin-bottom: 0.8rem;
            padding-left: 1rem;
            border-left: 3px solid var(--secondary-color);
        }
        .speaker-info strong {
            display: block;
            color: var(--dark-color);
            font-weight: 600;
        }
        .speaker-info em {
            font-size: 0.9em;
            color: var(--gray-color);
        }
        .modal-footer {
            border-top: 1px solid var(--navbar-border-color);
            padding: 1rem 2rem;
        }
        .modal-content {
            border-radius: var(--border-radius);
            border: none;
            box-shadow: var(--shadow-strong);
        }
        .modal.fade .modal-dialog {
            transition: transform .3s ease-out;
            transform: translateY(-50px);
        }
        .modal.show .modal-dialog {
            transform: translateY(0);
        }


        /* ===== Affiliation Logos Section ===== */
        #affiliation-logos {
            background-color: var(--light-gray-alt);
            padding: 60px 0; 
        }
        .marquee-container {
            width: 100%;
            overflow: hidden;
            position: relative;
            padding: 20px 0;
        }
        .marquee-container::before,
        .marquee-container::after { 
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100px; 
            z-index: 2;
        }
        .marquee-container::before {
            left: 0;
            background: linear-gradient(to right, var(--light-gray-alt), transparent);
        }
        .marquee-container::after {
            right: 0;
            background: linear-gradient(to left, var(--light-gray-alt), transparent);
        }

        .marquee-content {
            display: flex;
            width: fit-content; 
            animation: marqueeScroll 30s linear infinite; 
            will-change: transform; 
        }
        .marquee-content:hover {
            animation-play-state: paused; 
        }
        .affiliation-logo {
            padding: 0 30px; 
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .affiliation-logo img {
            max-height: 120px; 
            width: auto;
            opacity: 0.7;
            transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease;
            filter: grayscale(50%); 
        }
        .affiliation-logo img:hover {
            opacity: 1;
            transform: scale(1.1);
            filter: grayscale(0%);
			box-shadow: 0 15px 45px rgba(var(--accent-color-1-rgb), 0.2); /* Greenish shadow */
        }

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


        /* ===== Footer Section ===== */
        #footer {
            background-color: var(--dark-color);
            color: rgba(236, 240, 241,0.8); 
            padding: 80px 0 0 0;
            border-top: 5px solid var(--primary-color); 
        }
        #footer h5 {
            color: var(--white-color);
            font-weight: 700;
            font-size: 1.15rem; 
            margin-bottom: 20px; 
            text-transform: uppercase;
            letter-spacing: 0.8px; 
            position: relative;
            padding-bottom: 10px;
        }
        #footer h5::after { 
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 40px;
            height: 2px;
            background-color: var(--secondary-color); /* Teal */
        }
        #footer p, #footer ul li {
            font-size: 0.9rem; 
            line-height: 1.8;
        }
        #footer a {
            color: rgba(236, 240, 241,0.8);
            text-decoration: none;
            transition: color var(--transition-speed) ease, padding-left var(--transition-speed) ease;
        }
        #footer a:hover {
            color: var(--secondary-color); /* Teal */
            padding-left: 5px; 
        }
        #footer .list-unstyled li {
            margin-bottom: 10px; 
        }
        #footer .list-unstyled li i { 
            margin-right: 8px;
            color: var(--secondary-color); /* Teal */
            font-size: 1rem;
        }
        #footer .social-links a {
            display: inline-flex; 
            align-items: center;
            justify-content: center;
            width: 38px; 
            height: 38px;
            border-radius: 50%;
            background-color: rgba(255,255,255,0.15); 
            color: var(--white-color);
            margin-right: 8px;
            transition: all var(--transition-speed) ease;
            font-size: 1rem;
            border: 1px solid rgba(255,255,255,0.1);
        }
        #footer .social-links a:hover {
            background-color: var(--secondary-color); /* Teal */
            color: var(--dark-color);
            transform: translateY(-3px) scale(1.1); 
            border-color: var(--secondary-color);
        }
        #footer .footer-bottom {
            background-color: var(--medium-dark-color); 
            padding: 20px 0; 
            margin-top: 50px; 
            font-size: 0.85rem;
            border-top: 1px solid rgba(255,255,255,0.05);
        }
        #footer .footer-bottom p {
            margin-bottom: 0;
            color: rgba(236, 240, 241,0.7);
        }
        #footer .footer-bottom a {
            color: var(--secondary-color); /* Teal */
            font-weight: 600;
        }
        #footer .footer-bottom a:hover {
            color: var(--white-color);
            padding-left: 0; 
        }

        /* Scroll to Top Button */
        #scrollToTopBtn {
            display: none; 
            position: fixed; 
            bottom: 30px; 
            right: 30px; 
            z-index: 1000; 
            border: none; 
            outline: none; 
            background-color: var(--primary-color); 
            color: var(--white-color); 
            cursor: pointer; 
            padding: 12px 20px; 
            border-radius: 50%; 
            font-size: 1.5rem; 
            box-shadow: var(--shadow-medium);
            transition: background-color var(--transition-speed) ease, opacity 0.4s ease, transform 0.3s ease;
        }
        #scrollToTopBtn:hover {
            background-color: var(--secondary-color);
            transform: translateY(-3px);
        }
        #scrollToTopBtn.show {
            display: block;
            opacity: 1;
        }


        /* ===== Animation Keyframes ===== */
        @keyframes slideInUp {
            from {
                opacity: 0;
                transform: translateY(50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Responsive Adjustments */
        @media (max-width: 991.98px) { /* Medium devices (tablets, less than 992px) */
            .navbar-nav {
                margin-top: 10px; 
            }
            .navbar-nav .nav-link {
                margin: 8px 0; 
                display: block; 
                text-align: center;
                padding: 10px 15px !important; 
                background-color: transparent; /* Ensure no bg color initially */
            }
             .navbar-nav .nav-link > .underline-indicator {
                display: none; 
            }
            /* Hover effect for small screens */
            .navbar-nav .nav-link:hover,
            .navbar-nav .nav-link.active {
                background-color: rgba(var(--primary-color-rgb), 0.07) !important; /* Use !important to override potential specificity issues */
                color: var(--primary-color) !important;
                border-radius: var(--border-radius-sm);
            }

            .navbar .btn-login-center {
                display: block;
                margin: 15px auto 10px auto; 
                width: fit-content;
            }
            #home-slider .carousel-item {
                height: 70vh;
                min-height: 500px;
            }
            #about .content {
                margin-top: 30px;
            }
             #about .about-accordion { 
                margin-top: 30px;
            }
            
            /* Student Verification Responsive */
            .verification-flex-container {
                flex-direction: column;
            }
            .verification-image-wrapper {
                flex-basis: auto; 
                width: 100%;
                max-height: 300px; 
            }
            .verification-content-wrapper {
                padding: 2rem; 
            }
            .verification-content-wrapper h4 {
                font-size: 1.5rem;
            }
            
            /* Franchise Section Responsive */
            #apply-franchise .row > [class*="col-"] { 
                 margin-bottom: 2rem;
            }
            #apply-franchise .row > [class*="col-"]:last-child {
                margin-bottom: 0;
            }
            .franchise-text-panel {
                padding: 1.5rem; 
            }
            .franchise-text-panel h4 {
                font-size: 1.4rem;
            }
            .franchise-text-panel h5 {
                font-size: 1.1rem;
            }

            /* Training Centers Responsive */
             .training-center-slide-item {
                min-height: 380px; /* Adjust min-height for tablets */
                padding: 1.5rem;
            }
            .training-center-director-img-wrapper {
                width: 110px;
                height: 110px;
                margin-bottom: 1rem;
            }
            .training-center-institute-name {
                font-size: 1.2rem;
            }


            #events .event-item {
                flex-direction: column;
            }
            #events .event-item .event-image {
                flex: 0 0 200px; 
                width: 100%;
            }
            .marquee-container::before,
            .marquee-container::after {
                 width: 50px; 
            }
            .ribbon-content-wrapper {
                flex-direction: column;
                align-items: center; 
            }
            .quick-links-area { 
                width: 100%;
            }
            .login-area {
                width: 100%;
                align-items: center; 
                padding-left: 20px; 
                padding-right: 20px; 
                border-left: none;
                margin-top: 25px;
                padding-top: 25px;
                border-top: 1px solid rgba(255,255,255,0.15);
            }
            #counter-section .col-md-6 { /* Ensure 2 items per row on medium */
                flex: 0 0 50%;
                max-width: 50%;
            }
            #top-performance .col-md-6 { /* Ensure performance cards stack on medium */
                flex: 0 0 100%;
                max-width: 100%;
            }
            #top-performance .performance-card {
                margin-bottom: 2rem;
            }
            #top-performance .performance-card:last-child {
                margin-bottom: 0;
            }
             #scrollToTopBtn {
                bottom: 20px;
                right: 20px;
                padding: 10px 12px;
                font-size: 1.3rem;
            }
        }
        @media (max-width: 767.98px) { /* Small devices (landscape phones, less than 768px) */
            .custom-section-header .custom-main-title { 
                font-size: 2rem; 
            }
            .courses-section .section-title { 
                font-size: 1.8rem; 
            }
            .section-padding, .section-padding-fluid { /* Adjust padding for smaller screens */
                padding-top: 60px;
                padding-bottom: 60px;
            }
            #home-slider .carousel-item {
                height: 60vh;
                min-height: 450px;
            }
            #topbar {
                display: none !important; 
            }
            .navbar {
                 top: 0 !important; 
            }
            body {
                padding-top: 0 !important; 
            }
            body.navbar-present-no-topbar {
                padding-top: var(--navbar-height-mobile, 56px) !important; 
            }

            /* Student Verification Form Responsive */
            .verification-image-wrapper {
                max-height: 250px;
            }
            .verification-content-wrapper {
                padding: 1.5rem;
            }
            .verification-content-wrapper .form-control {
                margin-bottom: 10px; 
            }
            .verification-content-wrapper .d-flex { /* Target the form */
                flex-direction: column;
            }
            .verification-content-wrapper .btn-pro-theme-accent-1 {
                width: 100%; 
            }

            /* Training Centers Swiper Responsive */
            .training-center-slide-item {
                min-height: auto; /* Allow height to be more flexible on smallest screens */
                 padding: 1.5rem 1rem;
            }
             .training-center-director-img-wrapper {
                width: 100px;
                height: 100px;
            }
            .training-center-institute-name {
                font-size: 1.1rem;
            }
            .training-center-director-info {
                font-size: 0.9rem;
            }
            .training-center-address {
                font-size: 0.85rem;
            }

            /* Counter Section Mobile */
            #counter-section .col-6 { /* Explicitly set 2 items per row for small screens */
                flex: 0 0 50%;
                max-width: 50%;
            }
            .counter-icon {
                font-size: 2.8rem; /* Slightly smaller icons on mobile */
            }
            .counter-number {
                font-size: 2.2rem; /* Smaller numbers on mobile */
            }
            .counter-label {
                font-size: 0.85rem;
            }


            #footer .text-lg-end { 
                text-align: center !important;
            }
            #footer .social-links {
                 margin-bottom: 20px;
            }
            .affiliation-logo img {
                max-height: 50px; 
            }
            .affiliation-logo {
                padding: 0 15px; 
            }
            .quick-link-item-ribbon {
                padding: 12px 10px;
            }
            .quick-link-icon-ribbon {
                font-size: 1.8rem;
            }
            .quick-link-item-ribbon span {
                font-size: 0.75rem;
            }
            #scrollToTopBtn {
                bottom: 15px;
                right: 15px;
                padding: 8px 10px;
                font-size: 1.2rem;
            }
        }
		
	/* ===== Breadcrumb Styling ===== */
        .breadcrumb-section {
            padding: 5rem 0; /* Increased padding */
            position: relative;
            color: var(--white-color);
            background-image: url('https://images.unsplash.com/photo-1554494544-37979680109f?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); 
            background-size: cover;
            background-position: center center;
            background-attachment: fixed; 
            overflow: hidden; /* To contain animated elements */
        }
        .breadcrumb-section::before { /* Gradient overlay */
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.92) 0%, rgba(var(--dark-color-rgb), 0.8) 60%, rgba(var(--secondary-color-rgb), 0.6) 100%);
            z-index: 1;
        }
        .breadcrumb-animated-dots {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1; /* Just above the gradient overlay, below text */
        }
        .breadcrumb-animated-dots .dot {
            position: absolute;
            background-color: rgba(var(--white-color-rgb), 0.1);
            border-radius: 50%;
            box-shadow: 0 0 8px rgba(var(--white-color-rgb), 0.15), 0 0 15px rgba(var(--white-color-rgb), 0.1);
            animation: driftPulse 15s infinite ease-in-out alternate;
        }
        @keyframes driftPulse {
            0% { transform: translate(0, 0) scale(0.8); opacity: 0.3; }
            50% { transform: translate(calc(var(--x-drift) * 1px), calc(var(--y-drift) * 1px)) scale(1.2); opacity: 0.6; }
            100% { transform: translate(calc(var(--x-drift) * 0.5px), calc(var(--y-drift) * 1.5px)) scale(0.8); opacity: 0.3; }
        }

        .breadcrumb-content-wrapper { 
            position: relative;
            z-index: 2; 
            opacity: 0; 
        }
        .breadcrumb-content-wrapper.animate {
            animation: fadeInBreadcrumbContent 1s ease-out 0.3s forwards;
        }
        @keyframes fadeInBreadcrumbContent {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .breadcrumb-nav {
            margin-bottom: 0.75rem; 
        }
        .breadcrumb {
            margin-bottom: 0;
            background-color: transparent;
            padding: 0;
            display: flex;
            justify-content: center;
        }
        .breadcrumb-item {
            font-family: var(--heading-font);
            font-size: 0.95rem;
            font-weight: 500;
            opacity: 0;
        }
        .breadcrumb-content-wrapper.animate .breadcrumb-item:nth-child(1) { animation: fadeInBreadcrumbItem 0.5s ease-out 0.5s forwards; }
        .breadcrumb-content-wrapper.animate .breadcrumb-item:nth-child(2) { animation: fadeInBreadcrumbItem 0.5s ease-out 0.7s forwards; }
        .breadcrumb-content-wrapper.animate .breadcrumb-item:nth-child(3) { animation: fadeInBreadcrumbItem 0.5s ease-out 0.9s forwards; }

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

        .breadcrumb-item a {
            color: var(--accent-color-4); 
            text-decoration: none;
            transition: color var(--transition-speed) ease;
        }
        .breadcrumb-item a:hover {
            color: var(--white-color);
            text-decoration: underline;
        }
        .breadcrumb-item.active {
            color: rgba(var(--white-color-rgb), 0.85);
        }
        .breadcrumb-item + .breadcrumb-item::before {
            color: rgba(var(--white-color-rgb), 0.6);
            content: ">"; 
            padding-right: .7rem;
            padding-left: .7rem;
        }
        .breadcrumb-page-title {
            font-size: 2.8rem; 
            font-weight: 800;
            color: var(--white-color);
            text-transform: uppercase;
            letter-spacing: 1.5px;
            margin-top: 0.5rem;
            text-shadow: 2px 2px 5px rgba(var(--dark-color-rgb), 0.3);
            opacity: 0;
        }
        .breadcrumb-content-wrapper.animate .breadcrumb-page-title {
             animation: slideUpFadeInTitle 0.8s ease-out 0.8s forwards;
        }
        @keyframes slideUpFadeInTitle {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

         @media (max-width: 767.98px) {
            .breadcrumb-page-title {
                font-size: 2rem;
            }
            .breadcrumb-item {
                font-size: 0.85rem;
            }
            .breadcrumb-section {
                padding: 3rem 0;
            }
        }


         /* ===== Page-Specific Section Title Styling ===== */
        .page-section-title {
            font-size: 2.2rem;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 1rem;
            padding-bottom: 0.75rem;
            position: relative;
            text-align: center;
            display: flex; 
            align-items: center;
            justify-content: center;
        }
        .page-section-title i { 
            font-size: 0.9em; 
            margin-right: 0.5em;
            color: var(--secondary-color);
        }
        .page-section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background: var(--secondary-color);
            border-radius: 2px;
        }
        .page-section-subtitle {
            font-size: 1.1rem;
            color: var(--gray-color);
            text-align: center;
            max-width: 700px;
            margin: 0 auto 40px auto;
        }

        /* ===== About Institute Section ===== */
        #about-institute {
            background-color: var(--white-color);
        }
        #about-institute .about-content p {
            color: var(--gray-color);
            font-size: 1.05rem;
            line-height: 1.8;
        }
        #about-institute .about-content .lead {
            color: var(--dark-color);
            font-weight: 600;
            font-size: 1.2rem;
        }
        #about-institute .about-image-wrapper {
            position: relative;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow-strong);
        }
        #about-institute .about-image-wrapper img {
            transition: transform 0.5s ease;
        }
        #about-institute .about-image-wrapper:hover img {
            transform: scale(1.05);
        }
        #about-institute .about-image-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(var(--dark-color-rgb), 0.8), transparent);
            color: var(--white-color);
            padding: 1.5rem 1rem 1rem;
            font-size: 0.9rem;
            text-align: center;
        }


        /* ===== Objectives Section Redesign ===== */
        #objectives {
            background-color: var(--light-gray-alt);
        }
        .objective-item-v2 { 
            background-color: var(--white-color);
            padding: 1.25rem; 
            border-radius: var(--border-radius-sm);
            box-shadow: var(--shadow-soft);
            transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease, border-left-color var(--transition-speed) ease;
            display: flex;
            align-items: center; 
            gap: 1rem; 
            border-left: 4px solid transparent; 
            margin-bottom: 1rem; 
        }
        .objective-item-v2:hover {
            transform: translateX(6px); 
            box-shadow: var(--shadow-medium);
            border-left-color: var(--secondary-color); 
        }
        .objective-icon-v2 {
            font-size: 1.8rem; 
            color: var(--secondary-color);
            flex-shrink: 0; 
            transition: transform 0.3s ease;
        }
         .objective-item-v2:hover .objective-icon-v2 {
            transform: scale(1.15);
        }
        .objective-text-v2 h5 {
            color: var(--primary-color);
            font-size: 1.05rem; 
            margin-bottom: 0.25rem;
            font-weight: 600;
        }
        .objective-text-v2 p {
            color: var(--gray-color);
            font-size: 0.875rem; 
            line-height: 1.5;
            margin-bottom: 0;
        }


        /* ===== Infrastructure Section ===== */
        #infrastructure {
            background-color: var(--white-color);
        }
        .infra-item {
            background-color: var(--light-color);
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow-soft);
            transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
            height: 100%;
        }
        .infra-item:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-medium);
        }
        .infra-item img {
            width: 100%;
            height: 220px;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
        .infra-item:hover img {
            transform: scale(1.05);
        }
        .infra-item-content {
            padding: 1.5rem;
        }
        .infra-item-content h5 {
            color: var(--primary-color);
            font-size: 1.25rem;
            margin-bottom: 0.5rem;
        }
        .infra-item-content p {
            color: var(--gray-color);
            font-size: 0.9rem;
            margin-bottom: 0;
        }

        /* ===== Team Section Redesign ===== */
        #team {
            background-color: var(--light-gray-alt);
        }
        .team-member-entry { /* This is the Bootstrap column: col-lg-3 col-md-6 d-flex */
            opacity: 0; 
            transform: translateY(30px); 
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        .team-member-entry.in-view {
            opacity: 1;
            transform: translateY(0);
        }
        .team-member-pod { 
            text-align: center;
            padding: 1.5rem;
            background-color: var(--white-color);
            border-radius: var(--border-radius);
            border: 2px dashed var(--accent-color-3); /* Dashed outline added */
            box-shadow: var(--shadow-soft);
            transition: all var(--transition-speed) ease;
            height: 100%; 
            display: flex;
            flex-direction: column;
        }
        .team-member-pod:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: var(--shadow-strong);
            border-color: var(--secondary-color); /* Change border color on hover */
        }

        .team-profile-photo {
            width: 140px; 
            height: 140px;
            border-radius: 50%;
            object-fit: cover;
            margin: 0 auto 1rem auto;
            border: 5px solid var(--secondary-color);
            box-shadow: 0 0 20px rgba(var(--secondary-color-rgb), 0.25);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .team-member-pod:hover .team-profile-photo {
            transform: scale(1.1);
            box-shadow: 0 0 30px rgba(var(--secondary-color-rgb), 0.4);
        }
        .team-profile-name {
            color: var(--primary-color);
            font-size: 1.25rem; 
            margin-bottom: 0.2rem;
        }
        .team-profile-designation {
            color: var(--secondary-color);
            font-weight: 600;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 0.75rem;
            display: block;
        }
        .team-profile-bio {
            color: var(--gray-color);
            font-size: 0.85rem; 
            line-height: 1.6;
            margin-bottom: 1rem;
            flex-grow: 1;
        }
        .team-profile-contact {
            margin-top: auto; 
            padding-top: 1rem;
            border-top: 1px dashed var(--navbar-border-color);
        }
        .team-profile-contact p {
            margin-bottom: 0.3rem;
            font-size: 0.8rem;
            color: var(--gray-color);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .team-profile-contact i {
            color: var(--primary-color);
            margin-right: 0.5rem;
            font-size: 1em; /* Adjusted for better alignment with text */
        }
        .team-profile-contact a {
            color: var(--primary-color);
            text-decoration: none;
            transition: color var(--transition-speed);
        }
        .team-profile-contact a:hover {
            color: var(--secondary-color);
        }
		
		
		 /* ===== Chairman's Message Section Styling ===== */
        #chairman-message {
            background-color: var(--white-color);
        }
        .chairman-photo-wrapper {
            text-align: center;
            margin-bottom: 2rem;
        }
        .chairman-photo {
            width: 220px;
            height: 220px;
            border-radius: 50%;
            object-fit: cover;
            border: 6px solid var(--secondary-color);
            box-shadow: 0 8px 25px rgba(var(--secondary-color-rgb), 0.25);
            transition: transform 0.4s ease, box-shadow 0.4s ease;
        }
        .chairman-photo:hover {
            transform: scale(1.05);
            box-shadow: 0 12px 35px rgba(var(--secondary-color-rgb), 0.35);
        }
        .chairman-message-content .lead {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--primary-color);
            margin-bottom: 1.5rem;
            line-height: 1.6;
        }
        .chairman-message-content p {
            font-size: 1rem;
            line-height: 1.8;
            color: var(--gray-color);
            margin-bottom: 1.5rem;
        }
        .chairman-signature {
            margin-top: 2rem;
            font-style: italic;
            color: var(--dark-color);
        }
        .chairman-signature strong {
            display: block;
            font-family: var(--heading-font);
            font-size: 1.1rem;
        }
        .chairman-signature span {
            font-size: 0.9rem;
            color: var(--secondary-color);
        }


        /* ===== Vision & Mission Sections Styling ===== */
        #vision-section, #mission-section {
            overflow: hidden; /* For animations */
        }
        #vision-section {
            background-color: var(--light-gray-alt); /* Swapped background */
        }
        #mission-section {
            background-color: var(--white-color); /* Swapped background */
        }
        .vision-mission-content-wrapper {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.7s ease-out, transform 0.7s ease-out;
        }
        .vision-mission-content-wrapper.in-view {
            opacity: 1;
            transform: translateY(0);
        }
        .vision-mission-image-wrapper {
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow-strong);
            margin-bottom: 1.5rem; /* Space on mobile */
        }
        .vision-mission-image-wrapper img {
            width: 100%;
            height: auto;
            display: block;
            transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        .vision-mission-image-wrapper:hover img {
            transform: scale(1.08);
        }
         .vision-mission-text h3 { /* Subheading for Vision/Mission Text */
            color: var(--primary-color);
            font-size: 1.75rem; 
            font-weight: 700;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
        }
        .vision-mission-text h3 i { /* Icon for H3 if needed, but main icon is with H2 */
            font-size: 1em; 
            margin-right: 0.5em;
            color: var(--secondary-color);
        }
        #vision-section .vision-mission-text h3 {
             justify-content: flex-start; 
        }
         #mission-section .vision-mission-text h3 {
            justify-content: flex-start; /* Default for LTR */
        }
        @media (min-width: 992px) { /* For alternating layout */
            #mission-section .vision-mission-text {
                text-align: right; 
            }
            #mission-section .vision-mission-text h3 {
                justify-content: flex-end; 
            }
             #mission-section .vision-mission-text h3 i {
                 margin-right: 0;
                 margin-left: 0.5em; 
                 order: 1; 
            }
        }


        .vision-mission-text p {
            color: var(--gray-color);
            font-size: 1.05rem;
            line-height: 1.8;
        }
		
		/* Responsive Adjustments */
        @media (max-width: 991.98px) {
           
            .vision-mission-content-wrapper .row > div { 
                text-align: center;
            }
            .vision-mission-text .page-section-title,
            #mission-section .vision-mission-text .page-section-title {
                text-align: center;
                 justify-content: center; 
            }
            .vision-mission-text .page-section-title::after,
            #mission-section .vision-mission-text .page-section-title::after {
                left: 50%;
                transform: translateX(-50%);
                right: auto;
            }
             .vision-mission-text h3 i {
                display: block; margin: 0 auto 0.5rem auto;
            }
            #mission-section .vision-mission-text h3 i {
                order: 0; margin-right: auto; margin-left: auto;
            }

            .vision-mission-image-wrapper {
                max-width: 80%;
                margin-left: auto;
                margin-right: auto;
            }
        }
        @media (max-width: 767.98px) {
            
            .vision-mission-image-wrapper {
                max-width: 100%;
            }
        }
		
		
		/* ===== New Affiliations Section Styling ===== */
        #affiliations-section {
            background-color: var(--light-color); 
        }
        .affiliation-entry-column { /* This is the Bootstrap column div */
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
            display: flex; 
            align-items: stretch; /* Make columns of same row equal height */
        }
        .affiliation-entry-column.in-view {
            opacity: 1;
            transform: translateY(0);
        }
        .affiliation-item-styled { 
            background-color: var(--white-color);
            border-radius: var(--border-radius);
            padding: 1.5rem; 
            box-shadow: var(--shadow-soft);
            border: 2px dashed var(--accent-color-3); 
            transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease, border-color var(--transition-speed) ease;
            height: 100%; 
            display: flex;
            flex-direction: column; /* Default for small screens */
            align-items: center; 
            text-align: center;
            width: 100%; /* Ensure item fills column */
        }
        .affiliation-item-styled:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-strong); /* Stronger shadow on hover */
            border-color: var(--secondary-color); 
        }

        .affiliation-preview-wrapper {
            width: 100px; 
            height: 100px;
            border-radius: 50%; 
            background-color: rgba(var(--primary-color-rgb), 0.05); /* Lighter, more subtle background */
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.25rem; 
            transition: background-color var(--transition-speed) ease, transform var(--transition-speed) ease;
            overflow: hidden; /* Ensure image stays within circle */
        }
        .affiliation-item-styled:hover .affiliation-preview-wrapper {
            background-color: rgba(var(--secondary-color-rgb), 0.1);
            transform: scale(1.05);
        }
        .affiliation-logo-img-v3 { /* For actual images */
            width: 70px; /* Fixed width for the image */
            height: 70px; /* Fixed height for the image */
            object-fit: cover; 
            border-radius: 50%; /* Makes the image itself circular */
        }
        .affiliation-preview-icon { /* For icon placeholders */
            font-size: 2.25rem; 
            color: var(--primary-color); 
             transition: color var(--transition-speed) ease;
        }
         .affiliation-item-styled:hover .affiliation-preview-icon {
            color: var(--secondary-color);
        }
        
        .affiliation-details-wrapper {
            flex-grow: 1; 
            display: flex;
            flex-direction: column;
            align-items: center; 
            width: 100%;
        }

        .affiliation-name-styled {
            font-size: 1.15rem; 
            color: var(--primary-color);
            font-weight: 600;
            margin-bottom: 1rem; 
        }

        .affiliation-button-styled {
            margin-top: auto; 
            /* Uses .btn-pro-theme, .btn-pro-theme-outline-secondary, .btn-sm */
        }

        /* Responsive adjustments for the new affiliation item */
        @media (min-width: 768px) { /* md breakpoint */
            .affiliation-item-styled {
                flex-direction: row;
                text-align: left;
                align-items: center; 
                gap: 1.5rem; 
            }
            .affiliation-preview-wrapper {
                margin-bottom: 0; /* Remove bottom margin in horizontal layout */
                margin-right: 1.5rem; /* Add right margin for spacing */
            }
            .affiliation-details-wrapper {
                align-items: flex-start; /* Align text and button to the left */
                text-align: left;
            }
            .affiliation-button-styled {
                align-self: flex-start; /* Align button to start */
            }
        }
		
		/* ===== Payment Options Section Styling ===== */
        #payment-options-section {
            background-color: var(--light-gray-alt);
        }
        .payment-method-entry { /* This is the Bootstrap column div */
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
            display: flex; /* For equal height cards in a row */
            align-items: stretch;
        }
        .payment-method-entry.in-view {
            opacity: 1;
            transform: translateY(0);
        }
        .payment-card {
            background-color: var(--white-color);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-medium);
            padding: 2rem;
            transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease, border-left-color var(--transition-speed) ease;
            width: 100%; /* Ensure card fills column */
            display: flex;
            flex-direction: column;
            border-left: 4px solid transparent; /* Initial transparent left border */
        }
        .payment-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-strong);
            border-left-color: var(--secondary-color); /* Teal left border on hover */
        }
        .payment-method-header {
            display: flex;
            align-items: center;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 2px solid var(--secondary-color);
        }
        .payment-method-header i {
            font-size: 2rem;
            color: var(--primary-color);
            margin-right: 1rem;
        }
        .payment-method-header h4 {
            margin-bottom: 0;
            color: var(--primary-color);
            font-size: 1.5rem;
        }
        
        /* Bank Account Specific */
        .bank-account-card-content {
            flex-grow: 1;
        }
        .bank-account-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.85rem 0; 
            border-bottom: 1px solid var(--navbar-border-color);
        }
        .bank-account-item:last-child {
            border-bottom: none;
        }
        .bank-account-item dt {
            font-weight: 600;
            color: var(--dark-color);
            display: flex;
            align-items: center;
            font-size: 0.95rem;
        }
        .bank-account-item dt i {
            color: var(--primary-color);
            margin-right: 0.6rem;
            font-size: 1.2em;
        }
        .bank-account-item dd {
            color: var(--gray-color);
            margin-bottom: 0;
            display: flex;
            align-items: center;
            font-size: 0.95rem;
        }
        .bank-account-item dd .copy-btn {
            margin-left: 0.75rem;
            padding: 0.25rem 0.6rem; 
            font-size: 0.75rem;
            border-color: var(--secondary-color);
            color: var(--secondary-color);
        }
        .bank-account-item dd .copy-btn:hover {
            background-color: var(--secondary-color);
            color: var(--white-color);
        }
        
        /* UPI/QR Specific */
        .upi-details-content p {
            font-size: 1.1rem;
            margin-bottom: 0.5rem;
        }
        .upi-id-display {
            font-weight: 600;
            color: var(--secondary-color);
            font-size: 1.2rem;
            background-color: rgba(var(--secondary-color-rgb), 0.1);
            padding: 0.5rem 1rem;
            border-radius: var(--border-radius-sm);
            display: inline-block;
            margin-right: 0.5rem;
        }
        .qr-code-img-wrapper {
            max-width: 180px; 
            margin: 1.5rem auto 0 auto;
            border: 5px solid var(--light-color);
            border-radius: var(--border-radius);
            padding: 8px;
            background-color: var(--white-color);
            box-shadow: var(--shadow-soft);
        }
        .qr-code-img-wrapper img {
            max-width: 100%;
            height: auto;
            display: block;
        }

        /* Payment Gateway Specific */
        .payment-gateway-content .btn-pro-theme-gradient {
            font-size: 1.1rem;
            padding: 12px 30px;
        }
        #copyMessage { 
             color: var(--accent-color-1); 
             font-size: 0.9em; 
             display: none;
             font-weight: 500;
        }
		
		 /* ===== Image Gallery Section Styling ===== */
        #image-gallery-section {
            background-color: var(--light-color); 
        }
        .gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: var(--border-radius-lg);
            box-shadow: var(--shadow-medium);
            transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
            margin-bottom: 1.5rem; 
        }
        .gallery-item:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: var(--shadow-strong);
        }
        .gallery-item img {
            display: block;
            width: 100%;
            height: 250px; /* Fixed height for uniform look */
            object-fit: cover; 
            transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        }
        .gallery-item:hover img {
            transform: scale(1.1);
        }
        .gallery-item-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(var(--primary-color-rgb), 0.9) 0%, rgba(var(--primary-color-rgb), 0.7) 50%, transparent 100%);
            color: var(--white-color);
            padding: 1.5rem 1rem 1rem 1rem;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.4s ease, transform 0.4s ease;
            text-align: center;
        }
        .gallery-item:hover .gallery-item-overlay {
            opacity: 1;
            transform: translateY(0);
        }
        .gallery-item-name {
            font-family: var(--heading-font);
			color: var(--accent-color-4);
            font-weight: 600;
            font-size: 1.1rem;
            margin-bottom: 0.25rem;
            line-height: 1.3;
        }
        .gallery-item-view-btn {
            font-size: 0.8rem;
            color: var(--secondary-color);
            text-decoration: none;
            font-weight: 500;
            display: inline-block;
            margin-top: 0.25rem;
        }
        .gallery-item-view-btn:hover {
            color: var(--accent-color-4);
            text-decoration: underline;
        }
        .gallery-item-view-btn i {
            margin-left: 0.3rem;
        }
        /* Modal Styling */
        .gallery-modal .modal-content {
            background-color: var(--white-color);
            border-radius: var(--border-radius-lg);
            border: none;
            box-shadow: var(--shadow-strong);
        }
        .gallery-modal .modal-header {
            background: linear-gradient(90deg, var(--secondary-color), var(--accent-color-3));
            color: var(--white-color);
            border-bottom: none;
            padding: 1rem 1.5rem;
        }
         .gallery-modal .modal-header .modal-title {
            font-family: var(--heading-font);
            font-weight: 600;
        }
        .gallery-modal .modal-header .btn-close {
            filter: invert(1) grayscale(100%) brightness(200%); /* White close button */
        }
        .gallery-modal .modal-body img {
            max-width: 100%;
            height: auto;
            border-radius: var(--border-radius);
        }
        .gallery-modal .modal-footer {
            border-top: 1px solid var(--navbar-border-color);
            padding: 0.75rem 1.5rem;
        }

        @keyframes fadeInGalleryItem {
            from { opacity: 0; transform: translateY(30px) scale(0.95); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }
        .animate-fadeInGallery {
            animation: fadeInGalleryItem 0.6s ease-out forwards;
            opacity: 0; /* Start hidden */
        }
		
		/* ===== Courses Section Styling (Copied from Homepage) ===== */
        #all-courses-section { /* Using a more specific ID for this page */
            background-color: var(--white-color);
        }
        
        .course-entry-column { /* This is the Bootstrap column div */
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
            display: flex; /* For equal height cards in a row */
            align-items: stretch;
        }
        .course-entry-column.in-view {
            opacity: 1;
            transform: translateY(0);
        }
        /* Copied .courses-section .course-card and its children styles from homepage */
        .course-card {
            background: linear-gradient(145deg, var(--white-color) 0%, var(--light-gray-alt) 100%);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-medium);
            transition: all var(--transition-speed) ease-in-out;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            height: 100%; 
            border: 1px solid transparent; 
            position: relative;
            width: 100%; /* Ensure card fills column */
        }
        .course-card::before { 
            content: "";
            position: absolute;
            inset: 0;
            border-radius: var(--border-radius); 
            padding: 2px; 
            background:linear-gradient(145deg, var(--secondary-color), var(--accent-color-3)); 
            -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 var(--transition-speed) ease-in-out;
            pointer-events: none; 
        }
        .course-card:hover {
            transform: translateY(-12px) scale(1.03); 
            box-shadow: 0 15px 35px rgba(var(--primary-color-rgb), 0.15), 0 5px 15px rgba(var(--secondary-color-rgb), 0.1);
        }
        .course-card:hover::before {
            opacity: 1;
        }
        .card-media {
            position: relative;
            height: 230px; 
            overflow: hidden;
            border-top-left-radius: var(--border-radius); 
            border-top-right-radius: var(--border-radius);
        }
        .card-media::after { 
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: linear-gradient(to top, rgba(var(--dark-color-rgb), 0.3) 0%, transparent 50%);
            opacity: 0.7;
            transition: opacity var(--transition-speed) ease;
            pointer-events: none; 
        }
        .course-card:hover .card-media::after {
            opacity: 0.4;
        }
        .card-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
        }
        .course-card:hover .card-image {
            transform: scale(1.12) rotate(1deg); 
        }
        .learning-mode {
            position: absolute;
            top: 18px;
            left: 18px; 
            background-color: var(--accent-color-4); 
            color: var(--dark-color); 
            padding: 6px 15px;
            border-radius: var(--border-radius-sm);
            font-size: 0.8rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            box-shadow: 0 3px 8px rgba(var(--dark-color-rgb), 0.2);
            z-index: 2;
        }
        .card-body { /* Bootstrap's card-body */
            padding: 25px;
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            background-color: var(--white-color); 
            border-bottom-left-radius: var(--border-radius);
            border-bottom-right-radius: var(--border-radius);
            position: relative; 
            z-index: 1; 
        }
        .course-title {
            font-size: 1.35rem; 
            font-weight: 700;
            color: var(--primary-color); 
            margin-bottom: 12px;
            line-height: 1.35;
            transition: color var(--transition-speed) ease;
        }
        .course-card:hover .course-title {
            color: var(--secondary-color); 
        }
        .course-meta {
            display: flex;
            flex-wrap: wrap; 
            gap: 8px; 
            font-size: 0.8rem; 
            margin-bottom: 18px;
        }
        .course-meta span { 
            display: inline-flex;
            align-items: center;
            background-color: rgba(var(--primary-color-rgb), 0.1); 
            color: var(--primary-color);
            padding: 7px 15px; 
            border-radius: 50px; 
            font-weight: 600; 
            text-transform: uppercase; 
            letter-spacing: 0.7px; 
        }
        .course-meta i {
            margin-right: 7px;
            color: var(--secondary-color); 
            font-size: 0.9em;
        }
        .course-excerpt {
            font-size: 0.92rem; 
            color: var(--gray-color);
            margin-bottom: 25px;
            flex-grow: 1; 
            line-height: 1.65;
        }
        .cta-btn { 
            font-weight: 700; 
            text-align: center;
            margin-top: auto; 
            padding: 12px 30px; 
            font-size: 0.85rem;
        }
        .btn-arrow { /* Already defined in btn-pro-theme */
            margin-left: 8px;
            transition: transform var(--transition-speed) ease;
        }
        .cta-btn:hover .btn-arrow {
            transform: translateX(5px);
        }
		.view-syllabus-link {
			display: inline-block;
			margin-bottom: 15px;
			color: var(--primary-color);
			font-weight: 600;
			font-size: 0.9rem;
			text-decoration: none;
			transition: color 0.3s ease;
			text-align:center;
		}

		.view-syllabus-link:hover {
			color: var(--secondary-color);
		}
		/* Responsive Adjustments */
        @media (max-width: 991.98px) {
            .page-section-title {
                font-size: 1.8rem;
            }
            .page-section-subtitle {
                font-size: 1rem;
                margin-bottom: 30px;
            }
             #scrollToTopBtn {
                bottom: 20px;
                right: 20px;
                padding: 10px 12px;
                font-size: 1.3rem;
            }
        }
        @media (max-width: 767.98px) {
           .page-section-title {
                font-size: 1.6rem;
            }
           
             #scrollToTopBtn {
                bottom: 15px;
                right: 15px;
                padding: 8px 10px;
                font-size: 1.2rem;
            }
        }
		
		 
        /* ===== Requirements & Documents Section Styling ===== */
        #requirements-documents-section {
            background-color: var(--white-color); 
        }
         .info-card-entry { 
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
            display: flex; 
            align-items: stretch; 
        }
        .info-card-entry.in-view {
            opacity: 1;
            transform: translateY(0);
        }
        .info-card {
            background-color: var(--white-color);
            border-radius: var(--border-radius);
            padding: 2rem;
            box-shadow: var(--shadow-medium);
            height: 100%;
            border: 1px solid var(--navbar-border-color);
            border-left: 4px solid transparent; /* Initial transparent left border */
            transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease, border-left-color var(--transition-speed) ease;
        }
        .info-card:hover {
             box-shadow: var(--shadow-strong);
             transform: translateY(-5px);
             border-left-color: var(--secondary-color);
        }
        .info-card h4 {
            color: var(--primary-color);
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
        }
        .info-card h4 i {
            color: var(--secondary-color);
            margin-right: 0.75rem;
            font-size: 1.5rem;
        }
        .info-card ul { 
            list-style: none;
            padding-left: 0;
        }
        .info-card ul li {
            color: var(--gray-color);
            margin-bottom: 0.75rem;
            display: flex;
            align-items: flex-start;
        }
        .info-card ul li i {
            color: var(--secondary-color);
            margin-right: 0.75rem;
            font-size: 1.2rem;
            margin-top: 0.15rem; 
        }
        .franchise-requirements-table {
            width: 100%;
            margin: 0 auto 1.5rem auto;
            border-collapse: separate; 
            border-spacing: 0;
            box-shadow: var(--shadow-soft);
            border: 1px solid var(--navbar-border-color);
            border-radius: var(--border-radius-sm);
            overflow: hidden; 
        }
        .franchise-requirements-table thead th {
            background: linear-gradient(to right, var(--primary-color), var(--medium-dark-color)); /* Gradient header */
            color: var(--white-color);
            padding: 1rem 1.25rem; /* Increased padding */
            text-align: center; /* Center align header text */
            font-weight: 600;
            border-bottom: 3px solid var(--secondary-color); /* Thicker bottom border */
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .franchise-requirements-table tbody td {
            padding: 0.85rem 1rem; /* Adjusted padding */
            border-bottom: 1px solid var(--navbar-border-color);
            color: var(--gray-color);
            font-size: 0.9rem;
            text-align: center; /* Center align cell text */
        }
         .franchise-requirements-table tbody td:first-child {
            text-align: left; /* Align first column to left */
            font-weight: 500;
            color: var(--dark-color);
        }
        .franchise-requirements-table tbody tr:last-child td {
            border-bottom: none;
        }
        .franchise-requirements-table tbody tr:nth-child(even) {
            background-color: var(--light-gray-alt);
        }
         .franchise-requirements-table tbody tr:hover {
            background-color: rgba(var(--secondary-color-rgb), 0.1); /* Teal tint on hover */
            color: var(--dark-color);
        }
        .franchise-requirements-table tbody tr:hover td {
            color: var(--dark-color);
        }


        /* ===== Franchisee Benefits Section Styling ===== */
        #franchisee-benefits-section {
            background-color: var(--light-gray-alt); 
        }
        .benefit-entry { 
             opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
            display: flex; 
            align-items: stretch; 
        }
        .benefit-entry.in-view {
            opacity: 1;
            transform: translateY(0);
        }
        .benefit-item {
            text-align: center;
            padding: 1.5rem;
            border: 1px solid var(--navbar-border-color);
            border-left: 4px solid transparent; /* Initial transparent left border */
            border-radius: var(--border-radius);
            background-color: var(--white-color); /* White background for cards */
            transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease, border-left-color var(--transition-speed) ease;
            height: 100%;
        }
        .benefit-item:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-medium);
            border-left-color: var(--secondary-color); /* Teal left border on hover */
        }
        .benefit-icon {
            font-size: 2.5rem;
            color: var(--secondary-color);
            margin-bottom: 1rem;
        }
        .benefit-item h5 {
            color: var(--primary-color);
            font-size: 1.15rem;
            margin-bottom: 0.5rem;
        }
        .benefit-item p {
            color: var(--gray-color);
            font-size: 0.9rem;
        }
		
		/* ===== Multi-Step Franchise Form Container ===== */
         /* Custom Flip Animation */
        @keyframes flipIn {
            0% {
                transform: perspective(1000px) rotateY(90deg);
                opacity: 0;
            }
            100% {
                transform: perspective(1000px) rotateY(0deg);
                opacity: 1;
            }
        }
        
        @keyframes flipOut {
            0% {
                transform: perspective(1000px) rotateY(0deg);
                opacity: 1;
            }
            100% {
                transform: perspective(1000px) rotateY(-90deg);
                opacity: 0;
            }
        }
        
        .form-step {
            display: none;
            transform-origin: center;
            backface-visibility: hidden;
        }
        
        .form-step.active {
            display: block;
            animation: flipIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        }
        
        .form-step.leaving {
            animation: flipOut 0.5s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;
        }
        
        /* Flash Modal */
        .flash-modal {
            position: fixed;
            top: 30px;
            right: 30px;
            max-width: 400px;
            width: 90%;
            padding: 25px;
            background: linear-gradient(90deg, var(--secondary-color), var(--accent-color-3));
            color: var(--white-color);
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            z-index: 10000;
            display: flex;
            flex-direction: column;
            transform: translateX(120%);
            transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        
        .flash-modal.show {
            transform: translateX(0);
        }
        
        .flash-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        }
        
        .flash-title {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1.3rem;
            font-weight: 600;
        }
        
        .flash-title i {
            font-size: 1.8rem;
            animation: pulse 1.5s infinite;
        }
        
        .close-flash {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 1.2rem;
            transition: all 0.3s ease;
        }
        
        .close-flash:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: rotate(90deg);
        }
        
        .flash-content {
            font-size: 1.1rem;
            line-height: 1.5;
            padding: 10px 0;
        }
        
        .flash-progress {
            height: 4px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 2px;
            margin-top: 15px;
            overflow: hidden;
        }
        
        .flash-progress-bar {
            height: 100%;
            width: 100%;
            background: white;
            animation: progress 5s linear forwards;
        }
		
		@keyframes progress {
            from { width: 0%; }
            to { width: 100%; }
        }
		
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
        
        /* Enhanced Step Wizard */
        .step-wizard {
            position: relative;
            z-index: 10;
        }
        
        .multi-step-form-container {
            background-color: var(--white-color);
            border-radius: var(--border-radius-lg);
            box-shadow: var(--shadow-strong);
            overflow: hidden;
            margin-top: 30px;
        }

        .step-wizard {
            background-color: rgba(var(--secondary-color-rgb), 0.05);
            padding: 2.5rem 1.5rem;
            border-bottom: 1px solid var(--navbar-border-color);
            position: relative;
        }
        
        .step-wizard .step-wizard-list {
            display: flex;
            justify-content: space-between;
            padding: 0;
            margin: 0;
            list-style: none;
        }
        
        .step-wizard-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            flex-basis: 0;
            flex-grow: 1;
            position: relative;
        }
        
        .step-wizard-item::before {
            content: '';
            position: absolute;
            top: 25px;
            left: -50%;
            transform: translateY(-50%);
            height: 4px;
            width: 100%;
            background-color: var(--navbar-border-color);
            z-index: 1;
            transition: background-color var(--transition-speed) ease;
        }
        
        .step-wizard-item:first-child::before {
            content: none;
        }
        
        .step-wizard-item.completed::before {
            background-color: var(--primary-color);
        }

        .step-wizard-item .progress-count {
            height: 50px;
            width: 50px;
            border-radius: 50%;
            background-color: var(--white-color);
            border: 4px solid var(--navbar-border-color);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--heading-font);
            font-weight: 700;
            font-size: 1.2rem;
            color: var(--gray-color);
            transition: all var(--transition-speed) ease;
            position: relative;
            z-index: 2;
        }
        
        .step-wizard-item .progress-label {
            margin-top: 1rem;
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--gray-color);
            transition: color var(--transition-speed) ease;
        }

        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(var(--secondary-color-rgb), 0.7); }
            70% { box-shadow: 0 0 0 10px rgba(var(--secondary-color-rgb), 0); }
            100% { box-shadow: 0 0 0 0 rgba(var(--secondary-color-rgb), 0); }
        }

        .step-wizard-item.active .progress-count {
            border-color: var(--secondary-color);
            background-color: var(--secondary-color);
            color: var(--white-color);
            transform: scale(1.1);
            animation: pulse 2s infinite;
        }
        
        .step-wizard-item.active .progress-label {
            color: var(--primary-color);
        }
        
        .step-wizard-item.completed .progress-count {
            border-color: var(--primary-color);
            background-color: var(--primary-color);
            color: var(--white-color);
            animation: none;
        }
        
        .step-wizard-item.completed .progress-label {
            color: var(--primary-color);
        }
        
        .step-wizard-item.completed .progress-count::after {
            content: '\f26a';
            font-family: 'bootstrap-icons';
            font-size: 1.5rem;
            position: absolute;
        }
        
        .step-wizard-item.completed .progress-count span {
            display: none;
        }
        
        .form-container {
            padding: 3rem;
            overflow: hidden;
            position: relative;
        }

        .form-step {
            width: 100%;
            flex-shrink: 0;
            padding: 0 0.5rem;
        }
        
        .form-step h3 {
            color: var(--primary-color);
            font-weight: 700;
            margin-bottom: 2.5rem;
            text-align: center;
        }
        
        .form-step .form-label {
            font-weight: 600;
            color: var(--dark-color);
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
        }
        
        .form-control, .form-select {
            height: 50px;
            padding: 0.75rem 1.1rem;
            border-radius: var(--border-radius);
            border: 1px solid #ced4da;
            width: 100%;
            font-size: 1rem;
        }
        
        .form-control:focus, .form-select:focus {
            border-color: var(--secondary-color);
            box-shadow: 0 0 0 0.2rem rgba(102, 16, 242, 0.25);
            outline: none;
        }
        
        .form-step .row {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -10px;
            row-gap: 1.25rem;
        }
        
        .form-step .row > [class*="col-"] {
            padding: 0 10px;
        }

        .button-container {
            display: flex;
            justify-content: space-between;
            margin-top: 3rem;
            padding-top: 2rem;
            border-top: 1px solid var(--navbar-border-color);
        }

        .form-control.is-invalid, .form-select.is-invalid {
            border-color: var(--accent-color-2);
        }
        
        .form-control.is-invalid:focus, .form-select.is-invalid:focus {
            border-color: var(--accent-color-2);
            box-shadow: 0 0 0 0.2rem rgba(255, 107, 107, 0.25);
        }

        @keyframes shake {
          10%, 90% { transform: translate3d(-1px, 0, 0); }
          20%, 80% { transform: translate3d(2px, 0, 0); }
          30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
          40%, 60% { transform: translate3d(4px, 0, 0); }
        }
        
        .shake {
            animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
        }
        
        .table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .table th {
            background-color: #f1f3f9;
            padding: 0.75rem;
        }
        
        .table td, .table th {
            border: 1px solid #dee2e6;
            padding: 0.75rem;
        }
        
        .table-striped tbody tr:nth-of-type(odd) {
            background-color: rgba(0,0,0,0.02);
        }
        
                
        .section-padding {
            padding: 4rem 0;
        }
        
        
        @media (max-width: 991.98px) {
            .form-container {
                padding: 2rem;
            }
            
            .step-wizard {
                padding: 1.5rem 1rem;
            }
        }
        
        @media (max-width: 767.98px) {
            .step-wizard-item .progress-label {
                font-size: 0.75rem;
            }
            
            .step-wizard-item .progress-count {
                width: 40px;
                height: 40px;
                font-size: 1rem;
            }
            
            .step-wizard-item::before {
                top: 20px;
            }
            
            .form-container {
                padding: 1.5rem;
            }
            
           .button-container {
            display: flex;
            justify-content: space-between;
            margin-top: 3rem;
            padding-top: 2rem;
            border-top: 1px solid var(--navbar-border-color);
			}
            
            .button-container button {
                width: 45%;
            }
            
                       
            .flash-message {
                top: 10px;
                right: 10px;
                left: 10px;
                max-width: calc(100% - 20px);
            }
        }
        
        @media (max-width: 575.98px) {
           .form-step h3 {
                font-size: 1.25rem;
                margin-bottom: 1.5rem;
            }
        }
		
		 /* ===== Franchise Role, Do's, Don'ts Section Common Styling ===== */
        .guideline-section { 
            /* Animation handled by JS by adding .in-view to this parent if needed */
        }
        .guideline-card-wrapper { /* New wrapper for animation */
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        .guideline-card-wrapper.in-view {
            opacity: 1;
            transform: translateY(0);
        }
        .guideline-card {
            background-color: var(--white-color);
            border-radius: var(--border-radius);
            padding: 2.5rem; 
            box-shadow: var(--shadow-medium);
            height: 100%;
            border-left: 5px solid transparent; 
            transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease, border-left-color var(--transition-speed) ease;
        }
        .guideline-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-strong);
            border-left-color: var(--secondary-color); 
        }
        .guideline-card .card-title-icon {
            font-size: 2rem;
            color: var(--primary-color);
            margin-right: 0.75rem;
            vertical-align: middle;
        }
        .guideline-card .card-title {
            color: var(--primary-color);
            font-size: 1.75rem; 
            margin-bottom: 1.5rem;
            font-weight: 700;
            display: flex;
            align-items: center;
        }
        .guideline-list {
            list-style: none;
            padding-left: 0;
        }
        .guideline-list li {
            padding: 0.75rem 0 0.75rem 2.5rem; 
            border-bottom: 1px solid var(--navbar-border-color);
            position: relative;
            color: var(--gray-color);
            font-size: 0.95rem; 
            transition: background-color var(--transition-speed) ease;
        }
        .guideline-list li:last-child {
            border-bottom: none;
        }
        .guideline-list li::before { /* Custom bullet */
            content: '';
            position: absolute;
            left: 0.75rem; 
            top: 50%;
            transform: translateY(-50%);
            width: 10px; 
            height: 10px;
            border-radius: 50%;
            background-color: var(--secondary-color);
            transition: transform 0.2s ease;
        }
        .guideline-list li:hover {
            background-color: rgba(var(--secondary-color-rgb), 0.05);
        }
        .guideline-list li:hover::before {
            transform: translateY(-50%) scale(1.3);
        }
        
        /* Specific Colors for Do's and Don'ts icons */
        #dos-section .guideline-list li::before { background-color: var(--accent-color-1); } /* Green for Do's */
        #donts-section .guideline-list li::before { background-color: var(--accent-color-2); } /* Coral for Don'ts */

        #dos-section .card-title-icon { color: var(--accent-color-1); }
        #donts-section .card-title-icon { color: var(--accent-color-2); }

        #franchise-role-section { background-color: var(--light-color); }
        #dos-section { background-color: var(--light-gray-alt); }
        #donts-section { background-color: var(--light-color); }


        

        /* Responsive Adjustments */
        @media (max-width: 991.98px) {
            
             .guideline-card {
                padding: 2rem;
            }
            .guideline-card .card-title {
                font-size: 1.5rem;
            }
        }
        @media (max-width: 767.98px) {
           
            .guideline-card {
                padding: 1.5rem;
            }
            .guideline-list li {
                padding: 0.6rem 0 0.6rem 2rem;
                font-size: 0.9rem;
            }
            .guideline-list li::before {
                left: 0.5rem;
                width: 8px;
                height: 8px;
            }
        }
		
		 /* ===== Download Section Styling ===== */
        .download-section {
            background-color: var(--white-color);
        }
        .download-item-entry { /* Column wrapper for animation */
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.5s ease-out, transform 0.5s ease-out;
             display: flex; 
            align-items: stretch; 
        }
        .download-item-entry.in-view {
            opacity: 1;
            transform: translateY(0);
        }
        .download-item-card {
            background-color: var(--white-color);
            border-radius: var(--border-radius);
            padding: 1.5rem;
            box-shadow: var(--shadow-soft);
            border: 1px solid var(--navbar-border-color);
            transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease, border-color var(--transition-speed) ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            height: 100%; /* Ensure cards in a row have same height */
            width: 100%; /* Ensure card fills column */
        }
        .download-item-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-medium);
            border-color: var(--secondary-color);
        }
        .download-item-icon {
            font-size: 3rem;
            color: var(--primary-color);
            margin-bottom: 1rem;
            padding: 0.75rem;
            background-color: rgba(var(--primary-color-rgb), 0.07);
            border-radius: 50%;
            line-height: 1;
            transition: color 0.3s ease, background-color 0.3s ease;
        }
        .download-item-card:hover .download-item-icon {
            color: var(--secondary-color);
            background-color: rgba(var(--secondary-color-rgb), 0.1);
        }
        .download-item-name {
            font-size: 1.15rem;
            font-weight: 600;
            color: var(--dark-color);
            margin-bottom: 0.5rem;
        }
        .download-item-meta {
            font-size: 0.85rem;
            color: var(--gray-color);
            margin-bottom: 1.25rem;
        }
        .download-item-button {
            margin-top: auto; /* Pushes button to the bottom */
        }
		
		 /* ===== Franchise Search Section Styling ===== */
        .my-account-wrapper {
            background-color: var(--light-gray-alt);
        }
        .search-filter-bar {
            background-color: var(--white-color);
            padding: 1.5rem;
            border-radius: var(--border-radius-lg);
            box-shadow: var(--shadow-medium);
            margin-bottom: 2rem;
        }
        .search-filter-bar .form-select {
            height: 48px;
            border-radius: var(--border-radius-sm);
        }
        .search-filter-bar .btn-pro-theme {
            height: 48px;
            width: 100%;
        }

        .center-card {
            background-color: var(--white-color);
            border-radius: var(--border-radius-lg);
            box-shadow: var(--shadow-soft);
            transition: all var(--transition-speed) ease;
            display: flex;
            flex-direction: column;
            height: 100%;
            border: 1px solid var(--navbar-border-color);
        }
        .center-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-strong);
			border-left: 4px solid var(--secondary-color);
        }
        .center-card-header {
            display: flex;
            align-items: center;
            padding: 1rem 1.5rem;
            border-bottom: 1px solid var(--navbar-border-color);
        }
        .center-card-img {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid var(--secondary-color);
            margin-right: 1rem;
        }
        .center-card-title h5 {
            margin-bottom: 0.25rem;
            font-size: 1.25rem;
            color: var(--primary-color);
        }
        .center-card-title p {
            margin-bottom: 0;
            font-size: 0.9rem;
            color: var(--gray-color);
            font-weight: 500;
        }
        .center-card-body {
            padding: 1.5rem;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        .center-card-body .detail-item {
            display: flex;
            margin-bottom: 0.75rem;
            font-size: 0.9rem;
        }
        .center-card-body .detail-item i {
            color: var(--secondary-color);
            margin-right: 0.75rem;
            width: 20px;
        }
         .center-card-body .detail-item strong {
            font-weight: 600;
            color: var(--medium-dark-color);
         }
        .center-card-footer {
            margin-top: auto; /* Push to bottom */
            padding: 1rem;
            border-top: 1px dashed var(--navbar-border-color);
            text-align: center;
        }
        .status-badge {
            font-weight: 600;
            padding: 0.25rem 0.6rem;
            border-radius: 50px;
            color: var(--white-color);
            text-transform: uppercase;
            font-size: 0.75rem;
            letter-spacing: 0.5px;
        }
        .status-badge.active {
            background-color: var(--secondary-color);
        }
        .status-badge.inactive {
            background-color: var(--accent-color-2);
        }

		
		 /* ===== Top Training Center Section Styling ===== */
        .top-center-section {
            background-color: var(--white-color);
        }
        .top-center-card-wrapper { /* Column wrapper for animation */
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
            display: flex;
            align-items: stretch;
        }
        .top-center-card-wrapper.in-view {
            opacity: 1;
            transform: translateY(0);
        }
        .top-center-card {
            background: var(--white-color);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-medium);
            display: flex;
            flex-direction: column;
            height: 100%;
            transition: all var(--transition-speed) ease;
            overflow: hidden;
            border: 1px solid var(--navbar-border-color);
            position: relative; /* For rank badge positioning */
        }
        .top-center-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-strong);
        }
        .top-center-card-banner {
            height: 180px;
            background-size: cover;
            background-position: center;
            position: relative;
            display: flex;
            align-items: flex-end;
            padding: 1rem;
        }
        .top-center-card-banner::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(var(--dark-color-rgb), 0.8) 0%, transparent 70%);
        }
        .top-center-card-rank {
            position: absolute;
            top: 1rem;
            left: 1rem;
            background-color: var(--secondary-color);
            color: var(--white-color);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            font-weight: 700;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            z-index: 2;
        }
        .top-center-card-logo {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            border: 3px solid var(--white-color);
            box-shadow: 0 0 15px rgba(0,0,0,0.2);
            object-fit: cover;
            position: relative; 
            z-index: 1;
            background-color: var(--light-gray-alt); 
        }
        .top-center-card-content {
            padding: 1.5rem;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        .top-center-name {
            font-size: 1.4rem;
            color: var(--primary-color);
            margin-bottom: 0.25rem;
        }
        .top-center-director {
            font-size: 0.9rem;
            color: var(--secondary-color);
            font-weight: 600;
            margin-bottom: 0.75rem;
        }
        .top-center-location {
            font-size: 0.9rem;
            color: var(--gray-color);
            margin-bottom: 1rem;
        }
        .top-center-location i {
            margin-right: 0.5rem;
        }
        .top-center-achievement {
            font-size: 0.9rem;
            color: var(--dark-color);
            background-color: rgba(var(--accent-color-1-rgb), 0.1);
            padding: 0.5rem 1rem;
            border-radius: var(--border-radius-sm);
            margin-bottom: 1rem; 
            border-left: 3px solid var(--accent-color-1);
        }
        .top-center-achievement i {
            margin-right: 0.5rem;
        }
        .top-center-students { 
            font-size: 0.95rem;
            color: var(--primary-color);
            font-weight: 600;
            margin-top: auto; 
            padding-top: 1rem;
            border-top: 1px solid var(--navbar-border-color);
            text-align: center;
        }
        .top-center-students i {
            color: var(--secondary-color);
            margin-right: 0.5rem;
        }

        /* Swiper Customization */
        .swiper-container { /* General container for swipers if needed */
            width: 100%;
            padding-top: 20px; /* Space for top elements if any */
            padding-bottom: 50px; /* Space for pagination */
        }
        .top-centers-swiper .swiper-slide, .monthly-centers-swiper .swiper-slide {
            display: flex;
            justify-content: center;
            height: auto; /* Ensure slides adapt to content height */
        }
        .swiper-button-next, .swiper-button-prev {
            color: var(--primary-color) !important; 
            background-color: rgba(var(--white-color-rgb), 0.85);
            border-radius: 50%;
            width: 48px !important; 
            height: 48px !important;
            box-shadow: var(--shadow-medium);
            transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease, transform 0.2s ease;
        }
        .swiper-button-next:hover, .swiper-button-prev:hover {
            background-color: var(--primary-color) !important;
            color: var(--white-color) !important;
            transform: scale(1.1);
        }
        .swiper-button-next::after, .swiper-button-prev::after {
            font-size: 1.3rem !important; 
            font-weight: bold;
        }
        .swiper-pagination-bullet {
            background-color: var(--gray-color) !important;
            opacity: 0.6;
            width: 12px !important; 
            height: 12px !important;
            transition: background-color var(--transition-speed) ease, opacity var(--transition-speed) ease, transform 0.2s ease;
            margin: 0 5px !important; 
        }
        .swiper-pagination-bullet-active {
            background-color: var(--secondary-color) !important;
            opacity: 1;
            transform: scale(1.3);
        }
        .swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal {
            bottom: 0px !important; /* Position pagination lower */
        }

        /* Monthly Top Center Card Styling - New Design */
        #monthly-top-centers-section {
            background-color: var(--light-gray-alt);
        }
        .monthly-winner-card {
            background-color: var(--white-color);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-medium); /* Enhanced shadow */
            padding: 1.75rem;
            border: 1px solid var(--navbar-border-color);
            border-left: 5px solid transparent; /* Initial transparent left border */
            transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease, border-left-color var(--transition-speed) ease;
            height: 100%;
            display: flex;
            flex-direction: column;
            position: relative; /* For rank badge */
            overflow: hidden; /* To contain elements like the rank badge if it overlaps */
        }
        .monthly-winner-card:hover {
            transform: translateY(-10px) scale(1.03); /* More pronounced hover */
            box-shadow: var(--shadow-strong);
            border-left-color: var(--accent-color-3); /* Light blue border on hover */
        }
        .monthly-winner-rank-badge {
            position: absolute;
            top: -1px; /* Adjust for better visual placement */
            left: -1px;
            font-size: 0.8rem;
            font-weight: 700;
            color: var(--white-color);
            background-color: var(--accent-color-3);
            padding: 0.5rem 1rem;
            border-bottom-right-radius: var(--border-radius);
            border-top-left-radius: var(--border-radius); /* Match card radius */
            z-index: 2;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .monthly-winner-logo-wrapper {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            background-color: var(--light-color);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 1.5rem auto 1rem auto; /* Center and provide spacing */
            border: 3px solid var(--white-color);
            box-shadow: 0 0 10px rgba(var(--primary-color-rgb),0.15);
        }
        .monthly-winner-logo {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }
        .monthly-winner-info {
            text-align: center;
        }
        .monthly-winner-info h5 { /* Center Name */
            font-size: 1.25rem;
            color: var(--primary-color);
            margin-bottom: 0.2rem;
            font-weight: 700;
        }
        .monthly-winner-info p { /* Director */
            font-size: 0.9rem;
            color: var(--gray-color);
            margin-bottom: 0.75rem;
        }
        .monthly-winner-details {
            font-size: 0.9rem;
            color: var(--gray-color);
            margin-top: 1rem;
            margin-bottom: 1rem;
            flex-grow: 1;
            text-align: center;
        }
        .monthly-winner-details p {
            margin-bottom: 0.5rem;
        }
        .monthly-winner-details i {
            color: var(--secondary-color);
            margin-right: 0.5rem;
        }
        .monthly-winner-footer {
            margin-top: auto;
            padding-top: 1rem;
            border-top: 1px solid var(--navbar-border-color);
            text-align: center;
        }
        .monthly-winner-students {
            font-size: 0.95rem;
            font-weight: 600;
            color: var(--primary-color);
        }
        .monthly-winner-students i {
            color: var(--accent-color-1);
        }
		
		/* ===== Exam Notice Section Styling ===== */
        .notice-filter-bar {
            background-color: var(--white-color);
            padding: 2rem;
            border-radius: var(--border-radius-lg);
            box-shadow: var(--shadow-strong);
            margin-bottom: 3rem;
        }
        
        /* NEW: Attractive Center Title */
        .center-title-wrapper {
            text-align: center;
            padding: 1rem 1.5rem;
            margin-bottom: 2.5rem;
            background: linear-gradient(135deg, var(--primary-color), var(--dark-color));
            border-radius: var(--border-radius);
            position: relative;
            overflow: hidden;
            box-shadow: var(--shadow-medium);
        }
        .center-title-wrapper::before {
            content: '\f1d8'; /* Bootstrap icon for building */
            font-family: 'bootstrap-icons';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 12rem;
            color: rgba(255, 255, 255, 0.05);
            z-index: 0;
        }
        .center-title-wrapper > * {
            position: relative;
            z-index: 1;
        }
        .center-title-wrapper h2 {
            color: var(--white-color);
            font-size: 2.2rem;
            font-weight: 700;
            margin-bottom: 0.25rem;
        }
		
		.center-title-wrapper h3 {
            color: var(--accent-color-4);
            font-size: 1.3rem;
            font-weight: 500;
            margin-bottom: 0.25rem;
        }
        .center-title-wrapper p {
            color: var(--secondary-color);
            font-size: 1.2rem;
            font-family: var(--body-font);
            margin-bottom: 0;
            letter-spacing: 1px;
        }
        
        .notice-card {
            background-color: #fff;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-medium);
            transition: all .3s ease;
            border: 1px solid var(--navbar-border-color);
            overflow: hidden;
            display: flex; /* Added for equal height */
            flex-direction: column; /* Added for equal height */
        }
        .notice-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-strong);
        }

        .notice-course-title {
            text-align: center;
			background-color: var(--primary-color);
            color: var(--white-color);
            padding: 0.75rem 1.5rem;
            font-size: 1.1rem;
            font-weight: 600;
        }

        .notice-title-main {
            text-align: center;
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--secondary-color);
            padding: 1rem;
            background-color: rgba(var(--secondary-color-rgb), 0.1);
            letter-spacing: 1px;
            text-transform: uppercase;
        }
        
        .notice-details-wrapper {
             padding: .5rem;
             flex-grow: 1; /* Added for equal height */
        }

        .notice-detail-item {
            display: flex;
            align-items: center;
            margin-bottom: 0.8rem;
            font-size: 0.95rem;
        }
        .notice-detail-item i {
            color: var(--secondary-color);
            margin-right: 0.8rem;
            font-size: 1.3rem;
            width: 25px;
            text-align: center;
        }
        .notice-detail-item .label {
            font-weight: 600;
        }
        .notice-detail-item .value {
            color: var(--gray-color);
        }
        .notice-detail-item .value.highlight {
            font-weight: 700;
            color: var(--accent-color-2);
        }

        .notice-instruction {
            padding: 1rem 1.5rem;
            border-top: 1px solid var(--navbar-border-color);
            background-color: var(--light-gray-alt);
        }
        .notice-instruction strong {
            display: flex;
            align-items: center;
            font-size: 1.1rem;
            color: var(--primary-color);
            margin-bottom: 0.5rem;
        }
        .notice-instruction p {
            font-size: 0.9rem;
            color: var(--gray-color);
            margin-bottom: 0;
            padding-left: 33px;
        }

        /* Responsive */
        @media (max-width: 991.98px) {
            .center-title-wrapper h2 { font-size: 1.8rem; }
            .center-title-wrapper p { font-size: 1rem; }
        }
       		
		 /* ===== Contact Us Section Styling ===== */
        #contact-us-section {
            background-color: var(--light-color);
        }
        .contact-wrapper {
            background-color: var(--white-color);
            border-radius: var(--border-radius-lg);
            box-shadow: var(--shadow-strong);
            overflow: hidden; /* Important for border-radius on child elements */
        }
        
        .contact-form-column {
            padding: 2.5rem;
        }
         @media (min-width: 992px) {
            .contact-form-column {
                padding: 3rem;
            }
        }
        .contact-form-column .form-title {
            font-size: 2rem;
            color: var(--primary-color);
            margin-bottom: 0.5rem;
            font-weight: 700;
        }
        .contact-form-column .form-subtitle {
            color: var(--gray-color);
            margin-bottom: 2rem;
            font-size: 1rem;
        }
        .contact-form-column .form-label {
            font-weight: 600;
            color: var(--medium-dark-color);
            font-size: 0.9rem;
        }
        .contact-form-column .form-control,
        .contact-form-column .form-select {
            border-radius: var(--border-radius);
            border: 1px solid var(--navbar-border-color);
            padding: 0.85rem 1.1rem;
            font-size: 0.95rem;
        }
        .contact-form-column .form-control:focus,
        .contact-form-column .form-select:focus {
            border-color: var(--secondary-color);
            box-shadow: 0 0 0 0.25rem rgba(var(--secondary-color-rgb), 0.25);
        }
        .contact-form-column .input-group-text {
            background-color: var(--light-gray-alt);
            border-color: var(--navbar-border-color);
            color: var(--primary-color);
        }

        .contact-info-column {
            background-color: var(--primary-color);
            color: var(--white-color);
            padding: 2.5rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        @media (min-width: 992px) {
            .contact-info-column {
                padding: 3rem;
            }
        }
        .contact-info-column .info-title {
            font-size: 1.8rem;
            color: var(--white-color);
            margin-bottom: 1.5rem;
            font-weight: 700;
            border-bottom: 2px solid var(--secondary-color);
            padding-bottom: 0.5rem;
            display: inline-block;
        }
        .contact-info-item {
            display: flex;
            align-items: flex-start; /* Align icon top with text */
            margin-bottom: 1.25rem;
        }
        .contact-info-item i {
            font-size: 1.5rem; /* Larger icons */
            color: var(--secondary-color);
            margin-right: 1rem;
            margin-top: 0.1rem; /* Fine-tune vertical alignment */
            width: 25px; /* Ensure consistent icon spacing */
        }
        .contact-info-item div p {
            margin-bottom: 0.25rem;
            line-height: 1.6;
            font-size: 0.95rem;
            color: rgba(var(--white-color-rgb), 0.9);
        }
        .contact-info-item div p strong {
            color: var(--white-color);
            font-weight: 600;
        }
        .contact-info-column .social-links-contact {
            margin-top: 1.5rem;
            padding-top: 1.5rem;
            border-top: 1px solid rgba(var(--white-color-rgb), 0.2);
        }
        .contact-info-column .social-links-contact a {
            display: inline-flex; 
            align-items: center;
            justify-content: center;
            width: 40px; 
            height: 40px;
            border-radius: 50%;
            background-color: rgba(var(--white-color-rgb), 0.15); 
            color: var(--white-color);
            margin-right: 10px; 
            transition: all var(--transition-speed) ease;
            font-size: 1.1rem; 
        }
        .contact-info-column .social-links-contact a:hover {
            background-color: var(--secondary-color); 
            color: var(--primary-color); 
            transform: translateY(-3px);
        }

        .map-section {
            padding: 0; /* Full width map */
            margin-top: 0; /* Remove margin if contact-wrapper has margin-bottom */
        }
        .map-section iframe {
            display: block; /* Remove any extra space below iframe */
            width: 100%;
            height: 450px;
            border: none;
        }
        
        @keyframes fadeInContactPage {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fadeInContact {
            animation: fadeInContactPage 0.7s ease-out 0.3s forwards;
            opacity: 0;
        }


      

        /* Responsive Adjustments */
        @media (max-width: 991.98px) {
            
            .contact-info-column {
                border-top-left-radius: 0;
                border-top-right-radius: 0;
                border-bottom-left-radius: var(--border-radius-lg);
                border-bottom-right-radius: var(--border-radius-lg);
            }
             .contact-form-column {
                border-top-left-radius: var(--border-radius-lg);
                border-top-right-radius: var(--border-radius-lg);
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;
            }
        }
        @media (max-width: 767.98px) {
           
            .contact-form-column, .contact-info-column {
                padding: 2rem 1.5rem;
            }
        }
		
		
		/* ===== Content Section Styling (for Admission Process, etc.) ===== */
        #admission-details-section { /* This is the main wrapper for all content blocks */
             /* No background color here, it's handled by individual .content-block-fullwidth */
        }

        .content-block-fullwidth { /* New class for full-width sections */
            padding: 80px 0; /* Default padding, like section-padding */
        }
        .content-block-fullwidth:nth-child(odd) { 
            background-color: var(--white-color); 
        }
        .content-block-fullwidth:nth-child(even) {
            background-color: var(--light-gray-alt); 
        }
         @media (max-width: 991.98px) {
            .content-block-fullwidth {
                 padding: 60px 0;
            }
        }


        .image-zoom-wrapper { 
            overflow: hidden;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-medium);
            display: block; 
            margin-bottom: 1.5rem;
        }
        .image-zoom-wrapper img {
            border-radius: var(--border-radius);
            transition: transform var(--transition-speed) ease-in-out;
            display: block; 
            width: 100%; 
        }
        .image-zoom-wrapper:hover img {
            transform: scale(1.08); 
        }

        @media (min-width: 768px) {
            .image-zoom-wrapper {
                margin-bottom: 0; 
            }
        }

        /* Styles for the content *within* the .container of a .content-block-fullwidth */
        .content-block-fullwidth .content-title { 
            font-family: var(--heading-font);
            color: var(--primary-color);
            font-size: 1.8rem; 
            font-weight: 700;
            margin-bottom: 1.25rem;
            text-align: left; 
            display: flex;
            align-items: center;
        }
         .content-block-fullwidth .content-title i {
            font-size: 1em; 
            margin-right: 0.6em;
            color: var(--secondary-color);
        }

        .content-block-fullwidth h3 { 
            font-family: var(--heading-font);
            color: var(--dark-color); 
            font-size: 1.3rem;
            font-weight: 600;
            margin-top: 1.5rem; 
            margin-bottom: 0.75rem;
        }
         .content-block-fullwidth p {
            color: var(--medium-dark-color);
            font-size: 0.95rem;
            margin-bottom: 1rem;
            line-height: 1.8;
        }
        .content-block-fullwidth ul {
            list-style: none;
            padding-left: 0;
        }
        .content-block-fullwidth ul li {
            position: relative;
            padding-left: 35px; 
            margin-bottom: 0.85rem; 
            font-size: 0.95rem;
            color: var(--medium-dark-color);
            line-height: 1.7;
        }
        .content-block-fullwidth ul li i { 
            position: absolute;
            left: 0;
            top: 5px; 
            color: var(--secondary-color);
            font-size: 1.25em; 
        }
        .content-block-fullwidth .btn-pro-theme {
            margin-top: 1.5rem; 
        }

        @keyframes fadeInContentBlock {
            from { opacity: 0; transform: translateY(25px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fadeInContent { /* Initial state before animation is triggered */
            opacity: 0;
        }
        .animate-fadeInContent.start-animation { /* Class added by JS to start animation */
            animation: fadeInContentBlock 0.7s ease-out forwards;
        }


        /* ===== Footer Section ===== */
        #footer {
            background-color: var(--dark-color);
            color: rgba(236, 240, 241,0.8); 
            padding: 80px 0 0 0;
            border-top: 5px solid var(--primary-color); 
        }
        #footer h5 {
            color: var(--white-color);
            font-weight: 700;
            font-size: 1.15rem; 
            margin-bottom: 20px; 
            text-transform: uppercase;
            letter-spacing: 0.8px; 
            position: relative;
            padding-bottom: 10px;
        }
        #footer h5::after { 
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 40px;
            height: 2px;
            background-color: var(--secondary-color); /* Teal */
        }
        #footer p, #footer ul li {
            font-size: 0.9rem; 
            line-height: 1.8;
        }
        #footer a {
            color: rgba(236, 240, 241,0.8);
            text-decoration: none;
            transition: color var(--transition-speed) ease, padding-left var(--transition-speed) ease;
        }
        #footer a:hover {
            color: var(--secondary-color); /* Teal */
            padding-left: 5px; 
        }
        #footer .list-unstyled li {
            margin-bottom: 10px; 
        }
        #footer .list-unstyled li i { 
            margin-right: 8px;
            color: var(--secondary-color); /* Teal */
            font-size: 1rem;
        }
        #footer .social-links a {
            display: inline-flex; 
            align-items: center;
            justify-content: center;
            width: 38px; 
            height: 38px;
            border-radius: 50%;
            background-color: rgba(255,255,255,0.15); 
            color: var(--white-color);
            margin-right: 8px;
            transition: all var(--transition-speed) ease;
            font-size: 1rem;
            border: 1px solid rgba(255,255,255,0.1);
        }
        #footer .social-links a:hover {
            background-color: var(--secondary-color); /* Teal */
            color: var(--dark-color);
            transform: translateY(-3px) scale(1.1); 
            border-color: var(--secondary-color);
        }
        #footer .footer-bottom {
            background-color: var(--medium-dark-color); 
            padding: 20px 0; 
            margin-top: 50px; 
            font-size: 0.85rem;
            border-top: 1px solid rgba(255,255,255,0.05);
        }
        #footer .footer-bottom p {
            margin-bottom: 0;
            color: rgba(236, 240, 241,0.7);
        }
        #footer .footer-bottom a {
            color: var(--secondary-color); /* Teal */
            font-weight: 600;
        }
        #footer .footer-bottom a:hover {
            color: var(--white-color);
            padding-left: 0; 
        }

        

        /* Responsive Adjustments */
        @media (max-width: 991.98px) {
            .navbar-nav .nav-link {
                margin: 8px 0; 
                display: block; 
                text-align: center;
                padding: 10px 15px !important; 
                background-color: transparent;
            }
             .navbar-nav .nav-link > .underline-indicator {
                display: none; 
            }
            .navbar-nav .nav-link:hover,
            .navbar-nav .nav-link.active {
                background-color: rgba(var(--primary-color-rgb), 0.07) !important;
                color: var(--primary-color) !important;
                border-radius: var(--border-radius-sm);
            }
            .navbar .btn-login-center {
                display: block;
                margin: 15px auto 10px auto; 
                width: fit-content;
            }
            .page-section-title.main-title {
                font-size: 2rem;
            }
            .page-section-subtitle {
                font-size: 1.05rem;
                margin-bottom: 40px;
            }
            .content-block-fullwidth .content-title { /* Updated from .content-block */
                font-size: 1.6rem;
            }
             #scrollToTopBtn {
                bottom: 20px;
                right: 20px;
                padding: 10px 12px;
                font-size: 1.3rem;
            }
        }
        @media (max-width: 767.98px) {
            #topbar { display: none !important; }
            .navbar { top: 0 !important; }
            body { padding-top: 0 !important; }
            body.navbar-present-no-topbar {
                padding-top: var(--navbar-height-mobile, 56px) !important; 
            }
            .page-section-title.main-title {
                font-size: 1.8rem;
            }
             .page-section-title.main-title i {
                font-size: 1.8rem;
             }
            .page-section-subtitle {
                font-size: 1rem;
            }
            #footer .text-lg-end { 
                text-align: center !important;
            }
            #footer .social-links {
                 margin-bottom: 20px;
            }
             #scrollToTopBtn {
                bottom: 15px;
                right: 15px;
                padding: 8px 10px;
                font-size: 1.2rem;
            }
            .content-block-fullwidth { /* Updated from .content-block */
                padding: 40px 0; /* Adjusted padding for mobile */
            }
            .content-block-fullwidth .content-title { /* Updated from .content-block */
                font-size: 1.5rem;
            }
             .content-block-fullwidth h3 { /* Updated from .content-block */
                font-size: 1.2rem;
            }
        }
		
		/* ===== Examination process page Content Card Styling ===== */
        .content-section {
             background-color: var(--white-color); 
        }
        .content-card-entry { 
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        .content-card-entry.in-view {
            opacity: 1;
            transform: translateY(0);
        }
        .content-card {
            background-color: var(--white-color);
            border-radius: var(--border-radius);
            padding: 2.5rem;
            box-shadow: var(--shadow-medium);
            border: 1px solid var(--navbar-border-color);
            border-left: 4px solid var(--secondary-color);
            transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
        }
        .content-card:hover {
             box-shadow: var(--shadow-strong);
             transform: translateY(-5px);
        }
        .content-card h4 {
            color: var(--primary-color);
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
        }
        .content-card h4 i {
            color: var(--secondary-color);
            margin-right: 0.75rem;
            font-size: 1.5rem;
        }
        .content-card p, .content-card ul li {
            color: var(--gray-color);
            font-size: 0.95rem;
        }
        .content-card ul { 
            list-style: none;
            padding-left: 0;
        }
        .content-card ul li {
            margin-bottom: 0.75rem;
            display: flex;
            align-items: flex-start;
        }
        .content-card ul li i {
            color: var(--secondary-color);
            margin-right: 0.75rem;
            font-size: 1.2rem;
            margin-top: 0.15rem; 
        }

        /* ===== Table Styling ===== */
         .styled-table {
            width: 100%;
            margin-top: 1.5rem;
            border-collapse: separate; 
            border-spacing: 0;
            box-shadow: var(--shadow-soft);
            border: 1px solid var(--navbar-border-color);
            border-radius: var(--border-radius-sm);
            overflow: hidden; 
        }
        .styled-table thead th {
            background: linear-gradient(to right, var(--primary-color), var(--medium-dark-color));
            color: var(--white-color);
            padding: 1rem 1.25rem;
            text-align: center;
            font-weight: 600;
            border-bottom: 3px solid var(--secondary-color);
            text-transform: uppercase;
        }
        .styled-table tbody td {
            padding: 0.85rem 1rem;
            border-bottom: 1px solid var(--navbar-border-color);
            color: var(--gray-color);
            font-size: 1.3rem;
            text-align: center;
        }
         .styled-table tbody td:first-child {
            text-align: center;
            font-weight: 500;
            color: var(--dark-color);
        }
        .styled-table tbody tr:last-child td {
            border-bottom: none;
        }
        .styled-table tbody tr:nth-child(even) {
            background-color: var(--light-gray-alt);
        }
         .styled-table tbody tr:hover {
            background-color: rgba(var(--secondary-color-rgb), 0.1);
        }
        
        /* Alternate background for sections */
        .bg-light-alt {
            background-color: var(--light-gray-alt);
        }
		
		/* ===== Student Verification Section Styling ===== */
        #verification-section {
            background-color: var(--light-gray-alt);
        }
        .verification-form-container {
            max-width: 700px;
            margin: 0 auto;
            background-color: var(--white-color);
            padding: 2.5rem;
            border-radius: var(--border-radius-lg);
            box-shadow: var(--shadow-strong);
        }
        .verification-form-container .form-control {
            height: 50px; /* Taller input */
        }
        .verification-form-container .btn-pro-theme {
             height: 50px;
        }

        #verification-result-container {
            margin-top: 2rem;
        }
        
        /* New Verification Result Card Styles */
        .verification-result-card {
            background-color: var(--white-color);
            padding: 2.5rem;
            border-radius: var(--border-radius-lg);
            box-shadow: var(--shadow-strong);
            border-left: 5px solid var(--secondary-color); 
            position: relative;
            overflow: hidden;
        }
        
        .verification-result-card::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 150px;
            height: 150px;
            background: linear-gradient(135deg, rgba(var(--secondary-color-rgb), 0.08) 0%, rgba(var(--accent-color-1-rgb), 0.04) 100%);
            border-radius: 50%;
            transform: translate(30%, -30%);
            z-index: 0;
        }
        
        .verification-result-card.failed {
             border-left-color: var(--accent-color-2);
        }
        
        .verification-result-card.failed::before {
            background: linear-gradient(135deg, rgba(var(--accent-color-2-rgb), 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
        }
        
        .result-header {
            display: flex;
            align-items: center;
            margin-bottom: 1.8rem;
            position: relative;
            z-index: 1;
        }
        
        .result-icon {
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background-color: rgba(var(--secondary-color-rgb), 0.15);
            margin-right: 1.2rem;
            flex-shrink: 0;
        }
        
        .result-icon i {
            font-size: 1.8rem;
            color: var(--secondary-color);
        }
        
        .verification-result-card.failed .result-icon {
            background-color: rgba(var(--accent-color-2-rgb), 0.15);
        }
        
        .verification-result-card.failed .result-icon i {
            color: var(--accent-color-2);
        }
        
        .result-title h3 {
            color: var(--primary-color);
            font-size: 1.6rem;
            margin-bottom: 0.25rem;
        }
        
        .result-title p {
            color: var(--gray-color);
            margin-bottom: 0;
        }
        
        .result-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
            position: relative;
            z-index: 1;
        }
        
        .result-item {
            background-color: rgba(var(--primary-color-rgb), 0.03);
            border-radius: var(--border-radius);
            padding: 1.2rem;
            transition: all 0.3s ease;
        }
        
        .result-item:hover {
            background-color: rgba(var(--secondary-color-rgb), 0.05);
            transform: translateY(-3px);
            box-shadow: var(--shadow-soft);
        }
        
        .result-label {
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--gray-color);
            margin-bottom: 0.5rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            display: flex;
            align-items: center;
        }
        
        .result-label i {
            margin-right: 0.5rem;
            color: var(--secondary-color);
        }
        
        .result-value {
            font-size: 1.1rem;
            color: var(--dark-color);
            font-weight: 600;
            margin-bottom: 0;
            word-break: break-word;
        }
        
        .result-item.special {
            background-color: rgba(var(--accent-color-4-rgb), 0.07);
            border-left: 3px solid var(--accent-color-4);
        }
        
        .result-item.special .result-label {
            color: var(--accent-color-4);
        }
        
        .result-photo {
            grid-column: span 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 1.5rem;
        }
        
        .result-photo img {
            width: 150px;
            height: 180px;
            object-fit: cover;
            border-radius: var(--border-radius);
            border: 2px solid var(--navbar-border-color);
            margin-bottom: 1rem;
            box-shadow: var(--shadow-soft);
        }
        
        .status-badge {
            font-weight: 600;
            padding: 0.3rem 0.75rem;
            border-radius: 50px;
            color: var(--white-color);
            text-transform: uppercase;
            font-size: 0.8rem;
            display: inline-block;
        }
        
        .status-badge.passed {
            background-color: var(--secondary-color);
        }
        
        .status-badge.failed {
            background-color: var(--accent-color-2);
        }
        
        .status-badge.notavail {
            background-color: var(--gray-color);
        }
        
        .certificate-action {
            grid-column: span 2;
            text-align: center;
            padding: 1.5rem;
            margin-top: 1rem;
            background: linear-gradient(to right, rgba(var(--accent-color-1-rgb), 0.05), rgba(var(--accent-color-3-rgb), 0.05));
            border-radius: var(--border-radius);
        }
        
        .certificate-action .btn {
            min-width: 200px;
			text-decoration: none;
        }
        
        /* Animation */
        @keyframes fadeInVerification {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .animate-fadeInVerification {
            animation: fadeInVerification 0.6s ease-out forwards;
        }
        
        /* Responsive adjustments */
        @media (max-width: 768px) {
            .result-grid {
                grid-template-columns: 1fr;
            }
            
            .result-photo, .certificate-action {
                grid-column: span 1;
            }
            
            .result-header {
                flex-direction: column;
                text-align: center;
            }
            
            .result-icon {
                margin-right: 0;
                margin-bottom: 1rem;
            }
            
            .verification-result-card {
                padding: 1.8rem;
            }
        }
        

		
		/* New Event Card Styling */
        .event-card-new {
            background-color: var(--white-color);
            border-radius: var(--border-radius-lg);
            box-shadow: var(--shadow-medium);
            transition: all var(--transition-speed) ease;
            display: flex;
            flex-direction: column;
            height: 100%; /* For equal height cards in a row */
            margin-bottom: 1.5rem; 
        }
        .event-card-new:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-strong);
        }
        .event-card-new .event-image-new {
            height: 230px; /* Slightly taller image */
            overflow: hidden;
            border-top-left-radius: var(--border-radius-lg);
            border-top-right-radius: var(--border-radius-lg);
            position: relative; /* For potential date badge overlay */
        }
        .event-card-new .event-image-new img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
        .event-card-new:hover .event-image-new img {
            transform: scale(1.08);
        }
        
        .event-card-new .event-date-badge { /* New date badge style */
            position: absolute;
            top: 1rem;
            left: 1rem;
            background-color: rgba(var(--primary-color-rgb), 0.9);
            color: var(--white-color);
            padding: 0.5rem 0.8rem;
            border-radius: var(--border-radius-sm);
            text-align: center;
            line-height: 1.2;
            z-index: 10;
            font-family: var(--heading-font);
        }
        .event-card-new .event-date-badge .day {
            font-size: 1.6rem;
            font-weight: 700;
            display: block;
        }
        .event-card-new .event-date-badge .month {
            font-size: 0.8rem;
            text-transform: uppercase;
            font-weight: 500;
            display: block;
        }
        .event-card-new:hover .event-date-badge {
            background-color: rgba(var(--secondary-color-rgb), 0.95);
            color: var(--dark-color);
        }

        .event-card-new .event-content-new {
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }
        .event-card-new .event-title-new {
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 0.75rem;
            line-height: 1.4;
        }
        .event-card-new .event-title-new a {
            color: inherit;
            text-decoration: none;
            transition: color var(--transition-speed) ease;
        }
        .event-card-new .event-title-new a:hover {
            color: var(--secondary-color);
        }
        .event-card-new .event-description-new {
            font-size: 0.9rem;
            color: var(--gray-color);
            margin-bottom: 1rem;
            flex-grow: 1; /* Pushes meta and button to bottom */
            line-height: 1.6;
        }
        .event-card-new .event-meta-new {
            font-size: 0.85rem;
            color: var(--medium-dark-color);
            display: flex;
            flex-wrap: wrap; /* Allow wrapping on small screens */
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
            border-top: 1px solid var(--navbar-border-color);
            padding-top: 0.75rem;
            margin-top: 0.75rem;
        }
        .event-card-new .event-meta-new span {
            display: flex;
            align-items: center;
            margin-bottom: 0.25rem; /* Spacing if they wrap */
        }
        .event-card-new .event-meta-new i {
            color: var(--secondary-color);
            margin-right: 0.4rem;
            font-size: 1rem;
        }
        .event-card-new .btn-pro-theme {
            margin-top: auto; /* Pushes button to bottom */
            width: 100%; /* Make button full width of its container */
        }

        /* Event Modal Styling from provided CSS (minor adjustments for consistency) */
        .event-modal .modal-content { 
            background-color: var(--white-color);
            border-radius: var(--border-radius-lg); 
            border: none;
            box-shadow: var(--shadow-strong);
        }
        .event-modal-header {
            background: linear-gradient(90deg, var(--secondary-color), var(--accent-color-3)); 
            color: var(--white-color);
            border-bottom: none; 
            padding: 1.5rem;
        }
        .event-modal-header .modal-title {
            font-family: var(--heading-font); 
            font-weight: 700;
            font-size: 1.5rem;
        }
        .event-modal .modal-header .btn-close { 
             filter: invert(1) grayscale(100%) brightness(200%);
        }
        .event-modal .modal-body { 
            padding: 1.5rem 2rem;
        }
        .event-modal-label {
            color: var(--primary-color);
            font-weight: 600;
            margin-right: 0.5rem;
        }
        .event-modal .modal-body hr { 
            margin-top: 1.2rem;
            margin-bottom: 1.2rem;
            border-top: 1px solid var(--navbar-border-color);
        }
        .event-modal .modal-body ul { 
            padding-left: 1.5rem;
            margin-bottom: 1rem;
        }
        .event-modal .modal-body ul li { 
            margin-bottom: 0.4rem;
            color: var(--gray-color);
        }
        .event-modal .modal-body ul li::marker { 
            color: var(--secondary-color);
        }
        .speaker-info {
            margin-bottom: 0.8rem;
            padding-left: 1rem;
            border-left: 3px solid var(--secondary-color);
        }
        .speaker-info strong {
            display: block;
            color: var(--dark-color);
            font-weight: 600;
        }
        .speaker-info em {
            font-size: 0.9em;
            color: var(--gray-color);
        }
        .event-modal .modal-footer { 
            border-top: 1px solid var(--navbar-border-color);
            padding: 1rem 2rem;
        }
        .event-modal.fade .modal-dialog { 
            transition: transform .3s ease-out;
            transform: translateY(-50px);
        }
        .event-modal.show .modal-dialog { 
            transform: translateY(0);
        }

        @keyframes fadeInEventItem {
            from { opacity: 0; transform: translateY(30px) scale(0.95); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }
        .animate-fadeInEvent {
            animation: fadeInEventItem 0.6s ease-out forwards;
            opacity: 0; 
        }
		
		/* ===== Admit Card Section Styling ===== */
        #admit-card-section {
            background-color: var(--light-gray-alt);
        }
        .admit-card-wrapper {
            background-color: var(--white-color);
            border-radius: var(--border-radius-lg);
            box-shadow: var(--shadow-strong);
            overflow: hidden;
            display: flex;
            flex-wrap: wrap; /* Allow wrapping on small screens */
        }
        .admit-card-form-panel {
            flex: 1 1 320px; /* Base width for the form panel */
            padding: 2.5rem;
            background-color: var(--light-color); /* Slightly different background for form panel */
            border-right: 1px solid var(--navbar-border-color);
        }
         .admit-card-form-panel .form-label {
            font-weight: 600;
            color: var(--medium-dark-color);
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
        }
        .admit-card-form-panel .form-control {
            border-radius: var(--border-radius-sm);
            border: 1px solid var(--navbar-border-color);
            padding: 0.8rem 1rem;
            font-size: 0.95rem;
        }
        .admit-card-form-panel .form-control:focus {
            border-color: var(--secondary-color);
            box-shadow: 0 0 0 0.25rem rgba(var(--secondary-color-rgb), 0.25);
        }

        .admit-card-display-panel {
            flex: 2 1 500px; /* Takes more space */
            padding: 2.5rem;
        }
        .admit-card-header {
            text-align: center;
            border-bottom: 2px solid var(--primary-color);
            padding-bottom: 1rem;
            margin-bottom: 1.5rem;
        }
        .admit-card-header h4 {
            font-size: 1.6rem;
            color: var(--primary-color);
            margin-bottom: 0;
        }
        .admit-card-body {
            display: flex;
            flex-wrap: wrap; /* Allow wrapping for details */
            gap: 1.5rem;
        }
        .admit-card-photo {
            flex-shrink: 0;
            text-align: center;
        }
        .admit-card-photo img {
            width: 120px;
            height: 140px; /* Adjusted height for admit card photo */
            object-fit: cover;
            border: 4px solid var(--navbar-border-color);
            border-radius: var(--border-radius);
        }
        .admit-card-details {
            flex-grow: 1;
        }
        .admit-card-details .detail-item {
            margin-bottom: 0.75rem;
            display: flex;
        }
        .admit-card-details .detail-item .label {
            font-weight: 600;
            color: var(--medium-dark-color);
            width: 120px; /* Fixed width for labels */
        }
        .admit-card-details .detail-item .value {
            color: var(--dark-color);
        }
        .admit-card-footer {
            text-align: center;
            margin-top: 2rem;
            padding-top: 1.5rem;
            border-top: 1px dashed var(--navbar-border-color);
        }

        @media (max-width: 991.98px) {
            .admit-card-form-panel {
                border-right: none;
                border-bottom: 1px solid var(--navbar-border-color);
            }
        }
        @media (max-width: 575.98px) {
            .admit-card-body {
                flex-direction: column;
                align-items: center;
                text-align: center;
            }
            .admit-card-details .detail-item {
                flex-direction: column;
                align-items: center;
            }
             .admit-card-details .detail-item .label {
                 width: auto;
                 margin-bottom: 0.2rem;
            }
        }

        @keyframes fadeInAdmitCard {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fadeInAdmitCard {
            animation: fadeInAdmitCard 0.6s ease-out forwards;
        }
		
		.dob-badge {
        display: inline-block;
        background: linear-gradient(90deg, var(--secondary-color), var(--accent-color-3));
        color: #fff;
        padding: 8px 16px;
        font-size: 16px;
        border-radius: 30px;
        font-weight: 500;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }
	
	/* ===== E-Learning Admission Section Styling ===== */
        .my-account-wrapper {
            background-color: var(--light-gray-alt);
        }
        .admission-form-wrapper {
             background-color: var(--white-color);
            border-radius: var(--border-radius-lg);
            box-shadow: var(--shadow-strong);
            padding: 2.5rem;
        }
         @media (min-width: 992px) {
            .admission-form-wrapper {
                 padding: 3rem;
            }
        }
        .form-section-header {
            text-align: center;
            padding: 1rem;
            background-color: var(--light-color);
            color: var(--primary-color);
            font-family: var(--heading-font);
            font-size: 1.25rem;
            font-weight: 700;
            border-radius: var(--border-radius);
            margin-bottom: 2rem;
        }
        .admission-form-wrapper .form-label {
            font-weight: 600;
            color: var(--medium-dark-color);
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
        }
        .admission-form-wrapper .form-control,
        .admission-form-wrapper .form-select {
            border-radius: var(--border-radius-sm);
            border: 1px solid var(--navbar-border-color);
        }
        .admission-form-wrapper .form-control:focus,
        .admission-form-wrapper .form-select:focus {
             border-color: var(--secondary-color);
             box-shadow: 0 0 0 0.25rem rgba(var(--secondary-color-rgb), 0.25);
        }
        .student-photo-preview {
            display: block;
            margin: 1rem auto;
            width: 150px;
            height: 180px;
            border: 3px solid var(--navbar-border-color);
            border-radius: var(--border-radius);
            object-fit: cover;
            background-color: var(--light-gray-alt);
        }
		
		 /* ===== Exam Notice Section Styling ===== */
        .my-account-wrapper {
            background-color: var(--light-gray-alt);
        }
        .notice-filter-bar {
            background-color: var(--white-color);
            padding: 1.5rem;
            border-radius: var(--border-radius-lg);
            box-shadow: var(--shadow-medium);
            margin-bottom: 2rem;
        }
        .notice-filter-bar .form-select {
            height: 48px;
            border-radius: var(--border-radius-sm);
        }
        .notice-filter-bar .btn-pro-theme {
            height: 48px;
            width: 100%;
        }

        .notice-board {
            margin-bottom: 2rem;
        }
        .notice-board-header {
            color: var(--primary-color);
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            padding-bottom: 0.75rem;
            border-bottom: 2px solid var(--primary-color);
        }
        .notice-card {
            background-color: var(--white-color);
            border-radius: var(--border-radius-lg);
            padding: 1.5rem;
            box-shadow: var(--shadow-soft);
            border-left: 5px solid var(--secondary-color);
            transition: all var(--transition-speed) ease;
        }
        .notice-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-medium);
        }
        .notice-card .course-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--secondary-color);
            margin-bottom: 1.25rem;
        }
        .notice-card .notice-title-main {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--primary-color);
            text-align: center;
            background: var(--light-color);
            padding: 0.5rem;
            border-radius: var(--border-radius-sm);
            margin-bottom: 1.25rem;
        }
        .notice-detail-item {
            font-size: 1rem;
            margin-bottom: 0.75rem;
            display: flex;
            align-items: center;
        }
        .notice-detail-item i {
            color: var(--primary-color);
            margin-right: 0.75rem;
            font-size: 1.1rem;
        }
        .notice-detail-item .label {
            font-weight: 600;
            color: var(--medium-dark-color);
            width: 100px;
        }
        .notice-detail-item .value {
            color: var(--dark-color);
        }
        .notice-detail-item .value.highlight {
            color: var(--accent-color-2);
            font-weight: 600;
        }
        .notice-instruction {
            margin-top: 1.5rem;
            padding-top: 1rem;
            border-top: 1px dashed var(--navbar-border-color);
        }
        .notice-instruction strong {
            display: block;
            color: var(--primary-color);
            margin-bottom: 0.5rem;
        }
        .notice-instruction p {
            font-size: 0.95rem;
            color: var(--gray-color);
        }
		
		/* ===== Center Login Section Styling ===== */
        #center-login-section {
            background-color: var(--light-color); /* Light background for the whole section */
            display: flex;
            align-items: center; /* Vertically center the login box */
        }
        .center-login-box {
            background-color: var(--white-color);
            border-radius: var(--border-radius-lg);
            box-shadow: var(--shadow-strong);
            overflow: hidden; /* To contain rounded corners of children */
            display: flex; /* For side-by-side layout */
            width: 100%;
            max-width: 1000px; /* Max width of the login box */
            margin: auto; /* Center the box if section padding is used */
        }

        .center-login-image-panel {
            flex-basis: 50%; /* Takes up half the width */
            background-size: cover;
            background-position: center;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: flex-end; /* Align content to bottom */
            padding: 2.5rem;
            color: var(--white-color);
            min-height: 600px; /* Ensure consistent height */
        }
        .center-login-image-panel::before { /* Gradient overlay */
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: linear-gradient(to top, rgba(var(--primary-color-rgb), 0.85) 0%, rgba(var(--dark-color-rgb), 0.5) 60%, transparent 100%);
            z-index: 1;
        }
        .center-login-image-panel .overlay-content {
            position: relative;
            z-index: 2;
        }
        .center-login-image-panel .overlay-content .institute-logo-center-login {
            max-height: 45px;
            margin-bottom: 1rem;
            filter: brightness(0) invert(1); /* Make logo white */
        }
        .center-login-image-panel .overlay-content h2 {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: var(--white-color);
        }
        .center-login-image-panel .overlay-content p {
            font-size: 1rem;
            margin-bottom: 0;
            opacity: 0.9;
        }

        .center-login-form-panel {
            flex-basis: 50%; /* Takes up the other half */
            padding: 3rem; /* Generous padding for the form */
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .center-login-form-container .form-title {
            color: var(--primary-color);
            font-weight: 700;
            font-size: 2rem;
            margin-bottom: 0.75rem;
        }
        .center-login-form-container .form-subtitle {
            color: var(--gray-color);
            font-size: 0.95rem;
            margin-bottom: 2rem;
        }
        .center-login-form-container .form-label {
            font-weight: 600;
            color: var(--medium-dark-color);
            margin-bottom: 0.5rem;
            font-size: 0.9rem;
        }
        .center-login-form-container .form-control {
            border-radius: var(--border-radius);
            border: 1px solid var(--navbar-border-color);
            padding: 0.9rem 1.2rem;
            transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
            font-size: 0.95rem;
        }
        .center-login-form-container .form-control:focus {
            border-color: var(--secondary-color);
            box-shadow: 0 0 0 0.25rem rgba(var(--secondary-color-rgb), 0.25);
        }
        .center-login-form-container .input-group-text {
            background-color: var(--light-color);
            border-color: var(--navbar-border-color);
            color: var(--primary-color);
            border-radius: var(--border-radius) 0 0 var(--border-radius);
        }
        .center-login-form-container .form-control {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
         .center-login-form-container .input-group > .form-control:not(:first-child):not(.datepicker-input) { /* For standalone inputs */
            border-top-left-radius: var(--border-radius);
            border-bottom-left-radius: var(--border-radius);
        }
        .center-login-form-container .form-check-input {
            border-color: var(--navbar-border-color);
            margin-top: 0.2em; /* Align better with label */
        }
        .center-login-form-container .form-check-input:checked {
            background-color: var(--secondary-color);
            border-color: var(--secondary-color);
        }
        .center-login-form-container .form-check-input:focus {
            box-shadow: 0 0 0 0.25rem rgba(var(--secondary-color-rgb), 0.25);
        }
        .center-login-form-container .form-check-label {
            font-size: 0.9rem;
            color: var(--medium-dark-color);
            cursor: pointer;
        }
        .center-login-form-container .btn-pro-theme-gradient {
            width: 100%;
            padding: 0.9rem 1.5rem;
            font-size: 1.05rem;
            letter-spacing: 1px;
        }
        .center-login-form-container .forgot-password-link {
            display: block;
            text-align: right;
            margin-top: 1rem;
            font-size: 0.9rem;
            color: var(--secondary-color);
            text-decoration: none;
            transition: color var(--transition-speed) ease;
        }
        .center-login-form-container .forgot-password-link:hover {
            color: var(--primary-color);
            text-decoration: underline;
        }
		
		.center-login-form-container .back-to-login-link {
            display: block;
            text-align: center;
            margin-top: 1.5rem;
            font-size: 0.9rem;
            color: var(--secondary-color);
            text-decoration: none;
            transition: color var(--transition-speed) ease;
        }
        .center-login-form-container .back-to-login-link:hover {
            color: var(--primary-color);
            text-decoration: underline;
        }
        #centerLoginStatusMessage {
            font-size: 0.9rem;
        }

        @media (max-width: 991.98px) {
            .center-login-box {
                max-width: 700px; /* Adjust max-width for tablets */
            }
            .center-login-form-panel {
                 padding: 2.5rem;
            }
        }
        @media (max-width: 767.98px) {
            .center-login-box {
                flex-direction: column; /* Stack image and form */
                max-width: 450px; /* Max width for mobile */
            }
            .center-login-image-panel {
                min-height: 250px; /* Reduced height for mobile */
                flex-basis: auto; /* Allow natural height */
                border-bottom-left-radius: 0; /* Remove bottom radius when stacked */
                border-bottom-right-radius: 0;
            }
            .center-login-form-panel {
                padding: 2rem 1.5rem; /* Adjust padding for mobile */
                flex-basis: auto;
                border-top-left-radius: 0; /* Remove top radius when stacked */
                border-top-right-radius: 0;
            }
            .center-login-form-container .form-title {
                font-size: 1.6rem;
            }
        }

        @keyframes fadeInCenterLogin {
            from { opacity: 0; transform: scale(0.95) translateY(10px); }
            to { opacity: 1; transform: scale(1) translateY(0); }
        }
        .animate-fadeInCenterLogin {
            animation: fadeInCenterLogin 0.7s ease-out 0.3s forwards;
            opacity: 0;
        }
		
		/* ===== Student Login Section Styling ===== */
        #student-login-section {
            background-color: var(--light-gray-alt); 
        }
        .login-card-wrapper {
            background-color: var(--white-color);
            border-radius: var(--border-radius-lg);
            overflow: hidden; 
            box-shadow: var(--shadow-strong);
            border: 1px solid var(--navbar-border-color);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .login-card-wrapper:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(var(--dark-color-rgb), 0.15);
        }

        .login-image-section {
            background-size: cover;
            background-position: center;
            position: relative; 
            min-height: 550px; /* Adjusted height */
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0; /* Remove padding if image is direct background */
        }
        .login-image-section .login-image-overlay {
            background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.85) 0%, rgba(var(--secondary-color-rgb), 0.7) 100%);
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 2.5rem; /* Increased padding */
        }
        .login-image-overlay .institute-logo-login {
            max-height: 50px;
            margin-bottom: 1.5rem;
        }
        .login-image-overlay h2 {
            font-size: 2.2rem; /* Slightly larger */
            color: var(--white-color);
            margin-bottom: 1rem;
            font-weight: 700;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
        }
        .login-image-overlay p {
            font-size: 1.1rem;
            color: rgba(var(--white-color-rgb), 0.95); /* Brighter text */
            margin-bottom: 0;
            max-width: 350px;
        }

        .login-form-section {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2.5rem; /* Consistent padding */
        }
        .login-form-container {
            width: 100%;
            max-width: 420px; 
        }
        .login-form-container .form-title {
            color: var(--primary-color);
            font-weight: 700;
            font-size: 2rem; /* Larger title */
            margin-bottom: 0.5rem;
        }
        .login-form-container .form-subtitle {
            color: var(--gray-color);
            font-size: 0.95rem;
            margin-bottom: 2rem; /* More space after subtitle */
        }

        .login-form-container .form-label {
            font-weight: 600;
            color: var(--medium-dark-color); /* Slightly softer than --dark-color */
            margin-bottom: 0.5rem;
            font-size: 0.9rem;
        }
        .login-form-container .form-control {
            border-radius: var(--border-radius); /* Consistent larger radius */
            border: 1px solid var(--navbar-border-color);
            padding: 0.9rem 1.2rem; /* Slightly taller inputs */
            transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
            font-size: 0.95rem;
        }
        .login-form-container .form-control:focus {
            border-color: var(--secondary-color);
            box-shadow: 0 0 0 0.25rem rgba(var(--secondary-color-rgb), 0.25); /* Standard BS focus */
        }
        .login-form-container .input-group-text {
            background-color: var(--light-color);
            border-color: var(--navbar-border-color);
            color: var(--primary-color);
            border-radius: var(--border-radius) 0 0 var(--border-radius); /* Match input */
        }
         .login-form-container .form-control { /* Ensure input right side matches */
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
        .login-form-container .input-group > .form-control:not(:first-child) { /* For standalone inputs without prepended icon */
            border-top-left-radius: var(--border-radius);
            border-bottom-left-radius: var(--border-radius);
        }


        .login-form-container .form-check-input {
            border-color: var(--navbar-border-color);
        }
        .login-form-container .form-check-input:checked {
            background-color: var(--secondary-color);
            border-color: var(--secondary-color);
        }
        .login-form-container .form-check-input:focus {
            box-shadow: 0 0 0 0.25rem rgba(var(--secondary-color-rgb), 0.25);
        }
        .login-form-container .form-check-label {
            font-size: 0.9rem;
            color: var(--medium-dark-color);
            cursor: pointer;
        }

        .login-form-container .btn-pro-theme-gradient {
            width: 100%;
            padding: 0.9rem 1.5rem; /* Taller button */
            font-size: 1.05rem; /* Slightly larger font */
            letter-spacing: 1px;
        }
        .forgot-password-link {
            display: block;
            text-align: right;
            margin-top: 1rem; /* More space */
            font-size: 0.9rem; /* Slightly larger */
            color: var(--secondary-color);
            text-decoration: none;
            transition: color var(--transition-speed) ease;
        }
        .forgot-password-link:hover {
            color: var(--primary-color);
            text-decoration: underline;
        }
        #loginStatusMessage {
            font-size: 0.9rem;
        }

        @media (max-width: 767.98px) {
            .login-image-section {
                min-height: 280px; 
            }
            .login-form-section {
                padding: 2rem 1.5rem; /* Adjust padding */
            }
            .login-form-container .form-title {
                font-size: 1.6rem;
            }
            .login-image-overlay h2 {
                font-size: 1.8rem;
            }
            .login-image-overlay p {
                font-size: 1rem;
            }
        }
		
		/* ===== Self Registration Form Section Styling ===== */
        #self-registration-section {
            background-color: var(--light-gray-alt);
        }
        .registration-form-container {
            background-color: var(--white-color);
            padding: 2.5rem;
            border-radius: var(--border-radius-lg);
            box-shadow: var(--shadow-strong);
            border: 1px solid var(--navbar-border-color);
            max-width: 800px; /* Control max width of the form */
            margin-left: auto;
            margin-right: auto;
        }
        .registration-form-container .form-label {
            font-weight: 600;
            color: var(--dark-color);
            margin-bottom: 0.5rem;
            font-size: 0.9rem;
        }
        .registration-form-container .form-control,
        .registration-form-container .form-select {
            border-radius: var(--border-radius-sm);
            border: 1px solid var(--navbar-border-color);
            padding: 0.85rem 1.1rem;
            transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
            font-size: 0.95rem;
        }
        .registration-form-container .form-control:focus,
        .registration-form-container .form-select:focus {
            border-color: var(--secondary-color);
            box-shadow: 0 0 0 0.2rem rgba(var(--secondary-color-rgb), 0.25);
        }
        .registration-form-container .form-control.is-invalid,
        .registration-form-container .form-select.is-invalid {
            border-color: var(--accent-color-2) !important;
        }
        .registration-form-container .form-control.is-invalid:focus,
        .registration-form-container .form-select.is-invalid:focus {
            box-shadow: 0 0 0 0.2rem rgba(var(--accent-color-2-rgb), 0.25) !important;
        }
        .registration-form-container .input-group-text {
            background-color: var(--light-color);
            border-color: var(--navbar-border-color);
            color: var(--primary-color);
        }
        .registration-form-container .btn-pro-theme-gradient {
            width: 100%;
            padding: 0.85rem 1.5rem;
            font-size: 1rem;
        }
        .form-floating > .form-control:focus ~ label,
        .form-floating > .form-control:not(:placeholder-shown) ~ label,
        .form-floating > .form-select ~ label {
            color: var(--secondary-color); /* Custom color for floating label when active/filled */
        }
        .login-prompt {
            text-align: center;
            margin-top: 2rem;
            padding-top: 1.5rem;
            border-top: 1px solid var(--navbar-border-color);
        }
        .login-prompt p {
            margin-bottom: 0.5rem;
            color: var(--gray-color);
            font-size: 0.95rem;
        }
        .login-prompt .sign-in-link {
            font-weight: 600;
            color: var(--secondary-color);
            text-decoration: none;
            transition: color var(--transition-speed) ease, transform var(--transition-speed) ease;
            display: inline-block; /* For transform */
        }
        .login-prompt .sign-in-link:hover {
            color: var(--primary-color);
            text-decoration: underline;
            transform: translateY(-2px);
        }
        .login-prompt .sign-in-link i {
            margin-right: 0.3rem;
            transition: transform 0.3s ease;
        }
        .login-prompt .sign-in-link:hover i {
            transform: scale(1.1);
        }
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.03); }
            100% { transform: scale(1); }
        }
        .login-prompt .sign-in-link:hover {
            animation: pulse 0.6s ease-in-out;
        }


        @media (max-width: 767.98px) {
           .registration-form-container {
                padding: 1.5rem;
            }
        }
		
		/* ===== Verification Section ===== */
        .verification-card {
            background-color: var(--white-color);
            border-radius: var(--border-radius-lg);
            box-shadow: var(--shadow-strong);
            padding: 2.5rem;
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInSlideUp 0.8s 0.3s ease-out forwards;
        }
        
        @keyframes fadeInSlideUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .verification-header {
            background: linear-gradient(135deg, var(--primary-color), var(--dark-color));
            color: var(--white-color);
            padding: 1rem;
            text-align: center;
			margin-bottom: 1rem;
        }
        .verification-header .icon {
            font-size: 3rem;
            color: var(--accent-color-1);
            margin-bottom: 0.5rem;
        }
        .verification-header h2 {
            color: var(--white-color);
            font-weight: 700;
            margin: 0;
        }
        .verification-header p {
            color: var(--gray-color);
            font-size: 1.1rem;
        }

        .student-photo-wrapper {
            position: relative;
            width: 150px;
            height: 150px;
            margin: 0 auto 2rem auto;
        }
        .student-photo {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
            border: 5px solid var(--white-color);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        /* Updated Verified Stamp using Bootstrap Icon */
        .verified-stamp {
            position: absolute;
            bottom: 0px;
            right: -10px;
            width: 50px;
            height: 50px;
            background-color: var(--accent-color-1);
            color: var(--white-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            border: 3px solid var(--white-color);
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
            animation: stampIn 0.6s 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
            opacity: 0;
            transform: scale(1.5) rotate(-15deg);
        }

        @keyframes stampIn {
            to {
                opacity: 1;
                transform: scale(1) rotate(10deg);
            }
        }

        .student-details {
            list-style: none;
            padding: 0;
        }
        .student-details li {
            display: flex;
            justify-content: space-between;
            padding: 0.8rem 1rem;
            border-bottom: 1px solid var(--navbar-border-color);
            font-size: 0.95rem;
            transition: background-color var(--transition-speed);
        }
         .student-details li:last-child {
            border-bottom: none;
        }
        .student-details li:hover {
            background-color: var(--light-color);
        }
        .student-details .detail-label {
            font-weight: 600;
            color: var(--medium-dark-color);
        }
        .student-details .detail-value {
            color: var(--gray-color);
            font-weight: 500;
            text-align: right;
        }

        .results-table {
            margin-top: 1rem;
        }
        .results-table .table {
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        .results-table .table thead th {
            background-color: var(--primary-color);
            color: var(--white-color);
            text-transform: uppercase;
            font-size: 0.8rem;
            letter-spacing: 0.5px;
            border: none;
        }
        .results-table .table tbody td {
            vertical-align: middle;
            font-weight: 500;
        }
        .results-table .table tbody tr:nth-child(even) {
            background-color: var(--light-color);
        }
        .result-pass {
            font-weight: 700;
            color: var(--accent-color-1);
        }
        .result-fail {
             font-weight: 700;
            color: var(--accent-color-2);
        }
		
		/* ===== Training Center Self Register Password View Card ===== */
        .password-card {
            background: var(--white-color);
            border-radius: var(--border-radius-lg);
            box-shadow: var(--shadow-strong);
            text-align: center;
            /* Remove padding from the card to allow the header to be full-width */
            padding: 0; 
            max-width: 500px;
            margin: auto;
            opacity: 0;
            transform: scale(0.95);
            animation: fadeInScaleUp 0.6s 0.2s ease-out forwards;
            overflow: hidden; /* Important for border-radius on header */
        }

        @keyframes fadeInScaleUp {
            to {
                opacity: 1;
                transform: scale(1);
            }
        }
        
        /* New Header Design */
        .password-card-header {
            background: linear-gradient(135deg, var(--primary-color), var(--dark-color));
            color: var(--white-color);
            padding: 2.5rem;
            border-top-left-radius: var(--border-radius-lg);
            border-top-right-radius: var(--border-radius-lg);
            position: relative;
        }

        .password-card-header .icon {
            font-size: 3rem;
            color: var(--secondary-color);
            margin-bottom: 1rem;
        }
        .password-card-header h2 {
            color: var(--white-color); /* Title text color */
            font-weight: 700;
            margin-bottom: 0.25rem;
        }
        .password-card-header p {
            color: rgba(255,255,255,0.8); /* Subtitle text color */
            margin-bottom: 0; /* Remove margin as padding is on the container */
        }
        
        .password-card-body {
            padding: 2.5rem; /* Add padding to the body instead of the card */
        }

        .credential-item {
            background-color: var(--light-color);
            border: 1px solid var(--navbar-border-color);
            border-radius: var(--border-radius);
            padding: 1rem;
            margin-bottom: 1rem;
        }
        .credential-label {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--gray-color);
            margin-bottom: 0.25rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .credential-value {
            font-family: var(--heading-font);
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--primary-color);
            word-wrap: break-word;
        }
        .password-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .password-dots {
            font-size: 2rem;
            line-height: 1;
            color: var(--primary-color);
            cursor: default;
        }
        #revealPasswordBtn {
            background: none;
            border: none;
            color: var(--gray-color);
            font-size: 1.2rem;
        }
        #revealPasswordBtn:hover {
            color: var(--secondary-color);
        }

        
        .btn-print {
            background-color: transparent;
            border: 1px solid var(--navbar-border-color);
            color: var(--gray-color);
        }
        .btn-print:hover {
             background-color: var(--light-color);
             color: var(--primary-color);
             border-color: var(--primary-color);
        }