/* Define Custom CSS Variables based on the palette */
        :root {
            --bg-ivory: #FDFDFD;
            --primary-teal: #7ED6DF;
            --secondary-coral: #FFA88D;
            --text-charcoal: #333333;
            --button-end: #4ABEDC;
        }

        /* Set base font styles */
        body {
            font-family: 'Inter', sans-serif;
            color: var(--text-charcoal);
            background-color: var(--bg-ivory);
            overflow-x: hidden; /* Prevent horizontal scroll */
        }
        h1, h2, h3, h4 {
            font-family: 'Poppins', sans-serif;
            font-weight: 600; /* SemiBold */
        }

        /* Custom Tailwind Configuration (for colors and utility) */
        .gradient-teal-coral {
            background: linear-gradient(135deg, var(--primary-teal), var(--secondary-coral));
        }
        .text-charcoal { color: var(--text-charcoal); }
        .bg-ivory { background-color: var(--bg-ivory); }
        .bg-teal { background-color: var(--primary-teal); }

        /* Button Gradient and Hover Effect */
        .btn-gradient {
            background-image: linear-gradient(to right, var(--primary-teal) 0%, var(--button-end) 100%);
            transition: all 0.3s ease;
        }
        .btn-gradient:hover {
            box-shadow: 0 8px 25px rgba(126, 214, 223, 0.6);
            transform: translateY(-2px) scale(1.02);
        }

        /* Card Hover Effect */
        .card-hover-lift {
            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        }
        .card-hover-lift:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }

        /* Keyframe for subtle floating/pulsing effect */
        @keyframes subtle-float {
            0% { transform: translateY(0) rotate(0deg); opacity: 0.9; }
            50% { transform: translateY(-5px) rotate(1deg); opacity: 1; }
            100% { transform: translateY(0) rotate(0deg); opacity: 0.9; }
        }
        .floating-shape {
            animation: subtle-float 8s ease-in-out infinite;
        }
        .floating-shape-delay {
            animation: subtle-float 10s ease-in-out infinite 1s;
        }

        /* Keyframe for typewriter effect */
        .typewriter h1 {
            overflow: hidden; /* Ensures the content is not revealed until the animation */
            border-right: .15em solid var(--primary-teal); /* The typewriter cursor */
            white-space: nowrap; /* Keeps the content on a single line */
            margin: 0 auto; /* Gives that scrolling effect as the typing happens */
            letter-spacing: .05em; /* Adjust as needed */
            animation: 
                typing 3s 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(--primary-teal); }
        }
        /* Hidden by default for scroll-triggered animation */
        .scroll-hidden {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
        .scroll-visible {
            opacity: 1;
            transform: translateY(0);
        }