.carousel-inner {
    padding: 1.1rem;
    overflow: visible;
}

.cards-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-container {
    transition: all 1.5s ease ;
    padding: 0 10px;
    transform-origin: center center;
}

.carousel-item {
    transition: transform 0.9s ease-in-out, opacity 0.9s ease-in-out;
    padding-right: 15px;
    padding-left: 15px;
}


/* Style for side cards */
.center-card,
.left-card,
.right-card {
    height: 90%;
    opacity: 0.85;
}


/* Ensure cards have consistent height */
.property-card {
    height: 100%;
    margin: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: all 0.9s ease;
}

/* Carousel controls */
.carousel-control-prev,
.carousel-control-next {
    width: 3rem;
    background-color: rgba(0,0,0,0.2);
    height: 20%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    border-radius: 10px;
}

.carousel-control-prev {
    left: 0;
}

.carousel-control-next {
    right: 0;
}

/* Change the color of the active page */
.page-item.active {
    background-color: #ffffff; /* Replace with your desired color */
    border-color: #ffffff;     /* Replace with your desired color */
    color: white;              /* Text color for active page */
}

/* Change the color of the pagination links */
.page-link {
    color: #6c757d;            /* Text color for non-active pages */
    border-color: #dee2e6;     /* Border color for non-active pages */
}

/* Change hover color for pagination links */
.page-link:hover {
    color: #000000;            /* Text color when hovering over pagination */
    border-color: #000000;     /* Border color when hovering */
}

/* Add hover effects */
.center-card:hover,
.left-card:hover,
.right-card:hover {
    transform: scale(1.1);
    opacity: 1;
    z-index: 4;
    /* cursor: pointer; */
}

/* Default style for all cards (large screens) */
.cards-wrapper .card-container {
    display: flex;
}


/* Media queries para tablets */
@media screen and (max-width: 1200px) {
    .card-container {
        width: 85%;
        margin-bottom: 15px;
    }

    .cards-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
}

/* Media queries para móviles */
@media screen and (max-width: 768px) {
    .cards-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .card-container {
        width: 85%; /* Ancho más pequeño en móvil */
        margin-bottom: 15px;
    }

    /* Ajustes para el contenido de la card en móvil */
    .property-card {
        font-size: 14px; /* Texto más pequeño */
        max-width: 100%;
    }

    .property-card h3 {
        font-size: 18px;
    }

    .property-card img {
        height: 200px; /* Imagen más pequeña */
        object-fit: cover;
    }

    /* Ajustes para los botones del carrusel en móvil */
    .carousel-control-prev,
    .carousel-control-next {
        width: 10%;
    }
}

/* Ajustes específicos para pantallas muy pequeñas */
@media screen and (max-width: 480px) {
    .card-container {
        width: 95%;
    }

    .property-card {
        font-size: 13px;
    }

    .property-card img {
        height: 180px;
    }
}

@media screen and (max-width: 370px) {
    .card-container{
        width: 100%;
    }

    .prop-card {
        height: 11rem;
    }

    .text-section {
        padding: 20px 15px 15px 12px;
    }



}