/*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 {
   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__h2 p {
   font-size: 1.5rem;
   font-weight: 500;
}


.shadow{
   filter: drop-shadow(-17.321px 10px 53px rgba(9, 13, 23, 0.2));

}
.cta__h3 {
   width: 70%;
   display: block;
   margin-left: auto;
   margin-right: auto;
   filter: drop-shadow(20px 20px 41.5px rgba(5,136,170,0.65));
}

.cta__h3 span {
   display: block;
   text-align: center;
   padding: 0.5vh 0;
   margin-top: 3px;
   color: #0c4485;
   font-family: 'CarnasW03';
   font-size: 3.802vw;
   font-weight: 300;
   line-height: 1;
   letter-spacing: -0.03em;
}

.cta__h3 .line-1 {
   background-color: #3ccff6;
}

.cta__h3 .line-2 {
   background-color: #0c4485;
   color: #3ccff6;
}

.cta__h3 span.line-3 {
   background-color: #fff;
   font-weight: 900;
   font-size: 5.365vw;
   line-height: 0.9;
}

.title-3 {
   text-align: center;
   color: #0c4485;
   font-family: 'CarnasW03';
   font-size: 3.438vw;
   font-weight: 900;
   margin-top: 4vh;
}


.btn {
   font-size: 1.510vw;
   line-height: 1.1;
   color: #FFF;
   font-family: 'CarnasW03';
   font-weight: 800;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   text-decoration: none;
   filter: drop-shadow(7.222px 9.584px 15.5px rgba(0, 0, 0, 0.63));
   background-color: #3ccff6;
   padding: 2vh 0;
   max-height: 72px;
   margin-top: 1vw;
}

.btn.btn-1 {
   color: #0e1666;
}

.btn.btn-2 {
   filter: drop-shadow(7.222px 9.584px 15.5px rgba(0, 0, 0, 0.63));
   background-color: #0c4485;
}

.btn.btn-3 {
   filter: drop-shadow(7.222px 9.584px 15.5px rgba(0, 0, 0, 0.63));
   background-color: #0e1666;
}


.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);
   margin-top: 1.5vh;
}

.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;
   }

   .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 {
      order: 2;
      width: 100%;
      flex-direction: row;
      margin-top: 0;
      display: flex;
      justify-content: space-around;
      background: url('../img/nota10-banner-mobile2.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;
      padding: 10rem 0 3rem;
   }

   .form__content {
      height: 780px;
      width: 100%;
   }

   .form__content iframe {
      width: 100%;
      height: 780px;
   }
}



@media screen and (max-width: 768px) {
   .form {
      max-width: 80%;
   }

   .btn {
      font-size: 2.6rem;
      font-size: 5vw;
      margin-top: 1rem;
      margin-top: 2vw;
   }

   .cta__h3 span {
      font-size: 6rem;
      font-size: 9vw;
   }

   .cta__h3 span.line-3 {
      font-size: 8.5rem;
      font-size: 14vw;
   }

   .title-3 {
      font-size: 7rem;
      font-size: 10.691vw;
      margin-top: 4rem;
      margin-bottom: 2rem;
   }
}