/*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-2.webp') no-repeat;
   background-size: 100% auto;
   background-position: top center;
   background-color: #030d15;
   padding: 3.0rem 0 3.0rem 0;
}
.header > .container{
   /* max-width: 165.0rem; */
   max-width: 190.0rem;
   /* background: red; */
   margin: 0 auto;
   display: flex;
}
.header__logo{
   width: 100%;
   /* max-width: 51.6rem; */
   max-width: 66.6rem;
   margin-top: 10rem;
}
.header__info{
   display: flex;
   flex-direction: column;
   align-items: baseline;
   justify-content: space-between;
   width: 50%;
}
.header__p{
   /* margin: 15.0rem 0 17.0rem 0; */
   font-weight: 700;
   color: var(--white);
   /* font-size: 3.1rem; */
   font-size: 5.6rem;
   line-height: 120%;
   margin-bottom: 5rem;
}
.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;
}

/*Big numbers*/
.big-numbers__box{
   display: flex;
   color: var(--white);
}
.big-numbers__box div:nth-of-type(1){
   padding-top: 0.5rem;
   padding-right: 3.5rem;
}
.big-numbers__box div:nth-of-type(2){
   border-right: 0.3rem solid var(--white);
   border-left: 0.3rem solid var(--white);
   padding: 0.5rem 3.5rem 0 3.5rem;
}
.big-numbers__box div:nth-of-type(3){
   padding-top: 0.5rem;
   padding-left: 3.5rem;
}
.big-numbers__box h2{
   font-weight: 700;
   font-size: 7.6rem;
   /* line-height: 4.5rem; */
}
.big-numbers__box p{
   font-weight: 400;
   font-size: 1.6rem;
   /* line-height: 1.5rem; */
}
.buttons__info{
   /* background-color: red; */
   width: 50%;
   /* height: 5.5rem; */
   margin-bottom: 4rem;
   display: flex;
   justify-content: flex-end;
   gap: 1rem;
}
.buttons__info a{
   color: var(--white);
   font-size: 1.9rem;
   padding: 1.4rem 1.7rem;
   border: 1px solid var(--white);
   border-radius: 1rem;
   text-decoration: none;
}

/*Header form*/
.header__form{
   width: 50%;
   display: flex;
   justify-content: end;
   flex-direction: column;
   align-items: flex-end;
}
.header__box{
   width: 100%;
   max-width: 55.0rem;
   border-radius: 2.5rem;
   background: rgba(8, 57, 91, 0.15);
   backdrop-filter: blur(2.0rem);
   border: 1px solid rgba(8, 57, 91, 0.7);
   -webkit-backdrop-filter: blur(2.0rem);
}
.header__box--title{
   /* background: var(--blue-secondary); */
   padding: 3rem 3rem 0 3rem;
   border-radius: 3rem 3rem 0 0; 
}
.header__box--title h2{
   color: var(--white);
   /* text-align: center; */
   /* font-size: 3.3rem; */
   font-size: 4.3rem;
   font-weight: 700;
}
.header__box--title h2 span{
   color: #4eb2fc;
}
.header__box--title p {
    color: #fff;
    /* font-size: 1.8rem; */
     font-size: 2.1rem;
    /* text-align: center; */
    margin-top: 5px;
    font-weight: 500;
}
.header__box--date{
   color: var(--white);
   /* background: var(--blue); */
   display: flex;
   justify-content: center;  
   align-items: center;
   gap: 0;
   padding: 0 0 2.3rem 0;
   flex-direction: column;
}
.text__event{
   /* font-size: 1.8rem; */
   font-size: 3rem;
   line-height: 100%;
   font-weight: 500;
   font-style: italic;
}
.header__icons{
   width: 100%;
   max-width: 5.0rem;
}
.header__date,
.header__clock
{
   display: flex;
   align-items: center;
   gap: 1rem;
   /* font-size: 3.8rem; */
   font-size: 6.5rem;
   font-weight: 700;
}
.header__box--form{
   /* height: 48rem; */
   height: 43rem;
   /* background: var(--white); */
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   padding: 0 0.6rem;
}
.line__blue{
   width: 100%;
   border-bottom: 0.1rem solid #4eb2fc;
   margin: 3.5rem 0;
}
.header__box--form a{
   color: var(--white);
   text-align: center;
   width: 100%;
   padding: 2.0rem 2.5rem;
   border-radius: 1.4rem;
   font-size: 3.5rem;
   font-weight: 700;
   text-decoration: none;
}
.header__box--form a:nth-of-type(1){
   background-color: #ffb221;
}
.header__box--form a:nth-of-type(2){
   background-color: #00d582;
}
.header__box--form a:nth-of-type(3){
   background-color: #ff5f71;
}
.header__box--form a:nth-of-type(4){
   background-color: #4eb2fc;
}
.header__box--form a:nth-of-type(5){
   background-color: #0074ac;
}
/* .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; 
}



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

.header__box--footer{
   display: none;
}
.date-mobile{
   display: none;
}
.header__info .buttons__info{
   display: none;
}

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

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

@media screen and (max-width: 1366px) {
   html{
      font-size: 37%;
   }
}
@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%;
      background-color: #000;
   }
   
   .d-none-mobile{
      display: none;
   }
   .d-none-desktop{
      display: block;
   }
   .header{
      min-height: auto;
      height: auto;
      /* background: var(--blue-secondary); */
      background: url('../img/banner-main-mobile-2.webp');
      padding: 0;
          background-size: cover;
          background-repeat: no-repeat;
   }
   .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__box--footer .header__logo{
       max-width: 35rem;
       margin: 5rem 0;
   }
   .header__site{
      position: absolute;
      top: 5rem;
      right: 7rem;
   }
   .header__edital{
      position: absolute;
      top: 47rem;
      left: 58rem;
   }
   .header__box{
      margin-top: -30rem;
      z-index: 2;
      max-width: 65.0rem;
      padding-top: 5rem;
   }
   .header__form{
      width: 100%;
      justify-content: center;
      padding-bottom: 10rem;
   }
   .d-none-desktop{
      display: block;
   }

 
   .cta__info{
      padding: 8rem 15rem;
    
   }
   .big-numbers__box{
      display: none;
   }
   .buttons__info {
      display: none;
   }
   .header__form{
      align-items: center;
   }
   .header__box--footer{
      display: block;
      padding: 0;
      text-align: center;
   }
   .header__box--form {
      height: auto;
      padding: 0 6rem;
       gap: 0.8rem;

   }
   .header__box--title h2{
      font-size: 3.3rem;
   }
   .header__p{
      font-size: 3.8rem;
   }
   .date-mobile{
      display: flex;
      gap: 8rem;
   }
   .date-desktop{
      display: none;
   }
   /* .date-mobile .header__date{
      display: flex;
   } */
   .date-mobile p{
      font-size: 2.5rem;
   }
   .header__box--date{
      padding-bottom: 5rem;
   }
   .header__info{
      position: relative;
   }
   .header__info .buttons__info{
      display: flex;
      position: absolute;
      top: 2rem;
      right: 2rem;
   }
}

@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__edital{
      left: 43rem;
   }
   .header__site {
      right: 4rem;
   }
   .subscribe{
      padding: 8.0rem 2rem;
   }

   /* .header__box--form{
      height: 160rem;
   } */
   .header__box--form iframe{
      height: 100%;
   }
}