body {
    font-family: "Raleway", sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
}

.image-container {
    position: relative;
}
.image-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 5s ease infinite;
  opacity: 0.5;
  z-index: -1; /* Coloca o overlay atrás do vídeo */
}

.image-container img {
    max-width: 100%;
    height: auto;
    display: block;
}

.gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 5s ease infinite;
    opacity: 0.5;

}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

  
header.logo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding-left: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 100;
    overflow: hidden; /* Garante que o conteúdo não ultrapasse o header */
    backdrop-filter: blur(10px); /* Adiciona um desfoque ao header */
}
header.logo::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: inherit; /* Mantém a cor de fundo do header */
  filter: blur(10px); /* Adiciona um desfoque ao pseudo-elemento */
  z-index: -1; /* Coloca o pseudo-elemento atrás do conteúdo */
}
header.logo img {
    height: auto;
    max-width: 200px;
}

footer.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    border-top: 1px solid #ddd;
    text-align: center;
    backdrop-filter: blur(10px);
    
}

footer.footer p {
    margin-bottom: 10px;
}

.container {
    text-align: center;
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    
}
.container2 {
    color: #ffffff;
    margin: 0 auto;
    text-align: center;
  }

.breve {
    color: #ffffff;
    font-size: 6vw;
    font-weight: 500;
    margin: 0;
    padding: 0;
}

.subtitulo {
    color: #ffffff;
    font-size: 1.5vw;
    margin: 0;
}

img {
    max-width: 100%;
    height: auto;
}

.contact-info{
  color: white;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  align-content: stretch;
  justify-content: space-around;
}

.imagemfundo{
  height: 15vw;
}

.videofundo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Isso irá garantir que o vídeo cubra completamente o contêiner */
  z-index: -1; /* Coloca o vídeo atrás do conteúdo */
}

.imagemlogo{
  height: 20vw;
}

/* Adicione este bloco de estilo ao seu arquivo CSS existente */

.social-icons {
  position: fixed;
  /* bottom: 20px; */
  right: 20px;
  display: flex;
  gap: 10px;
  flex-direction: column;
}

.social-icons a {
  color: #ffffff; /* Cor dos ícones, ajuste conforme necessário */
  font-size: 24px; /* Tamanho dos ícones, ajuste conforme necessário */
  text-decoration: none;
}

/* Se quiser adicionar um efeito de hover, você pode usar algo como o seguinte: */
.social-icons a:hover {
  color: #94e582; /* Cor ao passar o mouse, ajuste conforme necessário */
}

li {
    display: inline-block;
    font-size: 1.5em;
    list-style-type: none;
    padding: 1em;
    text-transform: uppercase;
  }
  
  li span {
    display: block;
    font-size: 4.5rem;
  }
  
  .emoji {
    display: none;
    padding: 1rem;
  }
  
  .emoji span {
    font-size: 4rem;
    padding: 0 .5rem;
  }
  
  @media all and (max-width: 768px) {
    h1 {
      font-size: calc(1.5rem * var(--smaller));
    }
    
    li {
      font-size: calc(1.125rem * var(--smaller));
    }
    
    li span {
      font-size: calc(3.375rem * var(--smaller));
    }
  }