﻿/* Div 5 - Clients Carousel */
.div5 {
    padding: 40px 20px;
    text-align: center;
    position: relative;
}

.carousel {
    position: relative;
    display: block; /* Changed from flex to block to avoid centering interference */
    width: 100%;
    max-width: 100%; /* Removed 900px limit to allow full width */
    margin: 0 auto;
    overflow: hidden; /* Hide overflow from the entire carousel */
}

.carousel-images {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto; /* Enable horizontal scrolling */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    width: auto; /* Allow content to determine width */
    padding: 0 40px; /* Add padding to ensure images are visible at edges */
}

.carousel img {
    width: 200px;
    height: 100px;
    margin: 0 10px;
    object-fit: cover;
    flex-shrink: 0; /* Prevent images from shrinking */
}

.carousel-prev, .carousel-next {
    background-color: #C89B3C;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    position: absolute;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    transition: background-color 0.3s;
}

    .carousel-prev:hover, .carousel-next:hover {
        background-color: #A87A2F;
    }

.carousel-prev {
    left: 10px;
}

.carousel-next {
    right: 10px;
}

@media (max-width: 768px) {
    .carousel {
        max-width: 100%;
    }

        .carousel img {
            width: 150px;
            margin: 0 5px;
        }

    .carousel-prev, .carousel-next {
        padding: 8px;
    }
}

/* Div 6 - Partners Carousel */
.div6 {
    padding: 40px 20px;
    text-align: center;
    position: relative;
}

    .div6 .carousel {
        position: relative;
        display: block; /* Changed from flex to block to avoid centering interference */
        width: 100%;
        max-width: 100%; /* Removed 900px limit to allow full width */
        margin: 0 auto;
        overflow: hidden; /* Hide overflow from the entire carousel */
    }

    .div6 .carousel-images {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto; /* Enable horizontal scrolling */
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        width: auto; /* Allow content to determine width */
        padding: 0 40px; /* Add padding to ensure images are visible at edges */
    }

    .div6 .carousel img {
        width: 200px;
        height: 100px;
        margin: 0 10px;
        object-fit: cover;
        flex-shrink: 0; /* Prevent images from shrinking */
    }

    .div6 .carousel-prev, .div6 .carousel-next {
        background-color: #C89B3C;
        color: white;
        border: none;
        padding: 10px;
        cursor: pointer;
        position: absolute;
        z-index: 1;
        top: 50%;
        transform: translateY(-50%);
        transition: background-color 0.3s;
    }

        .div6 .carousel-prev:hover, .div6 .carousel-next:hover {
            background-color: #A87A2F;
        }

    .div6 .carousel-prev {
        left: 10px;
    }

    .div6 .carousel-next {
        right: 10px;
    }

@media (max-width: 768px) {
    .div6 .carousel {
        max-width: 100%;
    }

        .div6 .carousel img {
            width: 150px;
            margin: 0 5px;
        }

    .div6 .carousel-prev, .div6 .carousel-next {
        padding: 8px;
    }
}

/* Color Bar Divider */
.color-bar {
    width: 100%;
    height: 4px;
    background-color: #C89B3C;
}
