/**
 * @license
 * MyFonts Webfont Build ID 3867246, 2020-12-16T11:57:38-0500
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: Univers Next Pro 841 Extended Black Italic by Linotype
 * URL: https://www.myfonts.com/collections/linotype-foundry
 
 * © 2025 MyFonts Inc. */

@font-face {
    font-family: "UniversNextPro841ExtendedBlackItalic";
    src: url('../fonts/UniversNextPro841ExtendedBlackItalic/font.woff2') format('woff2'), url('../fonts/UniversNextPro841ExtendedBlackItalic/font.woff') format('woff');
}  



@font-face {
    font-family: 'Switzer-Variable';
    src: url('../fonts/Switzer-Variable.woff2') format('woff2'),
         url('../fonts/Switzer-Variable.woff') format('woff'),
         url('../fonts/Switzer-Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
}



*{
    margin: 0;
    padding: 0;
}


body {
    margin: 0;
    padding: 0;
    background-color: var(--primary);
    color: white;
    font-family: 'Switzer-Variable';
    font-variation-settings: wght 400;
    font-weight: 400;
}

::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

:root{
    --primary: #0075CF;
    --white: #ffffff;
    --grey1: #6B6B6B;
    --grey2: #EDEDED;
}


.grid{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
	padding: 0px 40px;

    gap: 1.389vw;
    padding: 0px 2.778vw;
}

h1, h2, h3, h4, h5, h6{
    font-family: "UniversNextPro841ExtendedBlackItalic";
}

h1, .display{
    font-size: 100px;
    line-height: 1;
    font-size: 6.944vw;
    font-weight: normal;

/*
    font-size: 88px;
    font-size: 6.111vw;
    */
}

h2{
    font-size: 45px;
    line-height: 1.2;
    font-size: 3.125vw;
    font-weight: normal;
}

h3{
    font-size: 28px;
    line-height: 1.1;
    font-size: 1.944vw;
    font-weight: normal;
}

.dropdownTitle h5{
    font-size: 1rem;
    font-family: 'Switzer-Variable';
    font-size: 1.111vw;
}

.productsCont h2{
    font-size: 84px;
    font-size: 5.833vw;
}

.servicePanel span{
    font-family: 'Switzer-Variable';
    font-size: 270px;
    line-height: 0.5;
    font-size: 18.75vw;
}

.servicePanel h4{
    font-size: 24px;
    line-height: 1.1;
    font-size: 1.667vw;
}

.display-par{
    font-size: 48px;
    line-height: 1.1;
    font-family: "UniversNextPro841ExtendedBlackItalic";
    font-size: 3.333vw;
}


/*
p, 
span, 
a{
    font-size: 1rem;
}
*/

.cta{
    font-size: 1rem;
    font-size: 1.111vw;
}

nav .cta{
    font-size: 12px;
    font-size: 0.833vw;
}



#canvas-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 40;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

canvas {
    width: 100%;
    height: 100%;
}

.content {
    position: relative;
}

html.lenis {
    height: auto;
}
.lenis.lenis-smooth {
    scroll-behavior: auto;
}





nav{
    z-index: 80;
}


.navpil{
    box-sizing: border-box;
    padding: 14px;
    padding-left: 29px;
    width: auto;
    border-radius: 100px;

    background-color: var(--white);
    -webkit-box-shadow: 0px 5px 60px -8px rgba(0,0,0,0.2); 
    box-shadow: 0px 5px 60px -8px rgba(0,0,0,0.2);

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 30px;

    position: fixed;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    will-change: transform;
}



nav .logo{
    height: auto;
}



.cta{
    background-color: var(--primary);
    box-sizing: border-box;
    padding: 14px 24px;
    text-align: center;
    color: var(--white);
    font-variation-settings: wght 600;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 40px;
    text-decoration: none;
    line-height: 0.8;
    border: 1px solid var(--primary);
}

.cta:hover{
    background-color: unset;
    border: 1px solid var(--primary);
    color: var(--primary)
}

nav .cta{
    padding: 10px 17px;
}

header{
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}


.sl1 h1{
    text-align: center;
    z-index: 60;
}



.scrollIcon{
    width: 30px;
    height: 30px;
    background: url('../img/scrollIcon.svg');
    background-size: contain;
    background-position: center;
    border: 1px solid var(--white);
    border-radius: 50%;

    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
}

.sl2{
    box-sizing: border-box;
    padding: 450px 0px;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.sl2 h2,
.sl2 p{
    width: 70%;
    text-align: center;
    z-index: 60;
}

.sl2 p{
    margin-top: 20px;
    font-size: 0.75rem;
    font-size: 1rem;
}


.sl3{
    box-sizing: border-box;
    padding-top: 100px;
    padding-bottom: 100px;
}

.dropdownCont{
    grid-column: 6 / 12;
    height: auto;
}

.dropdownCont h3{
    margin-bottom: 20px;
}


.dropdown {
    width: 100%;
    border-top: 1px solid var(--white);
}

.dropdown:last-child{
    border-bottom: 1px solid var(--white);
}


.dropdownTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0px;
    cursor: pointer;
}

.dropdownTitle h5{
    font-size: 16px;
    font-size: 1rem;
    font-variation-settings: wght 600;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
}

.dropdownIcon {
    background: url('../img/dropdownIcon.svg') no-repeat center / contain;
    width: 17px;
    height: 17px;
    transform-origin: center;
}

.dropdownHinner {
    overflow: hidden;
    padding-right: 30%;
  
    height: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
  
.dropdownHinner p{
    padding-bottom: 50px;
}


.sl4{
    box-sizing: border-box;
    padding: 140px 0px;
}

.compare-boxCont{
    grid-column: 6 / 12;
    display: flex;
    flex-direction: row;
    width: 100%;
}

.compare-col1{
    display: flex;
    flex-direction: column;
    width: 100%;
}

.compare-el{
    height: 66px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--white);
}

.compare-el:first-child{
    margin-top: 70px;
}
.compare-el:last-child{
    margin-bottom: 30px;
    border-bottom: 0px;
}

.compare-col2{
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    background-color: var(--white);
    width: 30%;
}

.compareIconHead{
    height: 70px;
    box-sizing: border-box;
    padding-top: 25px;

    display: flex;
    justify-content: center;
}

.compareIconHead span{
    text-align: center;
    color: var(--primary);
    font-size: 24px;
    font-family: "UniversNextPro841ExtendedBlackItalic";
}

.compare-el-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--primary);
}

.compare-el-icon2{
    border-bottom: 1px solid var(--white);
}

.compareIcon{
    width: 24px;
    height: 24px;
    background: url('../img/pos.svg') no-repeat center / contain;
}

.compareIcon2{
    background: url('../img/neg.svg') no-repeat center / contain;
}

.compare-col3{
    display: flex;
    flex-direction: column;
    width: 25%;
}

.compareIconHead2{
}

.compareIconHead2 span{
    font-family: 'Switzer-Variable';
    color: var(--white);
    font-size: 12px;
    font-variation-settings: wght 600;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    width: 90%;
}


.sl5{
    position: relative;
    width: 100%;
    height: 130vh;
}
.sl5Cont{
    top: 0;
    left: 0;
    width: 100%;
    height: 130vh;
    background-color: var(--white);
    border-radius: 50px;
    z-index: 60;
    position: absolute;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 80px;
}

.sl5Cont h4{
    color: var(--primary);
    font-weight: 600;
    margin-top: -30px;
    font-size: 1rem;
    font-family: 'Switzer-Variable';
}

.productsCont{
    width: auto;
}

.productsCont:hover{
    cursor: default;
}

.productsCont h2{
    color: var(--primary);
    text-align: center;
    border-bottom: 1px solid var(--primary);

    line-height: 0.8;
    box-sizing: border-box;
    padding-top: 35px;
    padding-bottom: 20px;

}

.hoverImage {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 360px;

    width: 19.444vw;
    height: 25vw;

    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    z-index: 100;

    transform: translate(-50%, -50%);
}


.hoverImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

.sl6{
    /*margin-top: 100vh;*/
    width: 100%;
    box-sizing: border-box;
    padding-top: 210px;
}


.productsContMobileimg{
    display: none;
}

.sl6Box{
    grid-column: 6 / 12;
    height: auto;
    width: 555px;
    width: 38.194vw;
    background-color: var(--white);
    border-radius: 30px;
    box-sizing: border-box;
    padding: 45px;
    padding-top: 35px;
    margin: auto;
}

.sl6Box h3{
    color: var(--primary);
    margin-bottom: 15px;
    font-weight: normal;
}

.sl6Box p{
    color: var(--grey1);
}

.sl6Box img{
    margin-top: 35px;
    width: 100%;
    height: auto;
}

.ctaDown{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.ctaDown svg{
    margin-left: 10px;
    fill: var(--white);
}
.ctaDown:hover svg{
    fill: var(--primary);
}

.sl7 {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;

    display: flex;
    align-items: center;
    z-index: 70;
}

.servicePanel {
    flex-shrink: 0;
    width: 510px;
    height: 100vh;
    box-sizing: border-box;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border-right: 1px solid var(--primary);
    background-color: var(--white);
    color: var(--primary);
}
.servicePanel:last-child{
    border: 0px;
}

.servicePanel div{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    /*
    height: 280px;
    height: 40%;
    */


}

.servicePanel h4{
    text-transform: uppercase;
    margin-bottom: 30px;
    height: auto;
}

.sl8{
    background-color: var(--white);
    z-index: 78;
    border-radius: 0px 0px 70px 70px;
    box-sizing: border-box;
    padding-top: 160px;
    padding-bottom: 240px;

    position: relative;
}

.sl8-p{
    grid-column: 2/13;
    color: var(--primary);
    padding-bottom: 120px;
}


.sl8 img{
    border-radius: 15px;
    width: 100%;
    height: auto;
    height: 350px;
    height: 24.306vw;

    object-fit: cover;
    object-position: center;

    grid-column: 2 / 7;

    position: sticky;
    top: 110px;
}

.sl8-textBox{
    grid-column: 8 / 12;
    position: relative;
    color: var(--primary);

    display: flex;
    flex-direction: column;
    gap: 30px;
}

.sl8-textBox div{
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.sl8-textBox ul li{
    padding: 14px 0px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--primary);
    list-style: none;
}
.sl8-textBox ul li:last-child{
    border: 0px;
}


.sl9{
    box-sizing: border-box;
    padding-top: 152px;
    padding-bottom: 200px;
}

.sl9-box{
    grid-column: 6 / 12;

    margin: auto;
    width: 555px;
    width: 38.194vw;
    box-sizing: border-box;
    padding: 40px 45px;
    border-radius: 30px;
    background: var(--white);

    display: flex;
    flex-direction: column;
    gap: 30px;
}

.sl9-box h3{
    color: var(--primary);
}

.grecaptcha-badge{
    visibility: hidden;
}

form{
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin: 0;
}

.fieldCont{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fieldCont2{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.formData,
.formDataMessage{
    width: 100%;
    background-color: unset;
    border-style: unset;
    box-sizing: border-box;
    padding: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--grey1);
    color: var(--grey1);
    border-radius: 0;

    font-size: 1rem;
}

.formData::placeholder,
.formDataMessage::placeholder{
    color: var(--grey1);
    opacity: 0.7;
}

.formDataMessage{
    height: 200px;
}

.notice{
    color: var(--grey1);
    text-align: center;
    font-size: 8px;
}

.checkbox label{
    padding-left: 35px;
    padding-top: 5px;
    color: var(--grey1);

    font-size: 12px;
    line-height: 1;
}

.checkbox a, 
.notice a{
    color: var(--grey1);
    text-decoration: underline;
}
.checkbox a:hover,
.notice a:hover{
    opacity: 0.8;
    text-decoration: underline;
}
.checkboxContainer {
    display: block;
    position: relative;
    padding-left: 40px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.checkboxContainer input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.checkmark{
    position: absolute;
    top: 0;
    left: 0;
    height: 22px;
    width: 22px;
    background-color: var(--grey2);
    border-radius: 4px;
}
.checkboxContainer input:checked ~ .checkmark {
    background-color: var(--primary);
    height: 22px;
    width: 22px;
}
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.checkboxContainer input:checked ~ .checkmark:after {
    display: block;
}
.checkboxContainer .checkmark:after {
    left: 8px;
    top: 5px;
    width: 3px;
    height: 8px;
    border: solid var(--white);
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
/* end checkbox */

form .cta{
    border-style: none;
    border: 1px solid var(--primary);
}

textarea{
    font-family: 'Switzer-Variable';
}


footer{
    width: 100%;
    box-sizing: border-box;
    padding: 0px 40px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

footer p,
footer a{
    color: var(--white);
    text-decoration: none;
}

footer a:hover{
    opacity: 0.6;
}

.logoFtr{
    width: 40%;
    box-sizing: border-box;
    border: 1px solid var(--white);
    border-left: 0px;

    display: flex;
    align-items: flex-start;
    align-items: center;
}


.ftrBox2 {
    width: 60%;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--white);
}

.ftrBox2 div{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid var(--white);
    box-sizing: border-box;
    padding: 20px;
    padding-right: 0px;
}

.ftrBox3{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--white);
    box-sizing: border-box;
    padding: 20px 0px;
}

.sl11{

    text-align: center;
    color: var(--white);
    box-sizing: border-box;
    padding-top: 180px;
    padding-bottom: 40px;
    
    /*padding-bottom: 100vh;*/

    
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    
    height: auto;    
}

.sl11 h2{
    width: 74%;
    text-align: center;
    z-index: 60;
}

.scrollIcon2{
    width: 30px;
    height: 30px;
    background: url('../img/scrollIcon.svg');
    background-size: contain;
    background-position: center;
    border: 1px solid var(--white);
    border-radius: 50%;
}


.worldCont{
    width: 100%;
    height: 120vh;

    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.world{
    width: 100%;
    height: 120vh;
    object-fit: contain;
    object-position: top;

    z-index: 70;
}



.sentCont{
    display: flex;
    flex-direction: column;
    pointer-events: all;
    cursor: auto;
    gap: 40px;

    background-color: var(--white);
    color: var(--primary);
}

.sentCont .logo{
    width: 20%;
    height: auto;
}

.sentCont h1{
    text-align: center;
}

#second{
    margin-top: -25%;
}


@media only screen and (max-width: 768px) {

    .grid{
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        padding: 0px 20px;
    }


    h1, .display{
        font-size: 44px;
    }
    
    h2{
        font-size: 22px;
    }
    
    h3{
        font-size: 18px;

        font-size: 22px;
    }
    
    .dropdownTitle h5{
        font-size: 1rem;
    }
    
    .productsCont h2{
        font-size: 32px;
    }
    
    .servicePanel span{
        font-size: 130px;
    }
    
    .servicePanel h4{
        font-size: 22px;
    }
    
    .display-par{
        font-size: 26px;
     }
    
    .cta{
        font-size: 1rem;
    }
    

    .navpil{
        padding: 13px;
        padding-left: 27px;
        padding-right: 14px;
        width: 86%;
        justify-content: space-between;
        gap: 20px;
        width: fit-content;
    }

    nav .logo{
        width: 150px;
        width: 38.168vw;
    }

    nav .cta{
        padding: 10px 16px;
        font-size: 12px;
    }

    .sl1{
        box-sizing: border-box;
        padding: 0px 20px;
        height: 100dvh;
    }

    .sl1 h1{
        width: 100%;
    }


    .sl2{
        padding-top: 50vh;
        padding-bottom: 50vh;
        padding-left: 20px;
        padding-right: 20px;
    }
    .sl2 h2{
        width: 100%;
    }

    .dropdownCont{
        grid-column: span 4;
    }

    .dropdownTitle{
        padding: 14px 0px;
    }
    .dropdownHinner p{
        padding-bottom: 40px;
    }

    .dropdownHinner{
        padding-right: 10%;
    }

    .sl4{
        padding-top: 30vh;
        padding-bottom: 30vh;
    }
    .compare-boxCont{
        grid-column: span 4;
        z-index: 70;
    }

    .compare-col2{
        width: 18%;
    }
    .compare-col3{
        width: 18%;
    }
    .compareIconHead{
        align-items: center;
        height: 110px;
    }


    .compare-el{
        height: 54px;
        line-height: 1.1;
    }

    .compare-el:first-child{
        margin-top: 110px;
    }
    .compare-col1 .compare-el{
        box-sizing: border-box;
        padding-right: 15px;
    }
    .compare-el:last-child{
        margin-bottom: 20px;
    }

    .compareIconHead{
        padding-top: 15px;
    }

    .compareIconHead span{
        transform: rotate(-90deg);
        line-height: 1;
    }
    .compareIconHead2{
        display: flex;
        align-items: center;
        padding: 0;
    }
    .compareIconHead2 span{
        line-height: 1.25;
        font-size: 10px;
        width: 300px;
        display: inline-block;
        text-align: center;
    }

    .sl5{
        height: 110vh;
        height: 930px;
    }
    .sl5Cont{
        height: 110vh;
        height: 930px; 

        gap: 50px;
        border-radius: 50px;
    }
    .sl5Cont h4{
        margin-top: 0;
    }
    .productsCont h2{
        padding-top: 25px;
        padding-bottom: 20px;
    }

    .hoverImage{
        display: none;
    }

    .productsContMobileimg{
        display: block;
        width: 100%;
        margin-top: 50px;
        height: auto;
        border-radius: 20px;
        height: 400px;
        object-position: center;
        object-fit: cover;
    }

    .sl6{
        box-sizing: border-box;
        padding-top: 30vh;
    }

    .sl6Box{
        grid-column: span 4;
        width: 100%;
        padding: 30px;
        z-index: 70;
    }

    .servicePanel{
        width: 100vw;
        padding: 30px;
    }

    
    .servicePanel div{
        gap: 20px;
    }
    
    .servicePanel div h4{
        margin-bottom: 0px;
    }

    .sl8{
        padding-top: 80px;
        padding-bottom: 120px;
        margin-top: -3px;
    }

    .sl8-p{
        grid-column: span 4;
        padding-bottom: 30px;
    }

    .sl8 img{
        grid-column: span 4;
        position: relative;
        top: 0px;
        margin-bottom: 60px;
        border-radius: 15px;
        height: auto;
    }

    .sl8-textBox{
        grid-column: span 4;   
        gap: 10px;
    }

    .sl9{
        padding-top: 50vh;
        padding-bottom: 20vh;
    }

    .sl9-box{
        grid-column: span 4; 
        width: 100%;  
        padding: 30px;
        z-index: 70;
    }

    .fieldCont{
        gap: 10px;
    }

    footer{
        flex-direction: column;
        padding: 0 20px;
    }
    footer p, footer a{
        text-align: center;
    }

    .logoFtr{
        border: 0px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        padding-bottom: 25px;
    }

    .ftrBox2{
        width: 100%;
        align-items: center;
        flex-direction: column;
        gap: 8px;
    }
    .ftrBox2 div{
        width: 100%;
        align-items: center;
        flex-direction: column;
        gap: 8px;
        gap: 0px;
        padding: 0;
        padding-top: 15px;
        padding-bottom: 15px;
    }
    .ftrBox2 div p{
        line-height: 1;
    }

    .ftrBox3{
        width: 100%;
        align-items: center;
        flex-direction: column;
        gap: 10px;
        border-bottom: 0px;
        padding-bottom: 50px;
    }

    .sl11{
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 60px;
        height: auto;
    }
    .sl11 h2{
        width: 100%;
    }

    .worldCont{
        width: 100%;
        height: 70vh;
        align-items: flex-start;
    }

    .world{
        width: 100%;
        height: 40vh;
    }

    #second{
        display: none;
    }
    .sl11{
        display: none;
    }



}