@import url('https://fonts.googleapis.com/css2?family=Alan+Sans:wght@300..900&family=Oswald:wght@200..700&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

#conteudo-telas-grande{
   display: none;
}

*{
   padding: 0;
   margin: 0;
   color: aliceblue;
   font-family: "Work Sans", sans-serif;
   font-weight: normal;
   box-sizing: border-box;
}

a {
  /* Remove o sublinhado padrão */
  text-decoration: none;
  /* Garante que a cor do link seja definida explicitamente no projeto */
  color: inherit; /* Ou defina uma cor padrão como var(--color-link) */
  /* Remove o "tap highlight" no mobile (opcional) */
  -webkit-tap-highlight-color: transparent;
}

html, body{
   background: #000;
   scroll-behavior: auto;
   scroll-behavior: smooth;
}

i{
   background-color: transparent;
}

main{
   overflow: hidden;
   position: relative;
   opacity: 0;
}

#tela-de-loading{
   z-index: 100;
   overflow: hidden;
   position: fixed;
   width: 100%;
   height: 100vh;
   background-color: black;

   top: 0;
   left: 0;

   display: flex;
   align-items: center;
   justify-content: center;
   gap: 35px;

}

#tela-de-loading .loading-conteudo{
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 400px;

}

#tela-de-loading .loading-conteudo img{
   margin-bottom: 35px;
}

#tela-de-loading .loading-conteudo .box-spin{

   width: 100px;
   height: 100px;
   background-color: #FFCA00;
   overflow: hidden;

   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

.box-container-ajuste-max-width{
   max-width: 600px;
   margin: 0 auto;
}

#banner{
   overflow: hidden;
   position: relative;
   text-align: center;
   width: 100%;
   height: 100vh;

   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

   /*
      min: 2rem
      max: 4rem
      64px / 1000 = 0,064 * 100 = 6,4vw

   */


#banner .logo-banner{
   position: absolute;
   top: 5%;
}

main #video-bg-luzes{
   position: absolute;
   width: 600%;
   left: -700px;
   top: -200px;
}

#banner .foto-banner-livia{
   width: 70%;
   position: relative;
   z-index: 1;
   margin-top: 18%;
   margin-left: 30px;
}

#banner p{
   width: 50%;
   margin: 0 auto;
   font-size: 10px;
}

#banner h2{
   font-size: clamp(1.2rem, 6.4vw, 2rem);
   text-transform: uppercase;
   margin: 2%;
   font-weight: bold;
   color: #FFCA00;
}

#banner i{
   
   color: #000;
   font-weight: bold;
   font-size: 16px;
}

#banner .texto-inicial-banner{
   position: relative;
   z-index: 1;
}

#banner button{
   cursor: pointer;
   background-color: #FFCA00;
   width: 80%;
   margin: 0 auto;
   height: 40px;
   border: none;
   border-radius: 6px;
   margin-top: 6%;
   color: black;
   text-transform: uppercase;
   font-weight: bold;
}

#o-que-fazemos{
   min-height: 40vh;
   position: relative;
   margin-top: 100px;
}

#rocket-neon{
   object-fit: contain;
   width: 35%;
   position: absolute;
   transform: rotate(65deg) translateX(-80%);
   left: 50%;
   top: -40px;
   z-index: 0;
   
}

#o-que-fazemos .container-foquete{
   position: relative;
   display: block;
   height: 400px;
}

#o-que-fazemos .box-quadros-bg{
   position: relative;
   height: 100%;
   margin-top: 55px;
}

#o-que-fazemos .apresentacao-importante{
   position: absolute;
   box-sizing: border-box;
   width: 80%;
   min-height: 250px;
   padding: 3%;
   background: linear-gradient(45deg, #131212 50%, #414040);
   margin-left: 50%;
   transform: translateX(-50%);
   display: flex;
   flex-direction: column;
   justify-content: center;
   text-align: center;
   opacity: .9;

   border: .5px solid #888888;
   margin-bottom: 25px;
   border-radius: 10px;

   top: 15%
}

#o-que-fazemos .quadro-bg-02{
   position: absolute;
   width: 70%;
   height: 240px;
   margin-left: 50%;
   transform: translateX(-50%);
   background-color: #FFCA00;
   top: 12%;
   opacity: .7;
   border-radius: 10px;
}

#o-que-fazemos .quadro-bg-03{
   position: absolute;
   width: 60%;
   height: 230px;
   margin-left: 50%;
   transform: translateX(-50%);
   background-color: #FFCA00;
   opacity: .4;
   top: 9%;
   border-radius: 10px;
} 

#o-que-fazemos .apresentacao-importante p{
   font-weight: 200;
   margin-top: 15px;
   font-size: 15px;
}

#o-que-fazemos .apresentacao-importante h3{
   color: #FFCA00;
   text-transform: uppercase;
   font-size: 1.5rem;
}

#maps-frame{
   border-radius: 15px;
   opacity: .5;
   transition: 1s;
}

#maps-frame:hover{
   opacity: 1;
}

#o-que-fazemos .blur-amarelo{
   width: 100%;
   height: 90px;
   background-color: #FFCA00;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   border-radius: 50%;
   filter: blur(90px);
   z-index: 15;
}

#video-apresentacao{
   width: 100%;
   background-image: url('/src/imgs/Lovepik_com-605690269-Business\ fashion\ black\ gold\ atmospheric\ geometric\ background\ ban.jpg');
   background-size: 100%;
   background-repeat: no-repeat;
}

#video-apresentacao video{
   display: block;
   width: 50%;
   margin: 0 auto;
   border-radius: 15px;
   border: 6px solid #ffcc0054;
}

#video-apresentacao h2{
   text-align: center;
   padding: 5%;
}

#servicos-oferecidos{
   background-image: url('/src/imgs/Lovepik_com-605690269-Business\ fashion\ black\ gold\ atmospheric\ geometric\ background\ ban.jpg');

   background-size: cover;
   /* background: linear-gradient(to bottom, #000000 55%, #FFCA00); */
   border-radius: 25px;

   padding: 10% 0%;
}

#servicos-oferecidos .container-cards-servicos{
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 5% 0%;
}

.card-servicos{
   position: relative;
   width: 80%;
   height: auto;
   padding: 5%;
   background-color: transparent;
   backdrop-filter: blur(15px);
   margin: 0 auto;
   margin-bottom: 15px;
   text-align: center;
   border-radius: 10px;
   position: relative;
   border: .5px solid #888888;
   overflow: hidden;
   transition: .5s;
}

.card-servicos-scale{
   transform: scale(1.1);
   margin-bottom: 45px;
}

.card-servicos::after{
   content: url('/src/imgs/Asset\ 1.png');
   position: absolute;
   bottom: -10px;
   margin-left: -75%;
}

.card-servicos img{
   width: 40%;
   border-radius: 50%;
}

.card-servicos h2{
   color: #FFCA00;
   margin-bottom: 2%;
   font-weight: 300;
   text-transform: uppercase;
   margin: 5% 0%;
   font-size: 1.2rem;
}

.card-servicos p{
   font-weight: 100;
}

.card-servicos #luz-bg-card{
   position: absolute;
   bottom: 0;
   width: 100%;
   left: 0;
}




footer{
   min-height: 50vh;
   position: relative;
}

.infor-footer{
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: left;
   justify-content: center;
   gap: 15px;
   z-index: 2;
   text-align: left;
   padding: 5%;
   height: 100vh;
}

.infor-footer img{
   width: 35%;
   object-fit: contain;
   display: block;
   margin-bottom: 5%;
}

.infor-footer span{
   text-align: center;
   font-weight: 200;
   padding: 5%;
}

footer .footer-element{
   width: 100%;
   position: absolute;
   bottom: 0;
   z-index: 1;
   filter: blur(35px);
}


#icones-redes-sociais{

   width: 80%;
   padding: 8% 0%;

}

#icones-redes-sociais h5{
   height: 50px;
}


#icones-redes-sociais i{
   font-size: 1rem;
   padding: 3%;
   background-color: #FFCA00;
   border-radius: 50%;
   object-fit: contain;
   
}



#btn-zap-flutuante{
   position: fixed;
   z-index: 2;
   bottom: 0;
   width: 20%;
   max-width: 55px;
   margin: 15px;
   animation: pulsar 1.2s infinite ease-in-out;
}

/* 1. KEYFRAMES: Define o movimento de pulsação (transform: scale()) */
@keyframes pulsar {
    0% {
        /* Tamanho normal */
        transform: scale(1);
    }
    50% {
        /* Aumento de 15% para simular a pulsação */
        transform: scale(1.15); 
    }
    100% {
        /* Retorno ao tamanho normal */
        transform: scale(1);
    }
}

/* 2. APLICAÇÃO DA ANIMAÇÃO ao seu elemento */
/* Assumindo que seu elemento se chama .coracao-pulsante, se não for, mude o seletor. */
.coracao-pulsante {
    /* * Propriedade `animation`:
     * [nome] [duração] [repetição] [curva de velocidade];
     */
    animation: 
        pulsar 1.2s infinite ease-in-out;
    
    /* * Opcional, mas muito importante: Garante que a transformação 
     * seja aplicada ao centro do elemento, caso o coração seja complexo. 
     */
    transform-origin: center;
}


#containerBannerMkt{
   position: relative;
   background-color: #000000bb;
   position: fixed;
   top: 0;
   left: 0;

   width: 100%;
   height: 100vh;

   overflow: hidden;
   z-index: 50;

   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
   align-items: center;
   transition: 1s;
   
}

#banner_imagem{
   width: 70%;
   height: 70%;

   position: relative;

   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 

}

#img_banner{
   display: block;
   width: 100%;
   height: 100%;
   background-image: url('/src/imgs/banner_curso/Artboard\ 1.jpg');
   background-size: contain;
   background-repeat: no-repeat;
   border-radius: 25px;

}


#btn_acessar{
   display: block;
   cursor: pointer;
   z-index: 1;
   background-color: #FFCA00;
   border: none;
   width: 100%;
   height: 40px;

   color: #131212;
   font-size: 1.2rem;
   text-transform: uppercase;
   font-weight: 500;

   border-radius: 25px;
}

.link_curso_mkt{
   width: 90%;
   position: relative;
   padding: 0px;
   margin: 0px;
}

#clouse_btn_banner i{
   color: #FFCA00;
   font-size: 1.5rem;
   position: absolute;
   top: 0;
   right: 0;
   margin: 5%;
}

#clouse_btn_banner i:hover{
   color: red;
}


#menu-footer .menu-item{
   margin-bottom: 2%;
}

#menu-footer .titulo-menu-item-footer{
   width: 95%;
   height: 50px;
   background-color: #FFCA00;
   background: linear-gradient(to right, #302600, #9b7c00);
   margin: 0 auto;

   display: flex;
   justify-content: space-evenly;
   align-items: center;

}

#menu-footer .titulo-menu-item-footer h2{
   width: 70%;
   text-align: left;
   color: aliceblue;
   font-weight: 200;
   padding: 5%;
   font-size: 1rem;
}

#menu-footer .titulo-menu-item-footer i{
   width: 30%;
   text-align: right;
   color: aliceblue;
   font-weight: 200;
   font-size: 1.5rem;
   padding: 5%;
}

#menu-footer  .conteudo-menu-item-footer{
   transition: max-height 1s ease-in-out;
   width: 95%;
   max-height: 5px;
   margin: 0 auto;
   overflow: hidden;
}

.exitirTextoMenuFooter{
   max-height: 5000px !important;
}

#menu-footer  .conteudo-menu-item-footer p{
   padding: 5%;
   font-weight: 200;
   color: aliceblue;
   
}

#menu-footer  .conteudo-menu-item-footer li{
    padding: 2% 5%;
}

#menu-footer  .conteudo-menu-item-footer .equipes-infor{
   text-align: center;
   width: 70%;
   margin: 0 auto;
   margin-bottom: 25px;
   margin-top: 25px;
   padding: 5%;
   background: #9b7c0062;
   border-radius: 15px;
}




@media screen and (min-width: 601px){

   #containerBannerMkt{
      display: none;
   }

   main{
      display: none;
   }

   #conteudo-telas-grande{
      position: relative;
      width: 100%;
      height: 100vh;
      display: block;
      color: #888888;

      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
   }
   
    #conteudo-telas-grande video{
      position: absolute;
      top: 0;
      left: 0;
      transform: scale(1.2);
      filter: blur(10px);
   
    }

     #conteudo-telas-grande .logo-notbook{
      position: relative;
      z-index: 2;
      width: 500px;
     }

}