/* =========================================================
   EASY-TO-CHANGE SITE SETTINGS
   ========================================================= */



body {   

    /* Google Form style background */
    background: #FBF3CC;
    color: #222b3c;
}




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


.hero {
    width: 100%;
    background-color: #FBF3CC;
    padding: 68px 20px 0;
}


.hero-banner {
    max-width: 640px;
    margin: 0 auto 12px;
}

.hero-banner img {
    display: block;

    width: 100%;

    height: auto;

    border-radius: 7px;

    object-fit: cover;
}





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

.contact-section {
    width: 100%;

    background: #FBF3CC;

    padding:
        0
        20px
        60px;
}


.form-shell {

    width:
        100%;

    margin:
        0 auto;
}


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

.contact-intro {
    position: relative;

    width: 100%;

    max-width: 640px;

    margin:
        0 auto
        12px;

    padding:
        18px
        24px
        17px;

    background: #ffffff;

    border:
        1px solid
        #dadce0;

    border-top:
        10px solid
        #ECC201;

    border-radius:
        8px;

    font-family:
        "Lato",
        sans-serif;
}


.contact-intro h1 {
    font-family: "Merriweather", serif;
    margin:
        0
        0
        10px;

    font-size: 32px;

    line-height: 1.2;

    font-weight: 700;

    font-style: italic;

    color: #202124;
}



.contact-intro p {
    margin:
        0
        0
        18px;

    font-size: 14px;

    line-height: 1.5;

    font-weight: 400;

    color: #3c4043;
    font-style: italic;
}


/* Required text like Google Forms */

.required-notice {
    padding-top: 14px;

    border-top:
        1px solid
        #dadce0;

    font-size: 14px;

    line-height: 1.4;

    color: #d93025;
}


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

.form-container {

    width:
        100%;

    max-width:
        640px;

    margin:
        0 auto;

    padding:
        18px 24px 30px;

    background:
        #FFFFFF;
    border-radius:
        8px;

border:
        1px solid
        #dadce0;
}


.contact-form .field {

    width:
        100%;

    margin-bottom:
        32px;
}


.contact-form label {

    display:
        block;

    margin-bottom:
        11px;

    font-size:
        20px;

    line-height:
        1.3;

    font-weight:
        700;

    color:
        #363636;
}


.contact-form .required {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        16px;

    height:
        16px;

    color:
        #ff0000;

    font-size:
        11px;

    line-height:
        16px;

    font-weight:
        700;

    vertical-align:
        middle;
}


/* =========================================================
   TEXT INPUTS
   ========================================================= */

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"] {

    display:
        block;

    width:
        100%;

    max-width:
        322px;

    height:
        40px;

    padding:
        8px 12px;

    background:
        #ffffff;

    color:
        #333333;

    border:
        1px solid
        #d1d1d1;

    border-radius:
        9px;

    font-size:
        16px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    outline:
        none;

    box-shadow:
        0 1px 2px
            rgba(
                0,
                0,
                0,
                0.04
            ),
        0 1px 2px
            rgba(
                0,
                0,
                0,
                0.02
            );

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


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

    color:
        #b6b6b6;

    opacity:
        1;
}


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

    border-color:
        #9c9c9c;

    box-shadow:
        0 0 0 2px
        rgba(
            0,
            0,
            0,
            0.035
        );
}


/* =========================================================
   TEXTAREA
   ========================================================= */

.contact-form textarea {

    display:
        block;

    width:
        100%;

    min-height:
        100px;

    padding:
        12px 14px;

    background:
        #ffffff;

    color:
        #333333;

    border:
        1px solid
        #d1d1d1;

    border-radius:
        9px;

    font-size:
        16px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    resize:
        vertical;

    outline:
        none;

    box-shadow:
        0 1px 2px
        rgba(
            0,
            0,
            0,
            0.03
        );

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


/* =========================================================
   WHATSAPP YES / NO
   ========================================================= */

.radio-group {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        10px;

    margin-top:
        8px;
}


.contact-form .radio-option {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        auto;

    min-width:
        48px;

    margin:
        0;

    padding:
        9px 12px;

    background:
        #ffffff;

    color:
        #3f3f3f;

    border:
        1px solid
        #cccccc;

    border-radius:
        9px;

    font-size:
        16px;

    line-height:
        1.1;

    font-weight:
        400;

    cursor:
        pointer;

    box-shadow:
        0 1px 2px
        rgba(
            0,
            0,
            0,
            0.04
        );

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}


.contact-form .radio-option input {

    position:
        absolute;

    opacity:
        0;

    pointer-events:
        none;
}


.contact-form .radio-option:has(
    input:checked
) {

    background:
        #111111;

    color:
        #ffffff;

    border-color:
        #111111;
}


.whatsapp-permission-field {

    margin-bottom:
        38px !important;
}


.question-field {

    margin-top:
        10px;

    margin-bottom:
        20px !important;
}


/* =========================================================
   SUBMIT BUTTON
   ========================================================= */

.contact-submit {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    width:
        auto;

    padding:
        10px 15px;

    background:
        #000000;

    color:
        #ffffff;

    border:
        none;

    border-radius:
        8px;

    font-size:
        15px;

    line-height:
        1;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        opacity 0.2s ease,
        transform 0.1s ease;
}


.contact-submit:hover {
    opacity: 0.88;
}


.contact-submit:active {
    transform:
        translateY(1px);
}


.contact-submit:disabled {

    opacity:
        0.55;

    cursor:
        not-allowed;
}


.submit-arrow {

    font-size:
        20px;

    line-height:
        1;

    font-weight:
        400;
}


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

#formStatus {

    margin-top:
        14px;

    font-size:
        14px;

    line-height:
        1.5;

    color:
        #444444;
}


#formStatus.error {
    color: #b00020;
}


#formStatus.success {
    color: #167443;
}


/* =========================================================
   HONEYPOT
   ========================================================= */

.form-honeypot {

    position:
        absolute !important;

    left:
        -9999px !important;

    width:
        1px !important;

    height:
        1px !important;

    overflow:
        hidden !important;
}




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

@media (
    max-width: 767px
) {

    .hero {
        padding:
            60px
            20px
            0;
    }

    .hero-banner {
        max-width: 640px;
        margin-bottom: 12px;
    }


    

    .contact-intro {

        max-width:
            none;

        padding:
            18px
            20px
            20px;
    }


    .contact-intro h1 {

        font-size:
            24px;

        margin-bottom:
            5px;
    }


    .contact-intro p {

        font-size:
            14px;

        line-height:
            1.5;
    }


    .form-container {

        max-width:
            none;

        padding: 18px 24px 30px;
    }


    .contact-form .field {

        margin-bottom:
            28px;
    }


    .contact-form label {

        font-size:
            18px;
    }


    .contact-form input[type="text"],
    .contact-form input[type="email"],
    .contact-form input[type="tel"] {

        max-width:
            100%;

        height:
            43px;

        font-size:
            16px;
    }


    .contact-form textarea {

        min-height:
            110px;

        font-size:
            16px;
    }


   
}