/* === ROOT VARIABLES === */
        :root {
            --primary-dark: #3E2723;
            --primary-medium: #5D4037;
            --primary-light: #8D6E63;
            --accent-dark: #A1887F;
            --accent-light: #D7CCC8;
            --cream: #F5E9DA;
            --chocolate: #4E342E;
            --gold: #D4AF37;
            --bronze: #CD7F32;
            --text-dark: #212121;
            --text-light: #757575;
            --white: #FFFFFF;
            --shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
            --shadow-heavy: 0 30px 60px rgba(0, 0, 0, 0.25);
            --transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            --gradient: linear-gradient(135deg, var(--primary-dark), var(--chocolate), var(--primary-medium));
            --gradient-gold: linear-gradient(135deg, var(--gold), var(--bronze));
        }

        /* === BASE STYLES === */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
            font-size: 16px;
        }

        body {
            font-family: 'Poppins', sans-serif;
            background-color: var(--cream);
            color: var(--text-dark);
            line-height: 1.7;
            overflow-x: hidden;
            position: relative;
        }

        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 20% 80%, rgba(165, 113, 88, 0.1) 0%, transparent 50%),
                        radial-gradient(circle at 80% 20%, rgba(212, 175, 55, 0.05) 0%, transparent 50%),
                        radial-gradient(circle at 40% 40%, rgba(77, 54, 49, 0.08) 0%, transparent 50%);
            pointer-events: none;
            z-index: -1;
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: 'Montserrat', sans-serif;
            font-weight: 800;
            line-height: 1.2;
            margin-bottom: 1.5rem;
        }

        .container {
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 30px;
        }

        section {
            padding: 120px 0;
            position: relative;
        }

        .section-title {
            text-align: center;
            margin-bottom: 80px;
            position: relative;
        }

        .section-title h2 {
            font-size: 3.5rem;
            color: var(--primary-dark);
            display: inline-block;
            position: relative;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .section-title h2::after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 120px;
            height: 5px;
            background: var(--gradient-gold);
            border-radius: 3px;
        }

        .section-title p {
            font-size: 1.2rem;
            color: var(--text-light);
            max-width: 600px;
            margin: 20px auto 0;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 16px 40px;
            background: var(--gradient);
            color: var(--white);
            border: none;
            border-radius: 50px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: var(--shadow);
            position: relative;
            overflow: hidden;
            font-size: 1rem;
            gap: 10px;
        }

        .btn:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-heavy);
            letter-spacing: 2px;
        }

        .btn::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: 0.6s;
        }

        .btn:hover::after {
            left: 100%;
        }

        .btn-outline {
            background: transparent;
            border: 2px solid var(--primary-medium);
            color: var(--primary-medium);
        }

        .btn-outline:hover {
            background: var(--primary-medium);
            color: var(--white);
        }

        .btn-gold {
            background: var(--gradient-gold);
        }




    /* === MEGA NAVIGATION STYLES === */
            header {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                z-index: 10000;
                transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
                padding: 20px 0;
                background: rgba(62, 39, 35, 0);
                backdrop-filter: blur(0px);
                -webkit-backdrop-filter: blur(0px);
                box-shadow: 0 0 0 rgba(0, 0, 0, 0);
                border-bottom: 1px solid rgba(212, 175, 55, 0);
            }

            header.scrolled {
                background: rgba(62, 39, 35, 0.98);
                backdrop-filter: blur(30px);
                -webkit-backdrop-filter: blur(30px);
                box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
                padding: 8px 0;
                border-bottom: 1px solid rgba(212, 175, 55, 0.2);
            }

            .nav-super-container {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 20px;
                position: relative;
            }

            .logo-mega {
                display: flex;
                align-items: center;
                z-index: 10001;
                gap: 12px;
            }

            .logo-image-container {
                position: relative;
            }

            .logo-image-wrapper {
                position: relative;
                width: 70px;
                height: 50px;
                background: linear-gradient(135deg, #3e2723, #5d4037);
                border-radius: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
                transition: all 0.3s ease;
                cursor: pointer;
                overflow: hidden;
                border: 2px solid rgba(212, 175, 55, 0.4);
            }

            .logo-image-wrapper:hover {
                transform: translateY(-2px) scale(1.05);
                box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
                border-color: #d4af37;
            }

            .logo-img {
                width: 60px;
                height: 40px;
                object-fit: contain;
                border-radius: 8px;
                transition: all 0.3s ease;
            }

            .logo-image-wrapper:hover .logo-img {
                transform: scale(1.1);
            }

            .fallback-icon {
                display: none;
                font-size: 1.5rem;
                color: #8d6e63;
                transition: all 0.3s ease;
            }

            .logo-image-wrapper:hover .fallback-icon {
                color: #d4af37;
                transform: scale(1.1);
            }

            .logo-hover-effect {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(135deg, rgba(62, 39, 35, 0.9), rgba(93, 64, 55, 0.9));
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                opacity: 0;
                transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                border-radius: 12px;
                color: white;
                text-align: center;
                transform: scale(0.9);
            }

            .logo-hover-effect i {
                font-size: 1rem;
                margin-bottom: 4px;
                color: #d4af37;
                transition: all 0.3s ease;
            }

            .logo-hover-effect span {
                font-size: 0.65rem;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 0.8px;
            }

            .logo-image-wrapper:hover .logo-hover-effect {
                opacity: 1;
                transform: scale(1);
            }

            .logo-text-mega {
                display: flex;
                flex-direction: column;
            }

            .logo-main {
                color: white;
                font-family: 'Montserrat', sans-serif;
                font-weight: 900;
                font-size: 1.4rem;
                line-height: 1;
                letter-spacing: 0.8px;
            }

            .logo-sub {
                color: #8d6e63;
                font-size: 0.65rem;
                letter-spacing: 1.5px;
                margin-top: 2px;
                font-weight: 600;
                text-transform: uppercase;
            }

            .nav-orbital {
                position: relative;
                z-index: 10000;
            }

            .nav-trigger {
                width: 48px;
                height: 48px;
                background: linear-gradient(135deg, #3e2723, #5d4037);
                border-radius: 12px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
                transition: all 0.3s ease;
                position: relative;
                z-index: 10002;
                border: 2px solid rgba(212, 175, 55, 0.4);
            }

            .nav-trigger span {
                display: block;
                width: 22px;
                height: 2.5px;
                background: white;
                margin: 2.5px 0;
                transition: all 0.3s ease;
                border-radius: 2px;
            }

            .nav-trigger.active {
                transform: rotate(180deg);
                background: linear-gradient(135deg, #d4af37, #f4d03f);
                border-color: #d4af37;
            }

            .nav-trigger.active span {
                background: #3e2723;
            }

            .nav-trigger.active span:nth-child(1) {
                transform: rotate(45deg) translate(5px, 5px);
            }

            .nav-trigger.active span:nth-child(2) {
                opacity: 0;
            }

            .nav-trigger.active span:nth-child(3) {
                transform: rotate(-45deg) translate(5px, -5px);
            }

            .nav-trigger:hover {
                transform: translateY(-2px);
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
            }

            .orbital-menu {
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: 0;
                visibility: hidden;
                transition: all 0.3s ease;
                z-index: 10001;
                pointer-events: none;
            }

            .orbital-menu.active {
                opacity: 1;
                visibility: visible;
                pointer-events: all;
            }

            .orbital-backdrop {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(62, 39, 35, 0.95);
                backdrop-filter: blur(20px);
                -webkit-backdrop-filter: blur(20px);
            }

            .orbital-items {
                position: relative;
                width: 320px;
                height: 320px;
            }

            .orbital-item {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 65px;
                height: 65px;
                background: linear-gradient(135deg, #3e2723, #5d4037);
                border-radius: 50%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                color: white;
                text-decoration: none;
                transition: all 0.3s ease;
                box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
                opacity: 0;
                text-align: center;
                border: 2px solid rgba(212, 175, 55, 0.4);
                transform: translate(-50%, -50%) scale(0.8);
                z-index: 10;
            }

            .orbital-menu.active .orbital-item {
                opacity: 1;
            }

            .orbital-item i {
                font-size: 1.2rem;
                margin-bottom: 4px;
                transition: all 0.3s ease;
            }

            .orbital-item span {
                font-size: 0.6rem;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 0.6px;
            }

            .orbital-item:hover {
                transform: translate(-50%, -50%) scale(1.15);
                background: linear-gradient(135deg, #d4af37, #f4d03f);
                box-shadow: 0 0 25px rgba(212, 175, 55, 0.8);
                color: #3e2723;
                border-color: #d4af37;
                z-index: 20;
            }

            .orbital-item:hover i {
                transform: scale(1.1);
                color: #3e2723;
            }

            .orbital-center {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 100px;
                height: 100px;
                background: linear-gradient(135deg, #d4af37, #f4d03f);
                border-radius: 50%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                color: #3e2723;
                box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
                z-index: 15;
                border: 2px solid rgba(255, 255, 255, 0.3);
                transition: all 0.3s ease;
            }

            .orbital-center i {
                font-size: 1.8rem;
                margin-bottom: 6px;
                transition: all 0.3s ease;
            }

            .orbital-center span {
                font-size: 0.7rem;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 1px;
            }

            .orbital-center:hover {
                transform: translate(-50%, -50%) scale(1.05);
                box-shadow: 0 0 30px rgba(212, 175, 55, 0.6);
            }

            .orbital-center:hover i {
                transform: rotate(15deg);
            }

            .logo-modal {
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: 0;
                visibility: hidden;
                transition: all 0.3s ease;
                z-index: 10004;
                pointer-events: none;
            }

            .logo-modal.active {
                opacity: 1;
                visibility: visible;
                pointer-events: all;
            }

            .logo-modal-backdrop {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.9);
                backdrop-filter: blur(20px);
                -webkit-backdrop-filter: blur(20px);
                cursor: pointer;
            }

            .logo-modal-content {
                position: relative;
                background: linear-gradient(135deg, #3e2723, #5d4037);
                border-radius: 20px;
                padding: 40px;
                max-width: 90%;
                width: 400px;
                box-shadow: 0 40px 80px rgba(0, 0, 0, 0.8);
                transform: scale(0.9);
                transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                text-align: center;
                border: 2px solid rgba(212, 175, 55, 0.5);
                overflow: hidden;
            }

            .logo-modal.active .logo-modal-content {
                transform: scale(1);
            }

            .logo-modal-close {
                position: absolute;
                top: 15px;
                right: 15px;
                width: 40px;
                height: 40px;
                background: linear-gradient(135deg, #d4af37, #f4d03f);
                border: none;
                border-radius: 50%;
                color: #3e2723;
                font-size: 1.1rem;
                cursor: pointer;
                transition: all 0.3s ease;
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
                z-index: 10;
            }

            .logo-modal-close:hover {
                transform: rotate(90deg) scale(1.1);
                background: #e50914;
                color: white;
            }

            .logo-modal-image {
                margin-bottom: 25px;
                padding: 25px;
                background: rgba(255, 255, 255, 0.08);
                border-radius: 16px;
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
                border: 1px solid rgba(255, 255, 255, 0.15);
                transition: all 0.3s ease;
            }

            .logo-modal-img {
                width: 100%;
                max-width: 250px;
                height: auto;
                border-radius: 12px;
                box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
                transition: all 0.3s ease;
            }

            .logo-modal-image:hover .logo-modal-img {
                transform: scale(1.05);
            }

            .logo-modal-info h3 {
                color: #d4af37;
                font-size: 2rem;
                margin-bottom: 10px;
                font-weight: 800;
                text-transform: uppercase;
                letter-spacing: 1.5px;
            }

            .logo-modal-info p {
                color: #8d6e63;
                font-size: 1.1rem;
                margin-bottom: 8px;
                font-weight: 500;
                transition: all 0.3s ease;
            }

            .logo-modal-info:hover p {
                color: #d4af37;
            }

            /* Samsung S8+ Perfect Fit (360px) */
            /* Samsung S8+ Perfect Fit (360px) */
            @media (max-width: 360px) {
                .nav-super-container {
                    padding: 0 10px;
                }

                .nav-trigger {
                    width: 35px;
                    height: 35px;
                }

                .nav-trigger span {
                    width: 16px;
                    height: 2px;
                    margin: 2px 0;
                }

                .logo-mega {
                    gap: 6px;
                }

                .logo-image-wrapper {
                    width: 40px;
                    height: 30px;
                }

                .logo-img {
                    width: 30px;
                    height: 20px;
                }

                .logo-main {
                    font-size: 0.8rem;
                }

                .logo-sub {
                    font-size: 0.4rem;
                }

                .orbital-items {
                    width: 280px;
                    height: 280px;
                }

                .orbital-item {
                    width: 45px;
                    height: 45px;
                }

                .orbital-item i {
                    font-size: 0.8rem;
                }

                .orbital-item span {
                    font-size: 0.4rem;
                }

                .orbital-center {
                    width: 60px;
                    height: 60px;
                }

                .orbital-center i {
                    font-size: 1.2rem;
                }

                .orbital-center span {
                    font-size: 0.5rem;
                }

                .logo-modal-content {
                    padding: 15px;
                    width: 280px;
                }

                .logo-modal-img {
                    max-width: 150px;
                }

                .logo-modal-info h3 {
                    font-size: 1.1rem;
                }

                .logo-modal-info p {
                    font-size: 0.7rem;
                }
            }
            /* Small Phones (361px - 399px) */
            @media (min-width: 361px) and (max-width: 399px) {
                .nav-super-container {
                    padding: 0 15px;
                }

                .logo-image-wrapper {
                    width: 56px;
                    height: 44px;
                }

                .logo-img {
                    width: 46px;
                    height: 34px;
                }

                .logo-main {
                    font-size: 1.1rem;
                }

                .logo-sub {
                    font-size: 0.56rem;
                }

                .nav-trigger {
                    width: 42px;
                    height: 42px;
                }

                .orbital-items {
                    width: 280px;
                    height: 280px;
                }

                .orbital-item {
                    width: 52px;
                    height: 52px;
                }

                .orbital-item i {
                    font-size: 1rem;
                }

                .orbital-item span {
                    font-size: 0.52rem;
                }

                .orbital-center {
                    width: 80px;
                    height: 80px;
                }

                .orbital-center i {
                    font-size: 1.4rem;
                }

                .orbital-center span {
                    font-size: 0.62rem;
                }

                .logo-modal-content {
                    padding: 25px;
                    width: 320px;
                }

                .logo-modal-info h3 {
                    font-size: 1.5rem;
                }
            }

            /* Medium Phones (400px - 480px) */
            @media (min-width: 400px) and (max-width: 480px) {
                .nav-super-container {
                    padding: 0 18px;
                }

                .logo-image-wrapper {
                    width: 60px;
                    height: 45px;
                }

                .logo-img {
                    width: 50px;
                    height: 35px;
                }

                .logo-main {
                    font-size: 1.2rem;
                }

                .logo-sub {
                    font-size: 0.6rem;
                }

                .nav-trigger {
                    width: 44px;
                    height: 44px;
                }

                .orbital-items {
                    width: 300px;
                    height: 300px;
                }

                .orbital-item {
                    width: 55px;
                    height: 55px;
                }

                .orbital-item i {
                    font-size: 1.1rem;
                }

                .orbital-item span {
                    font-size: 0.55rem;
                }

                .orbital-center {
                    width: 85px;
                    height: 85px;
                }

                .orbital-center i {
                    font-size: 1.5rem;
                }

                .orbital-center span {
                    font-size: 0.65rem;
                }

                .logo-modal-content {
                    padding: 30px;
                    width: 340px;
                }

                .logo-modal-info h3 {
                    font-size: 1.7rem;
                }

                .logo-modal-info p {
                    font-size: 1rem;
                }
            }

            /* Small Tablets (481px - 767px) */
            @media (min-width: 481px) and (max-width: 767px) {
                .nav-super-container {
                    padding: 0 20px;
                }

                .logo-image-wrapper {
                    width: 75px;
                    height: 55px;
                }

                .logo-img {
                    width: 65px;
                    height: 45px;
                }

                .logo-main {
                    font-size: 1.5rem;
                }

                .logo-sub {
                    font-size: 0.7rem;
                }

                .nav-trigger {
                    width: 50px;
                    height: 50px;
                }

                .orbital-items {
                    width: 350px;
                    height: 350px;
                }

                .orbital-item {
                    width: 70px;
                    height: 70px;
                }

                .orbital-item i {
                    font-size: 1.3rem;
                }

                .orbital-item span {
                    font-size: 0.65rem;
                }

                .orbital-center {
                    width: 110px;
                    height: 110px;
                }

                .orbital-center i {
                    font-size: 2rem;
                }

                .orbital-center span {
                    font-size: 0.8rem;
                }

                .logo-modal-content {
                    width: 420px;
                    padding: 35px;
                }

                .logo-modal-info h3 {
                    font-size: 2rem;
                }
            }

            /* Tablets (768px - 1023px) */
            @media (min-width: 768px) and (max-width: 1023px) {
                .nav-super-container {
                    padding: 0 25px;
                }

                .logo-image-wrapper {
                    width: 85px;
                    height: 65px;
                }

                .logo-img {
                    width: 75px;
                    height: 55px;
                }

                .logo-main {
                    font-size: 1.7rem;
                }

                .logo-sub {
                    font-size: 0.8rem;
                }

                .nav-trigger {
                    width: 55px;
                    height: 55px;
                }

                .orbital-items {
                    width: 450px;
                    height: 450px;
                }

                .orbital-item {
                    width: 85px;
                    height: 85px;
                }

                .orbital-item i {
                    font-size: 1.5rem;
                }

                .orbital-item span {
                    font-size: 0.7rem;
                }

                .orbital-center {
                    width: 130px;
                    height: 130px;
                }

                .orbital-center i {
                    font-size: 2.3rem;
                }

                .orbital-center span {
                    font-size: 0.85rem;
                }

                .logo-modal-content {
                    width: 500px;
                    padding: 45px;
                }

                .logo-modal-info h3 {
                    font-size: 2.3rem;
                }
            }

            /* Desktops (1024px - 1439px) */
            @media (min-width: 1024px) {
                .nav-super-container {
                    padding: 0 30px;
                }

                .logo-image-wrapper {
                    width: 90px;
                    height: 70px;
                }

                .logo-img {
                    width: 80px;
                    height: 60px;
                }

                .logo-main {
                    font-size: 1.8rem;
                }

                .logo-sub {
                    font-size: 0.85rem;
                }

                .nav-trigger {
                    width: 58px;
                    height: 58px;
                }

                .orbital-items {
                    width: 500px;
                    height: 500px;
                }

                .orbital-item {
                    width: 95px;
                    height: 95px;
                }

                .orbital-item i {
                    font-size: 1.6rem;
                }

                .orbital-item span {
                    font-size: 0.75rem;
                }

                .orbital-center {
                    width: 140px;
                    height: 140px;
                }

                .orbital-center i {
                    font-size: 2.5rem;
                }

                .orbital-center span {
                    font-size: 0.9rem;
                }

                .logo-modal-content {
                    width: 550px;
                    padding: 50px;
                }

                .logo-modal-info h3 {
                    font-size: 2.5rem;
                }
            }

            /* Large Desktops (1440px and above) */
            @media (min-width: 1440px) {
                .orbital-items {
                    width: 550px;
                    height: 550px;
                }

                .orbital-item {
                    width: 100px;
                    height: 100px;
                }

                .orbital-item i {
                    font-size: 1.7rem;
                }

                .logo-modal-content {
                    width: 600px;
                }
            }

            /* Touch devices */
            @media (hover: none) {
                .orbital-item:hover {
                    transform: translate(-50%, -50%) scale(1) !important;
                }

                .orbital-item:active {
                    transform: translate(-50%, -50%) scale(1.1) !important;
                }
            }


            /* === HERO SECTION === */
            .hero-mega {
                height: 100vh;
                min-height: 600px;
                background: linear-gradient(rgba(62, 39, 35, 0.85), rgba(77, 54, 49, 0.8)),
                            url('https://images.unsplash.com/photo-1581094794329-c8112a89af12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') no-repeat center center/cover;
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                color: var(--white);
                position: relative;
                overflow: hidden;
                padding: 20px;
            }

            .hero-content-mega {
                max-width: 1200px;
                width: 100%;
                z-index: 10;
                position: relative;
            }

            .hero-badge {
                display: inline-block;
                padding: 12px 28px;
                background: linear-gradient(135deg, #CD7F32, #D4AF37);
                color: var(--white);
                border-radius: 50px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 1.5px;
                font-size: 0.875rem;
                margin-bottom: 30px;
                box-shadow: 0 8px 25px rgba(205, 127, 50, 0.3);
                animation: pulse 2s infinite;
                border: 2px solid rgba(255, 255, 255, 0.2);
            }

            .hero-title {
                font-size: clamp(2.5rem, 5vw, 4rem);
                margin-bottom: 25px;
                text-transform: uppercase;
                letter-spacing: 2px;
                line-height: 1.1;
                animation: fadeInUp 1s ease;
                font-weight: 800;
                text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            }

            .hero-title span {
                background: linear-gradient(135deg, #D4AF37, #FFD700);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                display: inline-block;
            }

            .hero-subtitle {
                font-size: clamp(1.1rem, 2.5vw, 1.4rem);
                margin-bottom: 40px;
                max-width: 800px;
                margin-left: auto;
                margin-right: auto;
                min-height: 80px;
                font-weight: 500;
                line-height: 1.7;
                color: rgba(255, 255, 255, 0.95);
                text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
                letter-spacing: 0.3px;
                animation: text-glow-pulse 4s ease-in-out infinite;
            }

            @keyframes text-glow-pulse {
                0%, 100% {
                    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3),
                                 0 0 20px rgba(255, 255, 255, 0.2),
                                 0 0 30px rgba(212, 175, 55, 0.1);
                }
                50% {
                    text-shadow: 0 0 15px rgba(255, 255, 255, 0.4),
                                 0 0 25px rgba(255, 255, 255, 0.3),
                                 0 0 40px rgba(212, 175, 55, 0.2);
                }
            }

            .typing-cursor {
                display: inline-block;
                width: 4px;
                height: 1.4em;
                background: #D4AF37;
                margin-left: 4px;
                border-radius: 2px;
                animation: blink 0.8s infinite;
                box-shadow: 0 0 10px #D4AF37,
                            0 0 20px rgba(212, 175, 55, 0.5);
                vertical-align: middle;
                transform: translateY(-1px);
            }

            @keyframes blink {
                0%, 50% { opacity: 1; }
                51%, 100% { opacity: 0.4; }
            }

            .hero-btns-mega {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 20px;
                animation: fadeInUp 1s ease 0.6s both;
                position: relative;
                margin-bottom: 60px;
                flex-wrap: wrap;
            }

            .hero-btns-mega .btn {
                padding: 16px 36px;
                font-size: 1rem;
                border-radius: 12px;
                border: 2px solid #D4AF37;
                background: #3E2723;
                color: var(--white);
                text-transform: uppercase;
                letter-spacing: 1.5px;
                font-weight: 700;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                min-width: 160px;
                text-align: center;
                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
                cursor: pointer;
                backdrop-filter: blur(10px);
                position: relative;
                overflow: hidden;
            }

            .hero-btns-mega .btn::before {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
                transition: left 0.6s ease;
            }

            .hero-btns-mega .btn:hover::before {
                left: 100%;
            }

            .hero-btns-mega .btn:hover {
                background: #D4AF37;
                color: #2C3E50;
                transform: translateY(-4px);
                box-shadow: 0 12px 35px rgba(212, 175, 55, 0.4);
            }

            .hero-btns-mega .btn:active {
                transform: translateY(-2px);
            }

            .hero-btns-mega .btn-outline {
                background: transparent;
                border: 2px solid #D4AF37;
                color: #D4AF37;
            }

            .hero-btns-mega .btn-outline:hover {
                background: #D4AF37;
                color: #2C3E50;
            }

            .floating-elements-mega {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                pointer-events: none;
            }

            .floating-element-mega {
                position: absolute;
                background: rgba(212, 175, 55, 0.15);
                border-radius: 50%;
                animation: float 20s infinite linear;
                border: 1px solid rgba(212, 175, 55, 0.3);
            }

            .floating-element-mega:nth-child(1) {
                width: 100px;
                height: 100px;
                top: 15%;
                left: 10%;
                animation-delay: 0s;
            }

            .floating-element-mega:nth-child(2) {
                width: 150px;
                height: 150px;
                top: 65%;
                left: 85%;
                animation-delay: 3s;
            }

            .floating-element-mega:nth-child(3) {
                width: 80px;
                height: 80px;
                top: 80%;
                left: 15%;
                animation-delay: 6s;
            }

            .floating-element-mega:nth-child(4) {
                width: 120px;
                height: 120px;
                top: 25%;
                left: 75%;
                animation-delay: 9s;
            }

            .floating-element-mega:nth-child(5) {
                width: 60px;
                height: 60px;
                top: 70%;
                left: 50%;
                animation-delay: 12s;
            }

            /* Mouse Scroll Indicator */
            .mouse-scroll-indicator {
                position: absolute;
                bottom: 30px;
                left: 50%;
                transform: translateX(-50%);
                display: flex;
                flex-direction: column;
                align-items: center;
                z-index: 10;
            }

            .mouse {
                width: 24px;
                height: 40px;
                border: 2px solid rgba(255, 255, 255, 0.8);
                border-radius: 15px;
                position: relative;
                margin-bottom: 10px;
                transition: all 0.3s ease;
            }

            .wheel {
                width: 3px;
                height: 8px;
                background: rgba(255, 255, 255, 0.8);
                border-radius: 2px;
                position: absolute;
                top: 8px;
                left: 50%;
                transform: translateX(-50%);
                animation: scroll-wheel 2s infinite;
            }

            .arrow {
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .arrow span {
                display: block;
                width: 6px;
                height: 6px;
                border-right: 2px solid rgba(255, 255, 255, 0.8);
                border-bottom: 2px solid rgba(255, 255, 255, 0.8);
                transform: rotate(45deg);
                margin: -2px;
                animation: scroll-arrow 2s infinite;
            }

            .arrow span:nth-child(2) {
                animation-delay: 0.1s;
            }

            .arrow span:nth-child(3) {
                animation-delay: 0.2s;
            }

            @keyframes scroll-wheel {
                0% {
                    transform: translateX(-50%) translateY(0);
                    opacity: 1;
                }
                50% {
                    transform: translateX(-50%) translateY(10px);
                    opacity: 0.7;
                }
                100% {
                    transform: translateX(-50%) translateY(0);
                    opacity: 1;
                }
            }

            @keyframes scroll-arrow {
                0% {
                    opacity: 0;
                    transform: rotate(45deg) translate(-5px, -5px);
                }
                50% {
                    opacity: 1;
                }
                100% {
                    opacity: 0;
                    transform: rotate(45deg) translate(5px, 5px);
                }
            }

            /* Hover effects */
            .mouse-scroll-indicator:hover .mouse {
                border-color: #D4AF37;
            }

            .mouse-scroll-indicator:hover .wheel {
                background: #D4AF37;
            }

            .mouse-scroll-indicator:hover .arrow span {
                border-color: #D4AF37;
            }

            /* === ENHANCED RESPONSIVE MODAL STYLING === */
            .department-full-modal {
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: 0;
                visibility: hidden;
                transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
                z-index: 10010;
                pointer-events: none;
                padding: 20px;
            }

            .department-full-modal.active {
                opacity: 1;
                visibility: visible;
                pointer-events: all;
            }

            .modal-backdrop {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(135deg, rgba(0, 0, 0, 0.96) 0%, rgba(26, 18, 11, 0.98) 100%);
                backdrop-filter: blur(15px) saturate(180%);
                cursor: pointer;
                transition: backdrop-filter 0.4s ease;
            }

            .department-full-modal.active .modal-backdrop {
                backdrop-filter: blur(20px) saturate(200%);
            }

            .modal-container {
                position: relative;
                width: 95%;
                height: 95%;
                max-width: 1400px;
                background: linear-gradient(145deg, #ffffff 0%, #fafbfc 45%, #f8f9fa 100%);
                border-radius: 24px;
                box-shadow:
                    0 32px 64px rgba(0, 0, 0, 0.25),
                    0 16px 32px rgba(0, 0, 0, 0.15),
                    inset 0 1px 0 rgba(255, 255, 255, 0.8);
                overflow: hidden;
                transform: scale(0.92) translateY(20px);
                transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                border: 1px solid rgba(255, 255, 255, 0.3);
            }

            .department-full-modal.active .modal-container {
                transform: scale(1) translateY(0);
            }

            .modal-content {
                height: 100%;
                display: flex;
                flex-direction: column;
                background: #ffffff;
                font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
                position: relative;
            }

            .modal-close {
                position: absolute;
                top: 24px;
                right: 24px;
                width: 48px;
                height: 48px;
                background: linear-gradient(135deg, #3E2723 0%, #5D4037 100%);
                border: none;
                border-radius: 14px;
                color: #ffffff;
                font-size: 1.5rem;
                cursor: pointer;
                transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
                z-index: 10011;
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow:
                    0 8px 25px rgba(62, 39, 35, 0.4),
                    inset 0 1px 0 rgba(255, 255, 255, 0.2);
                border: 1px solid rgba(255, 255, 255, 0.15);
                font-weight: 300;
            }

            .modal-close:hover {
                transform: rotate(90deg) scale(1.15);
                background: linear-gradient(135deg, #E74C3C 0%, #C0392B 100%);
                box-shadow:
                    0 12px 35px rgba(231, 76, 60, 0.5),
                    inset 0 1px 0 rgba(255, 255, 255, 0.3);
            }

            .modal-close:active {
                transform: rotate(90deg) scale(1.05);
            }

            .modal-header {
                color: #ffffff;
                padding: 40px 45px 30px;
                position: relative;
                overflow: hidden;
                border-bottom: none;
                background: linear-gradient(135deg, #2E1B14 0%, #3E2723 25%, #5D4037 60%, #8B5A2B 100%);
                background-size: 400% 400%;
                animation: gradientShift 8s ease infinite;
            }

            @keyframes gradientShift {
                0%, 100% { background-position: 0% 50%; }
                50% { background-position: 100% 50%; }
            }

            .modal-header::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background:
                    radial-gradient(circle at 15% 70%, rgba(255, 215, 0, 0.15) 0%, transparent 50%),
                    radial-gradient(circle at 85% 30%, rgba(205, 127, 50, 0.1) 0%, transparent 50%),
                    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 60%);
                animation: float 6s ease-in-out infinite;
            }

            @keyframes float {
                0%, 100% { transform: translateY(0px) scale(1); }
                50% { transform: translateY(-10px) scale(1.02); }
            }

            .modal-header::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 8px;
                background: linear-gradient(90deg,
                    #2E1B14,
                    #3E2723,
                    #8B5A2B,
                    #CD7F32,
                    #8B5A2B,
                    #3E2723,
                    #2E1B14);
                background-size: 400% 100%;
                animation: shimmer 3s ease infinite;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
            }

            @keyframes shimmer {
                0% { background-position: -200% 0; }
                100% { background-position: 200% 0; }
            }

            .modal-icon {
                width: 80px;
                height: 80px;
                background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
                border-radius: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 2.4rem;
                margin-bottom: 24px;
                border: 2px solid rgba(255, 255, 255, 0.25);
                color: #ffffff;
                position: relative;
                z-index: 2;
                transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
                backdrop-filter: blur(15px);
                box-shadow:
                    0 8px 32px rgba(0, 0, 0, 0.2),
                    inset 0 1px 0 rgba(255, 255, 255, 0.3);
            }

            .modal-icon:hover {
                transform: translateY(-5px) scale(1.05);
                background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.15) 100%);
                box-shadow:
                    0 15px 40px rgba(255, 255, 255, 0.25),
                    inset 0 1px 0 rgba(255, 255, 255, 0.4);
                border-color: rgba(255, 255, 255, 0.4);
            }

            .modal-title h2 {
                color: #ffffff;
                font-size: clamp(2rem, 3.5vw, 2.5rem);
                margin-bottom: 12px;
                font-weight: 800;
                letter-spacing: -0.5px;
                line-height: 1.15;
                position: relative;
                z-index: 2;
                text-shadow:
                    0 2px 10px rgba(0, 0, 0, 0.4),
                    0 4px 20px rgba(0, 0, 0, 0.3);
                background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }

            .modal-subtitle {
                color: rgba(255, 255, 255, 0.95);
                font-size: clamp(1.1rem, 1.8vw, 1.25rem);
                font-weight: 500;
                margin: 0;
                line-height: 1.5;
                position: relative;
                z-index: 2;
                text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
                letter-spacing: 0.2px;
            }

            .modal-body {
                flex: 1;
                overflow-y: auto;
                padding: 0;
                background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 30%, #ffffff 100%);
                scrollbar-width: thin;
                scrollbar-color: #cbd5e1 #f1f5f9;
            }

            .modal-body::-webkit-scrollbar {
                width: 8px;
            }

            .modal-body::-webkit-scrollbar-track {
                background: #f1f5f9;
                border-radius: 4px;
            }

            .modal-body::-webkit-scrollbar-thumb {
                background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
                border-radius: 4px;
            }

            .modal-body::-webkit-scrollbar-thumb:hover {
                background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
            }

            .modal-hero-image {
                width: 100%;
                height: 320px;
                overflow: hidden;
                position: relative;
                border-bottom: none;
            }

            .modal-hero-image::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 120px;
                background: linear-gradient(transparent 0%, #f8fafc 90%);
                pointer-events: none;
            }

            .modal-hero-image img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                filter: brightness(1.08) contrast(1.15) saturate(1.1);
                transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            }

            .modal-hero-image:hover img {
                transform: scale(1.08);
            }

            .modal-grid {
                padding: 40px 45px;
                display: flex;
                flex-direction: column;
                gap: 32px;
                max-width: 1200px;
                margin: 0 auto;
                width: 100%;
            }

            .modal-section {
                background: linear-gradient(145deg, #ffffff 0%, #fcfdfe 100%);
                padding: 32px 36px;
                border-radius: 20px;
                box-shadow:
                    0 12px 40px rgba(0, 0, 0, 0.08),
                    0 4px 12px rgba(0, 0, 0, 0.04),
                    inset 0 1px 0 rgba(255, 255, 255, 0.8);
                border: 1px solid rgba(255, 255, 255, 0.9);
                transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
                border-left: 6px solid #3E2723;
                position: relative;
                overflow: hidden;
                backdrop-filter: blur(15px);
            }

            .modal-section::before {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg,
                    transparent,
                    rgba(62, 39, 35, 0.04),
                    rgba(205, 127, 50, 0.08),
                    rgba(62, 39, 35, 0.04),
                    transparent);
                transition: left 0.8s ease;
            }

            .modal-section:hover::before {
                left: 100%;
            }

            .modal-section:hover {
                box-shadow:
                    0 20px 50px rgba(0, 0, 0, 0.12),
                    0 8px 20px rgba(0, 0, 0, 0.06),
                    0 0 0 1px rgba(62, 39, 35, 0.1);
                transform: translateY(-5px);
                border-left-color: #CD7F32;
            }

            .modal-section h3 {
                color: #1a202c;
                font-size: clamp(1.3rem, 2.2vw, 1.5rem);
                margin-bottom: 20px;
                font-weight: 700;
                padding-bottom: 14px;
                border-bottom: 2px solid #f7fafc;
                display: flex;
                align-items: center;
                gap: 14px;
                position: relative;
                letter-spacing: -0.3px;
            }

            .modal-section h3 i {
                font-size: 1.4rem;
                color: #3E2723;
                background: linear-gradient(135deg, rgba(62, 39, 35, 0.12) 0%, rgba(62, 39, 35, 0.08) 100%);
                width: 46px;
                height: 46px;
                border-radius: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
                border: 1px solid rgba(62, 39, 35, 0.1);
                box-shadow: 0 4px 12px rgba(62, 39, 35, 0.1);
            }

            .modal-section:hover h3 i {
                transform: scale(1.15) rotate(5deg);
                background: linear-gradient(135deg, rgba(62, 39, 35, 0.18) 0%, rgba(62, 39, 35, 0.12) 100%);
                color: #CD7F32;
                box-shadow: 0 6px 20px rgba(62, 39, 35, 0.15);
            }

            /* === RESPONSIVE FORM STYLES === */
            .esa-form {
                width: 100%;
            }

            .form-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                gap: 24px;
                margin-bottom: 12px;
            }

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

            .form-group.full-width {
                grid-column: 1 / -1;
            }

            .form-group label {
                color: #2c3e50;
                font-weight: 600;
                margin-bottom: 12px;
                font-size: 1rem;
                display: flex;
                align-items: center;
                gap: 12px;
                transition: color 0.3s ease;
                padding: 4px 0;
            }

            .form-group label i {
                color: #3E2723;
                font-size: 1.2rem;
                width: 24px;
                height: 24px;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.3s ease;
                flex-shrink: 0;
            }

            .form-group:focus-within label {
                color: #3E2723;
            }

            .form-group:focus-within label i {
                transform: scale(1.15);
                color: #CD7F32;
            }

            .form-group input,
            .form-group select,
            .form-group textarea {
                padding: 16px 18px;
                border: 2px solid #e0e0e0;
                border-radius: 12px;
                background: #ffffff;
                color: #2c3e50;
                font-size: 1.05rem;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                font-family: inherit;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
                line-height: 1.5;
                min-height: 56px;
                width: 100%;
            }

            .form-group input:focus,
            .form-group select:focus,
            .form-group textarea:focus {
                outline: none;
                border-color: #3E2723;
                box-shadow: 0 0 0 4px rgba(62, 39, 35, 0.15),
                            0 4px 20px rgba(62, 39, 35, 0.1);
                transform: translateY(-2px);
            }

            .form-group input::placeholder {
                color: #95a5a6;
                transition: color 0.3s ease;
            }

            .form-group input:focus::placeholder {
                color: #bdc3c7;
            }

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

            .error-message {
                color: #e74c3c;
                font-size: 0.85rem;
                margin-top: 8px;
                min-height: 20px;
                font-weight: 500;
                display: flex;
                align-items: center;
                gap: 6px;
                transition: all 0.3s ease;
                padding-left: 2px;
            }

            .error-message::before {
                content: '⚠';
                font-size: 0.8rem;
                width: 14px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            /* === ENHANCED PAYMENT STYLES === */
            .payment-card {
                background: #f8f9fa;
                border-radius: 16px;
                padding: 28px;
                border: 1px solid #e9ecef;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
            }

            .payment-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 28px;
                padding-bottom: 22px;
                border-bottom: 1px solid #e9ecef;
                flex-wrap: wrap;
                gap: 20px;
            }

            .payment-amount .amount {
                font-size: clamp(2rem, 4vw, 2.6rem);
                font-weight: 800;
                color: #3E2723;
                display: block;
                line-height: 1;
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }

            .payment-amount .payment-label {
                color: #7f8c8d;
                font-size: 1.05rem;
                font-weight: 500;
            }

            .payment-icon {
                width: 65px;
                height: 65px;
                background: linear-gradient(135deg, #3E2723, #CD7F32);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.6rem;
                color: #ffffff;
                box-shadow: 0 4px 15px rgba(62, 39, 35, 0.3);
                transition: all 0.3s ease;
            }

            .payment-icon:hover {
                transform: scale(1.05) rotate(5deg);
            }

            .payment-methods {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
                gap: 20px;
                margin-bottom: 28px;
            }

            .payment-method {
                background: #ffffff;
                border: 2px solid #e0e0e0;
                border-radius: 16px;
                padding: 25px 20px;
                text-align: center;
                cursor: pointer;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                position: relative;
                overflow: hidden;
            }

            .payment-method::before {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(62, 39, 35, 0.1), transparent);
                transition: left 0.6s ease;
            }

            .payment-method:hover::before {
                left: 100%;
            }

            .payment-method:hover {
                border-color: #3E2723;
                transform: translateY(-4px);
                box-shadow: 0 8px 25px rgba(62, 39, 35, 0.15);
            }

            .payment-method.active {
                border-color: #3E2723;
                background: linear-gradient(135deg, #f5f2f0, #ffffff);
                box-shadow: 0 6px 20px rgba(62, 39, 35, 0.2);
                transform: translateY(-2px);
            }

            .method-icon {
                width: 60px;
                height: 60px;
                background: linear-gradient(135deg, #3E2723, #CD7F32);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 0 auto 12px;
                font-size: 1.5rem;
                color: #ffffff;
                transition: all 0.3s ease;
                box-shadow: 0 4px 12px rgba(62, 39, 35, 0.3);
            }

            .payment-method:hover .method-icon {
                transform: scale(1.1) rotate(5deg);
            }

            .method-name {
                color: #2c3e50;
                font-weight: 700;
                font-size: 1.1rem;
                display: block;
                margin-bottom: 5px;
            }

            .method-desc {
                color: #7f8c8d;
                font-size: 0.9rem;
                font-weight: 500;
            }

            .payment-details {
                display: none;
            }

            .payment-details.active {
                display: block;
                animation: fadeInUp 0.4s ease;
            }

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

            .payment-info-card {
                background: linear-gradient(135deg, #f5f2f0, #faf8f5);
                border-radius: 12px;
                padding: 20px;
                margin-bottom: 22px;
                border: 1px solid #e8e6e4;
            }

            .payment-instructions {
                display: flex;
                align-items: flex-start;
                gap: 14px;
                margin-bottom: 18px;
            }

            .payment-instructions i {
                color: #3E2723;
                font-size: 1.3rem;
                margin-top: 2px;
                flex-shrink: 0;
            }

            .payment-instructions p {
                margin: 0;
                color: #2c3e50;
                font-size: 0.98rem;
                line-height: 1.5;
                font-weight: 500;
            }

            .payment-instructions p strong {
                color: #3E2723;
            }

            .bank-details-mini {
                background: #ffffff;
                border-radius: 8px;
                padding: 16px;
                border: 1px solid #e8e6e4;
            }

            .bank-details-mini h4 {
                color: #2c3e50;
                font-size: 1.1rem;
                margin-bottom: 12px;
                display: flex;
                align-items: center;
                gap: 8px;
                font-weight: 600;
            }

            .bank-details-mini h4 i {
                color: #3E2723;
            }

            .bank-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 8px 0;
                border-bottom: 1px solid #f1f3f4;
                flex-wrap: wrap;
                gap: 10px;
            }

            .bank-item:last-child {
                border-bottom: none;
            }

            .bank-label {
                color: #5d6d7e;
                font-weight: 500;
                font-size: 0.9rem;
            }

            .bank-value {
                color: #2c3e50;
                font-weight: 600;
                font-size: 0.9rem;
            }

            /* PAYMENT FORM */
            .payment-details .form-group {
                margin-bottom: 18px;
            }

            .payment-details .form-group label {
                color: #2c3e50;
                font-weight: 600;
                margin-bottom: 8px;
                font-size: 0.95rem;
            }

            .btn-payment {
                width: 100%;
                padding: 16px;
                background: linear-gradient(135deg, #00A650, #008C46);
                color: #ffffff;
                border: none;
                border-radius: 12px;
                font-size: 1.12rem;
                font-weight: 700;
                cursor: pointer;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 12px;
                margin-top: 22px;
                box-shadow: 0 4px 15px rgba(0, 166, 80, 0.3);
                position: relative;
                overflow: hidden;
            }

            .btn-payment::before {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
                transition: left 0.6s ease;
            }

            .btn-payment:hover::before {
                left: 100%;
            }

            .btn-payment:hover {
                background: linear-gradient(135deg, #008C46, #007A3D);
                transform: translateY(-3px);
                box-shadow: 0 8px 25px rgba(0, 166, 80, 0.4);
            }

            .btn-payment:active {
                transform: translateY(-1px);
            }

            .modal-footer {
                padding: 22px 40px;
                background: #ffffff;
                display: flex;
                gap: 18px;
                justify-content: flex-end;
                border-top: 1px solid #e9ecef;
                background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
                box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.03);
                flex-wrap: wrap;
            }

            .modal-footer .btn {
                padding: 13px 30px;
                font-size: 0.98rem;
                font-weight: 600;
                border-radius: 10px;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                border: 2px solid #bdc3c7;
                background: #ffffff;
                color: #2c3e50;
                cursor: pointer;
                display: flex;
                align-items: center;
                gap: 10px;
                min-width: 150px;
                justify-content: center;
                position: relative;
                overflow: hidden;
            }

            .modal-footer .btn::before {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
                transition: left 0.6s ease;
            }

            .modal-footer .btn:hover::before {
                left: 100%;
            }

            .modal-footer .btn.btn-primary {
                background: linear-gradient(135deg, #3E2723, #CD7F32);
                color: #ffffff;
                border: none;
                box-shadow: 0 4px 15px rgba(62, 39, 35, 0.3);
            }

            .modal-footer .btn:hover {
                transform: translateY(-3px);
                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
            }

            .modal-footer .btn.btn-primary:hover {
                background: linear-gradient(135deg, #2D1B1A, #B87333);
                box-shadow: 0 8px 25px rgba(62, 39, 35, 0.4);
                transform: translateY(-3px) scale(1.02);
            }

            .modal-footer .btn:active {
                transform: translateY(-1px);
            }

            .btn:disabled {
                opacity: 0.6;
                cursor: not-allowed;
                transform: none !important;
                box-shadow: none !important;
            }

            .btn-spinner {
                display: none;
                align-items: center;
                gap: 10px;
            }

            .spinner {
                width: 18px;
                height: 18px;
                border: 2px solid transparent;
                border-top: 2px solid currentColor;
                border-radius: 50%;
                animation: spin 1s linear infinite;
            }

            @keyframes spin {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }

            /* Payment Processing Styles */
            .payment-loader {
                position: relative;
                width: 120px;
                height: 120px;
                margin: 0 auto 30px;
            }

            .loader-circle {
                width: 100%;
                height: 100%;
                border: 4px solid rgba(62, 39, 35, 0.1);
                border-top: 4px solid #3E2723;
                border-radius: 50%;
                animation: spin 1.5s linear infinite;
            }

            .loader-checkmark {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 50px;
                height: 50px;
                background: #27ae60;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                color: white;
                font-size: 1.5rem;
                opacity: 0;
                transition: opacity 0.3s ease;
            }

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

            .step {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 8px;
                color: #bdc3c7;
                font-weight: 500;
                transition: all 0.3s ease;
            }

            .step.active {
                color: #3E2723;
            }

            .step i {
                font-size: 1.5rem;
            }

            /* Success Animation */
            .success-animation {
                position: relative;
                width: 120px;
                height: 120px;
                margin: 0 auto 30px;
            }

            .success-icon {
                width: 100%;
                height: 100%;
                background: linear-gradient(135deg, #27ae60, #2ecc71);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                color: white;
                font-size: 3rem;
                box-shadow: 0 8px 25px rgba(39, 174, 96, 0.3);
                animation: scaleIn 0.5s ease;
            }

            .confetti {
                position: absolute;
                width: 10px;
                height: 10px;
                background: var(--confetti-color);
                border-radius: 2px;
                animation: confetti 1s ease-out forwards;
            }

            .confetti:nth-child(2) { --confetti-color: #e74c3c; top: 10%; left: 20%; }
            .confetti:nth-child(3) { --confetti-color: #3498db; top: 20%; left: 80%; }
            .confetti:nth-child(4) { --confetti-color: #f39c12; top: 80%; left: 10%; }
            .confetti:nth-child(5) { --confetti-color: #9b59b6; top: 90%; left: 70%; }
            .confetti:nth-child(6) { --confetti-color: #1abc9c; top: 40%; left: 40%; }

            @keyframes confetti {
                0% {
                    transform: translateY(0) rotate(0deg);
                    opacity: 1;
                }
                100% {
                    transform: translateY(100px) rotate(360deg);
                    opacity: 0;
                }
            }

            @keyframes scaleIn {
                0% {
                    transform: scale(0);
                }
                70% {
                    transform: scale(1.1);
                }
                100% {
                    transform: scale(1);
                }
            }

            .membership-details {
                background: #f8f9fa;
                border-radius: 12px;
                padding: 25px;
                margin: 25px 0;
                border: 1px solid #e9ecef;
            }

            .detail-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 12px 0;
                border-bottom: 1px solid #e9ecef;
            }

            .detail-item:last-child {
                border-bottom: none;
            }

            .detail-label {
                color: #5d6d7e;
                font-weight: 600;
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .detail-value {
                color: #2c3e50;
                font-weight: 700;
            }

            .active-status {
                color: #27ae60;
                background: rgba(39, 174, 96, 0.1);
                padding: 4px 12px;
                border-radius: 20px;
                font-size: 0.9rem;
            }

            .success-actions {
                display: flex;
                gap: 15px;
                justify-content: center;
                margin: 25px 0;
                flex-wrap: wrap;
            }

            .welcome-note {
                background: linear-gradient(135deg, #f5f2f0, #faf8f5);
                border-radius: 12px;
                padding: 25px;
                margin-top: 25px;
                border-left: 4px solid #3E2723;
                position: relative;
            }

            .welcome-note i {
                color: #3E2723;
                font-size: 1.5rem;
                margin-bottom: 10px;
                display: block;
            }

            .welcome-note p {
                color: #5d6d7e;
                font-style: italic;
                margin: 0;
                line-height: 1.6;
            }

            /* === RESPONSIVE DESIGN === */
            @media (max-width: 1200px) {
                .modal-container {
                    width: 98%;
                    height: 98%;
                }

                .modal-grid {
                    padding: 30px;
                }

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

            @media (max-width: 768px) {
                .department-full-modal {
                    padding: 15px;
                }

                .modal-container {
                    width: 100%;
                    height: 100%;
                    border-radius: 0;
                }

                .modal-header {
                    padding: 25px 25px 20px;
                }

                .modal-icon {
                    width: 60px;
                    height: 60px;
                    font-size: 1.8rem;
                    margin-bottom: 15px;
                }

                .modal-title h2 {
                    font-size: 1.8rem;
                }

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

                .modal-grid {
                    padding: 20px;
                    gap: 20px;
                }

                .modal-section {
                    padding: 20px;
                }

                .modal-section h3 {
                    font-size: 1.2rem;
                }

                .modal-hero-image {
                    height: 200px;
                }

                .modal-footer {
                    padding: 20px;
                    flex-direction: column;
                    align-items: stretch;
                    gap: 12px;
                }

                .modal-close {
                    top: 15px;
                    right: 15px;
                    width: 40px;
                    height: 40px;
                    font-size: 1.2rem;
                }

                .payment-methods {
                    grid-template-columns: 1fr;
                    gap: 15px;
                }

                .payment-header {
                    flex-direction: column;
                    text-align: center;
                    gap: 15px;
                }

                .form-grid {
                    grid-template-columns: 1fr;
                    gap: 16px;
                }

                .hero-btns-mega {
                    flex-direction: column;
                    align-items: center;
                }

                .hero-btns-mega .btn {
                    width: 100%;
                    max-width: 300px;
                }

                .payment-steps {
                    gap: 15px;
                }

                .success-actions {
                    flex-direction: column;
                    align-items: stretch;
                }

                .success-actions .btn {
                    width: 100%;
                }
            }

            @media (max-width: 480px) {
                .modal-header {
                    padding: 20px 20px 15px;
                }

                .modal-icon {
                    width: 50px;
                    height: 50px;
                    font-size: 1.5rem;
                }

                .modal-title h2 {
                    font-size: 1.5rem;
                }

                .modal-grid {
                    padding: 15px;
                    gap: 16px;
                }

                .modal-section {
                    padding: 16px;
                }

                .modal-section h3 {
                    font-size: 1.1rem;
                }

                .modal-footer .btn {
                    padding: 12px 20px;
                    font-size: 0.9rem;
                    min-width: auto;
                }

                .form-group input,
                .form-group select,
                .form-group textarea {
                    padding: 14px 16px;
                    font-size: 1rem;
                }

                .payment-card {
                    padding: 20px;
                }

                .payment-amount .amount {
                    font-size: 1.8rem;
                }

                .hero-title {
                    font-size: 2rem;
                }

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

                .mouse-scroll-indicator {
                    bottom: 20px;
                }

                .membership-details {
                    padding: 15px;
                }

                .detail-item {
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 5px;
                }
            }

            /* Enhanced Scrollbar */
            .modal-body::-webkit-scrollbar {
                width: 8px;
            }

            .modal-body::-webkit-scrollbar-track {
                background: #f1f5f9;
                border-radius: 4px;
            }

            .modal-body::-webkit-scrollbar-thumb {
                background: linear-gradient(135deg, #bdc3c7, #95a5a6);
                border-radius: 4px;
                transition: all 0.3s ease;
            }

            .modal-body::-webkit-scrollbar-thumb:hover {
                background: linear-gradient(135deg, #95a5a6, #7f8c8d);
            }

            /* Animation keyframes */
            @keyframes float {
                0%, 100% {
                    transform: translateY(0) rotate(0deg);
                }
                33% {
                    transform: translateY(-20px) rotate(120deg);
                }
                66% {
                    transform: translateY(10px) rotate(240deg);
                }
            }

            @keyframes pulse {
                0%, 100% {
                    transform: scale(1);
                    box-shadow: 0 8px 25px rgba(205, 127, 50, 0.3);
                }
                50% {
                    transform: scale(1.05);
                    box-shadow: 0 12px 35px rgba(205, 127, 50, 0.4);
                }
            }

            @keyframes fadeInUp {
                from {
                    opacity: 0;
                    transform: translateY(30px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
                        /* PayStack Specific Styles */
            .payment-method[data-method="paystack"] .method-icon {
                background: linear-gradient(135deg, #00C6A7, #00A8FF);
            }

            .payment-method[data-method="paystack"].active {
                border-color: #00C6A7;
                box-shadow: 0 0 0 2px rgba(0, 198, 167, 0.1);
            }

            /* Manual Redirect Styles */
            .manual-redirect {
                border: 1px solid #e9ecef;
                transition: all 0.3s ease;
            }

            .manual-redirect:hover {
                background: #e9ecef;
                border-color: #3498db;
            }

            .manual-redirect a {
                font-weight: 600;
                transition: color 0.3s ease;
            }

            .manual-redirect a:hover {
                color: #2980b9 !important;
            }

            /* Success Animation Enhancements */
            .success-animation .success-icon {
                background: linear-gradient(135deg, #27ae60, #2ecc71);
                box-shadow: 0 8px 25px rgba(39, 174, 96, 0.3);
            }

            .confetti {
                position: absolute;
                width: 10px;
                height: 10px;
                background: linear-gradient(45deg, #3498db, #e74c3c, #f39c12, #27ae60);
                border-radius: 50%;
                animation: confetti-fall 2s ease-in-out infinite;
            }

            .confetti:nth-child(1) {
                left: 20%;
                animation-delay: 0s;
            }

            .confetti:nth-child(2) {
                left: 50%;
                animation-delay: 0.5s;
            }

            .confetti:nth-child(3) {
                left: 80%;
                animation-delay: 1s;
            }

            @keyframes confetti-fall {
                0% {
                    transform: translateY(-100px) rotate(0deg);
                    opacity: 1;
                }
                100% {
                    transform: translateY(100px) rotate(360deg);
                    opacity: 0;
                }
            }

            /* Enhanced Payment Steps */
            .payment-steps .step {
                transition: all 0.3s ease;
            }

            .payment-steps .step.active {
                color: #3498db;
                transform: scale(1.05);
            }

            .payment-steps .step.active i {
                color: #3498db;
                animation: pulse 2s infinite;
            }

            @keyframes pulse {
                0% {
                    transform: scale(1);
                }
                50% {
                    transform: scale(1.1);
                }
                100% {
                    transform: scale(1);
                }
            }

            /* Bank Details Enhancement */
            .bank-details-official {
                background: linear-gradient(135deg, #f8f9fa, #e9ecef);
                border-left: 4px solid #3498db;
            }

            .bank-item {
                padding: 8px 0;
                border-bottom: 1px solid #dee2e6;
            }

            .bank-item:last-child {
                border-bottom: none;
            }

            .bank-item.full-width {
                grid-column: 1 / -1;
            }

            /* Payment Instructions Enhancement */
            .payment-instructions ol {
                counter-reset: step-counter;
                padding-left: 0;
            }

            .payment-instructions li {
                counter-increment: step-counter;
                margin-bottom: 10px;
                padding-left: 40px;
                position: relative;
                list-style: none;
            }

            .payment-instructions li:before {
                content: counter(step-counter);
                background: #3498db;
                color: white;
                border-radius: 50%;
                width: 25px;
                height: 25px;
                display: flex;
                align-items: center;
                justify-content: center;
                position: absolute;
                left: 0;
                top: 0;
                font-size: 12px;
                font-weight: bold;
            }

            .payment-instructions ul {
                margin: 10px 0;
                padding-left: 20px;
            }

            .payment-instructions ul li {
                padding-left: 20px;
                margin-bottom: 5px;
            }

            .payment-instructions ul li:before {
                content: "•";
                color: #3498db;
                background: none;
                width: auto;
                height: auto;
                position: static;
                font-size: 16px;
            }

            /* Enhanced Security Badge */
            .security-badge {
                background: linear-gradient(135deg, #2c3e50, #34495e);
                border: 1px solid #3498db;
                animation: glow 2s ease-in-out infinite alternate;
            }

            @keyframes glow {
                from {
                    box-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
                }
                to {
                    box-shadow: 0 0 20px rgba(52, 152, 219, 0.8);
                }
            }

            /* Responsive Improvements */
            @media (max-width: 768px) {
                .modal-grid {
                    grid-template-columns: 1fr;
                }

                .payment-steps {
                    flex-direction: column;
                    gap: 15px;
                }

                .bank-detail-grid {
                    grid-template-columns: 1fr;
                }

                .transaction-details {
                    grid-template-columns: 1fr;
                }
            }

            /* Loading States Enhancement */
            .btn-spinner {
                display: none;
            }

            .btn:disabled .btn-text {
                display: none;
            }

            .btn:disabled .btn-spinner {
                display: flex;
                align-items: center;
                gap: 10px;
            }

            .spinner {
                width: 16px;
                height: 16px;
                border: 2px solid transparent;
                border-top: 2px solid white;
                border-radius: 50%;
                animation: spin 1s linear infinite;
            }

            @keyframes spin {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }

            /* Enhanced Form Validation */
            .form-group input:valid {
                border-color: #27ae60;
                box-shadow: 0 0 0 2px rgba(39, 174, 96, 0.1);
            }

            .form-group input:invalid:not(:focus):not(:placeholder-shown) {
                border-color: #e74c3c;
                box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.1);
            }

            .error-message {
                color: #e74c3c;
                font-size: 12px;
                margin-top: 5px;
                display: none;
                align-items: center;
                gap: 5px;
            }

            .error-message:before {
                content: "⚠";
                font-size: 14px;
            }

            /* Success Actions Enhancement */
            .success-actions {
                display: flex;
                gap: 15px;
                justify-content: center;
                flex-wrap: wrap;
                margin: 25px 0;
            }

            .success-actions .btn {
                min-width: 200px;
                transition: all 0.3s ease;
            }

            .success-actions .btn:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 25px rgba(0,0,0,0.15);
            }

            /* Membership Benefits Enhancement */
            .membership-benefits {
                background: linear-gradient(135deg, #f8f9fa, #e9ecef);
                border-radius: 12px;
                padding: 25px;
                margin-top: 25px;
            }

            .membership-benefits h4 {
                color: #2c3e50;
                margin-bottom: 15px;
                text-align: center;
            }

            .membership-benefits ul {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                gap: 10px;
                padding: 0;
            }

            .membership-benefits li {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 8px 0;
            }

            .membership-benefits li i {
                color: #27ae60;
                font-size: 14px;
            }

            /* ===== PHOTO UPLOAD STYLES - GOLDEN BROWNISH VIBES ===== */
            .photo-upload-area {
                border: 2px dashed #d4af37; /* Golden border */
                border-radius: 12px;
                padding: 40px 20px;
                text-align: center;
                cursor: pointer;
                transition: all 0.3s ease;
                background: linear-gradient(135deg, #fff9e6 0%, #f5e6cc 100%); /* Golden gradient */
                margin-bottom: 15px;
                position: relative;
                overflow: hidden;
            }

            .photo-upload-area:hover {
                border-color: #b8860b; /* Dark golden border */
                background: linear-gradient(135deg, #fff0cc 0%, #f0d9a8 100%);
                transform: translateY(-2px);
                box-shadow: 0 8px 25px rgba(212, 175, 55, 0.25);
            }

            .photo-upload-area.dragover {
                border-color: #daa520; /* Golden rod */
                background: linear-gradient(135deg, #ffebcc 0%, #e6c9a5 100%);
                transform: scale(1.02);
                box-shadow: 0 0 0 3px rgba(218, 165, 32, 0.2);
            }

            .upload-placeholder i {
                font-size: 48px;
                color: #d4af37; /* Gold */
                margin-bottom: 15px;
                transition: all 0.3s ease;
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }

            .photo-upload-area:hover .upload-placeholder i {
                color: #b8860b; /* Dark goldenrod */
                transform: scale(1.1) rotate(5deg);
            }

            .upload-placeholder h4 {
                color: #8b4513; /* Saddle brown */
                margin-bottom: 8px;
                font-weight: 600;
                font-size: 1.2rem;
            }

            .upload-placeholder p {
                color: #a0522d; /* Sienna */
                margin-bottom: 5px;
                font-size: 0.95rem;
            }

            .upload-placeholder small {
                color: #cd853f; /* Peru */
                font-style: italic;
                font-size: 0.85rem;
            }

            .photo-preview {
                margin-bottom: 20px;
                animation: fadeIn 0.5s ease;
            }

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

            .preview-container {
                position: relative;
                display: inline-block;
                margin-bottom: 20px;
                border-radius: 12px;
                overflow: hidden;
                box-shadow: 0 8px 25px rgba(139, 69, 19, 0.2);
                transition: all 0.3s ease;
                border: 4px solid #d4af37; /* Gold border */
            }

            .preview-container:hover {
                transform: scale(1.05);
                box-shadow: 0 12px 35px rgba(139, 69, 19, 0.3);
                border-color: #b8860b;
            }

            .preview-container img {
                width: 200px;
                height: 200px;
                object-fit: cover;
                display: block;
            }

            .remove-photo {
                position: absolute;
                top: -8px;
                right: -8px;
                background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
                color: white;
                border: 2px solid white;
                border-radius: 50%;
                width: 32px;
                height: 32px;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 14px;
                transition: all 0.3s ease;
                box-shadow: 0 3px 10px rgba(231, 76, 60, 0.4);
                z-index: 1;
            }

            .remove-photo:hover {
                background: linear-gradient(135deg, #ff4757 0%, #c23616 100%);
                transform: scale(1.15) rotate(90deg);
                box-shadow: 0 5px 15px rgba(231, 76, 60, 0.6);
            }

            .photo-requirements {
                background: linear-gradient(135deg, #f9f3e9 0%, #f1e6d6 100%);
                border: 1px solid #e6d5b8;
                border-radius: 12px;
                padding: 20px;
                margin-top: 15px;
                border-left: 4px solid #d4af37; /* Gold accent */
                box-shadow: 0 4px 12px rgba(212, 175, 55, 0.1);
            }

            .photo-requirements h5 {
                color: #8b4513; /* Saddle brown */
                margin-bottom: 15px;
                display: flex;
                align-items: center;
                gap: 10px;
                font-weight: 600;
                font-size: 1.1rem;
            }

            .photo-requirements h5 i {
                color: #d4af37; /* Gold */
            }

            .photo-requirements ul {
                list-style: none;
                padding: 0;
                margin: 0;
            }

            .photo-requirements li {
                padding: 8px 0;
                color: #8b4513; /* Saddle brown */
                display: flex;
                align-items: center;
                gap: 12px;
                font-size: 0.9rem;
                border-bottom: 1px solid #e6d5b8;
                transition: all 0.3s ease;
            }

            .photo-requirements li:last-child {
                border-bottom: none;
            }

            .photo-requirements li:hover {
                background: rgba(212, 175, 55, 0.1);
                padding-left: 10px;
                border-radius: 6px;
            }

            .photo-requirements li i {
                color: #b8860b; /* Dark goldenrod */
                font-size: 14px;
                min-width: 20px;
            }

            .photo-validation {
                background: linear-gradient(135deg, #fdf8f2 0%, #f8f0e6 100%);
                border: 1px solid #e6d5b8;
                border-radius: 12px;
                padding: 20px;
                margin-top: 15px;
                border-left: 4px solid #d4af37; /* Gold accent */
                animation: slideDown 0.5s ease;
                box-shadow: 0 4px 12px rgba(212, 175, 55, 0.1);
            }

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

            .validation-item {
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 10px 0;
                border-bottom: 1px solid #e6d5b8;
                transition: all 0.3s ease;
            }

            .validation-item:last-child {
                border-bottom: none;
            }

            .validation-item:hover {
                background: rgba(212, 175, 55, 0.1);
                padding-left: 10px;
                border-radius: 6px;
            }

            .validation-item.loading i {
                color: #d4af37; /* Gold */
                animation: pulse 1.5s infinite;
            }

            @keyframes pulse {
                0%, 100% { opacity: 1; }
                50% { opacity: 0.5; }
            }

            .validation-item.success i {
                color: #27ae60; /* Green */
                animation: bounce 0.6s ease;
            }

            @keyframes bounce {
                0%, 20%, 60%, 100% { transform: scale(1); }
                40% { transform: scale(1.2); }
                80% { transform: scale(0.9); }
            }

            .validation-item.error i {
                color: #e74c3c; /* Red */
                animation: shake 0.5s ease;
            }

            @keyframes shake {
                0%, 100% { transform: translateX(0); }
                25% { transform: translateX(-5px); }
                75% { transform: translateX(5px); }
            }

            .validation-item.warning i {
                color: #f39c12; /* Orange */
                animation: pulse 2s infinite;
            }

            .validation-item span {
                color: #8b4513; /* Saddle brown */
                font-size: 0.9rem;
                font-weight: 500;
            }

            /* Error message styling */
            #photoError2 {
                background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
                border: 1px solid #f39c12;
                border-radius: 8px;
                padding: 12px 15px;
                margin-top: 10px;
                color: #d35400; /* Dark orange */
                font-weight: 500;
                display: none;
                animation: shake 0.5s ease;
            }

            #photoError2:before {
                content: "⚠️ ";
                margin-right: 8px;
            }

            /* Responsive design for photo upload */
            @media (max-width: 768px) {
                .photo-upload-area {
                    padding: 30px 15px;
                }

                .upload-placeholder i {
                    font-size: 36px;
                }

                .upload-placeholder h4 {
                    font-size: 1.1rem;
                }

                .preview-container img {
                    width: 150px;
                    height: 150px;
                }

                .photo-requirements,
                .photo-validation {
                    padding: 15px;
                }

                .photo-requirements li {
                    font-size: 0.85rem;
                }
            }

            /* Enhanced form group styling for photo section */
            .form-group.full-width .photo-upload-area {
                margin-top: 8px;
            }

            /* Success state for completed validation */
            .photo-validation.completed {
                border-left-color: #27ae60; /* Green */
                background: linear-gradient(135deg, #d5f4e6 0%, #e8f8f5 100%);
            }

            /* Loading state for photo upload */
            .photo-upload-area.uploading {
                pointer-events: none;
                opacity: 0.8;
            }

            .photo-upload-area.uploading .upload-placeholder i {
                animation: spin 1s linear infinite;
                color: #d4af37;
            }

            @keyframes spin {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }

            /* Progress bar for photo upload */
            .upload-progress {
                width: 100%;
                height: 6px;
                background: #f1e6d6;
                border-radius: 3px;
                margin-top: 10px;
                overflow: hidden;
                display: none;
            }

            .upload-progress-bar {
                height: 100%;
                background: linear-gradient(90deg, #d4af37, #b8860b);
                border-radius: 3px;
                transition: width 0.3s ease;
                width: 0%;
            }

            /* ===== NOTIFICATION STYLES - ENHANCED RED & GREEN ===== */
            .esa-notification {
                position: fixed;
                top: 20px;
                right: 20px;
                padding: 15px 20px;
                border-radius: 10px;
                box-shadow: 0 8px 30px rgba(0,0,0,0.3);
                z-index: 10021;
                display: flex;
                align-items: center;
                gap: 15px;
                max-width: 400px;
                animation: esaSlideInRight 0.3s ease;
                font-weight: 500;
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
                border: none;
                overflow: hidden;
            }

            @keyframes esaSlideInRight {
                from { transform: translateX(100%); opacity: 0; }
                to { transform: translateX(0); opacity: 1; }
            }

            /* SUCCESS - Rich Green */
            .esa-notification.success {
                background: linear-gradient(135deg, #27ae60 0%, #219653 50%, #1e874b 100%);
                color: white;
                border-left: none;
                position: relative;
                box-shadow: 0 8px 25px rgba(39, 174, 96, 0.4);
            }

            .esa-notification.success::before {
                content: '✓';
                font-size: 1.3em;
                font-weight: bold;
            }

            .esa-notification.success::after {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                height: 100%;
                width: 6px;
                background: linear-gradient(to bottom, #2ecc71, #27ae60, #219653);
                z-index: 2;
            }

            .esa-notification.success:hover {
                box-shadow: 0 10px 30px rgba(39, 174, 96, 0.6);
                transform: translateY(-2px);
                transition: all 0.3s ease;
            }

            /* ERROR - Vibrant Red */
            .esa-notification.error {
                background: linear-gradient(135deg, #ff4757 0%, #ff3838 50%, #e84118 100%);
                color: white;
                border-left: none;
                border-radius: 10px;
                box-shadow: 0 8px 25px rgba(255, 71, 87, 0.5);
                font-weight: 600;
                text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
                position: relative;
            }

            .esa-notification.error::before {
                content: "⚠️";
                font-size: 1.3em;
                font-weight: bold;
            }

            .esa-notification.error::after {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                height: 100%;
                width: 6px;
                background: linear-gradient(to bottom, #ff9f43, #ff6b6b, #ff3838);
                z-index: 2;
            }

            .esa-notification.error:hover {
                box-shadow: 0 10px 30px rgba(255, 71, 87, 0.7);
                transform: translateY(-2px);
                transition: all 0.3s ease;
            }

            /* Add a subtle pulse animation for error notifications */
            @keyframes errorPulse {
                0%, 100% { box-shadow: 0 8px 25px rgba(255, 71, 87, 0.5); }
                50% { box-shadow: 0 8px 25px rgba(255, 71, 87, 0.8); }
            }

            .esa-notification.error.new {
                animation: esaSlideInRight 0.3s ease, errorPulse 2s ease 0.3s 3;
            }

            /* WARNING - Golden Brown */
            .esa-notification.warning {
                background: linear-gradient(135deg, #f39c12 0%, #e67e22 50%, #d35400 100%);
                color: white;
                border-left: none;
                position: relative;
            }

            .esa-notification.warning::after {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                height: 100%;
                width: 6px;
                background: linear-gradient(to bottom, #f1c40f, #f39c12, #e67e22);
                z-index: 2;
            }

            /* INFO - Professional Blue */
            .esa-notification.info {
                background: linear-gradient(135deg, #3498db 0%, #2980b9 50%, #1f639b 100%);
                color: white;
                border-left: none;
                position: relative;
            }

            .esa-notification.info::after {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                height: 100%;
                width: 6px;
                background: linear-gradient(to bottom, #5dade2, #3498db, #2980b9);
                z-index: 2;
            }

            /* Close button styling */
            .esa-notification button {
                background: rgba(255, 255, 255, 0.25);
                border: none;
                color: white;
                font-size: 20px;
                cursor: pointer;
                padding: 0;
                width: 28px;
                height: 28px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                transition: all 0.3s ease;
                margin-left: auto;
                flex-shrink: 0;
                position: relative;
                z-index: 3;
            }

            .esa-notification button:hover {
                background: rgba(255, 255, 255, 0.4);
                transform: scale(1.1) rotate(90deg);
                box-shadow: 0 3px 10px rgba(255, 255, 255, 0.3);
            }

            /* Notification content */
            .esa-notification .notification-content {
                flex: 1;
                padding-right: 10px;
                position: relative;
                z-index: 1;
            }

            /* Add subtle shine effect to all notifications */
            .esa-notification::before {
                content: '';
                position: absolute;
                top: -50%;
                left: -50%;
                width: 200%;
                height: 200%;
                background: linear-gradient(
                    to bottom right,
                    rgba(255, 255, 255, 0.1) 0%,
                    rgba(255, 255, 255, 0) 50%
                );
                transform: rotate(30deg);
                pointer-events: none;
                z-index: 1;
            }

            /* Responsive notifications */
            @media (max-width: 768px) {
                .esa-notification {
                    top: 10px;
                    right: 10px;
                    left: 10px;
                    max-width: none;
                    width: auto;
                }
            }





            /* === ABOUT SECTION === */
            .about-mega {
                background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #f8f9fa 100%);
                position: relative;
                overflow: hidden;
                padding: 100px 0;
            }

            .about-mega::before {
                content: '';
                position: absolute;
                top: -100px;
                right: -100px;
                width: 300px;
                height: 300px;
                background: var(--gradient);
                border-radius: 50%;
                opacity: 0.05;
                animation: float 6s ease-in-out infinite;
            }

            .about-mega::after {
                content: '';
                position: absolute;
                bottom: -150px;
                left: -150px;
                width: 400px;
                height: 400px;
                background: var(--gradient-gold);
                border-radius: 50%;
                opacity: 0.05;
                animation: float 8s ease-in-out infinite reverse;
            }

            .about-content-mega {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 80px;
                align-items: start;
                position: relative;
                z-index: 2;
            }

            .about-text-mega {
                padding-right: 20px;
            }

            .about-text-mega h2 {
                color: var(--primary-dark);
                font-size: 3rem;
                margin-bottom: 25px;
                position: relative;
                line-height: 1.1;
                font-weight: 800;
                background: linear-gradient(135deg, var(--primary-dark), var(--chocolate));
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }

            .about-text-mega h2::after {
                content: '';
                position: absolute;
                bottom: -12px;
                left: 0;
                width: 100px;
                height: 6px;
                background: var(--gradient-gold);
                border-radius: 3px;
            }

            .about-text-mega p {
                margin-bottom: 25px;
                color: var(--text-light);
                font-size: 1.15rem;
                line-height: 1.7;
                letter-spacing: 0.3px;
                font-weight: 500;
            }

            /* Mission & Vision Section - VERTICAL STACK */
            .mission-vision-section {
                margin: 60px 0 50px 0;
                padding: 50px 0;
                border-top: 2px solid rgba(212, 175, 55, 0.2);
                border-bottom: 2px solid rgba(212, 175, 55, 0.2);
            }

            .mission-vision-grid {
                display: grid;
                grid-template-columns: 1fr; /* Single column for vertical stacking */
                gap: 50px;
                margin-top: 40px;
            }

            .mission-card, .vision-card {
                background: linear-gradient(145deg, #ffffff, #f8f9fa);
                padding: 50px 60px;
                border-radius: 30px;
                box-shadow: 0 25px 60px rgba(0, 0, 0, 0.1);
                border: 2px solid transparent;
                transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                position: relative;
                overflow: hidden;
                width: 100%;
                max-width: 100%;
            }

            .mission-card::before, .vision-card::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 8px;
                background: var(--gradient-gold);
            }

            .mission-card::after, .vision-card::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: linear-gradient(45deg, transparent, rgba(212, 175, 55, 0.05), transparent);
                transform: translateX(-100%);
                transition: transform 0.8s ease;
            }

            .mission-card:hover::after, .vision-card:hover::after {
                transform: translateX(100%);
            }

            .mission-card:hover, .vision-card:hover {
                transform: translateY(-12px);
                box-shadow: 0 40px 80px rgba(0, 0, 0, 0.15);
                border-color: rgba(212, 175, 55, 0.4);
            }

            .card-header {
                display: flex;
                align-items: center;
                margin-bottom: 35px;
                gap: 30px;
            }

            .icon-container {
                width: 90px;
                height: 90px;
                border-radius: 25px;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                overflow: hidden;
                flex-shrink: 0;
                box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            }

            .mission-icon-bg {
                background: linear-gradient(135deg, #4CAF50, #45a049);
            }

            .vision-icon-bg {
                background: linear-gradient(135deg, #2196F3, #1976D2);
            }

            .icon-container i {
                font-size: 2.5rem;
                color: white;
                z-index: 2;
                position: relative;
            }

            .card-title h3 {
                color: var(--primary-dark);
                font-size: 2rem;
                font-weight: 800;
                margin-bottom: 12px;
                text-transform: uppercase;
                letter-spacing: 1.5px;
            }

            .title-underline {
                width: 80px;
                height: 5px;
                background: var(--gradient-gold);
                border-radius: 3px;
            }

            .card-content {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 50px;
                align-items: start;
            }

            .card-content p {
                color: var(--text-light);
                line-height: 1.8;
                font-size: 1.2rem;
                margin-bottom: 0;
                font-weight: 500;
            }

            /* Mission Features */
            .mission-features {
                display: flex;
                flex-direction: column;
                gap: 20px;
            }

            .feature {
                display: flex;
                align-items: center;
                gap: 18px;
                padding: 18px 25px;
                background: linear-gradient(135deg, rgba(76, 175, 80, 0.08), rgba(76, 175, 80, 0.03));
                border-radius: 15px;
                border-left: 5px solid #4CAF50;
                transition: all 0.4s ease;
                border: 1px solid rgba(76, 175, 80, 0.15);
            }

            .feature:hover {
                background: linear-gradient(135deg, rgba(76, 175, 80, 0.12), rgba(76, 175, 80, 0.06));
                transform: translateX(10px);
                border-color: rgba(76, 175, 80, 0.3);
                box-shadow: 0 10px 25px rgba(76, 175, 80, 0.15);
            }

            .feature i {
                color: #4CAF50;
                font-size: 1.5rem;
                width: 30px;
                text-align: center;
            }

            .feature span {
                color: var(--primary-dark);
                font-weight: 700;
                font-size: 1.1rem;
                letter-spacing: 0.8px;
            }

            /* Vision Pillars */
            .vision-pillars {
                display: flex;
                flex-direction: column;
                gap: 20px;
            }

            .pillar {
                display: flex;
                align-items: center;
                gap: 20px;
                padding: 18px 25px;
                background: linear-gradient(135deg, rgba(33, 150, 243, 0.08), rgba(33, 150, 243, 0.03));
                border-radius: 15px;
                border-left: 5px solid #2196F3;
                transition: all 0.4s ease;
                border: 1px solid rgba(33, 150, 243, 0.15);
            }

            .pillar:hover {
                background: linear-gradient(135deg, rgba(33, 150, 243, 0.12), rgba(33, 150, 243, 0.06));
                transform: translateX(10px);
                border-color: rgba(33, 150, 243, 0.3);
                box-shadow: 0 10px 25px rgba(33, 150, 243, 0.15);
            }

            .pillar-dot {
                width: 16px;
                height: 16px;
                border-radius: 50%;
                background: #2196F3;
                box-shadow: 0 0 20px #2196F3;
                animation: pulse-dot 2s infinite;
                flex-shrink: 0;
            }

            @keyframes pulse-dot {
                0%, 100% {
                    transform: scale(1);
                    opacity: 1;
                }
                50% {
                    transform: scale(1.4);
                    opacity: 0.8;
                }
            }

            .pillar span {
                color: var(--primary-dark);
                font-weight: 700;
                font-size: 1.1rem;
                text-transform: uppercase;
                letter-spacing: 1px;
            }

            /* Stats Section - KEEPING YOUR ORIGINAL STYLE */
            .about-stats-mega {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 20px;
                margin-top: 30px;
            }

            .stat-item-mega {
                text-align: center;
                padding: 25px 15px;
                background: var(--cream);
                border-radius: 15px;
                box-shadow: var(--shadow);
                transition: var(--transition);
                position: relative;
                overflow: hidden;
            }

            .stat-item-mega::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 5px;
                background: var(--gradient);
            }

            .stat-item-mega:hover {
                transform: translateY(-8px);
                box-shadow: var(--shadow-heavy);
            }

            .stat-number-mega {
                font-size: 1.8rem;
                font-weight: 900;
                color: var(--primary-medium);
                margin-bottom: 8px;
                display: block;
            }

            .stat-text-mega {
                font-size: 0.9rem;
                color: var(--text-light);
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 0.8px;
            }

            /* Image Styling - WIDER AND BETTER */
            .about-image-mega {
                position: relative;
                border-radius: 25px;
                overflow: hidden;
                box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
                transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                height: fit-content;
                width: 100%;
                max-width: none;
            }

            .about-image-mega::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(45deg, transparent, rgba(212, 175, 55, 0.1), transparent);
                transform: translateX(-100%);
                transition: transform 0.8s ease;
                z-index: 2;
            }

            .about-image-mega:hover::before {
                transform: translateX(100%);
            }

            .about-image-mega img {
                width: 100%;
                height: 600px;
                object-fit: cover;
                display: block;
                transition: all 0.6s ease;
                filter: brightness(0.95) contrast(1.1);
            }

            .about-image-mega:hover {
                box-shadow: 0 35px 70px rgba(0, 0, 0, 0.3);
                transform: translateY(-15px) scale(1.02);
            }

            .about-image-mega:hover img {
                transform: scale(1.08);
                filter: brightness(1.05) contrast(1.15);
            }

            .image-overlay {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                padding: 40px 35px;
                background: linear-gradient(transparent, rgba(62, 39, 35, 0.95));
                color: var(--white);
                transform: translateY(100%);
                transition: all 0.5s ease;
                z-index: 3;
            }

            .about-image-mega:hover .image-overlay {
                transform: translateY(0);
            }

            .image-overlay h3 {
                font-size: 1.5rem;
                font-weight: 700;
                margin-bottom: 8px;
                color: var(--gold);
            }

            .image-overlay p {
                font-size: 1rem;
                opacity: 0.9;
                line-height: 1.5;
                margin-bottom: 15px;
            }

            /* Learn More Button */
            .learn-more-btn {
                background: linear-gradient(135deg, var(--gold), #d4af37);
                color: var(--primary-dark);
                border: none;
                padding: 12px 25px;
                border-radius: 25px;
                font-weight: 700;
                font-size: 0.9rem;
                cursor: pointer;
                transition: all 0.3s ease;
                text-transform: uppercase;
                letter-spacing: 0.5px;
                box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
            }

            .learn-more-btn:hover {
                transform: translateY(-3px);
                box-shadow: 0 8px 25px rgba(212, 175, 55, 0.5);
                background: linear-gradient(135deg, #d4af37, var(--gold));
            }

            /* Border glow effect */
            .about-image-mega::after {
                content: '';
                position: absolute;
                top: -3px;
                left: -3px;
                right: -3px;
                bottom: -3px;
                border-radius: 28px;
                background: linear-gradient(45deg, var(--gold), var(--primary-medium), var(--gold));
                opacity: 0;
                transition: opacity 0.5s ease;
                z-index: 1;
            }

            .about-image-mega:hover::after {
                opacity: 0.4;
            }

            /* Animations */
            @keyframes float {
                0%, 100% {
                    transform: translateY(0) rotate(0deg);
                }
                33% {
                    transform: translateY(-20px) rotate(120deg);
                }
                66% {
                    transform: translateY(10px) rotate(240deg);
                }
            }

            /* Responsive Design */
            @media (max-width: 1200px) {
                .about-content-mega {
                    grid-template-columns: 1fr;
                    gap: 60px;
                }

                .about-text-mega {
                    padding-right: 0;
                }

                .about-image-mega {
                    order: -1;
                    max-width: 800px;
                    margin: 0 auto;
                }
            }

            @media (max-width: 968px) {
                .about-mega {
                    padding: 80px 0;
                }

                .mission-vision-grid {
                    gap: 40px;
                }

                .mission-card, .vision-card {
                    padding: 40px 35px;
                }

                .card-header {
                    flex-direction: column;
                    text-align: center;
                    gap: 25px;
                }

                .icon-container {
                    width: 80px;
                    height: 80px;
                }

                .icon-container i {
                    font-size: 2.2rem;
                }

                .card-title h3 {
                    font-size: 1.8rem;
                }

                .card-content {
                    grid-template-columns: 1fr;
                    gap: 35px;
                }

                .about-image-mega img {
                    height: 500px;
                }
            }

            @media (max-width: 768px) {
                .about-mega {
                    padding: 60px 0;
                }

                .about-text-mega h2 {
                    font-size: 2.5rem;
                }

                .mission-vision-grid {
                    gap: 35px;
                }

                .mission-card, .vision-card {
                    padding: 35px 30px;
                }

                .about-stats-mega {
                    grid-template-columns: repeat(3, 1fr);
                    gap: 15px;
                }

                .about-image-mega img {
                    height: 400px;
                }

                .mission-features, .vision-pillars {
                    gap: 18px;
                }

                .feature, .pillar {
                    padding: 16px 20px;
                }
            }

            @media (max-width: 480px) {
                .about-mega {
                    padding: 50px 0;
                }

                .about-text-mega h2 {
                    font-size: 2rem;
                }

                .about-text-mega p {
                    font-size: 1rem;
                }

                .mission-vision-section {
                    margin: 40px 0 30px 0;
                    padding: 30px 0;
                }

                .mission-card, .vision-card {
                    padding: 30px 25px;
                }

                .card-title h3 {
                    font-size: 1.5rem;
                }

                .card-content p {
                    font-size: 1.1rem;
                }

                .about-stats-mega {
                    grid-template-columns: 1fr;
                    gap: 15px;
                }

                .about-image-mega img {
                    height: 350px;
                }

                .image-overlay {
                    padding: 30px 25px;
                }

                .feature, .pillar {
                    padding: 14px 18px;
                }

                .feature i, .pillar-dot {
                    margin-right: 5px;
                }
            }

            /* About Images Column */
            .about-images-column {
                display: flex;
                flex-direction: column;
                gap: 30px;
            }

            /* Ensure all image cards have the same styling */
            .about-images-column .about-image-mega {
                position: relative;
                border-radius: 25px;
                overflow: hidden;
                box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
                transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                width: 100%;
                height: 400px;
            }

            .about-images-column .about-image-mega::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(45deg, transparent, rgba(212, 175, 55, 0.1), transparent);
                transform: translateX(-100%);
                transition: transform 0.8s ease;
                z-index: 2;
            }

            .about-images-column .about-image-mega:hover::before {
                transform: translateX(100%);
            }

            .about-images-column .about-image-mega img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
                transition: all 0.6s ease;
                filter: brightness(0.95) contrast(1.1);
            }

            .about-images-column .about-image-mega:hover {
                box-shadow: 0 35px 70px rgba(0, 0, 0, 0.3);
                transform: translateY(-10px) scale(1.02);
            }

            .about-images-column .about-image-mega:hover img {
                transform: scale(1.08);
                filter: brightness(1.05) contrast(1.15);
            }

            .about-images-column .image-overlay {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                padding: 40px 35px;
                background: linear-gradient(transparent, rgba(62, 39, 35, 0.95));
                color: var(--white);
                transform: translateY(100%);
                transition: all 0.5s ease;
                z-index: 3;
            }

            .about-images-column .about-image-mega:hover .image-overlay {
                transform: translateY(0);
            }

            .about-images-column .image-overlay h3 {
                font-size: 1.5rem;
                font-weight: 700;
                margin-bottom: 8px;
                color: var(--gold);
            }

            .about-images-column .image-overlay p {
                font-size: 1rem;
                opacity: 0.9;
                line-height: 1.5;
            }

            /* Border glow effect */
            .about-images-column .about-image-mega::after {
                content: '';
                position: absolute;
                top: -3px;
                left: -3px;
                right: -3px;
                bottom: -3px;
                border-radius: 28px;
                background: linear-gradient(45deg, var(--gold), var(--primary-medium), var(--gold));
                opacity: 0;
                transition: opacity 0.5s ease;
                z-index: 1;
            }

            .about-images-column .about-image-mega:hover::after {
                opacity: 0.4;
            }

            /* Responsive Design */
            @media (max-width: 1200px) {
                .about-images-column .about-image-mega {
                    height: 350px;
                }
            }

            @media (max-width: 768px) {
                .about-images-column {
                    gap: 25px;
                }

                .about-images-column .about-image-mega {
                    height: 300px;
                }

                .about-images-column .image-overlay {
                    padding: 30px 25px;
                }
            }

            @media (max-width: 480px) {
                .about-images-column .about-image-mega {
                    height: 250px;
                }

                .about-images-column .image-overlay h3 {
                    font-size: 1.3rem;
                }

                .about-images-column .image-overlay p {
                    font-size: 0.9rem;
                }
            }

                    /* === DEPARTMENTS SECTION === */
                    .departments-mega {
                        background: var(--gradient);
                        color: var(--white);
                        position: relative;
                        overflow: hidden;
                        padding: 100px 0;
                    }

                    .departments-mega::before {
                        content: '';
                        position: absolute;
                        top: -200px;
                        right: -200px;
                        width: 500px;
                        height: 500px;
                        background: rgba(255, 255, 255, 0.05);
                        border-radius: 50%;
                    }

                    .departments-mega::after {
                        content: '';
                        position: absolute;
                        bottom: -200px;
                        left: -200px;
                        width: 500px;
                        height: 500px;
                        background: rgba(255, 255, 255, 0.05);
                        border-radius: 50%;
                    }

                    .departments-mega .section-title h2 {
                        color: #ffffff;
                        font-size: clamp(2rem, 5vw, 3rem);
                        margin-bottom: 15px;
                        text-align: center;
                    }

                    .departments-mega .section-title p {
                        color: #cbd5e0;
                        font-size: clamp(1rem, 2vw, 1.2rem);
                        text-align: center;
                    }

                    .departments-grid-mega {
                        display: grid;
                        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
                        gap: 40px;
                        position: relative;
                        z-index: 2;
                    }

                    /* Department Cards - Unique Styling for Each */
                    .department-card-mega {
                        background: rgba(255, 255, 255, 0.1);
                        backdrop-filter: blur(10px);
                        border-radius: 20px;
                        padding: 40px 30px;
                        text-align: center;
                        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
                        border: 1px solid rgba(255, 255, 255, 0.2);
                        position: relative;
                        overflow: hidden;
                        cursor: pointer;
                    }

                    .department-card-mega::before {
                        content: '';
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 5px;
                        transition: all 0.4s ease;
                    }

                    /* Civil Department - Blue Theme */
                    .civil-department::before {
                        background: linear-gradient(90deg, #3498db, #2980b9);
                    }

                    .civil-department:hover {
                        transform: translateY(-15px) scale(1.02);
                        box-shadow: 0 20px 40px rgba(52, 152, 219, 0.3);
                        border-color: rgba(52, 152, 219, 0.4);
                    }

                    /* Mechanical Department - Red Theme */
                    .mechanical-department::before {
                        background: linear-gradient(90deg, #e74c3c, #c0392b);
                    }

                    .mechanical-department:hover {
                        transform: translateY(-15px) scale(1.02);
                        box-shadow: 0 20px 40px rgba(231, 76, 60, 0.3);
                        border-color: rgba(231, 76, 60, 0.4);
                    }

                    /* Electrical Department - Yellow Theme */
                    .electrical-department::before {
                        background: linear-gradient(90deg, #f39c12, #e67e22);
                    }

                    .electrical-department:hover {
                        transform: translateY(-15px) scale(1.02);
                        box-shadow: 0 20px 40px rgba(243, 156, 18, 0.3);
                        border-color: rgba(243, 156, 18, 0.4);
                    }

                    /* Agricultural Department - Green Theme */
                    .agricultural-department::before {
                        background: linear-gradient(90deg, #27ae60, #2ecc71);
                    }

                    .agricultural-department:hover {
                        transform: translateY(-15px) scale(1.02);
                        box-shadow: 0 20px 40px rgba(39, 174, 96, 0.3);
                        border-color: rgba(39, 174, 96, 0.4);
                    }

                    .department-icon-mega {
                        font-size: 4rem;
                        margin-bottom: 25px;
                        display: inline-block;
                        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                        filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
                    }

                    .civil-department .department-icon-mega {
                        color: #3498db;
                    }

                    .mechanical-department .department-icon-mega {
                        color: #e74c3c;
                    }

                    .electrical-department .department-icon-mega {
                        color: #f39c12;
                    }

                    .agricultural-department .department-icon-mega {
                        color: #27ae60;
                    }

                    .department-card-mega:hover .department-icon-mega {
                        transform: scale(1.2) rotate(5deg);
                    }

                    .department-card-mega h3 {
                        font-size: 1.8rem;
                        margin-bottom: 20px;
                        font-weight: 700;
                        color: #ffffff;
                    }

                    .department-card-mega p {
                        margin-bottom: 25px;
                        opacity: 0.9;
                        font-size: 1.1rem;
                        line-height: 1.6;
                        color: #e2e8f0;
                    }

                    .btn {
                        display: inline-block;
                        padding: 12px 30px;
                        border-radius: 50px;
                        text-decoration: none;
                        font-weight: 600;
                        cursor: pointer;
                        transition: all 0.3s ease;
                        border: none;
                        font-size: 1rem;
                    }

                    .btn-gold {
                        background: linear-gradient(135deg, #e6b400, #ffd700);
                        color: #1a365d;
                        box-shadow: 0 4px 15px rgba(230, 180, 0, 0.3);
                    }

                    .btn-gold:hover {
                        transform: translateY(-3px);
                        box-shadow: 0 7px 20px rgba(230, 180, 0, 0.4);
                    }

                    .btn-outline {
                        background: transparent;
                        border: 2px solid #e6b400;
                        color: #e6b400;
                    }

                    .btn-outline:hover {
                        background: #e6b400;
                        color: #1a365d;
                    }

                    /* Only make the section title responsive */
                    @media (max-width: 768px) {
                        .departments-mega .section-title h2 {
                            font-size: 2.2rem;
                        }

                        .departments-mega .section-title p {
                            font-size: 1rem;
                        }
                    }

                    @media (max-width: 480px) {
                        .departments-mega .section-title h2 {
                            font-size: 1.8rem;
                        }

                        .departments-mega .section-title p {
                            font-size: 0.9rem;
                        }
                    }

                    /* === MODALS STYLING === */
                    .department-full-modal {
                        position: fixed;
                        top: 0;
                        left: 0;
                        width: 100vw;
                        height: 100vh;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        opacity: 0;
                        visibility: hidden;
                        transition: all 0.4s ease;
                        z-index: 10010;
                        pointer-events: none;
                    }

                    .department-full-modal.active {
                        opacity: 1;
                        visibility: visible;
                        pointer-events: all;
                    }

                    .modal-backdrop {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background: rgba(0, 0, 0, 0.92);
                        backdrop-filter: blur(10px);
                        cursor: pointer;
                    }

                    .modal-container {
                        position: relative;
                        width: 94%;
                        height: 94%;
                        max-width: 1400px;
                        background: #ffffff;
                        border-radius: 12px;
                        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
                        overflow: hidden;
                        transform: scale(0.95);
                        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                        border: 1px solid #e0e0e0;
                    }

                    .department-full-modal.active .modal-container {
                        transform: scale(1);
                    }

                    .modal-content {
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        background: #ffffff;
                        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                    }

                    .modal-close {
                        position: absolute;
                        top: 20px;
                        right: 20px;
                        width: 45px;
                        height: 45px;
                        background: #3E2723;
                        border: none;
                        border-radius: 50%;
                        color: #ffffff;
                        font-size: 1.4rem;
                        cursor: pointer;
                        transition: all 0.3s ease;
                        z-index: 10011;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
                        border: 2px solid #ffffff;
                        font-weight: 300;
                    }

                    .modal-close:hover {
                        transform: rotate(90deg) scale(1.05);
                        background: #e74c3c;
                    }

                    .modal-header {
                        color: #ffffff;
                        padding: 35px 40px 25px;
                        position: relative;
                        overflow: hidden;
                        border-bottom: 1px solid #bdc3c7;
                    }

                    /* Department-specific modal headers */
                    .civil-department .modal-header {
                        background: linear-gradient(135deg, #3498db, #2980b9);
                    }

                    .mechanical-department .modal-header {
                        background: linear-gradient(135deg, #e74c3c, #c0392b);
                    }

                    .electrical-department .modal-header {
                        background: linear-gradient(135deg, #f39c12, #e67e22);
                    }

                    .agricultural-department .modal-header {
                        background: linear-gradient(135deg, #27ae60, #2ecc71);
                    }

                    .modal-header::after {
                        content: '';
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 100%;
                        height: 3px;
                    }

                    .civil-department .modal-header::after {
                        background: linear-gradient(90deg, #3498db, #2980b9, #1abc9c);
                    }

                    .mechanical-department .modal-header::after {
                        background: linear-gradient(90deg, #e74c3c, #c0392b, #d35400);
                    }

                    .electrical-department .modal-header::after {
                        background: linear-gradient(90deg, #f39c12, #f1c40f, #e67e22);
                    }

                    .agricultural-department .modal-header::after {
                        background: linear-gradient(90deg, #27ae60, #2ecc71, #16a085);
                    }

                    .modal-icon {
                        width: 70px;
                        height: 70px;
                        background: rgba(255, 255, 255, 0.1);
                        border-radius: 12px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 2.2rem;
                        margin-bottom: 20px;
                        border: 2px solid rgba(255, 255, 255, 0.2);
                        color: #ecf0f1;
                    }

                    .modal-title h2 {
                        color: #ffffff;
                        font-size: 2.2rem;
                        margin-bottom: 8px;
                        font-weight: 600;
                        letter-spacing: -0.5px;
                        line-height: 1.2;
                    }

                    .modal-subtitle {
                        color: #bdc3c7;
                        font-size: 1.1rem;
                        font-weight: 400;
                        margin: 0;
                        line-height: 1.4;
                    }

                    .modal-body {
                        flex: 1;
                        overflow-y: auto;
                        padding: 0;
                        background: #f8f9fa;
                    }

                    .modal-hero-image {
                        width: 100%;
                        height: 280px;
                        overflow: hidden;
                        position: relative;
                        border-bottom: 1px solid #e0e0e0;
                    }

                    .modal-hero-image img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        filter: brightness(0.95);
                    }

                    .modal-grid {
                        padding: 30px 40px;
                        display: flex;
                        flex-direction: column;
                        gap: 25px;
                        max-width: 1200px;
                        margin: 0 auto;
                    }

                    .modal-section {
                        background: #ffffff;
                        padding: 25px 30px;
                        border-radius: 8px;
                        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
                        border: 1px solid #e9ecef;
                        transition: all 0.3s ease;
                    }

                    .modal-section:hover {
                        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
                        transform: translateY(-2px);
                    }

                    /* Department-specific section borders */
                    .civil-department .modal-section {
                        border-left: 4px solid #3498db;
                    }

                    .mechanical-department .modal-section {
                        border-left: 4px solid #e74c3c;
                    }

                    .electrical-department .modal-section {
                        border-left: 4px solid #f39c12;
                    }

                    .agricultural-department .modal-section {
                        border-left: 4px solid #27ae60;
                    }

                    .modal-section h3 {
                        color: #2c3e50;
                        font-size: 1.4rem;
                        margin-bottom: 16px;
                        font-weight: 600;
                        padding-bottom: 8px;
                        border-bottom: 1px solid #ecf0f1;
                        display: flex;
                        align-items: center;
                        gap: 10px;
                    }

                    .modal-section h3::before {
                        content: '▸';
                        font-size: 1.2rem;
                    }

                    .civil-department .modal-section h3::before {
                        color: #3498db;
                    }

                    .mechanical-department .modal-section h3::before {
                        color: #e74c3c;
                    }

                    .electrical-department .modal-section h3::before {
                        color: #f39c12;
                    }

                    .agricultural-department .modal-section h3::before {
                        color: #27ae60;
                    }

                    .modal-section p {
                        color: #5d6d7e;
                        font-size: 1rem;
                        line-height: 1.6;
                        margin-bottom: 12px;
                        text-align: justify;
                    }
                    /* Curriculum & Courses Styling */
                    .curriculum-container {
                        display: flex;
                        flex-direction: column;
                        gap: 15px;
                    }

                    .year-dropdown {
                        border: 1px solid #e9ecef;
                        border-radius: 8px;
                        overflow: hidden;
                        transition: all 0.3s ease;
                    }

                    .year-header {
                        background: #f8f9fa;
                        padding: 16px 20px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        cursor: pointer;
                        transition: all 0.3s ease;
                        border-bottom: 1px solid transparent;
                    }

                    .year-header:hover {
                        background: #e9ecef;
                    }

                    .year-header h4 {
                        margin: 0;
                        color: #2c3e50;
                        font-size: 1.2rem;
                        font-weight: 600;
                    }

                    .year-header i {
                        transition: transform 0.3s ease;
                        color: #7f8c8d;
                    }

                    .year-dropdown.active .year-header i {
                        transform: rotate(180deg);
                    }

                    .semester-container {
                        max-height: 0;
                        overflow: hidden;
                        transition: max-height 0.4s ease;
                    }

                    .year-dropdown.active .semester-container {
                        max-height: 2000px;
                    }

                    .semester-dropdown {
                        border-bottom: 1px solid #e9ecef;
                    }

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

                    .semester-header {
                        background: #ffffff;
                        padding: 14px 20px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        cursor: pointer;
                        transition: all 0.3s ease;
                    }

                    .semester-header:hover {
                        background: #f8f9fa;
                    }

                    .semester-header h5 {
                        margin: 0;
                        color: #2c3e50;
                        font-size: 1.1rem;
                        font-weight: 500;
                    }

                    .semester-header i {
                        transition: transform 0.3s ease;
                        color: #7f8c8d;
                        font-size: 0.9rem;
                    }

                    .semester-dropdown.active .semester-header i {
                        transform: rotate(180deg);
                    }

                    .courses-list {
                        max-height: 0;
                        overflow: hidden;
                        transition: max-height 0.4s ease;
                        background: #ffffff;
                    }

                    .semester-dropdown.active .courses-list {
                        max-height: 1000px;
                    }

                    .course-item {
                        padding: 12px 20px;
                        border-bottom: 1px solid #f1f2f6;
                        color: #5d6d7e;
                        font-size: 0.95rem;
                        transition: all 0.2s ease;
                        display: flex;
                        align-items: center;
                    }

                    .course-item:last-child {
                        border-bottom: none;
                    }

                    .course-item:hover {
                        background: #f8f9fa;
                        padding-left: 25px;
                        color: #2c3e50;
                    }

                    .course-item::before {
                        content: '•';
                        color: #3498db;
                        font-weight: bold;
                        margin-right: 10px;
                    }

                    .civil-department .course-item::before {
                        color: #3498db;
                    }

                    .mechanical-department .course-item::before {
                        color: #e74c3c;
                    }

                    .electrical-department .course-item::before {
                        color: #f39c12;
                    }

                    .agricultural-department .course-item::before {
                        color: #27ae60;
                    }


                /* Focus Grid */
                .focus-grid {
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                    gap: 12px;
                }

                .focus-item {
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    padding: 14px 16px;
                    background: #f8f9fa;
                    border-radius: 6px;
                    transition: all 0.2s ease;
                    border: 1px solid #e9ecef;
                }

                .civil-department .focus-item {
                    border-left: 3px solid #3498db;
                }

                .mechanical-department .focus-item {
                    border-left: 3px solid #e74c3c;
                }

                .electrical-department .focus-item {
                    border-left: 3px solid #f39c12;
                }

                .agricultural-department .focus-item {
                    border-left: 3px solid #27ae60;
                }

                .focus-item:hover {
                    background: #ffffff;
                    transform: translateX(4px);
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
                }

                .focus-item i {
                    font-size: 1.1rem;
                    width: 20px;
                    text-align: center;
                }

                .civil-department .focus-item i {
                    color: #3498db;
                }

                .mechanical-department .focus-item i {
                    color: #e74c3c;
                }

                .electrical-department .focus-item i {
                    color: #f39c12;
                }

                .agricultural-department .focus-item i {
                    color: #27ae60;
                }

                .focus-item span {
                    color: #2c3e50;
                    font-weight: 500;
                    font-size: 0.95rem;
                    line-height: 1.4;
                }

                /* Courses Grid */
                .courses-grid {
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                    gap: 10px;
                }

                .course-tag {
                    display: inline-block;
                    padding: 10px 16px;
                    color: #ffffff;
                    border-radius: 20px;
                    font-size: 0.85rem;
                    font-weight: 500;
                    text-align: center;
                    transition: all 0.3s ease;
                    border: none;
                    cursor: default;
                    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
                }

                .civil-department .course-tag {
                    background: linear-gradient(135deg, #3498db, #2980b9);
                }

                .mechanical-department .course-tag {
                    background: linear-gradient(135deg, #e74c3c, #c0392b);
                }

                .electrical-department .course-tag {
                    background: linear-gradient(135deg, #f39c12, #e67e22);
                }

                .agricultural-department .course-tag {
                    background: linear-gradient(135deg, #27ae60, #2ecc71);
                }

                .course-tag:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
                }

                /* Faculty Grid */
                .faculty-grid {
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                    gap: 16px;
                }

                .faculty-item {
                    background: #ffffff;
                    padding: 20px;
                    border-radius: 8px;
                    border: 1px solid #e9ecef;
                    transition: all 0.3s ease;
                    position: relative;
                    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
                }

                .civil-department .faculty-item {
                    border-left: 4px solid #3498db;
                }

                .mechanical-department .faculty-item {
                    border-left: 4px solid #e74c3c;
                }

                .electrical-department .faculty-item {
                    border-left: 4px solid #f39c12;
                }

                .agricultural-department .faculty-item {
                    border-left: 4px solid #27ae60;
                }

                .faculty-item:hover {
                    background: #f8f9fa;
                    transform: translateY(-3px);
                    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
                }

                .faculty-item h4 {
                    color: #2c3e50;
                    font-size: 1.1rem;
                    margin-bottom: 8px;
                    font-weight: 600;
                }

                .faculty-item p {
                    color: #7f8c8d;
                    margin: 0;
                    font-size: 0.92rem;
                    line-height: 1.5;
                }

                /* Projects Grid */
                .projects-grid {
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                    gap: 16px;
                }

                .project-item {
                    background: #ffffff;
                    padding: 20px;
                    border-radius: 8px;
                    border: 1px solid #e9ecef;
                    transition: all 0.3s ease;
                    position: relative;
                    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
                }

                .civil-department .project-item {
                    border-left: 4px solid #3498db;
                }

                .mechanical-department .project-item {
                    border-left: 4px solid #e74c3c;
                }

                .electrical-department .project-item {
                    border-left: 4px solid #f39c12;
                }

                .agricultural-department .project-item {
                    border-left: 4px solid #27ae60;
                }

                .project-item:hover {
                    background: #f8f9fa;
                    transform: translateY(-3px);
                    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
                }

                .project-item h4 {
                    color: #2c3e50;
                    font-size: 1.1rem;
                    margin-bottom: 8px;
                    font-weight: 600;
                }

                .project-item p {
                    color: #7f8c8d;
                    margin: 0;
                    font-size: 0.92rem;
                    line-height: 1.5;
                }

                /* Partners Grid */
                .partners-grid {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 15px;
                    justify-content: center;
                    align-items: center;
                }

                .partner-logo {
                    width: 120px;
                    height: 60px;
                    background: white;
                    border-radius: 8px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-weight: 600;
                    color: #2c3e50;
                    border: 1px solid #e2e8f0;
                    padding: 10px;
                    transition: all 0.3s ease;
                    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
                }

                .partner-logo:hover {
                    transform: translateY(-3px);
                    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
                }

                .civil-department .partner-logo:hover {
                    border-color: #3498db;
                }

                .mechanical-department .partner-logo:hover {
                    border-color: #e74c3c;
                }

                .electrical-department .partner-logo:hover {
                    border-color: #f39c12;
                }

                .agricultural-department .partner-logo:hover {
                    border-color: #27ae60;
                }

                /* Testimonials */
                .testimonial-item {
                    background: linear-gradient(135deg, #ffffff, #f8f9fa);
                    border-radius: 10px;
                    padding: 25px;
                    margin-bottom: 20px;
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
                    position: relative;
                }

                .civil-department .testimonial-item {
                    border-left: 4px solid #3498db;
                }

                .mechanical-department .testimonial-item {
                    border-left: 4px solid #e74c3c;
                }

                .electrical-department .testimonial-item {
                    border-left: 4px solid #f39c12;
                }

                .agricultural-department .testimonial-item {
                    border-left: 4px solid #27ae60;
                }

                .testimonial-item::before {
                    content: '"';
                    position: absolute;
                    top: 15px;
                    left: 20px;
                    font-size: 3rem;
                    opacity: 0.2;
                    font-family: Georgia, serif;
                }

                .civil-department .testimonial-item::before {
                    color: #3498db;
                }

                .mechanical-department .testimonial-item::before {
                    color: #e74c3c;
                }

                .electrical-department .testimonial-item::before {
                    color: #f39c12;
                }

                .agricultural-department .testimonial-item::before {
                    color: #27ae60;
                }

                .testimonial-text {
                    font-style: italic;
                    margin-bottom: 15px;
                    color: #5d6d7e;
                    line-height: 1.6;
                    position: relative;
                    z-index: 1;
                }

                .testimonial-author {
                    font-weight: bold;
                    color: #2c3e50;
                    margin-bottom: 4px;
                }

                .testimonial-role {
                    color: #7f8c8d;
                    font-size: 0.9rem;
                }

                /* FAQ Section */
                .faq-item {
                    margin-bottom: 20px;
                    border-bottom: 1px solid #e2e8f0;
                    padding-bottom: 20px;
                    transition: all 0.3s ease;
                }

                .faq-item:last-child {
                    border-bottom: none;
                    margin-bottom: 0;
                }

                .faq-question {
                    font-weight: 600;
                    color: #2c3e50;
                    margin-bottom: 10px;
                    cursor: pointer;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 12px 16px;
                    background: #f8f9fa;
                    border-radius: 6px;
                    transition: all 0.3s ease;
                }

                .civil-department .faq-question {
                    border-left: 3px solid #3498db;
                }

                .mechanical-department .faq-question {
                    border-left: 3px solid #e74c3c;
                }

                .electrical-department .faq-question {
                    border-left: 3px solid #f39c12;
                }

                .agricultural-department .faq-question {
                    border-left: 3px solid #27ae60;
                }

                .faq-question:hover {
                    background: #e9ecef;
                    transform: translateX(4px);
                }

                .faq-question i {
                    color: #7f8c8d;
                    transition: transform 0.3s ease;
                }

                .faq-answer {
                    color: #5d6d7e;
                    padding: 16px;
                    background: #ffffff;
                    border-radius: 6px;
                    margin-top: 8px;
                    line-height: 1.6;
                    border: 1px solid #e9ecef;
                    display: none;
                    animation: fadeIn 0.3s ease;
                }

                .faq-answer.active {
                    display: block;
                }

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

                /* Career Grid */
                .career-grid {
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                    gap: 16px;
                }

                .career-item {
                    background: #ffffff;
                    padding: 20px;
                    border-radius: 6px;
                    border: 1px solid #e9ecef;
                    transition: all 0.2s ease;
                    position: relative;
                }

                .civil-department .career-item {
                    border-left: 3px solid #3498db;
                }

                .mechanical-department .career-item {
                    border-left: 3px solid #e74c3c;
                }

                .electrical-department .career-item {
                    border-left: 3px solid #f39c12;
                }

                .agricultural-department .career-item {
                    border-left: 3px solid #27ae60;
                }

                .career-item:hover {
                    background: #f8f9fa;
                    transform: translateY(-2px);
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
                }

                .career-item h4 {
                    color: #2c3e50;
                    font-size: 1.1rem;
                    margin-bottom: 8px;
                    font-weight: 600;
                }

                .career-item p {
                    color: #7f8c8d;
                    margin: 0;
                    font-size: 0.92rem;
                    line-height: 1.5;
                }

                /* Details Grid */
                .details-grid {
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                    gap: 16px;
                }

                .detail-item {
                    display: flex;
                    align-items: center;
                    gap: 15px;
                    padding: 16px 20px;
                    background: #f8f9fa;
                    border-radius: 6px;
                    border: 1px solid #e9ecef;
                    transition: all 0.2s ease;
                }

                .detail-item:hover {
                    background: #ffffff;
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
                }

                .detail-item i {
                    font-size: 1.4rem;
                    color: #95a5a6;
                    width: 25px;
                    text-align: center;
                }

                .detail-item-content {
                    flex: 1;
                }

                .detail-item strong {
                    color: #2c3e50;
                    font-size: 0.95rem;
                    display: block;
                    margin-bottom: 4px;
                    font-weight: 600;
                }

                .detail-item p {
                    color: #7f8c8d;
                    margin: 0;
                    font-size: 0.9rem;
                    line-height: 1.4;
                }

                .modal-footer {
                    padding: 20px 40px;
                    background: #ffffff;
                    display: flex;
                    gap: 15px;
                    justify-content: center;
                    border-top: 1px solid #e9ecef;
                    background: #f8f9fa;
                }

                .modal-footer .btn {
                    padding: 12px 28px;
                    font-size: 0.95rem;
                    font-weight: 500;
                    border-radius: 6px;
                    transition: all 0.2s ease;
                    border: 1px solid #bdc3c7;
                    background: #ffffff;
                    color: #2c3e50;
                    cursor: pointer;
                }

                .modal-footer .btn.btn-gold {
                    background: #3498db;
                    color: #ffffff;
                    border: none;
                }

                .modal-footer .btn:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
                }

                /* Contact Options Modal */
                .contact-options-modal {
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100vw;
                    height: 100vh;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    opacity: 0;
                    visibility: hidden;
                    transition: all 0.3s ease;
                    z-index: 10020;
                    pointer-events: none;
                }

                .contact-options-modal.active {
                    opacity: 1;
                    visibility: visible;
                    pointer-events: all;
                }

                .contact-modal-backdrop {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(0, 0, 0, 0.8);
                    backdrop-filter: blur(5px);
                    cursor: pointer;
                }

                .contact-modal-container {
                    position: relative;
                    width: 90%;
                    max-width: 500px;
                    background: #ffffff;
                    border-radius: 12px;
                    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
                    overflow: hidden;
                    transform: scale(0.9);
                    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                }

                .contact-options-modal.active .contact-modal-container {
                    transform: scale(1);
                }

                .contact-modal-content {
                    padding: 30px;
                }

                .contact-modal-close {
                    position: absolute;
                    top: 15px;
                    right: 15px;
                    width: 35px;
                    height: 35px;
                    background: #e74c3c;
                    border: none;
                    border-radius: 50%;
                    color: #ffffff;
                    font-size: 1.2rem;
                    cursor: pointer;
                    transition: all 0.3s ease;
                    z-index: 10021;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .contact-modal-close:hover {
                    transform: rotate(90deg) scale(1.1);
                    background: #c0392b;
                }

                .contact-modal-header {
                    text-align: center;
                    margin-bottom: 25px;
                }

                .contact-modal-header h3 {
                    color: #2c3e50;
                    font-size: 1.8rem;
                    margin-bottom: 8px;
                    font-weight: 600;
                }

                .contact-modal-header p {
                    color: #7f8c8d;
                    font-size: 1rem;
                }

                .contact-options-grid {
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
                    gap: 15px;
                }

                .contact-option {
                    background: #f8f9fa;
                    border-radius: 10px;
                    padding: 20px 15px;
                    text-align: center;
                    cursor: pointer;
                    transition: all 0.3s ease;
                    border: 2px solid transparent;
                }

                .contact-option:hover {
                    background: #ffffff;
                    transform: translateY(-5px);
                    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
                    border-color: #3498db;
                }

                .contact-icon {
                    width: 60px;
                    height: 60px;
                    background: linear-gradient(135deg, #3498db, #2980b9);
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin: 0 auto 15px;
                    font-size: 1.5rem;
                    color: #ffffff;
                }

                .contact-option[data-method="whatsapp"] .contact-icon {
                    background: linear-gradient(135deg, #25D366, #128C7E);
                }

                .contact-option[data-method="phone"] .contact-icon {
                    background: linear-gradient(135deg, #27ae60, #2ecc71);
                }

                .contact-option h4 {
                    color: #2c3e50;
                    font-size: 1.1rem;
                    margin-bottom: 8px;
                    font-weight: 600;
                }

                .contact-option p {
                    color: #7f8c8d;
                    font-size: 0.85rem;
                    margin: 0;
                    line-height: 1.4;
                }

                /* Professional Scrollbar */
                .modal-body::-webkit-scrollbar {
                    width: 6px;
                }

                .modal-body::-webkit-scrollbar-track {
                    background: #f1f1f1;
                }

                .modal-body::-webkit-scrollbar-thumb {
                    background: #bdc3c7;
                    border-radius: 3px;
                }

                .modal-body::-webkit-scrollbar-thumb:hover {
                    background: #95a5a6;
                }

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

                    .department-card-mega {
                        padding: 30px 20px;
                    }

                    .modal-container {
                        width: 98%;
                        height: 98%;
                        border-radius: 8px;
                    }

                    .modal-header {
                        padding: 25px 25px 20px;
                    }

                    .modal-icon {
                        width: 60px;
                        height: 60px;
                        font-size: 1.8rem;
                        margin-bottom: 15px;
                    }

                    .modal-title h2 {
                        font-size: 1.8rem;
                    }

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

                    .modal-grid {
                        padding: 20px 25px;
                        gap: 20px;
                    }

                    .modal-section {
                        padding: 20px;
                    }

                    .modal-section h3 {
                        font-size: 1.2rem;
                    }

                    .focus-grid,
                    .career-grid,
                    .details-grid,
                    .faculty-grid,
                    .projects-grid,
                    .courses-grid {
                        grid-template-columns: 1fr;
                        gap: 12px;
                    }

                    .courses-grid {
                        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                    }

                    .modal-hero-image {
                        height: 200px;
                    }

                    .modal-footer {
                        padding: 15px 25px;
                        flex-direction: column;
                        align-items: stretch;
                    }

                    .modal-close {
                        top: 15px;
                        right: 15px;
                        width: 40px;
                        height: 40px;
                        font-size: 1.2rem;
                    }

                    .partners-grid {
                        gap: 10px;
                    }

                    .partner-logo {
                        width: 100px;
                        height: 50px;
                        font-size: 0.8rem;
                    }

                    .contact-options-grid {
                        grid-template-columns: 1fr;
                    }
                }

                @media (max-width: 576px) {
                    .modal-header {
                        padding: 20px 20px 15px;
                    }

                    .modal-icon {
                        width: 50px;
                        height: 50px;
                        font-size: 1.5rem;
                    }

                    .modal-title h2 {
                        font-size: 1.5rem;
                    }

                    .modal-grid {
                        padding: 15px 20px;
                        gap: 15px;
                    }

                    .modal-section {
                        padding: 16px;
                    }

                    .modal-section h3 {
                        font-size: 1.1rem;
                    }

                    .modal-footer .btn {
                        padding: 10px 20px;
                        font-size: 0.9rem;
                    }

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

                    .course-tag {
                        text-align: left;
                        padding: 12px 16px;
                    }
                }

            /* === EVENTS SECTION === */
            .events-mega {
                background: linear-gradient(135deg, #f5e6d3 0%, #e8d5c4 50%, #d4b896 100%);
                position: relative;
                padding: 80px 0;
                overflow: hidden;
            }

            .events-mega::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: url('https://images.unsplash.com/photo-1517077304055-6e89abbf09b0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80');
                opacity: 0.02;
                background-size: cover;
                background-position: center;
            }

            .events-timeline-mega {
                position: relative;
                max-width: 1100px;
                margin: 0 auto;
                padding: 40px 0;
            }

            .events-timeline-mega::before {
                content: '';
                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 4px;
                height: 100%;
                background: linear-gradient(180deg, #8B4513, #A0522D, #CD853F, #D2691E, #8B4513);
                border-radius: 2px;
                box-shadow: 0 0 15px rgba(139, 69, 19, 0.3);
            }

            .timeline-item-mega {
                position: relative;
                margin-bottom: 60px;
                width: 45%;
                padding: 0 30px;
                opacity: 1;
                transform: translateY(0);
                transition: all 0.4s ease;
            }

            .timeline-item-mega:nth-child(odd) {
                left: 0;
                padding-right: 40px;
            }

            .timeline-item-mega:nth-child(even) {
                left: 50%;
                padding-left: 40px;
            }

            .timeline-content-mega {
                background: #ffffff;
                padding: 25px;
                border-radius: 15px;
                box-shadow: 0 8px 25px rgba(139, 69, 19, 0.15);
                position: relative;
                transition: all 0.3s ease;
                overflow: hidden;
                border: 1px solid rgba(210, 105, 30, 0.1);
                backdrop-filter: blur(5px);
                max-width: 480px;
            }

            .timeline-content-mega::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 4px;
                background: linear-gradient(90deg, #8B4513, #A0522D, #CD853F);
                background-size: 200% 100%;
                animation: gradientShift 4s ease infinite;
            }

            @keyframes gradientShift {
                0%, 100% { background-position: 0% 50%; }
                50% { background-position: 100% 50%; }
            }

            .timeline-content-mega:hover {
                transform: translateY(-8px) scale(1.01);
                box-shadow: 0 15px 35px rgba(139, 69, 19, 0.2);
            }

            .timeline-content-mega::after {
                content: '';
                position: absolute;
                top: 40px;
                width: 20px;
                height: 20px;
                background: #ffffff;
                transform: rotate(45deg);
                box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
                z-index: 1;
            }

            .timeline-item-mega:nth-child(odd) .timeline-content-mega::after {
                right: -10px;
            }

            .timeline-item-mega:nth-child(even) .timeline-content-mega::after {
                left: -10px;
            }

            .timeline-date-mega {
                display: inline-block;
                padding: 8px 18px;
                background: linear-gradient(135deg, #8B4513, #A0522D);
                color: #ffffff;
                border-radius: 25px;
                font-size: 0.9rem;
                font-weight: 600;
                margin-bottom: 15px;
                box-shadow: 0 3px 10px rgba(139, 69, 19, 0.3);
                position: relative;
                overflow: hidden;
            }

            .timeline-date-mega::before {
                content: '';
                position: absolute;
                top: -2px;
                left: -2px;
                right: -2px;
                bottom: -2px;
                background: linear-gradient(135deg, #8B4513, #A0522D, #CD853F);
                border-radius: 25px;
                z-index: -1;
                opacity: 0;
                transition: opacity 0.3s ease;
            }

            .timeline-date-mega:hover::before {
                opacity: 1;
            }

            .timeline-content-mega h3 {
                font-size: 1.4rem;
                margin-bottom: 12px;
                color: #2c3e50;
                font-weight: 700;
                line-height: 1.3;
            }

            .timeline-content-mega p {
                color: #5d6d7e;
                line-height: 1.6;
                margin-bottom: 20px;
                font-size: 1rem;
            }

            .timeline-image {
                width: 100%;
                height: 180px;
                border-radius: 12px;
                overflow: hidden;
                margin: 20px 0;
                position: relative;
                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            }

            .timeline-image::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(45deg, rgba(139, 69, 19, 0.1), rgba(205, 133, 63, 0.1));
                z-index: 1;
                opacity: 0;
                transition: opacity 0.3s ease;
            }

            .timeline-content-mega:hover .timeline-image::before {
                opacity: 0.3;
            }

            .timeline-image img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: all 0.4s ease;
            }

            .timeline-content-mega:hover .timeline-image img {
                transform: scale(1.05);
            }

            /* Event badges */
            .event-badge {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                padding: 5px 12px;
                background: rgba(139, 69, 19, 0.1);
                color: #8B4513;
                border-radius: 15px;
                font-size: 0.8rem;
                font-weight: 600;
                margin-right: 8px;
                margin-bottom: 10px;
                border: 1px solid rgba(139, 69, 19, 0.2);
            }

            .event-badge i {
                font-size: 0.7rem;
            }

            /* Responsive Design */
            @media (max-width: 968px) {
                .events-timeline-mega::before {
                    left: 30px;
                }

                .timeline-item-mega {
                    width: 100%;
                    left: 0 !important;
                    padding: 0 0 0 80px !important;
                    margin-bottom: 50px;
                }

                .timeline-content-mega {
                    max-width: none;
                    padding: 20px;
                }

                .timeline-content-mega::after {
                    left: -10px !important;
                    right: auto !important;
                }
            }

            @media (max-width: 768px) {
                .events-mega {
                    padding: 60px 0;
                }

                .timeline-item-mega {
                    padding: 0 0 0 60px !important;
                }

                .timeline-content-mega h3 {
                    font-size: 1.3rem;
                }

                .timeline-image {
                    height: 160px;
                }
            }

            @media (max-width: 480px) {
                .events-mega {
                    padding: 50px 0;
                }

                .timeline-item-mega {
                    padding: 0 0 0 50px !important;
                    margin-bottom: 40px;
                }

                .timeline-content-mega {
                    padding: 18px;
                }

                .timeline-content-mega h3 {
                    font-size: 1.2rem;
                }

                .timeline-image {
                    height: 140px;
                }

                .timeline-date-mega {
                    font-size: 0.85rem;
                    padding: 6px 15px;
                }
            }
            /* Event Details */
            .event-details {
                display: flex;
                flex-direction: column;
                gap: 12px;
                margin: 20px 0;
                padding: 20px;
                background: #f8f9fa;
                border-radius: 12px;
                border-left: 4px solid #3498db;
            }

            .event-detail-item {
                display: flex;
                align-items: center;
                gap: 12px;
                color: #5d6d7e;
                font-size: 1rem;
            }

            .event-detail-item i {
                color: #3498db;
                width: 20px;
                text-align: center;
            }

            /* Register Button */
            .register-btn {
                width: 100%;
                padding: 15px 30px;
                font-size: 1.1rem;
                font-weight: 600;
                border-radius: 12px;
                background: linear-gradient(135deg, #27ae60, #2ecc71);
                color: #ffffff;
                border: none;
                cursor: pointer;
                transition: all 0.3s ease;
                box-shadow: 0 5px 15px rgba(39, 174, 96, 0.3);
                position: relative;
                overflow: hidden;
            }

            .register-btn::before {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
                transition: left 0.5s ease;
            }

            .register-btn:hover::before {
                left: 100%;
            }

            .register-btn:hover {
                transform: translateY(-3px);
                box-shadow: 0 8px 25px rgba(39, 174, 96, 0.4);
            }

            .register-btn:active {
                transform: translateY(-1px);
            }

            /* === EVENT REGISTRATION MODAL === */
            .event-registration-modal {
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: 0;
                visibility: hidden;
                transition: all 0.3s ease;
                z-index: 10020;
                pointer-events: none;
            }

            .event-registration-modal.active {
                opacity: 1;
                visibility: visible;
                pointer-events: all;
            }

            .event-registration-modal .modal-backdrop {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.8);
                backdrop-filter: blur(5px);
                cursor: pointer;
            }

            .event-registration-modal .modal-container {
                position: relative;
                width: 95%;
                height: 95%;
                max-width: 900px;
                background: #ffffff;
                border-radius: 20px;
                box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
                overflow: hidden;
                transform: scale(0.9);
                transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            }

            .event-registration-modal.active .modal-container {
                transform: scale(1);
            }

            .event-registration-modal .modal-content {
                height: 100%;
                display: flex;
                flex-direction: column;
                background: #ffffff;
            }

            .event-registration-modal .modal-close {
                position: absolute;
                top: 20px;
                right: 20px;
                width: 45px;
                height: 45px;
                background: #e74c3c;
                border: none;
                border-radius: 50%;
                color: #ffffff;
                font-size: 1.4rem;
                cursor: pointer;
                transition: all 0.3s ease;
                z-index: 10021;
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
            }

            .event-registration-modal .modal-close:hover {
                transform: rotate(90deg) scale(1.1);
                background: #c0392b;
            }

            .event-registration-modal .modal-header {
                background: linear-gradient(135deg, #3498db, #2980b9);
                color: #ffffff;
                padding: 30px 40px 20px;
                position: relative;
                overflow: hidden;
            }

            .event-registration-modal .modal-header::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 3px;
                background: linear-gradient(90deg, #3498db, #2980b9, #1abc9c);
            }

            .event-registration-modal .modal-icon {
                width: 60px;
                height: 60px;
                background: rgba(255, 255, 255, 0.2);
                border-radius: 15px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.8rem;
                margin-bottom: 15px;
                border: 2px solid rgba(255, 255, 255, 0.3);
            }

            .event-registration-modal .modal-title h2 {
                color: #ffffff;
                font-size: 2rem;
                margin-bottom: 5px;
                font-weight: 600;
            }

            .event-registration-modal .modal-subtitle {
                color: rgba(255, 255, 255, 0.9);
                font-size: 1.1rem;
            }

            .event-registration-modal .modal-body {
                flex: 1;
                overflow-y: auto;
                padding: 0;
                background: #f8f9fa;
            }

            /* Registration Form */
            .registration-form {
                padding: 30px 40px;
            }

            .form-header {
                margin-bottom: 30px;
            }

            .event-preview {
                display: flex;
                align-items: center;
                gap: 20px;
                padding: 20px;
                background: #ffffff;
                border-radius: 15px;
                box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
                border-left: 4px solid #3498db;
            }

            .event-preview img {
                width: 80px;
                height: 80px;
                border-radius: 12px;
                object-fit: cover;
            }

            .event-preview-info h4 {
                color: #2c3e50;
                font-size: 1.3rem;
                margin-bottom: 5px;
                font-weight: 600;
            }

            .event-preview-info p {
                color: #7f8c8d;
                margin: 2px 0;
                font-size: 0.95rem;
            }

            .form-section {
                background: #ffffff;
                padding: 25px;
                border-radius: 15px;
                margin-bottom: 25px;
                box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
                border: 1px solid #e9ecef;
            }

            .form-section h3 {
                color: #2c3e50;
                font-size: 1.3rem;
                margin-bottom: 20px;
                padding-bottom: 10px;
                border-bottom: 2px solid #f8f9fa;
                font-weight: 600;
            }

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

            .form-group {
                position: relative;
                margin-bottom: 20px;
            }

            .form-group label {
                display: block;
                margin-bottom: 8px;
                color: #2c3e50;
                font-weight: 500;
                font-size: 0.95rem;
            }

            .form-group input,
            .form-group select,
            .form-group textarea {
                width: 100%;
                padding: 12px 45px 12px 15px;
                border: 2px solid #e9ecef;
                border-radius: 10px;
                font-size: 1rem;
                transition: all 0.3s ease;
                background: #ffffff;
            }


            .form-group input:focus,
            .form-group select:focus,
            .form-group textarea:focus {
                outline: none;
                border-color: #3498db;
                box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
            }

            .form-group i {
                position: absolute;
                right: 25px;
                top: 57%;
                transform: translateY(-50%);
                color: #95a5a6;
                font-size: 1.1rem;
            }

            .form-group.full-width {
                grid-column: 1 / -1;
            }

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

            .checkbox-group {
                display: flex;
                align-items: flex-start;
                gap: 12px;
            }

            .checkbox-group input[type="checkbox"] {
                width: 18px;
                height: 18px;
                margin-top: 3px;
                accent-color: #3498db;
            }

            .checkbox-group label {
                margin: 0;
                font-size: 0.9rem;
                line-height: 1.5;
                color: #5d6d7e;
            }

            .checkbox-group a {
                color: #3498db;
                text-decoration: none;
            }

            .checkbox-group a:hover {
                text-decoration: underline;
            }

            .event-registration-modal .modal-footer {
                padding: 20px 40px;
                background: #ffffff;
                display: flex;
                gap: 15px;
                justify-content: flex-end;
                border-top: 1px solid #e9ecef;
                box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.05);
            }

            /* Responsive Design */
            @media (max-width: 768px) {
                .events-timeline-mega::before {
                    left: 30px;
                }

                .timeline-item-mega {
                    width: 100%;
                    left: 0 !important;
                    padding: 0 0 0 80px !important;
                    margin-bottom: 60px;
                }

                .timeline-content-mega::after {
                    left: -15px !important;
                    right: auto !important;
                }

                .timeline-content-mega {
                    padding: 30px 25px;
                }

                .event-registration-modal .modal-container {
                    width: 98%;
                    height: 98%;
                    border-radius: 15px;
                }

                .registration-form {
                    padding: 20px 25px;
                }

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

                .event-preview {
                    flex-direction: column;
                    text-align: center;
                }

                .event-registration-modal .modal-footer {
                    flex-direction: column-reverse;
                }
            }

            @media (max-width: 576px) {
                .timeline-item-mega {
                    padding: 0 0 0 60px !important;
                }

                .timeline-content-mega {
                    padding: 25px 20px;
                }

                .timeline-content-mega h3 {
                    font-size: 1.5rem;
                }

                .registration-form {
                    padding: 15px 20px;
                }

                .form-section {
                    padding: 20px;
                }
            }

            /* === GALLERY SECTION === */
            .gallery-mega {
                background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
                position: relative;
                padding: 100px 0;
                overflow: hidden;
            }

            .gallery-mega::before {
                content: '';
                position: absolute;
                top: -100px;
                right: -100px;
                width: 400px;
                height: 400px;
                background: linear-gradient(135deg, #8B4513, #A0522D, #D2691E);
                border-radius: 50%;
                opacity: 0.05;
                animation: float 6s ease-in-out infinite;
            }

            .gallery-mega::after {
                content: '';
                position: absolute;
                bottom: -150px;
                left: -150px;
                width: 500px;
                height: 500px;
                background: linear-gradient(135deg, #D2691E, #CD853F, #F4A460);
                border-radius: 50%;
                opacity: 0.03;
                animation: float 8s ease-in-out infinite reverse;
            }

            @keyframes float {
                0%, 100% { transform: translateY(0px) rotate(0deg); }
                50% { transform: translateY(-20px) rotate(180deg); }
            }

            /* Gallery Filters */
            .gallery-filters {
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                gap: 15px;
                margin-bottom: 50px;
            }

            .filter-btn {
                padding: 12px 25px;
                background: #ffffff;
                border: 2px solid #8B4513;
                color: #8B4513;
                border-radius: 50px;
                font-weight: 600;
                cursor: pointer;
                transition: all 0.3s ease;
                box-shadow: 0 4px 15px rgba(139, 69, 19, 0.1);
            }

            .filter-btn:hover {
                background: #8B4513;
                color: #ffffff;
                transform: translateY(-2px);
                box-shadow: 0 6px 20px rgba(139, 69, 19, 0.2);
            }

            .filter-btn.active {
                background: linear-gradient(135deg, #8B4513, #A0522D);
                color: #ffffff;
                border-color: transparent;
                box-shadow: 0 6px 20px rgba(139, 69, 19, 0.3);
            }

            /* Gallery Grid */
            .gallery-grid-mega {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
                gap: 30px;
                margin-bottom: 50px;
            }

            .gallery-item-mega {
                position: relative;
                border-radius: 20px;
                overflow: hidden;
                height: 280px;
                box-shadow: 0 10px 30px rgba(139, 69, 19, 0.1);
                transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                cursor: pointer;
                opacity: 0;
                transform: translateY(30px);
                animation: fadeInUp 0.6s ease forwards;
            }

            .gallery-item-mega.visible {
                opacity: 1;
                transform: translateY(0);
            }

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

            .gallery-item-mega:hover {
                transform: translateY(-15px) scale(1.03);
                box-shadow: 0 20px 50px rgba(139, 69, 19, 0.2);
            }

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

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

            /* Gallery Overlay */
            .gallery-overlay-mega {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(135deg, rgba(139, 69, 19, 0.9), rgba(160, 82, 45, 0.8));
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                opacity: 0;
                transition: all 0.4s ease;
                padding: 30px;
                text-align: center;
                color: #ffffff;
                backdrop-filter: blur(5px);
            }

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

            .gallery-overlay-mega i {
                font-size: 3rem;
                margin-bottom: 20px;
                color: #F4A460;
                text-shadow: 0 4px 15px rgba(244, 164, 96, 0.3);
                transition: all 0.3s ease;
            }

            .gallery-item-mega:hover .gallery-overlay-mega i {
                transform: scale(1.2) rotate(5deg);
            }

            .gallery-overlay-mega h3 {
                font-size: 1.4rem;
                margin-bottom: 12px;
                font-weight: 700;
                line-height: 1.3;
            }

            .gallery-overlay-mega p {
                font-size: 1rem;
                margin-bottom: 15px;
                opacity: 0.9;
                line-height: 1.5;
            }

            .photo-date {
                font-size: 0.85rem;
                opacity: 0.8;
                padding: 5px 15px;
                background: rgba(244, 164, 96, 0.2);
                border-radius: 20px;
                border: 1px solid rgba(244, 164, 96, 0.3);
            }

            /* Load More Section */
            .gallery-load-more {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: 40px 0 20px;
                width: 100%;
            }

            #loadMoreBtn {
                padding: 15px 40px;
                font-size: 1.1rem;
                font-weight: 600;
                border-radius: 50px;
                background: linear-gradient(135deg, #8B4513, #A0522D);
                color: #ffffff;
                border: none;
                cursor: pointer;
                transition: all 0.3s ease;
                box-shadow: 0 6px 20px rgba(139, 69, 19, 0.3);
                position: relative;
                overflow: hidden;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                min-width: 200px;
                text-decoration: none;
                user-select: none;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                margin: 0 auto;
            }

            #loadMoreBtn::before {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
                transition: left 0.5s ease;
            }

            #loadMoreBtn:hover::before {
                left: 100%;
            }

            #loadMoreBtn:hover {
                transform: translateY(-3px);
                box-shadow: 0 10px 30px rgba(139, 69, 19, 0.4);
                background: linear-gradient(135deg, #A0522D, #8B4513);
            }

            #loadMoreBtn:active {
                transform: translateY(-1px);
            }

            #loadMoreBtn.loading {
                pointer-events: none;
                opacity: 0.7;
            }

            #loadMoreBtn.loading i {
                animation: spin 1s linear infinite;
            }

            .photos-count {
                margin-top: 15px;
                color: #8B4513;
                font-weight: 500;
                font-size: 0.95rem;
                text-align: center;
                width: 100%;
            }

            .photos-count span {
                font-weight: 700;
                color: #A0522D;
            }

            @keyframes spin {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }
            .photos-count {
                margin-top: 15px;
                color: #8B4513;
                font-weight: 500;
                font-size: 0.95rem;
            }

            .photos-count span {
                font-weight: 700;
                color: #A0522D;
            }

            /* Photo Modal */
            .photo-modal {
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: 0;
                visibility: hidden;
                transition: all 0.3s ease;
                z-index: 10030;
                pointer-events: none;
            }

            .photo-modal.active {
                opacity: 1;
                visibility: visible;
                pointer-events: all;
            }

            .photo-modal .modal-backdrop {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(139, 69, 19, 0.95);
                backdrop-filter: blur(10px);
                cursor: pointer;
            }

            .photo-modal .modal-container {
                position: relative;
                width: 95%;
                height: 95%;
                max-width: 1200px;
                background: #ffffff;
                border-radius: 20px;
                box-shadow: 0 30px 80px rgba(139, 69, 19, 0.3);
                overflow: hidden;
                transform: scale(0.9);
                transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            }

            .photo-modal.active .modal-container {
                transform: scale(1);
            }

            .photo-modal .modal-content {
                height: 100%;
                display: flex;
                flex-direction: column;
                position: relative;
            }

            .photo-modal .modal-close {
                position: absolute;
                top: 20px;
                right: 20px;
                width: 50px;
                height: 50px;
                background: #8B4513;
                border: none;
                border-radius: 50%;
                color: #ffffff;
                font-size: 1.5rem;
                cursor: pointer;
                transition: all 0.3s ease;
                z-index: 10031;
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: 0 4px 15px rgba(139, 69, 19, 0.3);
            }

            .photo-modal .modal-close:hover {
                transform: rotate(90deg) scale(1.1);
                background: #A0522D;
            }

            .modal-image-container {
                flex: 1;
                display: flex;
                overflow: hidden;
            }

            .modal-image-container img {
                width: 70%;
                height: 100%;
                object-fit: cover;
            }

            .image-info {
                width: 30%;
                padding: 40px;
                background: #f8f9fa;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }

            .image-info h3 {
                font-size: 1.8rem;
                color: #8B4513;
                margin-bottom: 15px;
                font-weight: 700;
            }

            .image-info p {
                color: #5d6d7e;
                line-height: 1.6;
                margin-bottom: 20px;
                font-size: 1.1rem;
            }

            .image-meta {
                display: flex;
                flex-direction: column;
                gap: 10px;
            }

            .image-meta span {
                padding: 8px 15px;
                background: #8B4513;
                color: #ffffff;
                border-radius: 20px;
                font-size: 0.9rem;
                font-weight: 500;
                display: inline-block;
                width: fit-content;
            }

            .modal-navigation {
                position: absolute;
                bottom: 30px;
                left: 50%;
                transform: translateX(-50%);
                display: flex;
                gap: 15px;
            }

            .nav-btn {
                width: 60px;
                height: 60px;
                background: #8B4513;
                border: none;
                border-radius: 50%;
                color: #ffffff;
                font-size: 1.2rem;
                cursor: pointer;
                transition: all 0.3s ease;
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: 0 4px 15px rgba(139, 69, 19, 0.3);
            }

            .nav-btn:hover {
                background: #A0522D;
                transform: scale(1.1);
            }

            .nav-btn:disabled {
                opacity: 0.5;
                cursor: not-allowed;
                transform: none;
            }

            /* Responsive Design */
            @media (max-width: 1024px) {
                .gallery-grid-mega {
                    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
                    gap: 25px;
                }

                .modal-image-container {
                    flex-direction: column;
                }

                .modal-image-container img {
                    width: 100%;
                    height: 60%;
                }

                .image-info {
                    width: 100%;
                    height: 40%;
                    padding: 25px;
                }
            }

            @media (max-width: 768px) {
                .gallery-grid-mega {
                    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
                    gap: 20px;
                }

                .gallery-item-mega {
                    height: 250px;
                }

                .gallery-filters {
                    gap: 10px;
                }

                .filter-btn {
                    padding: 10px 20px;
                    font-size: 0.9rem;
                }

                .photo-modal .modal-container {
                    width: 98%;
                    height: 98%;
                    border-radius: 15px;
                }

                .image-info h3 {
                    font-size: 1.5rem;
                }

                .modal-navigation {
                    bottom: 20px;
                }

                .nav-btn {
                    width: 50px;
                    height: 50px;
                }
            }

            @media (max-width: 576px) {
                .gallery-grid-mega {
                    grid-template-columns: 1fr;
                    gap: 15px;
                }

                .gallery-item-mega {
                    height: 220px;
                }

                .gallery-filters {
                    flex-direction: column;
                    align-items: center;
                }

                .filter-btn {
                    width: 200px;
                }

                .gallery-overlay-mega {
                    padding: 20px;
                }

                .gallery-overlay-mega h3 {
                    font-size: 1.2rem;
                }

                .gallery-overlay-mega p {
                    font-size: 0.9rem;
                }

                .image-info {
                    padding: 20px;
                }

                .image-info h3 {
                    font-size: 1.3rem;
                }
            }

                    /* === TEAM SECTION === */
        .team-mega {
            background: linear-gradient(135deg, #d7ccc8 0%, #bcaaa4 100%);
            position: relative;
            padding: 100px 0;
            overflow: hidden;
        }

        .team-mega::before {
            content: '';
            position: absolute;
            top: -100px;
            left: -100px;
            width: 400px;
            height: 400px;
            background: linear-gradient(135deg, #8B4513, #A0522D, #D2691E);
            border-radius: 50%;
            opacity: 0.08;
            animation: float 6s ease-in-out infinite;
        }

        .team-mega::after {
            content: '';
            position: absolute;
            bottom: -150px;
            right: -150px;
            width: 500px;
            height: 500px;
            background: linear-gradient(135deg, #D2691E, #CD853F, #F4A460);
            border-radius: 50%;
            opacity: 0.06;
            animation: float 8s ease-in-out infinite reverse;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(180deg); }
        }

        .team-grid-mega {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            position: relative;
            z-index: 1;
        }

        .team-member-mega {
            background: #ffffff;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(139, 69, 19, 0.15);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            text-align: center;
            position: relative;
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 0.6s ease forwards;
            border: 1px solid rgba(139, 69, 19, 0.1);
        }

        .team-member-mega:nth-child(1) { animation-delay: 0.1s; }
        .team-member-mega:nth-child(2) { animation-delay: 0.2s; }
        .team-member-mega:nth-child(3) { animation-delay: 0.3s; }
        .team-member-mega:nth-child(4) { animation-delay: 0.4s; }
        .team-member-mega:nth-child(5) { animation-delay: 0.5s; }
        .team-member-mega:nth-child(6) { animation-delay: 0.6s; }
        .team-member-mega:nth-child(7) { animation-delay: 0.7s; }
        .team-member-mega:nth-child(8) { animation-delay: 0.8s; }
        .team-member-mega:nth-child(9) { animation-delay: 0.9s; }

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

        .team-member-mega:hover {
            transform: translateY(-15px) scale(1.02);
            box-shadow: 0 25px 60px rgba(139, 69, 19, 0.25);
            border-color: rgba(139, 69, 19, 0.2);
        }

        .member-image-mega {
            height: 320px;
            overflow: hidden;
            position: relative;
            background: linear-gradient(135deg, #8B4513, #A0522D);
        }

        .member-image-mega img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all 0.5s ease;
            filter: brightness(0.95);
        }

        .team-member-mega:hover .member-image-mega img {
            transform: scale(1.15);
            filter: brightness(1);
        }

        .member-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(139, 69, 19, 0.85), rgba(160, 82, 45, 0.75));
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: all 0.4s ease;
            backdrop-filter: blur(2px);
        }

        .team-member-mega:hover .member-overlay {
            opacity: 1;
        }

        .member-info-mega {
            padding: 30px 25px;
            background: #ffffff;
            position: relative;
        }

        .member-info-mega::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background: linear-gradient(135deg, #8B4513, #A0522D);
            border-radius: 2px;
        }

        .member-info-mega h3 {
            font-size: 1.4rem;
            margin-bottom: 8px;
            color: #5D4037;
            font-weight: 700;
        }

        .member-role {
            color: #8B4513;
            font-weight: 600;
            margin-bottom: 8px;
            font-size: 1rem;
            position: relative;
            display: inline-block;
        }

        .member-role::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%);
            width: 30px;
            height: 2px;
            background: linear-gradient(135deg, #8B4513, #A0522D);
            border-radius: 2px;
        }

        .member-details {
            color: #795548;
            font-size: 0.9rem;
            line-height: 1.5;
            margin-bottom: 0;
            opacity: 0.8;
        }

        .member-social-mega {
            display: flex;
            justify-content: center;
            gap: 12px;
        }

        .member-social-mega a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 45px;
            height: 45px;
            background: rgba(139, 69, 19, 0.8);
            color: #ffffff;
            border-radius: 50%;
            transition: all 0.3s ease;
            border: 2px solid rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(10px);
        }

        .member-social-mega a:hover {
            background: #5D4037;
            color: #ffffff;
            transform: translateY(-5px) scale(1.1);
            border-color: #5D4037;
            box-shadow: 0 8px 20px rgba(93, 64, 55, 0.4);
        }

        /* Responsive Design */
        @media (max-width: 1200px) {
            .team-grid-mega {
                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                gap: 25px;
            }
        }

        @media (max-width: 768px) {
            .team-grid-mega {
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                gap: 20px;
            }

            .member-image-mega {
                height: 280px;
            }

            .member-info-mega {
                padding: 25px 20px;
            }

            .member-info-mega h3 {
                font-size: 1.3rem;
            }
        }

        @media (max-width: 576px) {
            .team-grid-mega {
                grid-template-columns: 1fr;
                gap: 15px;
            }

            .member-image-mega {
                height: 250px;
            }

            .member-info-mega {
                padding: 20px 15px;
            }

            .member-info-mega h3 {
                font-size: 1.2rem;
            }

            .member-social-mega a {
                width: 40px;
                height: 40px;
            }
        }

/* === COURSES SECTION === */
        .courses-mega {
            background-color: var(--white);
            position: relative;
            overflow: hidden;
            padding: 100px 0;
        }

        .courses-mega::before {
            content: '';
            position: absolute;
            top: -150px;
            left: -150px;
            width: 400px;
            height: 400px;
            background: var(--gradient);
            border-radius: 50%;
            opacity: 0.1;
        }

        .courses-mega::after {
            content: '';
            position: absolute;
            bottom: -150px;
            right: -150px;
            width: 500px;
            height: 500px;
            background: var(--gradient);
            border-radius: 50%;
            opacity: 0.05;
        }

        .courses-tabs-mega {
            display: flex;
            justify-content: center;
            margin-bottom: 50px;
            flex-wrap: wrap;
            gap: 15px;
        }

        .tab-btn-mega {
            padding: 15px 30px;
            background: var(--cream);
            border: 2px solid transparent;
            border-radius: 50px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            box-shadow: var(--shadow);
            color: var(--primary-dark);
            position: relative;
            overflow: hidden;
        }

        .tab-btn-mega::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(139, 69, 19, 0.1), transparent);
            transition: left 0.6s ease;
        }

        .tab-btn-mega:hover::before {
            left: 100%;
        }

        .tab-btn-mega.active {
            background: var(--gradient);
            color: var(--white);
            border-color: transparent;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(139, 69, 19, 0.3);
        }

        .tab-btn-mega:hover:not(.active) {
            background: var(--accent-light);
            transform: translateY(-3px);
            border-color: var(--primary-medium);
        }

        /* Tab Content */
        .courses-grid-mega {
            display: none;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 40px;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.5s ease;
        }

        .courses-grid-mega.active {
            display: grid;
            opacity: 1;
            transform: translateY(0);
        }

        .course-card-mega {
            background: var(--cream);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
            opacity: 0;
            transform: translateY(30px);
        }

        .courses-grid-mega.active .course-card-mega {
            opacity: 1;
            transform: translateY(0);
        }

        .course-card-mega:hover {
            transform: translateY(-15px) scale(1.02);
            box-shadow: var(--shadow-heavy);
        }

        .course-image-mega {
            height: 220px;
            overflow: hidden;
            position: relative;
        }

        .course-image-mega img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all 0.5s ease;
        }

        .course-card-mega:hover .course-image-mega img {
            transform: scale(1.1);
        }

        .course-badge {
            position: absolute;
            top: 20px;
            right: 20px;
            padding: 8px 15px;
            background: var(--gradient-gold);
            color: var(--white);
            border-radius: 50px;
            font-size: 0.8rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            box-shadow: var(--shadow);
            z-index: 2;
        }

        .course-info-mega {
            padding: 25px;
        }

        .course-info-mega h3 {
            font-size: 1.5rem;
            margin-bottom: 15px;
            color: var(--primary-dark);
            line-height: 1.3;
        }

        .course-info-mega p {
            margin-bottom: 20px;
            color: var(--text-light);
            line-height: 1.6;
        }

        /* Course Features */
        .course-features {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 20px;
        }

        .feature-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            background: rgba(139, 69, 19, 0.1);
            border-radius: 20px;
            font-size: 0.85rem;
            color: var(--primary-dark);
            transition: all 0.3s ease;
        }

        .feature-item:hover {
            background: rgba(139, 69, 19, 0.2);
            transform: translateY(-2px);
        }

        .feature-item i {
            color: var(--primary-medium);
            font-size: 0.9rem;
        }

        .course-meta-mega {
            display: flex;
            justify-content: space-between;
            color: var(--primary-light);
            font-size: 0.9rem;
            font-weight: 600;
            flex-wrap: wrap;
            gap: 10px;
        }

        .course-meta-mega span {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .course-meta-mega i {
            font-size: 0.8rem;
        }

        /* Animation delays for staggered effect */
        .courses-grid-mega .course-card-mega:nth-child(1) { transition-delay: 0.1s; }
        .courses-grid-mega .course-card-mega:nth-child(2) { transition-delay: 0.2s; }
        .courses-grid-mega .course-card-mega:nth-child(3) { transition-delay: 0.3s; }
        .courses-grid-mega .course-card-mega:nth-child(4) { transition-delay: 0.4s; }

        /* Responsive Design */
        @media (max-width: 1200px) {
            .courses-grid-mega {
                grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
                gap: 30px;
            }
        }

        @media (max-width: 768px) {
            .courses-tabs-mega {
                flex-direction: column;
                align-items: center;
            }

            .tab-btn-mega {
                width: 250px;
                text-align: center;
            }

            .courses-grid-mega {
                grid-template-columns: 1fr;
                gap: 25px;
            }

            .course-features {
                justify-content: center;
            }

            .course-meta-mega {
                justify-content: center;
                text-align: center;
            }
        }

        @media (max-width: 576px) {
            .course-info-mega {
                padding: 20px;
            }

            .course-info-mega h3 {
                font-size: 1.3rem;
            }

            .feature-item {
                font-size: 0.8rem;
                padding: 6px 10px;
            }
        }

                 /* === ACADEMIC SECTION === */
            .academic-mega {
                background: linear-gradient(135deg, #5D4037 0%, #795548 100%);
                color: #ffffff;
                position: relative;
                overflow: hidden;
                padding: 60px 0;
            }

            .academic-mega::before {
                content: '';
                position: absolute;
                top: -100px;
                left: -100px;
                width: 400px;
                height: 400px;
                background: rgba(255, 255, 255, 0.05);
                border-radius: 50%;
                animation: float 6s ease-in-out infinite;
            }

            .academic-mega::after {
                content: '';
                position: absolute;
                bottom: -150px;
                right: -150px;
                width: 500px;
                height: 500px;
                background: rgba(255, 255, 255, 0.03);
                border-radius: 50%;
                animation: float 8s ease-in-out infinite reverse;
            }

            @keyframes float {
                0%, 100% { transform: translateY(0px) rotate(0deg); }
                50% { transform: translateY(-20px) rotate(180deg); }
            }

            .academic-mega .section-title h2 {
                color: #ffffff;
                text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
                font-size: 1.8rem;
            }

            .academic-mega .section-title p {
                color: rgba(255, 255, 255, 0.9);
                font-size: 1rem;
            }

            /* Resources Controls */
            .resources-controls-mega {
                display: flex;
                gap: 15px;
                margin-bottom: 30px;
                flex-wrap: wrap;
                align-items: center;
                justify-content: space-between;
                background: rgba(255, 255, 255, 0.1);
                padding: 20px;
                border-radius: 15px;
                backdrop-filter: blur(10px);
                border: 1px solid rgba(255, 255, 255, 0.2);
            }

            .search-bar-mega {
                display: flex;
                align-items: center;
                background: rgba(255, 255, 255, 0.9);
                border-radius: 50px;
                padding: 0 15px;
                flex: 1;
                min-width: 250px;
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            }

            .search-bar-mega i {
                color: #8B4513;
                margin-right: 8px;
                font-size: 0.9rem;
            }

            .search-bar-mega input {
                flex: 1;
                border: none;
                background: transparent;
                padding: 12px 0;
                font-size: 0.9rem;
                color: #5D4037;
                outline: none;
            }

            .search-bar-mega input::placeholder {
                color: #A1887F;
                font-size: 0.85rem;
            }

            .search-btn-mega {
                background: linear-gradient(135deg, #8B4513, #A0522D);
                border: none;
                color: white;
                padding: 10px 16px;
                border-radius: 50px;
                cursor: pointer;
                transition: all 0.3s ease;
                font-size: 0.85rem;
            }

            .search-btn-mega:hover {
                transform: scale(1.05);
                box-shadow: 0 5px 15px rgba(139, 69, 19, 0.4);
            }

            .filter-controls-mega {
                display: flex;
                gap: 10px;
                flex-wrap: wrap;
                justify-content: center;
            }

            .filter-controls-mega select {
                padding: 10px 12px;
                border: 2px solid rgba(255, 255, 255, 0.3);
                border-radius: 10px;
                background: rgba(255, 255, 255, 0.9);
                color: #5D4037;
                font-weight: 500;
                cursor: pointer;
                transition: all 0.3s ease;
                min-width: 140px;
                font-size: 0.85rem;
            }

            .filter-controls-mega select:focus {
                outline: none;
                border-color: #8B4513;
                box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.2);
            }

            .upload-btn-mega {
                background: linear-gradient(135deg, #D2691E, #F4A460);
                color: white;
                border: none;
                padding: 12px 20px;
                border-radius: 50px;
                font-weight: 600;
                cursor: pointer;
                transition: all 0.3s ease;
                display: flex;
                align-items: center;
                gap: 8px;
                box-shadow: 0 4px 15px rgba(210, 105, 30, 0.3);
                font-size: 0.9rem;
            }

            .upload-btn-mega:hover {
                transform: translateY(-3px);
                box-shadow: 0 8px 25px rgba(210, 105, 30, 0.4);
            }

            /* Resources Stats */
            .resources-stats-mega {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
                gap: 15px;
                margin-bottom: 40px;
            }

            .stat-item-mega {
                display: flex;
                align-items: center;
                gap: 12px;
                background: rgba(255, 255, 255, 0.1);
                padding: 20px;
                border-radius: 15px;
                backdrop-filter: blur(10px);
                border: 1px solid rgba(255, 255, 255, 0.2);
                transition: all 0.3s ease;
            }

            .stat-item-mega:hover {
                background: rgba(255, 255, 255, 0.15);
                transform: translateY(-5px);
            }

            .stat-item-mega i {
                font-size: 2rem;
                color: #F4A460;
            }

            .stat-info {
                display: flex;
                flex-direction: column;
            }

            .stat-number {
                font-size: 1.6rem;
                font-weight: 700;
                color: #ffffff;
            }

            .stat-label {
                font-size: 0.8rem;
                color: rgba(255, 255, 255, 0.8);
            }

            /* Resources Grid */
            .resources-grid-mega {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
                gap: 20px;
                margin-bottom: 40px;
            }

            .resource-card-mega {
                background: rgba(255, 255, 255, 0.1);
                backdrop-filter: blur(10px);
                border-radius: 20px;
                padding: 25px;
                transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
                border: 1px solid rgba(255, 255, 255, 0.2);
                position: relative;
                overflow: hidden;
            }

            .resource-card-mega::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 5px;
                background: linear-gradient(135deg, #F4A460, #D2691E);
            }

            .resource-card-mega:hover {
                transform: translateY(-8px);
                background: rgba(255, 255, 255, 0.15);
                box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
            }

            .resource-header-mega {
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
                margin-bottom: 12px;
            }

            .resource-icon-mega {
                font-size: 2.2rem;
                color: #F4A460;
                margin-bottom: 12px;
            }

            .resource-badge-mega {
                background: linear-gradient(135deg, #D2691E, #F4A460);
                color: white;
                padding: 4px 10px;
                border-radius: 20px;
                font-size: 0.75rem;
                font-weight: 600;
                text-transform: uppercase;
            }

            .resource-card-mega h3 {
                font-size: 1.2rem;
                margin-bottom: 8px;
                color: #ffffff;
                line-height: 1.3;
            }

            .resource-meta-mega {
                display: flex;
                gap: 12px;
                margin-bottom: 12px;
                flex-wrap: wrap;
            }

            .resource-meta-mega span {
                display: flex;
                align-items: center;
                gap: 4px;
                font-size: 0.8rem;
                color: rgba(255, 255, 255, 0.8);
            }

            .resource-card-mega p {
                margin-bottom: 18px;
                color: rgba(255, 255, 255, 0.9);
                line-height: 1.5;
                font-size: 0.9rem;
            }

            .resource-actions-mega {
                display: flex;
                gap: 8px;
            }

            .btn-download-mega {
                background: linear-gradient(135deg, #8B4513, #A0522D);
                color: white;
                border: none;
                padding: 8px 16px;
                border-radius: 25px;
                font-weight: 600;
                cursor: pointer;
                transition: all 0.3s ease;
                display: flex;
                align-items: center;
                gap: 6px;
                flex: 1;
                justify-content: center;
                font-size: 0.85rem;
            }

            .btn-download-mega:hover {
                transform: translateY(-2px);
                box-shadow: 0 5px 15px rgba(139, 69, 19, 0.4);
            }

            .btn-preview-mega {
                background: rgba(255, 255, 255, 0.2);
                color: white;
                border: 1px solid rgba(255, 255, 255, 0.3);
                padding: 8px 12px;
                border-radius: 25px;
                font-weight: 600;
                cursor: pointer;
                transition: all 0.3s ease;
                display: flex;
                align-items: center;
                gap: 6px;
                font-size: 0.85rem;
            }

            .btn-preview-mega:hover {
                background: rgba(255, 255, 255, 0.3);
                transform: translateY(-2px);
            }

            /* Load More */
            .load-more-mega {
                text-align: center;
            }

            /* Upload Modal */
            .upload-modal-mega {
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: 0;
                visibility: hidden;
                transition: all 0.3s ease;
                z-index: 1000;
                pointer-events: none;
            }

            .upload-modal-mega.active {
                opacity: 1;
                visibility: visible;
                pointer-events: all;
            }

            .modal-backdrop-mega {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(139, 69, 19, 0.9);
                backdrop-filter: blur(8px);
                cursor: pointer;
            }

            .modal-container-mega {
                position: relative;
                width: 92%;
                max-width: 500px;
                max-height: 85vh;
                background: #ffffff;
                border-radius: 20px;
                box-shadow: 0 30px 80px rgba(139, 69, 19, 0.4);
                overflow: hidden;
                transform: scale(0.9);
                transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                border: 2px solid #8B4513;
            }

            .upload-modal-mega.active .modal-container-mega {
                transform: scale(1);
            }

            .modal-header-mega {
                background: linear-gradient(135deg, #8B4513, #A0522D);
                color: white;
                padding: 20px 25px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-bottom: 2px solid #D2691E;
            }

            .modal-header-mega h3 {
                margin: 0;
                font-size: 1.3rem;
                font-weight: 700;
                text-shadow: 0 1px 2px rgba(0,0,0,0.3);
            }

            .modal-close-mega {
                background: none;
                border: none;
                color: white;
                font-size: 1.8rem;
                cursor: pointer;
                transition: all 0.3s ease;
                width: 35px;
                height: 35px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
            }

            .modal-close-mega:hover {
                background: rgba(255, 255, 255, 0.3);
                transform: rotate(90deg);
            }

            .modal-content-mega {
                padding: 25px;
                max-height: calc(85vh - 90px);
                overflow-y: auto;
                background: #ffffff;
            }

            .upload-form-mega {
                display: flex;
                flex-direction: column;
                gap: 18px;
            }

            .form-group-mega {
                display: flex;
                flex-direction: column;
                gap: 6px;
            }

            .form-group-mega label {
                font-weight: 700;
                color: #3E2723 !important; /* Much darker brown */
                font-size: 0.95rem !important;
                margin-bottom: 2px;
                text-shadow: none !important;
            }

            .form-group-mega input,
            .form-group-mega select,
            .form-group-mega textarea {
                padding: 12px 14px;
                border: 2px solid #d7ccc8;
                border-radius: 10px;
                font-size: 0.95rem;
                transition: all 0.3s ease;
                background: #ffffff !important;
                color: #5D4037 !important;
                font-weight: 500;
            }

            /* Default state - light background */
            .form-group-mega input,
            .form-group-mega select,
            .form-group-mega textarea {
                background: #ffffff !important;
                border-color: #d7ccc8;
            }

            /* Focus state - turn brown when clicked/typing */
            .form-group-mega input:focus,
            .form-group-mega select:focus,
            .form-group-mega textarea:focus,
            .form-group-mega input:not(:placeholder-shown),
            .form-group-mega textarea:not(:placeholder-shown) {
                background: #f5e9dd !important; /* Light brown background */
                border-color: #8B4513 !important;
                color: #5D4037 !important;
                box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.15) !important;
            }

            /* When typing (has content) */
            .form-group-mega input:valid,
            .form-group-mega textarea:valid {
                background: #f5e9dd !important;
                border-color: #8B4513 !important;
            }

            /* Select element when opened or has value */
            .form-group-mega select:focus,
            .form-group-mega select:valid {
                background: #f5e9dd !important;
                border-color: #8B4513 !important;
            }

            .form-group-mega input::placeholder,
            .form-group-mega textarea::placeholder {
                color: #a1887f !important;
                font-weight: 400;
            }

            .form-row-mega {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 12px;
            }

            .file-upload-mega {
                position: relative;
            }

            .file-upload-mega input[type="file"] {
                position: absolute;
                left: -9999px;
            }

            .file-label-mega {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 14px;
                border: 2px dashed #8B4513;
                border-radius: 10px;
                background: rgba(139, 69, 19, 0.08);
                color: #3E2723 !important; /* Darker brown for file label */
                cursor: pointer;
                transition: all 0.3s ease;
                text-align: center;
                justify-content: center;
                font-size: 0.9rem;
                font-weight: 600;
            }

            .file-label-mega:hover {
                background: rgba(139, 69, 19, 0.15);
                border-color: #A0522D;
                transform: translateY(-1px);
            }

            .file-label-mega:active,
            .file-label-mega:focus {
                background: rgba(139, 69, 19, 0.2) !important;
                border-color: #8B4513 !important;
            }

            .file-name-mega {
                display: block;
                margin-top: 8px;
                font-size: 0.85rem;
                color: #3E2723 !important; /* Darker brown for file name */
                text-align: center;
                font-weight: 500;
                background: rgba(139, 69, 19, 0.1);
                padding: 6px 10px;
                border-radius: 6px;
                border: 1px solid rgba(139, 69, 19, 0.2);
            }

            .form-footer-mega {
                display: flex;
                gap: 12px;
                justify-content: flex-end;
                margin-top: 18px;
                padding-top: 18px;
                border-top: 2px solid #e8d6c9;
                flex-wrap: wrap;
            }

            .btn-outline-mega {
                background: transparent;
                border: 2px solid #8B4513;
                color: #3E2723 !important; /* Darker brown for button text */
                padding: 12px 24px;
                border-radius: 25px;
                font-weight: 700;
                cursor: pointer;
                transition: all 0.3s ease;
                font-size: 0.9rem;
            }

            .btn-outline-mega:hover {
                background: #8B4513;
                color: white !important;
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(139, 69, 19, 0.3);
            }

            .btn-outline-mega:focus {
                background: #8B4513 !important;
                color: white !important;
            }

            .btn-gold-mega {
                background: linear-gradient(135deg, #8B4513, #A0522D);
                color: white !important;
                border: none;
                padding: 12px 24px;
                border-radius: 25px;
                font-weight: 700;
                cursor: pointer;
                transition: all 0.3s ease;
                display: flex;
                align-items: center;
                gap: 6px;
                font-size: 0.9rem;
                text-shadow: 0 1px 1px rgba(0,0,0,0.2);
            }

            .btn-gold-mega:hover {
                transform: translateY(-2px);
                box-shadow: 0 6px 20px rgba(139, 69, 19, 0.5);
                background: linear-gradient(135deg, #A0522D, #8B4513);
            }

            .btn-gold-mega:focus {
                background: linear-gradient(135deg, #A0522D, #8B4513) !important;
                transform: translateY(-1px);
            }

            /* Force all text to be visible with darker colors */
            .modal-content-mega,
            .modal-content-mega * {
                color: #3E2723 !important; /* Darker brown for all text */
            }

            .modal-content-mega label,
            .modal-content-mega span,
            .modal-content-mega div:not(.modal-header-mega *) {
                color: #3E2723 !important; /* Darker brown */
            }

            /* Make sure header text stays white */
            .modal-header-mega,
            .modal-header-mega * {
                color: white !important;
            }

            /* Improve select dropdown visibility */
            .form-group-mega select option {
                background: white !important;
                color: #3E2723 !important; /* Darker brown for dropdown */
                padding: 10px;
            }

            /* Better focus states for accessibility */
            .form-group-mega input:focus-visible,
            .form-group-mega select:focus-visible,
            .form-group-mega textarea:focus-visible {
                outline: 2px solid #8B4513;
                outline-offset: 2px;
            }

            /* Ensure all text in form is visible with darker color */
            .upload-form-mega *:not(.modal-header-mega *) {
                color: #3E2723 !important; /* Darker brown */
            }
            /* Notification Styles */
            .notification-mega {
                position: fixed;
                top: 70px;
                right: 15px;
                background: white;
                padding: 12px 16px;
                border-radius: 10px;
                box-shadow: 0 10px 30px rgba(0,0,0,0.2);
                display: flex;
                align-items: center;
                gap: 8px;
                z-index: 1001;
                transform: translateX(400px);
                transition: transform 0.3s ease;
                max-width: 280px;
                font-size: 0.85rem;
            }

            .notification-success {
                border-left: 4px solid #4CAF50;
            }

            .notification-info {
                border-left: 4px solid #2196F3;
            }

            .notification-mega.show {
                transform: translateX(0);
            }

            /* Samsung S8+ and Small Screen Optimizations */
            @media (max-width: 740px) and (max-height: 360px) {
                .academic-mega {
                    padding: 40px 0;
                }

                .resources-controls-mega {
                    padding: 15px;
                    gap: 12px;
                }

                .search-bar-mega {
                    min-width: 200px;
                }

                .filter-controls-mega select {
                    min-width: 120px;
                    font-size: 0.8rem;
                    padding: 8px 10px;
                }

                .resources-grid-mega {
                    grid-template-columns: 1fr;
                    gap: 15px;
                }

                .resource-card-mega {
                    padding: 20px;
                }

                .modal-container-mega {
                    width: 95%;
                    margin: 10px;
                }
            }

            @media (max-width: 360px) {
                .academic-mega .section-title h2 {
                    font-size: 1.5rem;
                }

                .academic-mega .section-title p {
                    font-size: 0.9rem;
                }

                .resources-controls-mega {
                    padding: 15px;
                }

                .search-bar-mega {
                    min-width: 100%;
                }

                .filter-controls-mega {
                    gap: 8px;
                }

                .filter-controls-mega select {
                    min-width: 100%;
                }

                .upload-btn-mega {
                    width: 100%;
                    justify-content: center;
                }

                .resources-stats-mega {
                    grid-template-columns: 1fr;
                }

                .resource-actions-mega {
                    flex-direction: column;
                }

                .btn-download-mega,
                .btn-preview-mega {
                    width: 100%;
                }

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

                .form-footer-mega {
                    flex-direction: column;
                }

                .btn-outline-mega,
                .btn-gold-mega {
                    width: 100%;
                    text-align: center;
                    justify-content: center;
                }
            }

            /* Very small screens */
            @media (max-width: 320px) {
                .academic-mega {
                    padding: 30px 0;
                }

                .resource-card-mega {
                    padding: 15px;
                }

                .resource-card-mega h3 {
                    font-size: 1.1rem;
                }

                .resource-meta-mega {
                    flex-direction: column;
                    gap: 8px;
                }

                .modal-content-mega {
                    padding: 15px;
                }

                .modal-header-mega {
                    padding: 15px 20px;
                }
            }
            /* === MERCHANDISE SECTION === */
            .merchandise-mega {
                background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
                position: relative;
                overflow: hidden;
                padding: 100px 0;
            }

            .merchandise-mega::before {
                content: '';
                position: absolute;
                top: -100px;
                right: -100px;
                width: 400px;
                height: 400px;
                background: linear-gradient(135deg, #8B4513, #A0522D, #D2691E);
                border-radius: 50%;
                opacity: 0.05;
                animation: float 6s ease-in-out infinite;
            }

            .merchandise-mega::after {
                content: '';
                position: absolute;
                bottom: -150px;
                left: -150px;
                width: 500px;
                height: 500px;
                background: linear-gradient(135deg, #D2691E, #CD853F, #F4A460);
                border-radius: 50%;
                opacity: 0.03;
                animation: float 8s ease-in-out infinite reverse;
            }

            @keyframes float {
                0%, 100% { transform: translateY(0px) rotate(0deg); }
                50% { transform: translateY(-20px) rotate(180deg); }
            }

            /* Cart Summary */
            .cart-summary-mega {
                background: rgba(255, 255, 255, 0.95);
                backdrop-filter: blur(10px);
                border-radius: 15px;
                padding: 20px 30px;
                margin-bottom: 40px;
                box-shadow: 0 10px 30px rgba(139, 69, 19, 0.1);
                border: 1px solid rgba(139, 69, 19, 0.1);
                position: sticky;
                top: 20px;
                z-index: 100;
            }

            .cart-header-mega {
                display: flex;
                align-items: center;
                gap: 20px;
                justify-content: space-between;
            }

            .cart-header-mega i {
                font-size: 1.5rem;
                color: #8B4513;
            }

            .cart-count-mega {
                background: linear-gradient(135deg, #8B4513, #A0522D);
                color: white;
                padding: 5px 12px;
                border-radius: 20px;
                font-weight: 700;
                font-size: 0.9rem;
            }

            .cart-total-mega {
                font-weight: 700;
                color: #5D4037;
                font-size: 1.1rem;
            }

            /* Categories */
            .merch-categories-mega {
                display: flex;
                justify-content: center;
                gap: 15px;
                margin-bottom: 50px;
                flex-wrap: wrap;
            }

            .category-btn-mega {
                padding: 12px 25px;
                background: rgba(255, 255, 255, 0.8);
                border: 2px solid #8B4513;
                color: #8B4513;
                border-radius: 25px;
                font-weight: 600;
                cursor: pointer;
                transition: all 0.3s ease;
                backdrop-filter: blur(10px);
            }

            .category-btn-mega:hover {
                background: #8B4513;
                color: white;
                transform: translateY(-2px);
            }

            .category-btn-mega.active {
                background: linear-gradient(135deg, #8B4513, #A0522D);
                color: white;
                border-color: transparent;
                box-shadow: 0 5px 15px rgba(139, 69, 19, 0.3);
            }

            /* Merch Grid */
            .merch-grid-mega {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
                gap: 30px;
            }

            .merch-item-mega {
                background: white;
                border-radius: 20px;
                overflow: hidden;
                box-shadow: 0 10px 30px rgba(139, 69, 19, 0.1);
                transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                position: relative;
                border: 1px solid rgba(139, 69, 19, 0.1);
            }

            .merch-item-mega:hover {
                transform: translateY(-10px);
                box-shadow: 0 20px 50px rgba(139, 69, 19, 0.2);
            }

            .merch-image-mega {
                height: 250px;
                overflow: hidden;
                position: relative;
            }

            .merch-image-mega img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: all 0.5s ease;
            }

            .merch-item-mega:hover .merch-image-mega img {
                transform: scale(1.1);
            }

            .merch-badge {
                position: absolute;
                top: 15px;
                left: 15px;
                padding: 6px 12px;
                background: linear-gradient(135deg, #8B4513, #A0522D);
                color: white;
                border-radius: 20px;
                font-size: 0.75rem;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 1px;
                box-shadow: 0 4px 15px rgba(139, 69, 19, 0.3);
                z-index: 2;
            }

            .merch-info-mega {
                padding: 25px;
                text-align: center;
            }

            .merch-info-mega h3 {
                font-size: 1.3rem;
                margin-bottom: 10px;
                color: #5D4037;
                line-height: 1.3;
            }

            .merch-description-mega {
                color: #795548;
                font-size: 0.9rem;
                margin-bottom: 15px;
                line-height: 1.4;
            }

            .merch-price-mega {
                font-size: 1.4rem;
                font-weight: 900;
                color: #8B4513;
                margin-bottom: 20px;
            }

            .merch-meta-mega {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 15px;
                font-size: 0.85rem;
                color: #795548;
            }

            .merch-category-mega {
                background: rgba(139, 69, 19, 0.1);
                padding: 4px 10px;
                border-radius: 15px;
                font-weight: 600;
            }

            .merch-stock-mega {
                font-weight: 600;
            }

            .merch-stock-mega.in-stock {
                color: #4CAF50;
            }

            .merch-stock-mega.low-stock {
                color: #FF9800;
            }

            .merch-actions-mega {
                display: flex;
                gap: 10px;
            }

            .btn-add-cart-mega {
                background: linear-gradient(135deg, #8B4513, #A0522D);
                color: white;
                border: none;
                padding: 12px 20px;
                border-radius: 25px;
                font-weight: 600;
                cursor: pointer;
                transition: all 0.3s ease;
                display: flex;
                align-items: center;
                gap: 8px;
                flex: 1;
                justify-content: center;
            }

            .btn-add-cart-mega:hover {
                transform: translateY(-2px);
                box-shadow: 0 5px 15px rgba(139, 69, 19, 0.4);
            }

            .btn-add-cart-mega:disabled {
                background: #ccc;
                cursor: not-allowed;
                transform: none;
            }

            .btn-quantity-mega {
                background: rgba(139, 69, 19, 0.1);
                border: 2px solid #8B4513;
                color: #8B4513;
                width: 40px;
                height: 40px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                transition: all 0.3s ease;
                font-weight: 700;
            }

            .btn-quantity-mega:hover {
                background: #8B4513;
                color: white;
            }

            .quantity-display-mega {
                font-weight: 700;
                color: #5D4037;
                min-width: 30px;
                text-align: center;
            }

            /* Cart Modal */
            .cart-modal-mega,
            .payment-modal-mega,
            .success-modal-mega {
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: 0;
                visibility: hidden;
                transition: all 0.3s ease;
                z-index: 1000;
                pointer-events: none;
            }

            .cart-modal-mega.active,
            .payment-modal-mega.active,
            .success-modal-mega.active {
                opacity: 1;
                visibility: visible;
                pointer-events: all;
            }

            .modal-backdrop-mega {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(139, 69, 19, 0.8);
                backdrop-filter: blur(5px);
                cursor: pointer;
            }

            /* Modal Container Fix */
            .modal-container-mega {
                position: relative;
                width: 90%;
                max-width: 600px;
                max-height: 85vh; /* Reduced from 90vh */
                background: white;
                border-radius: 20px;
                box-shadow: 0 30px 80px rgba(139, 69, 19, 0.3);
                overflow: hidden;
                transform: scale(0.9);
                transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                display: flex;
                flex-direction: column;
            }

            .modal-content-mega {
                padding: 30px;
                overflow-y: auto;
                flex: 1;
                max-height: calc(85vh - 140px); /* Adjusted calculation */
            }

            .modal-footer-mega {
                padding: 20px 30px;
                border-top: 1px solid #e0e0e0;
                display: flex;
                gap: 15px;
                justify-content: flex-end;
                background: white;
                position: relative;
                z-index: 10;
            }

            /* Payment Modal Specific Styles */
            .payment-modal-mega .modal-container-mega {
                max-width: 500px;
            }

            .payment-steps-mega {
                background: rgba(139, 69, 19, 0.05);
                border-radius: 15px;
                padding: 25px;
                margin-bottom: 25px;
            }

            .payment-step-mega {
                display: flex;
                align-items: flex-start;
                gap: 15px;
                margin-bottom: 20px;
            }

            .payment-step-mega:last-child {
                margin-bottom: 0;
            }

            .step-number {
                background: linear-gradient(135deg, #8B4513, #A0522D);
                color: white;
                width: 30px;
                height: 30px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: 700;
                font-size: 0.9rem;
                flex-shrink: 0;
            }

            .step-content h4 {
                margin: 0 0 5px 0;
                color: #5D4037;
            }

            .step-content p {
                margin: 0;
                color: #795548;
                font-size: 0.9rem;
            }

            .till-number-display {
                background: white;
                border: 2px solid #8B4513;
                border-radius: 10px;
                padding: 10px 15px;
                font-size: 1.4rem;
                font-weight: 900;
                color: #8B4513;
                text-align: center;
                margin: 10px 0;
            }

            .amount-display {
                background: white;
                border: 2px solid #4CAF50;
                border-radius: 10px;
                padding: 15px;
                font-size: 1.6rem;
                font-weight: 900;
                color: #4CAF50;
                text-align: center;
                margin: 10px 0;
            }

            .payment-countdown {
                text-align: center;
                margin: 20px 0;
                padding: 15px;
                background: rgba(76, 175, 80, 0.1);
                border-radius: 10px;
                border: 1px solid #4CAF50;
            }

            .countdown-timer {
                font-size: 2rem;
                font-weight: 900;
                color: #4CAF50;
                margin: 10px 0;
            }

            .payment-status {
                text-align: center;
                margin: 20px 0;
                padding: 20px;
                border-radius: 10px;
                background: rgba(33, 150, 243, 0.1);
                border: 1px solid #2196F3;
            }

            .payment-status i {
                font-size: 3rem;
                color: #2196F3;
                margin-bottom: 15px;
            }

            .payment-status h4 {
                color: #2196F3;
                margin-bottom: 10px;
            }

            /* MPESA Simulation Styles */
            .mpesa-simulation {
                background: #f8f9fa;
                border-radius: 15px;
                padding: 20px;
                margin: 20px 0;
                border: 2px dashed #8B4513;
            }

            .mpesa-phone {
                background: white;
                border: 2px solid #e0e0e0;
                border-radius: 10px;
                padding: 15px;
                margin: 15px 0;
                text-align: center;
            }

            .phone-number {
                font-size: 1.2rem;
                font-weight: 700;
                color: #5D4037;
                margin-bottom: 10px;
            }

            .pin-prompt {
                background: white;
                border: 2px solid #FF9800;
                border-radius: 10px;
                padding: 20px;
                margin: 15px 0;
                text-align: center;
            }

            .pin-input {
                font-size: 1.4rem;
                font-weight: 900;
                color: #FF9800;
                margin: 15px 0;
                letter-spacing: 3px;
            }

            /* Close button improvements */
            .modal-close-mega {
                background: rgba(255, 255, 255, 0.2);
                border: none;
                color: white;
                font-size: 1.5rem;
                cursor: pointer;
                transition: all 0.3s ease;
                width: 40px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                position: absolute;
                top: 15px;
                right: 15px;
                z-index: 1001;
            }

            .modal-close-mega:hover {
                background: rgba(255, 255, 255, 0.3);
                transform: rotate(90deg);
            }

            /* Cart Items */
            .cart-items-mega {
                display: none;
            }

            .cart-item-mega {
                display: flex;
                align-items: center;
                gap: 15px;
                padding: 20px 0;
                border-bottom: 1px solid #e0e0e0;
            }

            .cart-item-mega:last-child {
                border-bottom: none;
            }

            .cart-item-image-mega {
                width: 80px;
                height: 80px;
                border-radius: 10px;
                overflow: hidden;
            }

            .cart-item-image-mega img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .cart-item-details-mega {
                flex: 1;
            }

            .cart-item-name-mega {
                font-weight: 700;
                color: #5D4037;
                margin-bottom: 5px;
            }

            .cart-item-price-mega {
                color: #8B4513;
                font-weight: 600;
            }

            .cart-item-controls-mega {
                display: flex;
                align-items: center;
                gap: 10px;
            }

            .cart-item-quantity-mega {
                font-weight: 700;
                min-width: 30px;
                text-align: center;
            }

            .cart-item-remove-mega {
                background: none;
                border: none;
                color: #f44336;
                cursor: pointer;
                padding: 5px;
                border-radius: 5px;
                transition: all 0.3s ease;
            }

            .cart-item-remove-mega:hover {
                background: #f44336;
                color: white;
            }

            .cart-empty-mega {
                text-align: center;
                padding: 40px 20px;
                color: #795548;
            }

            .cart-empty-mega i {
                font-size: 4rem;
                margin-bottom: 20px;
                color: #e0e0e0;
            }

            .cart-total-mega-modal {
                margin-top: 20px;
                padding-top: 20px;
                border-top: 2px solid #e0e0e0;
            }

            .total-row-mega {
                display: flex;
                justify-content: space-between;
                margin-bottom: 10px;
                font-weight: 600;
            }

            .grand-total {
                font-size: 1.2rem;
                color: #8B4513;
                border-top: 1px solid #e0e0e0;
                padding-top: 10px;
                margin-top: 10px;
            }

            .modal-footer-mega {
                padding: 20px 30px;
                border-top: 1px solid #e0e0e0;
                display: flex;
                gap: 15px;
                justify-content: flex-end;
            }

            /* Payment Modal */
            .payment-instructions-mega {
                background: rgba(139, 69, 19, 0.05);
                border-radius: 15px;
                padding: 25px;
                margin-bottom: 25px;
            }

            .payment-step-mega {
                display: flex;
                align-items: flex-start;
                gap: 15px;
                margin-bottom: 20px;
            }

            .payment-step-mega:last-child {
                margin-bottom: 0;
            }

            .step-number {
                background: linear-gradient(135deg, #8B4513, #A0522D);
                color: white;
                width: 30px;
                height: 30px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: 700;
                font-size: 0.9rem;
                flex-shrink: 0;
            }

            .step-content h4 {
                margin: 0 0 5px 0;
                color: #5D4037;
            }

            .step-content p {
                margin: 0;
                color: #795548;
            }

            .till-number {
                font-size: 1.3rem;
                font-weight: 900;
                color: #8B4513;
                margin: 5px 0;
            }

            .payment-amount {
                font-size: 1.4rem;
                font-weight: 900;
                color: #8B4513;
                margin: 5px 0;
            }

            .payment-form-mega {
                margin-bottom: 25px;
            }

            .payment-summary-mega {
                background: rgba(139, 69, 19, 0.05);
                border-radius: 15px;
                padding: 20px;
            }

            .payment-summary-mega h4 {
                margin: 0 0 15px 0;
                color: #5D4037;
            }

            /* Success Modal */
            .success-content-mega {
                text-align: center;
            }

            .success-icon-mega {
                font-size: 4rem;
                color: #4CAF50;
                margin-bottom: 20px;
            }

            .success-content-mega h4 {
                color: #5D4037;
                margin-bottom: 10px;
            }

            .success-content-mega p {
                color: #795548;
                margin-bottom: 25px;
            }

            .order-details-mega {
                background: rgba(139, 69, 19, 0.05);
                border-radius: 15px;
                padding: 20px;
                margin-bottom: 25px;
                text-align: left;
            }

            .detail-row {
                display: flex;
                justify-content: space-between;
                margin-bottom: 10px;
                padding-bottom: 10px;
                border-bottom: 1px solid rgba(139, 69, 19, 0.1);
            }

            .detail-row:last-child {
                margin-bottom: 0;
                border-bottom: none;
                padding-bottom: 0;
            }

            .pickup-instructions-mega {
                background: rgba(76, 175, 80, 0.1);
                border-radius: 15px;
                padding: 20px;
                text-align: left;
            }

            .pickup-instructions-mega h5 {
                color: #5D4037;
                margin-bottom: 15px;
            }

            .pickup-instructions-mega p {
                margin-bottom: 10px;
                color: #795548;
            }

            .pickup-instructions-mega p:last-child {
                margin-bottom: 0;
            }

            /* Buttons */
            .btn-gold-mega {
                background: linear-gradient(135deg, #8B4513, #A0522D);
                color: white;
                border: none;
                padding: 12px 25px;
                border-radius: 25px;
                font-weight: 600;
                cursor: pointer;
                transition: all 0.3s ease;
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .btn-gold-mega:hover:not(:disabled) {
                transform: translateY(-2px);
                box-shadow: 0 5px 15px rgba(139, 69, 19, 0.4);
            }

            .btn-gold-mega:disabled {
                background: #ccc;
                cursor: not-allowed;
                transform: none;
            }

            .btn-outline-mega {
                background: transparent;
                border: 2px solid #8B4513;
                color: #8B4513;
                padding: 12px 25px;
                border-radius: 25px;
                font-weight: 600;
                cursor: pointer;
                transition: all 0.3s ease;
            }

            .btn-outline-mega:hover {
                background: #8B4513;
                color: white;
            }

            /* Form Styles */
            .form-group-mega {
                display: flex;
                flex-direction: column;
                gap: 8px;
                margin-bottom: 20px;
            }

            .form-group-mega label {
                font-weight: 600;
                color: #3E2723;
                font-size: 0.95rem;
            }

            .form-group-mega input {
                padding: 12px 15px;
                border: 2px solid #e0e0e0;
                border-radius: 10px;
                font-size: 1rem;
                transition: all 0.3s ease;
            }

            .form-group-mega input:focus {
                outline: none;
                border-color: #8B4513;
                box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.1);
            }

            /* === NOTIFICATION STYLES - FIXED POSITIONING === */
            /* Modal Notification Styles */
            .modal-notification-mega {
                position: fixed;
                top: 100px; /* Changed from absolute to fixed and pushed down */
                left: 50%;
                transform: translateX(-50%) translateY(-100px);
                background: white;
                padding: 15px 25px;
                border-radius: 10px;
                box-shadow: 0 10px 30px rgba(0,0,0,0.2);
                display: flex;
                align-items: center;
                gap: 10px;
                z-index: 1002;
                transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                max-width: 80%;
                text-align: center;
            }

            .modal-notification-mega.show {
                transform: translateX(-50%) translateY(0);
            }

            .modal-notification-success {
                border-left: 4px solid #4CAF50;
            }

            .modal-notification-error {
                border-left: 4px solid #f44336;
            }

            .modal-notification-info {
                border-left: 4px solid #2196F3;
            }

            /* Global Notification Styles */
            .notification-mega {
                position: fixed;
                top: 100px; /* Pushed down to avoid nav bar */
                right: 20px;
                background: white;
                padding: 15px 20px;
                border-radius: 10px;
                box-shadow: 0 10px 30px rgba(0,0,0,0.2);
                display: flex;
                align-items: center;
                gap: 10px;
                z-index: 1001;
                transform: translateX(400px);
                transition: transform 0.3s ease;
            }

            .notification-success {
                border-left: 4px solid #4CAF50;
            }

            .notification-info {
                border-left: 4px solid #2196F3;
            }

            .notification-mega.show {
                transform: translateX(0);
            }

            /* Add to Cart Notification */
            .cart-notification-mega {
                position: fixed;
                top: 100px; /* Pushed down to avoid nav bar */
                right: 20px;
                background: white;
                padding: 15px 20px;
                border-radius: 10px;
                box-shadow: 0 10px 30px rgba(0,0,0,0.2);
                display: flex;
                align-items: center;
                gap: 10px;
                z-index: 1001;
                transform: translateX(400px);
                transition: transform 0.3s ease;
                border-left: 4px solid #4CAF50;
            }

            .cart-notification-mega.show {
                transform: translateX(0);
            }

            /* Payment Notification */
            .payment-notification-mega {
                position: fixed;
                top: 100px; /* Pushed down to avoid nav bar */
                left: 50%;
                transform: translateX(-50%) translateY(-100px);
                background: white;
                padding: 15px 25px;
                border-radius: 10px;
                box-shadow: 0 10px 30px rgba(0,0,0,0.2);
                display: flex;
                align-items: center;
                gap: 10px;
                z-index: 1002;
                transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                max-width: 80%;
                text-align: center;
                border-left: 4px solid #2196F3;
            }

            .payment-notification-mega.show {
                transform: translateX(-50%) translateY(0);
            }

            /* Responsive fixes */
            @media (max-width: 768px) {
                .modal-container-mega {
                    width: 95%;
                    margin: 10px;
                    max-height: 90vh;
                }

                .modal-footer-mega {
                    flex-direction: column;
                }

                .modal-content-mega {
                    max-height: calc(90vh - 160px);
                }

                .till-number-display,
                .amount-display {
                    font-size: 1.2rem;
                    padding: 12px;
                }

                /* Mobile notification adjustments */
                .modal-notification-mega,
                .notification-mega,
                .cart-notification-mega,
                .payment-notification-mega {
                    top: 80px; /* Slightly lower on mobile */
                    max-width: 90%;
                    padding: 12px 20px;
                    font-size: 0.9rem;
                }

                .notification-mega,
                .cart-notification-mega {
                    right: 10px;
                    left: auto;
                    transform: translateX(400px);
                }

                .notification-mega.show,
                .cart-notification-mega.show {
                    transform: translateX(0);
                }
            }

            @media (max-width: 576px) {
                .modal-container-mega {
                    width: 98%;
                    margin: 5px;
                }

                .modal-content-mega {
                    padding: 20px 15px;
                }

                .modal-footer-mega {
                    padding: 15px 20px;
                }

                .payment-step-mega {
                    flex-direction: column;
                    text-align: center;
                    gap: 10px;
                }

                /* Mobile notification adjustments */
                .modal-notification-mega,
                .notification-mega,
                .cart-notification-mega,
                .payment-notification-mega {
                    top: 70px; /* Even lower on very small screens */
                    max-width: 95%;
                    padding: 10px 15px;
                    font-size: 0.85rem;
                }

                .notification-mega,
                .cart-notification-mega {
                    right: 5px;
                    max-width: calc(100% - 10px);
                }
            }

            /* Responsive Design */
            @media (max-width: 768px) {
                .merch-grid-mega {
                    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
                    gap: 20px;
                }

                .cart-header-mega {
                    flex-direction: column;
                    gap: 15px;
                    text-align: center;
                }

                .merch-categories-mega {
                    gap: 10px;
                }

                .category-btn-mega {
                    padding: 10px 20px;
                    font-size: 0.9rem;
                }

                .modal-footer-mega {
                    flex-direction: column;
                }

                .cart-item-mega {
                    flex-direction: column;
                    text-align: center;
                    gap: 10px;
                }

                .cart-item-controls-mega {
                    justify-content: center;
                }
            }

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

                .modal-container-mega {
                    width: 95%;
                    margin: 20px;
                }

                .merch-actions-mega {
                    flex-direction: column;
                }
            }


            /* === PARTNERS SECTION === */
            .partners-mega {
                background: linear-gradient(135deg, #2c1b0f 0%, #3d2818 100%);
                position: relative;
                overflow: hidden;
                padding: 120px 0;
            }

            .partners-mega::before {
                content: '';
                position: absolute;
                top: -80px;
                right: -80px;
                width: 300px;
                height: 300px;
                background: linear-gradient(135deg, #8B4513, #A0522D);
                border-radius: 50%;
                opacity: 0.08;
                animation: float 12s ease-in-out infinite;
            }

            .partners-mega::after {
                content: '';
                position: absolute;
                bottom: -100px;
                left: -100px;
                width: 350px;
                height: 350px;
                background: linear-gradient(135deg, #D2691E, #CD853F);
                border-radius: 50%;
                opacity: 0.06;
                animation: float 15s ease-in-out infinite reverse;
            }

            @keyframes float {
                0%, 100% {
                    transform: translateY(0px) rotate(0deg) scale(1);
                }
                33% {
                    transform: translateY(-20px) rotate(120deg) scale(1.05);
                }
                66% {
                    transform: translateY(10px) rotate(240deg) scale(0.95);
                }
            }

            /* Donate Section */
            .donate-section-mega {
                text-align: center;
                margin: 40px 0 60px 0;
            }

            .btn-donate-mega {
                background: linear-gradient(135deg, #e74c3c, #c0392b);
                color: white;
                border: none;
                padding: 18px 40px;
                border-radius: 50px;
                font-size: 1.1rem;
                font-weight: 700;
                cursor: pointer;
                transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
                box-shadow: 0 8px 30px rgba(231, 76, 60, 0.3);
                display: inline-flex;
                align-items: center;
                gap: 12px;
                position: relative;
                overflow: hidden;
            }

            .btn-donate-mega::before {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
                transition: left 0.6s ease;
            }

            .btn-donate-mega:hover::before {
                left: 100%;
            }

            .btn-donate-mega:hover {
                transform: translateY(-3px);
                box-shadow: 0 15px 40px rgba(231, 76, 60, 0.5);
                background: linear-gradient(135deg, #c0392b, #e74c3c);
            }

            .btn-donate-mega:active {
                transform: translateY(-1px);
            }

            .partners-slider-mega {
                display: flex;
                overflow: hidden;
                position: relative;
                height: 280px;
                background: transparent;
                border-radius: 0;
                padding: 50px 0;
                margin-top: 20px;
            }

            /* TOP HORIZONTAL LINE */
            .partners-slider-mega::before {
                content: '';
                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 95%;
                height: 2px;
                background: linear-gradient(90deg,
                    transparent 0%,
                    #A0522D 15%,
                    #D2691E 50%,
                    #A0522D 85%,
                    transparent 100%
                );
                z-index: 5;
            }

            /* BOTTOM HORIZONTAL LINE */
            .partners-slider-mega::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 95%;
                height: 2px;
                background: linear-gradient(90deg,
                    transparent 0%,
                    #A0522D 15%,
                    #D2691E 50%,
                    #A0522D 85%,
                    transparent 100%
                );
                z-index: 5;
            }

            .partner-slide-mega {
                display: flex;
                align-items: center;
                gap: 40px;
                padding: 0 20px;
            }

            .partner-logo-mega {
                flex: 0 0 300px;
                height: 180px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: linear-gradient(145deg, #5c3c1f, #4a301d);
                border-radius: 20px;
                padding: 15px;
                box-shadow:
                    0 12px 35px rgba(0, 0, 0, 0.4),
                    inset 0 1px 0 rgba(255, 255, 255, 0.1),
                    0 0 0 1px rgba(139, 69, 19, 0.4);
                transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
                position: relative;
                border: 1px solid rgba(139, 69, 19, 0.5);
                z-index: 1;
                overflow: hidden;
            }

            .partner-logo-mega::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: linear-gradient(135deg, rgba(139, 69, 19, 0.3), rgba(160, 82, 45, 0.2));
                border-radius: 20px;
                opacity: 0;
                transition: all 0.4s ease;
                z-index: -1;
            }

            .partner-logo-mega::after {
                content: '';
                position: absolute;
                top: -2px;
                left: -2px;
                right: -2px;
                bottom: -2px;
                background: linear-gradient(135deg, #8B4513, #A0522D, #D2691E);
                border-radius: 22px;
                opacity: 0;
                transition: all 0.4s ease;
                z-index: -2;
            }

            .partner-logo-mega:hover {
                transform: translateY(-15px) scale(1.05);
                box-shadow:
                    0 35px 70px rgba(0, 0, 0, 0.6),
                    0 0 0 1px rgba(210, 105, 30, 0.6),
                    inset 0 1px 0 rgba(255, 255, 255, 0.2);
                z-index: 100;
                height: 220px;
            }

            .partner-logo-mega:hover::before {
                opacity: 1;
                transform: scale(1.02);
            }

            .partner-logo-mega:hover::after {
                opacity: 0.3;
            }

            .partner-logo-mega a {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
                text-decoration: none;
                position: relative;
                z-index: 3;
                flex-direction: column;
            }

            .partner-image {
                width: 100%;
                height: 100%;
                filter: grayscale(20%) brightness(1.1) contrast(1.1);
                transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
                object-fit: contain;
                transform: scale(0.9);
                border-radius: 12px;
            }

            .partner-logo-mega:hover .partner-image {
                filter: grayscale(0%) brightness(1.2) contrast(1.2);
                transform: scale(0.85);
                height: 60%;
            }

            /* Partner Details on Hover */
            .partner-details {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                background: linear-gradient(180deg, transparent 0%, rgba(44, 27, 15, 0.95) 30%, #2c1b0f 100%);
                padding: 20px 15px 15px 15px;
                border-radius: 0 0 20px 20px;
                transform: translateY(100%);
                transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
                opacity: 0;
                z-index: 4;
            }

            .partner-logo-mega:hover .partner-details {
                transform: translateY(0);
                opacity: 1;
            }

            .partner-details h4 {
                color: #f8d7b3;
                font-size: 0.9rem;
                font-weight: 700;
                margin: 0 0 8px 0;
                line-height: 1.2;
                text-align: center;
            }

            .partner-details p {
                color: #d7c1a7;
                font-size: 0.75rem;
                line-height: 1.3;
                margin: 0 0 10px 0;
                text-align: center;
            }

            .partner-website {
                color: #A0522D;
                font-size: 0.7rem;
                font-weight: 600;
                text-align: center;
                display: block;
                background: rgba(160, 82, 45, 0.2);
                padding: 4px 8px;
                border-radius: 6px;
                border: 1px solid rgba(160, 82, 45, 0.4);
            }

            /* Fallback styling */
            .logo-fallback {
                display: none;
                font-size: 1.8rem;
                font-weight: 800;
                color: #f8d7b3;
                text-align: center;
                text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
                letter-spacing: 1px;
            }

            .partner-logo-mega img:not([src]) + .logo-fallback,
            .partner-logo-mega img[src=""] + .logo-fallback,
            .partner-logo-mega.fallback-active .logo-fallback {
                display: block;
            }

            .partner-logo-mega.fallback-active img {
                display: none;
            }

            .partner-logo-mega.fallback-active {
                background: linear-gradient(145deg, #8B4513, #A0522D);
            }

            /* Section title styling */
            .section-title h2 {
                color: #5D4037;
                text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
                font-size: 2.5rem;
                margin-bottom: 15px;
            }

            .section-title p {
                color: #8D6E63;
                font-size: 1.1rem;
                max-width: 600px;
                margin: 0 auto;
            }

            /* SIDE FADE EFFECTS */
            .partners-slider-mega .fade-overlay {
                position: absolute;
                top: 2px;
                bottom: 2px;
                width: 200px;
                z-index: 10;
                pointer-events: none;
            }

            .partners-slider-mega .fade-left {
                left: 0;
                background: linear-gradient(
                    90deg,
                    #2c1b0f 0%,
                    rgba(44, 27, 15, 0.9) 20%,
                    rgba(44, 27, 15, 0.6) 40%,
                    rgba(44, 27, 15, 0.3) 60%,
                    rgba(44, 27, 15, 0.1) 80%,
                    transparent 100%
                );
                backdrop-filter: blur(8px);
            }

            .partners-slider-mega .fade-right {
                right: 0;
                background: linear-gradient(
                    270deg,
                    #2c1b0f 0%,
                    rgba(44, 27, 15, 0.9) 20%,
                    rgba(44, 27, 15, 0.6) 40%,
                    rgba(44, 27, 15, 0.3) 60%,
                    rgba(44, 27, 15, 0.1) 80%,
                    transparent 100%
                );
                backdrop-filter: blur(8px);
            }

            /* === DONATE MODAL STYLES === */
            .donate-modal-mega {
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: 0;
                visibility: hidden;
                transition: all 0.3s ease;
                z-index: 10000;
                pointer-events: none;
            }

            .donate-modal-mega.active {
                opacity: 1;
                visibility: visible;
                pointer-events: all;
            }

            .donate-modal-mega .modal-backdrop-mega {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(44, 27, 15, 0.95);
                backdrop-filter: blur(10px);
                cursor: pointer;
            }

            .donate-modal-mega .modal-container-mega {
                position: relative;
                width: 95%;
                max-width: 700px;
                max-height: 90vh;
                background: #ffffff;
                border-radius: 20px;
                box-shadow: 0 40px 100px rgba(44, 27, 15, 0.5);
                overflow: hidden;
                transform: scale(0.9) translateY(20px);
                transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            }

            .donate-modal-mega.active .modal-container-mega {
                transform: scale(1) translateY(0);
            }

            .donate-modal-mega .modal-header-mega {
                background: linear-gradient(135deg, #e74c3c, #c0392b);
                color: white;
                padding: 25px 30px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-bottom: 2px solid rgba(255,255,255,0.2);
            }

            .donate-modal-mega .modal-header-mega h3 {
                margin: 0;
                font-size: 1.5rem;
                font-weight: 700;
            }

            .donate-modal-mega .modal-close-mega {
                background: rgba(255,255,255,0.2);
                border: none;
                color: white;
                font-size: 1.8rem;
                cursor: pointer;
                transition: all 0.3s ease;
                width: 40px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
            }

            .donate-modal-mega .modal-close-mega:hover {
                background: rgba(255,255,255,0.3);
                transform: rotate(90deg);
            }

            .donate-modal-mega .modal-content-mega {
                padding: 0;
                max-height: calc(90vh - 90px);
                overflow-y: auto;
            }

            .donate-intro-mega {
                background: linear-gradient(135deg, #fff8f0, #f5e9dd);
                padding: 30px;
                text-align: center;
                border-bottom: 1px solid #e8d6c9;
            }

            .donate-icon-mega {
                font-size: 3rem;
                color: #e74c3c;
                margin-bottom: 15px;
            }

            .donate-intro-mega h4 {
                color: #5D4037;
                font-size: 1.3rem;
                margin-bottom: 10px;
                font-weight: 700;
            }

            .donate-intro-mega p {
                color: #795548;
                font-size: 1rem;
                line-height: 1.5;
                margin: 0;
            }

            .donate-form-mega {
                padding: 30px;
            }

            .form-section-mega {
                margin-bottom: 30px;
                padding-bottom: 25px;
                border-bottom: 1px solid #f0f0f0;
            }

            .form-section-mega:last-of-type {
                border-bottom: none;
                margin-bottom: 0;
            }

            .form-section-mega h5 {
                color: #5D4037;
                font-size: 1.1rem;
                font-weight: 700;
                margin-bottom: 20px;
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .form-section-mega h5::before {
                content: '';
                width: 4px;
                height: 20px;
                background: linear-gradient(135deg, #e74c3c, #c0392b);
                border-radius: 2px;
            }

            .donate-form-mega .form-group-mega {
                display: flex;
                flex-direction: column;
                gap: 8px;
                margin-bottom: 20px;
            }

            .donate-form-mega .form-group-mega:last-child {
                margin-bottom: 0;
            }

            .donate-form-mega .form-group-mega label {
                font-weight: 700;
                color: #5D4037 !important;
                font-size: 0.95rem !important;
                margin-bottom: 0;
            }

            .donate-form-mega .form-group-mega input,
            .donate-form-mega .form-group-mega select,
            .donate-form-mega .form-group-mega textarea {
                padding: 14px 16px;
                border: 2px solid #e0e0e0;
                border-radius: 10px;
                font-size: 0.95rem;
                transition: all 0.3s ease;
                background: #ffffff !important;
                color: #5D4037 !important;
                font-weight: 500;
                width: 100%;
            }

            .donate-form-mega .form-group-mega input:focus,
            .donate-form-mega .form-group-mega select:focus,
            .donate-form-mega .form-group-mega textarea:focus {
                outline: none;
                border-color: #e74c3c;
                background: #fff8f0 !important;
                box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
            }

            .donate-form-mega .form-row-mega {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 20px;
            }

            .call-note-mega {
                background: #e8f4fd;
                padding: 15px;
                border-radius: 10px;
                border-left: 4px solid #3498db;
                display: flex;
                align-items: flex-start;
                gap: 10px;
                margin-top: 10px;
            }

            .call-note-mega i {
                color: #3498db;
                font-size: 1.1rem;
                margin-top: 2px;
            }

            .call-note-mega span {
                color: #2c3e50;
                font-size: 0.9rem;
                line-height: 1.4;
            }

            .donate-form-mega .form-footer-mega {
                display: flex;
                gap: 15px;
                justify-content: flex-end;
                margin-top: 30px;
                padding-top: 25px;
                border-top: 1px solid #e8d6c9;
            }

            .donate-form-mega .btn-outline-mega {
                background: transparent;
                border: 2px solid #95a5a6;
                color: #95a5a6 !important;
                padding: 14px 28px;
                border-radius: 25px;
                font-weight: 600;
                cursor: pointer;
                transition: all 0.3s ease;
                font-size: 0.95rem;
            }

            .donate-form-mega .btn-outline-mega:hover {
                background: #95a5a6;
                color: white !important;
                transform: translateY(-1px);
            }

            .donate-form-mega .btn-gold-mega {
                background: linear-gradient(135deg, #e74c3c, #c0392b);
                color: white !important;
                border: none;
                padding: 14px 32px;
                border-radius: 25px;
                font-weight: 700;
                cursor: pointer;
                transition: all 0.3s ease;
                display: flex;
                align-items: center;
                gap: 8px;
                font-size: 0.95rem;
            }

            .donate-form-mega .btn-gold-mega:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 25px rgba(231, 76, 60, 0.4);
                background: linear-gradient(135deg, #c0392b, #e74c3c);
            }

            /* Responsive Design */
            @media (max-width: 1200px) {
                .partners-slider-mega {
                    height: 250px;
                }
                .partner-logo-mega {
                    flex: 0 0 280px;
                    height: 160px;
                }
                .partner-logo-mega:hover {
                    height: 200px;
                }
                .partners-slider-mega .fade-overlay {
                    width: 150px;
                }
            }

            @media (max-width: 992px) {
                .partners-mega {
                    padding: 100px 0;
                }
                .partners-slider-mega {
                    height: 230px;
                }
                .partner-logo-mega {
                    flex: 0 0 260px;
                    height: 150px;
                    padding: 12px;
                }
                .partner-logo-mega:hover {
                    height: 190px;
                }
                .partner-details {
                    padding: 15px 12px 12px 12px;
                }
                .partner-details h4 {
                    font-size: 0.85rem;
                }
                .partner-details p {
                    font-size: 0.7rem;
                }
                .partners-slider-mega .fade-overlay {
                    width: 120px;
                }
                .donate-form-mega .form-row-mega {
                    grid-template-columns: 1fr;
                    gap: 0;
                }
            }

            @media (max-width: 768px) {
                .partners-slider-mega {
                    height: 200px;
                    padding: 40px 0;
                }
                .partner-logo-mega {
                    flex: 0 0 220px;
                    height: 130px;
                    padding: 10px;
                }
                .partner-logo-mega:hover {
                    height: 170px;
                }
                .partner-details {
                    padding: 12px 10px 10px 10px;
                }
                .partner-details h4 {
                    font-size: 0.8rem;
                }
                .partner-details p {
                    font-size: 0.65rem;
                }
                .logo-fallback {
                    font-size: 1.5rem;
                }
                .partners-slider-mega .fade-overlay {
                    width: 80px;
                }
                .donate-modal-mega .modal-container-mega {
                    width: 98%;
                    margin: 20px;
                }
                .donate-form-mega {
                    padding: 20px;
                }
                .donate-intro-mega {
                    padding: 20px;
                }
            }

            @media (max-width: 576px) {
                .partners-mega {
                    padding: 80px 0;
                }
                .partners-slider-mega {
                    height: 180px;
                    padding: 35px 0;
                }
                .partner-logo-mega {
                    flex: 0 0 180px;
                    height: 110px;
                    padding: 8px;
                }
                .partner-logo-mega:hover {
                    height: 150px;
                }
                .partner-details {
                    padding: 10px 8px 8px 8px;
                }
                .partner-details h4 {
                    font-size: 0.75rem;
                    margin-bottom: 6px;
                }
                .partner-details p {
                    font-size: 0.6rem;
                    margin-bottom: 8px;
                }
                .partner-website {
                    font-size: 0.65rem;
                    padding: 3px 6px;
                }
                .logo-fallback {
                    font-size: 1.3rem;
                }
                .partners-slider-mega .fade-overlay {
                    width: 60px;
                }
                .btn-donate-mega {
                    padding: 15px 30px;
                    font-size: 1rem;
                }
                .donate-form-mega .form-footer-mega {
                    flex-direction: column;
                }
                .donate-form-mega .btn-outline-mega,
                .donate-form-mega .btn-gold-mega {
                    width: 100%;
                    justify-content: center;
                }
            }

            /* Image loading states */
            .partner-image {
                opacity: 0.9;
                transition: all 0.3s ease;
            }

            .partner-image.loaded {
                opacity: 1;
            }




            /* === CONTACT SECTION === */
            .contact-mega {
                background: linear-gradient(135deg, #3e2723 0%, #5d4037 50%, #3e2723 100%);
                color: var(--white);
                position: relative;
                overflow: hidden;
                padding: 100px 0;
            }

            .contact-mega::before {
                content: '';
                position: absolute;
                top: -200px;
                left: -200px;
                width: 500px;
                height: 500px;
                background: rgba(212, 175, 55, 0.05);
                border-radius: 50%;
                animation: float 8s ease-in-out infinite;
            }

            .contact-mega::after {
                content: '';
                position: absolute;
                bottom: -150px;
                right: -150px;
                width: 400px;
                height: 400px;
                background: rgba(212, 175, 55, 0.03);
                border-radius: 50%;
                animation: float 6s ease-in-out infinite reverse;
            }

            .contact-mega .section-title h2 {
                color: var(--white);
                text-align: center;
            }

            .contact-mega .section-title p {
                color: rgba(255, 255, 255, 0.8);
                text-align: center;
            }

            .contact-container-mega {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 80px;
                position: relative;
                z-index: 2;
                max-width: 1200px;
                margin: 0 auto;
            }

            /* Contact Header */
            .contact-header-mega {
                text-align: center;
                margin-bottom: 40px;
                padding-bottom: 25px;
                border-bottom: 2px solid rgba(212, 175, 55, 0.3);
            }

            .contact-header-mega h3 {
                font-size: 2rem;
                margin-bottom: 15px;
                color: var(--gold);
                font-weight: 700;
            }

            .contact-header-mega p {
                font-size: 1.1rem;
                opacity: 0.9;
                color: rgba(255, 255, 255, 0.8);
            }

            /* Contact Information */
            .contact-info-mega {
                display: flex;
                flex-direction: column;
                gap: 25px;
            }

            .contact-item-mega {
                display: flex;
                align-items: flex-start;
                gap: 20px;
                background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
                backdrop-filter: blur(10px);
                padding: 30px;
                border-radius: 20px;
                transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                border: 1px solid rgba(255, 255, 255, 0.15);
                position: relative;
                overflow: hidden;
                cursor: default;
                text-decoration: none;
                color: inherit;
            }

            .contact-item-mega.clickable {
                cursor: pointer;
                border: 1px solid rgba(212, 175, 55, 0.3);
            }

            .contact-item-mega::before {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent);
                transition: left 0.6s ease;
            }

            .contact-item-mega:hover::before {
                left: 100%;
            }

            .contact-item-mega:hover {
                background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(212, 175, 55, 0.05));
                transform: translateY(-8px);
                box-shadow:
                    0 20px 40px rgba(0, 0, 0, 0.3),
                    0 0 0 1px rgba(212, 175, 55, 0.2),
                    0 0 30px rgba(212, 175, 55, 0.2);
            }

            .contact-item-mega.clickable:hover {
                background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.05));
                border-color: rgba(212, 175, 55, 0.5);
                box-shadow:
                    0 25px 50px rgba(0, 0, 0, 0.4),
                    0 0 0 1px rgba(212, 175, 55, 0.3),
                    0 0 40px rgba(212, 175, 55, 0.3);
                transform: translateY(-10px) scale(1.02);
            }

            .contact-glow {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border-radius: 20px;
                opacity: 0;
                transition: opacity 0.4s ease;
                pointer-events: none;
            }

            .contact-item-mega:hover .contact-glow {
                opacity: 1;
                animation: glow-pulse 2s ease-in-out infinite;
            }

            .contact-item-mega[data-type="phone"] .contact-glow {
                background: radial-gradient(circle at center, rgba(76, 175, 80, 0.2) 0%, transparent 70%);
            }

            .contact-item-mega[data-type="email"] .contact-glow {
                background: radial-gradient(circle at center, rgba(33, 150, 243, 0.2) 0%, transparent 70%);
            }

            .contact-item-mega[data-type="location"] .contact-glow {
                background: radial-gradient(circle at center, rgba(156, 39, 176, 0.2) 0%, transparent 70%);
            }

            .contact-item-mega[data-type="hours"] .contact-glow {
                background: radial-gradient(circle at center, rgba(255, 152, 0, 0.2) 0%, transparent 70%);
            }

            .contact-item-mega[data-type="social"] .contact-glow {
                background: radial-gradient(circle at center, rgba(212, 175, 55, 0.2) 0%, transparent 70%);
            }

            @keyframes glow-pulse {
                0%, 100% {
                    opacity: 0.3;
                    transform: scale(1);
                }
                50% {
                    opacity: 0.6;
                    transform: scale(1.05);
                }
            }

            .click-hint {
                position: absolute;
                top: 15px;
                right: 15px;
                background: rgba(212, 175, 55, 0.9);
                color: #2D1B0D;
                padding: 8px 15px;
                border-radius: 25px;
                font-size: 0.8rem;
                font-weight: 600;
                opacity: 0;
                transform: translateY(-10px);
                transition: all 0.3s ease;
                display: flex;
                align-items: center;
                gap: 8px;
                backdrop-filter: blur(10px);
                z-index: 3;
            }

            .contact-item-mega.clickable:hover .click-hint {
                opacity: 1;
                transform: translateY(0);
            }

            .contact-icon-mega {
                width: 50px;
                height: 50px;
                background: linear-gradient(135deg, var(--gold), #f7ef8a);
                border-radius: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.3rem;
                color: var(--primary-dark);
                transition: all 0.3s ease;
                position: relative;
                z-index: 2;
                flex-shrink: 0;
                margin-top: 5px;
            }

            .contact-item-mega:hover .contact-icon-mega {
                transform: scale(1.2) rotate(5deg);
                box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4);
            }

            .contact-details-mega {
                position: relative;
                z-index: 2;
                flex: 1;
            }

            .contact-details-mega h3 {
                font-size: 1.4rem;
                margin-bottom: 12px;
                transition: all 0.3s ease;
                color: var(--white);
                font-weight: 600;
            }

            .contact-item-mega:hover .contact-details-mega h3 {
                color: var(--gold);
                text-shadow: 0 2px 10px rgba(212, 175, 55, 0.3);
            }

            .contact-details-mega p {
                opacity: 0.9;
                font-size: 1.05rem;
                transition: all 0.3s ease;
                color: rgba(255, 255, 255, 0.8);
                line-height: 1.5;
            }

            .contact-item-mega:hover .contact-details-mega p {
                opacity: 1;
                transform: translateX(5px);
            }

            /* Social Links in Contact */
            .social-links-contact {
                display: flex;
                gap: 12px;
                margin-top: 15px;
            }

            .social-links-contact a {
                width: 40px;
                height: 40px;
                background: rgba(255, 255, 255, 0.1);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                color: var(--white);
                transition: all 0.3s ease;
                border: 1px solid rgba(255, 255, 255, 0.2);
            }

            .social-links-contact a:hover {
                background: var(--gold);
                color: var(--primary-dark);
                transform: translateY(-3px);
                box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4);
            }

            /* Contact Form */
            .contact-form-mega {
                background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
                backdrop-filter: blur(10px);
                padding: 50px 40px;
                border-radius: 25px;
                border: 1px solid rgba(255, 255, 255, 0.2);
                box-shadow:
                    0 20px 40px rgba(0, 0, 0, 0.3),
                    inset 0 1px 0 rgba(255, 255, 255, 0.1);
                position: relative;
                overflow: hidden;
            }

            .contact-form-mega::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 4px;
                background: linear-gradient(90deg, var(--gold), #f7ef8a, var(--gold));
            }

            .form-header-mega {
                text-align: center;
                margin-bottom: 40px;
                padding-bottom: 25px;
                border-bottom: 2px solid rgba(212, 175, 55, 0.3);
            }

            .form-header-mega h3 {
                font-size: 2rem;
                margin-bottom: 15px;
                color: var(--gold);
                font-weight: 700;
            }

            .form-header-mega p {
                font-size: 1.1rem;
                opacity: 0.9;
                color: rgba(255, 255, 255, 0.8);
            }

            .form-row-mega {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 20px;
                margin-bottom: 0;
            }

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

            .form-group-mega label {
                display: block;
                margin-bottom: 10px;
                font-weight: 600;
                font-size: 1rem;
                color: var(--white);
            }

            /* Brown Form Fields with Right-Aligned Icons */
            .input-with-icon, .textarea-with-icon {
                position: relative;
            }

            .input-with-icon i, .textarea-with-icon i {
                position: absolute;
                right: 20px;
                top: 50%;
                transform: translateY(-50%);
                color: var(--gold);
                font-size: 1.1rem;
                z-index: 2;
            }

            .textarea-with-icon i {
                top: 25px;
                transform: none;
            }

            .form-control-mega {
                width: 100%;
                padding: 16px 50px 16px 20px;
                background: rgba(93, 64, 55, 0.8);
                border: 2px solid rgba(139, 69, 19, 0.5);
                border-radius: 12px;
                color: var(--white);
                font-family: 'Poppins', sans-serif;
                transition: all 0.3s ease;
                font-size: 1rem;
            }

            .form-control-mega::placeholder {
                color: rgba(255, 255, 255, 0.6);
            }

            .textarea-with-icon .form-control-mega {
                padding: 16px 50px 16px 20px;
                min-height: 140px;
                resize: vertical;
                line-height: 1.5;
            }

            .form-control-mega:focus {
                outline: none;
                border-color: var(--gold);
                background: rgba(93, 64, 55, 0.9);
                box-shadow:
                    0 0 0 3px rgba(212, 175, 55, 0.3),
                    0 5px 15px rgba(212, 175, 55, 0.2);
                transform: translateY(-2px);
            }

            /* Brown Dropdown Styling */
            select.form-control-mega {
                background: rgba(93, 64, 55, 0.8);
                border: 2px solid rgba(139, 69, 19, 0.5);
                color: var(--white);
                cursor: pointer;
                appearance: none;
                -webkit-appearance: none;
                -moz-appearance: none;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23d4af37' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
                background-repeat: no-repeat;
                background-position: right 20px center;
                background-size: 12px;
                padding-right: 50px;
            }

            select.form-control-mega:focus {
                background: rgba(93, 64, 55, 0.9);
                border-color: var(--gold);
            }

            select.form-control-mega option {
                background: #5d4037;
                color: var(--white);
                padding: 12px;
            }

            /* Checkbox Styling */
            .checkbox-group {
                margin-top: 20px;
            }

            .checkbox-label {
                display: flex;
                align-items: center;
                gap: 12px;
                cursor: pointer;
                font-weight: 500;
                color: rgba(255, 255, 255, 0.9);
                font-size: 0.9rem;
            }

            .checkbox-label input[type="checkbox"] {
                display: none;
            }

            .checkmark {
                width: 20px;
                height: 20px;
                border: 2px solid rgba(255, 255, 255, 0.3);
                border-radius: 4px;
                position: relative;
                transition: all 0.3s ease;
                flex-shrink: 0;
                background: rgba(255, 255, 255, 0.1);
            }

            .checkbox-label input[type="checkbox"]:checked + .checkmark {
                background: var(--gold);
                border-color: var(--gold);
            }

            .checkbox-label input[type="checkbox"]:checked + .checkmark::after {
                content: '✓';
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: var(--primary-dark);
                font-size: 0.8rem;
                font-weight: bold;
            }


            /* Success Message Styles */
            .success-message {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                text-align: center;
                padding: 60px 40px;
                background: linear-gradient(135deg, rgba(93, 64, 55, 0.95), rgba(62, 39, 35, 0.95));
                backdrop-filter: blur(10px);
                border-radius: 25px;
                border: 1px solid rgba(212, 175, 55, 0.3);
                box-shadow:
                    0 20px 40px rgba(0, 0, 0, 0.4),
                    inset 0 1px 0 rgba(255, 255, 255, 0.1);
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                opacity: 0;
                visibility: hidden;
                transform: scale(0.9);
                transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                z-index: 10;
            }

            .success-message.active {
                opacity: 1;
                visibility: visible;
                transform: scale(1);
            }

            .success-icon {
                font-size: 5rem;
                color: var(--gold);
                margin-bottom: 30px;
                animation: bounce 1s ease;
            }

            .success-message h3 {
                font-size: 2.5rem;
                margin-bottom: 20px;
                color: var(--white);
                font-weight: 700;
            }

            .success-message p {
                font-size: 1.2rem;
                margin-bottom: 30px;
                opacity: 0.9;
                color: rgba(255, 255, 255, 0.9);
                line-height: 1.6;
            }

            .btn-light {
                background: rgba(255, 255, 255, 0.15);
                color: var(--white);
                border: 1px solid rgba(255, 255, 255, 0.3);
                padding: 14px 30px;
                border-radius: 30px;
                font-weight: 600;
                cursor: pointer;
                transition: all 0.3s ease;
                text-decoration: none;
                display: inline-flex;
                align-items: center;
                gap: 10px;
            }

            .btn-light:hover {
                background: rgba(255, 255, 255, 0.25);
                transform: translateY(-2px);
                box-shadow: 0 5px 15px rgba(255, 255, 255, 0.2);
            }

            @keyframes bounce {
                0%, 20%, 50%, 80%, 100% {
                    transform: translateY(0);
                }
                40% {
                    transform: translateY(-20px);
                }
                60% {
                    transform: translateY(-10px);
                }
            }

            @keyframes float {
                0%, 100% {
                    transform: translateY(0) rotate(0deg);
                }
                33% {
                    transform: translateY(-20px) rotate(120deg);
                }
                66% {
                    transform: translateY(10px) rotate(240deg);
                }
            }

            /* Field Errors */
            .field-error {
                color: #ff6b6b;
                font-size: 0.8rem;
                margin-top: 5px;
                display: none;
                font-weight: 500;
            }

            .form-control-mega.error {
                border-color: #ff6b6b;
                box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1);
            }

            /* Responsive Design */
            @media (max-width: 1100px) {
                .contact-container-mega {
                    gap: 60px;
                }

                .contact-form-mega {
                    padding: 40px 35px;
                }
            }

            @media (max-width: 968px) {
                .contact-container-mega {
                    grid-template-columns: 1fr;
                    gap: 50px;
                }

                .contact-item-mega {
                    padding: 25px;
                }

                .form-row-mega {
                    grid-template-columns: 1fr;
                    gap: 0;
                }
            }

            @media (max-width: 768px) {
                .contact-mega {
                    padding: 80px 0;
                }

                .contact-form-mega {
                    padding: 35px 30px;
                }

                .success-message {
                    padding: 50px 30px;
                }

                .success-message h3 {
                    font-size: 2rem;
                }

                .contact-item-mega {
                    padding: 20px;
                    gap: 15px;
                }

                .contact-icon-mega {
                    width: 45px;
                    height: 45px;
                    font-size: 1.2rem;
                }

                .contact-details-mega h3 {
                    font-size: 1.2rem;
                }

                .contact-details-mega p {
                    font-size: 1rem;
                }

                .click-hint {
                    font-size: 0.75rem;
                    padding: 6px 12px;
                }
            }

            @media (max-width: 480px) {
                .contact-info-mega {
                    gap: 20px;
                }

                .contact-item-mega {
                    flex-direction: column;
                    text-align: center;
                    gap: 15px;
                }

                .contact-icon-mega {
                    margin-top: 0;
                    align-self: center;
                }

                .contact-form-mega {
                    padding: 30px 25px;
                }

                .success-message {
                    padding: 40px 25px;
                }

                .success-message h3 {
                    font-size: 1.8rem;
                }

                .success-icon {
                    font-size: 4rem;
                }
            }



            /* === FOOTER === */
            footer {
                background: var(--primary-dark);
                color: var(--white);
                padding: 100px 0 30px;
                position: relative;
                overflow: hidden;
            }

            footer::before {
                content: '';
                position: absolute;
                top: -100px;
                right: -100px;
                width: 300px;
                height: 300px;
                background: var(--gradient-gold);
                border-radius: 50%;
                opacity: 0.1;
            }

            .footer-content-mega {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 50px;
                margin-bottom: 70px;
                position: relative;
                z-index: 2;
            }

            .footer-column-mega h3 {
                font-size: 1.5rem;
                margin-bottom: 30px;
                position: relative;
                padding-bottom: 15px;
            }

            .footer-column-mega h3::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 50px;
                height: 3px;
                background: var(--gold);
            }

            .footer-links-mega {
                list-style: none;
            }

            .footer-links-mega li {
                margin-bottom: 15px;
            }

            .footer-links-mega a {
                color: var(--accent-light);
                text-decoration: none;
                transition: var(--transition);
                display: flex;
                align-items: center;
                gap: 10px;
            }

            .footer-links-mega a:hover {
                color: var(--gold);
                padding-left: 10px;
            }

            .footer-links-mega a i {
                font-size: 0.9rem;
            }

            .social-links-mega {
                display: flex;
                gap: 15px;
                margin-top: 25px;
            }

            .social-links-mega a {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 45px;
                height: 45px;
                background: rgba(255, 255, 255, 0.1);
                border-radius: 50%;
                color: var(--white);
                transition: var(--transition);
                font-size: 1.2rem;
            }

            .social-links-mega a:hover {
                background: var(--gold);
                color: var(--primary-dark);
                transform: translateY(-5px);
            }

            .newsletter-form-mega {
                margin-top: 20px;
            }

            .newsletter-form-mega .form-group-mega {
                margin-bottom: 15px;
            }

            .newsletter-message {
                margin-top: 15px;
                padding: 10px;
                border-radius: 5px;
                font-size: 0.9rem;
                text-align: center;
                display: none;
            }

            .newsletter-message.success {
                background: rgba(76, 175, 80, 0.2);
                color: #4CAF50;
                border: 1px solid #4CAF50;
                display: block;
            }

            .newsletter-message.error {
                background: rgba(244, 67, 54, 0.2);
                color: #F44336;
                border: 1px solid #F44336;
                display: block;
            }

            .footer-bottom-mega {
                text-align: center;
                padding-top: 30px;
                border-top: 1px solid rgba(255, 255, 255, 0.1);
                font-size: 1rem;
                color: var(--accent-light);
                position: relative;
                z-index: 2;
            }

            /* Responsive Design */
            @media (max-width: 992px) {
                .footer-content-mega {
                    grid-template-columns: repeat(2, 1fr);
                    gap: 40px;
                }
            }

            @media (max-width: 768px) {
                .footer-content-mega {
                    grid-template-columns: 1fr;
                    gap: 30px;
                }

                footer {
                    padding: 70px 0 30px;
                }
            }

            /* Newsletter Message Styles */
            .newsletter-message {
                display: none;
                padding: 12px 16px;
                margin-top: 15px;
                border-radius: 8px;
                font-weight: 600;
                text-align: center;
                transition: all 0.3s ease;
                border: 1px solid transparent;
            }

            .newsletter-message.success {
                background: rgba(76, 175, 80, 0.1);
                border-color: #4CAF50;
                color: #4CAF50;
            }

            .newsletter-message.error {
                background: rgba(244, 67, 54, 0.1);
                border-color: #f44336;
                color: #f44336;
            }

            .newsletter-message.info {
                background: rgba(33, 150, 243, 0.1);
                border-color: #2196F3;
                color: #2196F3;
            }



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

        @keyframes float {
            0% {
                transform: translateY(0) rotate(0deg);
            }
            50% {
                transform: translateY(-30px) rotate(180deg);
            }
            100% {
                transform: translateY(0) rotate(360deg);
            }
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0) translateX(-50%);
            }
            40% {
                transform: translateY(-20px) translateX(-50%);
            }
            60% {
                transform: translateY(-10px) translateX(-50%);
            }
        }

        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.7);
            }
            70% {
                box-shadow: 0 0 0 15px rgba(212, 175, 55, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(212, 175, 55, 0);
            }
        }

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







        /* === RESPONSIVE STYLES === */
        @media (max-width: 1200px) {
            .hero-title {
                font-size: 4rem;
            }

            .about-content-mega {
                gap: 60px;
            }

            .contact-container-mega {
                gap: 60px;
            }

            .footer-content-mega {
                grid-template-columns: repeat(2, 1fr);
                gap: 40px;
            }
        }

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

            .about-content-mega {
                grid-template-columns: 1fr;
            }

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

            .orbital-items {
                width: 500px;
                height: 500px;
            }

            .orbital-item {
                width: 100px;
                height: 100px;
            }

            .orbital-center {
                width: 150px;
                height: 150px;
            }
        }

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

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

            .section-title h2 {
                font-size: 2.5rem;
            }

            .about-text-mega h2 {
                font-size: 2.2rem;
            }

            .about-stats-mega {
                grid-template-columns: repeat(2, 1fr);
            }

            .events-timeline-mega::before {
                left: 30px;
            }

            .timeline-item-mega {
                width: 100%;
                padding-left: 80px;
                padding-right: 20px;
            }

            .timeline-item-mega:nth-child(even) {
                left: 0;
            }

            .timeline-content-mega::after {
                left: -12px !important;
            }

            .orbital-items {
                width: 400px;
                height: 400px;
            }

            .orbital-item {
                width: 90px;
                height: 90px;
            }

            .orbital-center {
                width: 130px;
                height: 130px;
            }

            .orbital-item i {
                font-size: 1.5rem;
            }

            .orbital-item span {
                font-size: 0.7rem;
            }
        }

        @media (max-width: 576px) {
            .container {
                padding: 0 20px;
            }

            section {
                padding: 80px 0;
            }

            .hero-title {
                font-size: 2.2rem;
            }

            .hero-btns-mega {
                flex-direction: column;
                align-items: center;
            }

            .section-title h2 {
                font-size: 2rem;
            }

            .about-stats-mega {
                grid-template-columns: 1fr;
            }

            .departments-grid-mega,
            .courses-grid-mega,
            .resources-grid-mega,
            .merch-grid-mega {
                grid-template-columns: 1fr;
            }

            .footer-content-mega {
                grid-template-columns: 1fr;
            }

            .orbital-items {
                width: 300px;
                height: 300px;
            }

            .orbital-item {
                width: 70px;
                height: 70px;
            }

            .orbital-center {
                width: 100px;
                height: 100px;
            }

            .orbital-item i {
                font-size: 1.2rem;
                margin-bottom: 5px;
            }

            .orbital-item span {
                font-size: 0.6rem;
            }

            .orbital-center i {
                font-size: 2rem;
            }

            .orbital-center span {
                font-size: 0.8rem;
            }
        }





        /* === SCROLL TO TOP BUTTON === */
        .scroll-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 55px;
            height: 55px;
            background: linear-gradient(135deg, #8B4513 0%, #A0522D 100%);
            color: #FFFFFF;
            border: 2px solid rgba(210, 180, 140, 0.6);
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            box-shadow: 0 5px 25px rgba(139, 69, 19, 0.5);
            transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transform: translateY(20px) scale(0.8);
            backdrop-filter: blur(10px);
        }

        .scroll-to-top.visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1);
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .scroll-to-top:hover {
            transform: translateY(-5px) scale(1.1);
            box-shadow: 0 8px 30px rgba(139, 69, 19, 0.7);
            border-color: rgba(210, 180, 140, 0.9);
            background: linear-gradient(135deg, #A0522D 0%, #8B4513 100%);
            transition: all 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .scroll-to-top:active {
            transform: translateY(-2px) scale(1.05);
            transition: all 0.1s ease;
        }

        /* Golden accent glow effect */
        .scroll-to-top::after {
            content: '';
            position: absolute;
            top: -3px;
            left: -3px;
            right: -3px;
            bottom: -3px;
            background: linear-gradient(135deg, #DAA520, #F4A460, #DEB887, #D2B48C);
            border-radius: 50%;
            z-index: -1;
            opacity: 0;
            transition: opacity 0.2s ease;
        }

        .scroll-to-top:hover::after {
            opacity: 1;
            animation: rotate 2s linear infinite;
        }

        @keyframes rotate {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        /* Fast pulse animation on hover */
        @keyframes pulse-glow-fast {
            0% {
                box-shadow: 0 0 0 0 rgba(218, 165, 32, 0.7);
            }
            70% {
                box-shadow: 0 0 0 8px rgba(218, 165, 32, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(218, 165, 32, 0);
            }
        }

        .scroll-to-top:hover {
            animation: pulse-glow-fast 1s infinite;
        }

        /* Click animation - faster */
        .scroll-to-top:active {
            animation: none;
            transform: translateY(-2px) scale(0.95);
        }

        /* Focus states for accessibility */
        .scroll-to-top:focus {
            outline: 2px solid #DAA520;
            outline-offset: 3px;
        }

        .scroll-to-top:focus:not(:focus-visible) {
            outline: none;
        }

        /* Scroll progress indicator (optional visual feedback) */
        .scroll-to-top::before {
            content: '';
            position: absolute;
            top: -4px;
            left: -4px;
            right: -4px;
            bottom: -4px;
            border: 2px solid transparent;
            border-top-color: #DAA520;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            opacity: 0;
            transition: opacity 0.2s ease;
        }

        .scroll-to-top.scrolling::before {
            opacity: 1;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .scroll-to-top {
                bottom: 20px;
                right: 20px;
                width: 50px;
                height: 50px;
                font-size: 1.2rem;
                transition: all 0.15s ease;
            }

            .scroll-to-top:hover {
                transform: translateY(-3px) scale(1.05);
            }
        }

        @media (max-width: 576px) {
            .scroll-to-top {
                bottom: 15px;
                right: 15px;
                width: 45px;
                height: 45px;
                font-size: 1.1rem;
            }
        }

        /* High contrast mode support */
        @media (prefers-contrast: high) {
            .scroll-to-top {
                border: 3px solid #8B4513;
                background: #8B4513;
            }

            .scroll-to-top:hover {
                background: #A0522D;
                border-color: #DAA520;
            }
        }

        /* Reduced motion support */
        @media (prefers-reduced-motion: reduce) {
            .scroll-to-top {
                transition: all 0.1s ease;
            }

            .scroll-to-top::after,
            .scroll-to-top::before {
                animation: none;
            }

            .scroll-to-top:hover {
                animation: none;
                transform: translateY(-3px);
            }
        }