/*******************************************************
 *
 * General
 *
 *******************************************************/
#inner-page-wrapper>.container {
  width: 100%;
  padding: 0;
}

body:not(.home) #inner-page-wrapper {
  margin-bottom: 0 !important;
}

.cd-ppc-container{
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 64px;
}


/*******************************************************
 *
 * Banner
 *
 *******************************************************/
#cd-ppc-banner{
  background-image: linear-gradient(rgba(0, 0, 0, 0.64), rgba(0, 0, 0, 0.64)), var(--bg-image, none);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#cd-ppc-banner .banner-content{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 66px;
  padding: 64px 0;
}

#cd-ppc-banner .banner-text__wrapper{
  display: flex;
  align-items: center;
}

#cd-ppc-banner .banner-text{
  font-family: Metropolis;
  color: var(--white-color-1);
  letter-spacing: 0;
}

#cd-ppc-banner .banner-text > * + *{
  margin-top: 24px;
}

#cd-ppc-banner .banner-text h1{
  margin: 0;
  font-weight: 700;
  font-size: 50px;
  line-height: 100%;
  letter-spacing: 0;
  color: var(--white-color-1);
}

#cd-ppc-banner .banner-text__subtitle{
  font-family: Metropolis;
  font-weight: 500;
  font-size: 20px;
}

#cd-ppc-banner .banner-text__description{
  font-weight: 500;
  font-size: 16px;
  line-height: 132%;
}

#cd-ppc-banner .banner-text__description > p{
  margin-top: 0;
  margin-bottom: 0;
}

#cd-ppc-banner .banner-text__description > p + p{
  margin-top: 26px;
}

/* Form */
#cd-ppc-banner .banner-form__container{
  margin-left: auto;
  padding: 50px 29px;
  background: var(--secondary-color);
}
#cd-ppc-banner .banner-form__form{
  width: auto;
}
#cd-ppc-banner .banner-form__container h2{
  margin-bottom: 25px;
  font: 700 32px/38px "Metropolis", sans-serif;
  letter-spacing: 0;
  color: var(--black-color-2);
}

#cd-ppc-banner .banner-form__container h3{
  margin-bottom: 25px;
  font-family: Metropolis;
  font-weight: 700;
  font-size: 32px;
  line-height: 38.4px;
  letter-spacing: 0;
}
#cd-ppc-banner .banner-form__container .form-button-col{
  margin-top: 25px;
}
#cd-ppc-banner .banner-form__container .form-terms{
  margin: 25px 11px 0;
  max-width: 467px;
}

/*******************************************************
*
* Why Choose Loft
*
*******************************************************/
#cd-ppc-why-choose-loft.cd-ppc-why-choose-loft{
  background: white;
}

#cd-ppc-why-choose-loft .cd-ppc-container{
  padding: 0;
}

#cd-ppc-why-choose-loft .content{
  display: flex;
  flex-flow: column nowrap;
  gap: 64px;
  padding: 80px 0;
}

#cd-ppc-why-choose-loft .content-row{
  display: flex;
  flex-flow: row-reverse nowrap;
  align-items: center;
  gap: 113px;
  padding: 40px 64px;
  background: linear-gradient(to right, var(--secondary-color) 0%, var(--secondary-color) 71.74%, white 71.74%, white 100%);
}

#cd-ppc-why-choose-loft .image{
  flex: 1 1 auto;
  position: relative;
  align-self: flex-start;
  min-width: 425px;
  width: 100%;
  max-width: min(619px, 50%);
}

#cd-ppc-why-choose-loft .image img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#cd-ppc-why-choose-loft .image__arfix{
  position: relative;
  height: 0;
  padding-bottom: 67.85%;
}

#cd-ppc-why-choose-loft .text-content{
  flex: 1 1 auto;
  letter-spacing: 0;
}

#cd-ppc-why-choose-loft .text-content > * + * {
  margin-top: 24px;
}

#cd-ppc-why-choose-loft .text-content h2{
  font: 700 2.5rem/120% var(--font-metropolis);
  color: var(--black-color-2);
}

#cd-ppc-why-choose-loft .text-content .list li{
  display: flex;
  flex-flow: row nowrap;
  gap: 16px;
  font: 1rem/1.5rem var(--font-metropolis);
  color: var(--black-color-2);
}

#cd-ppc-why-choose-loft .text-content .list li:before{
  content: "";
  display: block;
  width: 64px;
  height: 49px;
  background: transparent url("../../svg/checked-2.svg") no-repeat center center;
}

#cd-ppc-why-choose-loft .text-content .list li + li{
  margin-top: 16px;
}

#cd-ppc-why-choose-loft .text-content .list .item__title{
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.875rem;
}

/*******************************************************
 *
 * Services
 *
 *******************************************************/
#cd-ppc-services.cd-ppc-services{
  padding: 64px 0;
  background: #F8F8F8;
}

#cd-ppc-services .content h2{
  font: 700 2.25rem/2.7rem var(--font-metropolis);
  text-align: center;
}

#cd-ppc-services .cards{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 24px;
  margin-top: 40px;
}

#cd-ppc-services .card{
  padding: 16px;
  width: calc((100% - (24px * 4)) / 5);
  border: 1px solid var(--gray-color-5);
  background: white;
}

#cd-ppc-services .card .image-container{
  display: flex;
  justify-content: center;
  align-items: center;
  width: min(56px, 100%);
  height: min(56px, 100%);
}

#cd-ppc-services .card .image-container img{
  object-fit: contain;
}

#cd-ppc-services .card-text h3{
  font: 700 1rem/1.5rem var(--font-metropolis);
  letter-spacing: 0;
  color: #5B5C61;
}
#cd-ppc-services .card-text:not(:first-child){
  margin-top: 16px;
}

#cd-ppc-services .card-text h3:not(:last-child){
  margin-bottom: 8px;
}

#cd-ppc-services .card-text div{
  font: 1rem/1.5rem var(--font-metropolis);
  letter-spacing: 0;
  color: #5B5C61;
}

/*******************************************************
 *
 * Steps
 *
 *******************************************************/
#cd-ppc-steps.cd-ppc-steps{
  background: white;
}

#cd-ppc-steps .content{
  padding: 80px 0;
}

#cd-ppc-steps .content-row{
  display: flex;
  flex-flow: row-reverse nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 82px;
}

#cd-ppc-steps .image{
  flex: 1 1 auto;
  align-self: flex-start;
  min-width: 425px;
  width: 100%;
  max-width: min(650px, 100%);
}

#cd-ppc-steps .image img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#cd-ppc-steps .image__arfix{
  position: relative;
  height: 0;
  padding-bottom: 92.30%;
}

#cd-ppc-steps .text-content h2{
  font: 700 2.5rem/3rem var(--font-metropolis);
  letter-spacing: 0;
  color: #2A4357;
}

#cd-ppc-steps .list{
  margin-top: 40px;
}

#cd-ppc-steps .list li{
  display: flex;
  flex-flow: row nowrap;
  gap: 16px;
}

#cd-ppc-steps .list li + li{
  margin-top: 24px;
}

#cd-ppc-steps .list li:before{
  content: attr(data-order);
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 53px;
  font: 700 2.5rem/2.5rem var(--font-metropolis);
  letter-spacing: 0;
  color: #419FF8;
  border-right: 1px solid var(--black-color-2);
}

#cd-ppc-steps .list .item__title{
  font: 700 1.25rem/1.875rem var(--font-metropolis);
  letter-spacing: 0;
  color: var(--black-color-2);
}

#cd-ppc-steps .list .item__content{
  font: 1rem/1.5rem var(--font-metropolis);
  letter-spacing: 0;
  color: var(--black-color-2);
}

/*******************************************************
 *
 * Contact
 *
 *******************************************************/
#cd-ppc-contact.cd-ppc-contact{
  background: var(--white-color-9);
}

#cd-ppc-contact .content{
  padding: 64px 0;
}

#cd-ppc-contact .content-row{
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 64px;
}

#cd-ppc-contact .image{
  flex: 1 1 auto;
  position: relative;
  min-width: 425px;
  width: 100%;
  max-width: min(608px, 50%);
}

#cd-ppc-contact .image img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#cd-ppc-contact .image__arfix{
  position: relative;
  height: 0;
  padding-bottom: 65.78%;
}

#cd-ppc-contact .text-content{
  flex: 1 1 auto;
  letter-spacing: 0;
}

#cd-ppc-contact .text-content > * + * {
  margin-top: 16px;
}

#cd-ppc-contact .text-content h2{
  font: 700 2.25rem/3rem var(--font-metropolis);
  letter-spacing: 0;
  color: #2A4357;
}

#cd-ppc-contact .text-content .description > * + * {
  margin-top: 16px;
}

#cd-ppc-contact .text-content .description {
  font: 1rem/1.5rem var(--font-metropolis);
  letter-spacing: 0;
}

#cd-ppc-contact .cta-button__wrapper{
  margin-top: 40px;
}

/*******************************************************
 *
 * Media Queries
 *
 *******************************************************/
@media only screen and (max-width: 1280px){
  /*******************************************************
   *
   * Why Choose Loft
   *
   *******************************************************/
  #cd-ppc-why-choose-loft .row{
    gap: 80px;
  }

  /*******************************************************
   *
   * Services
   *
   *******************************************************/
  #cd-ppc-services .card{
    width: calc((100% - (24px * 3)) / 4);
  }
}

@media only screen and (max-width: 1024px){
  .cd-ppc-container{
    padding: 0 48px;
  }

  /*******************************************************
   *
   * Services
   *
   *******************************************************/
  #cd-ppc-services .card{
    width: calc((100% - (24px * 2)) / 3);
  }
}

@media only screen and (max-width: 991px){
  /*******************************************************
   *
   * Banner
   *
   *******************************************************/
  #cd-ppc-banner.banner{
    background: none;
  }

  #cd-ppc-banner .cd-ppc-container{
    padding: 0;
  }

  #cd-ppc-banner .banner-content{
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0;
    padding: 0;
  }

  #cd-ppc-banner .banner-text{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    padding: 100px 25px;
    background-image: linear-gradient(rgba(0, 0, 0, 0.64), rgba(0, 0, 0, 0.64)), var(--bg-image, none);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
  }

  #cd-ppc-banner .banner-text > * {
    margin-left: auto;
    margin-right: auto;
    max-width: 768px;
    text-align: center;
  }


  /* Form */
  #cd-ppc-banner .banner-form__form{
    width: 470px;
  }

  #cd-ppc-banner .banner-form__container{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    max-width: none;
  }

  #cd-ppc-banner .banner-form__form-submit{
    width: 100%;
  }

  #cd-ppc-banner .banner-form__container .form-terms{
    margin: 25px 0 0;
    text-align: center;
  }

  /*******************************************************
   *
   * Why Choose Loft
   *
   *******************************************************/
  #cd-ppc-why-choose-loft .content-row{
    flex-flow: column nowrap;
    align-items: center;
    padding: 64px 24px;
    gap: 40px;
    background: var(--secondary-color);
  }

  #cd-ppc-why-choose-loft .image{
    align-self: center;
    min-width: 0;
    max-width: 500px;
  }

  /*******************************************************
   *
   * Steps
   *
   *******************************************************/
  #cd-ppc-steps .content-row{
    flex-flow: column nowrap;
    align-items: center;
    gap: 64px;
  }

  #cd-ppc-steps .image{
    align-self: center;
    min-width: 0;
    width: min(500px, 100%);
  }

   /*******************************************************
   *
   * Contact
   *
   *******************************************************/
   #cd-ppc-contact .content-row{
    flex-flow: column nowrap;
    align-items: center;
    gap: 40px;
  }

  #cd-ppc-contact .image{
    align-self: center;
    min-width: 0;
    max-width: 500px;
  }

  #cd-ppc-contact .text-content{
    max-width: 500px;
  }

  #cd-ppc-contact .cta-button__wrapper a{
    width: 100%;
  }
}

@media only screen and (max-width: 768px){
  .cd-ppc-container{
    padding: 0 36px;
  }

  /*******************************************************
   *
   * Services
   *
   *******************************************************/
  #cd-ppc-services .card{
    width: calc((100% - (24px)) / 2);
  }
}

@media only screen and (max-width: 480px){
  .cd-ppc-container{
    padding: 0 24px;
  }
  
  /*******************************************************
   *
   * Services
   *
   *******************************************************/
  #cd-ppc-services .card{
    flex-flow: column nowrap;
  }

  #cd-ppc-services .card{
    width: 100%;
  }
}