@import url(font.css);

body{
    background-color: #002B50;
}

.contact{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact.margin-top-relogio {
    margin-top: 177px;
}

    .contact__mobile{
        margin-top: 1.3125rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 19.1875rem;
        position: relative;
    }

        .contact__mobile--title{
            font-family: MullerExtrabold;
            font-size: 1.875rem;
            color: white;
        }

        .contact__mobile--select{
            font-family: 'Inter', sans-serif;
            font-size: .875rem;
            font-weight: 400;
            color: white;
            padding: .6875rem 2rem;
            border: 1px solid rgb(0, 162, 255, 0.3);
            border-radius: 1.25rem;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: .6875rem;
        }

            .contact__mobile--selection{
                width: 15.625rem;
                height: 13.6875rem;
                background-color: white;
                position: absolute;
                top: 0;
                margin-top: 1.5625rem;
                transform: translateX(20%);
                border-radius: .75rem;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }

                .contact__mobile--selection_items{
                    color: #002B50;
                    font-size: .9375rem;
                    font-weight: 700;
                    font-family: 'Inter', sans-serif;
                    width: 11.875rem;
                    padding: .5rem 0;
                    cursor: pointer;
                }

            .contact__mobile--select_icon{
                background-image: url(../img/site/icons/arrowDownNoTail.webp);
                width: .5625rem;
                height: .5rem;
                background-size: 100%;
                background-repeat: no-repeat;
                background-position: 50%;
            }

/* Boxes de form ou contato */

.contact__boxes{
    color: white;
    display: flex;
    flex-direction: column-reverse;
    gap: 3.125rem;
}

    .contact__boxes--info{
        background-color: #003059;
        border: 1px solid rgb(0, 162, 255, 0.3);
        border-radius: 1.875rem;
        width: 21.25rem;
        height: 33.4375rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.8125rem;
        justify-content: center;
    }

        .contact__boxes--info_articles{
            width: 14.1875rem;
            display: flex;
            flex-direction: column;
            gap: .5rem;
        }

            .contact__boxes--info_articles-title{
                font-family: 'Inter', sans-serif;
                font-weight: 700;
                font-size: .875rem;
            }

            .contact__boxes--info_articles-information{
                font-family: 'Roboto', sans-serif;
                font-weight: 400;
                font-size: .9375rem;
            }

    .contact__boxes--form{
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: center;
        margin-top: 1.25rem;
        gap: 1.25rem;
        justify-content: center;
    }



/* Configurando toda a form */

.contact__boxes--form_border1{
    width: 18.875rem;
    height: 3.4375rem;
}

.contact__boxes--form_border2{
    width: 18.875rem;
    height: 8.6875rem;
}


.contact__boxes--form_border3{
    width: 18.875rem;
    height: 8.6875rem;
}

.contact__boxes--form_border-space1{
    background-color: #053F72;
    border: 1px solid rgb(0, 162, 255, 0.3);
    width: 100%;
    height: 3.4375rem;
    border-radius: .75rem;
    display: flex;
}

.contact__boxes--form_border-space2{
    background-color: #053F72;
    border: 1px solid rgb(0, 162, 255, 0.3);
    width: 100%;
    height: 8.6875rem;
    border-radius: .75rem;
    display: flex;
}

.contact__boxes--form_border-space3{
    background-color: #053F72;
    border: 1px solid rgb(0, 162, 255, 0.3);
    width: 100%;
    height: 8.6875rem;
    border-radius: .75rem;
    display: flex;
}

.contact__boxes--form_border-space__icon1{
    width: 1rem;
    height: 1rem;
    background-image: url(../img/site/contact/profile.webp);
    background-size: 1rem;
    background-repeat: no-repeat;
    background-position: 50%;
    padding: 1.25rem;
}

.contact__boxes--form_border-space__icon5{
    width: 1rem;
    height: 1rem;
    background-image: url(../img/site/contact/profile.webp);
    background-size: 1rem;
    background-repeat: no-repeat;
    background-position: 50%;
    padding: 1.25rem;
}

.contact__boxes--form_border-space__icon2{
    width: 1rem;
    height: 1rem;
    background-image: url(../img/site/contact/mail.webp);
    background-size: 1rem;
    background-repeat: no-repeat;
    background-position: 50%;
    padding: 1.25rem;
}

.contact__boxes--form_border-space__icon3{
    width: 1rem;
    height: 1rem;
    background-image: url(../img/site/contact/wpp.webp);
    background-size: 1rem;
    background-repeat: no-repeat;
    background-position: 50%;
    padding: 1.25rem;
}

.contact__boxes--form_border-space__icon4{
    width: 1rem;
    height: 1rem;
    background-image: url(../img/site/contact/message.webp);
    background-size: 1rem;
    background-repeat: no-repeat;
    background-position: 50%;
    padding: 1.25rem;
}

.contact__boxes--form_border-space__text{
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
}

.contact__boxes--form_border-space__text input{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: .75rem;
    border: none;
    background-color: transparent;
    outline: none;
    color: white;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: .9375rem;
}

.contact__boxes--form_border-space__text textarea{
    width: 100%;
    outline: none;
    background-color: transparent;
    border: none;
    box-sizing: border-box;
    resize: none;
    color: white;
    height: 100%;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: .9375rem;
}

.contact__boxes--form_border-space__text input::placeholder, .contact__boxes--form_border-space__text textarea::placeholder{
    color: white;
}

.contact__boxes--form_border-back{
    width: auto;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.contact__boxes--form_border-back__image1{
    width: 1.25rem;
    height: 1.25rem;
    background-image: url(../img/site/contact/Icon.webp);
    background-size: 1.25rem;
    background-position: 50%;
    background-repeat: no-repeat;
    cursor: pointer;
    padding: .3125rem .5rem;
    transform: rotate(180deg);
}

.contact__boxes--form_button{
    width: 12rem;
    height: 3.6875rem;
    border-radius: .9375rem;
    padding: .4375rem .4063rem;
    background-color: transparent;
    transition: 300ms;
}

    .contact__boxes--form_button:hover{
        background-color: rgb(0, 162, 255, 0.3);
    }

    .contact__boxes--form_button-border{
        background-color: #00A2FF;
        width: 12rem;
        height: 3.6875rem;
        border-radius: .625rem;
        border: none;
        color: white;
        font-family: 'Inter', sans-serif;
        font-size: .875rem;
        font-weight: 700;
        cursor: pointer;
    }

@media screen and (min-width: 750px) {
    .contact{
        display: flex;
        flex-direction: row;
        gap: 1rem;
        justify-content: center;
        align-items: flex-start;
        margin-top: 0;
    }

    .contact.margin-top-relogio {
        margin-top: 10px;
    }

        .contact__desktop{
            margin-top: 1.3125rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 19.1875rem;
            position: relative;
            height: 6.3125rem;
        }

            .contact__desktop--title{
                font-family: MullerExtrabold;
                font-size: 1.875rem;
                color: white;
            }

            .contact__desktop--select{
                width: 12.1875rem;
                font-family: 'Inter', sans-serif;
                font-size: .875rem;
                font-weight: 400;
                color: white;
                padding: .6875rem 2rem;
                border: 1px solid rgb(0, 162, 255, 0.3);
                border-radius: 1.25rem;
                display: flex !important;
                justify-content: center;
                align-items: center;
                gap: .6875rem;
                margin-top: 2.4375rem;
                cursor: pointer;
            }

                .contact__desktop--selection{
                    width: 15.625rem;
                    height: 13.6875rem;
                    background-color: white;
                    position: absolute;
                    border-radius: .75rem;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    z-index: 3;
                }

                    .contact__desktop--selection_items{
                        color: #002B50;
                        font-size: .9375rem;
                        font-weight: 700;
                        font-family: 'Inter', sans-serif;
                        width: 11.875rem;
                        padding: .5rem 0;
                        cursor: pointer;
                    }

                    .contact__desktop--selection_items:hover{
                        color: #D70A84;
                    }

                .contact__desktop--select_icon{
                    background-image: url(../img/site/icons/arrowDownNoTail.webp);
                    width: .5625rem;
                    height: .5rem;
                    background-size: 100%;
                    background-repeat: no-repeat;
                    background-position: 50%;
                }

/* Boxes de form ou contato */

.contact__boxes{
    flex-direction: row;
    gap: 1rem;
}

    .contact__boxes--title{
        font-size: 3.125rem;
        font-family: MullerExtrabold;
        height: calc(6.3125rem - .9375rem);
        margin-top: 0.9375rem;
    }

    .contact__boxes--info{
        width: 22rem;
    }

        .contact__boxes--info_articles{
            width: 18rem;
        }

    .contact__boxes--form{
        margin-top: 1.3125rem;
        border: 1px solid rgb(0, 162, 255, 0.3);
        background-color: #003059;
        width: 27.75rem;
        height: 33.4375rem;
        border-radius: 1.875rem;
        position: relative;
    }

/* Formulário */

.contact__boxes--form_border1{
    width: 22.25rem;
    height: 3.4375rem;
}

.contact__boxes--form_border2{
    width: 22.25rem;
    height: 3.4375rem;
}

.contact__boxes--form_border3{
    width: 22.25rem;
    height: 8.6875rem;
}

.contact__boxes--form_border-space1{
    background-color: #053F72;
    border: 1px solid rgb(0, 162, 255, 0.3);
    width: 22.25rem;
    height: 3.4375rem;
    border-radius: .75rem;
    display: flex;
}

.contact__boxes--form_border-space2{
    background-color: #053F72;
    border: 1px solid rgb(0, 162, 255, 0.3);
    width: 22.25rem;
    height: 3.4375rem;
    border-radius: .75rem;
    display: flex;
    transition: 300ms;
}

.contact__boxes--form_border-space3{
    background-color: #053F72;
    border: 1px solid rgb(0, 162, 255, 0.3);
    width: 22.25rem;
    height: 8.6875rem;
    border-radius: .75rem;
    display: flex;
    position: relative;
    z-index: 3;
    transition: 300ms;
}

.contact__boxes--form_buttonContainer{
    display: flex;
    width: 22.25rem;
    height: auto;
    justify-content: flex-start;
}

.contact__boxes--form_border-space__text--label1{
    position: absolute;
    margin-top: 20px;
    transition: 300ms;
    font-family: 'Roboto', sans-serif;
    font-size: .875rem;
    font-weight: 500;
}

.contact__boxes--form_border-space__text--label2{
    position: relative;
    margin-top: .3125rem;
    color: #00A2FF;
    font-size: .75rem;
    font-weight: 500;
    transition: 300ms;
    font-family: 'Roboto', sans-serif;
}

.contact__banner{
    border-radius: 1.875rem;
    background-position: 50%;
    background-size: 100%;
    background-repeat: no-repeat;
    margin-top: 6.3125rem;
}

.contact__banner img{
    width: 100%;
    height: auto;
    max-height: 33.4375rem;
    border-radius: 1.875rem;
}

textarea{
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

textarea::-webkit-scrollbar {
    width: 0;
}

}