/* Personalização de fontes */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {
    font-family: 'Roboto', sans-serif;
    color: #333; /* Cor do texto geral */
    background-color: #ffffff; /* Cor de fundo branca */
}

/* Animação de Fade-in para as seções */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;
}

/* Classe para mostrar a seção após carregada (você pode usar JS para adicionar essa classe, se quiser) */
.opacity-100 {
    opacity: 1;
    transform: translateY(0);
}

/* Personalizando o rodapé */
footer {
    background-color: #12502b; /* Cor de fundo do rodapé com o tom mais escuro */
    color: white;
    font-size: 0.875rem;
    padding: 1rem 0;
    text-align: center;
}

footer a {
    color: #0ce004; /* Cor verde clara para links */
}

footer a:hover {
    color: #157b18; /* Cor verde média ao passar o mouse */
}

/* Ondas fininhas e suaves no background da seção profissional */
.waves-background {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.waves-background svg {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 220%;
    height: 60px;
    opacity: 0.4;
    will-change: transform;
    transition: transform 0.2s ease-out;
}

.waves-background svg.wave1 {
    bottom: 0;
    opacity: 0.25;
    fill: #0ce004; /* Cor verde mais clara */
}

.waves-background svg.wave2 {
    bottom: 10px;
    opacity: 0.3;
    fill: #157b18; /* Cor verde média */
}

.waves-background svg.wave3 {
    bottom: 20px;
    opacity: 0.35;
    fill: #12502b; /* Cor verde mais escura */
}

/* Responsividade para mobile */
@media (max-width: 768px) {
    .waves-background svg {
        width: 300%;
        height: 40px;
    }

    .waves-background svg.wave1 {
        bottom: 0;
    }

    .waves-background svg.wave2 {
        bottom: 6px;
    }

    .waves-background svg.wave3 {
        bottom: 12px;
    }

    /* Ajuste padding da seção profissional no mobile */
    section.relative.py-24 {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    /* Ajustar texto para caber melhor em telas pequenas */
    .max-w-5xl {
        max-width: 90vw;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    /* Diminuir tamanho dos títulos e textos da profissional */
    .text-4xl {
        font-size: 1.75rem; /* ~28px */
    }

    .text-lg {
        font-size: 1rem; /* 16px */
        line-height: 1.5rem; /* 24px */
    }

    /* Correção de quebras no texto da hero */
    .text-lg.md\:text-2xl {
        word-wrap: break-word; /* Quebra de linha na frase longa */
    }
}