/*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-red: #bd1a21;

   --color-gray: #181817;

   --color-yellow: #f19e00;

   --color-white: #fff;

   --color-black: #000;

}



.bg-yellow{

   background-color: var(--color-yellow);

}

.bg-red{

   background-color: var(--color-red);

}

.text-center{

   text-align: center;

}



/*Main*/

.main{

   height: 100vh;

   background: url('../img/master-banner-desktop.webp');

   background-repeat: no-repeat;

   background-size: 100% auto;

   background-position: center 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: 45%;

   transform: translateX(-45%);

}

.main__logo{

   width: 100%;

   max-width: 23.0rem;

}



/*Info*/

.info{

   /* background-color: red; */

   width: 50%;

   display: flex;

   flex-direction: column;

   align-items: start;

   justify-content: center;

}

.info__h1{

   color: var(--color-red);

   font-size: 9.0rem;

   line-height: 90%;

   font-family: 'Gotham';

   font-weight: 900;

}

.info__h1 > span{

   color: var(--color-gray);

   font-size: 6.2rem;

   line-height: 90%;

   font-family:"perec-scripte-2";

   font-weight: 400;

}

.info__p{

   color: var(--color-red);

   font-size: 2.8rem;

   line-height: 120%;

   margin: 15.0rem 0 4.5rem 0;

   font-family: 'Gotham Book';

}

.info__p > span{

    font-family: 'Gotham';

    font-weight: bold;

}

.info__h2{

   display: block;

   font-size: 2.3rem;

   margin-bottom: 1.5rem;

   line-height: 100%;

   /* background-color: red; */

     /* clip-path: polygon(

        2% 0,

        100% 0,

        98% 100%,

        0 100%

    ); */

   color: var(--color-yellow);

   font-family: 'Gotham';

   font-weight: 900;

}

.info__h2:nth-of-type(2){

   color: var(--color-red);

}

.info__h2 span:nth-of-type(1){

   margin-left: 1.22rem;

}

.info__h2 span{

   padding: 0 3.5rem 0 1.8rem;

    clip-path: polygon(

        5% 0,

        100% 0,

        95% 100%,

        0 100%

    );

}



/*Cta*/

.cta{

   /* background-color: blue; */

   width: 50%;

   display: flex;

   align-items: end;

   flex-direction: column;

}

.form{

   /* background: var(--color-white); */

   width: 100%;

   /* max-width: 45.0rem; */
   max-width: 56.0rem;
}

.form__title{

   width: 100%;

   padding: 2.0rem 0 4rem 0;
   text-align: center;

   /* background: var(--color-yellow); */

}

.form__title p {

    font-size: 13px;

    font-weight: 600;
   

}

.cta__h2{

   text-align: center;

   font-size: 6.7rem;

   line-height: 100%;

   color: var(--color-gray);

   font-family: 'Gotham Book';

   font-weight: 400;

}

.cta__h2 > span{

   color: var(--color-red);

   font-family: 'Gotham Ultra';

   background-color: var(--color-white);

   display: inline-block;

   padding: 0 0.5rem;

}
.cta__h2 > span:nth-of-type(2){
   color: #f19e00;
   margin: 0.4rem 0 0.3rem 0;
}

.cta__h3 {

   color: #fff;

   font-family: 'Gotham Ultra';

   font-size: 10.5rem;

   text-align: center;

   /* width: 100%; */

   margin: 0.5rem auto 0 auto;
/* 
   max-width: 38.0rem; */

   padding: 0.7rem 0.8rem;

   line-height: 100%;

   background: #f19e00;

   display: inline-block;

   /* clip-path: polygon(

        4% 0,

        100% 0,

        96% 100%,

        0 100%

   ); */

}

.form{

   margin-bottom: 2.0rem;

}

.form__content{

   /* background-color: red; */

   padding: 2.0rem;

   height: 48.0rem;

   width: 100%;

}
.form__content h2{
   font-size: 5.3rem;
   color: var(--color-red);
   font-family: 'Gotham';
   font-weight: bold;
   text-align: center;
   margin-bottom: 0.5rem;
}
.form__content iframe{

   width:100%;

   height: 48rem;

   border:none;

}
.cta__btn{
   display: flex;
   flex-direction: column;
   gap: 1rem;
}
.cta__btn a{
   text-align: center;
   color: var(--color-yellow);
   background: var(--color-red);
   font-size: 3.7rem;
   height: 8.5rem;
   font-family: 'Gotham';
   font-weight: 900;
   text-decoration: none;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 42.5rem;
   border-top: 0.6rem solid rgba(255, 255, 255, 0.2);
   border-bottom: 0.6rem solid rgba(0, 0, 0, 0.5);
}
.cta__btn a:nth-of-type(3){
   font-size: 2.9rem;
}

.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: 'Gotham';

   font-weight: 400;

}



/*Footer*/

.footer{

   width: 100%;

   max-width: 45.0rem;

   display: flex;

   align-items: center;

   justify-content: space-between;

}

.footer__button{

   /* background: var(--color-yellow); */

   font-size: 1.6rem;

   color: var(--color-white);

   padding: 0 1.0rem;

   width: 100%;

   max-width: 13.3rem;

   font-family: 'Gotham Ultra';

   font-weight: normal;

   font-style: italic;

   line-height: 3.0rem;

   clip-path: polygon(

        7% 0,

        100% 0,

        93% 100%,

        0 100%

   );

}

.footer__icons{

   width: 100%;

   max-width: 3.0rem;

}



.banner-mobile{

   display: none;

}

 .info__mobile{
      display: none;
}

.img-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: 48%;

   }

   .form__content{

      /* background-color: red; */

      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 .container{

      max-width: 190.0rem;

   }

   .main__logo {

      width: 100%;

      max-width: 16.0rem;
      margin-top: -2rem;
   }

   .form{

        max-width: 52.0rem;

   }

   .footer{

      max-width: 52.0rem;
      justify-content: space-evenly;

   }

   .form__footer {

      padding: 4.0rem 2.0rem 2.0rem 2.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: #f0f0f0;

   }

   .main > .container{

      flex-wrap: wrap;

   }

   .main__logo--link{

      position: absolute;

      top: 5.5rem;

      left: 50%;

      transform: translateX(-50%);

   }

   

   .banner-mobile{

      display: block;

      width: 100%;

      max-width: 960px;

   }

      

   /*Info*/

   .info{

      /* background-color: red; */

      width: 100%;

      flex-direction: row;

      margin-top: 12rem;

      display: flex;

      justify-content: space-around;

   }

   .info__h1{

      font-size: 6.2rem;

   }

   .info__h1 span{

      font-size: 4.3rem;

   }

   .info__p {

      /* color: var(--color-red);

      font-size: 2.8rem; 

      line-height: 120%;*/

      margin: 2rem 0 2rem 0;

      font-size: 1.6rem;

   }
    .info__p br{
      display: none;
    }

   .info__h2{

      font-size: 1.3rem;

   }

   .form{

   /* margin-top: -10rem; */
    margin-top: 10rem;

   }



   /*Cta*/

   .cta{

      /* background-color: blue; */

      width: 100%;

      align-items: center;

   }

   

   .form__title p {

       font-size: 10px;

   }



   .form__content{

      /* height: 780px; */
      height: 170px;

      width: 100%;

   }

   .form__content iframe{

      width:100%;

      height: 780px;

   }
   .form__title {
      width: 100%;
      padding: 2.0rem 0 0 0;
   }


   .info__desktop{
      display: none;
   }
   .info__mobile{
      display: flex;
   }
   .img-mobile{
      max-width: 960px;
      width: 100%;
      margin-bottom: 3rem;
      display: block;
   }
   .info__h2 span:nth-of-type(1) {
    margin-left: 0.8rem;
   }
   .footer{
      justify-content: space-evenly;
   }
   .main__logo {
      margin-top: 0;
   }
}