/* Custom Tailwind Configuration */
        :root {
            --color-primary: #A3DFF0;
            --color-accent: #0F1C2B;
            --color-white: #FFFFFF;
            --color-teal-start: #00C6A7;
            --color-teal-end: #00F0FF;
        }

        /* Set up Custom Fonts */
        .font-heading {
            font-family: 'Montserrat', 'Poppins', sans-serif;
        }
        .font-body {
            font-family: 'Inter', 'Lato', sans-serif;
        }

        /* Background and Global Styles */
        body {
            background-color: var(--color-accent);
            color: var(--color-white);
            scroll-behavior: smooth;
        }

        /* Custom Glow and Glassmorphism */
        .glass-card {
            background-color: rgba(255, 255, 255, 0.05); /* Very light white overlay */
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease-in-out;
        }
        .glass-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(163, 223, 240, 0.2);
        }

        /* Button Gradient and Hover */
        .cta-button {
            background: linear-gradient(90deg, var(--color-teal-start), var(--color-teal-end));
            transition: all 0.3s ease-in-out;
            box-shadow: 0 4px 15px rgba(0, 198, 167, 0.4);
        }
        .cta-button:hover {
            box-shadow: 0 8px 25px rgba(0, 240, 255, 0.6);
            transform: scale(1.05);
        }

        /* Hero Section Styling for Floating/Parallax effect */
        .hero-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('https://i.pinimg.com/736x/31/e4/ca/31e4cac616e7cbdd63a9522442627568.jpg') no-repeat center center;
            background-size: cover;
            opacity: 0.1;
            z-index: -1;
            overflow: hidden;
        }
        .cloud-icon {
            position: absolute;
            opacity: 0.2;
            animation: float 20s infinite ease-in-out;
            filter: drop-shadow(0 0 10px var(--color-primary));
        }

        @keyframes float {
            0% { transform: translate(0, 0); }
            50% { transform: translate(10px, -20px); }
            100% { transform: translate(0, 0); }
        }

        /* Scroll Animation (Fade-in and Slide-up) */
        .scroll-animate {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
        .scroll-animate.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Sticky Navbar Glass Effect */
        #navbar.scrolled {
            background-color: rgba(15, 28, 43, 0.95);
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        }

        /* Utility for SVG Icons */
        .icon-svg {
            width: 3rem;
            height: 3rem;
        }