/*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%;
}

/*Variables*/
:root{
   --color-blue-light: #3ccff6;
   --color-blue-dark: #0c4485;
   --color-white: #fff;
   --color-black: #000;
}

.bg-blue-light{
   background-color: var(--color-blue-light);
}
.bg-blue-dark{
   background-color: var(--color-blue-dark);
}
.text-blue-light{
   color: var(--color-blue-light);
}
.text-blue-dark{
   color: var(--color-blue-dark);
}

.text-center{
   text-align: center;
}

/*Main*/
.main{
   height: 100vh;
   background: url('../img/nota10-banner-desktop.webp');
   background-repeat: no-repeat;
   background-size: 100% auto;
   background-position: top center;
   padding: 4.0rem 0;
   display: flex;
   align-items: center;
   position: relative;
}
.main > .container{
   margin: 0 auto;
   width: 100%;
   max-width: 178.0rem;
   display: flex;
}
.main__logo--link{
   position: absolute;
   top: 5.5rem;
   left: 50%;
   transform: translateX(-50%);
   display: none;
}
.main__logo{
   width: 100%;
   max-width: 23.0rem;
}

/*Info*/
.info{
   width: 50%;
   display: flex;
   flex-direction: column;
   justify-content: start;
}
.info__logo{
   margin-top: 3.6rem;
   width: 100%;
   max-width: 26.8rem;
}
.info__p{
   color: var(--color-white);
   font-size: 3.8rem;
   line-height: 120%;
   margin: 10.0rem 0 4.5rem 0;
   font-family: 'CarnasW03';
   font-weight: 300;
}
.info__p > span{
   font-family: 'CarnasW03';
   font-weight: 900;
   font-size: 4.8rem;
}
.info__h2{
   display: block;
   font-size: 2.7rem;
   margin-bottom: 1.5rem;
   line-height: 110%;
   color: var(--color-yellow);
   font-family: 'CarnasW03';
   font-weight: bold;
}
.info__h2 span{
   padding: 0 1rem;
   display: inline-block;
   margin-bottom: 0.5rem;
}

/*Cta*/
.cta{
   width: 50%;
   display: flex;
   align-items: end;
   flex-direction: column;
}
.form{
   background: var(--color-white);
   width: 100%;
   max-width: 45.0rem;
}
.form__title{
   width: 100%;
   padding: 2.0rem 0 4rem 0;
   background: var(--color-blue-dark);
}
.cta__h2{
   text-align: center;
   font-size: 3.0rem;
   line-height: 100%;
   color: var(--color-white);
   font-family: 'CarnasW03';
   font-weight: 300;
}
.cta__h2 > span{
   color: var(--color-blue-light);
   font-family: 'CarnasW03';
   font-weight: 900;
}
.cta__h3 {
   color: var(--color-blue-dark);
   font-size: 5.1rem;
   text-align: center;
   width: 100%;
   margin: -2.85rem auto 0 auto;
   max-width: 36.0rem;
   /* padding: 0.7rem 0; */
   line-height: 100%;
   background: var(--color-blue-light);
   font-family: 'CarnasW03';
   font-weight: 900;
}
.form{
   margin-bottom: 2.0rem;
}
.form__content{
   /* background-color: red; */
   padding: 2.0rem;
   height: 48.0rem;
   width: 100%;
}
.form__content iframe{
   width:100%;
   height: 48rem;
   border:none;
}
.form__footer{
   padding: 1.0rem 2.0rem 2.0rem 2.0rem;
}
.form__footer p{
   font-size: 12px;
   color: var(--color-black);
   line-height: 110%;
   font-family: 'CarnasW03';
   font-weight: 300;
   padding: 1.2rem;
}

/*Footer*/
.footer{
   width: 100%;
   max-width: 45.0rem;
   display: flex;
   align-items: center;
   justify-content: space-between; 
}
.footer__button{
   font-size: 2.2rem;
   color: var(--color-white);
   width: 100%;
   max-width: 15rem;
   font-family: 'Carnas';
   font-weight: bold;
   line-height: 3.0rem;
   color: var(--color-blue-dark);
}
.footer__icons{
   width: 100%;
   max-width: 3.0rem;
}
.footer__socials{
   display: flex;
   gap: 0.5rem;
}

.banner-mobile{
   display: none;
}


/*Media querys*/
@media screen and (max-width: 1680px) {
   html{
      font-size: 57%;
   }
   .main{
      background-size: cover;
   }
}
@media screen and (max-width: 1600px) {
   html{
      font-size: 52%;
   }
   .form__content{
      padding: 2.0rem;
      height: 38.0rem;
      width: 100%;
   }
   .form__content iframe{
      width:100%;
      height: 38.0rem;
      border:none;
   }
   .form__footer {
    padding: 2.0rem 2.0rem 2.0rem 2.0rem;
   }
}
@media screen and (max-width: 1440px) {
   html{
      font-size: 49%;
   }
   .form__footer p {
    font-size: 10px;
   }
}
@media screen and (max-width: 1400px) {
   html{
      font-size: 47%;
   }
}
@media screen and (max-width: 1366px) {
   html{
      font-size: 39%;
   }

   /*Main*/
   .main{
      height: 100vh;
      background: url('../img/nota10-banner-laptop.webp');
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: top center;
      background-position-y: -24.0rem;
   }
   .main .container{
      max-width: 203.0rem;
   }
   .main__logo {
      width: 100%;
      max-width: 18.0rem;
   }
   .form{
        max-width: 52.0rem;
   }
   .footer{
      max-width: 52.0rem;
   }
   .form__footer {
      padding: 4.0rem 2.0rem 2.0rem 2.0rem;
   }
     
}

@media screen and (max-width: 1280px) {
   html{
      font-size: 39%;
   }
   .main{
      background-position-y: -21.0rem;
   }
   .main .container{
      max-width: 195.0rem;
   }
}

@media screen and (max-width: 960px) {
   /*Main*/
   .main{
      height: auto;
      background: none;
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: bottom center;
      background-color: #f5f5f5;
      background-position-y: 0;
      padding: 0 0 4.0rem 0;
   }
   .main > .container{
      flex-wrap: wrap;
   }
   .main__logo--link{
      position: absolute;
      display: block;
      top: 5.5rem;
      left: 50%;
      transform: translateX(-50%);
   }
   
   .banner-mobile{
      display: block;
      width: 100%;
      max-width: 960px;
   }
      
   /*Info*/
   .info{
      width: 100%;
      flex-direction: row;
      margin-top: 0;
      display: flex;
      justify-content: space-around;
      background: url('../img/nota10-banner-mobile.webp');
      height: 84.0rem;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: top center;
   }
   .info__box-one{
      display: none;
   }
   .info__box-two{
      width: 100%;
      /* background: red; */
      margin-top: 12rem;
      display: flex;
      align-items: start;
      justify-content: center;
      gap: 8.0rem;
   }
   .info__p {
      margin: 0;
      font-size: 2.1rem;
   }
   .info__p > span {
      font-size: 2rem;
   }
   .info__h2{
      font-size: 1.7rem;
   }
   .form{
      margin-top: 0;
   }

   /*Cta*/
   .cta{
      width: 100%;
      align-items: center;
      margin-top: 2rem;
   }

   .form__content{
      height: 63.0rem;
      width: 100%;
   }
   .form__content iframe{
      width:100%;
      height: 63.0rem;
   }
}