/**
 * Advanced Image Carousel Module Styles
 */

.digr_advanced_image_carousel .digraic_container,
.digraic_content_container {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    background: transparent;
}

/* .carousel-flip,
.carousel-cube {
    width: 100%;
    height: 100%;
} */

.digr_advanced_image_carousel .digraic_container.left,
.digr_advanced_image_carousel .digraic_container.left .digraic_content_container {
    flex-direction: row;
}

.digr_advanced_image_carousel .digraic_container.right,
.digr_advanced_image_carousel .digraic_container.right .digraic_content_container {
    flex-direction: row-reverse;
}

.digr_advanced_image_carousel .digraic_container {
    /* padding: 40px; */
}

.digraic_carousel_content .carousel_items {
    cursor: grab;
    position: relative;
}

.digraic_content_container {
    overflow: hidden;
    justify-content: space-between;
}

.digraic_changing_content {
    width: 30%;
    position: relative;
    overflow: hidden;
}

.digraic_changing_content .et_pb_button_wrapper {
    width: 100%;
}

.digraic_changing_content .et_pb_button:after,
.digraic_changing_content .et_pb_button:before {
    content: attr(data-icon)
}

.digraic_changing_content .et_pb_button {
    display: inline-block;
}

.digraic_carousel_content {
    width: 70%;
    display: flex;
    flex-direction: column;
}

.left .digraic_changing_content {
    margin-right: 1rem;
}

.right .digraic_changing_content {
    margin-left: 1rem;
}


/*======== Swiper Flip ====*/
.digraic_container .swiper-container-flip,
.digraic_container .swiper-container-cube {
    overflow: visible;
}

/*==== arrrows =====*/
.digr_advanced_image_carousel .digraic_arrows {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-item-align: center;
    align-self: center;
    -ms-flex-order: 2;
    order: 2;
    width: 100%;
    z-index: 99;
}

.digraic_arrows .swiper-button-next,
.digraic_arrows .swiper-button-prev {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    margin-top: 0;
    pointer-events: all;
    background-color: #00ff40;
    width: auto;
    height: 100%;
    padding: 7px;
}

.digraic_arrows .swiper-button-next {
    -ms-flex-order: 2;
    order: 2;
}

.digraic_arrows .swiper-button-prev:after,
.swiper-container-rtl .digraic_arrows .swiper-button-next:after {
    content: attr(data-icon);
}

.digraic_arrows .swiper-button-next:after,
.swiper-container-rtl .digraic_arrows .swiper-button-prev:after {
    content: attr(data-icon);
}

.et-boc.et-fb-root-ancestor .digraic_arrows .swiper-button-prev:after,
.et-boc.et-fb-root-ancestor .digraic_arrows .swiper-button-next:after {
    font-family: inherit;
}

.et-boc.et-fb-root-ancestor .digraic_arrows .swiper-button-prev,
.et-boc.et-fb-root-ancestor .digraic_arrows .swiper-button-next {
    transform: translateY(0);
}


/*carousel css*/
.digraic_carousel_content {
    --radius: 8px;
    --height: 350px;
    --active-height: 380px;
    --overlay: 0.75;
    opacity: 0;
    transform: translateX(100px);
    transition: all 0.8s ease-in-out;
}

.digraic_carousel_content .carousel_items,
.digraic_carousel_content .carousel_items img {
    border: 0 solid;
}

.digraic_carousel_content.loaded {
    opacity: 1;
    transform: translateX(0);
}

.digraic_carousel_content .swiper-wrapper {
    height: var(--active-height);
    align-items: center;
    /* overflow: hidden; */
}

.digraic_carousel_content:not(.loaded) .swiper-wrapper {
    transition-duration: 0s !important;
}

.digraic_carousel_content .swiper-slide {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    /* border-radius: var(--radius); */
    height: var(--height);
    /* box-shadow: 0 0 50px rgba(0, 0, 0, 0.15); */
}

.digraic_carousel_content.loaded .swiper-slide {
    transition: all 0.3s ease-in-out 0.2s;
}

.digraic_carousel_content .swiper-slide.swiper-slide-active {
    height: var(--active-height);
}

.digraic_carousel_content .swiper-slide:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    /* background: rgb(32, 30, 37);
    background: linear-gradient(20deg, rgba(0, 0, 0, var(--overlay)) 0%, rgba(0, 0, 0, 0) 100%); */
    height: 100%;
    width: 100%;
    z-index: 1;
}

.digraic_carousel_content .swiper-slide .carousel_title,
.digraic_carousel_content .swiper-slide p {
    z-index: 2;
}

.digraic_carousel_content img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* border-radius: var(--radius); */
    object-fit: cover;
}

.digraic_carousel_content .swiper-pagination {
    display: none;
}

.digraic_carousel_content .swiper-container {
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    order: 1;
}

.digr_advanced_image_carousel .digraic_content_container .digraic_carousel_content .swiper-slide {
    margin-bottom: 0;
}

@media (max-width: 1024px) {
    .digraic_carousel_content {
        --height: 180px;
        --active-height: 250px;
    }

}

@media (max-width: 767px) {

    .digraic_content_container .digraic_changing_content .static_content_wrapper {
        width: 100%;
        padding: 15px;
    }

    .digr_advanced_image_carousel .digraic_container .digraic_pagination {
        order: 0;
    }

    .digraic_carousel_content {
        --height: 80px;
        --active-height: 105px;
    }

    .digr_advanced_image_carousel .digraic_content_container,
    .digr_advanced_image_carousel .digraic_container {
        flex-direction: column-reverse !important;
    }

    .digr_advanced_image_carousel .digraic_container .digraic_content_container .digraic_changing_content,
    .digr_advanced_image_carousel .digraic_container .digraic_content_container .digraic_carousel_content {
        width: 100% !important;
        margin: 0;
    }

    .digr_advanced_image_carousel .digraic_container {
        padding: 10px;
    }

    .left .digraic_changing_content {
        margin-right: 0;
    }

    .right .digraic_changing_content {
        margin-left: 0;
    }
}

.digraic_carousel_content .swiper-slide.blank_img::before {
    background: transparent;
}

/* ==================== Static text container animation ==================== */

.digraic_changing_content {
    transition: all 0.3s ease-in-out;
    height: var(--h);
    --height: calc(var(--h) + var(--gap));
    --speed: 0.5s;
    --gap: 40px;
}

.digraic_changing_content .static_content_wrapper {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 50px;
    border: 0px solid;
    /* width: 100%; */
    /* background: blue; */
}

.digraic_changing_content .static_content_wrapper .static_content {
    display: flex;
    flex-direction: column;
}

.digraic_changing_content .static_content_wrapper .static_content img {
    object-fit: cover;
}

.digraic_changing_content .static_content_wrapper .static_title,
.digraic_changing_content .static_content_wrapper .static_text {
    width: 100%;
}

/* Static content Animation*/
.digraic_changing_content .digraic_animation {
    --speed: 0.8s;
    --gap: 40px;
}

.digraic_changing_content .static_content_wrapper .digraic_animation {
    transform: translateY(calc(-10 * var(--height)));
}

.digraic_changing_content .static_content_wrapper.prev .digraic_animation {
    animation: prev var(--speed) ease-in-out;
    transform: translateY(calc(-1 * var(--height)));
}

.digraic_changing_content .static_content_wrapper.next .digraic_animation {
    animation: next var(--speed) ease-in-out;
    transform: translateY(var(--height));
}

.digraic_changing_content .static_content_wrapper.currentUp,
.digraic_changing_content .static_content_wrapper.currentDown,
.digraic_changing_content .static_content_wrapper.currentUp .digraic_animation,
.digraic_changing_content .static_content_wrapper.currentDown .digraic_animation {
    z-index: 1;
}

.digraic_changing_content .static_content_wrapper.currentUp .digraic_animation {
    animation: currentUp var(--speed) ease-in-out;
    transform: translateY(0);
}

.digraic_changing_content .static_content_wrapper.currentDown .digraic_animation {
    animation: currentDown var(--speed) ease-in-out;
    transform: translateY(0);
}

.digraic_changing_content .static_content_wrapper.currentUp {
    z-index: 333;
}

@keyframes prev {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(calc(-1 * var(--height)));
    }
}

@keyframes next {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(var(--height));
    }
}

@keyframes currentUp {
    0% {
        transform: translateY(var(--height));
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes currentDown {
    0% {
        transform: translateY(calc(-1 * var(--height)));
    }

    100% {
        transform: translateY(0);
    }
}

/*========= title animation =========*/
.digraic_changing_content .digraic_title_animation {
    --speed: 0.6s;
}

/*========= description animation =========*/
.digraic_changing_content .digraic_description_animation {
    --speed: .7s;
}

/*========= button animation =========*/
.digraic_changing_content .digraic_button_animation {
    --speed: .8s;
}

/*================ pagination css ===============*/
.digraic_pagination {
    --dot-size: 23px;
    --line-color: #B0B7D04D;
    --dot-color: #B0B7D0;
    --dot-color-active: #B0B7D0;
    --pagi-height: 80vh;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    /* height: 80vh;
    height: var(--min-height);
    max-height: 80vh; */
    min-height: 0 !important;
    margin: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    height: var(--pagi-height);
    justify-content: space-between;
}


.digraic_pagination .dot {
    height: var(--dot-size);
    width: var(--dot-size);
    background: var(--dot-color);
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transform: scale(0.3);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.digraic_pagination .dot-number {
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

.digraic_pagination .dot.active {
    transform: scale(1);
    background: var(--dot-color-active);
}

.digraic_pagination .dot.active .dot-number {
    opacity: 1;
}

.digraic_pagination:before {
    content: "";
    position: absolute;
    top: 50%;
    height: calc(100% - 20px);
    max-height: 90vh;
    width: 1px;
    background: var(--line-color);
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

@media (max-width: 767px) {
    .digr_advanced_image_carousel .digraic_pagination {
        order: 3;
        flex-direction: row;
        /* width: 100%; */
        margin-top: 20px;
        justify-content: center;
        flex-wrap: nowrap !important;
        height: auto !important;
    }

    .digraic_pagination:before {
        width: calc(100% - 20px);
        height: 1px;
    }
}


/*============= background carousel =================*/

.digraic_container {
    background: #fff;
    --background-speed: 0.9s;
}

.digr_advanced_image_carousel .digraic_slider_background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

.digr_advanced_image_carousel .digraic_slider_background img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: transform var(--background-speed) ease-in-out, opacity var(--background-speed) ease-in-out;
    transform: scale(1.3);
}

.digr_advanced_image_carousel .digraic_slider_background img.prev {
    opacity: 0;
}

.digr_advanced_image_carousel .digraic_slider_background img.currentBackward,
.digr_advanced_image_carousel .digraic_slider_background img.currentForward {
    z-index: 1;
    opacity: 1;
    animation: bgNext var(--background-speed) linear;
    transform: scale(1);
}

@keyframes bgNext {
    0% {
        opacity: 0;
        transform: scale(1.3);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}






.digraic_container:before {
    z-index: 2;
}

.digraic_container>.digraic_content_container {
    z-index: 3;
}

.digraic_container .digraic_pagination,
.digraic_container .as-slider-left,
.digraic_container .as-slider-right {
    opacity: 0;
    transition: all 0.8s ease-in-out;
}

.digraic_container.loaded .digraic_pagination,
.digraic_container.loaded .as-slider-left,
.digraic_container.loaded .as-slider-right {
    opacity: 1;
}

/*.digraic_container .ds-slider-left a:focus,*/
/*.digraic_container .ds-slider-right a:focus{*/
/*    outline: none !important;*/
/*}*/

@media (min-width: 768px) {

    .digraic_container .digraic_pagination,
    .digraic_container .as-slider-left,
    .digraic_container .as-slider-right {
        position: relative;
    }
}

@media (max-width: 1380px) and (min-width: 768px) {
    .digraic_container {
        padding-left: 4%;
        padding-right: 4%;
    }
}

@media (max-width: 767px) {
    .digraic_container .as-slider-left {
        left: calc(50% - 300px/2) !important;
    }

    .digraic_container .as-slider-right {
        right: calc(50% - 300px/2) !important;
    }
}