*{

margin:0;

padding:0;

box-sizing:border-box;

}



body{

font-family:"Georgia", serif;

background:#f8f4ec;

color:#333;

line-height:1.6;

}


/* HERO */

.hero{

height:75vh;

background-image:url("immagini/mare.jpg");

background-size:cover;

background-position:center;

display:flex;

align-items:center;

justify-content:center;

position:relative;

}



.overlay{

background:rgba(0,0,0,.35);

padding:60px;

border-radius:20px;

text-align:center;

color:white;

}



.overlay h1{

font-size:65px;

margin-bottom:20px;

}



.overlay p{

font-size:26px;

margin-bottom:40px;

}



.pulsante{

background:#b8863b;

color:white;

padding:18px 40px;

text-decoration:none;

border-radius:15px;

font-size:22px;

}



/* VILLINI */

.villini{

display:flex;

justify-content:center;

gap:60px;

padding:90px;

}



.card{

width:450px;

background:white;

border-radius:20px;

overflow:hidden;

text-decoration:none;

color:#333;

box-shadow:0 10px 25px rgba(0,0,0,.2);

transition:.3s;

}



.card:hover{

transform:translateY(-10px);

}



.card img{

width:100%;

height:300px;

object-fit:cover;

}



.card h2{

text-align:center;

margin:25px;

font-size:40px;

}



.card p{

text-align:center;

margin-bottom:30px;

font-size:22px;

}



/* PREVENTIVO */

.preventivo{

text-align:center;

padding:90px;

}



.preventivo h2{

font-size:45px;

margin-bottom:40px;

}



.preventivo button{

padding:20px 50px;

font-size:24px;

border:none;

border-radius:15px;

background:#b8863b;

color:white;

cursor:pointer;

}



/* FOOTER */

footer{

background:#232323;

color:white;

text-align:center;

padding:60px;

}



footer h2{

margin-bottom:25px;

}


/* PAGINA VILLINO */

.hero-villino-e{

height:70vh;

background-image:url("immagini/villino-e.jpg");

background-size:cover;

background-position:center;

display:flex;

justify-content:center;

align-items:center;

}



.descrizione{

padding:60px;

max-width:1000px;

margin:70px auto;

text-align:center;

background:white;

border-radius:25px;

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

}


.descrizione h2{

font-size:45px;

margin-bottom:30px;

}



.descrizione p{

font-size:22px;

line-height:1.8;

}



.servizi{

padding:80px;

background:white;

}



.servizi h2{

text-align:center;

margin-bottom:50px;

font-size:45px;

}



.icone{

display:flex;

justify-content:center;

gap:60px;

flex-wrap:wrap;

font-size:22px;

text-align:center;

}


.caratteristiche{

padding:60px;

margin:70px auto;

max-width:1100px;

background:white;

border-radius:25px;

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

}


.caratteristiche h2{

text-align:center;

font-size:45px;

margin-bottom:50px;

}



.caratteristiche-box{

display:flex;

justify-content:center;

gap:40px;

flex-wrap:wrap;

}



.caratteristiche-box div{

background:white;

padding:30px;

border-radius:20px;

width:220px;

text-align:center;

box-shadow:0 10px 20px rgba(0,0,0,.15);

}



.esterni{

padding:80px;

text-align:center;

}



.esterni img{

width:90%;

max-width:1000px;

border-radius:25px;

}


/* GALLERIA DELLE STANZE */

.galleria-casa{

padding:80px;

}

.galleria-casa h2{

text-align:center;

font-size:42px;

margin:70px 0 40px;

}



.galleria{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:40px;

}



.stanza{

width:340px;

background:#fff;

border-radius:25px;

overflow:hidden;

box-shadow:0 15px 35px rgba(0,0,0,.15);

transition:.4s;

cursor:pointer;

}


.stanza:hover{

transform:translateY(-8px);

}


.stanza img{

width:100%;

height:260px;

object-fit:cover;

display:block;

transition:.5s;

}


.stanza h3{

padding:20px;

text-align:center;

font-size:28px;

font-weight:normal;

}

.hero-villino-s{

height:70vh;

background-image:url("immagini/villino-s.jpg");

background-size:cover;

background-position:center;

display:flex;

justify-content:center;

align-items:center;

}



h1,
h2{

font-family:"Georgia", serif;

font-weight:normal;

letter-spacing:2px;

}


h2{

position:relative;

}


h2::after{

content:"";

display:block;

width:80px;

height:3px;

background:#b8863b;

margin:20px auto;

}


.stanza:hover img{

transform:scale(1.08);

}


.servizi{

background:#efe7d8;

padding:80px;

}



.altre-foto{

    text-align:center;

    margin-top:70px;

}

.pulsante-galleria{

    display:inline-block;

    background:#b8863b;

    color:white;

    text-decoration:none;

    padding:18px 40px;

    border-radius:15px;

    font-size:22px;

    transition:.3s;

}

.pulsante-galleria:hover{

    background:#9a6f2f;

    transform:translateY(-3px);

}




/* ========================= */
/* PREVENTIVATORE */
/* ========================= */

.hero-preventivo{

height:50vh;

background-image:url("immagini/mare.jpg");

background-size:cover;

background-position:center;

display:flex;

justify-content:center;

align-items:center;

}


.preventivo-box{

max-width:750px;

margin:80px auto;

background:white;

padding:50px;

border-radius:25px;

box-shadow:0 15px 35px rgba(0,0,0,.15);

}


.preventivo-box h2{

text-align:center;

font-size:42px;

margin-bottom:40px;

}


.preventivo-box label{

display:block;

margin-top:25px;

margin-bottom:8px;

font-size:22px;

}


.preventivo-box input,

.preventivo-box select{

width:100%;

padding:15px;

font-size:20px;

border:1px solid #ccc;

border-radius:12px;

font-family:Georgia, serif;

}


.preventivo-box button{

margin-top:40px;

width:100%;

padding:18px;

background:#b8863b;

color:white;

border:none;

border-radius:15px;

font-size:24px;

cursor:pointer;

transition:.3s;

}


.preventivo-box button:hover{

background:#a3742d;

transform:translateY(-3px);

}


#risultato{

margin-top:50px;

padding:30px;

background:#f8f4ec;

border-radius:20px;

font-size:22px;

line-height:1.8;

display:none;

}


.nota{

margin-top:30px;

text-align:center;

font-size:18px;

color:#666;

font-style:italic;

}


/* ========================= */
/* PLANIMETRIA */
/* ========================= */

.planimetria{

padding:80px;

text-align:center;

}

.planimetria h2{

font-size:42px;

margin-bottom:40px;

}

.planimetria img{

width:95%;

max-width:1400px;

border-radius:20px;

box-shadow:0 15px 35px rgba(0,0,0,.18);

transition:.4s;

cursor:pointer;

}

.planimetria img:hover{

transform:scale(1.02);

}



/* ========================= */
/* LINGUE */
/* ========================= */

.hero{

position:relative;

}

.lingue{

position:absolute;

top:30px;

right:40px;

display:flex;

gap:18px;

z-index:100;

}

.lingue a{

font-size:34px;

text-decoration:none;

transition:.3s;

display:inline-block;

}

.lingue a:hover{

transform:translateY(-5px) scale(1.25);

}

.lingue img{

width:38px;

border-radius:5px;

transition:.3s;

cursor:pointer;

}

.lingue img:hover{

transform:translateY(-5px) scale(1.15);

box-shadow:0 8px 15px rgba(0,0,0,.3);

}



/* ========================= */
/* MAPPE */
/* ========================= */

.mappa{

padding:80px 40px;

text-align:center;

}

.mappe{

display:grid;

grid-template-columns:repeat(2, minmax(450px, 1fr));

gap:40px;

max-width:1200px;

margin:50px auto;

}

.mappa-box{

background:white;

padding:20px;

border-radius:20px;

box-shadow:0 10px 25px rgba(0,0,0,.15);

width:100%;

}

.mappa-box iframe{

width:100%;

height:400px;

border:none;

border-radius:15px;

}


/* ===================================== */
/* NUOVA HERO */
/* ===================================== */

.overlay-home{

position:relative;

z-index:2;

width:100%;

max-width:1300px;

margin:auto;

display:grid;

grid-template-columns:2fr 1fr;

gap:120px;

align-items:center;

padding:0 80px;

}

.hero-sinistra{

max-width:800px;

}

.hero-destra{

max-width:420px;

justify-self:end;

}

.hero-sinistra h1{

font-size:47px;

line-height:1.05;

margin-bottom:30px;

}

.hero-sinistra p{

font-size:26px;

max-width:700px;

line-height:1.7;

}

.hero-destra{

max-width:430px;

margin-top:50px;

}

.hero-destra p{

font-size:22px;

line-height:1.8;

text-align:left;

}

.hero{

position:relative;

}

.hero::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.40);

}

.overlay-home{

position:relative;

z-index:2;

width:100%;

max-width:1400px;

margin:auto;

display:grid;

grid-template-columns:2fr 1fr;

align-items:center;

gap:80px;

padding:0 50px;

color:white;

}

/* ===================================== */
/* PUNTI DI FORZA */
/* ===================================== */

.punti-forza{

display:flex;

align-items:center;

justify-content:center;

gap:70px;

max-width:1300px;

margin:90px auto;

padding:0 40px;

}

.punti-img{

flex:1;

}

.punti-img img{

width:100%;

border-radius:25px;

box-shadow:0 15px 35px rgba(0,0,0,.18);

display:block;

}

.punti-testo{

flex:1;

}

.punti-testo h2{

font-size:42px;

margin-bottom:30px;

text-align:left;

}

.punti-testo ul{

list-style:none;

padding:0;

}

.punti-testo li{

font-size:22px;

line-height:2;

margin-bottom:12px;


}


.torna-home{

position:absolute;

top:30px;

left:40px;

padding:12px 22px;

background:rgba(255,255,255,.9);

color:#2d5a27;

text-decoration:none;

font-weight:600;

border-radius:12px;

transition:.3s;

}

.torna-home:hover{

background:white;

transform:translateY(-2px);

}


/* ===================================== */
/* VERSIONE TELEFONO */
/* ===================================== */

@media (max-width:768px){

/* HERO */

.overlay{

padding:30px 20px;

width:90%;

}

.overlay h1{

font-size:40px;

}

.overlay p{

font-size:20px;

}

.pulsante{

display:inline-block;

font-size:18px;

padding:15px 30px;

}


/* BANDIERINE */

.lingue{

top:20px;

right:20px;

gap:10px;

}

.lingue img{

width:30px;

}


/* VILLINI */

.villini{

flex-direction:column;

align-items:center;

padding:40px 20px;

gap:40px;

}

.card{

width:100%;

max-width:420px;

}

.card h2{

font-size:32px;

}

.card p{

font-size:20px;

}


/* DESCRIZIONE */

.descrizione{

margin:40px 20px;

padding:30px;

}

.descrizione h2{

font-size:34px;

}

.descrizione p{

font-size:18px;

}


/* SERVIZI */

.servizi{

padding:50px 20px;

}

.servizi h2{

font-size:34px;

}

.icone{

gap:25px;

font-size:18px;

}


/* CARATTERISTICHE */

.caratteristiche{

margin:40px 20px;

padding:30px;

}

.caratteristiche h2{

font-size:34px;

}

.caratteristiche-box{

flex-direction:column;

align-items:center;

gap:25px;

}

.caratteristiche-box div{

width:100%;

max-width:320px;

}


/* PLANIMETRIA */

.planimetria{

padding:40px 15px;

}

.planimetria img{

width:100%;

}


/* GALLERIA */

.galleria-casa{

padding:40px 15px;

}

.galleria-casa h2{

font-size:32px;

}

.galleria{

flex-direction:column;

align-items:center;

gap:30px;

}

.stanza{

width:100%;

max-width:420px;

}


/* PREVENTIVATORE */

.preventivo-box{

width:95%;

padding:30px 20px;

margin:40px auto;

}

.preventivo-box h2{

font-size:34px;

}

.preventivo-box label{

font-size:18px;

}

.preventivo-box input,

.preventivo-box select{

font-size:18px;

}

.preventivo-box button{

font-size:20px;

}


/* FOOTER */

footer{

padding:40px 20px;

}

footer h2{

font-size:30px;

}

footer p{

font-size:18px;

}


/* MAPPE */

.mappa{

padding:50px 20px;

}

.mappa h2{

font-size:34px;

}

.mappe{

grid-template-columns:1fr;

}

.mappa-box{

max-width:420px;

margin:0 auto;

}

.mappa-box h3{

font-size:24px;

}

.mappa-box iframe{

height:300px;

}


/* HERO */

.overlay-home{

flex-direction:column;

text-align:center;

padding:30px;

gap:40px;

}

.hero-sinistra h1{

font-size:42px;

}

.hero-sinistra p{

font-size:19px;

}

.hero-destra p{

font-size:18px;

}

.punti-forza{

flex-direction:column;

padding:20px;

gap:35px;

}

.punti-testo{

text-align:left;

}

.punti-testo h2{

text-align:center;

font-size:34px;

}

.punti-testo li{

font-size:18px;

line-height:1.8;

}

}