/*
Theme Name: Flatmin Child
Template: flatmin
Author: Prskvs
Description: Simple & Responsive Bootstrap 4 flat theme
Tags: Bootstrap 4,Flat UI
Version: 1.5.4.1709727971
Updated: 2024-03-06 12:26:11

*/
@font-face {
    font-family: "Inter Regular";
    src: url("fonts/Inter-Regular.ttf") format('truetype');
}
@font-face {
    font-family: "Inter Light";
    src: url("fonts/Inter-Light.ttf") format('truetype');
}
@font-face {
    font-family: "Inter Medium";
    src: url("fonts/Inter-Medium.ttf") format('truetype');
}
@font-face {
    font-family: "Inter Bold";
    src: url("fonts/Inter-Bold.ttf") format('truetype');
}
@font-face {
    font-family: "Roboto Regular";
    src: url("fonts/Roboto-Regular.ttf") format('truetype');
}
@font-face {
    font-family: "Roboto Medium";
    src: url("fonts/Roboto-Medium.ttf") format('truetype');
}
@font-face {
    font-family: "Roboto Bold";
    src: url("fonts/Roboto-Bold.ttf") format('truetype');
}


html {
    max-width: 100vw;
    overflow-x: hidden;
}
/******** All Pages Elements ********/
.mobile {
    display: none !important;
}
@media screen and (max-width: 768px) {
    .mobile {
        display: block !important;
    }
    .desktop {
        display: none !important;
    }
}

h1 {
    font-family: "Roboto Bold";
    font-size: 70px;
    line-height: 71px;
    color: #FFFFFF;
}
h2 {
    font-family: Roboto Bold;
    font-size: 59px;
    line-height: 57px !important;
    color: #000000;
}
h3 {
    font-family: Inter Medium;
    font-size: 14px;
    color: #000000;
}
.uvc-main-heading h3 {
    font-family: "Roboto Medium";
    font-size: 35px;
    line-height: 38px;

    width: 80%;
    text-align: left;
}

h4 {
    font-family: Inter Bold;
    font-size: 14px;
    color: #000000;
}
.uvc-heading {
    text-align: left;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
}
.uvc-heading .uvc-sub-heading {
    margin: 0;
    padding-bottom: 22px;
}
ul {
    list-style: none;
}
button.red-btn, .red-btn > button, .red-btn > a, a.red-btn,
.wpcf7-form-control.wpcf7-submit.has-spinner {
    display: inline-block;
    font-family: Inter Bold;
    font-size: 14px;
    line-height: 21px;
    color: #AD2E24 !important;
    border: none !important;
    background: transparent !important;
    padding-left: 0 !important;
    padding-top: 14px;

    /*margin-top: 32px;*/
}
button.red-btn:not(.big):after, .red-btn:not(.big) > button:after, .red-btn:not(.big) > a:after, a.red-btn:after,
#contact-form form p:last-of-type:before {
    display: inline-block;
    width: 10px;
    height: 10px;
    content: '';
    background: transparent url("icons/ArrowUp.svg") 50%/cover no-repeat;
    margin-left: 6px;
    /*transition: all;*/
}
#contact-form form p:last-of-type {
    position: relative;
}
#contact-form form p:last-of-type:before {
    position: absolute;
    left: 70px;
    top: 45%;
    transform: translateY(-50%);
}

a.red-btn:hover {
    text-decoration: none;
}

button.red-btn:focus, .red-btn > button:focus, .red-btn > a:focus,
.wpcf7-form-control.wpcf7-submit.has-spinner:focus {
    outline: none;
}
.red-btn.big {
    position: relative;
    width: 100%;
    background: transparent url("icons/Arrow Up_Big.svg") 50%/cover no-repeat;
}
.red-btn.big:hover {

}
.red-btn.big > a {
    width: calc(100% - 100px);
    height: 120px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    position: absolute;
    top: -120px;
    padding: 0;
    /*background-color: blue !important;*/
}
.red-btn.big > a > i {
    transition: margin 250ms ease-in-out;
    position: relative !important;
    top: unset !important;
    transform: unset !important;
}
.red-btn.big > a > i:before {
    display: block;
    content: '' !important;
    width: 45px;
    height: 48px;
    background: transparent url("icons/Arrow Up_Big.svg") 50%/cover no-repeat;
}

.red-btn.vc_toggle {
    /*margin-bottom: 0;*/
    margin-bottom: 32px;
}

.red-btn.vc_toggle .vc_toggle_title,
.red-btn.vc_toggle .vc_toggle_content {
    padding-left: 0 !important;
}
.red-btn.vc_toggle i.vc_toggle_icon {
    display: none;
}
.red-btn.vc_toggle .vc_toggle_title h4 {
    font-family: "Inter Bold";
    font-size: 16px;
    line-height: 22px;
    color: #AD2E24;
}
.red-btn.vc_toggle .vc_toggle_title h4:after {
    display: inline-block;
    width: 10px;
    height: 10px;
    content: '';
    background: transparent url("icons/ArrowUp.svg") 50%/cover no-repeat;
    margin-left: 10px;
    transform: rotate(180deg);
    transition: transform 400ms ease-in-out;
}

.red-btn.vc_toggle.vc_toggle_active .vc_toggle_title h4:after {
    transform: rotate(0deg);
}


.section {
    max-width: 1920px;
    margin: 0 auto 40px !important;
    left: unset !important;
}
.section.no-btm-margin {
    margin-bottom: 0 !important;
}

p {
    font-family: "Inter Regular";
    font-size: 16px;
    line-height: 21px;
}

.section.dark {
    background-color: #1A1A1A;
    width: 100% !important;
}
.section.dark p, .section.dark h1, .section.dark h2, .section.dark h3, .section.dark h4 {
    color: #FFFFFF;
}
.section.dark .align-right p {
    padding-top: 52px;
}
.align-right {
    text-align: right;
}
/******** Homepage Loader ************/
/*#bd:not(.home) .lp-screen {*/
/*    display: none !important;*/
/*}*/
.lp-screen {
    background-size: 320px;
}
.lp-screen-text {
    width: unset !important;
    height: unset !important;
    font-family: "Roboto Bold" !important;
    font-size: 112px !important;
    position: absolute !important;
    left: 62px !important;
    top: 90% !important;
}
.lp-screen-text:after {
    display: inline-block;
    content: '';
    width: 100px;
    height: 120px;
    background-color: #1A1A1A;
    position: absolute;
    right: -20px;
}
.lp-screen-graphic {
    top: 88px !important;
}

/******** Slick Carousel **********/
button.slick-arrow i:before {
    content: '';
}
button.slick-arrow {
    display: inline-block;
    width: 16px;
    height: 17px;
}
/*button.slick-arrow {*/
/*    width: 40px;*/
/*    height: 40px;*/
/*    background-color: red;*/
/*}*/
button.slick-next.slick-arrow {
    background: transparent url("icons/ArrowUp.svg") 50%/cover no-repeat;
    top: -32px;
    top: -20px;
}
button.slick-prev.slick-arrow {
    background: transparent url("icons/ArrowUp.svg") 50%/cover no-repeat;
    transform: rotate(180deg);

    top: -32px;
    top: -20px;
    left: calc(100% - 80px) !important;
}

#selected-partners button.slick-prev.slick-arrow {
    left: calc(100% - 60px) !important;
}

#hero-banner-slider-mobile button.slick-next.slick-arrow {
    background: transparent url("icons/ArrowUp_Big-White.svg") 50%/cover no-repeat;
    top: calc(90% - 80px);
    left: 90px;
    width: 26px;
    height: 27px;
}
#hero-banner-slider-mobile button.slick-prev.slick-arrow {
    background: transparent url("icons/ArrowUp_Big-White.svg") 50%/cover no-repeat;
    transform: rotate(180deg);

    top: calc(90% - 80px);
    left: 40px !important;
    width: 26px;
    height: 27px;
}
/******** PRE-FOOTER ********/
/**** Exclude prefooter on pages ****/
.page-id-243 #footer .footer-column-1, .page-id-261 #footer .footer-column-1, .page-id-254 #footer .footer-column-1,
.page-id-373 #footer .footer-column-1,
.page-id-493 #footer .footer-column-1,
.post-template-default.single.single-post #footer .footer-column-1 {
    display: none;
}
/************************************/
footer#footer {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding-bottom: 10px;
    border-top: 1px solid #BBBBBB;
}
footer#footer a, footer#footer p {
    font-size: 14px;
    color: #000000;
    text-decoration: none;
    letter-spacing: .4px;
}
footer#footer a:hover {
    font-family: "Inter Bold";
    font-size: 14px;
    color: #AD2E24;
    letter-spacing: 0;
}
.footer-columns.row > div {
    /*padding: 0;*/
}
.footer-column-2, .footer-column-3, .footer-column-4 {
    font-family: "Inter Regular";
    padding-top: 60px;
}
.footer-column-1 {
    width: 100%;
    max-width: unset;
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;

    /*border-top: 1px solid #BBBBBB;*/
    border-bottom: 1px solid #BBBBBB;
}
.footer-column-1 #block-7, .footer-column-1 #block-10 {
    width: 50%;
}
.footer-column-1 #block-7 figure {
    margin-bottom: 0;
}
.footer-column-1  #block-8 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.footer-column-1  #block-8 figure {
    margin-bottom: 0;
}
.footer-column-1 #block-10 {
    padding-left: 12%;
}
.footer-column-1 #block-10 .prefooter-banner-paragraph__wrapper h2 {
    max-width: 420px;
}
.footer-column-1 #block-10 .prefooter-banner-paragraph__wrapper button.red-btn {
    padding-top: 32px;
}

.footer-column-2 {
    padding-left: 15%;
    width: 50%;
    flex: 0 0 50%;
    max-width: unset;
}
.footer-column-2 #block-11 img {
    max-width: 210px;
    padding-left: 10px;
}
.footer-column-2 #block-12,
.footer-column-2 #custom_html-2 {
    padding: 20px 0 0 10px;
}
.footer-column-2 #block-13 {
    max-width: 320px;
    padding-left: 10px;
}

.footer-column-3 {
    max-width: unset;
    flex: 0 0 22%;
    padding-left: 12%;
    padding-right: 0;
}
.footer-column-4 {
    max-width: unset;
    flex: 0 0 28%;
    padding-right: 15%;
    padding-left: 2%;
}
.footer-column-4 #block-18 a {
    font-family: "Inter Bold";
}
.footer-column-4 #block-18 p {
   margin-bottom: 0;
}
.footer-column-4 #block-18 p:last-of-type {
   margin-bottom: 32px;
}

/******** FOOTER ********/
#copyright {
    font-family: "Inter Medium";
    font-size: 14px;
    line-height: 71px;
    padding: 0 0 0 15%;
    padding: 0 0 0 calc(15% - 2px);

    width: 50%;
    margin-top: -70px;
    z-index: 9;
    position: relative;
}
#copyright a.du-color {
    font-family: "Inter Bold";
    color: #86D1E6;
    letter-spacing: 0;
}
#copyright a.du-color:hover {
    color: #86D1E6;
}

.otgs-development-site-front-end {
    display: none !important;
}

/************* RESPONSIVE Smaller devices and Mobile *************/
@media screen and (max-width: 1724px) {
    .section {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }

    @media screen and (max-width: 1420px) {
        .red-btn.big > a {
            width: calc(100% - 32px);
        }


        @media screen and (min-width: 768px) and (max-width: 1400px) {
            .footer-column-3, .footer-column-4 {
                flex: 0 0 25%;
            }
        }

        @media screen and (max-width: 1358px) {
            .footer-column-2 {
                padding-left: 6%;
            }
            .footer-column-4 {
                padding-right: 6%;
            }
            #copyright {
                padding: 0 0 0 calc(6% - 4px);
            }

            @media screen and (max-width: 1222px) {
                h1 {
                    font-size: 60px;
                    line-height: 61px;
                }
                h2, .uvc-heading h2 {
                    font-size: 39px;
                    line-height: 47px;
                }
                h3 {
                    font-size: 12px;
                }

                @media screen and (min-width: 768px) {
                    .footer-column-1 #block-8 figure {
                        max-width: 150px;
                    }
                }


                @media screen and (max-width: 1200px) {
                    .red-btn.big > a {
                        align-items: flex-end;
                    }
                    .banners__wrapper .section-banner #top-banner > .wpb_column .wpb_single_image .vc_single_image-wrapper {
                        min-height: unset !important;
                    }
                    .banners__wrapper .section-banner #top-banner > .wpb_column .wpb_single_image .vc_single_image-wrapper > img {
                        position: unset !important;
                        max-width: 100% !important;
                    }


                    @media screen and (max-width: 1152px) {
                        .footer-column-1 {
                            /*flex-direction: column;*/
                            flex-wrap: wrap;
                            flex-direction: column-reverse;
                            /*padding-right: 0;*/
                        }
                        .footer-column-1 #block-7,
                        .footer-column-1 #block-7 img {
                            width: 100%;

                        }
                        .footer-column-1 #block-8 {
                            width: 100%;
                            /*width: 40%;*/
                            left: unset;
                            transform: unset;
                            /*padding: 40px;*/

                            position: absolute;
                            top: 20%;
                        }
                        .footer-column-1 #block-8 figure {
                            display: flex;
                            justify-content: center;
                            position: absolute;
                            top: -100%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                        }
                        .footer-column-1 #block-10 {
                            width: 100%;
                            /*width: calc(50% + 20px);*/
                            padding-left: unset;
                            padding: 40px;
                        }
                        .footer-column-1 #block-10 .prefooter-banner-paragraph__wrapper {
                            /*max-width: 480px;*/
                            margin: 20px auto;
                        }

                        .footer-column-3 {
                            padding-left: 2%;
                        }
                        @media screen and (min-width: 881px) and (max-width: 924px){
                            .footer-column-3, .footer-column-4 {
                                padding-left: 0 !important;
                            }
                        }

                        @media screen and (max-width: 920px) {
                            .red-btn.big > a {
                                align-items: flex-start;
                                height: 250px;
                                top: -250px;
                            }
                            p {
                                font-size: 14px !important;
                                line-height: 21px !important;
                            }

                            @media screen and (max-width: 880px) {
                                .footer-column-2 {
                                    padding-left: 32px;
                                }
                                /*.footer-column-4 {*/
                                /*    flex: 0 0 50%;*/
                                /*    padding-right: 0;*/
                                /*    padding-left: 52px;*/
                                /*}*/
                                #copyright {
                                    padding: 0 0 0 28px;
                                    margin-top: unset;
                                    width: 100%;
                                }
                                @media screen and (min-width: 768px) {
                                    .footer-column-4 {
                                        flex: 0 0 50%;
                                        padding-right: 0;
                                        padding-left: 52px;
                                    }
                                }

                                @media screen and (max-width: 767px) {
                                    .section {
                                        padding-left: 15px !important;
                                        padding-right: 15px !important;
                                    }
                                    .red-btn.big > a {
                                        width: 66px;
                                        height: 68px;
                                        top: -232px;
                                        left: calc(100% - 80px);
                                    }
                                    p {
                                        font-size: 13px !important;
                                        line-height: 19px !important;
                                    }
                                    .section.dark .align-right p {
                                        padding-top: 20px;
                                    }

                                    .footer-column-1 {
                                        border-bottom: none;
                                    }
                                    .footer-column-2 {
                                        width: 100%;
                                        flex: 0 0 100%;
                                    }
                                    .footer-column-2 #block-13 {
                                        max-width: unset;
                                    }
                                    .footer-column-2 #block-13 > div {
                                        width: 100%;
                                        display: flex;
                                        flex-direction: row;
                                        flex-wrap: nowrap;
                                    }
                                    .footer-column-2 .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
                                        flex-basis: 25% !important;
                                        flex-grow: unset !important;
                                    }
                                    .footer-column-3, .footer-column-4 {
                                        width: 50%;
                                        flex: 0 0 50%;
                                    }
                                    .footer-column-3 {
                                        padding-left: 42px;
                                    }
                                    .footer-column-4 {
                                        padding-right: 52px;
                                    }

                                    @media screen and (min-width: 714px) {
                                        #hero-banner-slider-mobile button.slick-next.slick-arrow {
                                            top: calc(90% - 160px);
                                        }
                                        #hero-banner-slider-mobile button.slick-prev.slick-arrow {
                                            top: calc(90% - 160px);
                                        }
                                    }

                                    @media screen and (max-width: 740px) {
                                        .footer-column-1 #block-8 figure {
                                            max-width: 135px;
                                        }

                                        @media screen and (max-width: 640px) {
                                            .footer-column-3, .footer-column-4 {
                                                width: 100%;
                                                flex: 0 0 100%;
                                                padding: 32px 42px 0;
                                            }

                                            .footer-column-3 #block-14 h4:after {
                                                display: inline-block;
                                                width: 10px;
                                                height: 10px;
                                                content: '';
                                                background: transparent url('icons/ArrowUpBlack.svg') 50% / cover no-repeat;
                                                margin-left: 10px;
                                                transition: all 400ms ease-in-out;
                                            }
                                            .footer-column-3 #block-14 h4.show:after {
                                                transform: rotate(180deg);
                                            }

                                            .footer-column-3 #block-15 ul {
                                                height: 22px;
                                                overflow: hidden;
                                                position: relative;
                                                transition: all 400ms ease-in-out;
                                            }
                                            .footer-column-3 #block-15 ul:after {
                                                display: block;
                                                content: '';
                                                position: absolute;
                                                background-color: transparent;
                                                width: 100%;
                                                bottom: -12px;
                                                height: 40px;
                                                background-image: linear-gradient(transparent, white);
                                            }
                                            .footer-column-3 #block-15 ul.show {
                                                height: 200px;
                                            }
                                            .footer-column-3 #block-15 ul.show:after {
                                                background-image: linear-gradient(transparent, transparent);
                                                bottom: -40px;
                                            }

                                            @media screen and (max-width: 540px) {
                                                /*#our-approach-banners .red-btn.big > a > i:before {*/
                                                /*    width: 34px;*/
                                                /*    height: 36px;*/
                                                /*}*/

                                                @media screen and (min-width: 481px) {
                                                    .footer-column-4 {
                                                        position: relative;
                                                    }
                                                    .footer-column-4 #block-19 {
                                                        position: absolute;
                                                        right: 32px;
                                                        top: 12px;
                                                    }
                                                }
                                                @media screen and (max-width: 480px) {
                                                    .banners__wrapper .section-banner .section-banner__inner p {
                                                        padding-right: 32px;
                                                    }
                                                    .red-btn.big > a {
                                                        width: 100%;
                                                    }
                                                    .red-btn.big > a > i:before {
                                                        width: 24px;
                                                        height: 24px;
                                                    }

                                                    @media screen and (max-width: 420px) {
                                                        #hero-banner-slider-mobile button.slick-next.slick-arrow {
                                                            top: calc(90% - 20px);
                                                        }
                                                        #hero-banner-slider-mobile button.slick-prev.slick-arrow {
                                                            top: calc(90% - 20px);
                                                        }
                                                    }
                                                }
                                            }




                                        }
                                    }
                                }


                            }
                        }


                    }
                }
            }
        }


    }

}


/*Animated Logo*/
.scroll-logo {
    animation: scroll 14s infinite linear;
    position: relative;
    width: fit-content;
    margin: 0 auto;
}
.arrow-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes scroll {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@media screen and (max-width: 576px) {
    .scroll-logo,
    .arrow-logo {
        text-align: center;
    }
    .scroll-logo img,
    .arrow-logo img {
        width: 70%;
    }
    .footer-column-1 #block-8 {
        top: 25%;
    }
}
@media screen and (max-width: 476px) {
    .footer-column-1 #block-8 {
        top: 36%;
    }
    .footer-column-1 #block-10 .prefooter-banner-paragraph__wrapper button.red-btn {
        padding-top: 10px;
    }
}