/* General Styles for the Carousel Container */
#custom33 .container .carousel-container {
    position: relative;
    width: 100%;
    margin: 0;
    justify-content: center;
    display: flex;
    font-family: Arial, sans-serif;
    align-items: center;
}

/* Carousel Home Container */
.carousel-home-container {
    position: relative;
    width: 100%;
    height: 50vh; /* Adjust height as needed */
    margin: 0;
    justify-content: center;
    display: flex;
    align-items: center;
}

/* Carousel Home (Inner Wrapper) */
.carousel-home {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Carousel Inner (Scrollable Container) */
.carousel-inner-home {
    display: flex;
    transition: transform 0.5s ease; /* Smooth transition for desktop */
    width: 100%;
}

/* Carousel Cards */
.carousel-card-home {
    flex: 0 0 auto; /* Prevent cards from shrinking or growing */
    scroll-snap-align: start; /* Snap cards into place on mobile */
    box-sizing: border-box;
    padding: 0 10px; /* Add spacing between cards */
}

/* Desktop: Set card width based on cardsPerPage */
@media (min-width: 768px) {
    .carousel-card-home {
        flex: 0 0 calc(100% / var(--cards-per-page)); /* Dynamic width based on cardsPerPage */
        max-width: calc(100% / var(--cards-per-page)); /* Ensure cards don't exceed their width */
    }
}

/* Mobile: Each card takes full width */
@media (max-width: 767.98px) {
    .carousel-container {
        overflow-x: auto; /* Enable horizontal scrolling */
        scroll-snap-type: x mandatory; /* Snap cards into place */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }

    .carousel-inner-home {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth; /* makes snapping smooth */
    }

    .carousel-card-home {
        flex: 0 0 100%;
        scroll-snap-align: start;
    }
}

/* Card Inner Container */
.carousel-card-home .carousel-card-inner {
    border-radius: 10px; /* Rounded corners for the entire card */
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: white; /* Ensure background color is white for the main card */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: add some shadow for better visual */
}

/* Property Card Styles */
.property-home-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

/* Button Container */
.button-container {
    width: 100%; /* Ensures buttons span the card width */
}

    .button-container button {
        padding: 10px 20px;
        font-size: 14px;
        border-radius: 5px;
    }

/* Hover Effect for Cards */
.carousel-card-inner:has(:hover) {
    box-shadow: 0 6px 12px rgba(255, 127, 80, 0.2);
}

/* Card Top Section (Image) */
.property-home-card .card-top {
    flex: 1;
    display: flex;
    height: 65%;
    justify-content: center;
    align-items: center;
}

    .property-home-card .card-top img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ensure the image covers the top portion without stretching */
        max-height: 100%;
    }

/* Card Bottom Section (Content) */
.property-home-card .card-bottom {
    display: flex;
    flex-direction: column;
    height: 40%;
}

/* Navigation Buttons */
.carousel-home-container .carousel-home-btn {
    background-color: transparent;
    color: black;
    border: none;
    border-radius: 50%;
    padding: 10px;
    z-index: 1;
    height: 40px; /* Adjust button height */
}

/* Hide navigation buttons on mobile */
@media (max-width: 767.98px) {
    .carousel-home-btn {
        display: none;
    }
}

/* Hover Effect for Navigation Buttons */
.carousel-home-btn:hover {
    color: coral;
}

/* Previous Button */
.prev-home-btn {
    margin-right: 10px;
}

/* Next Button */
.next-home-btn {
    margin-left: 10px;
}

/* Custom Font Size */
.custom-font {
    font-size: 0.8rem; /* Adjust the size as needed */
}

/* ---------------------------- Details pop up carousel --------------------------- */

.carousel-container-details .carousel-details-container {
    position: relative;
    width: 100%;
    height: 35vh;
    margin: 0;
    justify-content: center;
    display: flex;
    font-family: Arial, sans-serif;
    align-items: center;
}

.carousel-details-container .carousel-details {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.carousel-details .carousel-inner-details {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.8s ease;
}

.carousel-inner-details .carousel-card-details {
    min-width: 33.33%;
    max-width: 33.33%;
    padding: 5px; /* Add padding around each card */
    height: 100%;
    box-sizing: border-box;
}

.carousel-card-details .carousel-card-inner {
    border-radius: 10px; /* Rounded corners for the entire card */
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: white; /* Ensure background color is white for the main card */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: add some shadow for better visual */
}

.property-details-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}