/* Section Styles */

.hero {
  position: relative;
  padding: 5rem 2.5rem;

  .hero-img {
    padding: 2rem;
    margin-bottom: -20rem;
    img {
      width: 100%;
      margin: auto;
      filter: drop-shadow(0 0 5rem rgb(255, 255, 255));
    }
  }

  .hero-text p {
    margin: 1.5rem 0;
  }

  .jumble {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    margin-right: -10%;
    margin-top: -7%;
    transform: rotate(-40deg);
    opacity: 0.1;
  }
}

.events {
  padding: 10rem 2.5rem;
  h2 {
    margin: 0 calc(2.5rem / 2);
    margin-bottom: 5rem;
    margin-top: 2.5rem;
  }
}

.events .events-card {
  padding: 2rem;
  border: 2px solid var(--color-bgs);
  flex: 0 0 calc(50% - 2.5rem);
  max-width: calc(50% - 2.5rem);
  margin: calc(2.5rem / 2);
  display: flex;
  flex-direction: column;
  transition: 0.2s ease;
  will-change: transform;
  * {
    margin: 0;
  }
  span {
    color: var(--color-subtext);
  }
  h6 {
    line-height: 1;
    margin: 1rem 0;
  }
  p {
    line-height: 1.1;
    margin-bottom: 1rem;
  }
  a {
    display: block;
    margin-top: auto;
    text-align: center;
  }
}

.events .events-card:hover {
  transform: scale(1.02) perspective(1px);
  border-color: var(--color-secondary);
}

.program {
  padding: 10rem 2.5rem;

  h2 {
    margin: 2.5rem calc(2.5rem / 2);
  }
  .program-list {
    padding: 2.5rem 0;
    margin: 0 calc(2.5rem / 2);
    display: flex;
    align-items: center;
    gap: 5rem;

    h3 {
      font-weight: 300;
      flex-shrink: 0;
      line-height: 1;
      text-align: right;
    }

    p {
      flex: 1;
      line-height: 1.5;
      font-size: clamp(1.2rem, 5vw, 1.6rem);
    }

    span {
      transition: 0.2s ease;
    }

    span:hover {
      background-color: var(--color-bgsdark);
      color: white;
      font-weight: 700;
      cursor: pointer;
    }
  }

  .program-heading {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .program-card {
      flex: 0 0 calc(33.3333% - 2.5rem);
      max-width: calc(33.3333% - 2.5rem);
      padding: 3rem;
      border: 2px solid var(--color-primary);
      margin: calc(2.5rem / 2);
      display: flex;
      flex-direction: column;
      transition: 0.2s ease;
      will-change: transform;
      h5 {
        color: var(--color-bgsdark);
        line-height: 1;
        margin: 1rem 0;
      }
      p {
        color: var(--color-subtext);
        width: 100%;
        margin: 0;
      }
    }
    .program-card:hover {
      cursor: pointer;
      transform: scale(1.05);
    }
    .program-card .program-card-text {
      display: flex;
      flex-direction: column;
      overflow-wrap: break-word;
    }
  }
}

.research {
  padding: 10rem 2.5rem;
  h2 {
    margin: 0 calc(2.5rem / 2);
  }
  p {
    margin: 3rem calc(2.5rem / 2);
  }
  hr {
    margin: 0 calc(2.5rem / 2);
    border: 0;
    border-top: 2px solid var(--color-primary);
    width: 6.4rem;
  }
  h3 {
    font-weight: 500;
    margin: 3rem calc(2.5rem / 2);
  }
  .research-point {
    padding: 3rem 0;
    margin: 0 calc(2.5rem / 2);
    display: flex;
    align-items: center;
    gap: 2.5rem;
    h4 {
      font-weight: 300;
      text-wrap: balance;
      flex-shrink: 0;
    }
    hr {
      margin: 0;
      width: 6.4rem;
      transform: rotate(110deg);
      flex-shrink: 0;
    }
    p {
      flex: 1;
      max-width: 768px;
      margin: 0;
    }
  }

  .research-impact {
    text-align: center;
    padding: 5rem 0;
    margin: 0 calc(2.5rem / 2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    h4 {
      font-weight: 300;
      line-height: 1.1;
      text-wrap: wrap;
    }
    picture {
      flex: 0 0 calc(60% - 2.5rem);
      img {
        mask-image: linear-gradient(to right, black 10%, transparent 90%);
      }
    }
    div {
      flex: 0 0 calc(40% - 2.5rem);
      text-align: left;
      p {
        margin: 2rem 0;
      }
    }
  }
}

.testimonials {
  padding: 10rem 2.5rem;
  text-align: center;
  h2 {
    padding-bottom: 2rem;
  }
  span {
    color: var(--color-primary);
  }
  .testimonial-slide {
    padding: 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 2.5rem calc(2.5rem / 2);
    border: 2px solid var(--color-primary);
    text-align: center;
    p {
      max-width: 60ch;
      margin: 0;
      font-style: italic;
    }
    h6 {
      margin: 0;
    }
  }
}

.resources {
  padding: 10rem 2.5rem;
  .resources-cont {
    margin: 0 calc(2.5rem / 2);
    text-align: center;
    h1 {
      font-size: clamp(4.2rem, 4vw, 6.4rem);
      font-weight: 500;
    }
    p {
      margin: 2rem auto;
      max-width: 65ch;
    }
    .pri-button {
      margin: 0 1rem;
    }
  }
}

.product-listing {
  padding: 10rem 2.5rem;
  h1 {
    font-size: clamp(4.8rem, 4vw, 6.4rem);
    font-weight: 500;
  }

  h2 {
    font-size: clamp(3.6rem, 4vw, 4.8rem);
    font-weight: 500;
  }

  h3 {
    font-size: clamp(2.4rem, 4vw, 3.6rem);
    margin: 1.5rem 0;
    font-weight: 500;
  }

  h4 {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
  }

  h5 {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    line-height: 1.1;
  }

  h6 {
    font-size: clamp(1.2rem, 3vw, 1.6rem);
  }

  p {
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    color: var(--color-subtext);
    margin: 0;
    line-height: 1.3;
    margin: 1rem 0 1.5rem 0;
  }
  ul {
    color: var(--color-subtext);
    padding: 0;
    margin: 2rem 0;
    li {
      font-size: clamp(1.2rem, 2vw, 1.6rem);
      margin: 1rem 2.5rem;
      line-height: 1.1;
      color: var(--color-subtext);
    }
  }
  hgroup {
    flex: 0 0 calc(50% - 2.5rem);
  }
  .product-cont {
    display: flex;
    justify-content: space-between;
    gap: 2.5rem;
    margin: 0 calc(2.5rem / 2);
    picture {
      flex: 0 0 calc(50% - 2.5rem);
    }
  }
  .order-type {
    text-align: center;
    margin: 0 calc(2.5rem / 2);
    padding: 2rem 0;
  }
}

.research-page {
  padding: 10rem 2.5rem;
  .research-page-cont {
    display: flex;
    gap: 2.5rem;
    margin: 0 calc(2.5rem / 2);
    .research-img {
      opacity: 0.7;
      transition: 0.2s ease;
    }

    .research-img:hover {
      transform: scale(1.01);
      opacity: 1;
    }

    h1 {
      font-size: clamp(4.8rem, 4vw, 6.4rem);
      font-weight: 500;
    }

    h2 {
      font-size: clamp(3.6rem, 4vw, 4.8rem);
      font-weight: 500;
    }

    h3 {
      font-size: clamp(2.4rem, 4vw, 3.6rem);
      margin: 1.5rem 0;
      font-weight: 500;
    }

    h4 {
      font-size: clamp(1.6rem, 4vw, 2.4rem);
    }

    h5 {
      font-size: clamp(1.6rem, 4vw, 2.4rem);
      line-height: 1.1;
      margin: 2rem 0 1rem 0;
    }

    h6 {
      font-size: clamp(1.2rem, 3vw, 1.6rem);
    }

    p {
      font-size: clamp(1.2rem, 2vw, 1.6rem);
      color: var(--color-subtext);
      margin: 0;
      line-height: 1.3;
      margin: 1rem 0 1.5rem 0;
    }
    ul {
      color: var(--color-subtext);
      padding: 0;
      margin: 2rem 0;
      li {
        font-size: clamp(1.2rem, 2vw, 1.6rem);
        margin: 1rem 2.5rem;
        line-height: 1.1;
        color: var(--color-subtext);
      }
    }
    hgroup {
      flex: 0 0 calc(50% - 2.5rem);
    }

    .research-img {
      position: relative;
      width: 100%;
      margin: 0 5rem 5rem 5rem;
    }

    .doc-img {
      width: 100%;
      height: auto;
    }

    .dl-icon {
      position: absolute;
      bottom: 0;
      right: 0;
      margin: 0 2rem 2rem 0;
    }
  }

  .research-listing {
    display: flex;
    flex-direction: row;
    justify-content: center;
    .research-stat {
      flex: 0 0 calc(33% - 2.5rem);
      max-width: calc(33% - 2.5rem);
      margin: 0 calc(2.5rem / 2);
      display: flex;
      align-items: center;
      text-align: center;
      padding: 0 3rem;
      .stat-icon-wrapper {
        margin: 0 auto;
        transform: rotate(-5deg);
        background-color: var(--color-primary);
      }
      .stat-icon {
        position: relative;
        margin: 0 auto;
        transform: scale(1.5) rotate(10deg);
        z-index: 0;
      }
      h3 {
        position: relative;
        font-size: clamp(4.8rem, 5vw, 7.2rem);
        font-weight: 900;
        color: var(--color-bgs);
        text-align: center;
        background-color: var(--color-primary);
        margin: 0;
        transform: rotate(-5deg);
        z-index: 0;
      }
      h4 {
        position: relative;
        text-align: center;
        line-height: 0.9;
        margin: -0.5rem 0 1rem 0;
        color: var(--color-bgsdark);
      }

      p {
        margin: 2rem 0 0 0;
        color: var(--color-subtext);
      }
    }
    .research-stat:nth-child(2) {
      h3 {
        transform: rotate(5deg);
      }
    }
  }
}

.quote-section {
  position: relative;
  padding: 10rem 2.5rem;
  .quote-ticks {
    position: absolute;
    font-size: 30vw;
    font-weight: 900;
    margin: 0 5rem;
    line-height: 1;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 0.8;
    color: #ececec;
  }
  h3 {
    position: relative;
    line-height: 1.2;
    font-weight: 400;
    color: #333333;
    z-index: 1;
    text-align: center;
  }
}

/* Section Styles */

/* BREAKPOINTS */

@media (max-width: 860px) {
  body {
    text-align: center;
  }

  nav {
    flex-direction: column;
  }

  header {
    position: static;
  }

  .footer-cont {
    flex-direction: column;
    width: 100%;
  }

  .footer-right {
    margin-top: 2.5rem;
  }

  .hero .grid .hero-img {
    grid-column-start: 1;
    grid-row-start: 1;
  }

  .hero .pri-button {
    display: block;
  }

  .events .events-card {
    flex: 0 1 100%;
    max-width: 100%;
  }

  .program .program-heading .program-card {
    flex-direction: column;
    flex: 0 1 100%;
    max-width: 100%;
    align-items: center;
    img {
      margin: 0;
    }
    .program-card-text {
      text-align: center;
    }
  }

  .program .program-list {
    flex-direction: column;
    gap: 0;
    h3 {
      text-align: center;
    }
  }

  .research {
    hr {
      margin: 0 auto;
    }
    .pri-button {
      display: block;
      text-align: center;
    }
  }

  .research .research-point {
    flex-direction: column;
    hr {
      transform: unset;
    }
    p {
      margin: 0;
    }
  }

  .research .research-impact {
    flex-direction: column;
    picture {
      img {
        mask-image: linear-gradient(black 10%, transparent 90%);
      }
    }
  }

  .product-listing {
    .pri-button {
      display: block;
    }
  }

  .product-listing .product-cont {
    flex-direction: column;
    align-items: center;
    ul p,
    ul li {
      text-align: left;
    }
  }

  .research-page .research-page-cont {
    flex-direction: column;
    align-items: center;
    li {
      text-align: left;
    }
    .dl-icon {
      margin: 0 1rem;
    }
  }

  .research-page .research-listing {
    flex-wrap: wrap;
  }

  .research-page .research-listing .research-stat {
    flex: 0 1 100%;
    max-width: 100%;
    margin: 2.5rem 0;
    .stat-cont {
      width: 100%;
    }
    h3 {
      width: 100%;
    }
    p {
      max-width: 25ch;
      margin: 2rem auto 0 auto;
    }
  }

  .quote-section .quote-ticks {
    top: 0;
    left: 0;
    width: 100%;
    margin: 5rem 0;
  }

  .resources .resources-cont {
    .pri-button {
      margin: 1rem 0;
    }
  }
}

@media (max-width: 1200px) {
  .jumble {
    display: none;
  }

  .hero .hero-img {
    margin-bottom: 0;
  }
}

/* BREAKPOINTS END */