.carousel {
    position: relative;
    overflow: hidden;
}

.carousel__track {
    display: flex;
    gap: var(--spacing-xl);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    padding: var(--spacing-sm) 0;
}

.carousel__track::-webkit-scrollbar {
    display: none;
}

.carousel__slide {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

/* Logo carousel */
.logo-carousel {
    padding: var(--spacing-3xl) 0;
}

.logo-carousel .carousel__track {
    animation: logo-scroll 30s linear infinite;
}

.logo-carousel:hover .carousel__track {
    animation-play-state: paused;
}

.logo-carousel__item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--spacing-xl);
    opacity: 0.6;
    transition: opacity var(--transition-base);
    filter: grayscale(100%);
}

.logo-carousel__item:hover {
    opacity: 1;
    filter: grayscale(0%);
}

.logo-carousel__item img {
    max-height: 40px;
    width: auto;
    object-fit: contain;
}

@keyframes logo-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Property carousel */
.property-carousel .carousel__track {
    gap: var(--spacing-xl);
    padding: var(--spacing-md);
}

.property-carousel .carousel__slide {
    flex: 0 0 calc(33.333% - var(--spacing-xl));
    min-width: 300px;
}

/* Carousel navigation */
.carousel__nav {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xl);
}

.carousel__btn {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.carousel__btn:hover {
    background-color: var(--color-accent-green);
    border-color: var(--color-accent-green);
    color: var(--color-white);
}

.carousel__btn svg {
    width: 20px;
    height: 20px;
}

.carousel__dots {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
}

.carousel__dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    background-color: var(--color-border);
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.carousel__dot--active {
    background-color: var(--color-accent-green);
}