/* === 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;
        }

        /* REMOVED THE MOVEMENT TRANSFORM - Only color and glow changes */
        .orbital-item:hover {
            /* Removed: 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;
        }

        /* === MEDIA QUERIES === */

        /* 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 {
                background: linear-gradient(135deg, #d4af37, #f4d03f);
                box-shadow: 0 0 25px rgba(212, 175, 55, 0.8);
                color: #3e2723;
                border-color: #d4af37;
                /* No movement on touch devices either */
            }

            .orbital-item:active {
                /* Keep active state but no movement */
                background: linear-gradient(135deg, #d4af37, #f4d03f);
                box-shadow: 0 0 25px rgba(212, 175, 55, 0.8);
                color: #3e2723;
                border-color: #d4af37;
            }
        }

            /* === 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: rgba(0, 0, 0, 0.85);
                cursor: pointer;
                transition: opacity 0.4s ease;
            }

            .modal-container {
                position: relative;
                width: 95%;
                height: 95%;
                max-width: 1400px;
                background: #ffffff;
                border-radius: 24px;
                box-shadow: 0 32px 64px rgba(0, 0, 0, 0.25);
                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: #1e7e34;
                border: none;
                border-radius: 14px;
                color: #ffffff;
                font-size: 1.5rem;
                cursor: pointer;
                transition: all 0.3s ease;
                z-index: 10011;
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: 0 8px 25px rgba(30, 126, 52, 0.4);
                border: 1px solid rgba(255, 255, 255, 0.15);
                font-weight: 300;
            }

            .modal-close:hover {
                transform: rotate(90deg) scale(1.15);
                background: #28a745;
                box-shadow: 0 12px 35px rgba(40, 167, 69, 0.5);
            }

            .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: #155724;
            }

            .modal-header::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(255, 255, 255, 0.05);
            }

            .modal-header::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 8px;
                background: #28a745;
            }

            .modal-icon {
                width: 80px;
                height: 80px;
                background: rgba(255, 255, 255, 0.2);
                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.3s ease;
                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
            }

            .modal-icon:hover {
                transform: translateY(-5px) scale(1.05);
                background: rgba(255, 255, 255, 0.25);
                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);
            }

            .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: #f8fafc;
                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: #cbd5e1;
                border-radius: 4px;
            }

            .modal-body::-webkit-scrollbar-thumb:hover {
                background: #94a3b8;
            }

            .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 ease;
            }

            .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: #ffffff;
                padding: 32px 36px;
                border-radius: 20px;
                box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
                border: 1px solid #e9ecef;
                transition: all 0.3s ease;
                border-left: 6px solid #1e7e34;
                position: relative;
                overflow: hidden;
            }

            .modal-section:hover {
                box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
                transform: translateY(-5px);
                border-left-color: #28a745;
            }

            .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: #1e7e34;
                background: rgba(30, 126, 52, 0.12);
                width: 46px;
                height: 46px;
                border-radius: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.3s ease;
                border: 1px solid rgba(30, 126, 52, 0.1);
                box-shadow: 0 4px 12px rgba(30, 126, 52, 0.1);
            }

            .modal-section:hover h3 i {
                transform: scale(1.15) rotate(5deg);
                background: rgba(30, 126, 52, 0.18);
                color: #28a745;
            }

            /* === 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: #1e7e34;
                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: #1e7e34;
            }

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

            .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 ease;
                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: #1e7e34;
                box-shadow: 0 0 0 4px rgba(30, 126, 52, 0.15);
                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 WITH PAYSTACK THEME === */
            .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: #1e7e34;
                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: #1e7e34;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.6rem;
                color: #ffffff;
                box-shadow: 0 4px 15px rgba(30, 126, 52, 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 ease;
                position: relative;
                overflow: hidden;
            }

            .payment-method:hover {
                border-color: #1e7e34;
                transform: translateY(-4px);
                box-shadow: 0 8px 25px rgba(30, 126, 52, 0.15);
            }

            .payment-method.active {
                border-color: #1e7e34;
                background: #f0f9f0;
                box-shadow: 0 6px 20px rgba(30, 126, 52, 0.2);
                transform: translateY(-2px);
            }

            .method-icon {
                width: 60px;
                height: 60px;
                background: #1e7e34;
                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(30, 126, 52, 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: #f0f9f0;
                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: #1e7e34;
                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: #1e7e34;
            }

            /* PayStack Requirements Styling */
            .mpesa-requirements {
                background: #e8f5e9;
                border-radius: 8px;
                padding: 15px;
                margin-top: 15px;
                border-left: 4px solid #1e7e34;
            }

            .mpesa-requirements h5 {
                color: #1e7e34;
                font-size: 1rem;
                margin-bottom: 10px;
                display: flex;
                align-items: center;
                gap: 8px;
            }

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

            .mpesa-requirements li {
                padding: 6px 0;
                color: #2c3e50;
                display: flex;
                align-items: center;
                gap: 10px;
                font-size: 0.9rem;
            }

            .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: #1e7e34;
            }

            .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: #1e7e34;
                color: #ffffff;
                border: none;
                border-radius: 12px;
                font-size: 1.12rem;
                font-weight: 700;
                cursor: pointer;
                transition: all 0.3s ease;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 12px;
                margin-top: 22px;
                box-shadow: 0 4px 15px rgba(30, 126, 52, 0.3);
                position: relative;
                overflow: hidden;
            }

            .btn-payment:hover {
                background: #155724;
                transform: translateY(-3px);
                box-shadow: 0 8px 25px rgba(30, 126, 52, 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: #f8f9fa;
                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 ease;
                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.btn-primary {
                background: #1e7e34;
                color: #ffffff;
                border: none;
                box-shadow: 0 4px 15px rgba(30, 126, 52, 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: #155724;
                box-shadow: 0 8px 25px rgba(30, 126, 52, 0.4);
                transform: translateY(-3px);
            }

            .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(30, 126, 52, 0.1);
                border-top: 4px solid #1e7e34;
                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: #1e7e34;
                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: #1e7e34;
            }

            .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: #1e7e34;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                color: white;
                font-size: 3rem;
                box-shadow: 0 8px 25px rgba(30, 126, 52, 0.3);
                animation: scaleIn 0.5s ease;
            }

            @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: #1e7e34;
                background: rgba(30, 126, 52, 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: #f0f9f0;
                border-radius: 12px;
                padding: 25px;
                margin-top: 25px;
                border-left: 4px solid #1e7e34;
                position: relative;
            }

            .welcome-note i {
                color: #1e7e34;
                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;
                }

                .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;
                }

                .membership-details {
                    padding: 15px;
                }

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

            /* Enhanced Scrollbar */
            .modal-body::-webkit-scrollbar-thumb:hover {
                background: #95a5a6;
            }

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

            /* Status Check Styling */
            .status-check {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 12px 20px;
                background: #e8f5e9;
                border-radius: 8px;
                border-left: 4px solid #1e7e34;
                margin: 10px 0;
            }

            .status-check i {
                margin-right: 10px;
            }

            /* Manual Check Button */
            .btn-outline {
                background: transparent;
                border: 2px solid #1e7e34;
                color: #1e7e34;
                padding: 10px 20px;
                border-radius: 8px;
                font-weight: 600;
                cursor: pointer;
                transition: all 0.3s ease;
            }

            .btn-outline:hover {
                background: #1e7e34;
                color: white;
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(30, 126, 52, 0.3);
            }

            /* Bank Details Official */
            .bank-details-official {
                background: #f8f9fa;
                border-left: 4px solid #1e7e34;
                padding: 20px;
                border-radius: 8px;
                margin: 15px 0;
            }

            .bank-details-official h4 {
                color: #2c3e50;
                margin-bottom: 15px;
                display: flex;
                align-items: center;
                gap: 10px;
                font-weight: 600;
            }

            .bank-detail-grid {
                display: grid;
                gap: 12px;
            }

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

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

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

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

            .payment-instructions li:before {
                content: counter(step-counter);
                background: #1e7e34;
                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: #1e7e34;
                background: none;
                width: auto;
                height: auto;
                position: static;
                font-size: 14px;
            }

            /* Enhanced Security Badge */
            .security-badge {
                background: #1e7e34;
                color: white;
                padding: 12px 20px;
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                margin: 15px auto;
                max-width: 400px;
                box-shadow: 0 4px 15px rgba(30, 126, 52, 0.3);
            }

            /* Phone Format Hint */
            .phone-format-hint {
                display: block;
                margin-top: 5px;
                color: #1e7e34;
                font-size: 12px;
                font-style: italic;
                font-weight: 500;
            }

            .phone-format-hint i {
                margin-right: 5px;
            }

            /* Payment Note */
            .payment-note {
                background: #e8f5e9;
                border-left: 4px solid #1e7e34;
                padding: 15px;
                border-radius: 8px;
                margin: 20px 0;
                display: flex;
                align-items: flex-start;
                gap: 15px;
            }

            .payment-note i {
                color: #1e7e34;
                font-size: 1.2rem;
                margin-top: 2px;
            }

            .payment-note p {
                margin: 0;
                color: #2c3e50;
                line-height: 1.5;
            }

            /* Transaction Details */
            .transaction-details {
                background: white;
                border-radius: 10px;
                padding: 20px;
                margin: 20px 0;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
                border: 1px solid #e9ecef;
            }

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

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

            .transaction-item span:first-child {
                color: #5d6d7e;
                font-weight: 500;
            }

            .transaction-item strong {
                color: #2c3e50;
            }

            /* 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;
            }

            /* Enhanced Form Validation */
            .form-group input:valid {
                border-color: #1e7e34;
                box-shadow: 0 0 0 2px rgba(30, 126, 52, 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: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: #f8f9fa;
                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: #1e7e34;
                font-size: 14px;
            }

            /* ===== PHOTO UPLOAD STYLES ===== */
            .photo-upload-area {
                border: 2px dashed #1e7e34;
                border-radius: 12px;
                padding: 40px 20px;
                text-align: center;
                cursor: pointer;
                transition: all 0.3s ease;
                background: #f0f9f0;
                margin-bottom: 15px;
                position: relative;
                overflow: hidden;
            }

            .photo-upload-area:hover {
                border-color: #155724;
                background: #e8f5e9;
                transform: translateY(-2px);
                box-shadow: 0 8px 25px rgba(30, 126, 52, 0.25);
            }

            .photo-upload-area.dragover {
                border-color: #28a745;
                background: #d4edda;
                transform: scale(1.02);
                box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.2);
            }

            .upload-placeholder i {
                font-size: 48px;
                color: #1e7e34;
                margin-bottom: 15px;
                transition: all 0.3s ease;
            }

            .photo-upload-area:hover .upload-placeholder i {
                color: #155724;
                transform: scale(1.1) rotate(5deg);
            }

            .upload-placeholder h4 {
                color: #1e7e34;
                margin-bottom: 8px;
                font-weight: 600;
                font-size: 1.2rem;
            }

            .upload-placeholder p {
                color: #28a745;
                margin-bottom: 5px;
                font-size: 0.95rem;
            }

            .upload-placeholder small {
                color: #6c757d;
                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(0, 0, 0, 0.2);
                transition: all 0.3s ease;
                border: 4px solid #1e7e34;
            }

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

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

            .remove-photo {
                position: absolute;
                top: -8px;
                right: -8px;
                background: #e74c3c;
                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: #c0392b;
                transform: scale(1.15) rotate(90deg);
            }

            .photo-requirements {
                background: #f0f9f0;
                border: 1px solid #d4edda;
                border-radius: 12px;
                padding: 20px;
                margin-top: 15px;
                border-left: 4px solid #1e7e34;
                box-shadow: 0 4px 12px rgba(30, 126, 52, 0.1);
            }

            .photo-requirements h5 {
                color: #1e7e34;
                margin-bottom: 15px;
                display: flex;
                align-items: center;
                gap: 10px;
                font-weight: 600;
                font-size: 1.1rem;
            }

            .photo-requirements h5 i {
                color: #1e7e34;
            }

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

            .photo-requirements li {
                padding: 8px 0;
                color: #2c3e50;
                display: flex;
                align-items: center;
                gap: 12px;
                font-size: 0.9rem;
                border-bottom: 1px solid #d4edda;
                transition: all 0.3s ease;
            }

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

            .photo-requirements li:hover {
                background: rgba(30, 126, 52, 0.1);
                padding-left: 10px;
                border-radius: 6px;
            }

            .photo-requirements li i {
                color: #28a745;
                font-size: 14px;
                min-width: 20px;
            }

            #photoError2 {
                background: #ffeaa7;
                border: 1px solid #f39c12;
                border-radius: 8px;
                padding: 12px 15px;
                margin-top: 10px;
                color: #d35400;
                font-weight: 500;
                display: none;
            }

            #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 {
                    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;
            }

            /* 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: #1e7e34;
            }

            /* 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: #1e7e34;
                border-radius: 3px;
                transition: width 0.3s ease;
                width: 0%;
            }

            /* REMOVED ALL BLUR/GLOW EFFECTS FROM NOTIFICATIONS */
            /* === FIXED CHECKBOX STYLING === */
            .terms-acceptance {
                margin-top: 20px;
                padding-top: 20px;
                border-top: 1px solid #e9ecef;
            }

            .checkbox-container {
                display: flex;
                align-items: flex-start;
                position: relative;
                margin-bottom: 12px;
                cursor: pointer;
                font-size: 0.95rem;
                color: #2c3e50;
                line-height: 1.5;
                user-select: none;
                padding-left: 0;
                gap: 12px;
            }

            .checkbox-container input {
                position: absolute;
                opacity: 0;
                cursor: pointer;
                height: 0;
                width: 0;
            }

            .checkmark {
                position: relative;
                top: 2px;
                height: 22px;
                width: 22px;
                background-color: #eee;
                border-radius: 6px;
                transition: all 0.2s ease;
                flex-shrink: 0;
                border: 2px solid #ddd;
                box-sizing: border-box;
            }

            .checkbox-container:hover input ~ .checkmark {
                background-color: #ddd;
            }

            .checkbox-container input:checked ~ .checkmark {
                background-color: #1e7e34;
                border-color: #1e7e34;
            }

            .checkmark:after {
                content: "";
                position: absolute;
                display: none;
                left: 7px;
                top: 3px;
                width: 5px;
                height: 10px;
                border: solid white;
                border-width: 0 2px 2px 0;
                transform: rotate(45deg);
            }

            .checkbox-container input:checked ~ .checkmark:after {
                display: block;
            }

            .checkbox-container a {
                color: #1e7e34;
                text-decoration: none;
                font-weight: 600;
                display: inline;
            }

            .checkbox-container a:hover {
                text-decoration: underline;
            }

            .checkbox-text {
                flex: 1;
                margin-top: 1px;
            }




            /* === 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 - EXACT 2x2 Layout */
                    .department-cards-grid {
                        display: grid;
                        grid-template-columns: repeat(2, 1fr);
                        grid-template-rows: repeat(2, auto);
                        gap: 20px;
                        margin: 40px 0;
                        max-width: 900px;
                        margin-left: auto;
                        margin-right: auto;
                    }

                    /* Don't change ANYTHING below this line */
                    .department-card-mega {
                        background: rgba(255, 255, 255, 0.1);
                        backdrop-filter: blur(10px);
                        border-radius: 16px;
                        padding: 25px 20px;
                        text-align: center;
                        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
                        border: 1px solid rgba(255, 255, 255, 0.2);
                        position: relative;
                        overflow: hidden;
                        cursor: pointer;
                        height: 100%;
                    }

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

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

                    .civil-department:hover {
                        transform: translateY(-8px) scale(1.02);
                        box-shadow: 0 15px 35px 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(-8px) scale(1.02);
                        box-shadow: 0 15px 35px 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(-8px) scale(1.02);
                        box-shadow: 0 15px 35px 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(-8px) scale(1.02);
                        box-shadow: 0 15px 35px rgba(39, 174, 96, 0.3);
                        border-color: rgba(39, 174, 96, 0.4);
                    }

                    .department-icon-mega {
                        font-size: 2.5rem;
                        margin-bottom: 15px;
                        display: inline-block;
                        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                        filter: drop-shadow(0 4px 10px 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.15) rotate(5deg);
                    }

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

                    .department-card-mega p {
                        margin-bottom: 20px;
                        opacity: 0.9;
                        font-size: 0.95rem;
                        line-height: 1.5;
                        color: #e2e8f0;
                    }

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

                    .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(-2px);
                        box-shadow: 0 6px 18px rgba(230, 180, 0, 0.4);
                    }

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

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

                    /* Mobile responsiveness */
                    @media (max-width: 768px) {
                        .department-cards-grid {
                            grid-template-columns: 1fr;
                            grid-template-rows: auto;
                            max-width: 400px;
                            gap: 15px;
                        }

                        .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;
                    }
                }

                /* ===== CHARTS SECTION - FULLY RESPONSIVE ===== */
                .charts-section {
                    background: linear-gradient(135deg,
                        rgba(62, 39, 35, 0.95) 0%,
                        rgba(94, 66, 50, 0.95) 50%,
                        rgba(139, 106, 68, 0.95) 100%);
                    backdrop-filter: blur(15px);
                    border-radius: clamp(16px, 2vw, 20px);
                    padding: clamp(30px, 4vw, 40px) clamp(25px, 3vw, 35px);
                    margin: clamp(40px, 5vw, 60px) auto;
                    border: 2px solid rgba(230, 180, 0, 0.25);
                    box-shadow:
                        0 15px 40px rgba(62, 39, 35, 0.5),
                        0 0 0 1px rgba(230, 180, 0, 0.1),
                        inset 0 1px 0 rgba(255, 255, 255, 0.1);
                    position: relative;
                    overflow: hidden;
                    z-index: 2;
                    max-width: min(1200px, 95vw);
                    width: 100%;
                    box-sizing: border-box;
                }

                .charts-section::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background:
                        radial-gradient(circle at 20% 30%, rgba(230, 180, 0, 0.12) 0%, transparent 50%),
                        radial-gradient(circle at 80% 70%, rgba(139, 106, 68, 0.15) 0%, transparent 50%),
                        linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.03) 50%, transparent 70%);
                    z-index: 1;
                }

                .charts-section::after {
                    content: '';
                    position: absolute;
                    top: -2px;
                    left: -2px;
                    right: -2px;
                    bottom: -2px;
                    background: linear-gradient(45deg,
                        transparent 0%,
                        rgba(230, 180, 0, 0.15) 25%,
                        rgba(230, 180, 0, 0.08) 50%,
                        rgba(139, 106, 68, 0.15) 75%,
                        transparent 100%);
                    border-radius: calc(clamp(16px, 2vw, 20px) + 2px);
                    z-index: -1;
                    animation: shimmer 3s ease-in-out infinite;
                }

                @keyframes shimmer {
                    0%, 100% { opacity: 0.2; }
                    50% { opacity: 0.4; }
                }

                /* Charts Title */
                .charts-title {
                    text-align: left;
                    margin-bottom: clamp(20px, 3vw, 30px);
                    position: relative;
                    z-index: 2;
                }

                .charts-title h2 {
                    color: transparent;
                    font-size: clamp(1.8rem, 3vw, 2.4rem);
                    margin-bottom: clamp(10px, 1.5vw, 15px);
                    font-weight: 800;
                    text-transform: uppercase;
                    letter-spacing: 0.5px;
                    background: linear-gradient(90deg,
                        #D4AF37 0%,
                        #FFD700 25%,
                        #F5E6A4 50%,
                        #FFD700 75%,
                        #D4AF37 100%);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    background-clip: text;
                    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
                    position: relative;
                    display: inline-block;
                    line-height: 1.2;
                }

                .charts-title h2::after {
                    content: '';
                    position: absolute;
                    bottom: -8px;
                    left: 0;
                    width: clamp(60px, 8vw, 90px);
                    height: 3px;
                    background: linear-gradient(90deg,
                        transparent 0%,
                        #D4AF37 50%,
                        transparent 100%);
                    border-radius: 1px;
                }

                .charts-title p {
                    color: rgba(255, 255, 255, 0.85);
                    font-size: clamp(0.95rem, 1.5vw, 1.1rem);
                    max-width: min(600px, 90vw);
                    margin: clamp(15px, 2vw, 20px) 0 0;
                    font-weight: 300;
                    line-height: 1.6;
                }

                /* Total Students Badge */
                .total-students-badge {
                    display: inline-flex;
                    align-items: center;
                    gap: clamp(8px, 1vw, 12px);
                    background: linear-gradient(135deg,
                        rgba(212, 175, 55, 0.2) 0%,
                        rgba(139, 106, 68, 0.15) 100%);
                    color: #FFD700;
                    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
                    font-weight: 600;
                    padding: clamp(10px, 1.5vw, 14px) clamp(20px, 2.5vw, 30px);
                    border-radius: clamp(30px, 4vw, 40px);
                    margin-top: clamp(15px, 2vw, 25px);
                    border: 1px solid rgba(212, 175, 55, 0.3);
                    box-shadow:
                        0 8px 25px rgba(212, 175, 55, 0.15),
                        inset 0 1px 0 rgba(255, 255, 255, 0.08);
                    position: relative;
                    overflow: hidden;
                    backdrop-filter: blur(8px);
                    animation: badgeGlow 2s ease-in-out infinite;
                    white-space: nowrap;
                }

                @keyframes badgeGlow {
                    0%, 100% {
                        box-shadow:
                            0 8px 25px rgba(212, 175, 55, 0.15),
                            inset 0 1px 0 rgba(255, 255, 255, 0.08);
                    }
                    50% {
                        box-shadow:
                            0 8px 30px rgba(212, 175, 55, 0.25),
                            0 0 15px rgba(212, 175, 55, 0.15),
                            inset 0 1px 0 rgba(255, 255, 255, 0.08);
                    }
                }

                .total-students-badge::before {
                    content: '👥';
                    font-size: clamp(1.2rem, 1.5vw, 1.4rem);
                }

                .total-students-badge span {
                    color: #ffffff;
                    font-size: clamp(1.4rem, 1.8vw, 1.6rem);
                    font-weight: 800;
                    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
                    background: linear-gradient(90deg, #FFD700, #F5E6A4);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    background-clip: text;
                }

                /* Charts Container */
                .charts-container {
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
                    gap: clamp(25px, 3vw, 40px);
                    position: relative;
                    z-index: 2;
                    margin-bottom: clamp(35px, 4vw, 50px);
                }

                /* Individual Chart Boxes */
                .chart-box {
                    background: linear-gradient(145deg,
                        rgba(50, 35, 30, 0.9) 0%,
                        rgba(62, 44, 35, 0.9) 100%);
                    border-radius: clamp(14px, 1.5vw, 18px);
                    padding: clamp(20px, 2.5vw, 25px);
                    box-shadow:
                        0 15px 35px rgba(0, 0, 0, 0.3),
                        0 0 0 1px rgba(212, 175, 55, 0.1),
                        inset 0 1px 0 rgba(255, 255, 255, 0.05);
                    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                    border: 1px solid rgba(212, 175, 55, 0.15);
                    position: relative;
                    overflow: hidden;
                    width: 100%;
                    box-sizing: border-box;
                }

                .chart-box:hover {
                    transform: translateY(-6px) scale(1.02);
                    box-shadow:
                        0 20px 50px rgba(0, 0, 0, 0.4),
                        0 0 0 1px rgba(212, 175, 55, 0.15),
                        0 0 20px rgba(212, 175, 55, 0.15),
                        inset 0 1px 0 rgba(255, 255, 255, 0.08);
                    border-color: rgba(212, 175, 55, 0.25);
                }

                .chart-box::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    height: 5px;
                    background: linear-gradient(90deg,
                        #3498db 0%,
                        #e74c3c 25%,
                        #f39c12 50%,
                        #27ae60 75%,
                        #D4AF37 100%);
                    opacity: 0.7;
                }

                /* Chart Header */
                .chart-header {
                    text-align: center;
                    margin-bottom: clamp(18px, 2vw, 25px);
                    position: relative;
                    z-index: 2;
                }

                .chart-header h3 {
                    color: #FFD700;
                    font-size: clamp(1.2rem, 1.8vw, 1.5rem);
                    margin-bottom: clamp(8px, 1vw, 10px);
                    font-weight: 700;
                    letter-spacing: 0.3px;
                    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
                    position: relative;
                    display: inline-block;
                    line-height: 1.3;
                }

                .chart-header h3::after {
                    content: '';
                    position: absolute;
                    bottom: -6px;
                    left: 50%;
                    transform: translateX(-50%);
                    width: clamp(35px, 4vw, 45px);
                    height: 2px;
                    background: linear-gradient(90deg,
                        transparent 0%,
                        #D4AF37 50%,
                        transparent 100%);
                    border-radius: 1px;
                }

                .chart-header p {
                    color: rgba(255, 255, 255, 0.7);
                    font-size: clamp(0.85rem, 1.2vw, 0.95rem);
                    margin: 0;
                    font-weight: 300;
                    line-height: 1.5;
                }

                /* Chart Wrapper - INCREASED SIZE */
                .chart-wrapper {
                    position: relative;
                    height: clamp(240px, 35vh, 320px); /* Increased from 200-280 to 240-320 */
                    min-height: 240px; /* Increased from 200px */
                    width: 100%;
                    margin: 0 auto;
                    background: rgba(30, 20, 15, 0.6);
                    border-radius: clamp(10px, 1.2vw, 12px);
                    padding: clamp(15px, 2vw, 22px); /* Increased padding for more breathing room */
                    box-shadow:
                        inset 0 2px 8px rgba(0, 0, 0, 0.4),
                        0 4px 15px rgba(0, 0, 0, 0.25);
                    border: 1px solid rgba(212, 175, 55, 0.12);
                    backdrop-filter: blur(4px);
                    box-sizing: border-box;
                }

                /* Bar Chart Specific - Even Larger for X-axis Labels */
                .bar-chart-box .chart-wrapper {
                    height: clamp(260px, 38vh, 340px); /* Even larger for bar chart */
                    min-height: 260px;
                    padding: clamp(18px, 2.5vw, 25px) clamp(15px, 2vw, 22px); /* More horizontal padding for x-axis labels */
                }

                /* Adjust for bar chart to prevent label overlap */
                .bar-chart-box .chart-wrapper canvas {
                    padding-right: 10px; /* Extra right padding for axis labels */
                    padding-left: 10px; /* Extra left padding for axis labels */
                }

                .chart-wrapper canvas {
                    width: 100% !important;
                    height: 100% !important;
                    animation: chartAppear 0.8s cubic-bezier(0.4, 0, 0.2, 1);
                    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.2));
                }

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

                /* Chart Legends */
                .chart-legend {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    gap: clamp(8px, 1.2vw, 12px);
                    margin-top: clamp(18px, 2vw, 25px);
                    padding-top: clamp(15px, 2vw, 20px);
                    border-top: 1px solid rgba(212, 175, 55, 0.15);
                    position: relative;
                    z-index: 2;
                }

                .chart-legend::before {
                    content: '📊 Legend';
                    position: absolute;
                    top: -10px;
                    left: 50%;
                    transform: translateX(-50%);
                    background: linear-gradient(135deg,
                        rgba(62, 39, 35, 0.95) 0%,
                        rgba(94, 66, 50, 0.95) 100%);
                    color: #FFD700;
                    font-size: clamp(0.75rem, 1vw, 0.8rem);
                    font-weight: 600;
                    padding: clamp(3px, 0.5vw, 4px) clamp(10px, 1.5vw, 15px);
                    border-radius: clamp(12px, 1.5vw, 15px);
                    border: 1px solid rgba(212, 175, 55, 0.25);
                    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
                    white-space: nowrap;
                }

                .legend-item {
                    display: flex;
                    align-items: center;
                    gap: clamp(6px, 0.8vw, 10px);
                    padding: clamp(8px, 1.2vw, 10px) clamp(12px, 1.8vw, 18px);
                    background: linear-gradient(135deg,
                        rgba(50, 35, 30, 0.8) 0%,
                        rgba(62, 44, 35, 0.8) 100%);
                    border-radius: clamp(20px, 2.5vw, 25px);
                    box-shadow:
                        0 4px 15px rgba(0, 0, 0, 0.2),
                        inset 0 1px 0 rgba(255, 255, 255, 0.08);
                    transition: all 0.25s ease;
                    cursor: pointer;
                    border: 1px solid transparent;
                    position: relative;
                    overflow: hidden;
                    flex-shrink: 0;
                }

                .legend-item:hover {
                    transform: translateY(-2px) scale(1.03);
                    box-shadow:
                        0 8px 25px rgba(0, 0, 0, 0.3),
                        0 0 10px currentColor,
                        inset 0 1px 0 rgba(255, 255, 255, 0.08);
                    border-color: currentColor;
                }

                .legend-color {
                    width: clamp(16px, 2vw, 20px);
                    height: clamp(16px, 2vw, 20px);
                    border-radius: 50%;
                    border: 2px solid rgba(255, 255, 255, 0.9);
                    box-shadow:
                        0 2px 6px rgba(0, 0, 0, 0.2),
                        inset 0 1px 0 rgba(255, 255, 255, 0.5);
                    flex-shrink: 0;
                }

                .legend-text {
                    color: #ffffff;
                    font-weight: 600;
                    font-size: clamp(0.75rem, 1.1vw, 0.85rem);
                    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
                    white-space: nowrap;
                }

                .legend-value {
                    color: #FFD700;
                    font-weight: 700;
                    font-size: clamp(0.7rem, 1vw, 0.8rem);
                    margin-left: clamp(4px, 0.6vw, 6px);
                    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
                }

                /* Department Statistics Grid */
                .department-stats {
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
                    gap: clamp(20px, 2.5vw, 25px);
                    position: relative;
                    z-index: 2;
                    margin-top: clamp(20px, 2.5vw, 25px);
                }

                /* Stat Cards - COMPLETELY FIXED: All colors set inline by JavaScript */
                .stat-card {
                    background: linear-gradient(145deg,
                        rgba(50, 35, 30, 0.9) 0%,
                        rgba(62, 44, 35, 0.9) 100%);
                    border-radius: clamp(14px, 1.5vw, 18px);
                    padding: clamp(20px, 2.5vw, 25px) clamp(16px, 2vw, 20px);
                    text-align: center;
                    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                    box-shadow:
                        0 12px 35px rgba(0, 0, 0, 0.25),
                        0 0 0 1px rgba(212, 175, 55, 0.1),
                        inset 0 1px 0 rgba(255, 255, 255, 0.05);
                    position: relative;
                    overflow: hidden;
                    border: 1px solid rgba(212, 175, 55, 0.12);
                    backdrop-filter: blur(8px);
                    box-sizing: border-box;
                }

                .stat-card:hover {
                    transform: translateY(-8px) scale(1.03);
                    box-shadow:
                        0 20px 50px rgba(0, 0, 0, 0.35),
                        0 0 0 1px rgba(212, 175, 55, 0.15),
                        0 0 20px currentColor,
                        inset 0 1px 0 rgba(255, 255, 255, 0.08);
                    border-color: currentColor;
                }

                /* REMOVED the ::before pseudo-element style - it will be set inline by JS */
                .stat-card::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: clamp(4px, 0.6vw, 6px);
                    /* Background color will be set inline by JavaScript */
                    opacity: 0.7;
                }

                .stat-icon {
                    font-size: clamp(2rem, 3vw, 2.5rem);
                    margin-bottom: clamp(12px, 1.8vw, 18px);
                    position: relative;
                    z-index: 2;
                    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.2));
                    transition: all 0.25s ease;
                    /* Color will be set inline by JavaScript */
                }

                .stat-card:hover .stat-icon {
                    transform: scale(1.15) rotate(3deg);
                    filter: drop-shadow(0 3px 12px currentColor);
                }

                /* REMOVED ALL FIXED STAT CARD CLASSES - Everything is set inline now */
                /* .civil-stat .stat-icon { color: #3498db; } */
                /* .mechanical-stat .stat-icon { color: #e74c3c; } */
                /* .electrical-stat .stat-icon { color: #f39c12; } */
                /* .agricultural-stat .stat-icon { color: #27ae60; } */

                .stat-content h4 {
                    color: #ffffff;
                    font-size: clamp(0.9rem, 1.2vw, 1rem);
                    margin-bottom: clamp(10px, 1.5vw, 15px);
                    font-weight: 600;
                    letter-spacing: 0.3px;
                    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
                    line-height: 1.3;
                }

                .stat-number {
                    font-size: clamp(2.2rem, 3.5vw, 2.8rem);
                    font-weight: 900;
                    color: #FFD700;
                    margin: clamp(10px, 1.5vw, 15px) 0;
                    text-shadow:
                        0 2px 4px rgba(0, 0, 0, 0.3),
                        0 0 15px rgba(212, 175, 55, 0.3);
                    line-height: 1;
                    background: linear-gradient(90deg, #FFD700, #F5E6A4);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    background-clip: text;
                    transition: all 0.25s ease;
                }

                .stat-card:hover .stat-number {
                    transform: scale(1.05);
                    text-shadow:
                        0 3px 6px rgba(0, 0, 0, 0.4),
                        0 0 20px rgba(212, 175, 55, 0.4);
                }

                .stat-percentage {
                    display: inline-block;
                    font-size: clamp(0.95rem, 1.3vw, 1.1rem);
                    font-weight: 700;
                    color: #ffffff;
                    padding: clamp(6px, 1vw, 8px) clamp(15px, 2vw, 20px);
                    border-radius: clamp(20px, 2.5vw, 25px);
                    background: linear-gradient(135deg,
                        rgba(62, 39, 35, 0.9) 0%,
                        rgba(94, 66, 50, 0.9) 100%);
                    box-shadow:
                        0 4px 15px rgba(0, 0, 0, 0.2),
                        inset 0 1px 0 rgba(255, 255, 255, 0.08);
                    border: 1px solid rgba(212, 175, 55, 0.25);
                    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
                    transition: all 0.25s ease;
                }

                .stat-card:hover .stat-percentage {
                    transform: scale(1.05);
                    box-shadow:
                        0 6px 20px rgba(0, 0, 0, 0.3),
                        0 0 15px rgba(212, 175, 55, 0.2),
                        inset 0 1px 0 rgba(255, 255, 255, 0.08);
                    border-color: rgba(212, 175, 55, 0.35);
                }

                /* Loading Animation */
                .chart-loading {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    height: clamp(240px, 35vh, 320px); /* Updated to match new chart wrapper height */
                    background: linear-gradient(135deg,
                        rgba(50, 35, 30, 0.9) 0%,
                        rgba(62, 44, 35, 0.9) 100%);
                    border-radius: clamp(10px, 1.2vw, 12px);
                    position: relative;
                    overflow: hidden;
                }

                .loading-spinner {
                    width: clamp(40px, 5vw, 50px);
                    height: clamp(40px, 5vw, 50px);
                    border: 4px solid rgba(212, 175, 55, 0.1);
                    border-top: 4px solid #D4AF37;
                    border-radius: 50%;
                    animation: spin 1s linear infinite;
                    margin-bottom: clamp(15px, 2vw, 20px);
                    box-shadow:
                        0 0 15px rgba(212, 175, 55, 0.2),
                        inset 0 0 15px rgba(212, 175, 55, 0.1);
                    position: relative;
                    z-index: 2;
                }

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

                .chart-loading p {
                    color: #FFD700;
                    font-size: clamp(0.9rem, 1.2vw, 1rem);
                    font-weight: 600;
                    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
                    position: relative;
                    z-index: 2;
                }

                /* Error State */
                .chart-error {
                    text-align: center;
                    padding: clamp(40px, 5vw, 50px) clamp(25px, 3vw, 30px);
                    background: linear-gradient(135deg,
                        rgba(50, 35, 30, 0.9) 0%,
                        rgba(62, 44, 35, 0.9) 100%);
                    border-radius: clamp(10px, 1.2vw, 12px);
                    border: 1px solid rgba(231, 76, 60, 0.3);
                    box-shadow:
                        0 12px 35px rgba(231, 76, 60, 0.15),
                        inset 0 1px 0 rgba(255, 255, 255, 0.05);
                    position: relative;
                    overflow: hidden;
                }

                .chart-error h4 {
                    color: #e74c3c;
                    font-size: clamp(1.2rem, 1.8vw, 1.4rem);
                    margin-bottom: clamp(12px, 1.5vw, 15px);
                    font-weight: 700;
                    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
                    position: relative;
                    z-index: 2;
                }

                .chart-error p {
                    color: rgba(255, 255, 255, 0.8);
                    margin-bottom: clamp(15px, 2vw, 20px);
                    font-size: clamp(0.85rem, 1.2vw, 0.95rem);
                    position: relative;
                    z-index: 2;
                }

                /* Mobile-specific optimizations */
                @media (max-width: 768px) {
                    .charts-title {
                        text-align: center;
                    }

                    .charts-title h2::after {
                        left: 50%;
                        transform: translateX(-50%);
                    }

                    .chart-legend::before {
                        font-size: 0.75rem;
                        padding: 2px 12px;
                    }

                    .legend-item {
                        width: 100%;
                        max-width: 280px;
                        justify-content: center;
                    }

                    /* Larger chart area on mobile to prevent overlap */
                    .chart-wrapper {
                        height: clamp(220px, 40vh, 280px);
                        padding: clamp(12px, 1.8vw, 18px);
                    }

                    .bar-chart-box .chart-wrapper {
                        height: clamp(240px, 42vh, 300px);
                        padding: clamp(15px, 2vw, 20px) clamp(12px, 1.8vw, 18px);
                    }
                }

                @media (max-width: 480px) {
                    .charts-section {
                        margin: 20px auto;
                    }

                    .chart-wrapper {
                        height: clamp(200px, 45vh, 240px);
                    }

                    .bar-chart-box .chart-wrapper {
                        height: clamp(220px, 48vh, 260px);
                    }

                    .legend-text {
                        font-size: 0.8rem;
                    }
                }

                /* Touch device optimizations */
                @media (hover: none) and (pointer: coarse) {
                    .chart-box:hover {
                        transform: none;
                    }

                    .stat-card:hover {
                        transform: none;
                    }

                    .legend-item:hover {
                        transform: none;
                    }
                }

                /* Print styles */
                @media print {
                    .charts-section {
                        box-shadow: none;
                        border: 1px solid #ccc;
                        break-inside: avoid;
                    }

                    .chart-box {
                        box-shadow: none;
                        border: 1px solid #ddd;
                        break-inside: avoid;
                    }

                    .chart-wrapper {
                        height: 250px !important; /* Fixed height for printing */
                    }
                }

            /* === 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;
                min-height: 100vh;
            }

            .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); }
            }

            /* Enhanced Section Title */
            .section-title {
                text-align: center;
                margin-bottom: 60px;
                position: relative;
            }

            .section-title h2 {
                font-size: 3.2rem;
                background: linear-gradient(135deg, #6B3410, #A0522D);
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
                margin-bottom: 15px;
                font-weight: 800;
                letter-spacing: -0.5px;
            }

            .section-title p {
                color: #7a6a5c;
                font-size: 1.3rem;
                max-width: 600px;
                margin: 0 auto;
                line-height: 1.6;
                font-weight: 500;
            }

            /* Enhanced Gallery Filters */
            .gallery-filters {
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                gap: 15px;
                margin-bottom: 60px;
                padding: 0 20px;
            }

            .filter-btn {
                padding: 14px 32px;
                background: rgba(255, 255, 255, 0.95);
                border: 2px solid rgba(139, 69, 19, 0.15);
                color: #6B3410;
                border-radius: 50px;
                font-weight: 700;
                cursor: pointer;
                transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                box-shadow: 0 8px 25px rgba(139, 69, 19, 0.12);
                font-size: 1.05rem;
                letter-spacing: 0.5px;
                backdrop-filter: blur(10px);
            }

            .filter-btn:hover {
                background: #8B4513;
                color: #ffffff;
                transform: translateY(-4px) scale(1.05);
                box-shadow: 0 15px 35px rgba(139, 69, 19, 0.25);
                border-color: #8B4513;
            }

            .filter-btn.active {
                background: linear-gradient(135deg, #8B4513, #CD853F);
                color: #ffffff;
                border-color: transparent;
                box-shadow: 0 12px 35px rgba(139, 69, 19, 0.35);
                transform: translateY(-2px);
            }

            /* Gallery Grid with Aspect Ratio Preservation */
            .gallery-grid-mega {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
                gap: 35px;
                margin-bottom: 60px;
                padding: 0 20px;
            }

            .gallery-item-mega {
                position: relative;
                border-radius: 20px;
                overflow: hidden;
                height: 320px;
                box-shadow: 0 15px 40px rgba(139, 69, 19, 0.15);
                transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                cursor: pointer;
                opacity: 0;
                transform: translateY(30px);
                animation: fadeInUp 0.6s ease forwards;
                border: 1px solid rgba(139, 69, 19, 0.08);
            }

            .gallery-item-mega.visible {
                opacity: 1;
                transform: translateY(0);
            }

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

            /* Smart Image Containment for Portrait Images */
            .gallery-item-mega.portrait {
                height: 420px; /* Taller for portrait images */
            }

            .gallery-item-mega img {
                width: 100%;
                height: 100%;
                object-fit: contain;
                background: linear-gradient(135deg, #2c1810, #3d2418);
                transition: all 0.6s ease;
            }

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

            .gallery-item-mega:hover {
                transform: translateY(-15px) scale(1.03);
                box-shadow: 0 25px 60px rgba(139, 69, 19, 0.25);
                border-color: rgba(210, 105, 30, 0.2);
            }

            /* Enhanced Gallery Overlay */
            .gallery-overlay-mega {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(135deg, rgba(107, 52, 16, 0.95), rgba(160, 82, 45, 0.9));
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                opacity: 0;
                transition: all 0.4s ease;
                padding: 35px 30px;
                text-align: center;
                color: #ffffff;
                backdrop-filter: blur(8px);
            }

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

            .gallery-overlay-mega i {
                font-size: 3.2rem;
                margin-bottom: 25px;
                background: linear-gradient(135deg, #F4A460, #FFDAB9);
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
                transition: all 0.4s ease;
            }

            .gallery-item-mega:hover .gallery-overlay-mega i {
                transform: scale(1.3) rotate(10deg);
            }

            .gallery-overlay-mega h3 {
                font-size: 1.5rem;
                margin-bottom: 15px;
                font-weight: 700;
                line-height: 1.3;
                min-height: 45px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .gallery-overlay-mega p {
                font-size: 1.05rem;
                margin-bottom: 20px;
                opacity: 0.95;
                line-height: 1.6;
                max-height: 75px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
            }

            .photo-date {
                font-size: 0.9rem;
                opacity: 0.9;
                padding: 8px 22px;
                background: rgba(244, 164, 96, 0.25);
                border-radius: 25px;
                border: 2px solid rgba(244, 164, 96, 0.3);
                backdrop-filter: blur(10px);
                margin-top: 10px;
                font-weight: 600;
            }

            /* Enhanced Load More Section */
            .gallery-load-more {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: 60px 0 40px;
                width: 100%;
            }

            #loadMoreBtn {
                padding: 18px 45px;
                font-size: 1.2rem;
                font-weight: 700;
                border-radius: 50px;
                background: linear-gradient(135deg, #8B4513, #CD853F);
                color: #ffffff;
                border: none;
                cursor: pointer;
                transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                box-shadow: 0 12px 40px rgba(139, 69, 19, 0.35);
                position: relative;
                overflow: hidden;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 12px;
                min-width: 220px;
                letter-spacing: 1px;
                text-transform: uppercase;
                border: 2px solid rgba(255, 255, 255, 0.1);
            }

            #loadMoreBtn::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.7s ease;
            }

            #loadMoreBtn:hover::before {
                left: 100%;
            }

            #loadMoreBtn:hover {
                transform: translateY(-6px) scale(1.05);
                box-shadow: 0 20px 50px rgba(139, 69, 19, 0.5);
                background: linear-gradient(135deg, #A0522D, #8B4513);
                border-color: rgba(255, 255, 255, 0.2);
            }

            #loadMoreBtn:active {
                transform: translateY(-3px) scale(1.02);
            }

            #loadMoreBtn.loading {
                pointer-events: none;
                opacity: 0.8;
            }

            #loadMoreBtn.loading i {
                animation: spin 1s linear infinite;
            }

            .photos-count {
                margin-top: 25px;
                color: #6B3410;
                font-weight: 600;
                font-size: 1.1rem;
                text-align: center;
                width: 100%;
                padding: 15px;
                background: rgba(255, 255, 255, 0.7);
                border-radius: 15px;
                max-width: 300px;
                border: 1px solid rgba(139, 69, 19, 0.1);
                backdrop-filter: blur(10px);
            }

            .photos-count span {
                font-weight: 800;
                color: #8B4513;
                font-size: 1.3rem;
            }

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

            /* === ENHANCED MODAL - FULL IMAGE VISIBILITY === */
            .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.4s ease;
                z-index: 10030;
                pointer-events: none;
                padding: 30px;
                box-sizing: border-box;
            }

            .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: linear-gradient(135deg, rgba(107, 52, 16, 0.97), rgba(139, 69, 19, 0.95));
                backdrop-filter: blur(20px);
                cursor: pointer;
            }

            .photo-modal .modal-container {
                position: relative;
                width: 95%;
                height: 95%;
                max-width: 1400px;
                background: #ffffff;
                border-radius: 24px;
                box-shadow: 0 40px 100px rgba(107, 52, 16, 0.5);
                overflow: hidden;
                transform: scale(0.9) translateY(50px);
                transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            }

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

            .photo-modal .modal-content {
                height: 100%;
                display: flex;
                position: relative;
            }

            /* Enhanced Close Button */
            .photo-modal .modal-close {
                position: absolute;
                top: 25px;
                right: 25px;
                width: 60px;
                height: 60px;
                background: linear-gradient(135deg, #8B4513, #CD853F);
                border: none;
                border-radius: 50%;
                color: #ffffff;
                font-size: 2rem;
                cursor: pointer;
                transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                z-index: 10031;
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
                border: 2px solid rgba(244, 164, 96, 0.2);
            }

            .photo-modal .modal-close:hover {
                transform: rotate(90deg) scale(1.15);
                background: linear-gradient(135deg, #A0522D, #F4A460);
                box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
            }

            /* Improved Modal Image Container */
            .modal-image-container {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;
                background: linear-gradient(135deg, #2c1810, #3d2418, #4d301f);
                padding: 30px;
            }

            .modal-image-container img {
                max-width: 100%;
                max-height: 100%;
                object-fit: contain;
                border-radius: 12px;
                box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
                animation: modalImageFadeIn 0.8s ease forwards;
            }

            @keyframes modalImageFadeIn {
                from {
                    opacity: 0;
                    transform: scale(0.95);
                }
                to {
                    opacity: 1;
                    transform: scale(1);
                }
            }

            /* Enhanced Image Info Panel */
            .image-info {
                width: 400px;
                padding: 40px;
                background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f5 100%);
                display: flex;
                flex-direction: column;
                justify-content: center;
                overflow-y: auto;
                border-left: 3px solid;
                border-image: linear-gradient(to bottom, #8B4513, #D2691E) 1;
            }

            .image-info h3 {
                font-size: 2rem;
                color: #5C4033;
                margin-bottom: 20px;
                font-weight: 800;
                line-height: 1.3;
            }

            .image-info p {
                color: #7a6a5c;
                line-height: 1.8;
                margin-bottom: 30px;
                font-size: 1.15rem;
                font-weight: 500;
            }

            .image-meta {
                display: flex;
                flex-direction: column;
                gap: 15px;
                margin-top: auto;
            }

            .image-meta span {
                padding: 12px 25px;
                background: linear-gradient(135deg, #8B4513, #A0522D);
                color: #ffffff;
                border-radius: 25px;
                font-size: 1rem;
                font-weight: 600;
                display: inline-flex;
                align-items: center;
                gap: 10px;
                width: fit-content;
                box-shadow: 0 6px 20px rgba(139, 69, 19, 0.2);
            }

            .image-meta span i {
                font-size: 1rem;
                color: #F4A460;
            }

            /* Enhanced Modal Navigation */
            .modal-navigation {
                position: absolute;
                bottom: 35px;
                left: 50%;
                transform: translateX(-50%);
                display: flex;
                gap: 20px;
                z-index: 10031;
            }

            .nav-btn {
                width: 70px;
                height: 70px;
                background: linear-gradient(135deg, rgba(139, 69, 19, 0.95), rgba(160, 82, 45, 0.95));
                border: none;
                border-radius: 50%;
                color: #ffffff;
                font-size: 1.5rem;
                cursor: pointer;
                transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
                backdrop-filter: blur(10px);
                border: 2px solid rgba(244, 164, 96, 0.2);
            }

            .nav-btn:hover {
                background: linear-gradient(135deg, rgba(160, 82, 45, 0.95), rgba(139, 69, 19, 0.95));
                transform: scale(1.15);
                box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
                border-color: rgba(244, 164, 96, 0.3);
            }

            .nav-btn:disabled {
                opacity: 0.3;
                cursor: not-allowed;
                transform: none;
            }

            /* Image Loading State */
            .modal-image-container.loading {
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .modal-image-container.loading::after {
                content: '';
                width: 60px;
                height: 60px;
                border: 5px solid rgba(244, 164, 96, 0.1);
                border-top: 5px solid #F4A460;
                border-radius: 50%;
                animation: spin 1.2s linear infinite;
            }

            /* Custom Scrollbar for Image Info */
            .image-info::-webkit-scrollbar {
                width: 6px;
            }

            .image-info::-webkit-scrollbar-track {
                background: rgba(139, 69, 19, 0.05);
                border-radius: 3px;
            }

            .image-info::-webkit-scrollbar-thumb {
                background: linear-gradient(to bottom, #8B4513, #D2691E);
                border-radius: 3px;
            }

            .image-info::-webkit-scrollbar-thumb:hover {
                background: linear-gradient(to bottom, #A0522D, #F4A460);
            }

            /* Responsive Design */
            @media (max-width: 1200px) {
                .gallery-grid-mega {
                    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
                }

                .image-info {
                    width: 350px;
                    padding: 35px;
                }
            }

            @media (max-width: 1024px) {
                .gallery-grid-mega {
                    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
                    gap: 25px;
                }

                .photo-modal .modal-content {
                    flex-direction: column;
                }

                .modal-image-container {
                    height: 60%;
                    padding: 20px;
                }

                .modal-image-container img {
                    width: auto;
                    height: auto;
                }

                .image-info {
                    width: 100%;
                    height: 40%;
                    padding: 30px 40px;
                    border-left: none;
                    border-top: 3px solid;
                    border-image: linear-gradient(to right, #8B4513, #D2691E) 1;
                }
            }

            @media (max-width: 768px) {
                .gallery-grid-mega {
                    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
                    gap: 20px;
                }

                .gallery-item-mega {
                    height: 300px;
                }

                .gallery-item-mega.portrait {
                    height: 380px;
                }

                .gallery-filters {
                    gap: 10px;
                }

                .filter-btn {
                    padding: 12px 25px;
                    font-size: 1rem;
                }

                .section-title h2 {
                    font-size: 2.8rem;
                }

                .photo-modal {
                    padding: 20px;
                }

                .photo-modal .modal-container {
                    width: 98%;
                    height: 98%;
                    border-radius: 20px;
                }

                .modal-image-container {
                    padding: 15px;
                }

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

                .image-info h3 {
                    font-size: 1.8rem;
                }

                .modal-navigation {
                    bottom: 25px;
                }

                .nav-btn {
                    width: 60px;
                    height: 60px;
                    font-size: 1.3rem;
                }

                .photo-modal .modal-close {
                    width: 55px;
                    height: 55px;
                    font-size: 1.8rem;
                    top: 20px;
                    right: 20px;
                }
            }

            @media (max-width: 576px) {
                .gallery-grid-mega {
                    grid-template-columns: 1fr;
                    gap: 15px;
                }

                .gallery-item-mega {
                    height: 280px;
                }

                .gallery-item-mega.portrait {
                    height: 350px;
                }

                .gallery-filters {
                    flex-direction: column;
                    align-items: center;
                    gap: 10px;
                }

                .filter-btn {
                    width: 240px;
                }

                .section-title h2 {
                    font-size: 2.5rem;
                }

                .section-title p {
                    font-size: 1.15rem;
                    padding: 0 15px;
                }

                .gallery-overlay-mega {
                    padding: 30px 25px;
                }

                .gallery-overlay-mega h3 {
                    font-size: 1.3rem;
                    min-height: 40px;
                }

                .gallery-overlay-mega p {
                    font-size: 1rem;
                    max-height: 70px;
                    -webkit-line-clamp: 2;
                }

                .image-info {
                    padding: 20px 25px;
                }

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

                .image-info p {
                    font-size: 1.05rem;
                }

                .image-meta span {
                    padding: 10px 20px;
                    font-size: 0.95rem;
                }

                .modal-navigation {
                    bottom: 20px;
                    gap: 15px;
                }

                .nav-btn {
                    width: 55px;
                    height: 55px;
                    font-size: 1.2rem;
                }

                #loadMoreBtn {
                    padding: 16px 35px;
                    font-size: 1.1rem;
                    min-width: 200px;
                }

                .photo-modal .modal-close {
                    width: 50px;
                    height: 50px;
                    font-size: 1.6rem;
                    top: 15px;
                    right: 15px;
                }
            }

            /* Body overflow fix */
            body.modal-open {
                overflow: hidden;
            }

            /* Portrait image class - add this to portrait image items */
            .gallery-item-mega.portrait img {
                object-fit: contain;
                background: linear-gradient(135deg, #2c1810, #3d2418);
            }

            /* Ensure modal is on top of everything */
            .photo-modal,
            .modal-backdrop,
            .modal-container {
                will-change: transform, opacity;
            }


                    /* === 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);
            }
        }