/* General Styles */






/* Products section */

/* Products Container */


/* Gradient Overlay */
/* .gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(98, 0, 238, 0.3), transparent 60%);
    z-index: 0;

    .product-card {
        flex: 1.5;
        background: linear-gradient(to bottom, #000000, #222222);
        border-radius: 20px;
        overflow: hidden;
        display: flex;
        height: 400px;
        position: relative;
        z-index: 3;
    }

    .product-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 40px;
        text-align: center;
    }

    .product-info {
        flex: 1;
        padding: 30px;
        position: relative;
    }

    .product-logo {
        height: 30px;
        margin-bottom: 50px;
    }

    .product-title {
        font-size: 2.8rem;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .product-subtitle {
        font-size: 2.8rem;
        color: #ff6347;
        font-weight: bold;
        margin-bottom: 30px;
    }

    .product-description {
        font-size: 14px;
        line-height: 1.6;
        opacity: 0.8;
        margin-bottom: 20px;
    }

    .product-visual {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

    .product-screenshot {
        max-width: 100%;
        max-height: 100%;
        border-radius: 10px;
    }

    .mockwin-logo {
        width: 300px;
        margin-bottom: 40px;
    }

    .learn-more {
        display: inline-block;
        background: white;
        color: black;
        padding: 8px 20px;
        border-radius: 5px;
        font-weight: bold;
        text-decoration: none;
        font-size: 14px;
    }
} */

/* Overlay/gradient effects */
.gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: radial-gradient(circle at top right, rgba(98, 0, 238, 0.3), transparent 60%); */
    z-index: -1;
}


.heading {
    text-align: center;
    font-size: 36px;
    margin-bottom: 60px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
    background-color: #0C111D;
    background: linear-gradient(45deg, #0C111D, #0C111D);
    color: white;
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
}

.page-container {
    background: linear-gradient(135deg, #1f1f3a 0%, #352f66 100%);
    min-height: 100vh;
}

.container {


    /* Navbar Styles */
    /* Main navbar container */
    .navbar {
        width: 100%;
        max-width: 1800px; /* Set a fixed maximum width */
        height: 80px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 12%;
        background: #0d0d0d;
        margin: 0 auto; /* Center the navbar */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
    }
    
    /* Logo styling */
    .navbar .logo-container {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
    }
    
    img.logo-image {
        height: 40px;
        width: 40px;
        object-fit: contain;
    }
    
    .navbar .logo-text {
        color: white;
        font-size: 20px;
        font-weight: bold;
        white-space: nowrap;
    }
    
    /* Navigation sections */
    .navbar .nav-right {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-left: auto;
    }
    
    /* Dropdown Styles */
    .navbar .dropdown {
        position: relative;
        cursor: pointer;
        display: inline-block;
    }
    
    /* Button styles */
    .dropdown-button {
        color: white;
        background: transparent;
        border: none;
        padding: 8px 12px;
        font-size: 16px;
        cursor: pointer;
        white-space: nowrap;
    }
    
    /* Add a style for the contact button */
    .signup-button {
        background-color: #4CAF50;
        color: white;
        padding: 8px 16px;
        border-radius: 4px;
        text-decoration: none;
        font-weight: bold;
        white-space: nowrap;
    }
    
    /* Add additional wrapper to ensure fixed width */
    body:before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 80px;
        background: #0d0d0d;
        z-index: 999;
    }
    
    /* Keep dropdown content styles */
    .navbar .dropdown-content {
        display: none;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 600px;
        max-width: 90vw;
        background-color: white;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        border-radius: 12px;
        z-index: 1;
        margin-top: 15px;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s, visibility 0.3s;
    }

    /* Updated dropdown content */
    .navbar .dropdown-content {
        display: none;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 600px;
        max-width: 90vw;
        background-color: white;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        border-radius: 12px;
        z-index: 1;
        margin-top: 15px;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s, visibility 0.3s;
    }

    .navbar .dropdown:hover .dropdown-content,
    .navbar .dropdown:focus-within .dropdown-content {
        display: block;
        opacity: 1;
        visibility: visible;
    }

    .navbar .dropdown-card {
        display: flex;
        flex-wrap: wrap;
        padding: 25px;
    }

    /* Left side content */
    .navbar .dropdown-left {
        width: 50%;
        padding-right: 20px;
    }

    .navbar .dropdown-item {
        display: flex;
        align-items: flex-start;
        padding: 12px 0;
        cursor: pointer;
        margin-bottom: 5px;
    }

    .navbar .icon-container {
        margin-right: 15px;
        color: #7e51ff;
    }

    .navbar .item-content h3 {
        margin: 0 0 5px 0;
        color: #0f1524;
        font-size: 16px;
        font-weight: 500;
    }

    .navbar .item-content p {
        margin: 0;
        color: #505965;
        font-size: 14px;
        line-height: 1.4;
    }

    /* Right side notification */
    .navbar .dropdown-right {
        width: 50%;
        display: flex;
        align-items: center;
    }

    .navbar .dropdown-notification {
        width: 100%;
        border-radius: 8px;
        overflow: hidden;
    }

    .navbar .notification-image {
        width: 100%;
        height: auto;
        border-radius: 8px 8px 0 0;
        object-fit: cover;
    }

    .navbar .notification-content {
        padding: 15px 0;
    }

    .navbar .notification-content h3 {
        margin: 0 0 8px 0;
        color: #0f1524;
        font-size: 18px;
        font-weight: 500;
    }

    .navbar .notification-content p {
        margin: 0 0 15px 0;
        color: #505965;
        font-size: 14px;
        line-height: 1.4;
    }

    .navbar .notification-actions {
        display: flex;
        gap: 15px;
    }

    .navbar .dismiss-link {
        color: #505965;
        text-decoration: none;
    }

    .navbar .changelog-link {
        color: #7e51ff;
        font-weight: 500;
        text-decoration: none;
    }

    /* Dropdown buttons */
    .navbar .dropdown-button,
    .navbar .dropdown-btn {
        background: none;
        border: none;
        color: white;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        /* padding: 8px; */
        display: flex;
        align-self: center;
        gap: 5px;
    }

    .navbar .dropdown-icon {
        width: 17px;
        height: 17px;
        transition: transform 0.3s ease;
        align-self: center;
    }

    .navbar .dropdown-button.active .dropdown-icon {
        transform: rotate(180deg);
    }

    .navbar .dropdown-btn:after {
        content: '';
        display: inline-block;
        margin-left: 8px;
        width: 10px;
        height: 10px;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
        background-size: contain;
        background-repeat: no-repeat;
    }

    /* Authentication Buttons */
    .navbar .auth-btns {
        display: flex;
        gap: 1rem;
    }

    .navbar .login-btn,
    .navbar .signup-btn,
    .navbar .login-button,
    .navbar .signup-button {
        padding: 8px 15px;
        border-radius: 5px;
        font-weight: bold;
        cursor: pointer;
        text-decoration: none;
    }

    .navbar .login-btn,
    .navbar .login-button {
        background: transparent;
        color: white;
        border: none;
        transition: all 0.3s ease;
    }

    /* Log in Button Styles */
    .navbar .login-button {
        background: transparent;
        color: white;
        border: none;
        padding: 8px 15px;
        border-radius: 5px;
        font-weight: bold;
        cursor: pointer;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .navbar .login-button:hover {
        background: white;
        color: black;
    }

    .navbar .signup-btn,
    .navbar .signup-button {
        background: white;
        color: black;
        border: none;
    }

    /* Inner Navbar */
    .navbar .inner-navbar {
        background-color: #0a0a16;
        width: 90%;
        max-width: 1400px;
        margin: 0 auto;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 15px 20px;
        border-radius: 3px;
    }

    /* Image Container */
    .navbar .image-container {
        background-image: url('images/6710.png');
        background-size: cover;
        width: 300px;
        height: 200px;
        position: relative;
    }

    .navbar .image-container img {
        position: relative;
        z-index: 1;
        width: 100%;
        height: auto;
    }

    /* CSS-only mobile menu toggle */
    .navbar .mobile-menu-checkbox {
        display: none;
    }

    .navbar .mobile-menu-label {
        display: none;
        color: white;
        font-size: 24px;
        cursor: pointer;
        padding: 5px;
        order: 3;
    }

    /* Media Queries for Responsiveness */
    @media screen and (max-width: 1200px) {
        .navbar {
            padding: 10px 3%;
        }
    }

    @media screen and (max-width: 992px) {
        .navbar .dropdown-content {
            width: 450px;
        }
    }

    /* Adjust the existing media query for 768px */
    @media screen and (max-width: 768px) {
        .navbar {
            padding: 10px 15px;
            flex-wrap: nowrap;
            /* Prevents wrapping */
            justify-content: space-between;
            /* Distributes space between items */
            align-items: center;
            /* Aligns items vertically in the center */
        }

        .navbar .nav-left,
        .navbar .nav-right {
            gap: 20px;
        }

        /* Show mobile menu toggle */
        .navbar .mobile-menu-label {
            display: block;
            font-size: 24px;
            cursor: pointer;
            padding: 5px;
            margin-left: auto;

            /* Push to right side */
        }

        .navbar .logo-container {
            flex: 1;
            /* Allow logo to take available space */
        }

        /* Hide navigation by default on mobile */
        .navbar .nav-left,
        .navbar .nav-right {
            display: flex;
            /* Change this from none to flex */
            flex-direction: column;
            width: 100%;
            flex-direction: row;
            background: #0d0d0d;
            /* padding: 15px 10px; */
            align-items: center;
        }

        /* Show navigation when toggle is checked */
        .navbar .mobile-menu-checkbox:checked~.nav-left,
        .navbar .mobile-menu-checkbox:checked~.nav-right {
            display: flex;
            flex-direction: column;
            width: 100%;
            background: #0d0d0d;
            padding: 15px 10px;
            align-items: flex-start;
        }

        .navbar .mobile-menu-checkbox:checked~.nav-right {
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        /* Fix dropdown positioning */
        .navbar .dropdown {
            position: relative;
            width: 100%;
            /* Full width on mobile */
        }

        .navbar .dropdown-content {
            width: 100%;
            max-width: 100%;
            left: 0;
            transform: none;
            position: relative;
            /* Change from absolute to relative */
            margin-top: 10px;
            box-shadow: none;
        }

        /* Adjust dropdown content layout */
        .navbar .dropdown-card {
            flex-direction: column;
        }

        .navbar .dropdown-left,
        .navbar .dropdown-right {
            width: 100%;
            padding-right: 0;
        }

        .navbar .dropdown-right {
            margin-top: 15px;
        }

        /* Button adjustments */
        .navbar .nav-right {
            align-items: flex-start;
        }

        .navbar .login-button,
        .navbar .signup-button {
            margin-top: 10px;
        }
    }

    /* Add this to your CSS file */
    .parallax {
        /* The image used */
        background-image: url('img_parallax.jpg');

        /* Full height */
        height: 100%;

        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .content-block {
        position: relative;
        background-color: #0C111D;
        /* Your existing styles */
    }

    .content-block::after {
        content: "";
        position: fixed;
        bottom: -18%;
        left: -9%;
        width: 70%;
        height: 65%;
        background-image: url('images/decorative.png');
        background-repeat: no-repeat;
        background-position: left bottom;
        background-size: contain;
        opacity: 0.7;
        z-index: 10;
        pointer-events: none;
        /* opacity: 1; */
        transition: opacity 0.2s ease;
    }

    /* Hide background image on smaller screens */
    .content-block.hide-bg-image::after {
        opacity: 0;
    }

    /* Tablet View */
    @media (max-width: 1024px) {
        .content-block::after {
            width: 80%;
            height: 70%;
            bottom: -20%;
            left: -10%;
        }
    }

    /* Mobile View */
    @media (max-width: 768px) {
        .content-block::after {
            width: 90%;
            height: 75%;
            bottom: -25%;
            left: -12%;
        }
    }

    /* Smaller Mobile View */
    @media (max-width: 480px) {
        .content-block::after {
            width: 100%;
            height: 80%;
            bottom: -30%;
            left: -15%;
        }
    }

    /* Large Screen View */
    @media (min-width: 1440px) {
        .content-block::after {
            width: 60%;
            height: 60%;
            bottom: -15%;
            left: -7%;
        }
    }

    /* Ultra-Wide Screen View */
    @media (min-width: 1920px) {
        .content-block::after {
            width: 50%;
            height: 50%;
            bottom: -10%;
            left: -5%;
        }
    }


    .products-container {
        min-height: 500px;
        margin: 0;
        font-family: Arial, sans-serif;
        background-image: url('images/Light accent.png');
        background-color: #0C111D;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: right bottom;
        background-size: contain;
        padding: 50px 0;
        background-position-x: 300%;
        width: 100%;
        overflow-x: hidden;
      


        /* Hero Section */
        .hero {
            text-align: center;
            padding: 60px 20px;
            position: relative;
        }

        .hero-title {
            font-size: clamp(2rem, 3vw, 4rem);
            font-weight: normal;
            line-height: 1.2;
            margin-bottom: 20px;
        }

        .hero-subtitle {
            font-size: clamp(1.5rem, 1vw, 2rem);
            font-weight: lighter;
            margin-bottom: 20px;
        }

        /* Products Section Layout */
        .products {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            /* overflow: hidden;
            padding: 0px 20px; */
        }

        .products-left {
            position: relative;
            width: 100%;
            margin-bottom: 30px;
            height: 80px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .products-left .decorative-flora-left {
            max-width: 250px;
            height: auto;
            position: absolute;
            top: -50px;
            left: -100px;
            z-index: 1;
            opacity: 0.8;
        }

        /* Updated iframe and wrapper styles with hidden scrollbars */
        .iframe-wrapper {
            width: 100%;
            padding: 0 13%;
            -webkit-overflow-scrolling: touch;
            max-height: 600px;
            overflow: hidden;
            position: relative;
            -ms-overflow-style: none;
            /* IE and Edge */
            scrollbar-width: none;
            /* Firefox */
        }

        /* Hide scrollbar for Chrome, Safari and Opera */
        .iframe-wrapper::-webkit-scrollbar {
            display: none;
        }

        iframe {
            width: 100%;
            max-width: 1200px;
            height: 700px;
            border: none;
            border-radius: 10px;
            scroll-behavior: smooth;
            align-items: center;
            background: transparent;
            -ms-overflow-style: none;
            /* IE and Edge */
            scrollbar-width: none;
            /* Firefox */
        }

        /* Hide scrollbar for Chrome, Safari and Opera */
        iframe::-webkit-scrollbar {
            display: none;
        }

        /* Add a layer to capture events over the iframe */
        .iframe-wrapper::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 10;
            pointer-events: none;
            /* Let scroll events pass through */
        }


        /* Specific adjustments for phones (extra small devices) */
        @media (max-width: 480px) {
            .products-section {
                padding: 10px;
                bottom: 20px;
            }

            .products-container {
                background-position: left center;
                /* Positioning the image to the left */
                background-size: 150% auto;
                /* Scaling the image for better visibility */
            }

            /* .products-left {
                text-align: center;
            } */

            .hero-title {
                font-size: 2rem;
            }

            .hero-subtitle {
                font-size: 1rem;
            }

            .products-left .our-products {
                font-size: 16px;
                /* Even smaller for very small screens */
                left: 8%;
            }

            .products-left .arrow {
                width: 70px;
                left: 10%;
            }

            .scroll-container {
                bottom: 200px;
            }

            /* Adjust flora position for very small screens */
            .products-left .decorative-flora-left {
                max-width: 250px;
                position: absolute;
                top: 450px;
                left: -100px;
                /* Ensures it's not pushed too far off-screen */
                bottom: -200px;
                /* Bring it up to make it visible */
                transform: translateX(0);
                /* Remove the translateX shifting */
                opacity: 0.8;
                /* Slightly higher visibility */
            }

            .swipe-section {
                height: 70vh;
            }
        }

        /* Small to medium devices */
        @media (min-width: 481px) and (max-width: 767px) {
            .products-left .our-products {
                font-size: 18px;
                left: 10%;
            }

            .products-container {
                background-position: left center;
                background-size: 180% auto;
            }

            .products-left .arrow {
                width: 90px;
                left: 12%;
            }

            .products-left {
                height: 250px;
                overflow: visible;
            }

            .products-left .decorative-flora-left {
                max-width: 300px;
                position: absolute;
                left: 0;
                bottom: 0px;
                transform: translateX(0);
                opacity: 0.85;
            }

            .products-container {
                background-position-x: 100%;
                /* Position the image within the viewport */
                background-size: 200% auto;
                /* Adjust size to fit better */
            }
        }

        /* Media Queries */
        @media (min-width: 768px) {
            .products-section {
                padding: 20px;
                flex-direction: column;
            }

            .products-container {
                background-position: left center;
                background-size: 200% auto;
            }

            /* .products-left {
                height: 100px;
            } */

            .products-left .decorative-flora-left {
                max-width: 400px;
                top: 400px;
                left: -150px;
            }

            .products-left .our-products {
                font-size: 22px;
                left: 25%;
                margin-top: 40px;
                /* Increased spacing */
            }

            .products-left .arrow {
                width: 120px;
                left: 30%;
                margin-top: 0px;
            }

            .scroll-container iframe {
                height: 550px
            }
        }

        @media (min-width: 992px) {
            .products-section {
                flex-direction: row;
                justify-content: space-between;
                padding: 50px 80px;
            }

            .products-container {
                background-position: left center;
                background-size: 220% auto;
            }

            .products-left {
                flex: 0 0 30%;
                margin-bottom: 0;
                /* Increased height for larger screens to accommodate positioning */
                height: 400px;
                position: relative;
            }

            .products-left .decorative-flora-left {
                max-width: 500px;
                top: 100px;
                left: -200px;
            }

            /* Updated positioning for larger screens */
            .products-left .our-products {
                font-size: 24px;
                position: absolute;
                top: -50px;
                /* Changed from -100px to positive value */
                left: 20%;
                margin-top: 0;
                /* Reset margin since we're using absolute positioning */
            }

            .products-left .arrow {
                width: 130px;
                position: absolute;
                top: -40px;
                /* Changed from -70px to positive value */
                left: 22%;
                margin-top: 0;
                /* Reset margin */
            }

            .scroll-container {
                flex: 0 0 65%;
            }

            .scroll-container iframe {
                height: 600px;
            }
        }

        @media (min-width: 1200px) {
            .hero {
                padding: 80px 20px 0px;
            }

            .products-section {
                padding: 0px 100px;
            }

            .products-container {
                background-position: right bottom;
                background-size: 250% auto;
            }

            .products-left .decorative-flora-left {
                max-width: 550px;
                top: 250px;
                left: -240px;
            }

            /* Final positioning for extra large screens - matches original design */
            .products-left .our-products {
                top: -30px;
                /* Changed from -350px */
                left: 240px;
            }

            .products-left .arrow {
                top: 10px;
                /* Changed from -320px */
                left: 250px;
                width: 150px;
            }

            .scroll-container iframe {
                height: 500px;
            }
        }

        @media (min-width: 768px) and (max-width: 991px) {
            .products-container {
                background-position-x: 200%;
                background-size: 150% auto;
            }
        }

        /* Targeted fixes for larger screens */
        @media (min-width: 1200px) {

            /* Fix background image positioning */
            .products-container {
                background-position: center bottom;
                background-size: 100% auto;
                background-position-x: 50%;
                /* Center the background image */
            }

            /* Fix iframe wrapper */
            .iframe-wrapper {
                width: 100%;
                padding: 0 12%;
                margin: 0 auto;
            }

            /* Ensure iframe is properly sized and centered */
            iframe {
                width: 100%;
                height: 600px;
                margin: 0 auto;
                display: block;
            }

            /* Fix decorative flora positioning */
            .products-left .decorative-flora-left {
                max-width: 550px;
                position: absolute;
                top: 50px;
                /* Adjusted top position */
                left: -100px;
                /* Less negative left margin */
                z-index: 1;
                opacity: 0.8;
            }

            /* Fix products-left container height to accommodate flora */
            .products-left {
                height: 400px;
                /* Ensure enough space for the flora */
                position: relative;
                overflow: visible;
                /* Allow flora to extend outside container */
            }
        }

        /* Extra fix for extremely large screens */
        @media (min-width: 1600px) {
            .products-container {
                background-position-x: 50%;
                /* Keep background centered */
            }

            /* Special positioning for decorative flora on very large screens */
            .products-left .decorative-flora-left {
                max-width: 600px;
                /* Slightly larger maximum width */
                top: 170px;
                /* Position from top of products-left */
                left: -120px;
                /* Better positioning */
            }

            /* Ensure products-left has enough space */
            .products-left {
                height: 500px;
                /* More space on very large screens */
            }
        }

        /* Additional fix for extra-extra large screens */
        @media (min-width: 2000px) {

            /* Keep flora visible on ultra-wide screens */
            .products-left .decorative-flora-left {
                max-width: 700px;
                top: -50px;
                left: -150px;
            }
        }
    }


    .cards-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 30px;
        margin: 0px auto 80px auto;
        max-width: 1200px;
        padding: 0 20px;
        background-color: #0c111D;


        .card {
            background-color: white;
            color: #0C111D;
            border-radius: 15px;
            padding: 30px;
            display: flex;
            flex-direction: column;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease-in-out;
        }

        .card:hover {
            transform: translateY(-5px);
        }

        .card-icon {
            margin-bottom: 20px;
            width: 30px;
            height: 30px;
        }

        .card-title {
            font-size: 24px;
            margin-bottom: 20px;
            font-weight: bold;
        }

        .card-description {
            margin-bottom: 30px;
            line-height: 1.5;
            flex-grow: 1;
        }

        .card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .try-now-btn {
            background-color: #111;
            color: white;
            border: none;
            border-radius: 30px;
            padding: 10px 15px;
            font-size: 16px;
            cursor: pointer;
            flex-grow: 1;
            margin-right: 10px;
        }

        .try-now-btn,
        .chat-link {
            cursor: pointer;
            transition: opacity 0.3s ease;
        }

        .try-now-btn:hover,
        .chat-link:hover {
            opacity: 0.8;
        }

        .arrow-btn {
            width: 40px;
            height: 40px;
            background-color: #111;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .arrow-icon {
            width: 20px;
            height: 20px;
            color: white;
        }

        /* Responsive Adjustments */
        @media (max-width: 1024px) {
            .cards-container {
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            }
        }

        @media (max-width: 768px) {
            .cards-container {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .card {
                padding: 20px;
            }

            .card-title {
                font-size: 22px;
            }
        }

        @media (max-width: 480px) {
            .card-title {
                font-size: 20px;
            }

            .try-now-btn {
                font-size: 14px;
                padding: 8px 12px;
            }

            .arrow-btn {
                width: 35px;
                height: 35px;
            }
        }

    }

    /* About Us Section Styles */
    .about-us {
        text-align: center;
        padding: 50px 20px;
        background-color: #0C111D;

        /* Subtitle */
        .about-us-subtitle {
            font-size: 1.125rem;
            /* 18px */
            margin-bottom: 20px;
            font-weight: normal;
            color: #b0b7c3;
        }

        /* Title */
        .about-us-title {
            font-size: 2.5rem;
            /* 40px */
            margin-bottom: 30px;
            font-weight: bold;
            color: white;
        }

        /* Description */
        .about-us-description {
            font-size: 1.125rem;
            /* 18px */
            line-height: 1.6;
            color: #b0b7c3;
            /* margin-bottom: 80px; */
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        /* Responsive Adjustments */
        @media (max-width: 1024px) {
            .about-us-title {
                font-size: 2.25rem;
                /* 36px */
            }

            .about-us-description {
                font-size: 1.1rem;
                /* 17px */
                margin-bottom: 60px;
            }
        }

        @media (max-width: 768px) {
            .about-us {
                padding: 40px 15px;
            }

            .about-us-title {
                font-size: 2rem;
                /* 32px */
            }

            .about-us-description {
                font-size: 1rem;
                /* 16px */
                margin-bottom: 50px;
            }
        }

        @media (max-width: 480px) {
            .about-us {
                padding: 30px 10px;
            }

            .about-us-title {
                font-size: 1.75rem;
                /* 28px */
            }

            .about-us-description {
                font-size: 0.95rem;
                /* 15px */
                margin-bottom: 40px;
                padding-left: 70px;
            }
        }


    }


    /* Testimonial Grid Styles */

    .testimonials-section {
        text-align: center;
        padding: 40px 20px;
        background-color: #0C111D;
        color: white;
        background-image: url("images/Ellipse 7.png");
        background-position: 45% -5%;
        background-repeat: no-repeat;
        background-size: 50vw;
        /* Scale the image with viewport width */
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 650px;
        position: relative;
        /* Added for better positioning control */

        /* Add this pseudo-element to debug the background image */
        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url("images/Ellipse\ 7.png");
            background-position: 47% -15%;
            background-repeat: no-repeat;
            background-size: auto;
            z-index: 0;
            /* Behind content */
            pointer-events: none;
            /* Don't interfere with clicks */
        }

        /* Make sure content is above the background */
        .section-title,
        .section-subtitle,
        .testimonials-grid {
            position: relative;
            z-index: 1;
        }

        /* Rest of your CSS remains the same */
        /* Title and Subtitle */
        .section-title {
            font-size: 42px;
            font-weight: bold;
            margin-bottom: 20px;
        }

        .section-subtitle {
            font-size: 18px;
            color: #e0e0e0;
            line-height: 1.5;
            margin-bottom: 40px;
        }


        /* Title and Subtitle */
        .section-title {
            font-size: 42px;
            font-weight: bold;
            margin-bottom: 20px;
        }

        .section-subtitle {
            font-size: 18px;
            color: #e0e0e0;
            line-height: 1.5;
            margin-bottom: 40px;
        }

        /* Testimonials Grid */
        .testimonials-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: auto auto auto;
            max-width: 900px;
            width: 100%;
            height: 350px;
            position: relative;
            align-items: center;
            align-self: center;
            padding: 10px;
            border-radius: 12px;

            /* Instead of margin-right, use transform to shift */
            transform: translateX(-3vw);
            /* Adjust the value as needed */
        }

        /* Grid Lines */
        .horizontal-line,
        .vertical-line {
            position: absolute;
            background-color: rgba(255, 255, 255, 0.15);
            /* Increased opacity for better visibility */
        }

        /* Horizontal Lines */
        .horizontal-line {
            width: 90%;
            height: 1px;
            left: 5%;
            /* Center all horizontal lines */
        }

        .horizontal-line.top {
            top: 0;
        }

        .horizontal-line.center-top {
            top: 20%;
            left: 20%;
        }

        .horizontal-line.center-bottom {
            top: 80%;
            left: 20%;
        }

        .horizontal-line.bottom {
            bottom: 0;
        }

        /* Vertical Lines */
        .vertical-line {
            height: 100%;
            width: 1px;
            top: 0;
        }

        .vertical-line.center-left {
            left: 40%;
        }

        .vertical-line.center-right {
            left: 66%;
        }

        /* Author Image */
        .author-image {
            width: 100%;
            height: 100%;
            max-width: 230px;
            max-height: 210px;
            background-color: #2C2C2C;
            margin: 20% 2% 20% 20%;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            grid-column: 2 / span 1;
            grid-row: 2 / span 1;
            justify-self: center;
            align-self: center;
            /* Add subtle border for better visibility */
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .author-top-circle {
            width: 50px;
            height: 50px;
            background-color: white;
            border-radius: 50%;
            margin-bottom: 15px;
        }

        .author-bottom-shape {
            width: 90px;
            height: 40px;
            background-color: #aaa;
            border-radius: 50% 50% 30% 30%;
        }

        /* Testimonial Content */
        .testimonial-content {
            text-align: left;
            grid-column: 3;
            grid-row: 2;
            justify-self: start;
            padding: 30px 0px 30px 20px;
            margin: 30px 0px;
            /* Add subtle border for better visibility */
            /* border: 1px solid rgba(255, 255, 255, 0.1); */
            border-radius: 10px;
        }

        .testimonial-quote {
            font-size: 20px;
            font-weight: 500;
            margin-bottom: 20px;
            line-height: 1.4;
        }

        .author-info {
            display: flex;
            flex-direction: column;
        }

        .author-name {
            font-weight: bold;
            font-size: 18px;
        }

        .author-title {
            font-size: 14px;
            color: #aaa;
            margin-top: 4px;
        }

        /* Large Desktop (default styles already set above) */

        /* Laptop and Small Desktop (1024px to 1199px) */
        @media (max-width: 1199px) and (min-width: 1025px) {
            min-height: 600px;

            .testimonials-grid {
                margin-right: 5%;
                max-width: 850px;
            }

            .section-title {
                font-size: 40px;
            }

            .testimonial-content {
                padding: 25px 15px;
            }

            .author-image {
                max-width: 220px;
                max-height: 210px;
                margin: 10% 0% 10% 17%;
            }
        }

        /* Specific for 1024px screens */
        @media (width: 1024px) {
            min-height: 580px;

            .testimonials-grid {
                margin-right: 0;
                max-width: 90%;
                height: 330px;
            }

            .section-title {
                font-size: 38px;
            }

            .section-subtitle {
                max-width: 90%;
                margin-left: auto;
                margin-right: auto;
            }

            .author-image {
                max-width: 200px;
                max-height: 180px;
                margin: 10% 2% 10% 10%;
            }

            .testimonial-content {
                padding: 20px 15px;
            }

            .testimonial-quote {
                font-size: 19px;
            }

            /* Adjust grid lines slightly */
            .vertical-line.center-left {
                left: 38%;
            }

            .vertical-line.center-right {
                left: 64%;
            }
        }

        /* Tablets (768px to 1024px) */
        @media (max-width: 1024px) and (min-width: 769px) {
            min-height: 550px;

            .testimonials-grid {
                margin-right: 0;
                /* max-width: 90%; */
                height: 320px;
            }

            .section-title {
                font-size: 36px;
            }

            .section-subtitle {
                font-size: 17px;
                max-width: 85%;
                margin-left: auto;
                margin-right: auto;
            }

            .testimonial-quote {
                font-size: 18px;
            }

            .author-image {
                max-width: 200px;
                max-height: 175px;
                margin: 10% 10% 10% 10%;
            }

            /* Adjust vertical lines */
            .vertical-line.center-left {
                left: 37%;
            }

            .vertical-line.center-right {
                left: 63%;
            }
        }

        /* Small Tablets (668px to 768px) */
        @media (max-width: 768px) and (min-width: 669px) {
            min-height: 500px;
            padding: 40px 15px;

            .section-title {
                font-size: 34px;
            }

            .section-subtitle {
                font-size: 16px;
                max-width: 90%;
            }

            /* Keep grid but adjust proportions */
            .testimonials-grid {
                /* grid-template-columns: 0.8fr 1fr 1.2fr; */
                height: 280px;
                margin-right: 25%;
                width: 100%;
            }

            .author-image {
                max-width: 180px;
                max-height: 160px;
                margin: 10% 0% 15% 20%;
            }

            .testimonial-content {
                padding: 15px 10px;
            }

            .testimonial-quote {
                font-size: 17px;
                line-height: 1.3;
            }
        }

        /* Mobile Landscape and Small Tablets (480px to 668px) */
        @media (max-width: 668px) and (min-width: 481px) {
            min-height: auto;
            padding: 35px 15px;

            .section-title {
                font-size: 30px;
            }

            .section-subtitle {
                font-size: 15px;
                margin-bottom: 30px;
            }

            /* Change to vertical layout */
            .testimonials-grid {
                display: grid;
                grid-template-columns: 1fr;
                grid-template-rows: auto auto;
                height: auto;
                gap: 15px;
                margin-right: 0;
                border: 1px solid rgba(255, 255, 255, 0.1);
                padding: 15px;
            }

            /* Create visible grid lines for mobile */
            .horizontal-line.top {
                display: block;
                top: 0;
                width: 90%;
                left: 5%;
            }

            .horizontal-line.bottom {
                display: block;
                bottom: 0;
                width: 90%;
                left: 5%;
            }

            /* Hide other lines */
            .vertical-line,
            .horizontal-line.center-top,
            .horizontal-line.center-bottom {
                display: none;
            }

            /* Add a new horizontal line between elements */
            .testimonials-grid::after {
                content: "";
                position: absolute;
                height: 1px;
                width: 90%;
                left: 5%;
                top: 50%;
                background-color: rgba(255, 255, 255, 0.15);
            }

            /* Center author image */
            .author-image {
                grid-column: 1;
                grid-row: 1;
                justify-self: center;
                margin: 15px auto;
                max-width: 170px;
                max-height: 160px;
            }

            /* Position testimonial below image */
            .testimonial-content {
                grid-column: 1;
                grid-row: 2;
                justify-self: center;
                text-align: center;
                padding: 10px;
                margin: 0 0 15px 0;
            }

            .author-info {
                align-items: center;
            }
        }

        /* Mobile Portrait (up to 480px) */
        @media (max-width: 480px) {
            padding: 30px 10px;
            min-height: auto;
            background-position-y: -25%;

            .section-title {
                font-size: 26px;
            }

            .section-subtitle {
                font-size: 14px;
                margin-bottom: 25px;
            }

            /* Simplified vertical layout with visible borders */
            .testimonials-grid {
                display: grid;
                grid-template-columns: 1fr;
                grid-template-rows: auto auto;
                height: auto;
                gap: 10px;
                width: 95%;
                margin-right: 0;
                border: 1px solid rgba(255, 255, 255, 0.1);
                padding: 15px;
                position: relative;
            }

            /* Create visible grid lines for mobile */
            .horizontal-line.top {
                display: block;
                top: 0;
                width: 90%;
                left: 5%;
            }

            .horizontal-line.bottom {
                display: block;
                bottom: 0;
                width: 90%;
                left: 5%;
            }

            /* Add a new horizontal line between elements */
            .testimonials-grid::after {
                content: "";
                position: absolute;
                height: 1px;
                width: 90%;
                left: 5%;
                top: 50%;
                background-color: rgba(255, 255, 255, 0.15);
            }

            /* Hide other lines */
            .vertical-line,
            .horizontal-line.center-top,
            .horizontal-line.center-bottom {
                display: none;
            }

            /* Center and resize author image with better visibility */
            .author-image {
                grid-column: 1;
                grid-row: 1;
                justify-self: center;
                margin: 10px auto;
                max-width: 140px;
                max-height: 130px;
                border: 1px solid rgba(255, 255, 255, 0.15);
            }

            .author-top-circle {
                width: 35px;
                height: 35px;
                margin-bottom: 10px;
            }

            .author-bottom-shape {
                width: 65px;
                height: 28px;
            }

            /* Center testimonial content with better visibility */
            .testimonial-content {
                grid-column: 1;
                grid-row: 2;
                justify-self: center;
                text-align: center;
                padding: 10px 5px;
                margin: 0;
                border: 1px solid rgba(255, 255, 255, 0.15);
                margin-top: 20%;
            }

            .testimonial-quote {
                font-size: 15px;
                line-height: 1.3;
                margin-bottom: 15px;
            }

            .author-name {
                font-size: 15px;
            }

            .author-title {
                font-size: 12px;
            }

            .author-info {
                align-items: center;
            }
        }

        /* Extra Small Mobile */
        @media (max-width: 320px) {
            padding: 25px 8px;

            .section-title {
                font-size: 24px;
            }

            .section-subtitle {
                font-size: 13px;
            }

            .author-image {
                max-width: 120px;
                max-height: 110px;
            }

            .testimonial-quote {
                font-size: 14px;
            }
        }
    }

    /* Responsive Design */


    /* Add this to your existing CSS */
    .background-block {
        position: relative;
    }

    .background-image {
        position: fixed;
        bottom: -8%;
        right: -8%;
        width: 400px;
        height: 350px;
        z-index: 4;
        pointer-events: none;
        opacity: 0.7;
        transition: opacity 0.3s ease;
    }

    .background-block.hide-bg-image .background-image {
        opacity: 0;
    }

    .background-block::after {
        background-color: rgba(255, 0, 0, 0.3);
        /* Just for testing visibility */
    }


    /* Make sure content in FAQ section remains above the background */
    .faq-section {
        position: relative;
        z-index: 5;
    }

    /* Ensure form elements are above the background image */
    .contact-form {
        position: relative;
        z-index: 6;
    }

    /* Stop Window Shopping Hero Section Styles */
    .hero-container {
        display: flex;
        /* justify-content: space-between; */
        max-width: 100%;
        background-color: #0C111D;
        padding: 20px 12%;
        position: relative;
        height: 500px;
        gap: 18%;
        justify-content: center;
        align-items: center;
        align-self: center;
        overflow: hidden;
    }

    section.hero-container {
        height: 500px;
    }

    .hero-content {
        max-width: 500px;
        position: relative;
        align-self: center;
        z-index: 10;
        margin-left: 0px;
    }

    .hero-title {
        font-size: 56px;
        font-weight: bold;
        line-height: 1.1;
        margin-bottom: 20px;
    }

    .hero-subtitle {
        font-size: 18px;
        margin-bottom: 30px;
        cursor: pointer;
        text-underline-offset: 4px;
    }

    .button-container {
        display: flex;
        gap: 20px;
        margin-top: 40px;
    }

    .btn {
        padding: 15px 30px;
        border-radius: 30px;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .btn-outline {
        background: transparent;
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

    .btn-primary {
        background: white;
        color: #0c1016;
        border: none;
    }

    .decorative-element {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 350px;
        height: 350px;
        z-index: 1;
    }

    .image-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, auto);
        gap: 20px;
        max-width: 400px;
        margin-right: 0px;
        align-self: self-end;
        margin-top: 100px;
    }

    .grid-image {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .grid-image:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
        margin-top: 230%;
        margin-left: 45%;
    }

    .grid-image:nth-child(2) {
        grid-column: 3;
        margin-top: 180%;
        margin-left: -90px;
        grid-row: 1;
    }

    .grid-image:nth-child(3) {
        grid-column: 1;
        grid-row: 2;
    }

    .grid-image:nth-child(4) {
        grid-column: 2;
        grid-row: 2;
        height: 230px;
    }

    .grid-image:nth-child(5) {
        grid-column: 3;
        grid-row: 2;
        height: 100px;
    }

    .hover-image {
        position: absolute;
        left: 190px;
        top: 40%;
        width: 400px;
        overflow: none;
        opacity: 0;
        /* transition: opacity 0.5s ease-in-out, left 0.5s ease-in-out; */
        z-index: 5;
        pointer-events: none;
        /* This prevents the image from interfering with hover */
    }

    .hero-container:hover .hover-image {
        opacity: 0.8;
        left: -130px;
    }

    @media (max-width: 992px) {
        .hero-container {
            margin-left: 5%;
            flex-direction: column;
            align-items: center;
        }

        .hero-content {
            margin-left: 0;
            max-width: 90%;
            text-align: center;
            margin-bottom: 50px;
        }

        .button-container {
            justify-content: center;
        }

        .image-grid {
            margin-right: 0;
            max-width: 90%;
            margin-bottom: 50px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, auto);
            gap: 15px;
            height: auto;
        }

        .grid-image:nth-child(1) {
            grid-column: 1;
            grid-row: 1;
            margin-top: 0;
            margin-left: 0;
            height: auto;
            align-self: start;
        }

        .grid-image:nth-child(2) {
            grid-column: 2;
            grid-row: 1;
            margin-top: 0;
            margin-left: 0;
            height: auto;
        }

        .grid-image:nth-child(3) {
            grid-column: 1 / span 2;
            grid-row: 2;
            height: auto;
        }

        .grid-image:nth-child(4) {
            grid-column: 1;
            grid-row: 3;
            height: auto;
        }

        .grid-image:nth-child(5) {
            grid-column: 3;
            grid-row: 2 / span 2;
            height: auto;
            object-fit: cover;
        }

        .hover-image {
            position: absolute;
            left: -300px;
            top: 50%;
            transform: translateY(-50%);
            width: 80%;
            max-width: 300px;
            opacity: 0;
            margin: 0;
        }

        .hero-container:hover .hover-image {
            opacity: 1;
            left: 0;
        }
    }
    @media (max-width: 992px) {
        .hero-container {
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }
    
        .hero-content {
            max-width: 80%;
            text-align: center;
            transform: scale(0.9); /* Slightly smaller content */
        }
    
        .image-grid {
            grid-template-columns: repeat(2, 1fr);
            margin-top: 30px;
            max-width: 300px; /* Reduced size */
            transform: scale(0.9);
        }
    
        .hover-image {
            position: absolute;
            left: 10%;
            top: 60%;
            width: 250px;
        }
    }
    
    @media (max-width: 600px) {
        .hero-title {
            font-size: 28px;
        }
    
        .hero-subtitle {
            font-size: 14px;
        }
    
        .button-container {
            flex-direction: column;
            gap: 10px;
        }
    
        .hero-content {
            max-width: 75%;
            transform: scale(0.8); /* Further reduction for smaller screens */
        }
    
        .image-grid {
            grid-template-columns: repeat(1, 1fr);
            max-width: 250px; /* Reduced even more */
            transform: scale(0.8);
        }
    
        .hover-image {
            width: 180px;
            left: 0;
            top: 70%;
        }
    }
    
    @media (max-width: 768px) {
        .hero-container {
            margin-left: 0;
            padding: 30px 15px;
        }

        .hero-title {
            font-size: 36px;
        }

        .hero-subtitle {
            font-size: 16px;
        }

        .btn {
            padding: 12px 25px;
            font-size: 14px;
        }

        .image-grid {
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(3, auto);
            gap: 15px;
        }

        .grid-image:nth-child(1) {
            grid-column: 1;
            grid-row: 1;
        }

        .grid-image:nth-child(2) {
            grid-column: 2;
            grid-row: 1;
        }

        .grid-image:nth-child(3) {
            grid-column: 1 / span 2;
            grid-row: 2;
        }

        .grid-image:nth-child(4) {
            grid-column: 1;
            grid-row: 3;
        }

        .grid-image:nth-child(5) {
            grid-column: 2;
            grid-row: 3;
        }

        .hover-image {
            left: -250px;
            width: 70%;
            max-width: 250px;
        }
    }

    @media (max-width: 576px) {
        .hero-title {
            font-size: 28px;
        }

        .button-container {
            flex-direction: column;
            width: 100%;
        }

        .btn {
            width: 100%;
        }

        .image-grid {
            grid-template-columns: 1fr;
            grid-template-rows: repeat(5, auto);
        }

        .grid-image:nth-child(1),
        .grid-image:nth-child(2),
        .grid-image:nth-child(3),
        .grid-image:nth-child(4),
        .grid-image:nth-child(5) {
            grid-column: 1;
            margin: 0;
        }

        .grid-image:nth-child(1) {
            grid-row: 1;
        }

        .grid-image:nth-child(2) {
            grid-row: 2;
        }

        .grid-image:nth-child(3) {
            grid-row: 3;
        }

        .grid-image:nth-child(4) {
            grid-row: 4;
        }

        .grid-image:nth-child(5) {
            grid-row: 5;
        }

        .hover-image {
            left: -200px;
            width: 60%;
            max-width: 200px;
        }
    }

    .contact-container {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 800px;
        background-image: url('images/Contact page header.png');
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        color: white;
        font-family: Arial, sans-serif;
        position: relative;
        overflow: hidden;
        box-sizing: border-box;
        padding: 20px;

        .contact-form {
            width: 500px;
            text-align: left;
            padding: 40px;
            border-radius: 8px;
            backdrop-filter: blur(5px);
            z-index: 1;
            background-color: rgba(10, 20, 41, 0.5);
        }

        h1 {
            font-size: 2.2rem;
            margin: 0;
            line-height: 1.2;
            font-weight: bold;
        }

        .subtitle {
            margin: 0.5rem 0 2rem;
            opacity: 0.8;
            font-size: 1rem;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        label {
            display: block;
            margin-bottom: 0.5rem;
            font-size: 0.9rem;
        }

        .hint {
            font-size: 0.8rem;
            opacity: 0.7;
        }

        input,
        textarea,
        select {
            width: 100%;
            background-color: transparent;
            border: 1px solid rgba(255, 255, 255, 0.7);
            border-radius: 4px;
            padding: 0.8rem;
            color: white;
            font-size: 1rem;
            box-sizing: border-box;
        }

        .phone-input {
            display: flex;
            gap: 10px;
        }

        .country-selector {
            width: 80px;
            background-color: transparent;
            color: white;
        }

        button {
            width: 100%;
            background-color: white;
            color: #0a1429;
            border: none;
            border-radius: 4px;
            padding: 1rem;
            font-size: 1rem;
            cursor: pointer;
            font-weight: bold;
            margin-top: 1rem;
        }

        .sway-image {
            max-width: 480px;
            position: absolute;
            right: -10%;
            bottom: -100px;
        }

        @media (max-width: 1200px) {
            .sway-image {
                right: -7%;
                bottom: -80px;
                max-width: 400px;
            }
        }

        @media (max-width: 992px) {
            flex-direction: column;
            min-height: auto;
            padding-left: 100px;

            .contact-form {
                width: 80%;
                padding: 30px;
            }

            .sway-image {
                position: relative;
                margin-top: 20px;
                margin-right: 0;
                display: block;
                max-width: 350px;
                align-self: flex-end;
            }
        }

        @media (max-width: 768px) {
            .contact-form {
                width: 90%;
            }

            .sway-image {
                max-width: 300px;
                margin-right: 0;
            }
        }

        @media (max-width: 576px) {
            .contact-form {
                padding: 20px;
            }

            h1 {
                font-size: 1.8rem;
            }

            .subtitle {
                font-size: 0.9rem;
            }

            .sway-image {
                max-width: 250px;
                margin-right: 0;
            }
        }
    }


    /* FAQ Section */
    body {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        background-color: #060A14;
        color: #FFFFFF;
        margin: 0;
        padding: 20px;
    }

    .faq {
        .faq-section {
            margin: 0 10%;
            position: relative;
            max-width: 1200px;
            margin: 0 auto;
        }

        .faq-title {
            font-size: 36px;
            font-weight: 700;
            margin-bottom: 10px;
            padding-left: 4%;
        }

        .faq-subtitle {
            font-size: 18px;
            color: #94A3B8;
            /* margin-bottom: 40px; */
            padding-left: 4%;
            /* border-bottom: 1px solid rgba(255, 255, 255, 0.1); */

        }

        .faq-container {
            position: relative;
            display: flex;
            min-height: 600px;
            border-radius: 12px;
            overflow: hidden;
        }

        .faq-items-wrapper {
            width: 100%;
            background-color: #0C111D;
            padding: 4%;
            transition: width 0.3s ease;

        }

        /* FAQ Items */
        .faq-item {
            margin-bottom: 15px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            position: relative;
        }

        .faq-toggle {
            position: absolute;
            opacity: 0;
            z-index: -1;
        }

        .faq-question {
            display: block;
            padding: 20px 15px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            position: relative;
        }

        .faq-question::after {
            content: '+';
            position: absolute;
            right: 15px;
            font-size: 22px;
        }

        .faq-toggle:checked+.faq-question::after {
            content: '-';
        }

        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
            padding: 0 15px;
        }

        .faq-toggle:checked+.faq-question+.faq-answer {
            max-height: 300px;
            padding-bottom: 20px;
        }

        .answer-content p {
            margin-top: 0;
            color: #94A3B8;
            line-height: 1.6;
        }

        .action-button {
            display: inline-block;
            background-color: #3B82F6;
            color: white;
            padding: 10px 20px;
            border-radius: 6px;
            text-decoration: none;
            font-weight: 600;
            margin-top: 10px;
        }

        /* Feature sections - positioned outside of faq-items-wrapper */
        .feature-section {
            position: absolute;
            top: 0;
            right: 0;
            width: 40%;
            height: 100%;
            background-color: #0C111D;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            border-left: 1px solid rgba(255, 255, 255, 0.1);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            ;
            display: none;
            box-sizing: border-box;

            padding: 20px;
            align-items: center;
            justify-content: center;
        }

        .faq-container:has(.faq-toggle:checked) .faq-items-wrapper {
            width: 60%;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .feature-section img {
            max-width: 100%;
            max-height: 500px;
            object-fit: contain;
            /* border: 1px solid #2D3748; */
            border-radius: 8px;
        }

        /* Show feature sections when respective FAQ is checked */
        .faq-container:has(#faq1:checked) #team-seamless,
        .faq-container:has(#faq2:checked) #team-collaborate,
        .faq-container:has(#faq3:checked) #team-real-time-data,
        .faq-container:has(#faq4:checked) #team-seamless-integration,
        .faq-container:has(#faq5:checked) #team-collaboration,
        .faq-container:has(#faq6:checked) #support {
            display: flex;
        }

        /* When any FAQ toggle is checked, adjust the container layout */
        .faq-container:has(.faq-toggle:checked) .faq-items-wrapper {
            width: 60%;
        }
    }


    /* Wave Divider */
    .wave-divider {
        height: 150px;
        background: linear-gradient(to bottom, #0a0e17, #0f1829);
        position: relative;
        overflow: hidden;
        width: 100%;
        margin: 0 auto;
        max-width: 2000px;
        padding: 0;


        .wave-divider .container {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        .faq-support-text {
            color: white;
            font-size: 18px;
            text-align: center;
            z-index: 10;
            position: relative;
            margin-bottom: 120px;
            padding: 0 20px;
        }

        .chat-link {
            color: white;
            text-decoration: none;
        }

        .chat-link:hover {
            text-decoration: underline;
        }

        .wave {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            opacity: 0.7;
            height: 140px;
            background-image: url('images/Background.png');
            background-size: cover;
            background-position: center;
            border-radius: 0 0 20% 20% / 0 0 20% 20%;
            transform: scaleX(1.5);
            overflow: hidden;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .wave-divider {
                height: 170px;
            }

            .faq-support-text {
                font-size: 16px;
                margin-bottom: 90px;
            }
        }

        @media (max-width: 576px) {
            .wave-divider {
                height: 130px;
            }

            .faq-support-text {
                font-size: 14px;
                margin-bottom: 90px;
            }

            .wave {
                height: 120px;
            }
        }
    }

    /* Footer */
    .footer {
        background-color: #0C111D;
        position: relative;
        max-width: 2000px;
        overflow: hidden;
        min-height: 300px;
        width: 100%;
        margin: 0 auto;
        padding: 50px 0;


        .footer-content {
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-bottom: 120px;
        }

        .footer-logo {
            display: flex;
            align-items: center;
        }

        img {
            /* width: 50px; */
            height: 50px;
            /* border-radius: 50%; */
            overflow: hidden;
        }

        .footer-logo-text {
            color: white;
            font-size: 24px;
            font-weight: bold;
            margin-left: 10px;
        }

        .footer-nav {
            display: flex;
            flex-direction: column;
            align-items: right;
        }

        .footer-nav a {
            color: white;
            text-decoration: none;
            margin: 5px 0;
            font-size: 14px;
        }

        .footer-contact {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            text-align: right;
        }

        .footer-contact p {
            color: white;
            margin: 5px 0;
            font-size: 14px;
        }

        .footer-social {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin: 5px 0 10px;
        }

        .social-icon {
            width: 24px;
            height: 24px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .footer-bottom {
            display: flex;
            justify-content: space-around;
            align-items: center;
            color: #6c7989;
            font-size: 12px;
            gap: 32%;
        }

        .made-with-love {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .made-with-love strong {
            color: #fff;
        }

        .heart {
            color: white;
        }

        .footer-illustration {
            position: absolute;
            bottom: 0;
            left: 0;
            max-width: 180px;
            z-index: 1;
            /* Ensure visibility */
        }

        @media (max-width: 768px) {
            .footer-content {
                flex-direction: column;
                align-items: center;
                text-align: center;
                align-self: center;
                margin-bottom: 50px;
            }

            .footer-contact {
                align-items: center;
                text-align: center;
                margin-top: 20px;
            }

            .footer-social {
                justify-content: center;
            }

            .footer-bottom {
                flex-direction: column;
                gap: 10px;
            }

            .footer-nav {
                margin: 20px 0;
            }


        }
    }


    /* Responsive Global Adjustments */
    @media screen and (max-width: 1440px) {
        .testimonials-section {
            padding: 30px 40px;
            align-items: center;
            align-self: center;
            text-align: center;
            align-content: center;
        }

        .testimonials-grid {
            grid-template-columns: 1fr;
            /* Single column */
            grid-template-rows: auto auto;
            text-align: center;
        }

        .author-image {
            grid-column: 1 / span 1;
            /* Take full width */
            grid-row: 1;
            max-width: 150px;
            max-height: 140px;
        }

        .testimonial-content {
            grid-column: 1 / span 1;
            grid-row: 2;
            padding: 15px;
            text-align: center;
        }

        .testimonial-quote {
            font-size: 16px;
        }

        .author-name {
            font-size: 16px;
        }

        .author-title {
            font-size: 12px;
        }

        .section-title {
            font-size: 30px;
        }

        .section-subtitle {
            font-size: 14px;
        }

        /* .navbar {
            padding: 10px 100px;
        } */

        .hero-container {
            /* margin-left: 100px; */
            padding: 20px 12% 20px 12%;
        }

        .products-section {
            padding: 50px 50px;
        }

        .products-left .our-products {

            margin-top: 30px;
            left: 47rem;
        }

        .products-left .arrow {
            left: 47rem;
        }

        .cards-container {
            margin: 0px 11% 80px 12%;
        }

        .footer-container {
            padding: 50px 100px;
        }

        .footer-bottom {
            padding: 0 100px;
        }
    }

    /* Tablet Responsive Design */
    @media screen and (max-width: 1024px) {
        .testimonials-section {
            padding: 30px 40px;
            align-items: center;
            align-self: center;
            text-align: center;
            align-content: center;
        }

        .testimonials-grid {
            grid-template-columns: 1fr;
            /* Single column */
            grid-template-rows: auto auto;
            text-align: center;
        }

        .author-image {
            grid-column: 1 / span 1;
            /* Take full width */
            grid-row: 1;
            max-width: 150px;
            max-height: 140px;
        }

        .testimonial-content {
            grid-column: 1 / span 1;
            grid-row: 2;
            padding: 15px;
            text-align: center;
        }

        .testimonial-quote {
            font-size: 16px;
        }

        .author-name {
            font-size: 16px;
        }

        .author-title {
            font-size: 12px;
        }

        .section-title {
            font-size: 30px;
        }

        .section-subtitle {
            font-size: 14px;
        }

        /* .navbar {
            flex-direction: column;
            padding: 10px 20px;
        }

        .nav-left,
        .nav-right {
            flex-direction: column;
            align-items: center;
            width: 100%;
        } */

        .hero-container {
            flex-direction: column;
            margin-left: 0;
            text-align: center;
            padding: 50px;
            align-self: center;
            justify-content: center;
            align-items: center;
        }

        .hero-content {
            max-width: 100%;
            margin-bottom: 30px;
        }

        .products-section {
            flex-direction: column;
            padding: 20px;
        }


        .products-left .our-products {

            margin-top: 30px;
            left: 60rem;
        }

        .products-left .arrow {
            left: 47rem;
        }

        .image-grid {
            max-width: 100%;
            margin-right: 100px;
        }

        .testimonials-grid {
            grid-template-columns: 1fr;
            height: auto;
            left: 0;
            width: 100%;
        }

        .contact-form {
            width: 90%;
            margin: 0 auto;
        }

        .sway-image {
            right: 0;
        }

        .faq-section {
            padding: 10px 50px;
        }

        /* .footer-container {
        flex-direction: column;
        align-items: center;
        padding: 40px 50px;
    } */

        .footer-links,
        .footer-contact {
            text-align: center;
            margin: 15px 0;
        }

        .footer-illustration {
            max-width: 200px;
            left: 10px;
            bottom: 5px;
        }

        .footer-bottom {
            flex-direction: column;
            text-align: center;
            padding: 0 40px;
        }
    }

    /* Mobile Responsive Design */
    @media screen and (max-width: 768px) {
        body {
            font-size: 14px;
        }

        .about-us-title {
            font-size: 2.5rem;
            /* 40px */
            margin-bottom: 25px;
        }

        .about-us-description {
            font-size: 1.125rem;
            /* 18px */
            margin-bottom: 60px;
        }

        .testimonials-grid {
            grid-template-columns: 1fr 1fr;
            /* 2 columns */
            grid-template-rows: auto auto;
            gap: 15px;
        }

        .author-image {
            grid-column: 1 / span 1;
            /* Move to first column */
            grid-row: 2 / span 1;
            width: 100%;
            max-width: 180px;
            max-height: 160px;
        }

        .testimonial-content {
            grid-column: 2 / span 1;
            grid-row: 2 / span 1;
            padding: 20px;
        }

        .testimonial-quote {
            font-size: 18px;
        }

        .section-title {
            font-size: 36px;
        }

        .section-subtitle {
            font-size: 16px;
        }

        .hero-title {
            font-size: 36px;
        }

        .hero-subtitle {
            font-size: 16px;
        }

        .button-container {
            flex-direction: column;
            align-items: center;
        }

        .btn {
            width: 100%;
            margin-bottom: 10px;
        }

        .product-card {
            flex-direction: column;
            height: auto;
        }

        .product-content {
            padding: 20px;
        }

        .card {
            min-width: 100%;
        }

        .decorative-image,
        .sway-image {
            display: none;
        }

        .wave-divider {
            height: 100px;
        }

        /* .footer {
            padding: 40px 20px;
        }

        .footer-container {
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .footer-illustration {
            max-width: 380px;
            left: 5px;
            bottom: 0;
        }

        .footer-links {
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
        }

        .footer-bottom {
            padding: 0 20px;
        } */
    }

    /* Ultra Mobile Responsive Design */
    @media screen and (max-width: 480px) {
        .about-us-title {
            font-size: 2rem;
            /* 32px */
            margin-bottom: 20px;
        }

        .about-us-description {
            font-size: 1rem;
            /* 16px */
            margin-bottom: 40px;
            line-height: 1.5;
        }

        .testimonials-grid {
            grid-template-columns: 1fr;
            /* Single column */
            grid-template-rows: auto auto;
            text-align: center;
        }

        .author-image {
            grid-column: 1 / span 1;
            /* Take full width */
            grid-row: 1;
            max-width: 150px;
            max-height: 140px;
        }

        .testimonial-content {
            grid-column: 1 / span 1;
            grid-row: 2;
            padding: 15px;
            text-align: center;
        }

        .testimonial-quote {
            font-size: 16px;
        }

        .author-name {
            font-size: 16px;
        }

        .author-title {
            font-size: 12px;
        }

        .section-title {
            font-size: 30px;
        }

        .section-subtitle {
            font-size: 14px;
        }

        .hero-title {
            font-size: 28px;
        }

        .heading {
            font-size: 24px;
            margin-left: 0;
        }

        .section-title {
            font-size: 28px;
        }

        .faq-question {
            font-size: 16px;
        }

        .contact-form {
            padding: 20px;
        }

        input,
        textarea,
        select {
            font-size: 14px;
            padding: 0.5rem;
        }

        .wave-divider {
            height: 130px;
        }

        .faq-support-text {
            font-size: 14px;
            margin-bottom: 90px;
        }

        .faq-section {
            padding-left: 150px;
        }

        .wave {
            height: 120px;
        }

        .footer-container {
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 30px 20px;
        }

        .footer-left {
            margin-bottom: 20px;
        }

        .footer-logo {
            display: flex;
            flex-direction: column;
            align-items: center;

        }

        .footer-links {
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 0;
            margin-bottom: 20px;
        }

        .footer-contact {
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: center;
            text-align: center;
            margin-bottom: 40px;
        }

        .footer-social {
            display: flex;
            justify-content: center;
            gap: 10px;
        }

        .footer-bottom {
            flex-direction: column;
            text-align: center;
            font-size: 14px;
            padding: 10px 20px;
        }

        .footer-illustration {
            max-width: 200px;
            display: block;
            margin: 0px 50px;
        }
    }

}