@font-face {
    font-family: 'montserratextrabold';
    src: url('fonts/montserrat-extrabold-webfont.woff2') format('woff2'),
    url('fonts/montserrat-extrabold-webfont.woff') format('woff');
}
@font-face {
    font-family: 'montserratsemibold';
    src: url('fonts/montserrat-semibold-webfont.woff2') format('woff2'),
    url('fonts/montserrat-semibold-webfont.woff') format('woff');
}
@font-face {
    font-family: 'montserratregular';
    src: url('fonts/montserrat-regular-webfont.woff2') format('woff2'),
    url('fonts/montserrat-regular-webfont.woff') format('woff');
}

:root{--primary-color: #DAF400;--cl-style-dk: #2A2A2A;--cl-style-md: #515151;--cl-style-lt: #ffffff;}
html{position: relative;height: inherit;min-height: 100%;}
body {position: absolute;display: block;height: 100%;min-height: 100%;width: 100%;min-width: 330px;padding: 0;margin: 0;}
*{box-sizing: border-box;}
h1, h2, h3, h4, p, span, label, a, button, input, select, textarea, *{font-family: 'montserratregular', sans-serif;font-style: normal;font-weight: 400;text-decoration: none;margin: 0;padding: 0; }
h1, h2, h3, h4, p, span, label, a, button, input, select, textarea{color: var(--cl-style-dk);font-size: 18px;line-height: 22px;}
*::placeholder{font-family: 'montserratregular', sans-serif;font-style: normal;color: var(--cl-style-dk);margin: 0;font-weight: 400;}
::-webkit-scrollbar{display: block;width: 10px;}
::-webkit-scrollbar-track{background: var(--cl-style-md);}
::-webkit-scrollbar-thumb{background: var(--cl-style-lt);}
::-webkit-scrollbar-thumb:hover{background: var(--primary-color);}

.font-size-xs,.font-size-xs *{font-size: 14px;line-height: 18px;}
.font-size-sm,.font-size-sm *{font-size: 16px;line-height: 20px;}
.font-size-md {font-size: 18px;line-height: 22px;}
.font-size-lg{font-size: 22px;line-height: 26px;}
.font-size-xl, .font-size-xl *{font-size: 34px;line-height: 40px;}
.font-giant{font-family: 'montserratextrabold', sans-serif;font-size: 40px;line-height: 46px;}
.font-up{text-transform: uppercase;}

.cl-py{color: var(--primary-color)}
.cl-lt{color: var(--cl-style-lt)}

.mt-2{margin-top: 20px;}.mb-2{margin-bottom: 20px;}
.mt-3{margin-top: 30px;}.mb-3{margin-bottom: 30px;}
.mt-4{margin-top: 40px;}.mb-4{margin-bottom: 40px;}

.flex, .flex-desk, .flex-pad{display: flex;align-items: center;justify-content: space-between;}
.flex-desk.top{align-items: flex-start;}
.txt-center, .txt-center * {text-align: center}
.text-line-desktop{display: block;}
.container{margin: 0 auto;max-width: 1140px;}

a.link-df{cursor: pointer;}
.btn{display: flex;align-items: center;background-color: var(--cl-style-dk);color: var(--cl-style-lt);text-align: center;padding: 7px 40px;max-width: 360px;width: fit-content;cursor: pointer;border-radius: 100px;border: 2px solid var(--primary-color);margin: 0 auto;}

*.font-ebold, .font-ebold *{font-family: 'montserratextrabold', sans-serif;}
h1 b,p b,
*.font-sbold, .font-sbold *{font-family: 'montserratsemibold', sans-serif;}

header {position: fixed;top: 0;left: 0;width: 100%;background: var(--cl-style-dk);z-index: 999;box-shadow: 0 0 11px rgba(0, 0, 0, 0.9);}
header .container {height: 60px;align-items: center;/* box-shadow: 0 0 11px rgba(0,0,0, 0.2); */}
header a.logo{width: 140px;aspect-ratio: 140/33;background: url("img/logo.avif") 50% no-repeat;background-size: contain;margin: 0 auto 0 0}
header a.link-df{padding: 0 10px;margin: 0 10px;}
header .btn{padding: 3px 10px;margin-right: 0;}
a.icon[title=instagram]{display: block;margin-left: 10px;width: 35px;aspect-ratio: 1;background: url("img/instagram.svg") 50% no-repeat;background-size: contain;}

.main{padding-top: 60px;}

.hero-section{position: relative;min-height: 600px;background: #000;padding: 300px 0;margin: -88px 0 0;}
.hero-section .video-box{position: absolute;top: 0;left: 0;display: flex;justify-content: center;width: 100%;height: 100%;z-index: 1;overflow: hidden;}
.hero-section .frame-box{position: absolute;min-width: 1920px;width: 100%;aspect-ratio: 16 / 9;}
.hero-section video{width: 100%; height: 100%;pointer-events: none;}

.hero-section .container{width: 100%;position: relative;z-index: 1}
.hero-section h1{max-width: 630px;}
.hero-section a{margin-left: 0}

.truck-section{padding: 40px 0;}
.truck-section h2{background: url("img/gigante-bg.avif") 50% 0 no-repeat;background-size: contain;padding: 40px 0;margin: 0 auto 40px;}
.truck-section .truck-list{text-align: center;}
.truck-section .truck-list h3,
.truck-section .truck-list p{padding: 0 15px}
.truck-section .truck-list .item{position: relative;display: inline-flex;flex-direction: column;width: 100%;max-width: 300px;height: 460px;text-align: left;border-radius: 20px;margin: 10px;box-shadow: 0px 0px 10px rgba(0,0,0,0.2);}
.truck-section .truck-list .item::before{content: '';display: block;width: 300px;height: 224px;aspect-ratio: 305 / 228;border-top-right-radius: 10px;border-top-left-radius: 10px;margin-bottom: 10px;}
.truck-section .truck-list .item:nth-child(1)::before{background: url('img/truck-1.avif') 50% no-repeat;background-size: cover;}
.truck-section .truck-list .item:nth-child(2)::before{background: url('img/truck-2.avif') 50% no-repeat;background-size: contain;}
.truck-section .truck-list .item:nth-child(3)::before{background: url('img/truck-3.avif') 50% no-repeat;background-size: contain;}

.advantage-section{padding: 40px 0;}
.advantage-section .advantage-list{text-align: center;}
.advantage-section .advantage-list h3{min-height: 60px;margin-bottom: 10px;}
.advantage-section .advantage-list .item{display: inline-flex;flex-direction: column;width: 100%;max-width: 300px;min-height: 150px;background: var(--cl-style-dk);text-align: left;padding: 10px;margin: 10px;border-radius: 10px;}

.discovery-section{width: 100%;background: var(--primary-color);padding: 60px 0;}
.discovery-section h2 {position: relative;max-width: 550px;margin-bottom: 70px;}
.discovery-section h2 .effect{position: absolute;right: -130px;bottom: -45px;width: 400px;font-size: 80px;line-height: 80px;color: var(--primary-color);text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;}
.discovery-section .step-box{text-align: center;margin-bottom: 40px}
.discovery-section .step-box p{position: relative;display: inline-flex;flex-direction: column;width: 100%;max-width: 250px;height: 260px;text-align: left;padding: 0 20px 20px;border: 3px solid var(--cl-style-lt);border-radius: 20px;margin: 10px;}
.discovery-section .step-box p::before{content: '';display: block;width: 20px;height: 3px;background: var(--cl-style-dk);margin-bottom: 20px;}
.discovery-section .step-box p::after{order: -1;display: block;font-family: 'montserratextrabold', sans-serif;font-size: 120px;line-height: 100px;margin: 0 0 20px -24px;color: var(--cl-style-lt)}
.discovery-section .step-box p:nth-child(1)::after{content: '01';}
.discovery-section .step-box p:nth-child(2)::after{content: '02';}
.discovery-section .step-box p:nth-child(3)::after{content: '03';}
.discovery-section .step-box p:nth-child(4)::after{content: '04';}

.partner-section{position: relative;width: 100%;background: var(--primary-color);padding: 60px 0;}

.partner-section::before{content: '';position: absolute;right: 50%;width: calc(100% - 580px);max-width: 630px;height: calc(100% - 120px);background: url('img/partner.avif') 50% no-repeat;background-size: cover;}
.partner-section .content{max-width: 500px;margin-left: auto;}

.cases-section .owl-nav{position: absolute;top: 40px;left: 50%;display: flex;justify-content: space-between;width: 360px;max-width: 100%;transform: translate(-50%, -50%);margin: 0 auto;}
.cases-section .owl-nav button{width: 32px;height: 32px;}
.cases-section .owl-nav button.owl-next:hover,
.cases-section .owl-nav button.owl-next{background: url('svg/owl-next.svg') 50% no-repeat;background-size: cover;}
.cases-section .owl-nav button.owl-prev:hover,
.cases-section .owl-nav button.owl-prev{background: url('svg/owl-prev.svg') 50% no-repeat;background-size: cover;}

.customer-section{background: var(--cl-style-dk);padding: 40px 0;}
.customer-section .customer-box{max-width: 1070px;text-align: center;margin: 0 auto;/* padding: 0 40px; */}
.customer-section .customer-box .item{display: flex;align-items: center;justify-content: center;width: auto;height: 60px;}
.customer-section .customer-box img{max-width: 100%; max-height: 100%;}

.form-section{padding: 60px 0 40px;}
.form-box{max-width: 825px;background: #F6F6F6;padding: 25px 0;margin: 0 auto;border-radius: 30px;}
input, select, textarea{-webkit-appearance: none;-moz-appearance: none;appearance: none;outline: none;width: 100%;max-width: 650px;font-size: 16px;padding: 12px 30px;margin: 0 auto;border: 2px solid var(--cl-style-dk);}
input::placeholder{font-family: 'montserratsemibold', sans-serif;font-size: 16px;}

.service-section{padding: 40px 0 30px;}
.service-section h2{max-width: 350px;margin: 0 auto 40px;}
.service-list{text-align: center;}
.service-list img{display: inline-flex;width: 100%;max-width: 16%;}

footer{background-color: var(--cl-style-dk);padding: 40px 0 40px;}
footer *{color: var(--cl-style-lt)}
footer .content,
footer .google-map{width: 100%;max-width: 500px;margin: 0 auto;}
footer .google-map{max-width: 600px;}
footer .google-map iframe{display: block;width: 100%;max-width: 600px;aspect-ratio: 6 / 4;margin: 0 auto;}

.terms-section{padding: 40px 0 40px;}

@media (max-width: 1172px) {
    * .container{margin: 0 20px;}

    .partner-section::before{right: 590px;background-position-x: 0;}
}
@media (max-width: 990px) {
    *.flex-desk{display: block;}
    header a.link-df{padding: 0}

    .service-list img{display: inline-flex;width: 100%;max-width: 32%;}

    footer .content *{text-align: center}
}
@media (max-width: 740px) {
    header nav a{display: none}
    header nav a:last-child{display: block;}
    .hero-section .container *{text-align: center;margin-left: auto}
}
@media (max-width: 900px) {
    .partner-section::before{position: initial;display: block;width: 100%;aspect-ratio: 710/517;margin: 0 auto 40px;}
    .partner-section .content{max-width: 500px;margin: auto;}

    .trust-section .trust-box img{margin: 15px 10px}
}
@media (max-width: 720px) {
    .discovery-section h2{text-align: center;margin: 0 auto}
    .discovery-section h2 .effect{position: initial;display: block;margin: 0 auto 20px;}

    .cases-section .item::before{content: none;}
}
@media (max-width: 680px) {
    .partner-section{text-align: center}
    .partner-section::before {max-width: calc(100% - 40px);margin: 0 20px 40px;}
}
@media (max-width: 440px) {
    .discovery-section h2 .effect{font-size: 56px;line-height: 60px;width: auto;}
}