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

:root {
    --font-main: "Lato", sans-serif;
    --header-text: #000000;
    --hero-blue: #075b96;
    --footer-bg: #24789d;
    --footer-text: #ffffff;
    --desktop-content-width: 1315px;
}


/* =========================================================
   RESET / GLOBAL
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;
    min-width: 320px;
    font-family: var(--font-main);

    /* Google Form style background */
    background: #FBF3CC;

    color: #222b3c;
}


button,
input,
textarea,
select {
    font: inherit;
}


a {
    color: inherit;
    text-decoration: none;
}


img {
    display: block;
    max-width: 100%;
}


/* =========================================================
   HERO + HEADER
   ========================================================= */


.header {
    background: #ffffff;
}

.header-inner {
    background-color: #ffffff;
}

.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;
}



.site-header {

    position: absolute;

    z-index: 20;

    top: 0;
    left: 0;

    width: 100%;

    color:
        var(--header-text);
}


.header-inner {
    background-color: #FFFFFF;

    height: 56px;

    margin:
        0 auto;

    display: flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    padding:
        0 32px;
}


.brand {

    flex:
        0 0 auto;

    font-size:
        20px;

    line-height:
        1;

    font-weight:
        400;

    white-space:
        nowrap;
}


.desktop-nav {

    display:
        flex;

    align-items:
        center;

    gap:
        25px;

    margin-left:
        auto;
}


.desktop-nav a {

    position:
        relative;

    font-size:
        16px;

    line-height:
        1;

    font-weight:
        400;

    transition:
        opacity 0.2s ease;
}


.desktop-nav a:hover,
.desktop-nav a:focus-visible {
    opacity: 0.75;
}


/* =========================================================
   MOBILE MENU BUTTON
   ========================================================= */

.menu-button {

    display:
        none;

    position:
        relative;

    width:
        24px;

    height:
        20px;

    flex:
        0 0 24px;

    padding:
        0;

    border:
        0;

    color:
        #000000;

    background:
        transparent;

    cursor:
        pointer;
}


.menu-button span,
.menu-button::before,
.menu-button::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    width:
        21px;

    height:
        2px;

    border-radius:
        99px;

    background:
        currentColor;

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


.menu-button::before {
    top: 2px;
}


.menu-button span {
    top: 9px;
}


.menu-button::after {
    top: 16px;
}


.menu-button.is-open::before {

    top:
        9px;

    transform:
        rotate(45deg);
}


.menu-button.is-open span {
    opacity: 0;
}


.menu-button.is-open::after {

    top:
        9px;

    transform:
        rotate(-45deg);
}


/* =========================================================
   MOBILE NAVIGATION
   ========================================================= */

.mobile-menu {

    position:
        absolute;

    z-index:
        19;

    top:
        56px;

    left:
        0;

    width:
        100%;

    padding:
        8px
        20px
        18px;

    display:
        none;

    background:
        rgba(
            3,
            70,
            121,
            0.98
        );

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.16
        );

    box-shadow:
        0 8px 18px
        rgba(
            0,
            0,
            0,
            0.12
        );
}


.mobile-menu.is-open {
    display: block;
}


.mobile-menu a {

    display:
        block;

    padding:
        11px 3px;

    color:
        #ffffff;

    font-size:
        14px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.10
        );
}


.mobile-menu a:last-child {
    border-bottom: 0;
}


/* =========================================================
   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;
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {

    min-height:
        83px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        26px 74px;

    position:
        relative;

    color:
        var(--footer-text);

    background:
        var(--footer-bg);
}


.footer-copy {

    margin:
        0;

    text-align:
        center;

    font-size:
        12px;

    line-height:
        1.5;

    font-weight:
        400;
}


.footer-copy strong {
    font-weight: 700;
}


/* =========================================================
   BACK TO TOP
   ========================================================= */

.back-to-top {

    position:
        absolute;

    right:
        29px;

    top:
        22px;

    width:
        30px;

    height:
        30px;

    border:
        0;

    border-radius:
        0;

    display:
        grid;

    place-items:
        center;

    color:
        #ffffff;

    background:
        #0568dc;

    cursor:
        pointer;

    transition:
        opacity 0.2s ease;
}


.back-to-top:hover,
.back-to-top:focus-visible {
    opacity: 0.82;
}


.back-to-top svg {

    width:
        13px;

    height:
        13px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        2.1;
}


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

@media (
    max-width: 767px
) {

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

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


    .header-inner {

        width:
            100%;

        height:
            48px;

        padding:
            0 18px
            0 23px;

        justify-content:
            flex-start;

        gap:
            10px;
    }


    .menu-button {
        display:
            inline-block;
    }


    .brand {

        font-size:
            17px;

        line-height:
            1;
    }


    .desktop-nav {
        display:
            none;
    }


    .mobile-menu {
        top:
            48px;
    }


    .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;
    }


    .site-footer {

        min-height:
            82px;

        padding:
            24px
            56px
            24px
            22px;
    }


    .footer-copy {

        font-size:
            9px;
    }


    .back-to-top {

        right:
            14px;

        top:
            21px;
    }
}


/* =========================================================
   EXTRA SMALL MOBILE
   ========================================================= */

@media (
    max-width: 380px
) {

    .header-inner {

        padding-left:
            23px;

        padding-right:
            18px;
    }


    .brand {

        font-size:
            17px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
    prefers-reduced-motion: reduce
) {

    html {
        scroll-behavior:
            auto;
    }


    *,
    *::before,
    *::after {

        transition-duration:
            0.01ms !important;
    }
}