:root{
    --carousel-img-max-height: 335px;
}

.eal-carousel-caption-container h2{
    font-size: 40px;
}

.eal-carousel-caption-container p{
    font-size: 16px;
}

.splide__slide{
    position: relative;
    height: 100%;
    /* width: 100%; */
}

.banner-slider .splide__slide > img{
    object-fit: cover;
    object-position: center;
    /* aspect-ratio: 1; */
    /* min-height: var(--carousel-img-max-height);
    max-height: var(--carousel-img-max-height); */
}

.splide__slide .eal-carousel-caption-container{
    min-height: calc(var(--carousel-img-max-height) + 100px);
    max-height: calc(var(--carousel-img-max-height) + 100px);
}

.eal-theme-white .splide__arrow,
.splide__arrow{
    background-color: transparent;
    background: transparent;
}

.banner-slider .splide__arrow svg{
    fill: #ffffff;
}

.banner-slider .splide__arrow{
    width: 30px;
    height: 200px;
    background-color: transparent;
    top: calc(var(--carousel-img-max-height) / 2);
}

.splide__arrow svg{
    width: 30px;
    height: 30px;
}

.eal-carousel-caption-container .eal-carousel-caption {
    position: relative;
    left: unset;
    right: unset;
    bottom: unset;
    top: unset;
    color: black;
    text-align: left;
}

.eal-carousel-controls{
    bottom: 10px;
    align-items: center;
    display: flex;
    justify-content: center;
    left: 0;
    padding: 0 1em;
    position: absolute;
    right: 0;
    z-index: 1;
}
.eal-pagination{
    position: relative;
    padding: 0 10px;
    bottom: unset;
    left: unset;
    right: unset;
    top: unset;
}

.splide__toggle {
    padding: 3px 3px 4px 5px;
    border-radius: 50%;
    background: #10218b;
    border: 0;
    opacity: 1;
    transition: opacity .5s cubic-bezier(0.075, 0.82, 0.165, 1);
    font-size: 13px;
    width: 20px;
    height: 20px;
    color: white;
}

.splide__toggle .glyphicon {
    top: -3px;
}

.splide__pagination__page.is-active {
    background: #10218b;
}

.splide__pagination__page{
    background-color: #ffffff;
}
/* .eal-carousel-caption .btn{
    margin-top: 160px;
} */
.eal-carousel-caption-container .group-container img{
    width: 50%;
}

.caption-image{
    width: 300px;
}

@media screen and (max-width: 991px) {
    .bg-dark-mobile{
        background-color: #212529!important;
    }
}

@media screen and (min-width: 530px) and (max-width: 992px) {
    :root{
        --carousel-img-max-height: 400px;
    }

    .banner-slider .splide__slide .banner-image {
        min-height: var(--carousel-img-max-height);
        max-height: var(--carousel-img-max-height);
    }

}

@media screen and (max-width: 1199px) {
    .eal-carousel-caption-container .container{
        /* max-width: 840px; */
        max-width: 915px;
    }
}

@media screen and (max-width: 767px) {
    .eal-carousel-caption-container .w-75 {
        width: 100%!important;
    }
}

@media screen and (max-width: 992px) {
    .carousel-control-next, .carousel-control-prev{
        display: inline-block;
        height: fit-content;
        top: 150px;
        width: fit-content;
    }

    .eal-carousel-caption-container{
        display: flex;
        display: -ms-flexbox;
        flex-direction: column;
        justify-content: center;
    }

    .eal-prev{
        left: 0;
    }
    
    .eal-next{
        right: 0;
    }

    .splide__pagination__page {
        opacity: 1;
    }
    /* .splide__slide:has(.eal-carousel-caption-container:not(.bg-dark-mobile)){
        background-color: #f4f4f4;
    } */
}

@media screen and (min-width: 768px) {
    :root{
        --carousel-img-max-height: 500px;
    }

    .banner-slider .splide__slide > img{
        min-height: var(--carousel-img-max-height);
        max-height: var(--carousel-img-max-height);
    }
    .splide__slide .eal-carousel-caption-container{
        min-height: calc(var(--carousel-img-max-height) - 100px );
        max-height: calc(var(--carousel-img-max-height) - 100px );
    }
    .eal-carousel-caption-container .group-container img {
        width: 150px;
    }
    .carousel-control-next, .carousel-control-prev {
        top: 210px;
    }
}

@media screen and (min-width: 992px) {

    /* #heroSlider{
        min-height: 600px;
    } */

    .banner-load{
        height: 600px;
    }

    .banner-load .placeholder{
        /* width: 100%;
        display: block; */
        /* height: 100%; */
    }

    .body-carousel.min-height-500 {
        min-height: 500px;
        max-height: 500px;
    }

    .eal-carousel-caption-container{
        padding-bottom: unset;
    }
    .eal-carousel-caption.banner-text-right{
        top: -90px;
        right: 0;
        width: 500px;
    }
    .eal-prev{
        transition: transform .3s;
    }
    
    .eal-prev:not(:disabled):hover{
        transform: translateX(-5px) translateY(-50%);
    }
    
    .eal-next{
        transition: transform .3s;
    }
    
    /* .eal-next:not(:disabled):hover{
        transform: translateX(5px) translateY(-50%);
    } */
    
    .banner-slider .splide__slide > img{
        max-height: var(--carousel-img-max-height);
        height: var(--carousel-img-max-height);
    }

    .eal-carousel-caption-container .eal-carousel-caption {
        padding-top: 0;
        padding-bottom: 0;
        color: #fff;
        max-width: 345px;
    }

    .eal-carousel-caption-container{
        position: absolute;
        top: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
    }

    .eal-carousel-caption-container .container{
        padding: 0;
    }

    .eal-carousel-caption-container .group-container{
        gap: 50px;
    }

    .banner-slider .splide__slide > img, .splide__slide .eal-carousel-caption-container .eal-carousel-caption {
        /* object-position: 60%; */
        object-position: 50%;
    }

    .splide__slide:has(.container.justify-content-end) img{
        object-position: 35%;
    }

    .banner-slider .splide__arrow{
        top: 300px;
    }
    /* .eal-carousel-caption-container .group-container img {
        width: 50%;
    } */
    .splide__slide .eal-carousel-caption-container{
        height: 100%;
        max-height: 100%;
    }
    .splide__toggle {
        background: #ffffff;
        color: #10218b;
        opacity: 1;
        width: 30px;
        height: 30px;
    }

    .splide__toggle .glyphicon{
        top: 2px;
    }
    .eal-carousel-controls{
        bottom: 20px;
    }
    .splide__pagination__page.is-active {
        background: #10218b;
        opacity: 1;
        outline: 1px solid #ffffff;
    }

}

@media screen and (min-width: 1200px) {
    /* .eal-carousel-caption-container h2{
        font-size: 50px;
    } */
    .eal-carousel-caption-container p{
        font-size: 20px;
    }
    .banner-slider .splide__slide > img{
        max-height: 600px;
        height: 600px;
    }
    .eal-carousel-caption-container .eal-carousel-caption {
        max-width: 425px;
    }
    .eal-carousel-caption.banner-text-right{
        top: -140px;
    }
}

@media screen and (min-width: 1400px) {
    
    /* .eal-carousel-caption-container .eal-carousel-caption, */
    .hero-section .content-container {
        max-width: 600px;
    }
}

@media screen and (min-width: 1400px) and (max-width: 1599px) {
    .eal-carousel-caption-container .w-75 {
        width: 65%!important;
    }
}

@media screen and (min-width: 1700px) {
    /* .eal-carousel-caption-container .eal-carousel-caption {
        max-width: 400px;
    } */
    .eal-carousel-caption-container h2{
        font-size: 50px;
    }
}

@media screen and (min-width: 1900px) {
    .eal-carousel-caption-container .w-75 {
        width: 100%!important;
    }
    .eal-carousel-caption-container .eal-carousel-caption {
        max-width: 550px;
    }
}

.splide:not(.is-initialized) .splide__list{
    display: unset;
}

.splide:not(.is-overflow, .is-active) .splide__pagination {
    display: none;
}

.banner-disclaimer{
    color: #000;
    font-size: .8rem;
}
@media screen and (min-width: 992px) {
    .banner-disclaimer{
        position: absolute;
        bottom: -40px;
    }
}
@media screen and (max-width: 991px) {
    .eal-carousel-caption-container .container.d-flex{
        flex-direction: column;
    }
    .eal-carousel-controls {
        /* bottom: -50px; */
    }
}