/*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;
}
.form__title{
   width: 100%;
   padding: 2.0rem 0 4rem 0;
   background: var(--color-yellow);
}
.cta__h2{
   text-align: center;
   font-size: 3.0rem;
   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';
}
.cta__h3 {
   color: var(--color-yellow);
   font-family: 'Gotham Ultra';
   font-size: 4.3rem;
   text-align: center;
   width: 100%;
   margin: -2.85rem auto 0 auto;
   max-width: 38.0rem;
   padding: 0.7rem 0;
   line-height: 100%;
   background: var(--color-red);
   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 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: '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;
}


/*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{
      /* 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: 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: 960px) {
   /*Main*/
   .main{
      height: auto;
      background: url('../img/footer-mobile.webp');
      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__h2{
      font-size: 1.5rem;
   }
   .form{
      margin-top: -10rem;
   }

   /*Cta*/
   .cta{
      /* background-color: blue; */
      width: 100%;
      align-items: center;
   }

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


}