/* ============================================================

   OSHO PREMMARG

   CONTACT US

   ------------------------------------------------------------

   CSS esclusivo di /ContactUs.aspx

   ============================================================ */





/* ============================================================

   PAGE

   ============================================================ */



.contact-page {

    padding-top: 20px;

    padding-bottom: clamp(70px, 7vw, 125px);

}





/* ============================================================

   HEADER

   ============================================================ */



.contact-header {

    width: 100%;

    max-width: 900px;

    margin-left: auto;

    margin-right: auto;

    text-align: center;

}





.section-label,

.contact-label {

    display: block;

    font-size: 11px;

    letter-spacing: 0.18em;

    text-transform: uppercase;

    color: #7d827b;

}





.contact-header h1 {

    margin: 0 0 22px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(48px, 5vw, 88px);

    font-weight: 400;

    line-height: 1;

    color: #27362e;

}





.contact-header > p,

.contact-header > div > p {

    max-width: 620px;

    margin: 0 auto;

    font-size: clamp(15px, 1vw, 18px);

    line-height: 1.7;

    color: #60655f;

}





/* ============================================================

   MAIN

   ------------------------------------------------------------

   Il modulo occupa una sola colonna,

   centrata orizzontalmente.

   ============================================================ */



.contact-main {

    display: flex;

    justify-content: center;

    width: 100%;

    margin-top: clamp(65px, 7vw, 120px);

}





/* ============================================================

   FORM

   ============================================================ */



.contact-form {

    width: 100%;

    max-width: 760px;

    min-width: 0;

    margin-left: auto;

    margin-right: auto;

}





.form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 30px;

}





.form-field {

    margin-bottom: 30px;

}





    .form-field label {

        display: block;

        margin-bottom: 8px;

        font-size: 11px;

        letter-spacing: .14em;

        text-transform: uppercase;

        color: #6f746e;

    }





    .form-field input,

    .form-field textarea {

        box-sizing: border-box;

        width: 100%;

        padding: 12px 2px;

        border: 0;

        border-bottom: 1px solid rgba(39, 54, 46, .40);

        border-radius: 0;

        outline: none;

        background: transparent;

        color: #27362e;

        font-family: Georgia, "Times New Roman", serif;

        font-size: 17px;

    }





    .form-field textarea {

        min-height: 130px;

        resize: vertical;

    }





        .form-field input:focus,

        .form-field textarea:focus {

            border-bottom-color: #27362e;

        }





/* ============================================================

   BUTTON

   ============================================================ */



.contact-button {

    margin-top: 10px;

    padding: 14px 30px;

    border: 1px solid #27362e;

    background: transparent;

    color: #27362e;

    font-size: 12px;

    letter-spacing: .12em;

    cursor: pointer;

    transition: background .25s ease, color .25s ease;

}





    .contact-button:hover {

        background: #27362e;

        color: #f4f0e8;

    }





.form-result {

    display: block;

    margin-top: 20px;

    color: #27362e;

    font-size: 14px;

    line-height: 1.6;

}





/* ============================================================

   HONEYPOT ANTISPAM

   ============================================================ */



.hp-field {

    position: absolute !important;

    left: -9999px !important;

    width: 1px;

    height: 1px;

    overflow: hidden;

}





/* ============================================================

   MAP SECTION

   ============================================================ */



.map-section {

    margin-top: clamp(85px, 9vw, 150px);

}





.map-heading {

    margin-bottom: clamp(25px, 3vw, 45px);

}





    .map-heading h2 {

        margin: 10px 0 0;

        font-family: Georgia, "Times New Roman", serif;

        font-size: clamp(34px, 3vw, 56px);

        font-weight: 400;

        line-height: 1.08;

        color: #27362e;

    }





/* ============================================================

   MAP ADDRESS

   ============================================================ */



.contact-map-address {

    margin-top: 22px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 17px;

    line-height: 1.65;

    color: #27362e;

}





/* ============================================================

   MAP

   ============================================================ */



.contact-map {

    width: 100%;

    height: clamp(300px, 30vw, 500px);

    overflow: hidden;

    background: #e8e4db;

}





    .contact-map iframe {

        display: block;

        width: 100%;

        height: 100%;

        border: 0;

        filter: none;

    }





/* ============================================================

   TABLET

   ============================================================ */



@media (max-width: 800px) {



    .contact-page {

        padding-top: 20px;

    }





    .contact-main {

        justify-content: center;

    }





    .contact-form {

        max-width: none;

    }





    .form-row {

        grid-template-columns: 1fr;

        gap: 0;

    }

}





/* ============================================================

   PHONE

   ============================================================ */



@media (max-width: 600px) {



    .contact-page {

        padding-top: 20px;

        padding-bottom: 70px;

    }





    .contact-header h1 {

        font-size: clamp(44px, 14vw, 64px);

    }





    .contact-main {

        margin-top: 55px;

    }





    .map-section {

        margin-top: 75px;

    }





    .contact-map {

        height: 300px;

    }

}