﻿﻿
.video-hero-banner-widget-container {
    position: relative;
    width: 100%;
    max-height: 791px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.video-section img {
    position: absolute;
    top: 0;
    padding-left: 34px;
    /*left: 4vw;*/
    width: 100%;
    /* height: 65%; */
    object-fit: cover;
    z-index: 0;
    border: none;
    outline: none;
}

.content-section {
    position: relative;
    z-index: 2;
    padding: 20px;
}

    .content-section .cta-section {
        display: flex;
        justify-content: center;
        gap: 2vw;
        margin-top: 10.5vw;
        padding-left: 23vw;
    }

        .content-section .cta-section .btn {
            border-radius: 0px !important;
            border: 1px solid #dab657;
            color: white;
            background: transparent;
            padding: 0.7vw 0 0.6vw;
            font-size: clamp(0.85rem, 1vw + 0.2rem, 1rem);
            text-decoration: none;
            width: clamp(160px, 25vw, 258px);
            text-align: center;
            text-transform: uppercase;
        }

            .content-section .cta-section .btn:hover {
                background: #ffcf54;
                color: #000;
            }


    .content-section .detail-section .service-support-section .intro-text-container .intro-text {
        padding: 9.5vw 5.8vw 0 9.8vw;
        font-size: 18px;
        line-height: 1.6;
        color: white;
        max-width: 1489px;
    }

    .content-section .detail-section .service-support-section .section-heading {
        font-size: 18px;
        color: #dab657;
        font-weight: 600;
        padding-top: 15px;
        padding-left: 10vw;
    }

    .content-section .detail-section .service-support-section .features-grid {
        display: flex;
        /* gap: 138px;*/
        text-align: left;
        margin-top: 13px;
        padding-left: 10vw;
        flex-wrap: wrap;
        justify-content: start;
        /*align-items: center;*/
    }

.left-features-grid {
    margin-right: 50px;
}

.content-section .detail-section .service-support-section .features-grid .feature-list {
    flex: 1 1 300px;
    max-width: 450px;
    list-style: none;
    padding-left: 0;
}

    .content-section .detail-section .service-support-section .features-grid .feature-list p {
        margin-bottom: 6px;
        line-height: 25px;
    }

    .content-section .detail-section .service-support-section .features-grid .feature-list li {
        font-size: 18px;
        margin-bottom: 0;
        line-height: 1.4;
        color: white;
        display: flex;
    }

        .content-section .detail-section .service-support-section .features-grid .feature-list li .arrow {
            color: #dab657;
            height: fit-content;
            margin-right: 8px;
            font-weight: bold;
        }

.feature-list-nextline {
    padding-left: 25px;
}

img.before-video {
    display: none;
}
.mobile-video {
    display: none;
}
div#hamburger {
    display: none;
}
/* -----------------------------------  Responsiveness ------------------------------- */
@media (max-width: 1600px) {
    .content-section .detail-section .service-support-section .intro-text-container .intro-text {
        padding: 9.5vw 5.8vw 0 9.8vw;
    }
}

@media (max-width: 991px) {
    .content-section .cta-section {
        margin-top: 7vw;
    }

    .nav-menu ul {
        margin: 0;
        padding: 9px 4vw 0px 0px;
        gap: 3vw;
    }

        .nav-menu ul li a {
            font-size: 14px;
        }

    .fullarc-logo {
        width: 271px;
        padding: 25px 0 0 30px;
    }

    .content-section .detail-section .service-support-section .intro-text-container .intro-text,
    .content-section .detail-section .service-support-section .section-heading,
    .content-section .detail-section .service-support-section .features-grid .feature-list li {
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    /*.video-section video {
        top: 8vw;
    }*/

    .mobile-video {
        display: block;
    }

    img.before-video-mobile-bottom {
        display: block;
    }

    img.before-video {
        display: block;
    }
    /* .content-section .detail-section .service-support-section .features-grid .feature-list {
        max-width: 628px;
    }*/
    .left-features-grid {
        margin-right: 0;
    }

    .content-section .detail-section .service-support-section .intro-text-container .intro-text, .content-section .detail-section .service-support-section .section-heading, .content-section .detail-section .service-support-section .features-grid .feature-list li {
        font-size: 16px;
        line-height: 29px;
        letter-spacing: 1px;
    }

    .mobile-video {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    section.video-hero-banner-widget-container .video-section img.main-video {
        display: none;
    }

    .nav-menu.active {
        display: flex;
        height: 100vh;
    }

    div#hamburger {
        color: #fff;
        text-align: center;
        font-size: 28px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 47px;
        height: 47px;
        margin-left: auto;
        border: 1px solid #FFFFFF;
        border-radius: 10px;
    }

    body.fullarc-master-page {
        padding-top: 0;
    }

    header.main-header.container-fluid .col-md-8.col-sm-8 {
        width: 12%;
    }

    section.video-hero-banner-widget-container {
        padding-top: 12px;
    }

    .image-slider-widget-container h4 {
        font-size: 18px;
        margin-bottom: 20px;
        font-weight: 500;
    }

    img.main-video {
        height: 113px !important;
    }

 /*   img.before-video-mobile-bottom {
        display: none;
    }
*/
    .content-section {
        position: relative;
        z-index: 2;
        padding: 20px;
    }

    .video-section img {
        position: unset;
    }

    .video-section img {
        position: relative;
        top: -100px;
    }

    img.before-video {
        z-index: 9;
        transform: unset;
        clip-path: unset;
        top: 0px;
        height: 202px;
        width: 200px;
        padding-left: 0px;
        clip-path: polygon(-24vw 0, 94% 0, 86% 77%, 49% 100%);
    }

    .video-section {
        display: flex;
        justify-content: flex-start;
        width: 100%;
        height: 246px;
        flex-direction: column;
        align-items: center;
    }

    .content-section .detail-section .service-support-section .features-grid .feature-list p {
        font-size: 16px;
        line-height: 29px;
        letter-spacing: 1px;
    }

    .content-section .detail-section .service-support-section .intro-text-container .intro-text {
        padding: 8.5vw 0vw 0 0vw;
        text-align: center;
    }

    .content-section .cta-section {
        margin-top: 12vw;
        display: flex;
        flex-direction: column;
        margin-top: 16vw;
        gap: 3vw;
        padding-left: 0;
        align-items: center;
    }

    section.service-support-section {
        text-align: center;
    }

    .content-section .detail-section .service-support-section .section-heading {
        padding-left: 1vw;
    }

    .image-slider-widget-container .caption .slider-caption {
        font-size: 12px;
        line-height: 21px;
        margin-bottom: 0px;
    }

    .content-section .detail-section .service-support-section .features-grid {
        padding-left: 3vw;
        display: block;
        /* gap: 138px; */
        margin-top: 13px;
        flex-wrap: nowrap;
        justify-content: start;
        /* align-items: center; */
    }

    .content-section .cta-section .btn {
        font-size: 16px;
        letter-spacing: 1px;
        font-weight: 400;
        padding: 12px 0;
        width: 267px;
    }
}

@media (max-width:558px) {
    header.main-header.container-fluid .row.align-items-center {
        display: block;
    }

    .content-section .cta-section {
        display: flex;
        flex-direction: column;
        margin-top: 16vw;
        gap: 3vw;
        padding-left: 0;
        align-items: center;
    }

        .content-section .cta-section .btn {
            font-size: 16px;
            letter-spacing: 1px;
            font-weight: 400;
            padding: 12px 0;
            width: 267px;
        }
}

@media (min-width:1300px) {
    .video-section img {
        top: 3vh;
    }

    .content-section .cta-section {
        margin-top: 16vw;
    }
}

@media screen and (min-width:1700px) and (max-width:2400px) {
    .video-section img {
        top: -8vh;
    }

    .content-section .cta-section {
        margin-top: 17.5vw;
    }
}

@media screen and (min-width:2400px) {
    .video-section img {
        top: 3vh;
    }

    .content-section .detail-section .service-support-section .intro-text-container .intro-text {
        max-width: unset;
    }

    .content-section .cta-section {
        margin-top: 22vw;
    }

    .content-section .detail-section .service-support-section .intro-text-container .intro-text,
    .content-section .detail-section .service-support-section .section-heading {
        font-size: 22px;
    }

    .content-section .detail-section .service-support-section .features-grid .feature-list p {
        font-size: 22px;
        margin-bottom: 6px;
        line-height: 33px;
    }
}

@media (max-width:430px) {
    .video-section {
        display: flex;
        justify-content: space-between;
        /* height: fit-content; */
        width: 100%;
        height: 246px;
        /* overflow: hidden; */
        /* position: absolute; */
        flex-direction: column;
        align-items: center;
    }

        .video-section img {
            top: -64px;
        }

    img.before-video {
        clip-path: polygon(-24vw 0, 71% 0, 77% 66%, 37% 104%);
    }

    img.before-video {
        transform: unset;
        clip-path: unset;
        top: 0px;
        height: 223px;
        width: 214px;
        padding-left: 0px;
        object-position: top;
    }

    div#hamburger {
        margin-top: 7px;
        font-size: 23px;
        width: 39px;
        height: 39px;
    }

    .video-section img {
        width: 100%;
        object-fit: contain;
        transform-origin: center;
        bottom: 0px;
    }
}
