.video-carousel-wrapper .video-wrapper {
    position: relative;
}
.heading-text .rich-text *{
    color: #474747;
    font-family: "Proxima Nova";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}

.play-wrapper {
    width: 103px;
    height: 67px;
    align-items: center;
    justify-content: center;
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.video-modal video {
    max-width: 1034px;
}

.video-carousel-in-wrapper {
    display: flex;
    gap: 20px;
    align-items: center;
}

.video-carousel .video-wrapper svg:hover .video-arrow,
.modal-prev:hover path,
.ctrl svg:hover path,
.modal-next:hover path,
.modal-close:hover path {
    fill: var(--Blue, #3498DB);!important;
    cursor: pointer;
}

.modal-prev,
.modal-next {
    width: 48px!important;
    height: 48px!important;
}



.video-carousel-wrapper .video-wrapper svg {
    width: 90px;
    height: 50px;
}


.video-carousel-wrapper .rich-text {
    margin-bottom: 22px;
}

.video-carousel-wrapper .item {
    margin-right: 38px;
}

.video-carousel-wrapper .item .text {
    width: 345px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

.video-carousel-wrapper video {
    width: 345px;
    height: auto;
    display: block;
}

.video-carousel {
    position: relative;
}

.video-carousel > svg {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.video-carousel > svg:hover {
    opacity: 0.4;
    cursor: pointer;
}

.video-carousel .left-arrow {
    left: -50px;
}

.video-carousel .right-arrow {
    right: -65px;
}

.video-carousel-in {
    width: 1199px;
}

.video-carousel-in .text h3 {
    color: #474747;
    font-family: "Proxima Nova";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    padding-top: 22px;
}

.video-carousel-in .text .richtext,
.video-carousel-in .text .richtext * {
    color: var(--Text, #EEE)!important;
    font-feature-settings: 'clig' off, 'liga' off!important;
    font-family: Lato!important;
    font-size: 16px!important;
    font-style: normal!important;
    font-weight: 400!important;
    line-height: 147.5%!important; /* 23.6px */
}

.video-carousel-in .flickity-viewport {
    height: 320px!important;
}

@media (min-width: 765px) and (max-width: 1082px) {
    .video-carousel-in {
        width: 700px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

.video-carousel .ctrl svg {
    transition: fill .3s ease;
    fill: var(--color-base);
    width: 44px!important;
    height: 44px!important;
}

.video-carousel .controls {
    display: flex;
    justify-content: flex-end;
    gap: 25px;
}

.video-carousel .controls .ctrl:hover svg {
    fill: var(--color-primary);
    cursor: pointer;
}

.video-carousel-wrapper .video-modal-background {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background: #474747;
    mix-blend-mode: multiply;
    z-index: 2;
}
.video-carousel-wrapper video:hover{
    cursor:pointer;
}

.video-carousel-wrapper .video-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: 1243px;
    height: auto;
}

.video-modal-content .play-wrapper {
    display: flex!important;
}

.video-modal-content .play-wrapper.playing {
    display: none!important;
}

.video-modal-content .video-wrapper,
#video-modal-wrapper .video-modal-content video {
    width: 100%!important;
}

.video-modal-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.video-carousel-wrapper .video-modal-content .text {
    padding-top: 28px;
}

#video-modal-wrapper h3 {
    color: #FFF;
    font-family: "Proxima Nova";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

@media (max-width: 1199px) {
    #video-modal-wrapper .video-modal-content .play {
        width: 50px;
        height: 50px;
    }
    
    .video-carousel .left-arrow {
        left: 0px;
    }
    .video-carousel .right-arrow {
        right: 0px;
    }
    .video-carousel-wrapper .video-modal {
        width: 100%;
    }
    .video-carousel-in {
        width: 100%;
    }
    .video-modal {
        gap: 50px;
    }
    .video-modal {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: center;
    }
    .modal-next {
        order: 5;
    }
    .heading-text {
        padding-left: 20px;
        padding-right: 20px;
    }
    .video-carousel-in,.video-carousel-wrapper .item .text,.video-carousel-wrapper video  {
        width:300px!important;
    }
    #video-modal-wrapper .video-modal-content video, .video-modal-content .video-wrapper,#video-modal-wrapper .video-modal-content{
        width:300px!important;
    }
    .video-carousel-in-wrapper{
        column-gap:5px;
        justify-content:space-between;
    }
    .video-carousel .ctrl svg {
    height: 22px!important;
    width: 22px!important;
    }
    .video-carousel-wrapper .video-modal-content .text{
        padding-top: 50px;
    }
}

@media (min-width: 1199px) {
    #video-modal-wrapper .video-modal-content .play {
        width: 50px;
        height: 57px;
    }
    #video-modal-wrapper .video-modal-content .play-wrapper {
        width: 155px;
        height: 101px;   
    }
    .video-modal {
        gap: 15px;
    }
    .video-carousel-in{
        width: 1111px;
    }
    .heading-text{
        width:1111px;
        margin:0 auto
    }
}

.modal-close {
    position: absolute;
    top: -42px; /* Adjust as needed */
    right: 22px; /* Adjust as needed */
    z-index: 4;
    cursor: pointer;
}

.video-carousel-wrapper .richtext {
    height: fit-content;
    overflow-y: auto;
}

#video-modal-wrapper .richtext {
    height: 66px;
}

/* Total scrollbar width */
.video-carousel-wrapper ::-webkit-scrollbar {
    width: 12px;
}

/* Scrollbar track */
.video-carousel-wrapper ::-webkit-scrollbar-track {
    background: transparent; /* make the track background transparent */
}

/* Scrollbar handle */
.video-carousel-wrapper ::-webkit-scrollbar-thumb {
    background-color: white; /* white thumb */
    border-radius: 6px; /* optional: to make the thumb's corners rounded */
}

/* Scrollbar handle on hover */
.video-carousel-wrapper ::-webkit-scrollbar-thumb:hover {
    background-color: #e0e0e0; /* slightly gray on hover to distinguish */
}

.no-scroll {
    overflow: hidden;
    height: 100%;
}

.video-carousel-in .richtext {
    display: none;
}

#video-modal-wrapper .preview-text {
    display: none;
}
@media (min-width: 765px) and (max-width: 1082px) {
    .video-carousel-in,.video-carousel-wrapper .item .text,.video-carousel-wrapper video  {
        width:100%!important;
    }
    #video-modal-wrapper .video-modal-content video, .video-modal-content .video-wrapper,#video-modal-wrapper .video-modal-content{
        width:100%!important;
    }
}
.video-carousel-wrapper video{
   aspect-ratio:566 / 318;
   object-fit:cover;
}