:root {

    --blu: #0069AA;
    --azzurro: #8AABCD;
    --grigio: #D0D8DF;

    --bianco: #FFFFFF;

    --font: "Montserrat", Arial, Helvetica, sans-serif;

}
html {

    scroll-behavior: smooth;

}
section {

    scroll-margin-top:130px;

}
/* CONTAINER */

.container{

    width:90%;

    max-width:1200px;

    margin:0 auto;

}

/* RESET BASE */

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


body {

    font-family: var(--font);

}


/* HEADER */

header {

    height: 130px;

    background-color: var(--blu);

    position: fixed;

    top: 0;

    width: 100%;

    z-index: 1000;

}
.header-container{

    height:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

/* LOGO HEADER */

.logo img {

    height: 80px;

    width: auto;

}



/* MENU */

nav {

    display: flex;

    gap: 45px;

}


nav a {

    color: var(--bianco);

    text-decoration: none;

    font-size: 28px;

    font-weight: 800;

}



nav a:hover {

    opacity: 0.75;

}



/* HERO */

.hero {

    min-height: 650px;

    background-color: var(--azzurro);

    padding-top: 130px;

}

.hero-container {

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:80px;
    
    padding-top:80px;

}

.hero-logo img {

    width: 420px;

    max-width: 100%;

}



.hero-text {

    max-width: 700px;

}


.hero-text h1 {

    color: var(--bianco);

    font-size: 55px;

    line-height: 1.15;

    font-weight: 800;

}
/* CHI SIAMO */


.chi-siamo {

    background-color: var(--grigio);

    padding: 100px 0;

}


.chi-siamo-container {

    display:flex;

    align-items:center;

    gap:80px;

}



.chi-siamo-img {

    flex:1;

}


.chi-siamo-img img {

    width:100%;

    max-width:500px;

    aspect-ratio:1 / 1;

    object-fit:cover;

}



.chi-siamo-testo {

    flex:1;

}



.chi-siamo-testo h2 {

    color:var(--bianco);

    font-size:64px;

    font-weight:800;

    margin-bottom:40px;

}



.chi-siamo-testo p {

    color:var(--blu);

    font-size:24px;

    line-height:1.6;

    font-weight:500;

    margin-bottom:25px;

}





/* SERVIZI */


.servizi {

    background-color:var(--azzurro);

    padding:100px 0;

}



.servizi h2 {

    color:var(--blu);

    font-size:64px;

    font-weight:800;

    margin-bottom:40px;

}



.servizi ul {

    list-style:none;

}



.servizi li {

    color:var(--bianco);

    font-size:48px;

    font-weight:800;

    margin-bottom:25px;

}





/* CONTATTI */


.contatti {

    background-color:var(--grigio);

    padding:100px 0;

}



.contatti-container {

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:80px;

}



.contatti h2 {

    color:var(--bianco);

    font-size:64px;

    font-weight:800;

    margin-bottom:40px;

}



.contatti p {

    color:var(--blu);

    font-size:24px;

    font-weight:500;

    line-height:1.6;

}



.mappa {

    flex:1;

    height:300px;

    display:flex;

    justify-content:center;

    align-items:center;

}



.mappa a {

    background-color:var(--blu);

    color:var(--bianco);

    text-decoration:none;

    padding:25px 40px;

    font-size:22px;

    font-weight:800;

}

/* FOOTER */

footer {

    background-color: var(--blu);

    padding: 60px 0;

}


.footer-container {

    display: flex;

    justify-content: space-between;

    align-items: center;

}


.footer-logo img {

    width: 280px;

}


.footer-info {

    color: var(--bianco);

    text-align: right;

}


.footer-info p {

    color: var(--bianco);

    font-size: 24px;

    font-weight: 500;

    line-height: 1.5;

}


.footer-info .azienda {

    font-size: 18px;

    margin-top:20px;

}


/* MOBILE */

@media (max-width: 900px) {


    /* HEADER */

    header {

        height: 90px;

        padding: 0 20px;

    }


    .header-container {

        width: 100%;

    }


    .logo img {

        height: 55px;

    }


    nav {

        gap: 15px;

    }


    nav a {

        font-size: 12px;

    }



    /* HERO */

    .hero {

        padding-top: 120px;

    }


    .hero-container {

        flex-direction: column;

        text-align: center;

        gap: 40px;

    }


    .hero-logo img {

        width: 260px;

    }


    .hero-text h1 {

        font-size: 32px;

    }



    /* CHI SIAMO */

    .chi-siamo-container {

        flex-direction: column;

        padding: 60px 25px;

        gap: 40px;

    }



    .chi-siamo-testo h2,
    .servizi h2 {

        font-size: 42px;

    }


    .chi-siamo-testo p {

        font-size: 18px;

    }



    /* SERVIZI */

    .servizi {

        padding: 60px 25px;

    }


    .servizi li {

        font-size: 30px;

    }



    /* CONTATTI */

    .contatti-container {

        flex-direction: column;

        padding: 60px 25px;

        text-align: center;

    }


    .contatti h2 {

        font-size: 42px;

    }


    .contatti p {

        font-size: 18px;

    }



    /* FOOTER */

    .footer-container {

        flex-direction: column;

        gap: 40px;

    }


    .footer-info {

        text-align: center;

    }


    .footer-info p {

        font-size: 18px;

    }


}