/* Resets básicos */
body, html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif; /* Usando a fonte Montserrat */
    background-color: #000000; /* Cor de fundo preta */
    color: #ffffff; /* Cor de texto padrão para o corpo, pode ajustar conforme necessário */
}

/* Container principal para centralizar e limitar a largura */
.main-container {
    max-width: 1366px; /* Largura máxima conforme sua estrutura */
    margin: 0 auto; /* Centraliza o container na página */
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza o conteúdo horizontalmente */
}

/* Estilo geral das seções */
.section {
    width: 100%; /* Ocupa a largura total do main-container */
    display: flex;
    justify-content: center; /* Centraliza o conteúdo dentro da seção */
    padding: 0; /* Ajuste se precisar de padding interno na seção */
    margin-bottom: 0; /* Remover espaçamento entre seções se não houver na imagem */
}

/* TOPO */
.topo-section {
    /* Altura baseada na imagem de topo, 1366 x 514 px */
    /* A imagem dentro já tem suas dimensões */
}

.topo-image {
    width: 774.3px; /* Largura conforme especificado */
    height: 805px; /* Altura conforme especificado */
    object-fit: contain; /* Garante que a imagem caiba sem cortar, mantendo proporção */
    max-width: 100%; /* Garante responsividade para telas menores */
    height: auto; /* Mantém a proporção ao redimensionar */
    display: block; /* Remove espaço extra abaixo da imagem */
    margin: 0 auto; /* Centraliza a imagem */
}

/* ÍCONES REDES SOCIAIS */
.social-icons-section {
    /* A altura da seção de ícones na sua imagem é 1366 x 176 px */
    min-height: 176px; /* Garante a altura mínima para o bloco */
    align-items: center; /* Centraliza verticalmente os ícones */
    justify-content: center; /* Centraliza horizontalmente os ícones */
}

.icon-wrapper {
    display: flex;
    gap: 40px; /* Espaço entre os ícones */
    justify-content: center;
    align-items: center;
    padding: 20px 0; /* Pequeno padding vertical para separar de outros blocos */
}

.social-icon {
    width: 90px;
    height: 90px;
    object-fit: contain;
    display: block;
}

/* IMAGENS CLICÁVEIS (BLOCO 2 e BLOCO 3) */
.clickable-image-section {
    /* Altura baseada na imagem, ex: 1366 x 755 px para o primeiro bloco */
    /* A imagem dentro já tem suas dimensões */
}

.clickable-image {
    /* Ajustado para as duas imagens clicáveis */
    max-width: 100%; /* Garante que a imagem se ajuste à largura da tela */
    height: auto; /* Mantém a proporção */
    display: block;
    margin: 0 auto; /* Centraliza a imagem */
}

/* Para a primeira imagem clicável (Bloco 2) */
.section:nth-of-type(3) .clickable-image { /* Seleciona o 3º div.section no body */
    width: 1153px;
    height: 670.9px;
}

/* Para a segunda imagem clicável (Bloco 3) */
.section:nth-of-type(4) .clickable-image { /* Seleciona o 4º div.section no body */
    width: 1083px;
    height: 713.9px;
}


/* RODAPÉ */
.footer-section {
    /* Altura do rodapé na sua imagem: 1366 x 356 px */
    min-height: 356px; /* Garante a altura mínima do bloco */
    flex-direction: column; /* Conteúdo em coluna (texto acima da imagem) */
    justify-content: center; /* Centraliza o conteúdo verticalmente */
    align-items: center; /* Centraliza o conteúdo horizontalmente */
    text-align: center;
    padding-top: 30px; /* Espaço acima do texto */
    padding-bottom: 30px; /* Espaço abaixo da imagem */
}

.footer-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 20px;
    color: #ffffff; /* Cor branca para o texto do rodapé */
    margin-bottom: 20px; /* Espaço entre o texto e a imagem do rodapé */
}

.footer-image {
    width: 594px;
    height: 176px;
    object-fit: contain;
    max-width: 100%; /* Garante responsividade */
    height: auto; /* Mantém a proporção */
    display: block;
    margin: 0 auto;
}

/* Media Queries para Responsividade (ajustes para telas menores, como celulares) */
@media (max-width: 768px) {
    .topo-image,
    .section:nth-of-type(3) .clickable-image,
    .section:nth-of-type(4) .clickable-image,
    .footer-image {
        /* Todas as imagens grandes devem ser 100% da largura do container em telas menores */
        width: 100% !important; /* !important para garantir a sobreposição das regras específicas */
        height: auto !important; /* Mantém proporção */
    }

    .social-icon {
        width: 70px; /* Reduz um pouco o tamanho dos ícones em telas menores */
        height: 70px;
    }

    .icon-wrapper {
        gap: 20px; /* Reduz o espaço entre os ícones em telas menores */
    }

    .footer-text {
        font-size: 16px; /* Reduz o tamanho da fonte em telas menores */
    }

    .container {
        padding: 15px; /* Reduz o padding geral em telas menores */
    }
}