/* General styling for the eco-tech theme */
        body {
            background-color: #F9FAF6;
            color: #333333;
            scroll-behavior: smooth;
        }

        /* Custom scrollbar for aesthetics */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-thumb { background: #FF914D; border-radius: 4px; }
        ::-webkit-scrollbar-track { background: #F9FAF6; }

.typewriter h1 {
    display: inline-block;
    overflow: hidden; /* Hide text until typed */
    border-right: .15em solid #FFD23F; /* Cursor */
    white-space: nowrap;
    letter-spacing: .05em;
    animation: typing 4s steps(40, end) forwards, blink-caret .75s step-end infinite;
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink-caret {
    0%, 100% { border-color: transparent; }
    50% { border-color: #FFD23F; }
}

/* Scroll Reveal */
.scroll-reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease-out;
}

.scroll-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
        /* Sun ray background for hero */
        .hero-background {
            background-image: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.4)), url('https://i.pinimg.com/736x/46/3c/47/463c474f2e497e65205e7bcb155d1abb.jpg');
            background-size: cover;
            background-position: center;
            position: relative;
            overflow: hidden;
        }
        .hero-background::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at 10% 10%, rgba(255, 210, 63, 0.3) 0%, transparent 40%),
                        radial-gradient(circle at 90% 80%, rgba(255, 145, 77, 0.2) 0%, transparent 50%);
            animation: sun-pulse 10s infinite;
        }

        /* Scroll reveal class */
        .scroll-reveal {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
        .scroll-reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Gradient button style */
        .btn-gradient {
            background-image: linear-gradient(to right, #FFD23F 0%, #FF914D 100%);
            transition: all 0.3s ease;
        }
        .btn-gradient:hover {
            box-shadow: 0 4px 15px rgba(255, 145, 77, 0.6);
            transform: translateY(-2px);
        }