.control {
    position: relative;
    width: 100%;
}

.slide {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    gap: 20px; /* Space between images */
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: goldenrod ; /* For Firefox */
}

.slide img {
    flex-shrink: 0; /* Prevent images from shrinking */
    max-width: 100%; /* Responsive image size */
    width: 200px;
}

#prevSlide, #nextSlide {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 24px; 
    background-color: goldenrod; 
    color: black; 
    border: none; /* Remove default button borders */
    padding: 10px 20px; /* Padding around the text */
    cursor: pointer; /* Change cursor to pointer on hover */
    outline: none; /* Remove focus outline */
    transition: background-color 0.3s ease; /* Smooth transition for background color */
}

#prevSlide {
    left: 20px;
    background-color: goldenrod;
}

#nextSlide {
    right: 20px;
    background-color: goldenrod;
}

/* Enhanced Media Queries for Responsiveness */
@media (max-width: 480px) { /* Portrait phones */
    .slide {
        gap: 15px; /* Reduce space between images on smaller screens */
    }

    #prevSlide, #nextSlide {
        padding: 8px; /* Smaller buttons on smaller screens */
    }
}

@media (min-width: 481px) and (max-width: 1024px) { /* Landscape phones and tablets */
    .slide {
        gap: 15px; /* Adjust gap for landscape orientation */
    }

    #prevSlide, #nextSlide {
        padding: 7px; /* Slightly larger buttons for landscape */
    }
}

@media (min-width: 1025px) { /* Small laptops and larger screens */
    .slide {
        gap: 20px; /* Default gap for larger screens */
    }

    #prevSlide, #nextSlide {
        padding: 10px; /* Default button size for larger screens */
    }
}



/*.slider {*/
/*    width: 100%;*/
/*    overflow: hidden;*/
/*}*/

/*.slides {*/
/*    display: flex;*/
    animation: slide 140.6s infinite; /* Adjust duration as needed */
/*}*/

/*.slide {*/
    min-width: 100%; /* Ensure each slide takes full width */
/*}*/
/*#prevSlide, #nextSlide {*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    transform: translateY(-50%);*/
/*    background-color: rgba(255, 255, 255, 0.8);*/
/*    border: none;*/
/*    padding: 10px 20px;*/
/*    cursor: pointer;*/
/*}*/

/*#prevSlide {*/
/*    left: 10px;*/
/*}*/

/*#nextSlide {*/
/*    right: 10px;*/
/*}*/

/*@keyframes slide {*/
/*    0% { transform: translateX(0); }*/
/*    7.69% { transform: translateX(-100%); }*/
/*    15.38% { transform: translateX(-100%); }*/
/*    23.08% { transform: translateX(-200%); }*/
/*    30.77% { transform: translateX(-200%); }*/
/*    38.46% { transform: translateX(-300%); }*/
/*    46.15% { transform: translateX(-300%); }*/
/*    53.85% { transform: translateX(-400%); }*/
/*    61.54% { transform: translateX(-400%); }*/
/*    69.23% { transform: translateX(-500%); }*/
/*    76.92% { transform: translateX(-500%); }*/
/*    84.62% { transform: translateX(-600%); }*/
/*    92.31% { transform: translateX(-600%); }*/
/*    100% { transform: translateX(-1200%); }*/
/*}*/

/*.slide:nth-child(n) {*/
/*    animation-delay: calc((n - 1) * 0.5s);*/
/*}*/


/*@media screen and (orientation: portrait) {*/
/*    .slide img {*/
        max-width: 100%; /* Ensures the image scales down if needed */
        height: auto; /* Maintains aspect ratio */
        object-fit: cover; /* Crops the image to fill the container if necessary */
/*    }*/
/*}*/

/*@media screen and (orientation: landscape) {*/
/*    .slide img {*/
        max-width: 90%; /* Slightly smaller than full width for some padding/margin */
/*        height: auto;*/
/*        object-fit: cover;*/
/*    }*/
/*}*/