body {
    background-image: url('images/fundopadel.jpg');
    background-size: cover;
    background-position: center;
    font-family: 'Arial', sans-serif;
    margin: 0;
    display: flex;
    flex-direction: column;  /* Coloca os elementos em coluna */
    align-items: center;
    min-height: 100vh;  /* Usa min-height em vez de height */
    text-align: center;
    color: #fff;
}

header {
    display: flex;
    align-items: center;
    justify-content: center;  /* Centraliza o conteúdo horizontalmente */
    width: 100%;
    max-width: 800px;  /* Limita a largura máxima */
    padding: 20px;
    position: relative;  /* Necessário para posicionamento do menu */
}

.header-content {
    display: flex;
    align-items: center;
}

.logo {
    height: 100%;  /* A altura será ajustada pela altura do pai, que é o header */
    max-height: 3em;  /* Altura máxima do logotipo */
    margin-right: 20px;  /* Adiciona espaço entre o logo e o título */
}

.menu {
    position: absolute;
    left: 20px;  /* Alinha o menu à esquerda */
    top: 20px;
}

.menu-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5em;
    cursor: pointer;
}

.menu-list {
    list-style: none;
    padding: 10px;  /* Adiciona espaçamento interno */
    margin: 0;
    display: none;  /* Esconde a lista por padrão */
    position: absolute;
    top: 40px;  /* Ajusta a posição da lista */
    left: 0;  /* Garante que o menu abra em continuidade com o botão */
    background-color: #000;  /* Fundo sólido preto */
    border-radius: 5px;
    min-width: 200px;  /* Define uma largura mínima para o menu */
    z-index: 10;  /* Garante que o menu fique acima dos outros elementos */
    margin-left: -10px;  /* Ajusta a posição para alinhar com o botão */
}

.menu-list.show {
    display: block;  /* Mostra a lista quando a classe "show" é adicionada */
}

.menu-list li {
    margin-top: 10px;
    padding: 5px 10px;
    width: 100%;  /* Garante que as opções ocupem toda a largura do menu */
}

.menu-list li a {
    text-decoration: none;
    color: #fff;
    font-size: 1.2em;
    display: block;  /* Garante que os links ocupem toda a largura do item */
    text-align: left;  /* Alinha o texto à esquerda */
}

.menu-list li a:hover {
    text-decoration: underline;
}

h1 {
    font-size: 3em;
    margin: 0;
    line-height: 1em;  /* A altura da linha será igual ao tamanho da fonte */
}

h2 {
    font-size: 1em;
    margin: 10;
    line-height: 1em;  /* A altura da linha será igual ao tamanho da fonte */
}

.iframe-individualano {
    border: 5px solid #fff;
    border-radius: 10px;
    opacity: 0.8;
    width: 90vw;  /* Utiliza 90% da largura da viewport */
    max-width: 625px; /* Limita a largura máxima */
    height: 410px; /* Mantém a altura fixa específica */
    margin-bottom: 20px; /* Adiciona espaço abaixo do iframe */
}

.iframe-totaltrimestre {
    border: 5px solid #fff;
    border-radius: 10px;
    opacity: 0.8;
    width: 90vw;  /* Utiliza 90% da largura da viewport */
    max-width: 690px; /* Limita a largura máxima */
    height: 510px; /* Mantém a altura fixa específica */
    margin-bottom: 20px; /* Adiciona espaço abaixo do iframe */
}

.iframe-individualtrimestre {
    border: 5px solid #fff;
    border-radius: 10px;
    opacity: 0.8;
    width: 90vw;  /* Utiliza 90% da largura da viewport */
    max-width: 625px; /* Limita a largura máxima */
    height: 765px; /* Mantém a altura fixa específica */
    margin-bottom: 20px; /* Adiciona espaço abaixo do iframe */
}

.iframe-equipasano {
    border: 5px solid #fff;
    border-radius: 10px;
    opacity: 0.8;
    width: 90vw;  /* Utiliza 90% da largura da viewport */
    max-width: 625px; /* Limita a largura máxima */
    height: 610px; /* Mantém a altura fixa específica */
    margin-bottom: 20px; /* Adiciona espaço abaixo do iframe */
}

.iframe-equipastrimestre {
    border: 5px solid #fff;
    border-radius: 10px;
    opacity: 0.8;
    width: 90vw;  /* Utiliza 90% da largura da viewport */
    max-width: 625px; /* Limita a largura máxima */
    height: 1170px; /* Mantém a altura fixa específica */
    margin-bottom: 20px; /* Adiciona espaço abaixo do iframe */
}

.iframe-jogos {
    border: 5px solid #fff;
    border-radius: 10px;
    opacity: 0.8;
    width: 90vw;  /* Utiliza 90% da largura da viewport */
    max-width: 625px; /* Limita a largura máxima */
    height: 750px; /* Mantém a altura fixa específica */
    margin-bottom: 20px; /* Adiciona espaço abaixo do iframe */
}

footer {
    margin-top: auto;  /* Empurra o rodapé para o final da página */
    padding: 10px;
    color: #ffffff;
    width: 100%;
    text-align: center;
}

.location-container {
    display: flex;
    align-items: flex-start;  /* Alinha os itens ao início do contêiner */
    justify-content: space-between;  /* Distribui os itens uniformemente */
    margin-top: 20px;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 20px;
    border-radius: 10px;
    max-width: 600px;  /* Define a largura máxima da div */
    box-sizing: border-box;
}

.location-containermaps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-top: 20px;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 20px;
    border-radius: 10px;
    max-width: 600px; /* Largura máxima de 600px */
    width: 100%; /* Ocupa toda a largura disponível */
    box-sizing: border-box; /* Inclui padding e border na largura total */
}


.location-info {
    text-align: left;
    flex: 1;
    max-width: 250px;
}

.location-maps {
    text-align: left;
    flex: 1;
    max-width: 100%; /* Garante que ocupe toda a largura do contêiner pai */
}


.location-info p {
    margin: 5px 0;
    max-width: 250px;
}

.location-maps p {
    margin: 5px 0;
    max-width: 580px;
}

.image-container {
    margin-top: 10px;
    display: flex;
    justify-content: center;
}

.image-maps {
    margin-top: 20px;
    display: flex;
    justify-content: center; /* Centraliza a imagem horizontalmente */
}

.image-maps a {
    display: flex;
    justify-content: center; /* Centraliza a imagem horizontalmente */
}

.image-maps img {
    max-width: 75%; /* Ajusta a largura máxima da imagem */
    height: auto; /* Mantém a proporção da imagem */
    border-radius: 10px; /* Adiciona bordas arredondadas */
}

.location-info img {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    max-height: 160px;
    max-width: 250px;
    border-radius: 10px;
}

.iframe {
    flex: 1;
    max-width: 300px;
    height: 225px;
    margin-left: 20px;  /* Adiciona espaço entre o texto/imagem e o iframe */
    border-radius: 10px;
}

/* Estilos dos Links Úteis */
.useful-links {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
}

.useful-links h2 {
    font-size: 1.5em;
    margin-bottom: 20px;
}

.link-card {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 10px;
    border-radius: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
    text-align: center;
}

.link-card h3 {
    font-size: 1.5em;
    margin-top: 5px;
    margin-bottom: 10px;
}

.link-card p {
    margin: 0;
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    margin-right: 5px 0;
    color: #fff;
    background-color: #005fc5;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1.2em;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #0056b3;
}

/* 1. Secção dentro de main com 600px de largura */
.news-container {
    max-width: 600px;
    margin: 0 auto;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

/* 2. Alinhar título e texto à esquerda */
.news-info h2,
.news-info p {
    text-align: left;
}

/* 3. Centralizar imagem e ajustá-la à largura da secção, mantendo a proporção */
.newsimage-container img {
    display: block;
    margin: 10px auto;
    max-width: 100%;
    height: auto;
    cursor: pointer;
    border-radius: 10px;
}

/* 4. Aumentar a imagem para o tamanho da janela em desktop */
.newsimage-container img.expanded {
    width: auto;
    height: auto;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    border-radius: 10px;
}

/* Sobreposição escurecida */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999;
    display: none;
}

/* Exibir sobreposição quando a imagem estiver expandida */
.overlay.show {
    display: block;
}

/* Media Query para dispositivos móveis */
@media (max-width: 768px) {
    h1 {
        font-size: 2em;
    }

    .iframe-individualano {
        border: 5px solid #fff;
        border-radius: 10px;
        opacity: 0.8;
        width: 90vw;  /* Utiliza 90% da largura da viewport */
        max-width: 625px; /* Limita a largura máxima */
        height: 410px; /* Mantém a altura fixa específica */
        margin-bottom: 20px; /* Adiciona espaço abaixo do iframe */
    }

    .iframe-totaltrimestre {
        border: 5px solid #fff;
        border-radius: 10px;
        opacity: 0.8;
        width: 90vw;  /* Utiliza 90% da largura da viewport */
        max-width: 690px; /* Limita a largura máxima */
        height: 510px; /* Mantém a altura fixa específica */
        margin-bottom: 20px; /* Adiciona espaço abaixo do iframe */
    }
    
    .iframe-individualtrimestre {
        border: 5px solid #fff;
        border-radius: 10px;
        opacity: 0.8;
        width: 90vw;  /* Utiliza 90% da largura da viewport */
        max-width: 625px; /* Limita a largura máxima */
        height: 765px; /* Mantém a altura fixa específica */
        margin-bottom: 20px; /* Adiciona espaço abaixo do iframe */
    }
    
    .iframe-equipasano {
        border: 5px solid #fff;
        border-radius: 10px;
        opacity: 0.8;
        width: 90vw;  /* Utiliza 90% da largura da viewport */
        max-width: 625px; /* Limita a largura máxima */
        height: 610px; /* Mantém a altura fixa específica */
        margin-bottom: 20px; /* Adiciona espaço abaixo do iframe */
    }
    
    .iframe-equipastrimestre {
        border: 5px solid #fff;
        border-radius: 10px;
        opacity: 0.8;
        width: 90vw;  /* Utiliza 90% da largura da viewport */
        max-width: 625px; /* Limita a largura máxima */
        height: 1170px; /* Mantém a altura fixa específica */
        margin-bottom: 20px; /* Adiciona espaço abaixo do iframe */
    }
    
    .iframe-jogos {
        border: 5px solid #fff;
        border-radius: 10px;
        opacity: 0.8;
        width: 90vw;  /* Utiliza 90% da largura da viewport */
        max-width: 625px; /* Limita a largura máxima */
        height: 750px; /* Mantém a altura fixa específica */
        margin-bottom: 20px; /* Adiciona espaço abaixo do iframe */
    }

    .logo {
        max-height: 2em;  /* Ajusta a altura máxima do logotipo em telas menores */
    }
    
    .location-container {
        flex-direction: column;  /* Alinha os elementos em coluna */
        align-items: flex-start;  /* Alinha os itens ao início do contêiner */
    }

    .location-containermaps {
        flex-direction: column;  /* Alinha os elementos em coluna */
        align-items: flex-start;  /* Alinha os itens ao início do contêiner */
    }

    .location-info {
        margin: 0 0 10px 0;
        max-height: none;
        max-width: 260px;
    }

    .location-maps {
        margin: 0 0 10px 0;
        max-height: none;
        max-width: 260px;
    }

    .location-maps p {
        margin: 5px 0;
        max-width: 260px;
        margin-bottom: 10px;
    }

    .image-container {
        margin-top: 10px;
        margin-bottom: 10px;  /* Adiciona margem acima e abaixo da imagem */
    }

    .image-maps {
        margin-top: 10px;
    }

    .location-info img {
        max-width: 260px;
    }

    .image-maps img {
        max-width: 260px;
        margin-top: 10px;
    }

    .iframe {
        width: 100%;
        margin: 10px 0;  /* Adiciona margem acima e abaixo do iframe */
        max-width: 260px;
    }
    
    .useful-links {
        max-width: 260px;
    }

    .btn {
        margin-bottom: 10px;
    }

    .news-container {
        max-width: 90%; /* Limita a largura do container a 90% da viewport */
        padding: 10px; /* Ajusta o padding para dispositivos móveis */
        margin-bottom: 20px;
    }

    .news-info {
        margin: 0 auto; /* Centraliza o conteúdo dentro do container */
    }

    /* Se houver um campo específico dentro do container, ajustá-lo assim */
    .news-container input {
        max-width: 100%; /* Garante que o campo ocupe até 100% da largura do container */
    }

    .newsimage-container img {
        display: block;
        margin: 10px auto;
        max-width: 100%;
        height: auto;
        cursor: pointer;
        border-radius: 10px;
    }

}