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

* {
    margin: 0px;
    padding: 0px;
    /*
    box-sizing: border-box;
    outline: 1px dashed red;
    */
}

html {
    scroll-behavior: smooth;
}
html, body {
    width: 100%;
    overflow-x: auto;
}

/* 
html, body {
    overflow-x: hidden;
}
*/

.body {
    font-family: Barlow !important;
    background: rgba(32, 61, 115, 1);
}

/*Navbar*/

.navbar {
    background: rgba(32, 61, 115, 0.5);
    position: fixed;
    width: 100%;
    z-index: 500;
}

.navbar-brand {
    font-family: Barlow;
    color: rgba(255, 255, 255, 1);
    padding: 10px;
    margin-left: 50px;
}

.adcademy {
    margin-left: 10px;
    color: white;
}

/*pagina*/



.landing-page {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100vh 725px 850px 450px 300px 1150px 120px;
    grid-template-areas:
        "hero hero hero"
        "progetto-innovativo progetto-innovativo texts-progetto"
        "titolo-attivazione cards3 cards3"
        "dietro-adcademy dietro-adcademy wakiwi"
        "icone icone icone"
        "contact contact contact"
        "footer footer footer";
}
.hero {
    grid-area: hero;
    justify-self: center;
    justify-items: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100vh;
    overflow: visible;
    position: relative;
    background-image: url("./img/soggetto.png");
    background-size: 30% auto;
    background-repeat: no-repeat;
    background-position: left 20px bottom;
}
.progetto-innovativo {
    grid-area: progetto-innovativo;
    background-color: white;
}
.texts-progetto {
    grid-area: texts-progetto;
    background-color: white;
    margin-left: -250px;
    padding-top: 200px;
    padding-right: 100px;
}
.formazione-help {
    grid-area: formazione-help;
    background-color: white;
    padding-left: 150px;
    padding-top: 100px;
    padding-right: 150px;
}
.img-help {
    grid-area: img-help;
    background-color: white;
    position: relative;
    right: 0;
}
.cards-formazione {
    grid-area: cards-formazione;
    background-color: white;
    
}
.titolo-attivazione {
    grid-area: titolo-attivazione;
    background-color: white;
}
.cards3 {
    grid-area: cards3;
    background-color: white;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    padding-top: 50px;
}
.dietro-adcademy {
    grid-area: dietro-adcademy;
}
.wakiwi {
    grid-area: wakiwi;
}
.icone {
    grid-area: icone;
}
.cantact {
    grid-area: contact;
    background-color: white;
    justify-items: center;
    display: grid; /* ➜ necessario */
    justify-items: center; /* ➜ centra orizzontalmente gli elementi figli */
    align-items: center; /* ➜ opzionale: centra anche verticalmente */
}
.footer {
    grid-area: footer;
    background: rgba(32, 61, 115, 1);
}
    

/*hero*/


.bg-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -100;
    visibility: visible;
    filter: opacity(30%);
    background-size: cover;
    object-fit: cover;
}
/*
.soggetto {
    position: absolute;
    bottom: 0vh;
    width: 30%;
    margin-left: -650px;
    z-index: -50;
}
*/
.titolo-hero h1 {
    font-family: Barlow;
    font-size: 140px;
    font-weight: 750;
    line-height: 58px;
    letter-spacing: 5px;
    text-align: center;
    padding-top: 200px;
}
.titolo-bianco {
    color: #FFFFFF;
}
.titolo-blu {
    color: #21A6DC;
}
.titolo-blu-dark {
    color: #203d73;
}
.sottotitolo {
    font-family: Barlow;
    color: white;
    font-size: 27px;
    font-weight: 750;
    text-align: center;
    margin-top: 40px;
    margin-right: 36px;
}


.paragrafo-hero {
    font-family: Barlow;
    color: white;
    font-size: 20px;
    font-weight: normal;
    align-self: center;
    text-align: center;
    padding-top: 20px;
}
.contattaci {
    position: absolute;
    top: 70vh;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%) translateZ(0);
    will-change: transform;
    color: #fff;
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    width: 300px;
    height: 60px;
    line-height: 60px;
    box-sizing: border-box;
    border: 3px solid #fff;
    border-radius: 20px;
    background-color: tomato;
    z-index: 9999;
    cursor: pointer;
    transition: background-color 0.3s;
    justify-items: center;
    align-items: center; /* ✔ centra verticalmente */
}

.contattaci-btn {
    border: 0px;
    background-color: rgba(0, 0, 0, 0);
    color: white;
    font-weight: bold;
    width: 300px;
    height: 60px;
    display: flex;
    align-items: center; /* ✔ centra verticalmente */
    justify-content: center;
    margin-top: -3px;
}

.arrow {
    width: 40px;
}

.contattaci:hover {
    background-color: rgb(188, 59, 62);
}



/*progetto innovativo*/
.texts-progetto h1 {
    font-size: 40px;
    font-weight: 750;
    line-height: 58px;
    letter-spacing: 5px;
}
.texts-progetto h2 {
    font-size: 26px;
}
.texts-progetto p{
    font-size: 20px;
}
.paragrafo1Bold{
    font-weight: bold;
}
/*formazione help desk*/
.formazione-help h1 {
    font-size: 40px;
    font-weight: 750;
    line-height: 58px;
    letter-spacing: 5px;
}
.formazione-help p {
    font-size: 20px;
}

.immagine-help {
    position: absolute;
    right: 0;
}
.c-formazione {
    display: grid;
    grid-template-columns: repeat(3, 400px);
    justify-items: center;
    justify-self: center;
    padding-top: 70px;
}
.card1 {
    padding: 20px;
    text-align: center;
    margin: 10px;
    border-radius: 20px;
    width: 230px;
    height: 230px;
    background-color: #21a6dc;
}
.card1:hover{
    background-color: #2175dc;
}
.card1 img{
    margin-top: 15px;
}
.card1 h1{
    margin-top: 20px;
    font-size: 24px;
    font-family: Barlow;
    font-weight: 800;
    color: white;
}
.card1 p{
    font-size: 17px;
    font-family: Barlow;
    font-weight: bold;
    color: white;
    margin-top: 10px;
}
.card1-dark {
    background-color: #203d73;
}
.card1-dark:hover{
    background-color: #2d539c;
}



/* modalità di attivazione */


.titolo-attivazione {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "attivazione-title" "immagine-attivazione";
}
.attivazione-title {
    grid-area: attivazione-title;
}

.immagine-attivazione {
    grid-area: immagine-attivazione;
}
.titolo-attivazione h2 {
    font-size: 26px;
    padding-left: 150px;
}
.titolo-attivazione h1 {
    font-size: 40px;
    font-weight: 750;
    line-height: 58px;
    letter-spacing: 5px;
    padding-left: 150px;
}
.card3 {
    width: 375px;
    color: white;
    margin: 10px;
}
.card-title3 {
    background-color: #21a6dc;
    text-align: center;
    padding: 10px;
    border-radius: 20px;
    position: absolute;
    z-index: 10;
    margin-top: -40px;
    width: 200px;
    margin-left: 90px;
}
.card-title3:hover{
        background-color: #2175dc;
}
.card-title3 h1{
    font-size: 24px;
    font-weight: bold;
}
.card-body3 {
    background-color: #203d73;
    border-radius: 20px;
    padding-top: 50px;
}
.card-body3 p{
    padding: 20px;
    font-size: 20px;
}
.vantaggi {
    background-color: #21a6dc;
    border-radius: 20px;
}
.vantaggi:hover {
    background-color: #2175dc;
}
.vantaggi h1{
    padding: 20px;
    font-size: 24px;
    font-weight: bold;
}
.paragrafo-vantaggi {
    margin-top: -30px;
    height: 400px;
    font-size: 20px;
}




/* dietro adcademy */

.dietro-adcademy h1 {
    font-size: 40px;
    font-weight: 750;
    line-height: 58px;
    letter-spacing: 5px;
    padding-left: 150px;
    padding-top: 100px;
}
.dietro-adcademy p {
    font-size: 20px;
    color: white;
    padding-left: 150px;
    padding-right: 100px;
    padding-top: 10px;
}
.wakiwi {
    padding-top: 100px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    justify-items: center;
    padding-right: 200px;
}
.text-wakiwi{
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    color: white;
}
.icons {
    display: grid;
    grid-template-columns: repeat(4, 300px);
    background-color: white;
    margin-left: 150px;
    margin-right: 150px;
    margin-top: 50px;
    border-radius: 20px;
    justify-content: center;
    justify-items: center;
    text-align: center;
    padding-top: 20px;
}
.icons:hover {
    background-color: #d4effa;
}
.icone-frame h1 {
    color: #21a6dc;
    font-size: 24px;
    font-weight: bold;
}




/* contattaci */



.titolo5 {
    color: #203d73;
    font-family: Barlow;
    font-size: 40px;
    font-weight: 750;
    letter-spacing: 5px;
    margin-top: 100px;
}

.paragrafo5 {
    font-family: Barlow;
    font-size: 20px;
    color: black;
    width: 600px;
    font-weight: normal;
    text-align: center;
}
.form {
    background-color: #203d73;
    width: 800px;
    height: 750px;
    margin-top: 50px;
    display: flex;
    justify-content: center;
    justify-self: center;
    justify-items: center;
    transform: translateX(0%);
    -webkit-transform: translateX(0%) translateZ(0);
    will-change: transform;
    margin-bottom: 250px;
}
.input-area {
    display: grid;
    grid-template-areas:
        "nome cognome"
        "telefono email"
        "azienda azienda"
        "messaggio messaggio"
        "check-privacy check-privacy"
        "invia invia";
    justify-items: center;
    padding-top: 50px;
}
.nome {
    grid-area: nome;
    margin-left: 65px;
}
.cognome {
    grid-area: cognome;
    margin-right: 65px;
}
.telefono{
    grid-area: telefono;
    margin-left: 65px;
}
.email {
    grid-area: email;
    margin-right: 65px;
}
.azienda {
    grid-area: azienda;
}
.input-azienda {
    width: 630px;
    height: 40px;
}
.messaggio {
    grid-area: messaggio;
}
.check-privacy {
    grid-area: check-privacy;
    display: grid;
    grid-template-columns: 10px auto;
    justify-items: center;
}
.check-privacy input{
    margin-top: 18px;
}
.invia {
    grid-area: invia;
}
.input-element {
    padding: 10px;
}
.form-input {
    height: 40px;
    width: 300px;
}
.form-input:hover{
    background-color: #d4effa;
}
.input-azienda:hover {
    background-color: #d4effa;
}
.input-element p {
    color: white;
    font-size: 20px;
    font-weight: bold;
}
.form-text-area{
    width: 630px;
    max-height: 80px;
}
.form-text-area:hover{
    background-color: #d4effa;
}
.trattamento-dati {
    font-size: 15px;
    color: white;
    margin-top: 15px;
    padding-left: 15px;
}
.trattamento-dati a{
    color: white;
}
input[type="checkbox"] {
    transform: scale(3);
    margin-top: 20px;
}
.invia {
    width: 300px;
    height: 60px;
    color: #203d73;
    margin-left: 250px;
    font-size: 26px;
    font-weight: bold;
    border: 3px solid rgb(33, 166, 220);
    border-radius: 20px;
    background: white;
    margin-top: 20px;
    margin-left: -10px;
    margin-bottom: 40px;

}
.invia:hover{
    background-color: rgb(0, 255, 255);
    border: 3px solid rgb(255, 255, 255);
}
.arrow2 {
    width: 30px;
    margin-top: -5px;
}
.popup {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.popup-content {
  background: white;
  padding: 20px 30px;
  border-radius: 10px;
  text-align: center;
  font-size: 16px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.popup-content button {
  margin-top: 10px;
  padding: 8px 16px;
  background: #0073e6;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.hidden {
  display: none;
}





/* footer */


.footer {
    display: grid; /* ➜ necessario */
    justify-items: center; /* ➜ centra orizzontalmente gli elementi figli */
    align-items: center; /* ➜ opzionale: centra anche verticalmente */
}

.paragrafoDiritti {
    font-family: Barlow;
    font-size: 16px;
    color: white;
    text-align: center;
    margin-top: 10px;
}
.links{
    display: flex;
    flex-wrap: wrap;
    justify-self: center;
}
.links a {
    color: white;
}
.links p{
    color: white;
}







/* media query */


@media screen and (max-width: 2100px) {
    .bg-video {
        width: 100vw;
        height: 100vh;
    }

    .immagine-help {
        width: 25%;
    }
    .titolo-hero{
        padding-top: 150px;
    }
    .texts-progetto{
        margin-left: -500px;
    }
    .immagine-help{
        width: 100%;
    }
}
@media screen and (max-width: 1800px){
    .titolo-hero {
        padding-top: 100px;
    }
    .texts-progetto {
        margin-left: -400px;
    }
}
@media screen and (max-width: 1700px){
    .titolo-hero {
        padding-top: 0px;
    }
    .texts-progetto {
        padding-left: 150px;
    }
}
@media screen and (max-width: 1500px){
    .texts-progetto {
        padding-left: 250px;
    }
    .landing-page {
        grid-template-rows: 100vh 725px 900px 450px 300px 1150px 150px;
    }
}
@media screen and (max-width: 1400px) {

    .landing-page {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 100vh 700px 300px 850px 500px 400px 1150px 120px;
        grid-template-areas:
            "hero hero hero"
            "progetto-innovativo progetto-innovativo texts-progetto"
            "titolo-attivazione titolo-attivazione titolo-attivazione"
            "cards3 cards3 cards3"
            "dietro-adcademy dietro-adcademy wakiwi"
            "icone icone icone"
            "contact contact contact"
            "footer footer footer";
    }

    .texts-progetto {
        padding-left: 350px;
    }

    .immagine-attivazione {
        display: none;
    }

    .titolo-attivazione {
        padding-top: 50px;
    }

    .icons {
        grid-template-columns: repeat(2, 300px);
        margin-left: 250px;
        margin-right: 250px;
    }
}
@media screen and (max-width: 1350px){
    .landing-page {
        grid-template-rows: 100vh 700px 100px 850px 500px 400px 1150px 120px;
    }
    .innovativo{
        width: 70%;
    }
    .texts-progetto {
        padding-left: 250px;
        padding-top: 100px;
    }
    .iconWakiwi{
        width: 80%;
        margin-right: 0px;
    }
    .wakiwi {
        padding-right: 150px;
    }
}

@media screen and (max-width: 1350px){
    .landing-page {
        grid-template-rows: 100vh 700px 300px 850px 500px 400px 1150px 120px;
    }
    .titolo-hero h1 {
        padding-top: 150px;
    }
    .c-formazione {
        grid-template-columns: repeat(3, 300px);
    }
}

@media screen and (max-width: 1000px){
    .landing-page {
        grid-template-rows: 100vh 500px 300px 700px 500px 400px 1150px 120px;
    }

    .titolo-hero h1 {
        font-size: 100px;
    }

    .sottotitolo {
        margin-right: 26px;
    }
    .paragrafo-hero {
        font-size: 16px;
    }

    .contattaci {
        top: 80vh;
    }
    .texts-progetto p {
        font-size: 16px;
    }
    .formazione-help p {
        font-size: 16px;
    }
    .card-body3 p {
        font-size: 16px;
    }
    .paragrafo-vantaggi{
        font-size: 16px;
        height: 300px;
    }
    .iconWakiwi {
        width: 90%;
        margin-right: 0px;
        padding-top: 20px;
    }
    .text-wakiwi{
        margin-top: -80px;
    }
    .dietro-adcademy p {
        font-size: 16px;
    }
    .paragrafo5 {
        font-size: 16px;
    }
    .icons {
        margin-left: 100px;
        margin-right: 100px;
    }
}
@media screen and (max-width: 900px){
    .landing-page {
        grid-template-rows: 100vh 500px 300px 700px 600px 400px 1150px 120px;
    }
    .c-formazione {
        grid-template-columns: repeat(3, 250px);
    }
    .text-wakiwi {
        margin-top: -140px;
    }
}

@media screen and (max-width: 850px) {
    .landing-page {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 100vh 650px 450px 1000px 1400px 500px 400px 400px 1400px 150px;
        grid-template-areas:
            "hero"
            "progetto-innovativo"
            "texts-progetto"
            "titolo-attivazione"
            "cards3"
            "dietro-adcademy"
            "wakiwi"
            "icone"
            "contact"
            "footer";
    }

    .titolo-attivazione {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 700px 100px;
        grid-template-areas: "immagine-attivazione" "attivazione-title";
    }
    .immagine-attivazione {
        display:contents;
    }
    

    .titolo-hero h1 {
        font-size: 60px;
    }

    .sottotitolo {
        font-size: 16px;
    }

    .innovativo {
        width: 80%;
    }

    .texts-progetto {
        margin-left: 0px;
        padding-left: 100px;
    }

    .immagine-help {
        width: 80%;
    }

    .formazione-help {
        padding-right: 100px;
        padding-left: 100px;
    }

    .c-formazione {
        grid-template-columns: repeat(1, 400px);
        padding-top: 70px;
    }

    .card1 {
        margin-left: -75px;
    }

    .card1-dark {
        margin-right: -150px;
    }

    .cards3 {
        display: grid;
        grid-template-columns: 1fr;
    }

    .card3 {
        padding-top: 50px;
    }
    .titolo-attivazione h2 {
        padding-left: 100px;
    }

    .titolo-attivazione h1 {
        padding-left: 100px;
    }

    .dietro-adcademy h1 {
        padding-left: 100px;
        padding-right: 100px;
    }

    .dietro-adcademy p {
        padding-left: 100px;
        padding-right: 100px;
    }

    .wakiwi {
        padding-right: unset;
    }

    .iconWakiwi {
        width: 40%;
    }

    .text-wakiwi {
        margin-top: 0px;
    }

    .input-area {
        display: grid;
        grid-template-areas:
            "nome"
            "cognome"
            "telefono"
            "email"
            "azienda"
            "messaggio"
            "check-privacy"
            "invia";
        padding-top: 50px;
    }

    .form {
        width: 400px;
        height: 1050px;
    }

    .nome {
        margin-left: 0px;
    }

    .cognome {
        margin-right: 0px;
    }

    .telefono {
        margin-left: 0px;
    }

    .email {
        margin-right: 0px;
    }

    .input-azienda {
        width: 300px;
    }

    .form-text-area {
        width: 300px;
        height: 100px;
    }

    .trattamento-dati {
        width: 250px;
    }

    .invia {
        margin-left: 0px;
    }

    .icons {
        margin-left: 50px;
        margin-right: 50px;
    }
    
}
@media screen and (max-width: 700px) {

    /*grid-template-rows: 100vh 650px 450px 1000px 1400px 500px 400px 400px 1400px 150px;*/
    .landing-page {
        grid-template-rows: 100vh 520px 450px 1000px 1500px 500px 400px 400px 1400px 150px;
    }
    .icone-frame h1 {
        font-size: 20px;
    }
    .icone-frame{
        padding: 0px;
        margin: 0px;
    }
    .icone-frame h1 {
        font-size: 20px;
    }
    .icons {
        margin-left: 0px;
        margin-right: 0px;
        padding-right: 50px;
        padding-left: 50px;
        width: 400px;
        justify-self: center;
    }
    .icone-right{
        margin-right: 100px;
    }
    .icone-left{
        margin-left: 100px;
    }
}





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

    /*grid-template-rows: 100vh 650px 450px 1000px 1400px 500px 400px 400px 1400px 150px;*/
    .landing-page {
        grid-template-rows: 100vh 520px 450px 800px 1400px 400px 300px 400px 1400px 300px;
    }

    .body{
        overflow-x: hidden;
    }

    .hero {
        background-size: 60% auto;
        background-position: left -10px bottom;
    }
    .titolo-attivazione {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 600px 100px;
        grid-template-areas: "immagine-attivazione" "attivazione-title";
    }

    .stretta-mani {
        width: 80%;
    }

    .texts-progetto {
        padding-right: 50px;
        padding-left: 50px;
        padding-top: 50px;
    }

    .formazione-help {
        padding-right: 50px;
        padding-left: 50px;
    }

    .titolo-attivazione h2 {
        padding-left: 50px;
        padding-right: 50px;
    }

    .titolo-attivazione h1 {
        padding-left: 50px;
        padding-right: 50px;
    }

    .dietro-adcademy h1 {
        padding-left: 50px;
        padding-right: 50px;
    }

    .dietro-adcademy p {
        padding-left: 50px;
        padding-right: 50px;
    }

    .iconWakiwi {
        padding-top: 0px;
    }

    .links {
        display: flex;
        flex-wrap: wrap;
        justify-self: center;
        flex-direction: column;
        text-align: center;
    }
    .paragrafo5 {
        width: auto;
        padding-right: 50px;
        padding-left: 50px;
    }
    .trattamento-dati{
        padding-left: 30px;
    }
}
@media screen and (max-width: 500px){

    .landing-page {
        grid-template-rows: 100vh 400px 450px 700px 1400px 525px 300px 400px 1450px 300px;
    }
    .titolo-hero h1 {
        font-size: 50px;
    }
    .titolo-attivazione {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 500px 100px;
        grid-template-areas: "immagine-attivazione" "attivazione-title";
    }
    .sottotitolo {
        font-size: 20px;
        font-weight: 750;
        text-align: center;
        margin-top: 0px;
        margin-right: 0px;
        padding-right: 100px;
        padding-left: 100px;
    }
    .paragrafo-hero {
        font-size: 16px;
        padding-top: 20px;
        padding-right: 100px;
        padding-left: 100px;
    }
}
@media screen and (max-width: 450px){
    .landing-page {
        grid-template-rows: 100vh 400px 450px 700px 1400px 525px 400px 400px 1450px 300px;
    }
    .hero {
        background-size: 80% auto;
        background-position: left 30px bottom;
    }
    .sottotitolo {
        padding-right: 50px;
        padding-left: 50px;
    }
    .paragrafo-hero {
        padding-right: 50px;
        padding-left: 50px;
    }
    .texts-progetto{
        padding-top: 0px;
    }
    .texts-progetto h1 {
        font-size: 30px;
        line-height: 30px;
    }
    .texts-progetto h2 {
        font-size: 20px;
    }
    .texts-progetto p{
        padding-top: 30px;
    }
    .formazione-help h1 {
        font-size: 30px;
    }
    .titolo-attivazione h2 {
        font-size: 20px;
    }
    .titolo-attivazione h1 {
        font-size: 30px;
        line-height: 30px;
    }
    .dietro-adcademy h1 {
        font-size: 30px;
        line-height: 30px;
    }
    .dietro-adcademy p{
        padding-top: 30px;
    }
    .paragrafoDiritti{
        padding-right: 50px;
        padding-left: 50px;
    }
    .iconWakiwi{
        width: 70%;
    }
    .text-wakiwi{
        padding-left: 50px;
        padding-right: 50px;
    }
}

@media screen and (max-width: 400px) {
    .landing-page {
        grid-template-rows: 100vh 350px 400px 500px 1550px 525px 300px 400px 1450px 300px;
    }
    .card1 {
        margin-left: 0px;
    }
    .card1-dark {
        margin-right: 0px;
    }
    .card3 {
        width: 300px;
    }
    .paragrafo-vantaggi{
        height: 350px;
    }
    .card-title3 {
        margin-left: 50px;
    }
    .texts-progetto h1 {
        font-size: 22px;
    }
    .texts-progetto h2 {
        font-size: 18px;
    }
    .formazione-help h1 {
        font-size: 22px;
    }
    .titolo-attivazione {
        grid-template-rows: 400px 100px;
    }
    .titolo-attivazione{
        padding-top: 0px;
    }
    .titolo-attivazione h2 {
        font-size: 18px;
        padding-top: 0px;
    }
    .titolo-attivazione h1 {
        font-size: 22px;
    }
    .dietro-adcademy h1 {
        font-size: 22px;
    }
    .titolo5{
        font-size: 22px;
    }
    .wakiwi{
        padding-top: 0px;
        grid-template-rows: 175px 1fr;
    }
    .text-wakiwi{
        font-size: 18px;
    }
    .icons {
        width: 300px;
        padding-right: 0px;
        padding-left: 0px
    }
    .icone-left {
        margin-left: 150px;
    }
    .icone-right {
        margin-right: 150px;
    }
    .form {
        width: 300px;
        height: 1050px;
    }
    .form-input {
        width: 250px;
    }
    .input-azienda {
        width: 250px;
    }
    .form-text-area {
        width: 250px;
    }
    .trattamento-dati {
        width: 200px;
    }
    .invia{
        width: 250px;
    }
    
    .bg-video {
        width: 100%;
        height: 100vh;
    }
    .body {
        overflow-x: hidden;
    }
}
@media screen and (max-width: 390px){
    .landing-page {
        grid-template-rows: 100vh 350px 400px 500px 1550px 600px 300px 400px 1450px 350px;
    }
}
@media screen and (max-width: 350px) {
    .landing-page {
        grid-template-rows: 100vh 350px 500px 500px 1550px 675px 300px 400px 1450px 350px;
    }
}