/* RESET MOBILE */

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

html {
    width: 100%;
    overflow-x: hidden;
}

body {
    font-family: 'Poppins', sans-serif;
    width: 100%;
}


/* NAVBAR */

nav {
    width: 100%;
    height: 90px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
    background: white;
}


.logo {
    display: flex;
    align-items: center;
    gap: 12px;
}


.logo img {
    width: 55px;
    height: auto;
}


.logo h2 {
    font-size: 25px;
    color: #b8945f;
}


nav ul {
    display: flex;
    list-style: none;
    gap: 35px;
}


nav a {
    text-decoration: none;
    color: #222;
    font-size: 16px;
}



/* HERO */

.hero {

    width: 100%;
    min-height: calc(100vh - 90px);

    background-image:
    linear-gradient(
    rgba(0,0,0,0.55),
    rgba(0,0,0,0.55)
    ),
    url("../img/background.jpg");

    background-size: cover;
    background-position: center;

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

    text-align: center;

}


.overlay {

    width: 90%;
    max-width: 900px;
    color:white;

}


.overlay h1 {

    font-size: clamp(35px,5vw,70px);
    font-weight:700;
    margin-bottom:20px;

}


.overlay p {

    font-size: clamp(16px,2vw,25px);
    margin-bottom:35px;

}



.btn {

    display:inline-block;

    background:#d8bd91;

    color:white;

    padding:15px 40px;

    border-radius:40px;

    text-decoration:none;

    font-weight:700;

    font-size:15px;

}



/* SERVIZI */


.servizi {

    padding:70px 5%;
    text-align:center;

}


.servizi h2 {

    font-size:40px;
    margin-bottom:40px;

}


.cards {

    display:flex;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;

}


.card {

    width:300px;

    padding:35px;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.1);

}



/* FOOTER */


footer {

    text-align:center;

    padding:25px;

}





/* ==========================
   TELEFONI
========================== */


@media(max-width:768px){


nav {

    height:80px;

    padding:0 20px;

}


.logo img {

    width:45px;

}


.logo h2 {

    font-size:20px;

}



nav ul {

    gap:15px;

}


nav a {

    font-size:13px;

}



.hero {

    min-height: calc(100vh - 80px);

    background-position:center;

}



.overlay {

    width:92%;

}


.overlay h1 {

    font-size:38px;

}


.overlay p {

    font-size:17px;

}



.btn {

    padding:14px 30px;

}




.servizi h2 {

    font-size:30px;

}


.card {

    width:100%;

}



}



/* ==========================
   IPHONE PICCOLI (SE 2020 ecc.)
========================== */


@media(max-width:390px){


.logo h2 {

    font-size:17px;

}


nav ul {

    gap:10px;

}


nav a {

    font-size:12px;

}


.overlay h1 {

    font-size:32px;

}


.overlay p {

    font-size:15px;

}


.btn {

    font-size:13px;

}


}



/* ==========================
   TABLET
========================== */


@media(min-width:769px) and (max-width:1100px){


.hero h1 {

    font-size:55px;

}


.cards {

    gap:20px;

}


.card {

    width:280px;

}


}
.hero {

    width:100%;
    min-height:calc(100vh - 90px);

    background-image:
    linear-gradient(
        rgba(0,0,0,0.55),
        rgba(0,0,0,0.55)
    ),
    url("../img/back.png");

    background-size:cover;
    background-position:center;

    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;

}