/* Estrutura base */
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
video {
    z-index: 50;
}

/* ESTILIZAÇÃO DA NAVBAR */
.navbar {
  background-color: black; /* Cor da barra do Navbar*/
  position: fixed;
  top: 0;
  width: 100%;
  height: 38px;
  z-index: 100;
 }

.navbar a {
  float: left;
  display: block;
  color: white; /* Cor da Fonte do link*/
  text-align: center;
  padding: 9px 5px;
  text-decoration: none;
  font-size: 18px;
  font-family: none;
  min-width: 70px;
}

.navbar a:hover {
 background-color: white;
  color: aqua;
}

.navbar .float-right {
   float: right;
}

.dropdown {
  position: relative;
  display: inline-block; /* alterado de "block" para "inline-block" */

}

.dropdown-content {
  display: none;
  position: absolute;
  color: black;
  background-color: aqua;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropbtn {
  background-color: inherit;
  border: none;
  cursor: pointer;
}

.dropdown-content a {
  color: black;
}

.dropdown-content a:hover {
  background-color: white;
  color: aqua;
}

/* Ajuste específico para a imagem hero */
.hero {
  position: relative;
  top: 0px; /* Espaço para a navbar */
  margin-left: 10px;
  color: white;
  font-size: 24px;
  text-shadow: -1px 0 deepskyblue, 0 1px deepskyblue, 1px 0 deepskyblue, 0 -1px deepskyblue;
  /* Removido position: absolute */


}

.hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  color: white;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  position: relative;
  display: inline-block;
  padding: 20px 40px;
  margin-bottom: 10px;

  /* Efeito de vidro */
  background: rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* Borda luminosa */
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;

  /* Sombra sutil */
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

  /* Efeito de brilho no hover */
  transition: all 0.3s ease;
}

.hero h1:hover {
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
}

.hero h2 {
  font-size: clamp(2.46rem, 1vw, 4.4rem);
  width: fit-content;
  color: white;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  position: relative;
  display: inline-block;
  padding: 20px 40px;
  margin-top: -20px;
  margin-bottom: 30px;

  /* Efeito de vidro */
  background: rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* Borda luminosa */
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;

  /* Sombra sutil */
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

  /* Efeito de brilho no hover */
  transition: all 0.3s ease;
}

.hero h2:hover {
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
}

.hero h3 {
  font-size: clamp(2.46rem, 1vw, 4.4rem);
  width: fit-content;
  color: white;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  position: relative;
  display: block;
  padding: 20px 40px;
  margin-top: -20px;
  margin-bottom: 30px;

  /* Efeito de vidro */
  background: rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* Borda luminosa */
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;

  /* Sombra sutil */
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

  /* Efeito de brilho no hover */
  transition: all 0.3s ease;
}

.hero h3:hover {
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
}

.escolas-parceiras {
  display: flex;
  gap: 24px; /* Espaço entre as imagens */
  justify-content: center; /* Centraliza as imagens */
  margin-top: 20px;
  margin-bottom: -10px;
}

/*Efeito hover nas imagens das escolas parceiras */
.escolas-parceiras img {
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.escolas-parceiras img:hover {
  transform: scale(1.12);
  box-shadow: 0 0 16px 4px rgba(0,0,0,0.25);
  border-color: #fff;
}

.hero .ro img {
  z-index: 2;
  position: relative;
  width: 270px; /* Tamanho fixo igual aos iframes */
  height: auto; /* Mantém proporção */
  margin-left: 0; /* Centralizado */
  margin-top: 10px;
  margin-bottom: 50px;/* Espaço após o hero */
  /* Mantenha seus outros estilos do hero */
  padding: 0;
  display: block; /* Para melhor controle */
}
.videos {
  position: relative;
  margin: 0 0 0 10px; /* top right bottom left */
  padding-top: 0px; /* Espaço extra se necessário */
  color: black;
}


.video-container {
  border: 9px solid white;
  position: fixed;
  top: 80px;
  right: 20px;
  width: 700px;
  height: 400px;
  border-radius: 40px;
  overflow: hidden;
  background: white;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 1);
  animation: slideUp 4.5s ease-in-out forwards;
  transform: translateY(100vh);
  padding: 0;
  box-sizing: border-box;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-container iframe {
  margin: 0;
  padding: 0;
  border: none;
  width: 103%; /* Ligeiramente menor que o container */
  height: 103%; /* Ligeiramente menor que o container */
  border-radius: 20px;
  z-index: 50;
  background: white;
}

  @keyframes slideUp {
    0% {
        transform: translateY(100vh); /* Começa totalmente abaixo da tela */
    }
    20% {
        transform: translateY(80vh); /* Adicionado ponto intermediário para suavizar */
    }
    60% {
        transform: translateY(40vh); /* Adicionado outro ponto intermediário */
    }
    100% {
        transform: translateY(0); /* Termina na posição final */
    }
  }



	/* ESTILIZAÇÃO DO BACKGROUND */
.background {
	   display:grid;
	    place-items:center center ;
	    position: fixed;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%)

}
.bgcircle{

	z-index: -3;
    height: 1900px;
	width: 1900px;
    background: repeating-conic-gradient(aqua 0deg  10deg ,DeepSkyBlue 10deg 20deg) ;
	border-radius: 100%;
	animation: spin 10s infinite linear ;
	position:fixed;

}

.bgcircle2 {

	z-index:-2;
	height: 350px;
    width: 350px;
    background-image: linear-gradient(to bottom right, deepskyblue, aqua);
    border-radius: 100%;
	color: white;
    align-items: center;
    justify-content: center;
	position: fixed;

}

.bgcircle3 {

	z-index:-1;
	height: 440px;
    width: 440px;
    background-color: aquamarine;
    border-radius: 100%;
    align-items: center;
    justify-content: center;
	position: absolute;
	opacity:25%;
}
.front-name{
	z-index:3;
	color: white;
	font-family: 'MuseoModerno', cursive;
	font-size:57px;
  font-weight: bold;
	text-align:center;
	position:absolute;

	}

.minirobg img {
	z-index: 3;
	position: relative;
	width: 180px;
	bottom: 70px;

}


@keyframes spin {
  from{transform:rotate(0deg)}
	to{transform:rotate(360deg)}
}


iframe.iframe-video {
                padding:0;
                display: inline-block;
                border: 5px solid white;
                /*webkit-border-radius: 20px;
                -moz-border-radius: 20px;*/
                border-radius: 20px;
                width:288px;
                height:162px;
                margin-right:9px ;
                margin-bottom: 9px;
                overflow:hidden;
                position: relative;
                opacity: 1;

               }

iframe.iframe-facebook {
                padding:0;
                display: inline-block;
                border: 5px solid white !important;
                border-radius: 20px;
                margin-top: 0px;
                margin-bottom: 20px;
                overflow: hidden;
                border-radius: 20px;
                display: block;


               }

.videos p {
    margin: 0;
    color:black;
    text-shadow: white;
    font-size: 1.8vw;
}




.footer {
  z-index: 1000;
  position: fixed;
  bottom: 0;
  width: 100%;
  background: rgba(128, 128, 128, 0.85);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  text-align: center;
  color: white;
  padding: 12px;
  font-family: 'MuseoModerno', sans-serif;
  font-weight: 300;
  letter-spacing: 0.5px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

@media (max-width:2400px) {
  .bgcircle{

    z-index: -3;
    height: 2400px;
    width: 2400px;
    background: repeating-conic-gradient(aqua 0deg  10deg ,DeepSkyBlue 10deg 20deg) ;
    border-radius: 100%;
    animation: spin 10s infinite linear ;
    position:fixed;

  }
}


/* Settings para LapTops */
@media (max-width: 1280px) {
  .hero {
    top: 20px; 
  }
  .hero h1 {
    font-size: clamp(3.5rem, 4vw, 3rem);
    }
  iframe.iframe-facebook {    
    margin-top: 20px;
   }
  
   .video-container {
    position: fixed;
    top: 50px;
    width: 458px;
    height: 266px;
    left: 750px;
  }

   
}

/* Settings para tablets Landscape*/
@media (max-width: 960px) {
  .hero {
    top: 20px; 
  }
  .hero h1 {
    font-size: clamp(2rem, 3vw, 3rem);
    }
  iframe.iframe-facebook {    
    margin-top: 20px;
   }
  
   .video-container {
    position: fixed;
    top: 45px;
    width: 313px;
    height: 179px;
    left: 640px;
  }

   
}


/* Settings para tablets Portrait*/
@media (max-width: 600px) {
  .hero {
    top: 20px; 
  }
  iframe.iframe-facebook {    
    margin-top: 20px;
   }
  
  .video-container {
    position: relative;
    top: 30px;
    width: 580px;
    height: 325px;
    left: 10px;
  }

  .video-container iframe {
    width: 103%; /* Ligeiramente menor que o container */
    height: 103%; /* Ligeiramente menor que o container */
    border-radius: 20px;
   
  }
 
}


/* Settings para celulares */
@media (max-width: 385px) {
  .hero {
    top: 20px; 
  }
  iframe.iframe-facebook {    
    margin-top: 20px;
   }
  
  .video-container {
    position: relative;
    top: 30px;
    width: 365px;
    height: 207px;
    left: 10px;
  }
  .video-container iframe {
    width: 103%; 
    height: 103%; 
    border-radius: 20px;

      
  }
 
  .hero h1 {
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  }

  .hero h2 {
    font-size: clamp(1.5rem, 6vw, 4rem);   
  }

  iframe.iframe-facebook {
    padding: 0;
    border: 5px solid white !important;
    border-radius: 20px;
    overflow: hidden;
    display: block;
    transform: scale(0.6);
    transform-origin: top left;
    
    /* Remova qualquer definição de height que esteja achatando o conteúdo */
    /* height: auto; ou remova completamente */
    
    /* Importante: cria um wrapper que controla o espaço real no layout */
    position: relative;
    z-index: 1;
    margin-bottom: -20vw; /* Valor negativo para compensar o espaço extra */
  }

.footer {
  z-index: 1000;
  position: fixed;
  bottom: 0;
  width: 100%;
  background: rgba(128, 128, 128, 0.85);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  text-align: center;
  color: white;
  padding: 12px;
  font-size: 0.8rem; /* Tamanho da fonte ajustado para dispositivos menores */
  font-family: 'MuseoModerno', sans-serif;
  font-weight: 300;
  font-display: swap;
  letter-spacing: 0.5px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

}