.logo{
    width: 25vh;
    margin-left: 10%;
 }
 
 
 header {
     background-color: #30709b;
     padding: 20px 0;
 }
 
 .header-container {
     max-width: 1200px;
     margin: 0 auto;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
.header-container h1 {
    color: #fff;
    font-size: 24px;
}
 header h1 {
     color: #00447c;    
     margin: 0;
 }
 
 nav ul {
     list-style: none;
     display: flex;
     gap: 15px;
     margin: 0;
     padding: 0;
 }
 
 nav ul li a {
     color: #fff;
     text-decoration: none;
     padding: 8px 15px;
     border-radius: 5px;
 }
 
 nav ul li a:hover {
     background-color: #d18228;
     color: #ffffff;
 }
 body {
    text-align: center;
    background: linear-gradient(0, #d0952e 20%, #0099ff 70%);
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
    padding: 0;
    margin-bottom: 10vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
div {
    display: block;
    unicode-bidi: isolate;
}
#menu-button {
    background: none;
    border: none;
    cursor: pointer;
    display: none; /* Esconde o botão por padrão */
    padding: 10px;
  }
  
  .menu-line {
    background-color: #fff;
    display: block;
    height: 2px;
    margin: 5px 0;
    width: 25px;
  }
  
  /* Esconde o menu inicialmente */
  #menu {
    display: flex; /* Mantém o menu visível em telas grandes */
    gap: 15px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  /* Mostra o botão e esconde o menu APENAS em telas pequenas */
  @media (max-width: 768px) {
    .card {
        width: 46%; /* Largura dos cards em telas médias */
    }
    .card video {
      width: 100%; 
      height: auto;
      border-radius: 10px; 
    }
    #menu { 
      display: none;
      flex-direction: column; 
      position: absolute;
      top: 20%; 
      right: 10px;
      background-color: #000000;
      padding: 10px;
      border-radius: 5px;
    }
  
    #menu.show {
      display: flex; 
    }
  
    #menu-button {
      display: block;
    }
  
    nav ul li a {
      display: block; 
      padding: 10px;
      margin: 5px 0;
      border-radius: 0;
    }
  }
  @media (max-width: 480px) {
    .card {
      width: 100%; /* Largura dos cards em telas pequenas */
    }
    .card video {
      width: 100%; 
      height: auto;
      border-radius: 10px; 
    }
  }
.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
footer {
    background: #30709b;
    color: rgb(255, 255, 255);
    padding: 15px 0;
    text-align: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.3);
}
@media (min-width: 768px){
  .card{
    width: 25%;
  }
  .card video {
    width: 100%; 
    height: auto;
    border-radius: 10px; 
  }
}