/*input { outline: none }
input.error { border: 1px solid red }

label.error { color: red }*/

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@100;200;300;400;500;600;700;800;900&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

:root { --primary-color: #3ba2b0; --secondary-color: #433123; --global-spacing: 280px; --bkg-color: #e7e4e3 }
html { font-family: 'Barlow', sans-serif; }
::-webkit-scrollbar-track { background-color: #FFF; }
::-webkit-scrollbar { width: 7px; background-color: #FFF; }
::-webkit-scrollbar-thumb { background-color: var(--primary-color); }

/*privacy*/
.privacy-popup-wrapper { position: fixed; display: block; z-index: 10000; bottom: -500px; right: 25px; width: 500px; padding: 25px; margin: 0; background-color: #ffffff; color: #000; border: 1px solid #000; font-size: 1em; opacity: 0; transition: all 1s linear; }
.privacy-popup-wrapper.show { opacity: 1; bottom: 25px; transition: all 1s linear; }
.privacy-popup-wrapper .privacy-popup-wrapper-content { text-align: center; padding: 0; margin: 0; }
.privacy-popup-wrapper .privacy-popup-wrapper-content .privacy-popup-content { }
.privacy-popup-wrapper .privacy-popup-wrapper-content .privacy-popup-content .privacy-popup-title { font-size: 2em; line-height: 1.5em; text-transform: uppercase; letter-spacing: 5px; }
.privacy-popup-wrapper .privacy-popup-wrapper-content .privacy-popup-content .privacy-popup-text { line-height: 2em; }
.privacy-popup-wrapper .privacy-popup-wrapper-content .privacy-popup-content .privacy-popup-text a { color: #000; font-weight: 600; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; }
.privacy-popup-wrapper .privacy-popup-wrapper-content .privacy-popup-content .privacy-popup-text a:hover { color: #000; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; }
.privacy-popup-wrapper .privacy-popup-wrapper-content .privacy-popup-actions { padding-top: 10px; }
.privacy-popup-wrapper .privacy-popup-wrapper-content .privacy-popup-actions a.privacy-allow { display: inline-block; text-transform: uppercase; font-weight: 600; color: #000; text-decoration: underline; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; }
.privacy-popup-wrapper .privacy-popup-wrapper-content .privacy-popup-actions a.privacy-allow:hover { color: #000; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; }

.privacy-link-wrapper span a { color: #000; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; }
html:not(.touch) .privacy-link-wrapper span a:hover { color: #000; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; }

@media (max-width: 1023px) {
    .privacy-popup-wrapper { width: auto; left: 10px; right: 15px; bottom: 15px; }
}

/*landing intro*/
.landing-intro { position: relative; overflow: hidden; padding-bottom: 90px; padding-inline: var(--global-spacing); background: rgb(255,255,255); background: linear-gradient(180deg, rgba(255,255,255,1) 19%, rgba(67,49,35,0.13) 19%, rgba(67,49,35,0.13) 65%, rgba(255,255,255,1) 65%); }
.landing-intro > *:not(.landing-intro__bkg-image) { position: relative; z-index: 1000; }
.landing-intro > .landing-intro__bkg-image { position: absolute; top: -27%; left: 0; opacity: 0.05; width: 100%; transform: scale(1.6) }
.logo-container { text-align: center; margin-top: 40px; margin-bottom: 70px; display: block }
.footer-content-container > .logo-container { margin: 0; filter: invert(1); }
.logo-container > img { width: 200px; }
.landing-title { font-size: 3rem; color: var(--primary-color); display: block; text-align: center; margin-bottom: 30px; font-weight: 500; }
.landing-paragraph { font-size: 1.2rem; line-height: 1.6rem; color: var(--secondary-color); display: block; text-align: center; margin-bottom: 40px }
.landing-paragraph-green { font-size: 1.5rem; font-weight: 500; line-height: 1.6rem; color: var(--primary-color); display: block; text-align: center; margin-bottom: 40px }

.landing-intro__video-container { position: relative; margin-bottom: 50px; }
.landing-intro__video-container > img { width: 100%; aspect-ratio: 16 / 9; }
.landing-intro__video-container > svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); fill: #FFF; width: 110px }
.landing-intro__video-container > iframe { width: 100%; height: 100%; aspect-ratio: 16 / 9; }

.landing-btn { padding: 30px 40px; background-color: var(--primary-color); width: fit-content; margin-inline: auto; text-align: center; cursor: pointer; transition: all 0.3s }
.landing-btn > span { color: #FFF; font-size: 2.0rem; font-weight: 500; }
.landing-btn > span.txt-landing-btn { display: block; font-size: 1.0rem; font-weight: 300; padding: 0 18%; margin-top: 5px; }

.cnt-problema-soluzione { display: flex; width: 100%; text-align: center; justify-content: center }
.cnt-problema-soluzione > div { width: 45%; padding: 0 6%; }
.cnt-problema-soluzione > div > span { font-size: 2.3rem; color: var(--primary-color); font-weight: 500; display: block }

/*landing middle*/
.landing-middle { background: #e7e4e3; padding-top: 3%; padding-bottom: 2%; }
.landing-middle__content-container { display: display; padding-inline: var(--global-spacing); gap: 100px }
.landing-middle__image-container { width: 800px; height: auto; }
.landing-middle__image-container > img { width: 100%; height: auto; object-fit: cover; }
.landing-middle__content { }
.landing-middle .landing-paragraph { text-align: center; }
.landing-paragraph-brown { font-size: 2.5rem; font-weight: 500; display: block; padding: 0 25%; line-height: 2.4rem }
.landing-middle .landing-paragraph-green { display: block; margin-bottom: 20px; }

/*landing bottom*/
.landing-bottom { padding-inline: var(--global-spacing); padding-top: 60px; padding-bottom: 0px; }
.landing-bottom .landing-paragraph-green > span { padding: 0 20% 2% 20%; display: block; font-size: 1.8rem; line-height: 1.8rem; }
.landing-bottom .ctn-box { display: flex; width: 100%; text-align: center; justify-content: center; margin-bottom: 6% }
.landing-bottom .ctn-box > div { width: 33%; text-align: center; }
.landing-bottom .ctn-box > div img { width: 100%; }
.landing-bottom .ctn-box > div > span { display: block; font-size: 1.2rem; padding: 5% 25% 0 25%; line-height: 1.3rem; font-weight: 600; color: var(--primary-color); }
.landing-bottom .landing-paragraph-green > .landing-paragraph { font-size: 1.3rem; line-height: 1.4em; font-weight: 400; padding: 0 20% 2% 20%; }

/*landing bottom2*/
.landing-bottom2 { background: #e7e4e3; padding-inline: var(--global-spacing); padding-top: 60px; padding-bottom: 10%; }
.landing-bottom2 .landing-paragraph-green > span { padding: 0 0% 2% 0%; display: block; font-size: 1.8rem; line-height: 1.8rem; }
.landing-bottom2 .ctn-box { display: flex; width: 100%; text-align: center; justify-content: center; margin-bottom: 6% }
.landing-bottom2 .ctn-box > div { width: 33%; text-align: center; }
.landing-bottom2 .ctn-box > div img { width: 100%; }
.landing-bottom2 .ctn-box > div > span { display: block; font-size: 1.2rem; padding: 5% 25% 0 25%; line-height: 1.3rem; font-weight: 600; color: var(--primary-color); }
.landing-bottom2 .landing-paragraph-green > .landing-paragraph { font-size: 1.2rem; line-height: 1.4em; font-weight: 400; padding: 0 16%; }

/*landing bottom3*/
.landing-bottom3 { padding-inline: var(--global-spacing); padding-top: 60px; padding-bottom: 80px; }
.landing-bottom3 .ctn-box { display: flex; width: 100%; text-align: center; justify-content: center; margin-bottom: 6% }
.landing-bottom3 .ctn-box > div { width: 50%; text-align: center; }
.landing-bottom3 .ctn-box > div > span { display: block; font-size: 1.2em; margin-top: 15px; padding: 0 15%; }
.landing-bottom3 .ctn-box > div > span.landing-paragraph-green { display: block; font-size: 1.6em; margin-bottom: 26px; margin-top: 20px }
.landing-bottom3 .ctn-box > div img { width: 100%; }
.landing-bottom3 .landing-paragraph-green { font-size: 1.8rem; line-height: 1.2em; font-weight: 500; }
.landing-bottom3 .landing-paragraph-green > .landing-paragraph { font-size: 1.2rem; line-height: 1.4em; font-weight: 400; padding: 0% 3%; }
.landing-bottom3 .landing-paragraph-brown { font-size: 1.8rem; color: var(--secondary-color); font-weight: 500; margin-top: 5%; display: block; line-height: 2.4rem; margin-bottom: 20px }
.landing-bottom3 .ctn-box > div > img.logomodozero { width: 40%; margin-top: 20px }

/*landing form*/
.landing-contact-form { background-color: var(--bkg-color); padding: 60px 0 }
.landing-contact-form__content-container { padding-inline: var(--global-spacing); display: flex; flex-direction: column; gap: 25px }
.form-row { display: flex; width: 100%; gap: 30px }
.form-field { width: 100%; display: flex; flex-direction: column; }
.form-field > label { color: var(--secondary-color); margin-bottom: 8px }
.privacy-label.error { color: red }
.form-field > input,
.form-field > select { border: none; height: 40px; outline: none; border: 1px solid transparent; transition: all 0.3s; padding-inline: 10px }
.form-field > input.error,
.form-field > select.error { border: 1px solid red }
.form-field > textarea { border: none; outline: none; border: 1px solid transparent; transition: all 0.3s; padding: 10px }
.form-field > input:not(.error):focus,
.form-field > textarea:focus { border: 1px solid var(--secondary-color) }
.radio-label-container > label { color: var(--secondary-color) }
.landing-mastruzzi { padding: 15px; border-radius: 50px; background-color: var(--primary-color); width: 150px; margin-inline: auto; text-align: center; cursor: pointer; transition: all 0.3s; margin-top: 30px; }
.landing-mastruzzi > span { font-size: 1.3rem; font-weight: 400; text-transform: uppercase; color: #FFF; }

input#address { display: none }
.submit-container.error { color: red }
.submit-container.success { color: green }

/*footer*/
footer { background-color: var(--secondary-color); color: #FFF; }
.footer-content-container { padding: 80px 100px; display: flex; justify-content: space-between; align-items: center; }
footer > .decoration-line { height: 12px }
footer > .decoration-line:nth-child(odd) { background-color: var(--secondary-color); }
footer > .decoration-line:nth-child(even) { background-color: var(--bkg-color); }
.copyright > span { display: block; font-weight: 500; }
.copyright > p { font-weight: 300; line-height: 1.5rem; }

/*privacy policy*/
.landing-intro.policy { padding-inline: 80px; background: none; }
.policy-title { font-size: 2rem; color: var(--primary-color); display: block; margin-bottom: 30px; font-weight: 500; }
.policy-paragraph, ul, u { font-size: 1.2rem; line-height: 1.6rem; color: var(--secondary-color); display: block; margin-bottom: 40px }
u { margin-bottom: 10px }
.brown-title { font-weight: 500; color: var(--secondary-color) }
.policy-subtitle { font-weight: 600; color: var(--primary-color); text-transform: uppercase; display: block; margin-top: 30px; font-size: 1.5rem; margin-bottom: 10px }
.footer-link { color: #FFF; text-decoration: none; margin-top: 10px; display: block }

@media (pointer: fine) {
    .landing-btn:hover, .landing-mastruzzi:hover { background-color: var(--secondary-color); }
    .footer-link:hover { text-decoration: underline }
}

@media (max-width: 1800px) {
    .landing-middle { background: linear-gradient(180deg,var(--bkg-color)85%,#FFF 10%); }
    .landing-paragraph-brown { padding: 0 20% 5% 20%; }
    .landing-bottom3 .landing-paragraph-brown { padding-bottom: 0%; }
}

@media (max-width: 1600px) {
    .landing-middle__image-container { flex-shrink: 0; width: 40%; }
    .logo-container { margin-top: 40px; margin-bottom: 40px; }
    .landing-intro { position: relative; overflow: hidden; padding-bottom: 90px; padding-inline: var(--global-spacing); background: rgb(255,255,255); background: linear-gradient(180deg, rgba(255,255,255,1) 19%, rgba(67,49,35,0.13) 19%, rgba(67,49,35,0.13) 55%, rgba(255,255,255,1) 55%); }
    .cnt-problema-soluzione > div { width: 75%; padding: 0 4%; }
    .landing-bottom .landing-paragraph-green > span { padding: 0 12% 2% 12%; display: block; font-size: 1.6rem; line-height: 1.8rem; }
    .landing-bottom { padding-inline: var(--global-spacing); padding-top: 10px; padding-bottom: 0px; }
}

@media (max-width: 1500px) {
    :root { --global-spacing: 190px }
}

@media (max-width: 1400px) {
    .landing-middle { background: linear-gradient(180deg,var(--bkg-color)90%,#FFF 10%); }
    .landing-paragraph-brown { padding: 0 15% 5% 15%; }
}

@media (max-width: 1300px) {
    :root { --global-spacing: 110px }
    .logo-container { margin-bottom: 40px }
    .logo-container > img { width: 150px; }
    .landing-intro > .landing-intro__bkg-image { top: -22% }
}

@media (max-width: 1200px) {
    .landing-middle__content-container { gap: 50px }
}

@media (max-width: 1024px) {
    :root { --global-spacing: 80px }
    .logo-container { margin-top: 20px; }

    .landing-middle__content-container { flex-direction: column; gap: 30px; align-items: center; }
    .landing-middle { background: var(--bkg-color); padding-bottom: 5px; }
    .landing-bottom { padding-top: 30px; padding-bottom: 20px; }
    .landing-middle .landing-btn { text-align: center; }
    .landing-btn > span { font-size: 1.8rem; }
    .landing-intro__video-container { margin-bottom: 60px }
    .landing-intro > .landing-intro__bkg-image { top: -19% }
    .landing-contact-form__content-container { gap: 16px }
    .landing-contact-form { padding: 30px 0 }
    .footer-content-container { flex-direction: column; text-align: center; gap: 50px; padding: 50px 100px }
    .landing-middle__image-container { width: 100%; }
    .landing-middle__image-container > img { object-fit: contain; height: 500px }
    .landing-intro.policy { padding-inline: 30px }
    .policy-title { font-size: 1.6rem }
    .landing-paragraph-green { font-size: 1.3rem; line-height: 1.5rem; margin-bottom: 20px; }
    .landing-btn > span.txt-landing-btn { padding: 0 15%; }
    .landing-paragraph-brown { padding: 0 10% 0% 10%; font-size: 2.1rem; line-height: 1.1em; }
    .landing-bottom3 .landing-paragraph-brown { font-size: 1.6rem }
    .landing-bottom3 .landing-paragraph-green { font-size: 1.5rem; margin-bottom: 30px; }
    .landing-bottom3 .ctn-box > div > span { padding: 0 10%; }
}

@media (max-width: 767px) {
    .landing-intro { position: relative; overflow: hidden; padding-bottom: 90px; padding-inline: var(--global-spacing); background: rgb(255,255,255); background: linear-gradient(180deg, rgba(255,255,255,1) 15%, rgba(67,49,35,0.13) 15%, rgba(67,49,35,0.13) 45%, rgba(255,255,255,1) 45%); }
    :root { --global-spacing: 50px }
    .landing-title { font-size: 1.6rem; }
    .landing-intro__video-container { margin-bottom: 30px }
    .landing-intro { padding-bottom: 45px }
    .landing-intro > .landing-intro__bkg-image { top: -16% }
    .landing-btn { padding-block: 18px }
    .landing-bottom3 .landing-paragraph-brown { font-size: 1.6rem; line-height: 1.8rem }
    .cnt-problema-soluzione { display: block; }
    .cnt-problema-soluzione > div { width: 100% }
    .cnt-problema-soluzione > div > span { font-size: 1.8rem; }
}

@media (max-width: 480px) {
    .landing-intro { position: relative; overflow: hidden; padding-bottom: 90px; padding-inline: var(--global-spacing); background: rgb(255,255,255); background: linear-gradient(180deg, rgba(255,255,255,1) 15%, rgba(67,49,35,0.13) 15%, rgba(67,49,35,0.13) 45%, rgba(255,255,255,1) 45%); }
    :root { --global-spacing: 30px }
    .logo-container > img { width: 110px; }
    .landing-intro > .landing-intro__bkg-image { top: -9% }
    .landing-intro__video-container > svg { width: 80px }
    .landing-title { font-size: 1.6rem; }
    .landing-paragraph { font-size: 1.1rem; line-height: 1.4rem; }
    .form-row { flex-direction: column; gap: 16px; }
    .footer-content-container { padding: 50px 50px }
    .landing-btn > span { font-size: 1.6rem; }
    .landing-bottom { padding-bottom: 30px }

    .policy-title { font-size: 1.3rem; margin-bottom: 0px }
    .policy-subtitle { font-size: 1.4rem }
    .cnt-problema-soluzione { display: block; }
    .cnt-problema-soluzione > div { width: 100% }
    .cnt-problema-soluzione > div > span { font-size: 1.8rem; }
    .landing-btn > span.txt-landing-btn { padding: 0 2%; }
    .landing-paragraph-brown { padding: 0 10% 0% 10%; font-size: 1.8rem; line-height: 1em; }
    .landing-bottom .landing-paragraph-green > span { padding: 0 5% 2% 5%; display: block; font-size: 1.5rem; line-height: 1.6rem; }
    .landing-bottom .ctn-box { display: block; }
    .landing-bottom .ctn-box > div { width: 100%; text-align: center; }
    .landing-bottom .ctn-box > div > span { display: block; font-size: 1.3rem; padding: 3% 10% 8% 10%; line-height: 1.3rem; font-weight: 600; color: var(--primary-color); }
    .landing-bottom .landing-paragraph-green > .landing-paragraph { margin-top: 4%; line-height: 1.1em; margin-bottom: 5%; }
    .landing-bottom2 .landing-paragraph-green > span { font-size: 1.6rem; line-height: 1.8rem; }
    .landing-bottom2 .landing-paragraph-green > .landing-paragraph { padding: 0 5%; margin-top: 4% }
    .landing-bottom2 .ctn-box { display: block; }
    .landing-bottom2 .ctn-box > div { width: 100%; text-align: center; }
    .landing-bottom3 .landing-paragraph-brown { display: block; font-size: 1.5rem; line-height: 1.7rem; margin-top: 6%; }
    .landing-bottom3 .ctn-box { display: block }
    .landing-bottom3 .ctn-box > div { width: 100%; text-align: center; }
    .landing-bottom3 .ctn-box > div > span { padding: 0 10% 5% 10%; margin-top: 0px; }
    .landing-bottom3 .ctn-box > div > span.landing-paragraph-green { display: block; font-size: 1.6em; margin-bottom: 0px; margin-top: 20px; }
}

@media (max-width: 400px) {
    .landing-btn { padding-inline: 10px; }
    .landing-btn > span { font-size: 1.5rem; }
}

@media (max-width: 380px) {
    :root { --global-spacing: 20px }
    .landing-middle { padding-block: 30px }
    .landing-middle__content-container { gap: 0 }
}