:root {
                --primary: #ffb03b;
                --primary-dark: #ffb03be5;
                --primary-light: #818cf8;
                --accent: #f43f5e;
                --accent-light: #fb7185;
                --dark: #0a0a0a;
                --dark-2: #1a1a1a;
                --dark-3: #2a2a2a;
                --light: #ffffff;
                --light-2: #f8f9fa;
                --light-3: #e9ecef;
                --gray: #64748b;
                --gray-light: #94a3b8;
                --success: #10b981;
                --warning: #f59e0b;
            }

            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            html {
                scroll-behavior: smooth;
            }

            body {
                font-family: 'Sora', sans-serif;
                color: var(--dark);
                line-height: 1.7;
                overflow-x: hidden;
                background: var(--light);
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }

            body[lang="ar"] {
                font-family: 'Tajawal', 'Cairo', 'Sora', sans-serif;
                direction: rtl;
            }

            /* Professional Loading Animation */
            body::before {
                content: '';
                position: fixed;
                display: none;
                top: 0;
                left: 0;
                width: 100%;
                height: 3px;
                background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
                transform: scaleX(0);
                transform-origin: left;
                z-index: 9999;
                animation: pageLoad 2s ease-out forwards;
            }

            @keyframes pageLoad {
                to {
                    transform: scaleX(1);
                }
            }

            body.dark-mode {
                background: var(--dark);
                color: var(--light-2);
            }

            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
                font-family: 'Space Grotesk', sans-serif;
                font-weight: 700;
                line-height: 1.2;
                letter-spacing: -0.02em;
            }

            body[lang="ar"] h1,
            body[lang="ar"] h2,
            body[lang="ar"] h3,
            body[lang="ar"] h4,
            body[lang="ar"] h5,
            body[lang="ar"] h6 {
                font-family: 'Cairo', 'Tajawal', 'Space Grotesk', sans-serif;
                font-weight: 600;
                letter-spacing: 0;
            }

            /* ==================== HEADER ==================== */
            #header {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                z-index: 1000;
                background: rgba(255, 255, 255, 0.8);
                backdrop-filter: blur(20px) saturate(180%);
                border-bottom: 1px solid rgba(0, 0, 0, 0.05);
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                padding: 0;
            }

            body.dark-mode #header {
                background: rgb(142 142 142 / 45%);
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            }

            #header.header-scrolled {
                box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
            }

            body.dark-mode #header.header-scrolled {
                box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
            }

            .container-xl {
                max-width: 1320px;
            }

            .navbar-brand img {
                filter: brightness(0) invert(1);
                transition: all 0.3s ease;
            }

            body.dark-mode .navbar-brand img {
                filter: brightness(1) invert(0);
            }

            .navbar-toggler {
                border: none;
                padding: 0.5rem;
                background: rgba(255, 255, 255, 0.1);
                border-radius: 8px;
                backdrop-filter: blur(10px);
            }

            .navbar-toggler:focus {
                box-shadow: none;
            }

            .navbar-toggler-icon {
                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
            }

            .nav-link {
                font-size: 0.875rem !important;
                font-weight: 500 !important;
                color: var(--light-2) !important;
                padding: 0.75rem 1rem !important;
                border-radius: 8px !important;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
                position: relative;
                letter-spacing: 0.01em;
            }

            body.dark-mode .nav-link {
                color: var(--light-2) !important;
            }

            .nav-link::before {
                content: '';
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%) scaleX(0);
                width: 80%;
                height: 2px;
                background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .nav-link:hover::before,
            .nav-link.active::before {
                transform: translateX(-50%) scaleX(1);
            }

            .nav-link:hover,
            .nav-link.active {
                color: var(--primary) !important;
                transform: translateY(-2px);
            }

            @media (max-width: 991px) {
                .navbar-collapse {
                    background: rgba(255, 255, 255, 0.95);
                    backdrop-filter: blur(20px);
                    border-radius: 16px;
                    margin-top: 1rem;
                    padding: 1.5rem;
                    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
                }

                body.dark-mode .navbar-collapse {
                    background: rgba(10, 10, 10, 0.95);
                    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
                }

                .nav-link {
                    color: var(--dark) !important;
                    padding: 1rem !important;
                    border-radius: 12px !important;
                    margin: 0.25rem 0 !important;
                }

                body.dark-mode .nav-link {
                    color: var(--light-2) !important;
                }

                .nav-link:hover {
                    background: rgba(99, 102, 241, 0.1) !important;
                    transform: translateX(8px) !important;
                }
            }

            /* ==================== HERO ==================== */
            #hero {
                width: 100%;
                height: 100vh;
                position: relative;
                overflow: hidden;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            #hero::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: linear-gradient(135deg, rgba(99, 102, 241, 0.6) 0%, rgba(244, 63, 94, 0.6) 100%);
                z-index: 2;
                mix-blend-mode: multiply;
                pointer-events: none;
            }

            body.dark-mode #hero::before {
                background: linear-gradient(135deg, rgba(99, 102, 241, 0.4) 0%, rgba(244, 63, 94, 0.4) 100%);
            }

            #myVideo {
                position: absolute;
                top: 50%;
                left: 50%;
                min-width: 100%;
                min-height: 100%;
                width: auto;
                height: auto;
                transform: translate(-50%, -50%);
                z-index: -1;
                object-fit: cover;
                filter: brightness(0.9);
            }

            .hero-container,
            #heroCarousel,
            .carousel-inner,
            .carousel-item {
                width: 100%;
                height: 100%;
            }

            /* ==================== ABOUT ==================== */
            .about {
                padding: 120px 0;
                background: var(--light);
                position: relative;
                overflow: hidden;
            }

            body.dark-mode .about {
                background: var(--dark);
            }

            .about::before {
                content: '';
                position: absolute;
                top: -50%;
                right: -10%;
                width: 500px;
                height: 500px;
                background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
                border-radius: 50%;
                pointer-events: none;
                animation: float 20s ease-in-out infinite;
            }

            .about::after {
                content: '';
                position: absolute;
                bottom: -30%;
                left: -5%;
                width: 400px;
                height: 400px;
                background: radial-gradient(circle, rgba(244, 63, 94, 0.08) 0%, transparent 70%);
                border-radius: 50%;
                pointer-events: none;
                animation: float 15s ease-in-out infinite reverse;
            }

            @keyframes float {

                0%,
                100% {
                    transform: translate(0, 0) rotate(0deg);
                }

                33% {
                    transform: translate(30px, -30px) rotate(120deg);
                }

                66% {
                    transform: translate(-20px, 20px) rotate(240deg);
                }
            }

            .about .video-box {
                border-radius: 24px;
                overflow: hidden;
                box-shadow:
                    0 0 0 1px rgba(0, 0, 0, 0.05),
                    0 20px 60px rgba(0, 0, 0, 0.15),
                    0 40px 100px rgba(0, 0, 0, 0.1);
                background-size: cover;
                background-position: center;
                min-height: 600px;
                position: relative;
                transform: perspective(1000px) rotateY(-2deg);
                transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .about .video-box::before {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(244, 63, 94, 0.05) 100%);
                opacity: 0;
                transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
                z-index: 1;
            }

            .about .video-box:hover {
                transform: perspective(1000px) rotateY(0deg) translateY(-4px);
                box-shadow:
                    0 0 0 1px rgba(0, 0, 0, 0.05),
                    0 25px 70px rgba(0, 0, 0, 0.18),
                    0 50px 120px rgba(0, 0, 0, 0.12);
            }

            .about .video-box:hover::before {
                opacity: 1;
            }

            body.dark-mode .about .video-box {
                box-shadow:
                    0 0 0 1px rgba(255, 255, 255, 0.1),
                    0 20px 60px rgba(0, 0, 0, 0.4),
                    0 40px 100px rgba(0, 0, 0, 0.3);
            }

            .about .content {
                padding: 4rem 0 4rem 4rem;
            }

            .about .content h3 {
                font-size: 3.5rem;
                margin-bottom: 2rem;
                background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                line-height: 1.1;
            }

            .about .content p {
                font-size: 1.125rem;
                color: var(--gray);
                line-height: 1.8;
                font-weight: 400;
            }

            body.dark-mode .about .content p {
                color: var(--gray-light);
                text-align: justify;
            }

            /* ==================== WHY US ==================== */
            .why-us {
                padding: 120px 0;
                background: linear-gradient(180deg, var(--light) 0%, var(--light-2) 100%);
                position: relative;
            }

            body.dark-mode .why-us {
                background: linear-gradient(180deg, var(--dark) 0%, var(--dark-2) 100%);
            }

            .section-title {
                text-align: center;
                /* margin-bottom: 5rem; */
            }

            .section-title h2 {
                font-size: 3.5rem;
                margin-bottom: 1.5rem;
                position: relative;
                display: inline-block;
            }

            .section-title h2 span {
                background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                position: relative;
                display: inline-block;
            }

            .section-title h2 span::after {
                content: '';
                position: absolute;
                left: 0;
                right: 0;
                bottom: -8px;
                height: 3px;
                background: linear-gradient(90deg, transparent 0%, var(--primary) 20%, var(--accent) 80%, transparent 100%);
                border-radius: 2px;
                animation: shimmer 3s ease-in-out infinite;
            }

            @keyframes shimmer {

                0%,
                100% {
                    opacity: 0.3;
                    transform: scaleX(0.8);
                }

                50% {
                    opacity: 1;
                    transform: scaleX(1);
                }
            }

            .why-us .box {
                background: var(--light);
                padding: 3rem 2.5rem;
                border-radius: 24px;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                position: relative;
                overflow: hidden;
                height: 100%;
                border: 1px solid rgba(0, 0, 0, 0.05);
            }

            body.dark-mode .why-us .box {
                background: var(--dark-2);
                border: 1px solid rgba(255, 255, 255, 0.1);
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            }

            .why-us .box::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 5px;
                background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
                transform: scaleX(0);
                transform-origin: left;
                transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .why-us .box:hover::before {
                transform: scaleX(1);
            }

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

            body.dark-mode .why-us .box:hover {
                box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
            }

            .why-us .box span {
                font-size: 4rem;
                font-weight: 800;
                background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                display: block;
                margin-bottom: 1.5rem;
                font-family: 'Space Grotesk', sans-serif;
                position: relative;
            }

            .why-us .box span::before {
                content: attr(data-text);
                position: absolute;
                top: 0;
                left: 0;
                background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(244, 63, 94, 0.2) 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                filter: blur(10px);
                opacity: 0;
                transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .why-us .box:hover span::before {
                opacity: 1;
            }

            .why-us .box h4 {
                font-size: 1.5rem;
                margin-bottom: 1rem;
                color: var(--dark);
                font-weight: 600;
            }

            body.dark-mode .why-us .box h4 {
                color: var(--light);
            }

            /* ==================== SPECIALS ==================== */
            .specials {
                padding: 120px 0;
                background: var(--light);
                position: relative;
            }

            body.dark-mode .specials {
                background: var(--dark);
            }

            .specials .nav-tabs {
                border: none;
                gap: 1rem;
            }

            .specials .nav-link {
                border: 2px solid transparent;
                border-radius: 16px;
                padding: 1.5rem 2rem;
                margin-bottom: 0;
                font-weight: 600;
                font-size: 1rem;
                color: var(--dark);
                background: var(--light-2);
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                text-align: left;
                position: relative;
                overflow: hidden;
            }

            body.dark-mode .specials .nav-link {
                background: var(--dark-2);
                color: var(--light-2);
                border-color: rgba(255, 255, 255, 0.1);
            }

            .specials .nav-link::before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                width: 4px;
                background: linear-gradient(180deg, var(--primary) 0%, var(--accent) 100%);
                transform: scaleY(0);
                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .specials .nav-link:hover::before,
            .specials .nav-link.active::before {
                transform: scaleY(1);
            }

            .specials .nav-link:hover {
                background: rgba(99, 102, 241, 0.05);
                border-color: var(--primary);
                transform: translateX(4px);
            }

            .specials .nav-link.active {
                background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
                color: var(--light);
                border-color: transparent;
                box-shadow: 0 8px 30px rgba(99, 102, 241, 0.3);
            }

            body.dark-mode .specials .nav-link.active {
                box-shadow: 1px -1px 30px rgb(255 176 59 / 27%);
            }

            .specials .tab-content {
                background: var(--light-2);
                padding: 4rem;
                border-radius: 24px;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
                border: 1px solid rgba(0, 0, 0, 0.05);
            }

            body.dark-mode .specials .tab-content {
                background: var(--dark-2);
                border: 1px solid rgba(255, 255, 255, 0.1);
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            }

            .specials .details h3 {
                font-size: 1.75rem;
                margin-bottom: 1.5rem;
                color: var(--dark);
                font-weight: 700;
            }

            body.dark-mode .specials .details h3 {
                color: var(--light);
                text-align: justify;
                font-size: 20px;
            }

            .specials .details p {
                font-size: 1.125rem;
                color: var(--gray);
                line-height: 1.8;
            }

            body.dark-mode .specials .details p {
                color: var(--gray-light);
                text-align: justify;
                font-size: 14px;
            }

            .specials .tab-pane img {
                border-radius: 20px;
                box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                border: 1px solid rgba(0, 0, 0, 0.05);
            }

            body.dark-mode .specials .tab-pane img {
                border: 1px solid rgba(255, 255, 255, 0.1);
                box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
                margin-bottom: 30px;
            }

            .specials .tab-pane img:hover {
                transform: scale(1.02) translateY(-4px);
                box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
            }

            /* ==================== GALLERY ==================== */
            .gallery {
                padding: 120px 0;
                background: linear-gradient(180deg, var(--light-2) 0%, var(--light) 100%);
            }

            body.dark-mode .gallery {
                background: linear-gradient(180deg, var(--dark-2) 0%, var(--dark) 100%);
            }

            .img_s3 {
                display: inline-block;
                margin: 0;
                padding: 0 !important;
                opacity: 0.5;
                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                filter: grayscale(100%);
                cursor: pointer;
                border-radius: 16px;
                background: transparent;
            }

            .img_s3:hover,
            .img_s3.active {
                opacity: 1;
                filter: grayscale(0%);
                transform: scale(1.15) translateY(-4px);
                background: rgba(99, 102, 241, 0.05);
            }

            .img_s3.active {
                /* box-shadow: 0 8px 25px rgba(99, 102, 241, 0.2); */
            }

            .gallery-item {
                overflow: hidden;
                border-radius: 20px;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                position: relative;
                margin-bottom: 1.5rem;
                border: 1px solid rgba(0, 0, 0, 0.05);
            }

            body.dark-mode .gallery-item {
                border: 1px solid rgba(255, 255, 255, 0.1);
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            }

            .gallery-item::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: linear-gradient(135deg, rgba(99, 102, 241, 0.9) 0%, rgba(244, 63, 94, 0.9) 100%);
                opacity: 0;
                transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                z-index: 1;
            }

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

            .gallery-item:hover {
                transform: translateY(-8px);
                box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
            }

            body.dark-mode .gallery-item:hover {
                box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
            }

            .gallery-item img {
                width: 100%;
                height: 300px;
                object-fit: cover;
                transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            }

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

            .btn-outline-warning {
                border: 2px solid var(--warning);
                color: var(--warning);
                padding: 1rem 3rem;
                border-radius: 12px;
                font-weight: 600;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                text-transform: uppercase;
                letter-spacing: 0.05em;
                font-size: 0.875rem;
                background: transparent;
            }

            .btn-outline-warning:hover {
                background: var(--warning);
                color: var(--light);
                transform: translateY(-2px);
                box-shadow: 0 8px 25px rgba(245, 158, 11, 0.3);
            }

            /* ==================== CONTACT ==================== */
            .contact {
                padding: 120px 0;
                background: var(--light);
                position: relative;
            }

            body.dark-mode .contact {
                background: var(--dark);
            }

            .info-wrap {
                background: var(--light-2);
                padding: 4rem;
                border-radius: 24px;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
                margin-bottom: 4rem;
                border: 1px solid rgba(0, 0, 0, 0.05);
            }

            body.dark-mode .info-wrap {
                background: var(--dark-2);
                border: 1px solid rgba(255, 255, 255, 0.1);
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            }

            .info {
                text-align: center;
            }

            .info i {
                font-size: 2rem;
                color: var(--light);
                margin-bottom: 1.5rem;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 64px;
                height: 64px;
                background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
                border-radius: 16px;
                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                box-shadow: 0px 2px 25px rgb(255 176 59 / 14%);
            }

            .info:hover i {
                transform: translateY(-4px) scale(1.05);
                box-shadow: 0 12px 35px rgba(99, 102, 241, 0.4);
            }

            .info h4 {
                font-size: 1.25rem;
                margin-bottom: 1rem;
                color: var(--dark);
                font-weight: 600;
            }

            body.dark-mode .info h4 {
                color: var(--light);
            }

            .info p {
                color: var(--gray);
                font-size: 1rem;
            }

            body.dark-mode .info p {
                color: var(--gray-light);
            }

            .php-email-form {
                background: var(--light-2);
                padding: 4rem;
                border-radius: 24px;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
                border: 1px solid rgba(0, 0, 0, 0.05);
            }

            body.dark-mode .php-email-form {
                background: var(--dark-2);
                border: 1px solid rgba(255, 255, 255, 0.1);
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            }

            .php-email-form input,
            .php-email-form textarea {
                border: 2px solid rgba(0, 0, 0, 0.1);
                border-radius: 12px;
                padding: 1rem 1.5rem;
                font-size: 1rem;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                background: var(--light);
                font-family: 'Sora', sans-serif;
            }

            body.dark-mode .php-email-form input,
            body.dark-mode .php-email-form textarea {
                background: var(--dark-3);
                border-color: rgba(255, 255, 255, 0.1);
                color: var(--light-2);
            }

            .php-email-form input:focus,
            .php-email-form textarea:focus {
                border-color: var(--primary);
                box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
                outline: none;
            }

            .php-email-form button[type="submit"] {
                background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
                border: none;
                padding: 1rem 3rem;
                border-radius: 12px;
                color: var(--light);
                font-weight: 600;
                font-size: 1rem;
                cursor: pointer;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                text-transform: uppercase;
                letter-spacing: 0.05em;
                box-shadow: 0px 2px 25px rgb(255 176 59 / 14%);
                position: relative;
                overflow: hidden;
            }

            .php-email-form button[type="submit"]::before {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                width: 0;
                height: 0;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.3);
                transform: translate(-50%, -50%);
                transition: width 0.6s ease, height 0.6s ease;
            }

            .php-email-form button[type="submit"]:hover::before {
                width: 300px;
                height: 300px;
            }

            .php-email-form button[type="submit"]:hover {
                transform: translateY(-3px);
                box-shadow: 0 15px 40px rgba(99, 102, 241, 0.5);
            }

            .php-email-form button[type="submit"]:active {
                transform: translateY(-1px);
                box-shadow: 0 10px 30px rgba(99, 102, 241, 0.4);
            }

            /* ==================== FOOTER ==================== */
            #footer {
                background: var(--dark);
                color: var(--light-2);
                padding: 5rem 0 2rem;
                text-align: center;
                position: relative;
            }

            body.dark-mode #footer {
                background: var(--dark-2);
            }

            #footer h3 {
                font-size: 2.5rem;
                margin-bottom: 2rem;
                background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }

            .social-links a {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 48px;
                height: 48px;
                border-radius: 12px;
                background: rgba(255, 255, 255, 0.1);
                color: var(--light);
                margin: 0 0.5rem;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                font-size: 1.25rem;
            }

            .social-links a:hover {
                background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
                transform: translateY(-4px);
                box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
            }

            .copyright,
            .credits {
                margin-top: 2rem;
                font-size: 0.875rem;
                color: var(--gray);
            }

            .credits a {
                color: var(--primary-light);
                text-decoration: none;
                font-weight: 600;
                transition: color 0.3s ease;
            }

            .credits a:hover {
                color: var(--accent-light);
            }

            /* ==================== BACK TO TOP ==================== */
            .back-to-top {
                position: fixed;
                bottom: 2rem;
                right: 2rem;
                width: 48px;
                height: 48px;
                border-radius: 12px;
                background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
                color: var(--light);
                box-shadow: 0px 2px 25px rgb(255 176 59 / 14%);
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                z-index: 999;
                font-size: 1.5rem;
            }

            .back-to-top:hover {
                transform: translateY(-4px);
                box-shadow: 0 12px 35px rgba(99, 102, 241, 0.5);
            }

            /* ==================== ANIMATIONS ==================== */
            @keyframes fadeInUp {
                from {
                    opacity: 0;
                    transform: translateY(40px);
                }

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

            .animate-fade-in-up {
                animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            }

            /* Professional Scroll Reveal Animations */
            .reveal {
                opacity: 0;
                transform: translateY(50px);
                transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .reveal.active {
                opacity: 1;
                transform: translateY(0);
            }

            .reveal-left {
                opacity: 0;
                transform: translateX(-50px);
                transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .reveal-left.active {
                opacity: 1;
                transform: translateX(0);
            }

            .reveal-right {
                opacity: 0;
                transform: translateX(50px);
                transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .reveal-right.active {
                opacity: 1;
                transform: translateX(0);
            }

            .reveal-scale {
                opacity: 0;
                transform: scale(0.9);
                transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .reveal-scale.active {
                opacity: 1;
                transform: scale(1);
            }

            /* Smooth Scroll Progress Bar */
            .scroll-progress {
                position: fixed;
                top: 0;
                left: 0;
                width: 0;
                height: 4px;
                background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
                z-index: 10000;
                transition: width 0.1s ease;
                box-shadow: 0 2px 10px rgba(99, 102, 241, 0.5);
            }

            /* Button Ripple Effect */
            .ripple {
                position: absolute;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.6);
                transform: scale(0);
                animation: ripple-animation 0.6s ease-out;
                pointer-events: none;
            }

            @keyframes ripple-animation {
                to {
                    transform: scale(4);
                    opacity: 0;
                }
            }

            /* Enhanced Cursor */
            button,
            .btn,
            a {
                cursor: pointer;
            }

            /* Improved Focus States */
            *:focus-visible {
                outline: 2px solid var(--primary);
                outline-offset: 2px;
            }



            /* ==================== RESPONSIVE ==================== */
            @media (max-width: 992px) {
                .section-title h2 {
                    /* font-size: 2.5rem; */
                }

                .about .content h3 {
                    font-size: 2.5rem;
                }

                .about .content {
                    padding: 3rem 0 3rem 2rem;
                }

                .about .video-box {
                    transform: none;
                    min-height: 400px;
                    margin-bottom: 2rem;
                }

                .why-us .box {
                    margin-bottom: 1.5rem;
                }

                .specials .nav-tabs {
                    flex-direction: column;
                }

                .info-wrap,
                .php-email-form,
                .specials .tab-content {
                    padding: 2.5rem;
                }
            }

            @media (max-width: 768px) {
                .section-title h2 {
                    /* font-size: 2rem; */
                }

                .about .content h3 {
                    font-size: 2rem;
                }

                .about .content {
                    padding: 1rem;
                }

                .about,
                .why-us,
                .specials,
                .gallery,
                .contact {
                    padding: 80px 0;
                }

                .section-title {
                    /* margin-bottom: 3rem; */
                }
            }