@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

        .gallery-section-bg {
            background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 50%, #cbd5e1 100%);
        }

        .gallery-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        }

        .gallery-content {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.9));
            backdrop-filter: blur(15px);
        }

        .nav-button {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .nav-button:hover {
            background: rgba(255, 255, 255, 1);
            transform: scale(1.1);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        }

        .dot-active {
            background: linear-gradient(135deg, #14b8a6, #0f766e);
            transform: scale(1.3);
        }

        .dot-inactive {
            background: rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(5px);
        }

        .dot-inactive:hover {
            background: rgba(255, 255, 255, 0.8);
            transform: scale(1.1);
        }

        .fade-in {
            opacity: 0;
            animation: fadeInUp 0.8s ease-out forwards;
        }

        .fade-in:nth-child(2) {
            animation-delay: 0.2s;
        }

        .fade-in:nth-child(3) {
            animation-delay: 0.4s;
        }

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

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

        .slide-transition {
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .image-overlay {
            background: linear-gradient(45deg, rgba(20, 184, 166, 0.1), rgba(15, 118, 110, 0.1));
        }

        .title-gradient {
            background: linear-gradient(135deg, #1f2937, #374151, #4b5563);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        body {
            font-family: 'Inter', sans-serif;
        }

        .card-hover {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

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

        .image-overlay {
            background: linear-gradient(135deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
        }

        .glass-effect {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .btn-primary {
            background: linear-gradient(135deg, #14b8a6, #0f766e);
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, #0f766e, #134e4a);
            transform: translateY(-1px);
            box-shadow: 0 8px 25px rgba(20, 184, 166, 0.3);
        }

        .section-bg {
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
        }

        .geometric-shape {
            position: absolute;
            pointer-events: none;
        }

        .triangle {
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-bottom: 26px solid #E0F2FE;
        }

        .circle {
            border-radius: 50%;
        }

        .dots-pattern {
            background-image: radial-gradient(circle, #FEF3C7 2px, transparent 2px);
            background-size: 20px 20px;
        }

        .fade-in {
            animation: fadeIn 0.8s ease-in-out;
        }

        .fade-in-up {
            animation: fadeInUp 0.8s ease-out forwards;
            opacity: 0;
            transform: translateY(30px);
        }

        .fade-in-up.animate {
            opacity: 1;
            transform: translateY(0);
        }

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

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

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

        @keyframes float {

            0%,
            100% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-10px);
            }
        }

        .animate-float {
            animation: float 3s ease-in-out infinite;
        }

        .hover-scale {
            transition: transform 0.3s ease;
        }

        .hover-scale:hover {
            transform: scale(1.05);
        }

        .feature-icon {
            transition: all 0.3s ease;
        }

        .feature-icon:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 229, 204, 0.3);
        }

        .bg-cyan-custom {
            background-color: #00E5CC;
        }

        .hover\:bg-cyan-600:hover {
            background-color: #0891b2;
        }

        .focus\:ring-cyan-custom:focus {
            --tw-ring-color: #00E5CC;
        }

        /* Dark mode styles */
        body.dark {
            background-color: #1a202c;
            color: #e2e8f0;
        }

        body.dark .bg-gray-50 {
            background-color: #2d3748;
        }

        body.dark .bg-white {
            background-color: #2d3748;
        }

        body.dark .text-gray-900 {
            color: #e2e8f0;
        }

        body.dark .text-gray-800 {
            color: #e2e8f0;
        }

        body.dark .text-gray-700 {
            color: #cbd5e0;
        }

        body.dark .text-gray-600 {
            color: #a0aec0;
        }

        body.dark .text-gray-500 {
            color: #a0aec0;
        }

        body.dark .bg-gray-700 {
            background-color: #1f2937;
        }

        body.dark .text-gray-300 {
            color: #d1d5db;
        }

        body.dark .text-gray-400 {
            color: #9ca3af;
        }

        body.dark .bg-gray-600 {
            background-color: #4a5568;
        }

        body.dark .border-gray-200 {
            border-color: #4a5568;
        }

        body.dark .bg-gradient-to-br.from-gray-100.to-gray-200 {
            background-image: linear-gradient(to bottom right, #2d3748, #4a5568);
        }

        body.dark .bg-green-500 {
            background-color: #38a169;
        }

        body.dark .gallery-dot.bg-gray-300 {
            background-color: #4a5568;
        }

        body.dark .gallery-dot.bg-gray-800 {
            background-color: #e2e8f0;
        }

        body.dark .triangle {
            border-bottom-color: #4a5568;
        }

        body.dark .bg-blue-200 {
            background-color: #4a90e2;
        }

        body.dark .bg-pink-200 {
            background-color: #ed64a6;
        }

        body.dark .bg-yellow-200 {
            background-color: #d69e2e;
        }

        body.dark .bg-cyan-100 {
            background-color: #2b6cb0;
        }

        body.dark .dots-pattern {
            background-image: radial-gradient(circle, #d69e2e 2px, transparent 2px);
        }

        .logo-container {
            transition: transform 0.3s ease;
        }

        .logo-container:hover {
            transform: scale(1.05);
        }

        .nav-link {
            position: relative;
            overflow: hidden;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, #059669, #10b981);
            transition: width 0.3s ease;
        }

        .nav-link:hover::after {
            width: 100%;
        }

        .support-btn {
            background: linear-gradient(135deg, #059669, #10b981);
            box-shadow: 0 4px 15px rgba(5, 150, 105, 0.3);
        }

        .support-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(5, 150, 105, 0.4);
        }

        body {
            font-family: 'Cinzel', serif;
        }

        .premium-glow {
            filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.3));
        }

        /* Rotation Animations - Elements rotate on their own center */
        .rotate-slow {
            animation: rotateSlow 20s linear infinite;
            transform-origin: center;
        }

        .rotate-medium {
            animation: rotateMedium 15s linear infinite;
            transform-origin: center;
        }

        .rotate-fast {
            animation: rotateFast 10s linear infinite;
            transform-origin: center;
        }

        .rotate-reverse {
            animation: rotateReverse 25s linear infinite;
            transform-origin: center;
        }

        @keyframes rotateSlow {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        @keyframes rotateMedium {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        @keyframes rotateFast {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        @keyframes rotateReverse {
            from {
                transform: rotate(360deg);
            }

            to {
                transform: rotate(0deg);
            }
        }

        .logo-container:hover .rotate-slow {
            animation-duration: 8s;
        }

        .logo-container:hover .rotate-medium {
            animation-duration: 6s;
        }

        .logo-container:hover .rotate-fast {
            animation-duration: 4s;
        }

        .brand-text {
            background: linear-gradient(135deg, #0C4A3E, #1B5E20, #2E7D32);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }

        .brand-text-gold {
            background: linear-gradient(135deg, #FFD700, #FFA500, #FF8C00);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
        }