.formulario-contacto {

    .container__wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;

        .container__wrapper-inside {
            display: grid;
            grid-template-columns: 45% 55%;

            .container__contact-office {
              height: 90vh;
                .container__contact-inside {
                    max-width: 80%;
                    margin: 16px 24px;
                    background: #FFFFFFF0;
                    padding: 16px;
                    border-radius: 4px;

                    .container__title {
                        h2 {
                            color: var(--color-primary-10);
                            font-size: 18px;
                            font-family: 'Poppins';
                            line-height: 22px;
                            font-weight: 400;
                        }
                    }

                    .container__form {
                        display: flex;
                        gap: 32px;

                        .content__form,
                        .content__information {
                            flex: 1;
                        }

                        .content__form {
                            label {
                                color: var(--color-primary-10);
                                font-size: 14px;
                                font-weight: 500;
                                line-height: 16px;
                            }

                            select {
                                border: 1px solid var(--color-primary-05);
                                border-radius: 4px;
                                font-size: 16px;
                                line-height: 18px;
                                padding: 10px 8px;
                            }
                        }

                        .content__information {
                            .contact_card {
                                display: flex;
                                align-items: center;

                                .text_contact_card {
                                    background: #0000000A;
                                    padding: 8px 16px 16px;
                                    width: 100%;

                                    h2 {
                                        color: var(--color-primary-10);
                                        font-size: 22px;
                                        font-weight: 600;
                                        line-height: 24px;
                                    }

                                    .contacto {
                                        span {
                                            font-size: 14px;
                                            margin-right: 6px;
                                            color: var(--color-secondary-07);
                                        }

                                        a {
                                            color: var(--color-secondary-07);
                                            font-size: 14px;
                                            font-weight: 400;
                                            line-height: 18px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }

            .container__form-help {
                background: #FFFFFFF0;
                box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.37);

                form.webform-submission-contacto-form {
                    max-width: 80%;
                    margin: 40px auto;

                    .container__form {
                        .form-item-markup {
                            margin: 0px !important;

                            h2 {
                                font-size: 36px;
                                font-weight: 700;
                                color: var(--color-primary-10);
                                line-height: 38px;
                                margin: 0 0 8px 0;
                            }
                        }

                        label.webform-subtitle {
                            font-size: 18px;
                            line-height: 22px;
                            font-weight: 400;
                            color: var(--color-primary-06);
                            margin-bottom: 40px;
                        }

                        .form-group,
                        .form-type-email,
                        .form-type-tel,
                        .form-item-mensaje {
                            margin-bottom: 1.375rem;
                            display: flex;
                            flex-direction: column;
                            align-items: baseline;

                            label {
                                color: var(--color-primary-10);
                                font-size: 14px;
                                font-weight: 500;
                                line-height: 16px;
                            }

                            input {
                                border: 1px solid var(--color-primary-05);
                                border-radius: 4px;
                                font-size: 16px;
                                font-style: italic;
                                line-height: 18px;
                                padding: 10px 8px;
                            }
                        }

                        #edit-telefono {
                            margin: 0 !important;
                        }

                        .form-type-textarea {
                            width: 100%;
                        }

                        .form-check {
                            margin-bottom: .5rem !important;
                            display: flex;
                            align-items: flex-start;
                            justify-content: flex-start;
                            gap: 8px;
                            padding-left: 0;

                            .form-check-input[type=checkbox] {
                                border-color: var(--color-secondary-07);
                                margin: 0;
                            }

                            label {
                                color: var(--color-primary-10);
                                font-size: 14px;
                                font-weight: 500;
                                line-height: 16px;
                                text-align: left;
                                padding-top: 2px;
                            }
                        }

                        .webform-actions {
                            margin-bottom: 1.5rem !important;

                            .button {
                                width: 100%;
                                text-align: center;
                                padding: .5rem 0;
                                font-size: 16px;
                                font-weight: 400;
                                line-height: 16px;
                                text-transform: uppercase;
                                margin: 0;
                                border-radius: 4px;
                                background-color: var(--color-secondary-07);
                                color: var(--color-white);
                                border: none;
                            }
                        }

                    }
                }
            }

            .info_aditional {
                color: var(--color-primary-06);
                font-size: 10px;
                font-weight: 400;
                line-height: 12px;
            }
        }
    }
}

@media (max-width: 1200px) {
    .formulario-contacto {
        .container__wrapper {
            .container__wrapper-inside {
                grid-template-columns: 1fr;

                .container__contact-office {
                    .container__contact-inside {
                        margin: 16px auto;
                    }
                }
            }

        }
    }
}

@media (max-width: 768px) {
    .formulario-contacto {
        .container__wrapper {
            .container__wrapper-inside {
                .container__contact-office {
                    .container__contact-inside {
                        .container__form {
                            flex-direction: column;
                        }
                    }
                }
            }

        }
    }
}