/* Base Carousel Styles */
#carousel {
    position: relative;
    height: 340px;
    overflow: hidden;
    display: flex;
    align-items: end;
    width: 100%;
}

#carousel div {
    position: absolute;
    transition: transform 0.8s ease, left 0.8s ease, opacity 0.8s ease;
    opacity: 1;
}

#carousel div img {
    width: 500px;
    transition: width 0.8s ease, height 0.8s ease;
}

/* Hidden images on the left and right */
#carousel div.hideLeft {
    left: -20%;
    opacity: 0;
    transform: translateY(50%) translateX(-50%);
}

#carousel div.hideLeft img {
    width: 120px;
}

#carousel div.hideRight {
    left: 150%;
    opacity: 0;
    transform: translateY(50%) translateX(-50%);
}

#carousel div.hideRight img {
    width: 150px;
}

/* Styles for the previous and next images */
#carousel div.prev {
    z-index: 5;
    left: 32%;
    transform: translateY(50px) translateX(-50%);
}

#carousel div.prev img {
    width: 400px;
    height: 220px;
    object-fit: cover;
    filter: grayscale(100%);
}

#carousel div.prevLeftSecond {
    z-index: 4;
    left: 2%;
    transform: translateY(5%) translateX(-50%);
    opacity: 0.7;
}

#carousel div.prevLeftSecond img {
    width: 300px;
    height: 180px;
    object-fit: cover;
    filter: grayscale(100%);
}

#carousel div.selected {
    z-index: 10;
    left: 70%;
    transform: translateY(0px) translateX(-50%);
}

#carousel div.next {
    z-index: 5;
    left: 108%;
    transform: translateY(50px) translateX(-50%);
}

#carousel div.next img {
    width: 400px;
    height: 220px;
    object-fit: cover;
    filter: grayscale(100%);
}

#carousel div.nextRightSecond {
    z-index: 4;
    left: 130%;
    transform: translateY(50%) translateX(-50%);
    opacity: 0.7;
}

#carousel div.nextRightSecond img {
    width: 300px;
}

@media (max-width: 1400px) {
    #carousel div.prevLeftSecond {
        left: 1%;
    }

    #carousel div.prev {
        left: 32%;
    }

    #carousel div.prev img {
        width: 310px;
    }

    #carousel div img {
        width: 410px;
    }

    #carousel div.selected {
        left: 68%;
    }

    #carousel div.next {
        left: 108%;
    }

}

@media (max-width: 1200px) {
    #carousel div.prevLeftSecond {
        left: -7%;
    }

    #carousel div.prev {
        left: 27%;
    }

    #carousel div.selected {
        left: 67%;
    }

    #carousel div.next {
        left: 112%;
    }

    .property-section .px-5 {
        padding-right: 2rem !important;
        padding-left: 0rem !important;
    }
}



/* Responsive Adjustments */
@media (max-width: 992px) {
    /* #carousel div img {
        width: 350px;
        height: 200px;
    }

    #carousel div.prev,
    #carousel div.next {
        left: 10%;
    }

    #carousel div.selected {
        left: 60%;
    }

    #carousel div.prevLeftSecond,
    #carousel div.nextRightSecond {
        opacity: 0.6;
    } */

    #carousel div.selected {
        left: 75%;
    }

    #carousel div.next {
        left: 10%;
    }

    #carousel div.prev {
        left: 15%;
    }

    #carousel div img {
        width: 450px;
        height: 350px;
        object-fit: cover;
    }
}

@media (max-width: 768px) {

    .property-section {
        height: 500px;

        .row.w-50 {
            width: 100% !important;
        }
    }

    .property-section .px-5 {
        padding-right: 0rem !important;
        padding-left: 0rem !important;
    }

    #carousel {
        height: 290px;
    }

    #carousel div img {
        width: 531px;
        height: 290px;
    }

    #carousel div.prev,
    #carousel div.next {
        left: -20%;
    }

    #carousel div.selected {
        left: 48%;
    }
}

/* Button Styles */
.buttons {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
}

.buttons .left-button button {
    background-color: #fff;
    border: 1px solid #333333;
    border-radius: 50%;
    padding: 5px 14px;
    margin: 0 5px;
    cursor: pointer;
}

.buttons .right-button a {
    border-radius: 4px;
}