.bg-hero {
    position: relative;
    color: white;
    display: flex; /* Use flexbox to position images and content */
    align-items: center; /* Vertically center content */
    justify-content: space-between; /* Distribute space between images and content */
    padding: 20px; /* Add some padding */
}

.bg-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.bg-hero > * {
    position: relative;
    z-index: 2;
}

.bg-hero .hero-image {
    width: 30%; /* Adjust as needed */
    height: 200px; /* Adjust as needed */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.bg-hero .hero-image.left {
    background-image: url('img/Dreamweaver.jpg'); /* Left image */
}

.bg-hero .hero-image.right {
    background-image: url('img/store.jpg'); /* Right image */
}

.bg-hero .hero-content {
    width: 40%; /* Adjust as needed */
    text-align: center;
}

/* Mobile menu styles */
#mobile-menu {
    display: none;
}

#mobile-menu.active {
    display: block;
}

/* Product carousel styles */
.product-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px; /* Add some padding to prevent content from being cut off */
}

.product-item {
    flex: 0 0 50%; /* Two items on small screens */
    padding: 5px;
    scroll-snap-align: start;
    box-sizing: border-box;
}

/* Larger screens */
@media (min-width: 768px) {
    .product-item {
        flex: 0 0 33.333%; /* Three items on medium screens */
    }
}

@media (min-width: 1024px) {
    .product-item {
        flex: 0 0 25%; /* Four items on large screens */
    }
}

/* Testimonial slider styles */
.testimonial-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px; /* Add some padding to prevent content from being cut off */
}

.testimonial-item {
    flex: 0 0 100%; /* One item at a time */
    padding: 5px;
    scroll-snap-align: start;
    box-sizing: border-box;
}

/* Larger screens */
@media (min-width: 768px) {
    .testimonial-item {
        flex: 0 0 50%; /* Two items on medium screens */
    }
}

@media (min-width: 1024px) {
    .testimonial-item {
        flex: 0 0 33.333%; /* Three items on large screens */
    }
}

@media (max-width: 768px) {
    .bg-hero {
        flex-direction: column; /* Stack content vertically */
        padding: 10px; /* Reduce padding for smaller screens */
    }

    .bg-hero .hero-content {
        width: 100%; /* Take full width */
        margin-bottom: 20px; /* Add spacing between content and images */
    }

    .bg-hero .hero-image {
        width: 80%; /* Reduce image size */
        height: 150px; /* Adjust height */
        margin: 10px auto; /* Center images */
    }
}

/* Prevent horizontal scrolling */
body {
    overflow-x: hidden; /* Disable horizontal scrolling */
}

* {
    max-width: 100%; /* Ensure no element exceeds the viewport width */
    box-sizing: border-box; /* Include padding and border in element width */
}

/* Responsive iframe for the map */
iframe {
    max-width: 100%; /* Ensure iframe does not exceed the container width */
    height: auto; /* Maintain aspect ratio */
}