/* ***************************************************************************/
/* Contact page */
/* ***************************************************************************/

.contact-page {
    .contact-form {
        padding-bottom: 7rem;

        * {
            margin    : 0 auto;
            text-align: center;
        }

        p {
            max-width: 62ch;
            margin   : 3rem auto;
        }

        .form-container {
            max-width: 812px;
        }

        .inputs-container p {
            margin    : 0;
            text-align: left;
        }

        img {
            max-width: 370px;
        }

        input:not(.wpcf7-submit),
        select,
        textarea,
        label,
        option {
            width     : 100%;
            text-align: left;
        }

        input:not(.wpcf7-submit).wpcf7-not-valid,
        select.wpcf7-not-valid,
        textarea.wpcf7-not-valid {
            border: 1px solid red;
        }

        .wpcf7-not-valid-tip {
            display: none !important;
        }


        input:not(.wpcf7-submit),
        select,
        textarea {
            height     : 47px;
            border     : 1px solid var(--clr-primary-600);
            padding    : 1.5rem 1.2rem;
            font-weight: var(--fw-normal);
        }

        input.wpcf7-submit {
            max-width: 260px;
            margin   : 0;
            height   : 47px;
        }

        select {
            appearance: none;
        }

        /* For WebKit browsers (Chrome, Safari, Edge) */
        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin            : 0;
        }

        /* For Firefox */
        input[type="number"] {
            -moz-appearance: textfield;
        }

        /* Make it look like a text input */
        input[type="number"] {
            appearance: none;
        }

        textarea {
            height    : auto;
            min-height: 150px;
        }

        label {
            font-size  : var(--fs-200);
            line-height: var(--lh-500);
            font-weight: var(--fw-semi-bold);
        }

        .inputs-container :nth-child(1) {
            grid-area: team;
            position : relative;
        }

        .inputs-container :has(select)>span {
            position: relative;
        }

        .inputs-container :has(select)>span::after {
            content       : '▼';
            /* Unicode for arrow */
            font-size     : 14px;
            color         : #555;
            position      : absolute;
            right         : 10px;
            top           : 50%;
            transform     : translateY(-50%);
            pointer-events: none;
        }

        .inputs-container :nth-child(2) {
            grid-area: company;
        }

        .inputs-container :nth-child(3) {
            grid-area: first-name;
        }

        .inputs-container :nth-child(4) {
            grid-area: last-name;
        }

        .inputs-container :nth-child(5) {
            grid-area: phone;
        }

        .inputs-container :nth-child(6) {
            grid-area: email;
        }

        .inputs-container :nth-child(7) {
            grid-area: subject;
        }

        .inputs-container :nth-child(8) {
            grid-area: message;
        }

        .inputs-container :nth-child(9) {
            grid-area  : button;
            display    : flex;
            align-items: flex-end;
        }

        .inputs-container {
            display            : grid;
            gap                : 1rem 1.6rem;
            grid-template-areas: "team company"
                "first-name subject"
                "last-name message"
                "phone message"
                "email button";
        }
    }

    .map {
        margin-bottom: 9rem;

        .section-inner-container {
            width: 100%;
        }

        iframe {
            width     : 100%;
            max-height: 670px;
        }
    }

    .support-team {
        padding-bottom: 9.5rem;

        * {
            text-align: center;
            margin    : 0 auto;
        }

        .details {
            max-width: 1165px;
            flex-wrap: wrap;
        }

        h2 {
            color         : var(--clr-primary-600);
            letter-spacing: 0;
        }

        h3 {
            font-size  : var(--fs-300);
            line-height: var(--lh-500);
            font-weight: var(--fw-semi-bold);
        }

        p {
            max-width: 62ch;
            margin   : 1rem auto 6.5rem auto;
        }

        a {
            font-size  : var(--fs-400);
            line-height: var(--lh-500);
            font-weight: var(--fw-medium);
            color      : var(--clr-primary-600);
        }

        a.email-link {
            color: var(--clr-primary-100);
        }

        .details>div {
            display       : flex;
            flex          : 1 0 25%;
            flex-direction: column;
        }

        .img-container {
            place-content   : center;
            width           : 90px;
            aspect-ratio    : 1 / 1;
            border-radius   : 50%;
            background-color: var(--clr-primary-600);
            margin-bottom   : 3rem;
        }
    }
}

@media screen and (max-width: 992px) {
    .contact-page {
        .section-inner-container:where(:not(:has(iframe))) {
            padding-left : 3rem;
            padding-right: 3rem;
        }

        .contact-form {
            .form-container {
                max-width: 100%;
            }
        }
    }

}

@media screen and (max-width: 768px) {
    .contact-page {

        .contact-form {
            .form-container {
                display: grid;
            }

            .inputs-container {
                grid-template-areas: "team"
                    "company"
                    "first-name"
                    "last-name"
                    "phone"
                    "email"
                    "subject"
                    "message"
                    "button";
            }
        }

        .support-team {
            .details {
                gap: 3rem;
            }

            .img-container {
                margin-bottom: 2rem;
            }
        }
    }

}

@media screen and (max-width: 450px) {
    .contact-page {
        .contact-form {
            img {
                max-width: 100%;
            }

        }
    }

}