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

:root{
   --blue: #45a9fc;
   --blue-secondary: #10619c;
   --blue-tertiary: #0269a2;
   --pink: #ff5f71;
   --white: #fff;
   --gray: #6a767a;
}

/*Config html*/
html{
   font-size: 58%;
   scroll-behavior:smooth;
   -webkit-text-size-adjust:100%;
   text-size-adjust:100%;
   font-family: "Ubuntu", sans-serif;
}
.bg-yellow{
   background: #ffb221;
}
.bg-green{
   background: #00d582;
}
.bg-pink{
   background: #ff5f71;
}
.bg-gray{
   background: #e8e8e8;
}
.bg-blue{
   background: var(--blue);
}

/*Header*/
.header{
   height: 100vh;
   background: url('../img/banner-main-desktop.webp') no-repeat;
   background-size: 100% auto;
   background-position: top center;
   padding: 6.0rem 0 5.0rem 0;
}
.header > .container{
   max-width: 165.0rem;
   /* background: red; */
   margin: 0 auto;
   display: flex;
}
.header__logo{
   width: 100%;
   max-width: 51.6rem;
}
.header__info{
   display: flex;
   flex-direction: column;
   align-items: baseline;
   width: 50%;
}
.header__p{
   margin: 15.0rem 0 17.0rem 0;
   font-weight: 400;
   color: var(--white);
   font-size: 3.1rem;
   line-height: 120%;
}
.header__p > span{
   font-weight: 700;
}
.header__edital{
   padding: 3.0rem 2.5rem;
   background: var(--pink);
   color: var(--white);
   font-size: 2.2rem;
   text-decoration: none;
   border-radius: 1.8rem;
   margin-bottom: 1rem;
}
.header__site{
   padding: 3.0rem 4.8rem;
   padding: 3.0rem 2.5rem;
   background: var(--blue);
   color: var(--white);
   font-size: 2.2rem;
   text-decoration: none;
   border-radius: 1.8rem;
}

/*Header form*/
.header__form{
   width: 50%;
   display: flex;
   justify-content: end;
}
.header__box{
   width: 100%;
   max-width: 55.0rem;
   border-radius: 2.5rem;
}
.header__box--title{
   background: var(--blue-secondary);
   padding: 2.5rem 0 2.0rem 0;
   border-radius: 3rem 3rem 0 0; 
}
.header__box--title h2{
   color: var(--white);
   text-align: center;
   font-size: 3.3rem;
   font-weight: 700;
}
.header__box--date{
   color: var(--white);
   background: var(--blue);
   display: flex;
   justify-content: center;  
   align-items: center;
   gap: 3.0rem;
   padding: 2.3rem 0;
}
.text__event{
   font-size: 1.8rem;
   line-height: 100%;
}
.header__icons{
   width: 100%;
   max-width: 3.0rem;
}
.header__date,
.header__clock
{
   display: flex;
   align-items: center;
   gap: 1rem;
   font-size: 3.8rem;
   font-weight: 700;
}
.header__box--form{
   height: 48rem;
   background: var(--white);
   
}
.header__box--form iframe{
    width:100%;
    height: 48rem;
    border:none;
    border-radius:2rem;
}
.header__box--footer{
   background: var(--blue);
   padding: 2.0rem 5.0rem;
   font-size: 1.5rem;
   color: var(--white);
   font-weight: 400;
   border-radius: 0 0 3rem 3rem; 
}

/*Video*/
.video{
   background: var(--blue);
   padding: 7.0rem 0;
}
.video > .container{
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 0 auto;
}
.video__capa{
   width: 100%;
   max-width: 96.0rem;
}
.video iframe {
    width: 100%;
    max-width: 96rem;
    aspect-ratio: 16 / 9;
    height: auto;
    display: block;
    margin: 0 auto;
}

/*Subscribe*/
.subscribe{
   padding: 8.0rem 0;
   background: var(--white);
}
.subscribe > .container{
   display: flex;
   margin: 0 auto;
   width: 100%;
   max-width: 148.0rem;
}
.subscribe__info{
   /* background-color: red; */
   width: 46%;
}
.subscribe__description{
   /* background-color: blue; */
   width: 54%;
}
.subscribe__info h2{
   color: var(--gray);
   font-size: 4.0rem;
   font-weight: 700;
   margin-bottom: 11.0rem;
}

/*Subscribe box*/
.subscribe__box{
   max-width: 53.5rem;
   width: 100%;
}
.subscribe__box--title{
   background: var(--blue);
   display: flex;
   color: var(--white);
   display: flex;
   flex-direction: column;
   align-items: start;
   padding: 5rem 8rem;
   border-radius: 3rem 3rem 0 0; 
}
.subscribe__box--title .text__event{
   font-size: 4.3rem;
}
.subscribe__date,
.subscribe__clock{
   display: flex;
   align-items: center;
   font-size: 9rem;
   font-weight: 700;
   gap: 1.5rem;
}
.subscribe__icons{
   width: 100%;
   max-width: 6.5rem;
}
.subscribe__img{
   width: 100%;
   max-width: 53.5rem;
   border-radius: 0 0 3rem 3rem; 
}
.subscribe__p{
   font-size: 3.5rem;
   color: var(--gray);
   line-height: 120%;
   font-weight: 400;
}
.subscribe__p:nth-of-type(1){
   margin-bottom: 4.0rem;
}
.subscribe__details{
   margin-top: 4.0rem;
   display: flex;
   gap: 3.0rem;
   align-items: center;
   margin-bottom: 3.0rem;
}
.subscribe__details h2{
   color: var(--gray);
   font-size: 4.1rem;
   font-weight: 700;
   /* margin-bottom: 9.0rem; */
}
.subscribe__details span{
   text-align: center;
   font-size: 12rem;
   color: var(--white);
   height: 10.0rem;
   width: 10.0rem;
   line-height: 100%;
   font-weight: 700;
    border-radius: 2rem; 
}
.subscribe__datails-p{
   font-size: 2.6rem;
   color: var(--gray);
   line-height: 120%;
   font-weight: 400;
}
.section-2 img{
   width: 100%;
   max-width: 6.0rem;
}
.section-2{
   display: flex;
   align-items: start;
   gap: 2.5rem;
   padding: 2.0rem 1.0rem;
}

/*About*/
.about{
   padding: 9.0rem 0;
   background: var(--blue);
}
.about > .container{
   width: 100%;
   margin: 0 auto;
   max-width: 148.0rem;
}
.about h2{
   font-size: 4.0rem;
   color: var(--white);
   font-weight: 700;
   line-height: 100%;
   margin-bottom: 5.0rem;
}
.about__box{
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 1.5rem;
   flex-wrap: wrap;
}
.about__item{
   width: 100%;
   max-width: 48.0rem;
   background-color: var(--blue-secondary);
   border-radius: 1.5rem;
}
.about__img{
   max-width: 48rem;
   height: 20rem;
}
.about__img img{
   max-width: 100%;
   border-radius: 1.5rem 1.5rem 0 0;
}
.about__item p{
   padding: 3.0rem 3.5rem;
   font-size: 2.5rem;
   color: var(--white);
   font-weight: 400;
   line-height: 120%;
}


/*Participate*/
.participate{
   padding: 9.0rem 0;
   background: var(--white);
}
.participate > .container{
   /* background-color: red; */
   width: 100%;
   margin: 0 auto;
   max-width: 148.0rem;
}
.participate__h2{
    font-size: 4.0rem;
    color: var(--gray);
    line-height: 120%;
    font-weight: 700;
    margin: 1.8rem 0;
}
.participate__p {
    font-size: 2.9rem;
    color: var(--gray);
    line-height: 120%;
    font-weight: 400;
}
.participate__p:nth-of-type(1){
   font-style: italic;
    font-size: 2.6rem;
}
.participate__box{
   margin-top: 5.0rem;
   width: 100%;
   height: 50.0rem;
   /* background-color: red; */
   display: flex;
   flex-wrap: nowrap;
}
.participate__box .img-menina{
   width: 100%;
   max-width: 101.4rem;
}
.participate__box > div{
   width: 100%;
   background-color: var(--blue-secondary);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
}
.logo-participate{
   width: 100%;
   max-width: 35rem;
   margin-bottom: 4rem;
}
.participate__box a{
   color: var(--white);
   padding: 2.2rem 6.0rem;
   background: var(--blue);
   font-size: 4.0rem;
   font-weight: bold;
   text-decoration: none;
   border-radius: 2.3rem;
}

/*Cta*/
.cta{
   background: var(--blue);
}
.cta > .container{
   max-width: 100%;
   display: flex;
   flex-wrap: nowrap;
   margin: 0 auto;

}
.cta__info,
.cta__img{
   width: 50%;
}
.cta__img > img{
   width: 100%;
   max-width: 100%;
}
.cta__info{
   padding: 10rem 0 10rem 20rem;
   color: var(--white);
}
.cta__info h3{
   font-size: 3.5rem;
   font-style: italic;
   font-weight: 400;
}
.cta__info h2{
   font-size: 6.5rem;
   font-weight: 700;
   line-height: 100%;
   margin: 3.0rem 0 4.0rem 0;
}
.cta__info p{
   display: flex;
   align-items: start;
   font-size: 4.3rem;
   gap: 1.8rem;
   margin-bottom: 1rem;
   font-weight: 700;
}
.cta__info img{
   width: 100%;
   max-width: 2.5rem;
   margin-top: 0.5rem;
}

/*Footer*/
.footer{
   padding: 5.0rem 0 10.0rem 0;
   background: var(--blue-tertiary);
   margin-top: -1px;
}
.footer > .container{
   width: 100%;
   margin: 0 auto;
   max-width: 148.0rem;
   display: flex;
   flex-direction: column;
   align-items: center;
}
.footer__buttons{
   width: 100%;
   display: flex;
   justify-content: center;
}
.footer__buttons--box{
   background: var(--blue-tertiary);
   width: 100%;
   max-width: 53.0rem;
   padding: 1.5rem;
   border-radius: 1.5rem;
   display: flex;
   text-align: center;
   gap: 1rem;
   margin-top: -9rem;
}

.footer__buttons--box a{
   /* background: blue; */
   width: 100%;
   padding: 0 3.0rem;
   height: 7.0rem;
   color: var(--white);
   font-size: 1.8rem;
   text-decoration: none;
   border-radius: 1.5rem;
   display: flex;
   align-items: center;
   justify-content: center;
}
.footer__logo{
   margin-top: 5rem;
}
.footer__logo img{
   width: 100%;
   max-width: 53.0rem;
}

.d-none-mobile{
   display: block;
}
.d-none-desktop{
   display: none;
}

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

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

@media screen and (max-width: 1366px) {
   html{
      font-size: 38%;
   }
}
@media screen and (max-width: 1280px) and (max-height: 720px) {
   html{
      font-size: 35%;
   }
}

/*mobile*/
@media screen and (max-width: 960px) {
   html{
      font-size: 35%;
   }

   .header{
      min-height: auto;
      height: auto;
      background: var(--blue-secondary);
      padding: 0;
   }
   .header > .container{
      flex-direction: column;
      max-width: 100%;
   }
   .header__info{
      width: 100%;
      background: url('../img/banner-main-mobile.webp');
      background-repeat: no-repeat;
      background-size: 100% auto;
      padding: 5rem 7rem 35rem 7rem;
      position: relative;
   }
   .header__p {
      margin: 5.0rem 0 5.0rem 0;
   }
   .header__logo {
      max-width: 40rem;
      margin-top: 10rem;
   }
   .header__site{
      position: absolute;
      top: 5rem;
      right: 7rem;
   }
   .header__edital{
      position: absolute;
      top: 47rem;
      left: 58rem;
   }
   .header__box{
      margin-top: -30rem;
      z-index: 2;
   }
   .header__form{
      width: 100%;
      justify-content: center;
      padding-bottom: 10rem;
   }

   /*Video*/
   .video{
      padding: 7.0rem 8.0rem;
   }



   /*Subscribe*/
   .subscribe > .container{
      flex-direction: column;
   }
   .subscribe__info{
      width: 100%;
   }
   .subscribe__info h2{
      display: none;
   }
   .subscribe__description{
      width: 100%;
      padding: 0 5%;
   }
   .subscribe__box {
      max-width: 100%;
      width: 100%;
      display: flex;
   }
   .subscribe__img{
      max-width: 100%;
   }
   .subscribe__box--title {
      padding: 5rem 8rem;
      border-radius: 3rem 0  0 3rem ;
      width: 40%;
      justify-content: center;
   }
   .subscribe__img{
      border-radius: 0 3rem 3rem 0;
   }
   .d-none-mobile{
      display: none;
   }

   /*About*/
  
   .about__box{
      flex-direction: column;
   }
   .about h2{
      max-width: 48.0rem;
      margin: 0 auto 5rem auto;
   }

   .participate{
      padding: 8rem 5rem;
   }
   .participate__box .img-menina {
      width: 100%;
      /* max-width: 50%; */
      max-width: 72rem;
   }
   .participate__box{
      height: auto;
   }
   .participate__box > div{
      width: 50%;
   }
   .d-none-desktop{
      display: block;
   }

 
   .cta__info{
      padding: 8rem 15rem;
    
   }
}

@media screen and (max-width: 768px) {
   html{
      font-size: 32%;
   }
   .header__logo {
      max-width: 38.0rem;
   }

   .participate__box .img-menina {
      width: 100%;
      max-width: 50%;
      /* max-width: 72rem; */
   }
   .header__info{
      padding: 5rem 4rem 35rem 4rem;
   }
   .header__p{
      font-size: 2.8rem;
   }
   .header__edital{
      left: 43rem;
   }
   .header__site {
      right: 4rem;
   }
   .subscribe{
      padding: 8.0rem 2rem;
   }
   .subscribe__box--title {
      padding: 3rem 3rem;
        border-radius: 3rem 0 0 3rem;
        width: 48%;
        justify-content: center;
    }
   .subscribe__date, .subscribe__clock {
      display: flex;
      align-items: center;
      font-size: 4rem;
      font-weight: 700;
      gap: 1.5rem;
   }
   .subscribe__icons {
    width: 100%;
    max-width: 3rem;
   }
   .subscribe__box--title .text__event{
      font-size: 2.2rem;
   }
   .subscribe__img{
      max-width: 60rem;
   }
   .logo-participate{
      max-width: 25rem;
   }
   .participate__box a{
      font-size: 3rem;
   }
   .cta__info{
      padding: 2rem 0 8rem 2rem;
   }
   .cta__img{
      background: url('../img/cta-img.webp');
      background-repeat: no-repeat;
      background-size: cover;
   }
   .cta__info h3 {
      font-size: 2rem;
   }
   .cta__info h2 {
      font-size: 3.3rem;
      margin: 2.0rem 0 3.0rem 0;
   }
   .cta__info p{
      font-size: 2rem;
   }
}