/* =========================================
   ESTILOS DA PÁGINA "CONTACTOS"
========================================= */

/* O banner do topo */
.banner-estatico {
    width: 100%;
    background: #000;
    display: block;
}

.banner-img-top {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* =========================================
   SEÇÃO DOS ÍCONES GIGANTES
========================================= */
.contact-section {
    padding: 100px 0; /* Dá espaço em cima e embaixo para respirar */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 40vh; /* Garante que os ícones fiquem centralizados na tela */
    
    /* Se quiser colocar aquela textura de hexágonos no fundo depois, 
       é só salvar a imagem como bg-hex.png e tirar o /* desta linha: */
    /* background-image: url('../img/bg-hex.png'); */
    background-size: cover;
    background-position: center;
}

.contact-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px; /* Distância entre os ícones */
    flex-wrap: wrap; /* Faz os ícones descerem para outra linha no celular */
}

/* Os ícones propriamente ditos */
.big-social-icon {
    width: 160px; /* Tamanho bem grande */
    height: auto;
    transition: transform 0.3s ease; /* Transição suave para o efeito do mouse */
    cursor: pointer;
}

/* Efeito ao passar o mouse: o ícone dá um leve "pulo" */
.big-social-icon:hover {
    transform: scale(1.1);
}

/* =========================================
   RESPONSIVIDADE (CELULARES)
========================================= */
@media (max-width: 768px) {
    .contact-icons {
        gap: 30px;
    }
    
    .big-social-icon {
        width: 110px; /* Reduz um pouco no celular para não quebrar a tela */
    }
}