body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #717376;
}

nav {
    background-color: black;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    height: 12.22vh;
    /* 1/6 da altura da página */
}

.logo {
    height: 50%;
    /* Aumenta para o tamanho da barra de navegação */
    margin-right: 20px;
}

nav ul {
    list-style: none;
    padding: 0;
    margin-left: auto;
    display: flex;
    gap: 15px;
}

nav ul li a {
    color: #717376;
    text-decoration: none;
}

.carousel {
    overflow: hidden;
    width: 100vw;
    /* Toda a largura da tela */
    height: calc(100vh - 12.22vh);
    /* Ajusta dinamicamente entre o nav e o fim da tela */
    display: flex;
    align-items: center;
    /* Centraliza o carrossel verticalmente */
    justify-content: center;
    position: relative;
}

.carousel-container {
    display: flex;
    transition: transform 0.2s linear;
    /* Suaviza a transição */
    gap: 2px;
}

.carousel-container img {
    width: 25vw;
    flex-shrink: 0;
    height: auto;
}

.contactos {
    width: 100%;
    margin: 0 auto;
    height: 15vh;
    opacity: 1;
    background-position: center center;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 2.5vw;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapperr {
    width: 100%;
    height: calc(100vh - 80vh); /* Substitui 60px pela altura real da navbar */
    margin: 0 auto;
    opacity: 1;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 1.2vw;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapperr a:link,
a:visited,
a:active {
    color: black;
    font-style: underline;
}

/* mouse over link */
.wrapperr a:hover {
    font: black;
    font-weight: bold;
}


.container {
    display: flex;
    align-items: stretch; /* Faz com que os elementos tenham a mesma altura */
    justify-content: center;
    gap: 20px; /* Espaço entre colunas */
    flex-wrap: wrap; /* Permite que os elementos se ajustem em telas menores */
}

.column {
    width: 45%;
    max-width: 400px; /* Define uma largura máxima para evitar que ultrapasse a margem */
    padding: 20px;
    text-align: justify; /* Justifica o texto */
}

/* Ajusta a altura do divisor para acompanhar o conteúdo */
.divider {
    width: 2px;
    background-color: black;
    align-self: stretch; /* Faz com que o divisor acompanhe a altura do maior conteúdo */
}

/* Responsividade para telas menores */
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* Empilha os elementos verticalmente */
        align-items: center; /* Centraliza os elementos */
    }

    .column {
        width: 90%; /* Ajusta a largura para ocupar mais espaço */
        max-width: none; /* Remove a limitação de largura */
    }

    .divider {
        width: 90%; /* Faz a linha preta horizontal em telas menores */
        height: 2px; /* Ajusta para ser uma linha horizontal */
    }
}