@import url('https://fonts.googleapis.com/css2?family=Birthstone&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

body{
    font-size: 1vw;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    padding: 0;
    margin: 0;
    background-color: #121212;
}

/* Contêiner Principal */
#conteudo-contatos {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2%;
    a:link {
        color: inherit;
        text-decoration: none;
    }
    a:visited {
        text-decoration: none;
        color: inherit;
    }
    a:hover {
        text-decoration: none;
        color: #F48034;
    }
    a:active {
        text-decoration: none;
        color: inherit;
    }
}

h2 {
    font-family: "Birthstone", serif;
    font-size: 4vw;
    font-weight: 300;
    margin: 0;
}

.contatos {
    width: 90%;
    display: flex;
    justify-content: space-between;
    gap: 3%;
    padding: 1%;
    box-sizing: border-box;
    color: #FFF;
}

/* Estilo das Partes */
.parte h1 {
    font-size: 2.5rem;
    font-weight: bold;
    color: #F48034;
}

.parte h3 {
    font-size: 1.2rem;
    font-weight: bold;
    color: #F48034;
}

.parte p {
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
    color: #FFF;
    text-align: justify;
    font-weight: 300;
}

/* Layout Desktop */
.parte1 { width: 50%; }
.parte2 { width: 20%; }
.parte3 { width: 30%; }

.parte3 a {
    color: #F48034;
    text-decoration: none;
}
.parte3 a:hover {
    text-decoration: underline;
}

/* Responsividade para Tablets e Telas Menores */
@media (max-width: 768px) {
    .contatos {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .parte {
        width: 100%;
        margin-bottom: 20px;
    }

    iframe {
        height: 350px;
    }

    .parte h1 {
        font-size: 2rem;
    }
    .formulario-contato-cliente label{
        font-size: 2vw;
    }
    .formulario-contato-cliente input[type="text"],
    .formulario-contato-cliente input[type="date"],
    .formulario-contato-cliente input[type="email"],
    .formulario-contato-cliente input[type="password"],
    .formulario-contato-cliente textarea {
        width: 100%; /* Ocupa toda a largura */
        font-size: 2vw; /* Aumenta o tamanho do texto */
    }

    .formulario-contato-cliente {
        padding: 15px; /* Espaçamento interno para o formulário */
    }
}

/* Responsividade para Smartphones */
@media (max-width: 480px) {
    .contatos {
        gap: 1.5rem;
    }

    .parte h1 {
        font-size: 1.8rem;
    }

    .parte p {
        font-size: 0.9rem;
    }

    iframe {
        height: 300px;
    }
    .formulario-contato-cliente label{
        font-size: 3vw;
    }
    .formulario-contato-cliente input[type="text"],
    .formulario-contato-cliente input[type="email"],
    .formulario-contato-cliente input[type="date"],
    .formulario-contato-cliente input[type="password"],
    .formulario-contato-cliente textarea {
        width: 100%; /* Ocupa toda a largura */
        font-size: 3vw; /* Aumenta o tamanho do texto */
    }

    .formulario-contato-cliente {
        padding: 15px; /* Espaçamento interno para o formulário */
    }
}

/*FORMULÁRIO CONTATO*/
.checkbox-group {
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente, se necessário */
    margin-bottom: 20px;
    width: 100%;
}

.hidden {
    display: none;
}

.form-container input:focus,
.form-container textarea:focus {
    border-color: #ff6f61; /* Cor ao focar */
    box-shadow: 0 0 5px rgba(255, 111, 97, 0.6);
    outline: none;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.suggestions {
    border: 1px solid #ccc;
    max-height: 100px;
    overflow-y: auto;
    position: absolute;
    background-color: white;
    z-index: 1000;
    width: calc(100% - 22px);
    color: #333;
}
.suggestion {
    padding: 10px;
    cursor: pointer;
}
.suggestion:hover {
    background-color: #f0f0f0;
    color: #333;
}

/*FORMULARIO*/
.formulario-contato-cliente {
    width: 70%; /* O formulário ocupa 70% da largura da página */
    margin: 50px auto; /* Centraliza o formulário */
    padding: 2%; /* Padding geral do formulário */
    background-color: #444; /* Fundo do formulário */
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7);
    position: relative; /* Para usar o pseudo-elemento antes */
}

.formulario-contato-cliente::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 10px;
    background: linear-gradient(to right, #F48034, #F45034); /* Gradiente para um toque especial */
    border-radius: 12px 12px 0 0; /* Bordas arredondadas no topo */
}

.formulario-contato-cliente h1 {
    text-align: center;
    color: #F48034; /* Cor do título */
    margin-bottom: 30px;
    font-size: 4rem; /* Tamanho do título */
    letter-spacing: 1px;
    font-family: 'Lucky Fellas', sans-serif; /* Fonte do título */
    font-weight: 300; /* Peso da fonte do título */
}

.checkbox-group {
    display: flex; /* Alinha em linha */
    justify-content: center; /* Centraliza as checkboxes */
    margin-bottom: 30px;
}

.checkbox-group label {
    color: #fff; /* Texto branco para os rótulos */
    font-weight: bold;
    margin: 0 10px; /* Pequena separação entre as checkboxes */
    display: flex; /* Para alinhar checkbox e texto */
    align-items: center; /* Centraliza verticalmente */
}

.checkbox-group input[type="checkbox"] {
    width: 20px; /* Ajusta a largura da checkbox */
    height: 20px; /* Ajusta a altura da checkbox */
    appearance: none; /* Remove o estilo padrão */
    border: 2px solid #F48034; /* Borda quando não selecionada */
    border-radius: 4px; /* Bordas arredondadas */
    margin-right: 5px; /* Espaçamento entre checkbox e rótulo */
    cursor: pointer; /* Muda o cursor ao passar por cima */
    background-color: transparent; /* Fundo transparente */
}

.checkbox-group input[type="checkbox"]:checked {
    background-color: #F48034; /* Cor do fundo quando selecionada */
}

/* Estilo para a checkbox não selecionada */
.checkbox-group input[type="checkbox"]:not(:checked) {
    background-color: transparent; /* Sem fundo */
}

.formulario-contato-cliente input[type="text"],
.formulario-contato-cliente input[type="email"],
.formulario-contato-cliente input[type="password"], /* Adicionado para senha */
.formulario-contato-cliente input[type="date"],
.formulario-contato-cliente textarea {
    width: 98%; /* Largura das entradas */
    padding: 1%; /* Padding dos inputs */
    margin-bottom: 20px;
    border: 2px solid #F48034; /* Borda laranja */
    border-radius: 8px;
    background: none; /* Sem fundo */
    color: #fff; /* Texto branco */
    transition: border-color 0.3s;
}

.formulario-contato-cliente input[type="text"]:focus,
.formulario-contato-cliente input[type="email"]:focus,
.formulario-contato-cliente input[type="date"]:focus,
.formulario-contato-cliente textarea:focus {
    border-color: #F43034; /* Cor da borda ao focar */
    outline: none; /* Remover contorno padrão */
}

.formulario-contato-cliente input[type="file"] {
    margin-bottom: 20px;
    padding: 1%; /* Padding igual às outras entradas */
    border: 2px solid #F48034; /* Borda laranja */
    border-radius: 8px; /* Bordas arredondadas */
    background: none; /* Sem fundo */
    color: #fff; /* Texto branco para o input de arquivo */
}

.formulario-contato-cliente button {
    background-color: #F48034; /* Cor do botão */
    color: #333; /* Texto escuro */
    border: none;
    padding: 15px;
    border-radius: 8px;
    cursor: pointer;
    width: 100%; /* Largura total do botão */
    font-size: 18px;
    transition: background-color 0.3s, transform 0.2s;
}

.formulario-contato-cliente button:hover {
    background-color: #F43034; /* Cor mais escura ao passar o mouse */
    transform: translateY(-2px); /* Efeito de elevação */
}

.formulario-contato-cliente .input-group {
    margin-bottom: 20px;
}

.hidden {
    display: none;
}

/* Garantindo que todo texto dentro do formulário seja branco */
.formulario-contato-cliente * {
    color: #fff; /* Texto branco */
}

/* Estilo para SELECT e suas opções */
.formulario-contato-cliente select {
    width: auto;
    padding: 10px;
    border: 2px solid #F48034;
    border-radius: 8px;
    background-color: transparent;
    color: #FFF;
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    appearance: none; /* Remove o estilo padrão do navegador */
    cursor: pointer;
    transition: border-color 0.3s, background-color 0.3s;
    margin-bottom: 1%;
}

.formulario-contato-cliente select:focus {
    border-color: #F43034;
    outline: none;
    box-shadow: 0 0 5px rgba(244, 48, 52, 0.6);
}

.formulario-contato-cliente option {
    background-color: #444;
    color: #FFF;
    font-family: "Montserrat", sans-serif;
}

/* Estilo para BUTTON */
.formulario-contato-cliente button {
    background-color: #F48034;
    color: #333;
    border: none;
    padding: 15px;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    font-size: 1rem;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    transition: background-color 0.3s, transform 0.2s;
}

.formulario-contato-cliente button:hover {
    background-color: #F43034;
    transform: translateY(-2px);
}