/* Adjustments for city cards */
.city-card {
    position: relative;
}

.city-carousel {
    overflow: hidden;
    border-radius: 15px;
}

.city-image {
    border-radius: 15px;
    height: 300px; /* Adjust as needed */
    object-fit: cover;
    transition: transform 0.3s ease;
}

.city-image:hover {
    transform: scale(1.05); /* Scale up on hover */
}

/* Carousel controls */
.carousel-control-prev, .carousel-control-next {
    width: 40px; /* Adjust size as needed */
    height: 40px; /* Adjust size as needed */
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.7; /* Reduced opacity */
    transition: opacity 0.3s ease;
}

.carousel-control-prev:hover, .carousel-control-next:hover {
    opacity: 1; /* Full opacity on hover */
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    font-size: 20px; /* Adjust size as needed */
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .city-card {
        flex-basis: 50%; /* Two columns on medium devices */
    }
}

@media (max-width: 768px) {
    .city-card {
        flex-basis: 100%; /* Full width on small devices */
    }
    
    .city-image {
        height: 200px; /* Adjust height for smaller screens */
    }
}