/* Hero Section */
.hero-section {
  margin-bottom: 133px;

  @media (max-width: 768px) {
    margin-bottom: 84px;
  }
}

.hero-section-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 51px;

  @media (max-width: 768px) {
    flex-direction: column-reverse;
    gap: 36px;
  }
}

.hero-section-text-container {
  max-width: 476px;
  gap: 40px;
}


.hero-section-image {
  width: 597px;
}

/* Section One */
.section-one {
  margin-bottom: 122px;

  @media (max-width: 768px) {
    margin-bottom: 67px;
  }
}

.section-one-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 106px;

  @media (max-width: 768px) {
    flex-direction: column-reverse;
    gap: 59px;
  }
}

.section-one-tilting-cards-container {
  width: 100%;
  max-width: 580px;

  @media (min-width: 769px) and (max-width: 1439px) {
    max-width: 500px;
  }
}
  .section-one-container .section-one-tilting-cards-container .jpl-tilting-cards-component .container-column .jpl-tilting-cards-cards-container{
    flex-wrap: wrap;
    overflow: hidden;
  @media (min-width: 769px) and (max-width: 1024px){
    flex-wrap: nowrap;
    overflow:hidden;
  }
  }

.section-one-text-container {
  max-width: 439px;
  gap: 32px;
}

.section-one-header {
  max-width: 391px;
}

.section-one-text {
  max-width: 415px;
}

/* Section Two */
.section-two {
  margin-bottom: 79px;

  @media (max-width: 768px) {
    margin-bottom: 53px;
  }
}

.section-two-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 159px;

  @media (max-width: 768px) {
    flex-direction: column-reverse;
    gap: 30px;
  }
}

.section-two-text-container {
  max-width: 439px;
  width: 100%;
  gap: 32px;
}

.section-two-header {
  max-width: 390px;
}

.section-two-text {
  max-width: 390px;
}

.section-two-image {
  width: 592px;
  height: 403px;
  border-radius: 10px;
  box-shadow: 0 4px 50.4px 0 rgba(62, 60, 93, 0.46);
}

/* Section Three */
.section-three {
  margin-bottom: 130px;

  @media (max-width: 768px) {
    margin-bottom: 91px;
  }
}

.section-three-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.section-three-video {
  width: 1109px;
  height: 507px;
  border-radius: 30px;

  @media (max-width: 768px) {
    height: 219px;
  }
}

/* Section Four */
.section-four {
  margin-bottom: 100px;

  @media (max-width: 768px) {
    margin-bottom: 105px;
  }
}

.section-four-container {
  justify-content: center;
  align-items: center;
  gap: 100px;

  @media (max-width: 768px) {
    gap: 50px; 
  }
}

.section-four-icon-text-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 30px;

  @media (max-width: 768px) {
    width: 100%;
    justify-content: start;
    flex-direction: column;
  }
}

.section-four-icon-row {
  justify-content: center;
  align-items: center;
  gap: 30px;
}

.section-four-icon-text {
  max-width: 213px;

  @media (max-width: 768px) {
    max-width: 100%;
    font-weight: 700;
  }
}

.section-four-icon {
  width: 73px;
  height: 73px;
  border-radius: 73px;
}

/* Section Five*/
.section-five {
  margin-bottom: 103px;

  @media (max-width: 768px) {
    margin-bottom: 67px;
  }
}

/* Section Six */
.section-six-container {
  display: flex;
  flex-direction: row;
  gap: 150px;

  @media (max-width: 768px) {
    flex-direction: column;
    gap: 70px;
  }
}

.section-six-text-container {
  max-width: 483px;
  width: 100%;
  gap: 42px;

  @media (max-width: 768px) {
    padding: 0;
    width: 100%;
  }

  @media (min-width: 769px) and (max-width: 1439px) {
    max-width: 430px;
  }
}


.section-five-testimonial-container .jpl-testimonial-card{
  margin-top: 50px;
  transform:rotate(2.454deg);
  box-shadow: 0 4px 50.4px 0 rgba(62, 60, 93, 0.46);
}

.section-six-text-container-cta-icon {
  width: 20px;
}


/* RESPONSIVE LAYER */

@media (max-width: 768px) {
  .hero-section-container {
    width: 100%;
  }

  .hero-section-image {
    width: min(597px, 100%);
    height: auto;
  }

  .section-one-container,
  .section-two-container,
  .section-four-container {
    width: 100%;
  }

  .section-one-tilting-cards-container {
    /* max-width: 100%; */
  }

  .section-two-image {
    width: min(358px, 100%);
    height: auto;
  }

  .section-three-video {
    width: 100%;
    height: auto;
    aspect-ratio: 1109 / 507;
  }

  .section-four-icon-text {
    max-width: 100%;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .hero-section-container {
    gap: 36px;
  }

  .hero-section-text-container {
    max-width: 43%;
  }

  .hero-section-image {
    width: min(52vw, 500px);
    height: auto;
  }

  .section-one-container,
  .section-two-container,
  .section-four-container {
    gap: 42px;
  }

  .section-one-tilting-cards-container {
    /* max-width: 54%; */
  }

  .section-one-text-container,
  .section-two-text-container {
    max-width: 43%;
  }

  .section-two-image {
    width: min(30vw, 592px);
    height: auto;
  }

  .section-three-video {
    width: 100%;
    height: auto;
    aspect-ratio: 1109 / 507;
  }

  .section-four-icon-text-container {
    flex-wrap: wrap;
  }
}

@media (min-width: 1025px) and (max-width: 1919px) {
  .hero-section-container {
    gap: clamp(45px, 5vw, 70px);
  }

  .hero-section-image {
    width: min(47vw, 597px);
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 50.4px 0 rgba(62, 60, 93, 0.46);
  }

  .section-one-container {
    gap: clamp(55px, 7vw, 106px);
  }

  .section-one-tilting-cards-container {
    max-width: 580px;
  }

  .section-two-container {
    gap: clamp(60px, 8vw, 159px);
  }

  .section-two-image {
    max-width: 592px;
    width: 30vw;
    height: auto;
  }

  .section-three-video {
    width: min(100%, 1109px);
    height: auto;
    aspect-ratio: 1109 / 507;
  }

  .section-four-container {
    gap: clamp(50px, 7vw, 60px);
  }
}

@media (min-width: 1920px) and (max-width: 2559px) {
  .hero-section-container {
    gap: 80px;
  }

  .hero-section-image {
    width: 620px;
  }

  .section-one-container {
    gap: 110px;
  }

  .section-two-container {
    gap: 130px;
  }

  .section-three-video {
    width: 1160px;
    max-width: 100%;
    height: auto;
  }
}

@media (min-width: 2560px) {
  .hero-section-container {
    gap: 100px;
  }

  .hero-section-image {
    width: 650px;
  }

  .section-one-container {
    gap: 125px;
  }

  .section-two-container {
    gap: 150px;
  }

  .section-three-video {
    width: 1200px;
    max-width: 100%;
    height: auto;
  }
}