:root {
            --sky-blue: #5AC8FA;
            --soft-orange: #FFA770;
            --gray-text: #666666;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(180deg, #F9FAF6 0%, #FFFFFF 100%);
            color: #333;
        }

        h1, h2, h3 {
            font-family: 'Poppins', sans-serif;
        }

        h4, h5, h6 {
            font-family: 'Montserrat', sans-serif;
        }

        .btn-primary {
            background: linear-gradient(90deg, var(--sky-blue), #3b9de1);
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(90, 200, 250, 0.4);
        }

        .btn-primary:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 20px rgba(90, 200, 250, 0.6);
        }

        .btn-secondary {
            border-color: var(--soft-orange);
            color: var(--soft-orange);
            transition: all 0.3s ease;
        }

        .btn-secondary:hover {
            background-color: var(--soft-orange);
            color: white;
            box-shadow: 0 4px 15px rgba(255, 167, 112, 0.4);
        }
        
        /* Glassmorphism */
        .glass-modal {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        /* Animations */
        .fade-in-up {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }

        .fade-in-up.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* Mobile Menu Animation */
        #mobile-menu {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        #mobile-menu.open {
            max-height: 500px; /* Adjust as needed */
        }


        /* Hero Slider */
        .hero-slide {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1.5s ease-in-out;
            background-size: cover;
            background-position: center;
        }
        .hero-slide.active {
            opacity: 1;
        }
        .hero-text {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.8s ease-out 0.5s, transform 0.8s ease-out 0.5s;
        }
        .active .hero-text {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* Typewriter */
        .typewriter-text {
            display: inline-block;
            overflow: hidden;
            white-space: nowrap;
            border-right: .15em solid var(--soft-orange);
            animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
        }

        @keyframes typing {
            from { width: 0 }
            to { width: 100% }
        }
        @keyframes blink-caret {
            from, to { border-color: transparent }
            50% { border-color: var(--soft-orange); }
        }
        
        /* Floating shapes */
        .floating-shape {
            position: absolute;
            border-radius: 50%;
            animation: float 15s ease-in-out infinite;
        }
        @keyframes float {
            0% { transform: translateY(0px) translateX(0px) rotate(0deg); }
            50% { transform: translateY(-30px) translateX(20px) rotate(180deg); }
            100% { transform: translateY(0px) translateX(0px) rotate(360deg); }
        }