/* Importação da fonte Poppins do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    font-family: 'Poppins', sans-serif; /* Aplica a fonte Poppins a todos os elementos */
    font-size: 16px;
    color: #FDFFFC;
    box-sizing: border-box;
}

body {
    background: url(https://iili.io/2yUeo0l.png);
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column; /* Alinha os itens verticalmente */
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* Estilo para o contêiner da logo */
.logo-container {
    text-align: center; /* Centraliza a imagem e o texto */
	margin-top: -50px;
    margin-bottom: 10px; /* Margem de 5px entre a imagem e o formulário */
}

/* Estilo para a imagem */
.logo-container img {
    max-width: 300px; /* Largura máxima da imagem */
    width: 100%; /* Faz a imagem ser responsiva */
    height: auto; /* Mantém a proporção da imagem */
}

/* Estilo para o texto abaixo da imagem */
.logo-container h6 {
    margin-bottom: -5px; /* Margim do texto para a caixa do formulario */
    margin-top: -10px; /* Espaçamento entre a imagem e o texto */
    font-size: 17px; /* Tamanho da fonte */
    font-weight: 400; /* Peso da fonte */
    color: #FDFFFC; /* Cor do texto */
}

.spinner {
    border: 1px dashed #fff;
    border-radius: 100%;
    width: 4em;
    height: 4em;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: spinner 2s linear infinite;
}

i.fa-check {
    display: none;
    align-self: center;
}

form {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.formField {
    background-color: #ffffff4d;
    text-align: center;
    width: 330px;
    padding: 20px;
    border-radius: 5px;
    overflow: hidden;
}

.formInput {
    background: none;
    border: none;
    display: block;
    width: 100%;
    padding: 15px 20px;
    outline: none;
    border-bottom: 1px solid #363e44;
}

/* Contêiner para o campo de entrada com ícone */
.input-with-icon {
    position: relative;
    width: 100%;
    margin-bottom: 10px; /* Espaçamento entre os campos */
}

/* Estilo para o ícone */
.input-with-icon i {
    position: absolute;
    left: 20px; /* Distância da borda esquerda */
    top: 45%;
    transform: translateY(-50%); /* Centraliza verticalmente */
    color: #aaaaaa; /* Cor do ícone */
    font-size: 16px; /* Tamanho do ícone */
}

/* Ajuste no campo de entrada para acomodar o ícone */
.input-with-icon .formInput {
    padding-left: 40px; /* Espaço para o ícone */
}

/* Estilo específico para o ícone do telefone */
.input-with-icon.phone-icon i {
    left: 15px; /* Ajuste da distância da borda esquerda */
    font-size: 18px; /* Tamanho do ícone */
}

.formInput:first-child {
    border-bottom: 1px solid #363e44;
}

.formInput::placeholder {
    color: #aaaaaa;
}

/* Estilo para os campos de entrada e o select */
.formInput {
    background: none;
    border: none;
    display: block;
    width: 100%;
    padding: 15px 20px;
    outline: none;
    border-bottom: 1px solid #363e44;
    color: #FDFFFC; /* Cor do texto */
    margin-bottom: 10px; /* Espaçamento entre os campos */
    font-family: 'Poppins', sans-serif; /* Fonte */
    font-size: 16px; /* Tamanho da fonte */
}

/* Estilo para o placeholder dos campos de entrada */
.formInput::placeholder {
    color: #aaaaaa;
}

/* Estilo específico para o select */
.formInput.select-default {
    appearance: none; /* Remove o estilo padrão do select */
    -webkit-appearance: none; /* Remove o estilo padrão no Safari */
    -moz-appearance: none; /* Remove o estilo padrão no Firefox */
    background: url('data:image/svg+xml;utf8,<svg fill="%23FDFFFC" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 10px center; /* Ícone de seta personalizado */
    background-size: 12px; /* Tamanho do ícone */
    padding-right: 30px; /* Espaço para o ícone */
}

/* Estilo para as opções do select */
.formInput.select-default option {
    background-color: #011627; /* Cor de fundo das opções */
    color: #FDFFFC; /* Cor do texto das opções */
}

/* Estilo para o hover das opções */
.formInput.select-default option:hover {
    background-color: #3E92CC; /* Cor de fundo ao passar o mouse */
}

.button {
    width: 100%;
    border: none;
    background-color: #222222de;
    color: #FDFFFC;
    padding: 18px 0;
    cursor: pointer;
    margin-top: 20px;
    transition: background-color 0.3s ease; /* Adiciona transição suave na cor de fundo */
}

.button:hover {
    background-color: #000000;
}

.newsletter-success {
    padding: 50px 0;
    display: none;
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}