/* Estilos gerais do corpo da página */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f9fafb; /* Cor de fundo suave, similar ao seu site */
    color: #374151; /* Cor de texto principal */
    display: flex; /* Habilita o Flexbox */
    justify-content: center; /* Centraliza o conteúdo horizontalmente */
    align-items: center; /* Centraliza o conteúdo verticalmente */
    min-height: 100vh; /* Garante que a página ocupe toda a altura da tela */
    text-align: center;
    padding: 20px;
    box-sizing: border-box; /* Garante que o padding não afete a largura total */
}

/* Container principal que agrupa o conteúdo */
.container {
    max-width: 600px;
    width: 100%;
}

/* Estilização da caixa do ícone */
.icon-wrapper {
    margin-bottom: 2rem;
    color: #00A79D; /* Cor primária do seu site */
    /* Aplica a animação 'float' ao ícone */
    animation: float 4s ease-in-out infinite;
}

/* Define o tamanho do ícone */
.icon-wrapper i {
    width: 80px;
    height: 80px;
}

/* Estilo do título principal */
h1 {
    font-size: 2.5rem; /* Tamanho da fonte */
    font-weight: 700;
    margin-bottom: 1rem;
}

/* Estilo do parágrafo de texto */
p {
    font-size: 1.125rem;
    color: #6b7280; /* Cor de texto mais clara */
    line-height: 1.6;
}

/* Animação 'float' */
/* @keyframes define os passos da animação */
@keyframes float {
    0% {
        transform: translateY(0px); /* Posição inicial */
    }
    50% {
        transform: translateY(-20px); /* Posição intermediária (flutua para cima) */
    }
    100% {
        transform: translateY(0px); /* Retorna à posição inicial */
    }
}

/* Design Responsivo para telas menores (celulares) */
@media (max-width: 767px) {
    h1 {
        font-size: 2rem; /* Diminui o tamanho do título em telas pequenas */
    }

    p {
        font-size: 1rem; /* Diminui o tamanho do parágrafo */
    }

    .icon-wrapper i {
        width: 60px; /* Diminui o tamanho do ícone */
        height: 60px;
    }
}
/* Estilos gerais do corpo da página */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f9fafb; /* Cor de fundo suave, similar ao seu site */
    color: #374151; /* Cor de texto principal */
    display: flex; /* Habilita o Flexbox */
    justify-content: center; /* Centraliza o conteúdo horizontalmente */
    align-items: center; /* Centraliza o conteúdo verticalmente */
    min-height: 100vh; /* Garante que a página ocupe toda a altura da tela */
    text-align: center;
    padding: 20px;
    box-sizing: border-box; /* Garante que o padding não afete a largura total */
}

/* Container principal que agrupa o conteúdo */
.container {
    max-width: 600px;
    width: 100%;
}

/* Estilização da caixa do ícone */
.icon-wrapper {
    margin-bottom: 2rem;
    color: #00A79D; /* Cor primária do seu site */
    /* Aplica a animação 'float' ao ícone */
    animation: float 4s ease-in-out infinite;
}

/* Define o tamanho do ícone */
.icon-wrapper i {
    width: 80px;
    height: 80px;
}

/* Estilo do título principal */
h1 {
    font-size: 2.5rem; /* Tamanho da fonte */
    font-weight: 700;
    margin-bottom: 1rem;
}

/* Estilo do parágrafo de texto */
p {
    font-size: 1.125rem;
    color: #6b7280; /* Cor de texto mais clara */
    line-height: 1.6;
}

/* Animação 'float' */
/* @keyframes define os passos da animação */
@keyframes float {
    0% {
        transform: translateY(0px); /* Posição inicial */
    }
    50% {
        transform: translateY(-20px); /* Posição intermediária (flutua para cima) */
    }
    100% {
        transform: translateY(0px); /* Retorna à posição inicial */
    }
}

/* Design Responsivo para telas menores (celulares) */
@media (max-width: 767px) {
    h1 {
        font-size: 2rem; /* Diminui o tamanho do título em telas pequenas */
    }

    p {
        font-size: 1rem; /* Diminui o tamanho do parágrafo */
    }

    .icon-wrapper i {
        width: 60px; /* Diminui o tamanho do ícone */
        height: 60px;
    }
}