@import url('https://fonts.googleapis.com/css?family=Poppins');

/* Estilização do container principal */
.container {
  width: 50%; /* Define a largura inicial do container */
  max-width: 900px; /* Limita a largura máxima */
  margin: 0 auto; /* Centraliza o container */
  padding: 20px;
  font-family: Poppins, Helvetica, Arial, Lucida, sans-serif; /* Mantém a consistência com o menu */
  line-height: 1.6;
}

/* Estilização do vídeo responsivo */
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* Mantém a proporção 16:9 */
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Estilo para telas pequenas (smartphones) */
@media only screen and (max-width: 480px) {
  .container {
    width: 80%; /* Ocupar mais espaço em telas pequenas */
    font-size: 16px; /* Ajusta a fonte para melhor leitura */
  }
}

/* Estilo para tablets */
@media only screen and (min-width: 481px) and (max-width: 768px) {
  .container {
    width: 80%;
    font-size: 17px; /* Fonte intermediária */
  }
}

/* Ajustes para telas maiores (desktop) */
@media only screen and (min-width: 769px) {
  .container {
    width: 70%; /* Permite que o conteúdo ocupe mais espaço */
    max-width: 900px; /* Limita a largura para não ficar muito grande */
    font-size: 18px; /* ou outro valor desejado */
  }

  .video-container {
    max-width: 900px; /* Garante que o vídeo tenha um tamanho adequado no desktop */
    margin: 0 auto; /* Centraliza o vídeo */
  }
}