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

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

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

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

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

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

.hero-section-text {
  max-width: 378px;
}

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

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

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

.section-one-container {
  justify-content: center;
  align-items: center;
  gap: 83px;
}

.section-one-header-container {
  max-width: 838px;
  text-align: center;
  gap: 28px;

  @media (max-width: 768px) {
    text-align: start;
  }
}

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

.section-one-main-container {
  display: flex;
  flex-direction: row;
  gap: 35px;

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

.section-one-image {
  width: 543px;
  border-radius: 30px;
  overflow: hidden;
}

.section-one-text-panel-container {
  max-width: 516px;
}

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

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

.section-two-container {
  justify-content: center;
  align-items: center;
  gap: 42px;

  @media (max-width: 768px) {
    align-items: start;
  }
}

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

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

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

.section-three-container {
  gap: 50px;
}

.section-three-header {
  color: var(--dark-blue);
  font-family: var(--font-outfit);
  font-size: 25px;
  font-weight: 700;
  line-height: 45px;
  letter-spacing: -0.25px;

  @media (max-width: 768px) {
    font-size: 30px;
    line-height: 39px;
    letter-spacing: -.9px;
  }
}

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

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

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

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

.section-four-text-container {
  max-width: 492px;
  gap: 32px;
}

.section-four-text {
  max-width: 449px;
}

.section-four-text-panel-container {
  max-width: 516px;
}

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

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

.section-five-container {
  justify-content: center;
  align-items: center;
  gap: 40px;
}

.section-five-header {
  
  @media (max-width: 768px) {
    font-size: 37px;
  }
}

.section-five-headshots-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 27px;
}

.section-five-production-leadership-container {
  max-width: 1000px;
}

.section-five-headshot-container {
  width: 220px;
  display: flex;
  flex-direction: column;

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

.section-five-headshot {
  width: 100%;
  height: auto;
  padding-bottom: 17px;
}

.section-five-headshot-name {
  font-family: var(--font-outfit);
  color: var(--dark-blue);
  font-size: 18px;
  font-weight: 500;
  line-height: 29px;
  padding-left: 17.5px;
}

.section-five-headshot-title {
  color: var(--dark-blue);
  max-width: 202px;
  font-size: 12px;
  line-height: 15px;
  letter-spacing: .36px;
  padding-left: 17.5px;
}

.prod-lead{
  margin-top:75px;
}

/* Section Six*/
.section-six {
  margin-bottom: 200px;

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

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

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

.section-six-image {
  width: 624px;
}

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

.section-six-header {
  max-width: 339px;
}

.section-six-subheader {
  max-width: 414px;
  font-weight: 700;
}

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

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

.section-seven-text-container {
  max-width: 598px;
  /* padding-left: 125px; */
  gap: 42px;

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

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

.section-seven-text-container-header {

  @media (max-width: 768px) {
    font-size: 70px;
  }
}

.section-seven-text-container-text {
  font-size: 18px;
  line-height: 28px;
  margin: 0;

  @media (max-width: 768px) {
    font-size: 16px;
  }
}

.section-seven-text-container-cta {
  background-color: var(--dark-blue);
  color: white;
  border-radius: 4px;
  width: 230px;
  height: 57px;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 8px;
}

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

/* RESPONSIVE LAYER */

@media (max-width: 768px) {
  .hero-section-container,
  .section-one-main-container,
  .section-four-container,
  .section-six-container,
  .section-seven-container {
    width: 100%;
  }

  .hero-section-image,
  .section-one-image,
  .section-six-image {
    width: 100%;
    max-width: 624px;
    height: auto;
  }

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

  .section-five-headshots-container {
    width: 100%;
    gap: 20px;
  }

  .section-five-headshot-container {
    width: max(160px, calc(62vw - 10px));
  }

  .section-five-headshot-name,
  .section-five-headshot-title {
    padding-left: 0;
  }
}

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

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

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

  .section-one-main-container,
  .section-four-container,
  .section-six-container,
  .section-seven-container {
    gap: 42px;
  }

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

  .section-one-text-panel-container,
  .section-four-text-panel-container,
  .section-six-text-container,
  .section-seven-text-container {
    max-width: 46%;
  }

  .section-five-production-leadership-container {
    max-width: 100%;
  }

  .section-five-headshots-container {
    gap: 20px;
  }

  .section-five-headshot-container {
    width: 190px;
  }

  .section-six-image {
    width: min(48vw, 520px);
    height: auto;
  }
}

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

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

  .section-one-main-container {
    gap: clamp(45px, 5vw, 75px);
  }

  .section-one-image {
    width: min(46vw, 543px);
    height: auto;
  }

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

  .section-six-container {
    gap: clamp(70px, 8vw, 125px);
  }

  .section-six-image {
    width: min(47vw, 624px);
    height: auto;
  }

  .section-seven-text-container {
    padding-left: 0;
    max-width: 598px;
  }
}

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

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

  .section-one-main-container {
    gap: 90px;
  }

  .section-one-image {
    width: 570px;
  }

  .section-six-container {
    gap: 140px;
  }

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

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

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

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

  .section-one-image {
    width: 600px;
  }

  .section-six-container {
    gap: 160px;
  }

  .section-six-image {
    width: 680px;
  }
}