/*Left abd Right Carousel button */
button.carousel-control-prev.QIB-hero-Carousel__prev-btn {
    left: 3% !important;
    top: 50%;
    position: absolute !important;
}

button.carousel-control-next.QIB-hero-Carousel__next-btn {
    right: 3% !important;
    top: 50%;
    left: unset;
    position: absolute !important;
}

.QIB-hero-Carousel__next-btn, .QIB-hero-Carousel__prev-btn {
    border: unset !important; /*1px solid !important;*/
}

/**********Banner Image **********/

@media (min-width: 992px) {
    .QIB-hero-Carousel, .QIB-hero-Carousel__images img {
        aspect-ratio: unset !important;
    }

    .QIB-hero-Carousel__item {
        aspect-ratio: 2560 / 1080;
        /* max-height: 650px;*/
        /* max-height: 800px !important; */
    }

    .QIB-hero-Carousel {
        max-height: unset !important; /*650px !important;*/
    }
}

/***************Events for hover next and prev button and image ***********/
.QIB-hero-Carousel__prev-btn, .QIB-hero-Carousel__prev-icon {
    transition: all 0.3s ease !important;
}

    .QIB-hero-Carousel__prev-btn:hover {
        transform: scale(2.1);
    }

        .QIB-hero-Carousel__prev-btn:hover .QIB-hero-Carousel__prev-icon {
            transform: translate(0%);
        }
/******NextButton********/

.QIB-hero-Carousel__next-btn, .QIB-hero-Carousel__next-icon {
    transition: all 0.3s ease;
}

    .QIB-hero-Carousel__next-btn:hover {
        transform: scale(2.1);
    }

        .QIB-hero-Carousel__next-btn:hover .QIB-hero-Carousel__next-icon {
            transform: translate(0%);
        }

    /******tablet view hover*******/
    .QIB-hero-Carousel__prev-btn:active,
    .QIB-hero-Carousel__next-btn:active {
        transform: scale(2.1);
    }

         
        .QIB-hero-Carousel__prev-btn:active .QIB-hero-Carousel__prev-icon,
        .QIB-hero-Carousel__next-btn:active .QIB-hero-Carousel__next-icon {
            transform: translate(0%);
        }


/*************End***************/


/**************Caurousel zoom effect ***********/
/*
.QIB-hero-Carousel, .QIB-hero-Carousel__images img {
    transform: scale(1);
    transition: transform 10s ease-out;
}

.carousel-item.QIB-hero-Carousel__item.active .QIB-hero-Carousel__images img {
    transform: scale(1.04);
}*/

.QIB-hero-Carousel__item,
.QIB-hero-Carousel__images {
    overflow: hidden;
}

    .QIB-hero-Carousel__images img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform-origin: center center;
        will-change: transform;
    }

/*********MobileView Height *******/
@media screen and (max-width: 991.98px) {
    .QIB-hero-Carousel:has(.MobileImageFill) {
        height: auto !important;
    }
    /*****Added if mobile found Image Object should be filled ****/
    .QIB-hero-Carousel__images.MobileImageFill img {
        object-fit: cover !important;
    }

    .QIB-hero-Carousel__item,
    .QIB-hero-Carousel__images.MobileImageFill {
        aspect-ratio: 3/4;
    }
}
/*****end*******/
/********Arabic reverse icon *********/
span.carousel-control-prev-icon.QIB-hero-Carousel__prev-icon {
    transform: scaleX(1);
}

span.carousel-control-next-icon.QIB-hero-Carousel__next-icon {
    transform: scaleX(1);
}
/*******end********/

/*****caption alignment center /*********Carousel  Text Alignment *******/


/* Mobile */
@media (max-width: 767.98px) {
    .QIB-hero-Carousel__container {
        display: flex;
        align-items: flex-start; /* Keep content at top */
        padding-top: 40px; /* Adjust as needed */
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .carousel-caption.QIB-hero-Carousel__caption {
        align-items: center;
    }

    .herocarotextalignencenter .QIB-hero-Carousel__content {
        align-items: center !important;
    }

    .herocarotextalignencenter .QIB-hero-Carousel__title {
        text-align: center !important;
    }

    .herocarotextalignencenter .QIB-hero-Carousel__text {
        text-align: center !important;
    }

    .QIB-hero-Carousel__indicators {
        margin-bottom: 2% !important;
    }
}
/* Tablet */
@media (min-width: 768px) and (max-width: 1499px) {
    .QIB-hero-Carousel__container {
        display: flex;
        align-items: center;
        padding-top: 0;
        flex-direction: column;
    }

    .carousel-caption.QIB-hero-Carousel__caption {
        align-items: center !important;
    }
    /*
	.QIB-hero-Carousel__indicators {
			 margin-bottom: 40px !important;
	} */
}

/********ipad ***********/
@media (min-width: 768px) and (max-width: 1024px) {
    .QIB-hero-Carousel__indicators {
        margin-bottom: 10px !important;
    }
}

@media (min-width: 1025px) and (max-width: 1499px) {
    .QIB-hero-Carousel__indicators {
        margin-bottom: 40px !important;
    }
}

/********End ipad ***********/

@media (min-width: 1500px) {
    .QIB-hero-Carousel__container {
        justify-content: center;
        flex-direction: column;
    }

    .herocarotextalignenleft .QIB-hero-Carousel__container.container-lg {
        align-items: self-start;
    }

    /**********Center Alignment**********/
    .QIB-hero-Carousel__container.container-lg.herocarotextalignencenter {
        align-items: center;
        text-align: center !important;
    }

    .herocarotextalignencenter .carousel-caption.QIB-hero-Carousel__caption.text-start {
        align-items: center;
        text-align: center !important;
    }

    /**********End Center Alignment**********/


    /*********Right Alignment*************/
    .QIB-hero-Carousel__container.container-lg.herocarotextalignenright {
        align-items: self-end;
    }

    html[lang=en] .herocarotextalignenright .carousel-caption.QIB-hero-Carousel__caption.text-start {
        align-items: flex-end;
    }

    .herocarotextalignenright .QIB-hero-Carousel__title {
        text-align: right;
    }

    .herocarotextalignenright .QIB-hero-Carousel__text {
        text-align: right;
    }

    .herocarotextalignenright .QIB-hero-Carousel__content {
        align-items: flex-end;
    }

    /*********End Right Alignment*************/

}

/*********Mobile View Max Width ***********/
@media screen and (max-width: 991.98px) {
    .QIB-hero-Carousel .QIB-hero-Carousel__title {
        max-width: unset !important;
    }
}

/*********end ************/

/******touch ******/

.QIB-hero-Carousel__prev-btn,
.QIB-hero-Carousel__next-btn {
    transition: transform 0.2s ease;
}

 
.touch-scale {
    transform: scale(0.95);
}

/******end touch *****/
/********touch click ********/
.carousel-item {
    transition: transform 1.4s cubic-bezier(0.22,1,0.36,1) !important;
}
/********end********/


/**********Accessability icon move */
/*html[lang=en] button#accessibilityBtn {
	:96%;
}*/
/* html[lang=en] .QIB-footer .Acc-MobileApps .accessibility-icon .access-icon {
    bottom: 20%;
    left: 4%;
    top: 86%;
}
*/
/*******Swipe Move ****/
/*
#QIB-carousel-banner {
    cursor: grab;
    user-select: none;
    overflow: hidden;
}

    #QIB-carousel-banner.dragging {
        cursor: grabbing;
    }

    #QIB-carousel-banner .carousel-inner {
        transition: transform .3s ease;
        will-change: transform;
    }

    #QIB-carousel-banner .carousel-item {
        transition: transform .9s cubic-bezier(0.22, 1, 0.36, 1) !important;
    }
    */
#QIB-carousel-banner {
    position: relative;
    overflow: hidden;
}

    #QIB-carousel-banner .swiper-slide {
        height: auto;
    }

.QIB-hero-Carousel__arrows {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
}

.QIB-hero-Carousel__prev-btn,
.QIB-hero-Carousel__next-btn {
    pointer-events: auto;
}

    .QIB-hero-Carousel__prev-btn::after,
    .QIB-hero-Carousel__next-btn::after {
        display: none;
    }

/* ==========================
   Pagination
========================== */

.QIB-hero-Carousel__indicators {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    z-index: 25;
}

    .QIB-hero-Carousel__indicators .swiper-pagination-bullet {
        width: 68px;
        height: 4px;
        margin: 0 !important;
        background: #f9e4cc; /*rgba(255,255,255,.9)*/
        opacity: 1;
        position: relative;
        overflow: hidden;
        border-radius: 999px; /* rounded ends */
    }

        .QIB-hero-Carousel__indicators .swiper-pagination-bullet::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 0;
            background: #f7941d;
        }
/*
    .QIB-hero-Carousel__indicators .swiper-pagination-bullet-active::before {
        animation: qibProgressFill 6000ms linear forwards;
    }*/

@keyframes qibProgressFill {

    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

.QIB-hero-Carousel__indicators:hover
.swiper-pagination-bullet-active::before {
    animation-play-state: paused;
}

@media (max-width: 768px) {

    .QIB-hero-Carousel__indicators {
        /*bottom: 24px !important;*/
        gap: 20px !important;
    }

        .QIB-hero-Carousel__indicators .swiper-pagination-bullet {
            width: 40px;
            height: 4px;
            border-radius: 999px;
            margin: 0 !important;
        }
}

/*********end*********/

/**************Image Focal Point ***************/
@media screen and (min-width: 1200px) {
    .QIB-hero-Carousel__overlay_Right_Focus {
        background: linear-gradient(90deg, rgba(0, 0, 0, .6) 7.22%, rgba(0, 0, 0, 0) 100%) !important;
    }

    .QIB-hero-Carousel__overlay_Left_Focus {
        background: linear-gradient(270deg, rgba(0, 0, 0, .6) 7.22%, rgba(0, 0, 0, 0) 100%) !important;
    }

    .QIB-hero-Carousel__overlay_None_Focus {
        background: unset !important;
    }
}
/******Mobile View */
@media screen and (max-width: 991.98px) {
    .QIB-hero-Carousel__overlay_None_Focus {
        background: unset !important;
    }
}

@media (max-width: 767.98px) {
}
/************** End Image Focal Point ***************/

/******************Carousel Caption Text Width *************/
.QIB-hero-Carousel__caption {
    width: 467px;
}
/*
.carousel-caption.QIB-hero-Carousel__caption.text-start{
	align-items: center ;
}
/*

/******************End Carousel Caption Text Width *************/


/***********New Swiper Move **************/


/***********End New Swiper Move **************/

/************Accessability and chatbot icon visibility ************/

.accessability-widget,
.chatbot-widget {
    position: fixed;
    bottom: 20px;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.accessability-widget {
    left: 20px;
}

.widget-visible {
    opacity: 1;
    visibility: visible;
}
/************End Accessability and chatbot icon visibility ************/

/**********New Header size for blue header and white header*/
@media (min-width: 992px) {


    .QIB-hero-Carousel__indicators {
        margin-bottom: 20px !important;
    }

    .QIB-hero-Carousel__container {
        margin-top: 0px;
    }

    .QIB-hero-Carousel__arrows {
        margin-top: 0px;
    }
}

button.carousel-control-prev.QIB-hero-Carousel__prev-btn {
    top: 47%;
}

button.carousel-control-next.QIB-hero-Carousel__next-btn {
    top: 47%;
}

@media (min-width: 768px) and (max-width: 1024px) {
    button.carousel-control-prev.QIB-hero-Carousel__prev-btn {
        top: 40%;
    }

    button.carousel-control-next.QIB-hero-Carousel__next-btn {
        top: 40%;
    }
}

/********** End New Header size for blue header and white header*/

/*********Disable Enable mobileview with respective of cms seetings*/
@media screen and (max-width: 991.98px) {
    .QIB-hero-Carousel .QIB-hero-Carousel__overlay.mobile-Model-DisableFocal {
        display: none;
    }
    .QIB-hero-Carousel .QIB-hero-Carousel__title.mobile-Model-DisableTitle {
        display: none;
    }
    .QIB-hero-Carousel .QIB-hero-Carousel__text.mobile-Model-DisableSubTitle {
        display: none;
    }
    .QIB-hero-Carousel .QIB-Description-Text.mobile-Model-DisableDescriptionText {
        display: none;
    }
    .QIB-hero-Carousel .QIB-hero-Carousel__button.mobile-Model-DisableButton {
        display: none;
    }
}
/*********End Disable Enable mobileview with respective of cms seetings*/

/*************On Hover banner need to stop the progress and auto slide */

#QIB-carousel-banner:hover
.QIB-hero-Carousel__indicators
.swiper-pagination-bullet-active::before {
    animation-play-state: paused;
}
/*************End On Hover banner need to stop the progress and auto slide */

/********new left and right arrow *********/
.QIB-hero-Carousel__next-btn, .QIB-hero-Carousel__prev-btn {
    Width: 60px;
    height: 60px
}
/********End new left and right arrow *********/