.banner-fluid {
    width: 100%;
    background: #f7f7f7;
    /* height: 500px; */
}

.banner-inner {
    width: 100%;
    display: block;
}

.banner-carousel-wrap {
    width: 100%;
    overflow: hidden;
    position: relative;
    /* box-shadow: 0 3px 18px rgba(0, 0, 0, 0.1);
    aspect-ratio: 16 / 6; */
}

.banner-carousel-wrap .carousel,
.banner-carousel-wrap .carousel-inner,
.banner-carousel-wrap .carousel-item {
    width: 100%;
    /* height: 100%; */
}

.banner-carousel-wrap .carousel-item img {
    width: 100%;
    /* height: 500px; */
    object-fit: unset;
    display: block;
    transition: transform 0.3s ease;
}

/* Carousel Indicators */
.banner-carousel-wrap .carousel-indicators {
    bottom: 10px;
    gap: 5px;
    margin: 0;
}

.banner-carousel-wrap .carousel-indicators button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.5);
    padding: 0;
    transition: background 0.25s, width 0.25s;
}

.banner-carousel-wrap .carousel-indicators button.active {
    background: #ffffff;
    width: 22px;
    border-radius: 50px;
}

/* Carousel Controls */
.banner-carousel-wrap .carousel-control-prev,
.banner-carousel-wrap .carousel-control-next {
    width: 36px;
    height: 36px;
    top: 50%;
    transform: translateY(-50%);
    background: #fffefea3;
    border-radius: 50%;
    opacity: 1;
    transition: opacity 0.2s, background 0.2s;
    margin: 0 10px;
    box-shadow: 0 2px 10px rgb(255 255 255 / 15%);
    border: 2px solid #fff;
    font-weight: 900;
    transition: 0.35s ease-in-out;
   visibility: hidden;
}

.carousel:hover .banner-carousel-wrap .carousel-control-prev,
.carousel:hover .banner-carousel-wrap .carousel-control-next{
   visibility: visible;
}

.banner-carousel-wrap:hover .carousel-control-prev,
.banner-carousel-wrap:hover .carousel-control-next {
    opacity: 1;
    visibility: visible;
}

.banner-carousel-wrap .carousel-control-prev-icon,
.banner-carousel-wrap .carousel-control-next-icon {
    width: 14px;
    height: 14px;
    background-size: 100% 100%;
}

.banner-carousel-wrap .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

.banner-carousel-wrap .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

@media(max-width: 1200px) {
    .banner-carousel-wrap {
        aspect-ratio: 16 / 7;
    }
}

@media(max-width: 991px) {
    .banner-carousel-wrap {
        aspect-ratio: 16 / 8;
    }
}

@media(max-width: 767px) {
    .banner-carousel-wrap {
        aspect-ratio: 16 / 9;
    }
    .banner-carousel-wrap .carousel-indicators {
        bottom: 20px !important;
    }
    .banner-fluid {
        width: 100%;
        height: 100% !important;
    }
    .banner-carousel-wrap .carousel-control-prev,
    .banner-carousel-wrap .carousel-control-next {
        top: 43% !important;
    }
}

@media(max-width: 575px) {
    .banner-carousel-wrap {
        aspect-ratio: 16 / 7;
    }
}