/* ===== ESTILO DO TEXTO DESTACADO COM COR ===== */
/* Texto em cor verde claro para destacar informações importantes */
.text-span{
    color: #75ca3c;             /* Verde claro para destaque */
}

/* ===== CONTAINER DAS ESTATÍSTICAS ===== */
/* Organiza as estatísticas em uma linha horizontal */
.stats-container {
    display: flex;              /* Layout flexível */
    flex-direction: row;        /* Elementos lado a lado */
    align-items: center;        /* Alinha verticalmente */
    justify-content: start;     /* Alinha à esquerda */
    gap: 30vh;                  /* Espaço grande entre estatísticas */
}

/* ===== SEÇÃO DE ESTATÍSTICAS ===== */
/* Espaçamento da seção de estatísticas */
.stats-section{
    margin-top: auto;           /* Empurra para o final */
    margin-bottom: 20px;        /* Espaço inferior */
    padding-bottom: 20px;       /* Preenchimento inferior */
}

/* Título principal da seção inicial */
.title-initial h1{
    margin-top: 0%;             /* Sem margem superior */
}

/* ===== ESTATÍSTICAS INDIVIDUAIS ===== */
/* Número da estatística */
.stat h1 {
    color: rgb(240, 237, 237);  /* Cor clara para o número */
    text-decoration: bold;      /* Texto em negrito */
    margin-bottom: 0%;          /* Sem margem inferior */
    margin-top: 0%;             /* Sem margem superior */
    align-items: right;         /* Alinha à direita */
    font-size: 5vh;             /* Tamanho grande do número */
}

/* Unidade ou rótulo da estatística */
.stat span {
    color: #ffffff;             /* Cor cinza para a unidade */
    font-size: 2.5vh;           /* Tamanho menor para o rótulo */
}
/* ===== SUBTÍTULO INICIAL ===== */
/* Descrição na seção inicial */
.subtitle-initial p{
    color: #ffffff;             /* Cor cinza claro */
    font-size: 2.7vh;           /* Tamanho da fonte */
    margin-top: 0%;             /* Sem margem superior */
}

/* ===== DESCRIÇÃO DE ESTATÍSTICAS ===== */
/* Texto adicional das estatísticas */
.stat-description {
    color: #ffffff;             /* Cor clara para o texto */
}

/* ===== SEÇÃO INICIAL (HERO SECTION) ===== */
/* Container da seção inicial com fundo em vídeo */
.section-initial{
    display: flex;              /* Layout flexível */
    flex-direction: column;     /* Elementos empilhados */
    position: relative;         /* Posição relativa para os filhos posicionados */
    overflow: hidden;           /* Esconde conteúdo que ultrapassa */
    width: 100%;                /* Ocupar toda a largura */
    min-height: 90vh;          /* Altura mínima para ocupar a viewport */
    padding-top: 140px;         /* Espaço para a navbar fixa */
    z-index: 1;                 /* Zindex base */
}

/* ===== FUNDO DE VÍDEO ===== */
/* Container do vídeo de fundo */
.viceo-background {
    position: absolute;         /* Posição absoluta dentro da section */
    top: 0;                     /* Alinha ao topo */
    left: 0;                    /* Alinha à esquerda */
    width: 100%;                /* Ocupar toda a largura */
    height: 100%;               /* Ocupar toda a altura */
    z-index: 0;                 /* Atrás do conteúdo */
}

/* Vídeo como fundo */
.viceo-background video {
    width: 100%;                /* Ocupar toda a largura */
    height: 100%;               /* Ocupar toda a altura */
    object-fit: cover;          /* Cobrir toda a área mantendo proporção */
    display: block;             /* Remove espaço em branco inferior */
}

/* Gradiente sobre o vídeo */
.viceo-background::after {
    content: '';                /* Cria pseudo-elemento */
    position: absolute;         /* Posição absoluta */
    top: 0;                     /* Alinha ao topo */
    left: 0;                    /* Alinha à esquerda */
    width: 100%;                /* Ocupar toda a largura */
    height: 100%;               /* Ocupar toda a altura */
    background: linear-gradient(to bottom, rgba(112, 112, 112, 0.8) 0%, transparent 110%);     
    pointer-events: none;       /* Não interfere com eventos do mouse */
} 

/* ===== CONTAINER DOS VALORES INICIAIS ===== */
/* Agrupa o título, subtítulo e botões */
.section-values{
    margin-left: 10rem;         /* Espaço a esquerda */
    display: flex;              /* Layout flexível */
    flex-direction: column;     /* Elementos empilhados */
    gap: 60px;                  /* Espaço grande entre elementos */
    position: relative;         /* Posição relativa */
    z-index: 2;                 /* Acima do vídeo */
}

/* Título principal da seção inicial */
.title-initial h1{
    font-size: 80px;            /* Título bem grande */
    color: white;               /* Texto em branco */
    margin-bottom: 0%;          /* Sem margem inferior */
}

/* ===== BOTÕES DE AÇÃO ===== */
/* Botão "Sobre Nós" com fundo verde */
.btn-sobre{
    background-color: #476d2e;  /* Fundo verde escuro */
    color: #fff;                /* Texto branco */
    border: none;               /* Sem borda */
    padding: 2vh 5vh;           /* Preenchimento vertical e horizontal */
    border-radius: 4px;         /* Cantos ligeiramente arredondados */
    cursor: pointer;            /* Cursor de ponteiro */
    font-weight: 600;           /* Fonte em negrito */
    font-size: 2.3vh;           /* Tamanho do texto */
    transition: background-color 0.2s ease;  /* Transição suave */
}

/* Efeito ao passar o mouse no botão "Sobre" */
.btn-sobre:hover{
    background-color: #015801;  /* Fundo verde mais escuro */
}

/* ===== BOTÃO DE CONTATO ===== */
/* Botão com apenas borda, sem fundo preenchido */
.btn-contato{
    background-color: transparent;  /* Fundo transparente */
    color: white;               /* Texto branco */
    border: 1px solid white;  /* Borda cinza */
    padding: 2vh 5vh;           /* Preenchimento igual ao botão sobre */
    font-size: 2.3vh;           /* Tamanho do texto */
    border-radius: 4px;         /* Cantos arredondados */
    cursor: pointer;            /* Cursor de ponteiro */
    font-weight: 600;           /* Fonte em negrito */
    transition: background-color 0.2s ease, color 0.2s ease;  /* Transições suaves */
}

/* Efeito ao passar o mouse no botão de contato */
.btn-contato:hover{
    background-color: white;    /* Fundo branco */
    color: #008000;             /* Texto verde */
}

/* ===== SETA DE SCROLL ===== */

/* ===== ANIMAÇÃO BOUNCE (PULO) ===== */
/* Animação que faz a seta pular continuamente */
@keyframes bounce{
    0%,20%,50%,80%,100%{ transform: translateY(0); }      /* Posição inicial */
    40%{ transform: translateY(-10px); }                    /* Pulo para cima */
    60%{ transform: translateY(-5px); }                     /* Pequeno pulo */
}

/* ===== RESPONSIVIDADE PARA TABLETS ===== */
@media (max-width: 1024px) {
    .section-initial {
        height: 80vh;           /* Altura reduzida para tablets */
    }

    .section-values {
        margin-left: 5rem;      /* Margem esquerda reduzida */
        gap: 1.5rem;            /* Espaço entre elementos reduzido */
    }

    .title-initial h1 {
        font-size: 60px;        /* Título menor */
    }

    .stats-container {
        gap: 15vh;              /* Espaço entre estatísticas reduzido */
    }

    .stat h1 {
        font-size: 4vh;         /* Número das estatísticas menor */
    }

    .stat span {
        font-size: 2vh;         /* Rótulo das estatísticas menor */
    }

    .subtitle-initial p {
        font-size: 2.3vh;       /* Subtítulo menor */
    }

    .btn-sobre,
    .btn-contato {
        padding: 1.5vh 4vh;     /* Preenchimento reduzido */
        font-size: 2vh;         /* Fonte menor */
    }
}

/* ===== RESPONSIVIDADE PARA CELULARES MÉDIOS ===== */
@media (max-width: 768px) {
    .section-initial {
        height: auto;           /* Altura automática baseada no conteúdo */
        min-height: 85vh;       /* Altura mínima reduzida */
        padding: 100px 20px 20px;  /* Espaço extra no topo para a navbar fixa */
        justify-content: flex-start;  /* Alinha conteúdo ao topo */
    }

    .stats-section {
        margin-top: 30px;       /* Espaço superior */
        margin-bottom: 0;       /* Sem margem inferior */
        padding-bottom: 0;      /* Sem preenchimento inferior */
    }

    .section-values {
        margin-left: 0;         /* Remove margem esquerda */
        margin-top: 3vh;        /* Espaço superior */
        gap: 1.5rem;            /* Espaço entre elementos */
        align-items: center;    /* Alinha elementos ao centro */
        width: 100%;            /* Ocupar toda a largura */
    }

    .title-initial h1 {
        font-size: 40px;        /* Título reduzido */
        text-align: center;     /* Centralizado */
    }

    .subtitle-initial p {
        font-size: 1.8vh;       /* Subtítulo menor */
        text-align: center;     /* Centralizado */
    }

    .stats-container {
        display: grid;          /* Usar grid ao invés de flex */
        grid-template-columns: 1fr 1fr; /* 2 colunas iguais */
        gap: 2vh;               /* Espaço entre estatísticas */
        width: 100%;            /* Ocupar toda a largura */
        justify-content: center; /* Centralizar */
    }

    .stat {
        text-align: center;     /* Centralizar conteúdo */
    }

    .stat h1 {
        font-size: 3vh;         /* Número menor */
    }

    .stat span {
        font-size: 1.5vh;       /* Rótulo menor */
    }

    .btn-sobre,
    .btn-contato {
        padding: 1.2vh 3vh;     /* Preenchimento ajustado */
        font-size: 1.6vh;       /* Fonte menor */
        width: fit-content;     /* Largura ajustada ao conteúdo */
    }

    .scroll-arrow {
        margin-top: 20px;       /* Espaço para a seta */
    }
}

/* ===== RESPONSIVIDADE PARA CELULARES PEQUENOS ===== */
@media (max-width: 480px) {
    .section-initial {
        min-height: 85vh;       /* Altura mínima reduzida */
        padding: 90px 15px 15px; /* Espaço extra no topo para a navbar fixa */
    }

    .section-values {
        margin-top: 2vh;        /* Espaço superior */
        gap: 1.2rem;            /* Espaço reduzido entre elementos */
    }

    .title-initial h1 {
        font-size: 28px;        /* Título bem menor */
    }

    .subtitle-initial p {
        font-size: 1.5vh;       /* Subtítulo bem menor */
    }

    .stats-container {
        display: grid;          /* Usar grid ao invés de flex */
        grid-template-columns: 1fr 1fr; /* 2 colunas iguais */
        gap: 1.5vh; /* Espaço pequeno entre estatísticas */
    }

    .stat h1 {
        font-size: 2.5vh;       /* Número bem pequeno */
    }

    .stat span {
        font-size: 1.2vh;       /* Rótulo bem pequeno */
    }

    .btn-sobre,
    .btn-contato {
        padding: 1vh 2.5vh;     /* Preenchimento pequeno */
        font-size: 1.4vh;       /* Fonte pequena */
    }
}