header{
    background: #dee0e2;
    display: flex;
    justify-content: space-between;
    align-items: center;    
}

.logo img{
    width: 100px;
    height: 100px;
    border-radius: 8px;
    border: 4px solid #004798;
    margin: 5px;
}

nav{
    background: #004798;
    padding: 10px;
    margin: 10px;
    border-radius: 5px;
}

body{
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
    text-align: center;
}

header nav a{
    padding: 10px 20px;
    color: white;
    text-decoration: none;
}

header nav a:hover{
    background: #0172f4;
    color: white;
    text-decoration: none;
    cursor: pointer;
}

.container{
    background: #ffffff;
    display: flex;          
    flex: 1;
    justify-content: center; /* Alinha os cards no centro horizontalmente */
    align-items: center; /* Alinha os cards no centro verticalmente */
    flex-direction: column; /* muda para coluna quando a tela for menor que 768px */
    padding: 50px;
}

.card{
    background: #ffffff;
    border: 2px solid #7c7c7c;
    border-radius: 5px;
    width: 350px;
    margin: 10px;
    padding: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    text-align: center;
}

.imagem{
    background: #ffffff;
    border-radius: 10px;
    width: 250px;
    height: 200px;
    display: flex;
    align-items: center;
}

.imagem img{
    width: 250px;
    height: 200px;
    object-fit: cover;   /* mantém proporção sem distorcer */
    display: block;
}

.divBotao{
    width: 60%; /* O botão oOcupa 60% do tamanho da div */
    border-radius: 6px; /* Borda do botão */
    display: flex;
    margin: 0 auto; /* Centralizando os botões na div */
    margin-top: auto; /* Empurra o botão para o fim da div */   
    box-shadow: 2px 2px 5px #7c7c7c;  
}

.divBotao button{
    padding: 8px;
    width: 100%;
    border-radius: 6px;
    border: none;
    box-sizing: border-box;
    cursor: pointer;  
    font-size: 1.1em;   
    font-weight: bold;
}

.divBotao button:hover{
    background: #0172f4;
    color: #ffffff;
}

footer{
    background: #00013c;
    padding-top: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #ffffff;
}

.redes{
    background: #bd38ff;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    margin: 10px;
    cursor: pointer;
    text-decoration: none;
}

/* TABLET e acima de 768px */
@media (min-width: 768px){
    .container{
        display: flex;
        flex-direction: row; /* muda para linha */
        flex-wrap: wrap;  /* quebra linha se não couber tudo */
        gap: 20px; /* espaçamento entre cards */
    }
}

/* DESKTOP e acima de 1024px */
@media (min-width: 1024px){
    .container{
        flex-direction: row; /* muda para linha */
        flex-wrap: wrap;  /* quebra linha se não couber tudo */
    }
    .card{
        flex: 1;
    }
}