/* =========================
   CONTACT
========================= */

#contact{

    background:#f3efe8;

    text-align:center;

    padding:72px 0;

}


.contact-wrapper{

    background:#fff;

    border-radius:20px;

    padding:56px;

    box-shadow:0 20px 50px rgba(0,0,0,.08);

}


.section-subtitle{

    display:inline-block;

    color:var(--color-accent);

    letter-spacing:4px;

    font-size:var(--label-size);

    margin-bottom:20px;

}


.contact-wrapper h2{

    font-size:var(--section-title-size);

    margin-bottom:25px;

}


.contact-description{

    font-size:18px;

    color:#666;

    line-height:1.9;

    margin-bottom:36px;

}


.contact-info{

    display:flex;

    justify-content:center;

    gap:80px;

    margin-bottom:36px;

}


.contact-item h3{

    color:#8b6b3e;

    font-size:20px;

    margin-bottom:10px;

}


.contact-item p{

    color:#555;

}


.contact-line{

    width:90px;

    height:2px;

    background:#8b6b3e;

    margin:20px auto 28px;

}

/* ==========================================
   PAGINA CONTATTI
   contatti.html
========================================== */


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

.contact-hero{

    position:relative;

    padding:140px 0 90px;

    text-align:center;

    background:#f7f4ee;

}


.contact-page-label{

    display:inline-block;

    color:var(--color-accent);

    font-size:var(--label-size);

    letter-spacing:5px;

    margin-bottom:25px;

}


.contact-hero h1{

    font-family:"Cormorant Garamond", serif;

    font-size:var(--page-title-size);

    font-weight:500;

    line-height:1;

    color:#1b1b1b;

    margin:0;

}


.contact-hero-line{

    width:70px;

    height:1px;

    background:#8b6b3e;

    margin:32px auto;

}


.contact-hero p{

    max-width:650px;

    margin:auto;

    color:#666;

    font-size:18px;

    line-height:1.9;

}


/* =========================
   AREA PRINCIPALE
========================= */

.contact-main{

    padding:72px 0;

    background:#ffffff;

}


.contact-layout{

    display:grid;

    grid-template-columns:0.9fr 1.1fr;

    gap:110px;

    align-items:start;

}


/* =========================
   PARTE EDITORIALE
========================= */

.contact-editorial{

    padding-top:15px;

}


.contact-small-label{

    display:block;

    color:#8b6b3e;

    font-size:11px;

    letter-spacing:4px;

    margin-bottom:25px;

}


.contact-editorial h2{

    font-family:"Cormorant Garamond", serif;

    font-size:var(--section-title-size);

    font-weight:500;

    line-height:1.05;

    color:#1c1c1c;

    margin-bottom:35px;

}


.contact-editorial > p{

    max-width:480px;

    color:#5f5f5f;

    font-size:17px;

    line-height:1.95;

    margin-bottom:20px;

}


/* =========================
   CITAZIONE
========================= */

.contact-quote{

    position:relative;

    margin-top:55px;

    padding:30px 0 10px 35px;

    border-left:1px solid #8b6b3e;

}


.contact-quote span{

    position:absolute;

    top:-15px;

    left:-8px;

    font-family:"Cormorant Garamond", serif;

    font-size:55px;

    color:#8b6b3e;

    background:#fff;

    line-height:1;

}


.contact-quote p{

    max-width:380px;

    font-family:"Cormorant Garamond", serif;

    font-size:27px;

    font-style:italic;

    line-height:1.45;

    color:#444;

    margin:0;

}


/* =========================
   FORM
========================= */

.contact-form-box{

    background:#f7f4ee;

    padding:55px 60px 60px;

}


.contact-form-box .contact-small-label{

    margin-bottom:18px;

}


.contact-form-box h2{

    font-family:"Cormorant Garamond", serif;

    font-size:48px;

    font-weight:500;

    color:#1b1b1b;

    margin:0 0 12px;

}


.contact-form-intro{

    color:#777;

    font-size:15px;

    line-height:1.7;

    margin-bottom:40px;

}


/* =========================
   CAMPI
========================= */

.contact-field{

    margin-bottom:30px;

}


.contact-field label{

    display:block;

    font-size:11px;

    letter-spacing:2px;

    text-transform:uppercase;

    color:#555;

    margin-bottom:10px;

}


.contact-field input,
.contact-field textarea{

    width:100%;
    
    box-sizing:border-box;
    
    border:none;
    
    border-bottom:1px solid #cfc8bd;
    
    border-radius:0;
    
    background:transparent;
    
    padding:12px 0;

    font-family:var(--font-primary);
    
    font-size:16px;
    
    color:#222;
    
    outline:none;

    transition:border-color .3s ease;
}


.contact-field input:focus,
.contact-field textarea:focus{

    border-bottom-color:#8b6b3e;

}


.contact-field input::placeholder,
.contact-field textarea::placeholder{

    color:#aaa;

}


.contact-field textarea{

    min-height:120px;

    resize:vertical;

}


/* =========================
   PULSANTE
========================= */

.contact-submit{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:25px;

    margin-top:40px;

    padding:16px 30px;

    min-width:220px;

    border:1px solid #8b6b3e;

    background:#8b6b3e;

    color:#fff;

    font-family:var(--font-primary);

    font-size:12px;

    letter-spacing:2px;

    cursor:pointer;

    transition:all .3s ease;

}


.contact-submit span{

    font-size:20px;

    line-height:0;

    transition:transform .3s ease;

}


.contact-submit:hover{

    background:#1c1c1c;

    border-color:#1c1c1c;

}


.contact-submit:hover span{

    transform:translateX(5px);

}


/* =========================
   CHIUSURA
========================= */

.contact-closing{

    padding:90px 0 110px;

    text-align:center;

    background:#fff;

}


.contact-closing-line{

    width:55px;

    height:1px;

    background:#8b6b3e;

    margin:0 auto 30px;

}


.contact-closing p{

    font-family:"Cormorant Garamond", serif;

    font-size:28px;

    font-style:italic;

    color:#666;

}


/* =========================
   RESPONSIVE
========================= */

@media(max-width:900px){

    .contact-hero{

        padding:145px 0 90px;

    }


    .contact-hero h1{

        font-size:60px;

    }


    .contact-layout{

        grid-template-columns:1fr;

        gap:70px;

    }


    .contact-editorial h2{

        font-size:48px;

    }

}


@media(max-width:600px){

    .contact-hero{

        padding:125px 20px 75px;

    }


    .contact-hero h1{

        font-size:48px;

    }


    .contact-hero p{

        font-size:16px;

    }


    .contact-main{

        padding:75px 20px;

    }


    .contact-editorial h2{

        font-size:42px;

    }


    .contact-form-box{

        padding:40px 25px 45px;

    }


    .contact-form-box h2{

        font-size:38px;

    }


    .contact-closing{

        padding:65px 20px 80px;

    }


    .contact-closing p{

        font-size:24px;

    }

}