/* Container to hold all particles */
#particle-container {
    position: fixed;
    /* Stays in place when scrolling */
    top: 0;
    left: 0;
    width: 100vw;
    /* Viewport width */
    height: 100vh;
    /* Viewport height */
    pointer-events: none;
    /* Crucial: Allows clicking on elements beneath the particles */
    z-index: 9999;
    /* Ensures it's on top of everything */
}

/* Style for an individual particle */
.particle {
    position: absolute;
    border-radius: 50%;
    /* Makes it a circle */
    opacity: 0.8;
    /* Slightly less opaque initially */
    transform: translate(-50%, -50%) scale(1);
    /* Centers the particle and sets initial scale */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    /* Smoother, longer transition */
    will-change: transform, opacity;
    /* Performance optimization */

    /* NEON GLOW EFFECT */
    /* The background color will be set by JavaScript dynamically */
    box-shadow: 0 0 5px currentColor,
        /* Inner glow */
        0 0 10px currentColor,
        /* Medium glow */
        0 0 20px currentColor;
    /* Outer glow */
}

/* Animation for the particle to fade out and shrink */
.particle.fade-out {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.1);
    /* Shrinks significantly */
}








/* Custom Variables */
:root {
    --dash-primary: #5A67D8;
    /* Indigo/Violet */
    --dash-dark: #1A202C;
    /* Dark grey */
    --dash-light: #F7FAFC;
    /* Off-white */
    --dash-grey-100: #EDF2F7;
    /* Light grey for sections */


    --color-primary: #1a1a2e;
    /* Deep Navy/Black */
    --color-secondary: #e94560;
    /* Rich Cinematic Red/Pink */
    --color-accent: #ffd166;
    /* Bright Gold Accent */
    --color-text: #f4f4f4;
    /* Light Text (White) */
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6);

    --color-primary: #1a1a2e;
    /* Deep Navy/Black - Used for text */
    --color-secondary: #e94560;
    /* Rich Cinematic Red/Pink - Used for accent */
    --color-accent: #ffd166;
    /* Bright Gold Accent - Used for gradient */
    --color-text: #f4f4f4;
    /* Light Text (White) */
    --color-light-bg: #ffffff;
    /* Pure white background for the section */



    --color-bg: #1E1E1E;
    /* Dark Charcoal (Less dark) */
    --color-text: #E0E0E0;
    /* Soft White */
    --color-accent-red: #E03C3C;
    /* Vivid, deep red */
    --color-accent-blue: #00BFFF;
    /* Bright contrasting blue for highlights */
    --color-secondary: #4A4A4A;
    /* Medium Gray for borders */
    --color-light-text: #AAAAAA;
    /* Lighter text for descriptions */
    --color-media-bg: #282828;
    /* Slightly darker than body for contrast */


}

/* General Styles */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--dash-light);
    scroll-behavior: smooth;
    
}

/* 1. Navbar Material Style & Animation */

/* 1. Navbar Material Style & Animation */

:root {
    --dash-primary: #00bcd4;
    /* Brighter Cyan/Teal for Material Pop */
    --dash-dark: #212529;
    /* Standard Bootstrap dark color */
    --dash-background: #121212;
    /* Very dark background for depth */
    --dash-card: #1f1f1f;
    /* Darker card background */
    --dash-text: #e0e0e0;
}

.navbar-material {
   
    /* Deep Material shadow */
    transition: all 0.3s ease-in-out, transform 0.4s ease-out;
}

/* Class to hide the navbar when scrolling down */
.navbar-material.navbar-hidden {
    transform: translateY(-100%);
}

/* LOGO STYLES: Set default dimensions here (160px x 60px) */
#logo-image {
    height: 60px;
    /* Default height */
    width: 160px;
    /* Default width */
    transition: all 0.3s;
}

.nav-link-material {
    color: #e0e0e0 !important;
    padding: 8px 12px;
    margin: 0 4px;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s, border-bottom 0.2s;
    position: relative;
}

.nav-link-material:hover {
    color: var(--dash-primary) !important;
    background-color: rgba(255, 255, 255, 0.08);
    /* Subtle ripple effect on hover */
}

/* Custom Active State (Kept for visual active state) */
.nav-link-material.active-link {
    color: var(--dash-primary) !important;
    font-weight: 600;
    border-bottom: 2px solid var(--dash-primary);
}

/* Mobile Toggler - Remove all visual box elements */
.navbar-toggler {
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    /* Reduce padding to focus only on the icon itself */
    padding: 0.5rem 0.6rem !important;
    transition: all 0.3s ease-in-out;
    position: relative;
    z-index: 1050;
}

/* Hamburger Icon element styling */
#toggler-icon {
    color: #e0e0e0 !important;
    /* White color */
    font-size: 1.5rem;
    /* Transition for the animation effect (rotation) */
    transition: transform 0.4s ease-in-out;
}

/* Close Button State */
.navbar-toggler.toggler-open {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Animation for the close icon state */
.navbar-toggler.toggler-open #toggler-icon {
    color: var(--dash-text) !important;
    /* White icon */
    transform: rotate(90deg);
    /* Rotate the icon for a dynamic visual effect */
}

/* Overriding the default icon style since we are using Font Awesome now */
.navbar-toggler-icon {
    display: none;
}

/* Enhance general focus state (kept for accessibility/better UX) */
.navbar-toggler:focus {
    /* Minimal focus ring when clicked */
  
    outline: none;
}

/* --- END NAVIGATION LINK STYLES --- */

/* 1. Full-Screen Home Section */
  /* === Hero Section === */
           /* --- 1. Global Reset & Body --- */
        @import url('https://fonts.googleapis.com/css2?family=Parkinsans:wght@300..800&display=swap');
    
        /* --- 2. Hero Section --- */
        
        .hero-section {
            /* Full viewport height */
            height: 100vh;
            width: 100%;
            
            /* Positioning context for children */
            position: relative;
            
            /* Center the content */
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            
            /* Hide any overflowing video */
            overflow: hidden;
        }

        /* --- 3. Video Background & Overlay --- */
        
        .video-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1; /* Behind overlay and content */
        }
        
        .video-background video {
            /* The "magic" to cover the screen */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            
            /* Ensures video covers the area, cropping as needed */
            object-fit: cover;
        }

        /* Responsive Video Logic */
        .video-mobile {
            display: none; /* Hidden by default */
        }

        /* Dark Gradient Overlay */
        .hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2; /* On top of video, behind text */
            
            /* A subtle gradient, darker at the bottom */
            background: linear-gradient(
                180deg, 
                rgba(0, 0, 0, 0.2) 0%, 
                rgba(0, 0, 0, 0.6) 100%
            );
        }

        /* --- 4. Hero Content & Styling --- */

        .hero-content {
            position: relative;
            z-index: 3; /* On top of everything */
            padding: 20px;
            max-width: 800px;
        }

        .top-title {
            display: block; /* Ensures it's on its own line */
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #e0e0e0;
            margin-bottom: 12px;
            
            /* Animation */
            opacity: 0;
            animation: fadeIn 0.8s ease-out 0.2s forwards;
        }

        .studio-name {
            font-family: 'Playfair Display', serif;
            font-size: 5rem;
            font-weight: 700;
            color: #fff;
            margin: 10px 0;
            line-height: 1.1;
              font-family: "Parkinsans", sans-serif;
              font-weight: 200;
            
            /* Animation */
            opacity: 0;
            animation: fadeIn 0.8s ease-out 0.4s forwards;
        }

        .subtitle {
            font-size: 1.2rem;
            color: #e0e0e0;
            margin-top: 12px;
            font-weight: 300;
            max-width: 500px; /* Keeps line length readable */
            margin-left: auto;
            margin-right: auto;
            
            /* Animation */
            opacity: 0;
            animation: fadeIn 0.8s ease-out 0.6s forwards;
        }

      .cta-button456 {
            display: inline-block; /* Allows for padding/margin */
            margin-top: 30px;
            padding: 12px 30px;
            
            /* Transparent button with white border */
            background-color: transparent;
            border: 2px solid #fff;
            color: #fff;
            
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 600;
            font-size: 0.9rem;
            border-radius: 50px; /* Modern pill shape */
            
            /* Smooth transition for hover */
            transition: all 0.3s ease;
            
            /* Animation */
            opacity: 0;
            animation: fadeIn 0.8s ease-out 0.8s forwards;
           
        }

        .cta-button456:hover,
        .cta-button456:focus {
            background-color: #fff;
            color: #000;
            transform: scale(1.05); /* Slight pop on hover */
            outline: none;
        }
        
        /* --- 5. Fade-In Animation --- */

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        
        /* --- 6. Responsive Media Queries --- */

        @media (max-width: 768px) {
            
            /* --- Video Swapping --- */
            .video-desktop {
                display: none; /* Hide desktop video */
            }
            .video-mobile {
                display: block; /* Show mobile video */
            }
            
            /* --- Font Size Adjustments --- */
            .studio-name {
                font-size: 14rem;
            }
            
            .subtitle {
                font-size: 1rem;
            }

            .cta-button {
                padding: 10px 25px;
                font-size: 0.9rem;
            }
        }
        
        @media (max-width: 480px) {
            .studio-name {
                font-size: 3.5rem;
            }
            
            .top-title {
                font-size: 0.9rem;
            }
        }
/* 1.  end Full-Screen Home Section */










.scroll-down {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    color: white;
    opacity: 0.8;
    font-size: 1.8rem;
    animation: bounce 2s infinite;
    cursor: pointer;
    text-decoration: none;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0) translateX(-50%);
    }

    40% {
        transform: translateY(-15px) translateX(-50%);
    }

    60% {
        transform: translateY(-8px) translateX(-50%);
    }
}

/* 2. Custom Animated Button (Pulsing Effect) */
.btn-pulse {
    background-color: var(--dash-primary);
    border-color: var(--dash-primary);
    box-shadow: 0 0 0 0 rgba(90, 103, 216, 0.5);
    animation: pulse-shadow 2s infinite;
    padding: 0.8rem 2.5rem;
    border-radius: 50rem;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    transition: all 0.3s ease-in-out;
}

.btn-pulse:hover {
    background-color: #434cbb;
    border-color: #434cbb;
    transform: scale(1.02);
}

@keyframes pulse-shadow {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(90, 103, 216, 0.5);
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 15px rgba(90, 103, 216, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(90, 103, 216, 0);
    }
}

/* 3. About Section Enhancements */
/* Custom font and Dark Theme Variables */




    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

    :root {
        --studio-bg: #0d0d10;
        /* Very dark background */
        --studio-text-light: #f8f9fa;
        /* Light text */
        --studio-card-bg: #1a1a20;
        /* Darker card background (not used on main wrapper, but kept for future components) */
        --studio-success: #10B981;
        /* Emerald Green for highlights */
        --studio-success-rgb: 16, 185, 129;
        --studio-primary: #3B82F6;
        /* Blue for orbiting circles */
        --studio-primary-rgb: 59, 130, 246;
    }



    /* Essential Layout Reset (Kept the name .viewport-layout as it applies to the viewport) */
    .viewport-layout {
        /* Ensure body takes up full viewport and centers content */
        min-height: 100vh;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow-x: hidden;
    }



    /* --- NEW: Dedicated class for main content styling and sizing --- */
    .main-content-wrapper {
        /* Sizing and Layout */
        width: 100%;
        min-height: 10vh;

        /* Color and Theme (Replaces bg-dark, text-light) */
        background-color: var(--studio-bg);
        color: var(--studio-text-light);

        /* Style Resets (Replaces card, rounded-0) */
        border: none;
        box-shadow: none;
        border-radius: 0;

        /* Add necessary padding to ensure content isn't flush with edges if not using p-5 on the main row */
    }

    /* --- END NEW CLASS --- */

    /* Text gradient for "precision" */
    .text-gradient {
        background-image: linear-gradient(to right, #6EE7B7, #10B981);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
    }

    /* Title Style: Add transition to the title for smooth color changes */
    #studioTitle {
        transition: color 0.5s ease-in-out;
    }

    /* Animation Container */
    .animation-container {
        position: relative;
        width: 500px;
        /* Fixed size for aesthetic consistency */
        height: 500px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1;
        /* 3D Properties for spark explosion */
        perspective: 1000px;
        transform-style: preserve-3d;
    }

    /* Responsive scaling for animation container */
    @media (max-width: 991px) {
        .animation-container {
            width: 300px;
            height: 300px;
            margin: 2rem auto;
        }

        /* Add some padding to the bottom section on mobile to prevent squishing */
        .text-content-mobile-padding {
            padding-bottom: 4rem !important;
        }
    }

    /* Center Circle - BIGGER SIZE with Video Support */
    .center-circle {
        width: 120px;
        /* Increased size */
        height: 120px;
        /* Increased size */
        background-color: var(--studio-success);
        border-radius: 50%;
        /* Makes the container perfectly circular */
        overflow: hidden;
        /* Crucial for clipping the video into the circular shape */
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 0 15px rgba(var(--studio-success-rgb), 0.6);
        position: absolute;
        z-index: 10;
    }

    .center-circle video {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Orbiting Circles with Images */
    .orbit-circle {
        position: absolute;
        width: 70px;
        height: 70px;
        background-color: var(--studio-primary);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        box-shadow: 0 0 10px rgba(var(--studio-primary-rgb), 0.5);
        cursor: pointer;
        transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
        z-index: 5;
        animation: pulse 2s infinite alternate ease-in-out;
    }

    .orbit-circle img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }

    /* Hover effect for orbiting circles */
    .orbit-circle:hover {
        transform: scale(1.2) rotate(5deg);
        box-shadow: 0 0 25px rgba(var(--studio-primary-rgb), 0.9);
    }

    /* Dotted Lines (Canvas will draw these) */
    canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    /* Keyframes for rotation of the wrapper */
    @keyframes rotate {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    /* Keyframes for continuous pulse of individual circles */
    @keyframes pulse {
        0% {
            transform: scale(1);
        }

        100% {
            transform: scale(1.1);
        }
    }

    /* Keyframes for initial bounce-in effect */
    @keyframes bounceIn {
        0% {
            transform: scale(0.3);
            opacity: 0;
        }

        50% {
            transform: scale(1.1);
            opacity: 1;
        }

        100% {
            transform: scale(1);
        }
    }

    /* --- Text Fade-In Animation Keyframes --- */
    @keyframes slideInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* --- Custom Animation Utility Classes --- */

    /* Classes for sequential fade-in */
    .slide-in-up-delay-1 {
        opacity: 0;
        animation: slideInUp 0.8s ease-out forwards 0.2s;
    }

    .slide-in-up-delay-2 {
        opacity: 0;
        animation: slideInUp 0.8s ease-out forwards 0.4s;
    }

    .slide-in-up-delay-3 {
        opacity: 0;
        animation: slideInUp 0.8s ease-out forwards 0.6s;
    }

    /* Class for the portfolio button styling and hover effect */
    .rounded-pill-btn {
        border-radius: 50px;
        transition: transform 0.3s;
    }

    .rounded-pill-btn:hover {
        transform: scale(1.05);
    }

    /* Apply rotation to the wrapper of orbiting circles */
    .orbit-wrapper {
        position: absolute;
        width: 100%;
        height: 100%;
        animation: rotate 30s linear infinite;
    }

    /* --- FIREWORK/SPARK ANIMATION STYLES --- */
    .firework {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height: 20px;
        background: linear-gradient(to top, rgba(255, 255, 255, 0.2), white);
        border-radius: 2px;
        opacity: 0;
        z-index: 1;
    }

    .spark {
        position: absolute;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        opacity: 0;
        pointer-events: none;
        z-index: 1;
        filter: blur(1px);
        transform-style: preserve-3d;
    }

    @keyframes explode3D {
        0% {
            transform: translate3d(0, 0, 0) scale(1);
            opacity: 1;
        }

        100% {
            /* Uses CSS variables set in JS for random 3D spread */
            transform: translate3d(var(--dx), var(--dy), var(--dz)) scale(var(--scale));
            opacity: 0;
        }
    }

    @keyframes riseRocket {
        0% {
            transform: translateY(0) scaleY(1);
            opacity: 0;
        }

        10% {
            opacity: 1;
        }

        60% {
            transform: translateY(-350px) scaleY(0.9);
            opacity: 1;
        }

        70% {
            opacity: 0;
        }

        100% {
            transform: translateY(0);
            opacity: 0;
        }
    }

    /* //end about us section */

    /* 5. Service Section Background (Parallax) */
    #services {
        position: relative;
        background-image: url('https://images.pexels.com/photos/1723467/pexels-photo-1723467.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        z-index: 0;
    }

    /* Overlay for text readability on fixed background */
    #services::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(26, 32, 44, 0.85);
        /* Darker overlay */
        z-index: -1;
    }

    /* 5. Service Card Specific Styles (Material Design) */
    .service-card {
        background-color: white;
        /* Solid material surface */
        border: none;
        border-radius: 1.25rem;
        /* Slightly larger radius for M3 feel */
        overflow: hidden;
        /* Material-style shadow (Level 2/3) */
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
        transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
        /* Smooth material transition curve */
        height: 100%;
    }

    .service-card:hover {
        transform: translateY(-4px);
        /* Subtle elevation lift */
        /* Higher Material-style shadow (Level 4/5) */
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
        border-bottom: 5px solid var(--dash-primary);
        /* Primary accent on hover */
    }

    /* Service Card Image Styling */
    .service-image-container {
        width: 100px;
        /* Fixed size for the image/graphic */
        height: 100px;
        margin-bottom: 1.5rem;
        overflow: hidden;
        border-radius: 50%;
        /* Circular images */
        border: 3px solid var(--dash-primary);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
    }

    .service-image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s ease;
    }

    .service-card:hover .service-image-container {
        transform: translateY(-5px);
        /* Lift effect for the image container */
        border-color: #434cbb;
    }

    .service-card:hover .service-image-container img {
        transform: scale(1.1);
        /* Zoom effect on the image */
    }

    /* Ensure text is readable (dark text on white card) */
    .service-card .card-title {
        color: var(--dash-dark) !important;
    }

    .service-card .card-text {
        color: #666 !important;
    }

    .btn-service-cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: bold;
        color: var(--dash-primary);
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .btn-service-cta:hover {
        color: #434cbb;
    }

    .icon-circle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: var(--dash-primary);
        color: white;
        transition: transform 0.3s ease, background-color 0.3s ease;
    }

    .btn-service-cta:hover .icon-circle {
        transform: translateX(5px) scale(1.05);
        background-color: #434cbb;
    }

    /* 6. Team Section Styles */
    .teambody {
        /* These properties apply the desired background and default text color to the content area */
        font-family: var(--font-main);
        background-color: #111827;
        color: #F9FAFB;

    }

    /* Custom Variables and Global Styles (Modern Dark Theme) */
    :root {
        --bs-body-bg: #111827;
        /* Deep Dark Blue/Gray */
        --bs-content-bg: #1F2937;
        /* Lighter Dark for tiles */
        --bs-text-primary: #F9FAFB;
        /* Near White Text */
        --bs-text-secondary: #9CA3AF;
        /* Subtle Gray Text */
        --bs-accent: #06B6D4;
        /* Vibrant Cyan Accent */
        --bs-border-subtle: #374151;
        /* Soft Dark Border */
        --font-main: 'Inter', sans-serif;
        --dash-primary: var(--bs-accent);
        /* Mapping user's custom variable */
        --navbar-height: 70px;
    }

    /* --- SPA Section Visibility Logic --- */
    .main-content-section {
        /* CRUCIAL: All sections are hidden by default, removing them from the flow */
        display: none;
        /* Ensures proper padding for sections when active */
        padding-top: 40px;
        padding-bottom: 50px;
        border-bottom: 1px solid var(--bs-border-subtle);
        flex-direction: column;
        align-items: center;
        width: 100%;
        /* Important for full width content */
        box-sizing: border-box;
        min-height: 40vh;
        /* Default minimum height */
    }

    /* The only style that makes a section visible and allows it to take space */
    .main-content-section.active {
        display: flex;
    }



    /* Placeholder Section Styling */
    .placeholder-section {
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--bs-text-primary);
        font-size: 2rem;
        text-align: center;
    }

    /* --- Animations (Motion) --- */
    @keyframes fade-in-up {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .animated-element {
        animation: fade-in-up 1s ease-out forwards;
    }

    /* --- Gradient Text Animation for Heading --- */
    @keyframes gradient-animation {
        0% {
            background-position: 0% 50%;
        }

        50% {
            background-position: 100% 50%;
        }

        100% {
            background-position: 0% 50%;
        }
    }

    .gradient-text {
        background: linear-gradient(90deg, #06B6D4, #8B5CF6, #EC4899, #06B6D4);
        background-size: 400% 400%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: gradient-animation 8s ease infinite;
    }

    /* --- Team Tile Styling --- */
    .team-member-wrapper {
        opacity: 0;
        animation: fade-in-up 0.7s ease-out forwards;
    }

    .team-tile {
        background-color: var(--bs-content-bg);
        border: 1px solid var(--bs-border-subtle);
        border-radius: 16px;
        text-align: center;
        padding: 30px 20px;
        transition: all 0.4s ease-in-out;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .team-tile:hover {
        transform: translateY(-5px);
        box-shadow: 0 0 25px rgba(6, 182, 212, 0.4), 0 8px 20px rgba(0, 0, 0, 0.4);
        border-color: var(--bs-accent);
    }

    .tile-image {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        object-fit: cover;
        margin: 0 auto 20px auto;
        display: block;
        border: 4px solid var(--bs-accent);
        filter: saturate(0.5);
        transition: filter 0.4s ease, transform 0.4s ease;
    }

    .team-tile:hover .tile-image {
        filter: saturate(1);
        transform: scale(1.05) rotate(1deg);
    }

    .tile-name {
        color: var(--bs-text-primary);
        font-weight: 800;
        font-size: 1.5rem;
        margin-bottom: 4px;
    }

    .tile-title {
        color: var(--bs-accent);
        font-size: 1rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .tile-description {
        color: var(--bs-text-secondary);
        font-size: 0.9rem;
        margin-top: 15px;
        margin-bottom: 0;
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .social-links {
        margin-top: 25px;
        display: flex;
        justify-content: center;
        gap: 20px;
    }

    .social-links a {
        color: var(--bs-text-secondary);
        font-size: 1.5rem;
        transition: color 0.3s ease, transform 0.2s ease;
    }

    .social-links a:hover {
        transform: scale(1.3) translateY(-2px);
    }

    .social-links .fa-instagram:hover {
        color: #E4405F;
    }

    .social-links .fa-youtube:hover {
        color: #FF0000;
    }

    .social-links .fa-facebook:hover {
        color: #1877F2;
    }

    /* Staggered Entry (Motion) */
    .team-member:nth-child(1) .team-member-wrapper {
        animation-delay: 0.2s;
    }

    .team-member:nth-child(2) .team-member-wrapper {
        animation-delay: 0.35s;
    }

    .team-member:nth-child(3) .team-member-wrapper {
        animation-delay: 0.5s;
    }

    .team-member:nth-child(4) .team-member-wrapper {
        animation-delay: 0.65s;
    }

    .team-member:nth-child(5) .team-member-wrapper {
        animation-delay: 0.8s;
    }

    .team-member:nth-child(6) .team-member-wrapper {
        animation-delay: 0.95s;
    }






















    /* feedback page */
    :root {
        --bs-font-sans-serif: 'Inter', sans-serif;
        --primary-color: #007bff;
        /* Deep Blue Accent */
        --dark-text: #212529;
        --glass-bg: rgba(255, 255, 255, 0.75);
        /* Semi-transparent white for cards */
        --glass-border: 1px solid rgba(255, 255, 255, 0.4);
        --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.15);
        --star-color: #ffc107;
        /* Gold for ratings */
        --star-empty-color: #dee2e6;
    }

    /* --- Background Motion --- */
    /* body {
           
        } */

    .testpage {
        font-family: var(--bs-font-sans-serif);
        color: var(--dark-text);
        /* Subtle blue/white gradient background to make glass effect pop */
        background: linear-gradient(135deg, #e0f7ff, #ffffff, #e0f7ff);
        background-size: 400% 400%;
        animation: gradient-shift 15s ease infinite;
        scroll-behavior: smooth;
        min-height: 100vh;

    }

    @keyframes gradient-shift {
        0% {
            background-position: 0% 50%;
        }

        50% {
            background-position: 100% 50%;
        }

        100% {
            background-position: 0% 50%;
        }
    }

    /* --- Glassmorphism Card Styling (Testimonials) --- */
    .card-custom {
        background: var(--glass-bg);
        backdrop-filter: blur(15px);
        /* Stronger blur for "glassy" effect */
        -webkit-backdrop-filter: blur(15px);
        border: var(--glass-border);
        border-radius: 20px;
        /* Softer, larger radius for Material feel */
        box-shadow: var(--shadow-glass);
        transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s;
        padding: 30px !important;
        /* Increased padding */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        /* Ensures uniform spacing */
    }

    /* Motion Hover Effect */
    .card-custom:hover {
        transform: translateY(-5px) scale(1.01);
        box-shadow: 0 15px 40px rgba(0, 123, 255, 0.3);
        /* Stronger shadow on hover */
    }

    /* Testimonial Card Accent Bar (Now bottom border) */
    .testimonial-card {
        border-bottom: 5px solid var(--primary-color);
    }

    /* Accent Color */
    .text-accent {
        color: var(--primary-color);
    }

    .client-avatar-ring {
        border: 3px solid var(--primary-color);
        padding: 2px;
        box-shadow: 0 0 10px rgba(0, 123, 255, 0.2);
    }

    /* --- Star Rating Styling (Display) --- */
    .star-rating {
        display: flex;
        margin-bottom: 15px;
    }

    .star-rating svg {
        width: 24px;
        height: 24px;
        margin-right: 2px;
    }

    .star-filled {
        color: var(--star-color);
    }

    .star-empty {
        color: var(--star-empty-color);
    }

    /* --- STICKY LEFT COLUMN FOR DESKTOP VIEW --- */
    @media (min-width: 992px) {

        /* Applies to large screens and up */
        .sticky-left-content {
            position: sticky;
            top: 50px;
            /* Distance from the top of the viewport */
            height: fit-content;
            /* Ensure it only takes up needed height */
            padding-top: 50px;
            /* Added spacing */
        }
    }

    /* Ensures cards in the right column are aligned to the left of their column */
    #testimonial-container {
        padding-right: 15px;
        /* Adds space for right side scrolling content */
        padding-bottom: 100px;
    }

    /* Class to identify cards that are initially hidden (static) */
    .hidden-feedback {
        display: none;
    }

    /* Class to identify cards dynamically added by the user (and should also hide) */
    .new-feedback {
        /* These are visible by default, but targeted by 'show less' */
    }

    /* ------------------------------------------------------------------- */
    /* --- CUSTOM BUTTON STYLING (BLACK W/ STAR ANIMATION) --- */
    /* ------------------------------------------------------------------- */

    /* Keyframe animation for button pulse */
    @keyframes buttonPulse {
        0% {
            transform: scale(1);
            box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.4);
        }

        70% {
            transform: scale(1.03);
            box-shadow: 0 0 0 8px rgba(0, 123, 255, 0);
        }

        100% {
            transform: scale(1);
            box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
        }
    }

    .btn-black-star {
        /* Black background and white text */
        --bs-btn-color: #fff;
        --bs-btn-bg: #111;
        --bs-btn-border-color: #111;
        --bs-btn-hover-bg: #000;
        --bs-btn-hover-border-color: #000;
        --bs-btn-active-bg: #333;
        --bs-btn-active-border-color: #333;

        position: relative;
        overflow: hidden;
        z-index: 10;
        border-radius: 12px;
        transition: all 0.3s ease;

        /* Apply the pulsing animation */
        animation: buttonPulse 2s infinite ease-in-out;

        /* Ensure the button scales nicely on hover */
        transform-origin: center;
    }

    /* Stronger hover feedback */
    .btn-black-star:hover {
        transform: scale(1.05);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    }

    /* Keyframe animations for star movement */
    @keyframes starMove1 {
        0% {
            transform: translate(-50%, 0px) scale(0.7);
            opacity: 0;
        }

        30% {
            opacity: 1;
        }

        70% {
            opacity: 0.8;
        }

        100% {
            transform: translate(150%, 0px) scale(0.9);
            opacity: 0;
        }
    }

    @keyframes starMove2 {
        0% {
            transform: translate(150%, 20px) scale(0.5);
            opacity: 0;
        }

        50% {
            opacity: 1;
        }

        100% {
            transform: translate(-150%, -40px) scale(0.6);
            opacity: 0;
        }
    }

    /* Star Pseudo-elements */
    .btn-black-star::before,
    .btn-black-star::after {
        position: absolute;
        color: #ffffff;
        font-size: 14px;
        filter: drop-shadow(0 0 6px rgba(255, 255, 255, 1));
        pointer-events: none;
        z-index: 1;
        transition: none;
        line-height: 1;
        white-space: nowrap;
    }

    /* Star Group 1: Moves right/across, denser stars */
    .btn-black-star::before {
        content: '✨ ★';
        left: 5%;
        top: 40%;
        animation: starMove1 4s linear infinite;
        animation-delay: 0s;
    }

    /* Star Group 2: Moves left/up, denser stars */
    .btn-black-star::after {
        content: '★ ✨ ★';
        right: 5%;
        bottom: 30%;
        font-size: 10px;
        animation: starMove2 5s linear infinite;
        animation-delay: 2s;
    }

    /* ------------------------------------------------------------------- */
    /* --- MODAL & FORM DESIGN STYLING ----------------------------------- */
    /* ------------------------------------------------------------------- */
    .modal-content-glass {
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-radius: 25px;
        border: 1px solid rgba(255, 255, 255, 0.5);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    }

    .modal-header,
    .modal-footer {
        border: none;
    }

    /* Glassy Input Field Styling */
    .modal-content-glass .form-control {
        background-color: rgba(255, 255, 255, 0.8);
        /* Slightly transparent white */
        border: 1px solid rgba(0, 123, 255, 0.1);
        /* Very light blue border */
        border-radius: 10px;
        /* More rounded */
        padding: 12px 15px;
        transition: all 0.3s;
        color: var(--dark-text);
    }

    .modal-content-glass .form-control:focus {
        background-color: #fff;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
    }

    /* Star input in form interactivity */
    #rating-input {
        display: flex;
        gap: 5px;
        font-size: 1.5rem;
    }

    #rating-input .star-rating-icon {
        cursor: pointer;
        transition: color 0.2s, transform 0.2s;
        color: var(--star-empty-color);
        width: 28px;
        height: 28px;
    }

    #rating-input .star-rating-icon:hover,
    #rating-input .star-rating-icon.active {
        color: var(--star-color);
        transform: scale(1.1);
    }



    /* Contact us page */

    /* Define the new Dark Body/Light Content Color Palette */
    :root {
        /* Main Dark Backgrounds */
        --bs-body-bg: #141414;
        /* Very Dark Gray/Black */
        --dark-bg-end: #000000;
        /* Solid Black for gradient end */
        --dark-box-bg: #1F2937;
        /* Slightly lighter dark gray for contact box */

        /* Text and Input Backgrounds */
        --text-light: #E2E8F0;
        /* Light text for dark body */
        --input-bg: #F9FAFB;
        /* Keep input field background light for usability */

        /* Primary Blue/Indigo Accent Colors (Used for buttons, focus, and animated border) */
        --accent-blue-light: #60A5FA;
        --accent-blue-dark: #2563EB;

        /* Header Accent Colors (Vibrant Gold/Orange) */
        --header-accent-light: #FDBA74;
        /* Light Orange/Gold */
        --header-accent-dark: #EA580C;
        /* Vibrant Orange/Rust */

        /* Success Color */
        --success-green: #34D399;
    }

    /* Minimal body styles to prevent margin/padding issues */
    /* body {
             margin: 0; 
             padding: 0;
             line-height: 1.5;
        } */

    /* Wrapper for dark theme, font, and centering (REUSABLE SECTION) */

    #contact {}

    .contact-us-wrapper {
        font-family: 'Lato', sans-serif;
        background-color: var(--bs-body-bg);
        color: var(--text-light);
        /* Sets default text color to light */
        /* Subtle dark background gradient */
        background-image: linear-gradient(to top, #000000, #141414 100%);

        /* Layout styles to ensure centering and full page visibility */
        min-height: 100vh;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 3rem 1rem;
        /* Padding for mobile/desktop spacing */
    }

    /* Entrance Animation */
    @keyframes slideIn {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* New Animated Border Keyframes (Pulsating Blue Glow) */
    @keyframes subtleGlow {
        0% {
            box-shadow: 0 0 10px rgba(96, 165, 250, 0.4), 0 0 0 1px rgba(96, 165, 250, 0.2);
        }

        50% {
            box-shadow: 0 0 25px rgba(96, 165, 250, 0.7), 0 0 0 1px rgba(96, 165, 250, 0.4);
        }

        100% {
            box-shadow: 0 0 10px rgba(96, 165, 250, 0.4), 0 0 0 1px rgba(96, 165, 250, 0.2);
        }
    }

    /* Custom styles for the card look - now with Animated Border */
    .material-card {
        transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
        background-color: transparent !important;
        /* Faint base border */
        border: 1px solid rgba(226, 232, 240, 0.15);
        opacity: 0;
        transform: translateY(20px);

        /* Combined animation: 1. Slide In, 2. Start Glow */
        animation: slideIn 0.7s ease-out forwards, subtleGlow 4s ease-in-out infinite 0.7s;
    }

    .material-card:hover {
        box-shadow: none;
    }

    /* Contact Details Section Styling - Now just a dark block */
    .contact-details-box {
        background-color: var(--dark-box-bg);
        /* Dark Gray Block */
        color: var(--text-light) !important;
        padding: 30px;
        border-radius: 0.5rem;
    }

    /* Input Focus and Styling (Blue glow preserved) */
    .form-input-material {
        transition: border-color 0.3s, box-shadow 0.3s;
        background-color: var(--input-bg);
        color: #334155;
        /* Dark text inside the light input field */
        border: 1px solid #CBD5E1;
    }

    .form-input-material:focus {
        outline: none;
        border-color: var(--accent-blue-light);
        box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.3);
        /* Blue Glow */
        background-color: var(--input-bg);
    }

    /* --- Animated Gradient Keyframes (Used for both Title and Button) --- */
    @keyframes gradient-animation {
        0% {
            background-position: 0% 50%;
        }

        50% {
            background-position: 100% 50%;
        }

        100% {
            background-position: 0% 50%;
        }
    }

    /* Header and Accent Colors (Animated GOLD/ORANGE gradient) */
    .header-text {
        /* Gradient configuration */
        background: linear-gradient(90deg,
                var(--header-accent-light) 0%,
                var(--header-accent-dark) 25%,
                var(--header-accent-light) 50%,
                var(--header-accent-dark) 75%,
                var(--header-accent-light) 100%);
        background-size: 200% auto;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        font-weight: 900;
        text-shadow: 0 4px 15px rgba(253, 186, 116, 0.4);
        animation: gradient-animation 4s ease-in-out infinite;
    }

    /* Button Animation: Gradient Button (Now uses Gold/Orange Animated Gradient) */
    .btn-material {
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        font-weight: 700;

        /* Apply Animated Gold/Orange Gradient as background */
        background: linear-gradient(90deg,
                var(--header-accent-light) 0%,
                var(--header-accent-dark) 25%,
                var(--header-accent-light) 50%,
                var(--header-accent-dark) 75%,
                var(--header-accent-light) 100%) !important;
        background-size: 200% auto !important;
        /* Required for animation */
        animation: gradient-animation 4s ease-in-out infinite;
        /* Apply the animation */

        border: none !important;
        color: white !important;
        /* Keep text white */

        /* Update shadow to match new accent color */
        box-shadow: 0 4px 10px rgba(234, 88, 12, 0.6);
        /* Use header-accent-dark for shadow */
    }

    /* Button Hover States */
    .btn-material:hover {
        transform: translateY(-3px);
        opacity: 0.9;
        box-shadow: 0 10px 20px rgba(234, 88, 12, 0.8);
    }

    .btn-material:active {
        transform: translateY(-1px);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    /* Manual Logo Size Control */
    .custom-logo {
        width: 180px !important;
        height: 90px !important;
        object-fit: contain;
        background-color: transparent !important;
    }

    /* Ensuring all text on the dark background is light */
    .form-label,
    .text-secondary {
        color: var(--text-light) !important;
    }

    /* Style for the secondary heading inside the transparent card */
    .section-heading {
        color: var(--text-light) !important;
        /* Make the secondary heading light */
        border-color: rgba(226, 232, 240, 0.3) !important;
        /* Light border separator */
    }

    .logo-img-container {
        /* New class for the div directly holding the logo */
        padding: 1rem;
        /* Adjust padding as needed */
        text-align: center;
        /* Center the logo */
    }

    /* Success Message Styling */
    #success-message {
        display: none;
        /* Hidden by default */
        padding: 4rem 2rem;
        text-align: center;
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
        background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(52, 211, 153, 0.1) 100%);
        border-radius: 0.5rem;
        border: 1px solid var(--success-green);
    }

    #success-message.show {
        opacity: 1;
        display: block;
    }

    .checkmark-icon {
        color: var(--success-green);
        font-size: 4rem;
        line-height: 1;
        animation: scaleIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    @keyframes scaleIn {
        0% {
            transform: scale(0.5);
            opacity: 0;
        }

        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    /* ------------------------------------------------ */
    /* --- MOBILE VIEW OPTIMIZATIONS (Focus on <= 576px) --- */
    /* ------------------------------------------------ */
    @media (max-width: 576px) {

        /* Shrink the large header on small screens */
        .display-4 {
            font-size: 2.5rem !important;
        }

        /* Reduce container padding on very small screens for better edge-to-edge look */
        .contact-us-wrapper {
            padding: 2rem 0.5rem;
        }

        /* Reduce vertical gap between stacked columns */
        .row.g-5 {
            --bs-gutter-y: 2.5rem;
        }
    }


    /* Client Logo Section */
    /* DARK MODE VARIABLES */
    /* DARK MODE VARIABLES */
    :root {
        --primary-color: #a78bfa;
        /* Light Purple for contrast */
        --secondary-color: #67e8f9;
        /* Cyan for contrast */
        --bg-color: #12121e;
        /* Deep Dark Background */
        --card-color: #1a1a2e;
        /* This variable is now unused for the logo container */
        --logo-duration: 40s;
    }

    /* NEW: Subtle Pulsating Gradient Background for the entire section */
    #clients {
        position: relative;
        /* Using a combination for animation and base color */
        background-color: var(--bg-color);
        /* Fallback */
        background-image: radial-gradient(circle at top left, rgba(167, 139, 250, 0.1) 0%, transparent 50%),
            radial-gradient(circle at bottom right, rgba(103, 232, 249, 0.1) 0%, transparent 50%);
        background-size: 150% 150%, 150% 150%;
        background-position: 0% 0%, 100% 100%;
        animation: gradient-pulse 15s ease-in-out infinite alternate;

        color: #e0e0e0;
        /* Default text color for dark mode */
        height: 500px;
        display: flex;
        align-items: center;
        padding: 4rem 0;
        overflow: hidden;
        font-family: 'Inter', sans-serif;
    }

    @keyframes gradient-pulse {
        0% {
            background-size: 150% 150%, 150% 150%;
            background-position: 0% 0%, 100% 100%;
        }

        100% {
            background-size: 170% 170%, 170% 170%;
            background-position: 10% 20%, 90% 80%;
        }
    }

    /* 2. Animated Gradient Text */
    .animated-gradient-text {
        background: linear-gradient(45deg, var(--primary-color), var(--secondary-color), #4ade80);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: gradient-shift 5s ease infinite alternate;
        display: inline-block;
    }

    @keyframes gradient-shift {
        0% {
            background-position: 0% 50%;
        }

        100% {
            background-position: 100% 50%;
        }
    }

    /* 3. Auto-Scrolling Logo Showcase Styles */
    .logo-scroll-container {
        width: 100%;
        overflow: hidden;
        background: transparent;
        padding: 2rem 0;
        margin-top: 2rem;
    }

    .logo-scroll-wrapper {
        display: flex;
        width: 200%;
        animation: scroll-logos var(--logo-duration) linear infinite;
    }

    .logo-item {
        height: 60px;
        /* Default height for desktop */
        margin: 0 70px;
        /* INCREASED HORIZONTAL MARGIN for better spacing */
        max-width: 150px;
        /* REMOVED: filter: grayscale(80%) brightness(150%); and opacity: 0.7; 
               Logos now show in original color and opacity (1.0). */
    }

    @keyframes scroll-logos {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-50%);
        }
    }

    /* Responsive adjustments for mobile view (768px and below) */
    @media (max-width: 768px) {
        .content-wrapper .display-3 {
            font-size: 2.5rem !important;
            /* Smaller title size for mobile */
        }

        .content-wrapper .lead {
            font-size: 1rem !important;
            /* Smaller subtitle size for mobile */
        }

        .logo-item {
            height: 70px;
            /* Increased height for mobile screens */
            margin: 0 30px;
            /* Adjusted mobile margin */
        }

        .logo-scroll-wrapper {
            animation-duration: 30s;
        }

        .content-wrapper .pt-5 {
            padding-top: 1.5rem !important;
            /* Reduce top padding on title container */
        }

        .content-wrapper .pb-4 {
            padding-bottom: 0.5rem !important;
            /* Reduce bottom padding on title container */
        }

        .content-wrapper .mb-5 {
            margin-bottom: 2rem !important;
            /* Reduce bottom margin on lead text */
        }

        .logo-scroll-container {
            padding: 1rem 0;
            /* Reduce padding around logo scroller */
            margin-top: 1rem;
            /* Reduce margin above logo scroller */
        }

        .content-wrapper .py-5 {
            padding-top: 1rem !important;
            padding-bottom: 1rem !important;
        }
    }

    /* 4. Floating Bubble Background Animation (Modular Background Component) */
    .bubble-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .bubble-background li {
        position: absolute;
        display: block;
        list-style: none;
        width: 20px;
        height: 20px;
        background: rgba(167, 139, 250, 0.15);
        /* Using var(--primary-color) equivalent for opacity */
        animation: animate-bubbles 25s linear infinite;
        bottom: -150px;
        border-radius: 50%;
    }

    .bubble-background li:nth-child(1) {
        left: 25%;
        width: 80px;
        height: 80px;
        animation-delay: 0s;
    }

    .bubble-background li:nth-child(2) {
        left: 10%;
        width: 20px;
        height: 20px;
        animation-delay: 2s;
        animation-duration: 12s;
    }

    .bubble-background li:nth-child(3) {
        left: 70%;
        width: 20px;
        height: 20px;
        animation-delay: 4s;
    }

    .bubble-background li:nth-child(4) {
        left: 40%;
        width: 60px;
        height: 60px;
        animation-delay: 0s;
        animation-duration: 18s;
    }

    .bubble-background li:nth-child(5) {
        left: 65%;
        width: 20px;
        height: 20px;
        animation-delay: 0s;
    }

    .bubble-background li:nth-child(6) {
        left: 75%;
        width: 110px;
        height: 110px;
        animation-delay: 3s;
    }

    .bubble-background li:nth-child(7) {
        left: 35%;
        width: 150px;
        height: 150px;
        animation-delay: 7s;
    }

    .bubble-background li:nth-child(8) {
        left: 50%;
        width: 25px;
        height: 25px;
        animation-delay: 15s;
        animation-duration: 45s;
    }

    /* Ensuring proper CSS scoping for the last two list items */
    .bubble-background li:nth-child(9) {
        left: 20%;
        width: 15px;
        height: 15px;
        animation-delay: 2s;
        animation-duration: 35s;
    }

    .bubble-background li:nth-child(10) {
        left: 85%;
        width: 150px;
        height: 150px;
        animation-delay: 0s;
        animation-duration: 11s;
    }

    @keyframes animate-bubbles {
        0% {
            transform: translateY(0) rotate(0deg);
            opacity: 1;
        }

        100% {
            transform: translateY(-1000px) rotate(720deg);
            opacity: 0;
        }
    }

    /* Ensure content is above the background */
    .content-wrapper {
        position: relative;
        z-index: 10;
    }

    /* --- END HORIZONTAL LOGO SCROLL STYLES --- */




    /* Base Styles - Modern Dark Charcoal Theme */
    :root {
        --color-bg: #1E1E1E;
        /* Dark Charcoal (Less dark) */
        --color-text: #E0E0E0;
        /* Soft White */
        --color-accent-red: #E03C3C;
        /* Vivid, deep red */
        --color-accent-blue: #00BFFF;
        /* Bright contrasting blue for highlights */
        --color-secondary: #4A4A4A;
        /* Medium Gray for borders */
        --color-light-text: #AAAAAA;
        /* Lighter text for descriptions */
        --color-media-bg: #282828;
        /* Slightly darker than body for contrast */
        --font-main: 'Inter', sans-serif;
    }

    /* Essential Viewport Reset (Moved from 'body' selector) */
    html,
    body {
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }

    /* Global Styles (Moved from 'body' selector to '.site-canvas' class) */
    .site-canvas {
        font-family: var(--font-main);
        line-height: 1.6;

    }

    .serbody {
        width: 100%;
        background-color: var(--color-bg);
        color: var(--color-text);

    }

    .container123 {
        max-width: 1000px;
        margin: 0 auto;
        padding: 0 1rem;



    }

    /* ----------------------- */
    /* --- ANIMATIONS START ---*/
    /* ----------------------- */

    /* 1. Fade-in and move up effect for text elements */
    @keyframes fade-in-up {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* 2. Gradient shift animation for the H1 title */
    @keyframes gradient-shift {
        0% {
            background-position: 0% center;
        }

        100% {
            background-position: 200% center;
        }
    }

    /* 3. Staggered entry for service blocks */
    @keyframes fade-in-entry {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* --------------------- */
    /* --- ANIMATIONS END ---*/
    /* --------------------- */


    /* --- Header Styling (Mobile First) --- */
    .header {
        padding: 2rem 0 1rem;
        text-align: center;
    }

    .header h1 {
        font-size: 2rem;
        /* Reduced for mobile */
        font-weight: 900;
        margin-bottom: 0.5rem;
        line-height: 1.1;

        /* Gradient Setup */
        background-image: linear-gradient(90deg, var(--color-accent-blue) 0%, var(--color-accent-red) 50%, var(--color-accent-blue) 100%);
        background-size: 200% auto;
        /* Double size to allow movement */
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        text-shadow: none;

        /* Apply both fade-in and gradient animations */
        animation:
            fade-in-up 1s ease-out forwards,
            gradient-shift 5s linear infinite;
    }

    .header .subtitle {
        font-size: 0.75rem;
        /* Slightly smaller */
        color: var(--color-accent-red);
        text-transform: uppercase;
        letter-spacing: 0.2em;
        font-weight: 600;
        /* Staggered entry */
        animation: fade-in-up 1s ease-out 0.5s forwards;
        opacity: 0;
    }

    .main-description {
        font-size: 0.9rem;
        /* Smaller text on mobile */
        color: var(--color-light-text);
        /* Updated color variable */
        max-width: 700px;
        margin: 1rem auto 3rem;
        /* Reduced vertical margin */
        font-weight: 300;
        /* Staggered entry */
        animation: fade-in-up 1s ease-out 0.7s forwards;
        opacity: 0;
    }

    /* --- Service Block Styling (Mobile First) --- */
    .service-block {
        opacity: 0;
        /* Default invisible state for entry animation */
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 2rem 0;
        /* Reduced vertical padding */
        border-bottom: 1px solid var(--color-secondary);

        /* Apply staggered entry animation (0.8s duration) */
        animation: fade-in-entry 0.8s ease-out forwards;

        /* NEW: Transition for smooth hover effect */
        transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    }

    /* NEW: Hover effect for the entire service block */
    .service-block:hover {
        background-color: #252525;
        /* Slightly lighter dark background on hover */
        border-bottom-color: var(--color-accent-blue);
        /* Highlight border on hover */
        box-shadow: 0 4px 15px rgba(0, 191, 255, 0.1);
        /* Subtle blue glow shadow */
    }

    /* Ensure the last one doesn't show the hover border/shadow on its non-existent bottom line */
    .service-block:last-child:hover {
        border-bottom-color: var(--color-secondary);
        box-shadow: 0 0 15px rgba(0, 191, 255, 0.1);
    }

    /* Staggered animation delays for the sections (starting after the header finishes at 1s) */
    .service-block:nth-child(2) {
        animation-delay: 1.2s;
    }

    /* Service 1 */
    .service-block:nth-child(3) {
        animation-delay: 1.4s;
    }

    /* Service 2 */
    .service-block:nth-child(4) {
        animation-delay: 1.6s;
    }

    /* Service 3 */
    .service-block:nth-child(5) {
        animation-delay: 1.8s;
    }

    /* Service 4 */

    .service-block-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: center;
        gap: 2rem;
    }

    .service-block:last-child {
        border-bottom: none;
        padding-bottom: 3rem;
        /* Reduced padding at the bottom */
    }

    .service-text {
        max-width: 450px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 0.5rem;
        /* Added slight horizontal padding to text block */
    }

    .service-text h2 {
        font-size: 1.5rem;
        /* Reduced for mobile */
        font-weight: 700;
        margin-bottom: 0.5rem;
        color: var(--color-accent-blue);
    }

    .service-text p {
        font-size: 0.95rem;
        /* Slightly smaller text */
        color: var(--color-light-text);
        /* Using the lighter text color */
        margin-bottom: 1.5rem;
    }

    /* Service Media Container */
    .service-media {
        flex-shrink: 0;
        width: 100%;
        max-width: 400px;
        /* Reduced max width for media on mobile */
        height: 200px;
        /* Reduced height for media on mobile */
        border-radius: 12px;
        box-shadow: 0 0 15px rgba(224, 60, 60, 0.3), inset 0 0 5px rgba(0, 191, 255, 0.2);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        cursor: pointer;
        overflow: hidden;
    }

    .service-media:hover {
        transform: scale(1.01);
        /* Enhanced hover shadow effect */
        box-shadow: 0 0 25px var(--color-accent-red), inset 0 0 15px var(--color-accent-blue);
    }

    .video-placeholder {
        width: 100%;
        height: 100%;
        background-color: var(--color-media-bg);
        /* Updated placeholder background */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        border: 1px solid var(--color-secondary);
        /* Updated border color */
        transition: background-color 0.3s ease;
    }

    .play-icon {
        font-size: 2.5rem;
        /* Reduced for mobile */
        color: var(--color-accent-red);
        opacity: 0.8;
        transition: transform 0.3s ease, opacity 0.3s ease;
        text-shadow: 0 0 10px rgba(224, 60, 60, 0.7);
    }

    .service-media:hover .play-icon {
        transform: scale(1.1);
        opacity: 1;
    }

    .video-label {
        margin-top: 0.5rem;
        color: var(--color-light-text);
        font-size: 0.75rem;
        /* Smaller label text */
        font-weight: 500;
        text-transform: uppercase;
    }

    /* --- Service Link Button (Responsive) --- */
    .service-link {
        display: inline-block;
        padding: 0.4rem 1.25rem;
        text-decoration: none;
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--color-accent-blue);
        border: 2px solid var(--color-accent-blue);
        border-radius: 6px;
        background: transparent;
        box-shadow: 0 0 5px rgba(0, 191, 255, 0.5);
        /* Added a subtle press down effect on click/active state */
        transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    }

    .service-link:hover {
        color: var(--color-bg);
        background-color: var(--color-accent-blue);
        transform: translateY(-1px);
        box-shadow: 0 0 15px var(--color-accent-blue), 0 0 25px rgba(0, 191, 255, 0.5);
    }

    .service-link:active {
        transform: translateY(1px);
        /* Simple click feedback */
        box-shadow: none;
    }

    /* Call to Action Button (Responsive) - Retained CSS, though the button is removed from HTML */
    .cta-button {
        display: inline-block;
        padding: 0.8rem 2rem;
        /* Slightly smaller padding */
        background-color: var(--color-accent-red);
        color: var(--color-text);
        text-decoration: none;
        border-radius: 8px;
        font-weight: 700;
        margin-top: 1.5rem;
        /* Reduced margin */
        font-size: 1rem;
        border: none;
        cursor: pointer;
        box-shadow: 0 0 15px rgba(224, 60, 60, 0.6);
        transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    }

    .cta-button:hover {
        background-color: #C02C2C;
        transform: translateY(-2px);
        box-shadow: 0 5px 20px rgba(224, 60, 60, 0.8), 0 0 30px rgba(224, 60, 60, 0.4);
    }


    /* --- Desktop (Tablet and larger) Styles --- */
    @media (min-width: 768px) {

        /* Header adjustments for Desktop */
        .header {
            padding: 4rem 0 2rem;
        }

        .header h1 {
            font-size: 2.5rem;
            /* Increase for desktop */
        }

        .header .subtitle {
            font-size: 0.875rem;
        }

        .main-description {
            font-size: 1rem;
            /* Increase for desktop */
            margin: 1.5rem auto 4rem;
        }

        /* Service Text adjustments for Desktop */
        .service-text {
            text-align: left;
            align-items: flex-start;
            /* Align button to the left on desktop */
        }

        .service-text h2 {
            font-size: 2rem;
            /* Increase for desktop */
        }

        .service-text p {
            font-size: 1rem;
        }

        .service-block {
            padding: 3rem 0;
            /* Increase padding for desktop */
        }

        .service-media {
            max-width: 500px;
            /* Increase max width for media on desktop */
            height: 250px;
            /* Increase height for media on desktop */
        }

        .play-icon {
            font-size: 3rem;
            /* Increase play icon size */
        }

        .video-label {
            font-size: 0.875rem;
        }


        /* Asymmetric Layout for Desktop */
        .service-block-content {
            flex-direction: row;
            justify-content: space-between;
            gap: 4rem;
        }

        /* Alternating Layout: Media Right */
        .service-block:nth-child(even) .service-block-content {
            flex-direction: row-reverse;
        }
    }

    .card-video-top {
        height: 250px;
        /* Maintain height */
        object-fit: cover;
        /* Important for video filling the space without distortion */
        width: 100%;
        display: block;
    }



    /* /footer section
        
        */

    /* Define a custom bright accent color */
    :root {
        --bright-accent-green: #28a745;
    }

    /* --- CRITICAL: Remove all scrolling and fill viewport --- */
    /* /* html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden; 
        } 

    
        footerbody {
           
            display: flex;
            flex-direction: column;
        } 

        /* Only apply full-screen behavior to footer section */
    .footer-bg-container {
        font-family: 'Inter', sans-serif;
        margin: 0;
        padding: 0;
        height: 100vh;
        /* Full viewport height */
        overflow: hidden;
        /* Prevent scrolling inside footer */
        display: flex;
        flex-direction: column;
    }


    /* Custom CSS for the image background (100vh) */
    .footer-bg {
        position: relative;
        /* Placeholder image, replace with your actual image path */
        background-image: url('./img/desktop.png');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;

        /* CRITICAL: Set the height to full viewport to fill the screen */
        min-height: 100vh;
        width: 100vw;
        margin-top: 0;

        background-attachment: fixed;
        /* Fixed background */
    }

    /* Subtle gradient overlay at the bottom for text readability */
    .footer-bg::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 30%;
        /* Darken the bottom 30% */
        background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
        /* Darken bottom smoothly */
        z-index: 1;
        /* Below content, above background image */
    }

    /* All footer content must be above the background image and anchored to the bottom */
    .footer-content {
        position: relative;
        /* Set position relative for absolute child positioning */
        z-index: 2;
        /* Ensure content is above the gradient overlay */

        /* CRITICAL: Pushes the content to the bottom of the 100vh container */
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;

        /* Ensure the content is always visible above the image */
        color: #ffffff !important;
    }

    /* --- New Mobile Header Logo Positioning (TOP MARGIN 100px) --- */
    .header-mobile-logo {
        position: absolute;
        top: 200px;
        /* Requested updated top margin 100px */
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        /* Ensure it is on top of all other elements */
        width: 90%;
        /* Constraint width slightly */
        text-align: center;
    }

    /* --- Animations --- */

    /* Animated Gradient Text Logo Styling (DEFAULT/DESKTOP: 2.5rem) */
    .text-logo {
        font-family: 'Inter', sans-serif;
        font-size: 2.5rem;
        /* Desktop size */
        font-weight: 800;
        letter-spacing: -1px;
        line-height: 1;

        /* --- ENHANCED COLORFUL GRADIENT & NEON EFFECT --- */
        /* Aggressive, multi-color gradient for high visibility */
        background: linear-gradient(90deg, #ff00ff, #00ffff, #ff0000, #ffff00, #00ff00, #ff00ff);
        background-size: 400% 100%;
        /* Increased size for longer, visible movement */

        /* CRITICAL: For text clipping */
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent !important;

        /* Neon text shadow (cyan glow) */
        text-shadow: 0 0 10px rgba(0, 255, 255, 0.7), 0 0 20px rgba(0, 255, 255, 0.3);

        /* Apply animation (2s for a quick, clear movement) */
        animation: moveGradient 2s linear infinite;
    }

    @keyframes moveGradient {
        0% {
            background-position: 0% 50%;
        }

        100% {
            background-position: 100% 50%;
        }
    }


    /* 1. Main Content Slide Up Entrance */
    @keyframes slideUpFadeIn {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Apply entrance animation to the two main columns */
    .animated-column {
        animation: slideUpFadeIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
        opacity: 0;
        /* Start hidden */
    }

    /* Stagger the animation */
    .animated-column:nth-child(1) {
        /* Branding column */
        animation-delay: 0.2s;
    }

    .animated-column:nth-child(2) {
        /* Link columns */
        animation-delay: 0.3s;
    }


    /* 2. Social Icon Fade-In */
    @keyframes fadeInSlideUp {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .social-icon {
        color: #ffffff;
        transition: transform 0.3s ease, color 0.3s ease;
        animation: fadeInSlideUp 0.8s ease-out;
        animation-fill-mode: backwards;
        font-size: 1.5rem;
        animation-delay: 0.5s !important;
    }

    /* Further stagger the social icons */
    .social-icon-group a:nth-child(1) {
        animation-delay: 0.7s !important;
    }

    .social-icon-group a:nth-child(2) {
        animation-delay: 0.8s !important;
    }

    .social-icon-group a:nth-child(3) {
        animation-delay: 0.9s !important;
    }

    .social-icon:hover {
        transform: scale(1.1);
        color: var(--bright-accent-green) !important;
    }

    /* 3. Policy Link Pulse Animation */
    @keyframes colorPulse {

        0%,
        100% {
            color: rgba(255, 255, 255, 0.5) !important;
        }

        50% {
            color: rgba(255, 255, 255, 0.9) !important;
        }
    }

    .policy-link-pulse {
        animation: colorPulse 3s ease-in-out infinite;
    }

    /* --- General Styles --- */

    /* Link Hover Transition and Styles */
    .footer-link {
        transition: color 0.3s ease, padding-left 0.3s ease;
        color: #ffffff !important;
        text-decoration: none;
        display: inline-block;
        font-weight: 500;
    }

    .footer-link:hover {
        color: var(--bright-accent-green) !important;
        padding-left: 5px;
    }

    /* Ensure all general text within the footer is bright */
    .footer-content h4,
    .footer-content .text-white,
    .footer-content .text-light {
        color: #ffffff !important;
    }

    /* Newsletter input and button styling */
    .input-group .btn-success {
        background-color: var(--bright-accent-green) !important;
        border-color: var(--bright-accent-green) !important;
        color: #fff !important;
    }

    .input-group .form-control {
        background-color: rgba(255, 255, 255, 0.8);
        color: #333;
    }

    .border-secondary {
        border-color: rgba(255, 255, 255, 0.5) !important;
    }

    /* --- Mobile Optimization (max-width: 767.98px) --- */
    @media (max-width: 767.98px) {

        /* Set the font size for the new header logo */
        .header-mobile-logo .text-logo {
            font-size: 2.3rem !important;
            /* Requested font size */
        }

        /* Increase general heading font size slightly for better legibility on mobile */
        .footer-content h4 {
            font-size: 1.5rem;
            margin-bottom: 0.75rem !important;
        }

        /* Ensure input is large enough for touch */
        .input-group .form-control,
        .input-group .btn-success {
            padding: 0.5rem 1rem;
            font-size: 0.95rem;
        }
    }