/* Custom Tailwind Configuration */
        /* Note: For a real project, this would be in tailwind.config.js */
        :root {
            --dark: #010736;
            --accent: #ff8a00;
        }

        /* 1. Base Styles (Poppins, Antialiasing) */
        * {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        body {
            font-family: "Poppins", sans-serif;
        }

        /* 2. Animated Underline for Desktop Nav */
        .nav-link-underline {
            position: relative;
        }
        .nav-link-underline::after {
            content: "";
            position: absolute;
            bottom: -3px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--accent);
            transition: width 0.35s ease;
        }
        .nav-link-underline:hover::after {
            width: 100%;
        }

        /* ===========================
        ACTIVE LINK STYLES
        =========================== */

        /* Desktop Active Link: Highlighted underline + bold */
        .nav-links a.is-active{
            font-weight: 600; /* Bolder text for active link */
        }
        /* Ensure the active underline is always visible for the desktop link */
        .nav-links a.is-active::after {
            width: 100%;
        }

        /* Mobile Active Link: Highlighted background */
        #mobileDropdown a.is-active {
            background: var(--accent); /* Solid orange background */
            color: #fff; /* White text */
            font-weight: 600;
        }

        /* 3. Continuous Tilt Animation for Hero Mockup */
        @keyframes tiltLoop {
            0% { transform: translateY(0) scale(1); }
            30% { transform: translateY(-6px) scale(1.015); }
            60% { transform: translateY(0) scale(1); }
            85% { transform: translateY(4px) scale(0.995); }
            100% { transform: translateY(0) scale(1); }
        }
        .hero-mockup-animate {
            animation: tiltLoop 6s ease-in-out infinite;
            transform-origin: center;
        }
        
        /* Custom Class for Carousel Card Scrolling - Ensures only one card is hidden/shown at a time */
        .project-card.is-hidden {
            display: none !important;
        }

        /* 4. Typography/Color Configuration (to match original) */
        .text-dark { color: var(--dark); }
        .bg-accent-light { background: rgba(255,136,0,0.15); }
        
 /* ===========================
    CONTACT ILLUSTRATION HOVER EFFECT
   =========================== */
.contact-illustration {
    /* Set transition properties for the effect */
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.3s ease-in-out;
    transform-origin: center;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.contact-illustration:hover {
    /* Lift and subtle rotation (3D effect) */
    transform: translateY(-8px) rotateZ(-1deg) scale(1.02);
    /* Add a slight accent glow */
    filter: drop-shadow(0 10px 20px rgba(255, 138, 0, 0.4)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* ===========================
    CONTACT FORM SLEEK CARD STYLE (White Glow Fix)
   =========================== */
.contact-form-sleek-shadow {
    /* MODIFIED: Using no offset (0 0) to create a bright, ethereal glow against the dark background */
    box-shadow: 0 0 50px rgba(255, 255, 255, 0.15), 
                0 0 10px rgba(255, 255, 255, 0.1); 
}

.contact-form-sleek-shadow:hover {
    /* Enhanced white glow on hover */
    box-shadow: 0 0 65px rgba(255, 255, 255, 0.25), 
                0 0 15px rgba(255, 255, 255, 0.15);
}