/* ===== Carousel Base ===== */
.carousel {
    position: relative;
    overflow: hidden;
}

.carousel-inner {
    width: 100%;
}

.carousel-item {
    display: none;
    width: 100%;
}

.carousel-item.active {
    display: block;
}

/* ===== Image Handling ===== */
.carousel-item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* ===== Desktop (1920 × 720) ===== */
@media (min-width: 1200px) {
    .carousel-item img {
        height: 720px;     
        max-height: 720px;
        object-fit: cover;   
    }
}

/* ===== Tablet ===== */
@media (max-width: 1199px) and (min-width: 768px) {
    .carousel-item img {
        height: 500px;
        object-fit: cover;
    }
}

/* ===== Mobile ===== */
@media (max-width: 767px) {
    .carousel-item img {
        height: 220px;

    }
}

/* ===== Caption ===== */
.carousel-caption {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-caption h2 {
    background: rgba(0,0,0,0.4);
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 2rem;
}

/* ===== Controls ===== */
.carousel-control-prev,
.carousel-control-next {
    width: 5%;
    opacity: 0.8;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 1;
}