/* Responsividade */
@media (max-width: 1024px) { /* Ajuste para telas de tablet */
    header {
        flex-direction: row;
        justify-content: center; /* Centraliza o logo */
    }
}

/* Ocultar o banner principal em telas de tablet */
@media (max-width: 1024px) {
    .container-banner {
        display: none;
    }
}

/* Ajustar as colunas das imagens para telas menores */
@media (max-width: 768px) {
    .image-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    h2 {
        font-size: 2.5rem; /* Aumenta o tamanho da fonte para telas menores */
        margin-bottom: 25px; /* Ajusta o espaçamento inferior para telas menores */
    }
}

@media (max-width: 768px) {
    .header-container {
        flex-direction: column;
        align-items: center;
    }

    .nav-menu {
        display: none;
        position: fixed; /* Altere para fixed para posicionar em relação à viewport */
        top: 0; /* Posicione no topo da tela */
        right: 0;
        background-color: var(--cor-header-footer);
        flex-direction: column;
        width: 70%; /* Ajuste a largura do menu */
        height: 100%; /* Faça o menu ocupar toda a altura */
        padding: 20px;
        z-index: 1000;
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.3); /* Adicione sombra para destaque */
    }

    .nav-menu.active {
        display: flex;
    }

    .hamburger {
        display: flex;
        position: relative; /* Certifique-se de que o botão esteja posicionado corretamente */
        z-index: 1001; /* Garanta que o botão fique acima do menu */
    }

    .nav-menu ul {
        flex-direction: column;
        gap: 15px;
    }
}

@media (max-width: 480px) {
    h2 {
        font-size: 2.2rem; /* Ajusta o tamanho da fonte para telas muito pequenas */
        margin-bottom: 20px; /* Ajusta o espaçamento inferior para telas muito pequenas */
    }
}

@media (max-width: 480px) {
    .image-row {
        grid-template-columns: 1fr;
    }
}

/* Ajustar layout para telas de celular */
@media (max-width: 480px) {
    .container {
        padding: 0 10px;
    }

    .header-container {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .content-image {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .content-full {
        margin-right: 0;
    }

    .image {
        margin-top: 20px;
    }

    .image-row {
        grid-template-columns: 1fr;
    }

    .medida-container {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .medida-text {
        text-align: center;
    }

    .hover-images {
        flex-direction: column;
        gap: 20px;
    }

    .footer-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-section {
        margin: 10px 0;
    }
}

/* Responsividade para telas de tablet */
@media (max-width: 1024px) {
    .header-container {
        flex-direction: column; /* Alinha os elementos verticalmente */
        align-items: center;
        gap: 20px; /* Espaçamento entre logo e menu */
    }
}

/* Exibir o menu normal e ocultar o menu hambúrguer em telas grandes */
@media (min-width: 1025px) {
    .nav-menu {
        display: flex;
        position: static;
        flex-direction: row;
        background-color: transparent;
        padding: 0;
    }

    .nav-menu ul {
        flex-direction: row;
        gap: 60px;
    }
}