/*Reset CSS*/
*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

/*Config html*/
html{
   font-size: 62.5%;
   scroll-behavior:smooth;
   -webkit-text-size-adjust:100%;
   text-size-adjust:100%;
}

:root {
   /* Museo */
   --font-museo-300: "Museo 300", sans-serif;
   --font-museo-700: "Museo 700", sans-serif;
   --font-museo-900: "Museo 900", sans-serif;

   /* Museo Sans */
   --font-museo-sans-100: "Museo Sans 100", sans-serif;
   --font-museo-sans-300: "Museo Sans 300", sans-serif;
   --font-museo-sans-500: "Museo Sans 500", sans-serif;
   --font-museo-sans-700: "Museo Sans 700", sans-serif;
   --font-museo-sans-900: "Museo Sans 900", sans-serif;

   /*Colors*/
   --color-white: #fff;
   --color-pink: #e65660;
   --color-pink-secondary: #ff5959;
   --color-blue: #0033a0;
   --color-blue-secondary: #02bfe1;
   --color-blue-bg: #00339f;
   --color-gray: #2d2e26;
   --color-bg-form: #e6ebf6;
}

/*Main*/
.main{
   background-color: var(--color-blue-bg);
   background-image: url('../img/banner-main-desktop.webp');
   background-repeat: no-repeat;
   background-size: 100% auto;
   min-height: 100vh;
   padding: 5.0rem 0 20.0rem 0;
}
.img-mobile{
   display: none;
}

.main > .container{
   margin: 0 auto;
   width: 100%;
   max-width: 140.0rem;
   display: flex;
   gap: 6.0rem;
}

/*Main details*/
.main__details{
   width: 100%;
   max-width: 84.0rem;
   position: relative;
}
.main__img-alunos{
   width: 100%;
   max-width: 84.0rem;
   margin-top: 6.0rem;
}
.main__h1{
   font-family: var(--font-museo-sans-300);
   color: var(--color-white);
   font-size: 6.2rem;
   position: absolute;
   line-height: 100%;
   left: 7rem;
   bottom: 6rem;
}
.main__h1 span{
   font-family: var(--font-museo-900);
}
.main__logo{
   display: inline-block;
   position: absolute;
   top: 0;
   right: 0;
}
.main__logo > img{
   width: 100%;
   max-width: 27.0rem;
}


/*Main cta*/
.main__cta{
   width: 100%;
   max-width: 49.5rem;
   display: flex;
   align-items: start;
   justify-content: start;
   flex-direction: column;
}
.main__form{
   background-color: var(--color-pink);
   width: 100%;
   color: var(--color-white);
   max-width: 48.0rem;
   padding: 2.0rem 1.5rem 1.5rem 1.5rem;
   text-align: center;
   font-family: var(--font-museo-sans-900);
   text-transform: uppercase;
   border-radius: 7rem;
}
.main__h3{
   font-size: 1.8rem;
   line-height: 100%;
}
.main__h2{
   font-size: 2.9rem;
   line-height: 120%;
   margin: 1.3rem 0;
}
.main__date{
   width: 100%;
   display: inline-block;
   max-width: 23.0rem;
   font-size: 3.6rem;
   padding: 1.0rem 0;
   background-color: var(--color-blue-bg);
   margin-bottom: 2rem;
   border-radius: 31.5rem;
}
.box__form{
   width: 100%;
   height: 72.0rem;
   background: var(--color-bg-form);
   border-radius: 31.5rem;
   border-radius: 0 0 6rem 6rem;
}
.box__form--main{
   height: 58.0rem;
}
.box__form--main iframe {
    width: 100%;
    height: 58.0rem;
    border: none;
}
.box__form--footer{
   margin: 0 2rem 1rem 2rem;
   border-top: 1px solid var(--color-blue-secondary);
}
.box__form--footer p{
   padding: 0 1%;
   margin-top: 1rem;
   color: var(--color-gray);
   font-size: 1.0rem;
   text-transform: none;
   text-align: start;
}

/*Videos*/
.main__videos{
   margin-top: 3.0rem;
   width: 100%;
}
.main__videos h2{
   color: var(--color-white);
   font-family: var(--font-museo-sans-900);
   font-size: 2.4rem;
   padding: 0.5rem 1rem 0.1rem 1rem;
   background: var(--color-pink-secondary);
   margin-bottom: 1rem;
   display: inline-block;
}
.main__videos h2:nth-of-type(2){
   background: transparent;
   font-family: var(--font-museo-sans-300);
   margin-top: 4.0rem;
}
.main__videos h2:nth-of-type(2) span{
   font-family: var(--font-museo-sans-900);
}
.main__videos--box{
   width: 100%;
   max-width: 47.8rem;
   aspect-ratio: 16 / 9;
   margin-left: 1.3rem;
   overflow: hidden;
   background: var(--color-white);
}

.main__videos--box iframe{
   width: 100%;
   height: 100%;
   display: block;
   border: 0;
}

/*Footer*/
.footer{
   background: var(--color-blue-bg);
   padding: 0 0 16.0rem 0;
}
.footer > .container{
   margin: 0 auto;
   width: 100%;
   max-width: 140.0rem;
   display: flex;
   justify-content: center;
}
.footer__box{
   width: 100%;
   max-width: 123.0rem;
   padding: 2.5rem 2.8rem;
   border: 0.28rem solid var(--color-blue-secondary);
   border-radius: 4.3rem;
}
.footer__box{
   display: flex;
   justify-content: space-between;
}
.footer__box a{
   font-family: var(--font-museo-sans-500);
   color: var(--color-blue-secondary);
   font-size: 2.7rem;
}

/*Responsividade*/
@media screen and (max-width: 1680px) {
   html{
      font-size: 55%;
   }
}
@media screen and (max-width: 1600px) {
   html{
      font-size: 52%;
   }
}
@media screen and (max-width: 1366px) {
   html{
      font-size: 43%;
   }
}

@media screen and (max-width: 960px) {
   html{
      font-size: 39%;
   }
}

@media screen and (max-width: 767px) {
   html{
      font-size: 39%;
   }
   

   /*Main*/
   .main{
      background-color: var(--color-blue-bg);
      background-image: none;
      background-repeat: no-repeat;
      background-size: 100% auto;
      min-height: auto;
      padding: 0 0 10.0rem 0;
   }
   .img-mobile{
      display: block;
      width: 100%;
      max-width: 767px;
   }
   .main__h1{
      display: none;
   }
   .main__form{
      max-width: 52.0rem;
   }
   .main__logo, .main__img-alunos{
      display: none;
   }
   .main > .container{
      max-width: 100%;
      gap: 0;
      flex-direction: column;
   }
   .main__details{
      max-width: 100%;
   }
   .main__cta{
      max-width: 100%;
      align-items: center;
   }
   .main__videos h2{
      margin-left: -11rem;
   }
   .main__videos h2:nth-of-type(2){
      margin-left: 0;
   }
   .main__videos{
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 5rem;
   }

   /*Footer*/
   .footer {
      padding: 0 2rem 8.0rem 2rem;
   }
   .footer__box a{
      font-size: 2.0rem;
   }
   .footer__box {
      padding: 2rem 2.5rem;
   }
}