/* General Styling */
.hero-section {
    position: relative;
    overflow: hidden;
    height: 75vh; /* Slightly reduce the overall height */
}

.hero-section .carousel-item {
    height: 95vh; /* Reduce height even more for conciseness */
}

.hero-section .carousel-item img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.carousel-control-prev,
.carousel-control-next {
    z-index: 3; /* Ensure the arrows are on top */
    visibility: visible;
}

/* Centered and Responsive Caption */
.hero-section .carousel-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* Responsive Typography */
.hero-section h1 {
    font-size: clamp(1.2rem, 3vw, 2.5rem); /* Slightly larger for mobile */
    margin-bottom: 0.3rem;
}

.hero-section .lead {
    font-size: clamp(0.9rem, 2.5vw, 1.3rem); /* Slightly larger lead text */
    margin-bottom: 0.5rem; /* Reduced space below the text */
}

/* Improved Logo Styling */
.hero-section .hero-logo {
    max-width: 20%; /* Increased size for mobile */
    height: auto;
    margin-bottom: 1rem; /* More space for larger logo */
}

/* City Buttons Styling */
.city-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem; /* Slightly reduced gap */
}

.city-buttons .btn {
    padding: 0.4rem 0.8rem; /* Reduced padding */
    font-size: 0.75rem; /* Smaller buttons for landscape view */
    border-radius: 25px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.city-buttons .btn:hover {
    background-color: #fff;
    color: #000;
}

/* Adjustments for Mobile and Landscape Views */
@media (max-width: 576px) {
    .hero-section {
        height: 85vh; /* Increased height for mobile */
    }

    .hero-section .carousel-item {
        height: 85vh; /* Ensure carousel adapts to the new height */
    }

    .hero-section .hero-logo {
        max-width: 30%; /* Increase logo size for better visibility */
    }

    .city-buttons .btn {
        font-size: 0.75rem;
        padding: 0.4rem 0.8rem;
    }
}

/* Further Reduce for Landscape Mode */
@media (orientation: landscape) and (max-height: 500px) {
    .hero-section {
        height: 115vh; /* Reduce height in landscape mode */
        justify-content: center;
    }


    .hero-section .carousel-item {
        height: 115vh; /* Ensure carousel adapts in landscape */
    }

    .hero-section .carousel-caption {
        top: 45%; /* Adjust the caption position for better fitting */
        transform: translate(-50%, -45%);
        padding: 0 0.5rem;
    }

    .hero-section .hero-logo {
        max-width: 22%; /* Slightly increase logo size in landscape */
    }

    .hero-section h1 {
        font-size: clamp(1rem, 2.5vw, 1.8rem); /* Further reduce text size */
    }

    .hero-section .lead {
        font-size: clamp(0.8rem, 1.8vw, 1rem); /* Adjust lead size */
    }

    .city-buttons .btn {
        font-size: 0.7rem; /* Make buttons smaller */
        padding: 0.3rem 0.6rem;
    }
}

/* Adjustments for Larger Screens */
@media (min-width: 768px) {
    .hero-section .hero-logo {
        max-width: 15%; /* Logo smaller on larger screens */
    }

    .city-buttons .btn {
        font-size: 0.85rem;
        padding: 0.5rem 1rem;
    }
}

@media (min-width: 992px) {
    .hero-section {
        height: 85vh; /* Increase height for larger screens */
    }

    .hero-section .carousel-item {
        height: 85vh;
    }

    .hero-section .hero-logo {
        max-width: 12%; /* Slightly smaller logo for large screens */
    }

    .hero-section h1 {
        font-size: clamp(1.8rem, 4vw, 3rem);
    }

    .hero-section .lead {
        font-size: clamp(1.2rem, 2.5vw, 1.5rem);
    }
}