@media only screen and (min-width: 1080px) {
  .hero-container {
    flex-direction: row !important;
    position: relative;
  }



  .hero-flex1 {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: var(--spacing-fluid-lg);
    align-items: flex-start;
    height: 100%;
    gap: var(--spacing-fluid-lg);
    /* background-color: aqua; */

    & .hero-flex1-container {
      max-width: 40%;
      /* background-color: aquamarine; */
      display: flex;
      align-items: flex-end;
      justify-content: space-between;

      & h5 {
        width: 70%;
      }
    }

    & img {
      max-width: 40%;
    }

    /* background-color: aquamarine; */
  }

  .hero-flex2 {
    position: absolute;
    z-index: 0;

    & .hero-flex2-image {
      background-position: left !important;
    }
  }

  .hero-flex1-selection {
    display: none !important;
  }

  .section2-header {
    display: flex;
    position: relative;
    flex-direction: row;
    gap: var(--spacing-fluid-md);
    align-items: flex-start;
  }

  .filler {
    height: calc(8 * 1.4em);
    width: calc(8 * 1.4em);
    overflow: hidden;

    border-top-left-radius: 20%;

    background-image: url("../assets/images/gradient1.jpeg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .section2-header-img-container {
    height: auto;
    max-width: 100%;
    object-fit: cover;
  }

  .filler-block {
    display: block !important;
    /* Show on tablet and up */
    width: auto;
    height: auto;
  }

  .section2-sticky-1 {
    /* margin-bottom: 24vh !important; */
  }

  .section2-sticky-2 {
    /* margin-bottom: 12vh !important; */
    top: calc(var(--header-height) + 10em) !important;
  }

  .section2-sticky-3 {
    top: calc(var(--header-height) + 20em) !important;
  }


  .section3-works-container {
    padding: 0vh 0 !important;
    margin: 12vh 0 !important;
  }

  /**  Desktop section 3 hover  */
  .section3-hover-container {
    display: block !important;
    height: 0vh;
    width: 35vw;
    position: absolute;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;


    transform: translateY(-50%);
    transition: height 0.3s ease-out, opacity 0.3s ease-out;
    transform-origin: center center;

    & img {
      height: 0;
      width: 100%;
      object-fit: cover;

      transition: height 0.3s ease-out, opacity 0.3s ease-out;

    }
  }

  .section3-text-h6 {
    color: var(--text-body) !important;
    cursor: pointer;

    transition: color 0.3s ease-out;
  }
  .section3-text-h6:hover {
    color: var(--text-body) !important;
  }

  .section3-hover-container-show {
    height: 45vh !important;

    & img {
      height: 45vh !important;
    }
  }

  .section4-sticky-1 {
    top: var(--header-height) !important;
    margin-bottom: 42vh !important;
  }
  
  .section4-sticky-2 {
    top: calc(var(--header-height) + 4em) !important;
    margin-bottom: 30vh !important;
  }
  
  .section4-sticky-3 {
    top: calc(var(--header-height) + 9em) !important;
    margin-bottom: 15vh !important;
  }
  
  .section4-sticky-4 {
    top: calc(var(--header-height) + 11em) !important;
    margin-bottom: 20vh !important;
  }

}

@media only screen and (min-width: 768px) {

  .hide {
    display: none !important;
  }

  .max-width {
    max-width: 60% !important;
  }

  .hero-flex1 {
    justify-content: center !important;

    & .hero-flex1-container {
      max-width: 60% !important;
      /* flex-direction: row !important; */
      /* align-items: flex-end !important; */

    }

    & img {
      max-width: 60% !important;
    }
  }

  .sticky-toc {
    display: block !important;
    position: fixed !important;
    bottom: 0;
    right: var(--spacing-fluid-lg);
    align-items: end;
    z-index: 100;

    & .sticky-toc-container {
      display: flex;
      flex-direction: column;
      align-items: flex-end;

      & .intro {
        /* background-color: aqua; */
        width: fit-content;
      }
    }
  }

  .toc-title {
    cursor: pointer;
    transition: transform 0.3s ease;
  }

  .toc-title:hover {
    transform: translateX(-10%) !important;
  }

  .section2-header {
    display: flex;
    position: relative;
    flex-direction: row;
    gap: var(--spacing-fluid-md);
    align-items: flex-start;
  }

  .filler {
    height: calc(8 * 1.4em) !important;
    width: calc(8 * 1.4em) !important;
    overflow: hidden !important;

    background-image: url("../assets/images/gradient1.jpeg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .section2 {
    max-width: 60% !important;
  }

  .section2-header-img-container {
    height: auto;
    max-width: 100%;
    object-fit: cover;
  }

  .section2-sticky-1 {
    /* margin-bottom: 20vh !important; */
  }
  
  .section2-sticky-2 {
    /* margin-bottom: 10vh !important; */
  }


  & li::after {
    width: calc(100% - 5em) !important;
  }

  .section3-works-container {
    width: 60% !important;
  }

  .section4 {
    width: 60% !important;
  }

  .section4-text-container {
    gap: 60vh !important;
  }

  .section4-sticky-1 {
    top: var(--header-height) !important;
    margin-bottom: 42vh !important;
  }
  
  .section4-sticky-2 {
    top: calc(var(--header-height) + 4em) !important;
    margin-bottom: 30vh !important;
  }
  
  .section4-sticky-3 {
    top: calc(var(--header-height) + 12em) !important;
    margin-bottom: 18vh !important;
  }
  
  .section4-sticky-4 {
    top: calc(var(--header-height) + 16em) !important;
    margin-bottom: 8vh !important;
  }
  
}

/** ---------------------- CSS Start HERE (MOBILE) ----------------------*/

.pad {
  padding-left: var(--spacing-fluid-lg);
  padding-right: var(--spacing-fluid-lg);
  padding-top: calc(70px * 1.5);
}

.max-width {
  max-width: 100%;
}

/** ---------------------- SECTION 1 ----------------------*/

.section1 {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.hero-filler {
  width: 100%;
}

.hero-container {
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
  align-items: flex-start;
  flex-direction: column;
}

.hero-flex1 {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--spacing-fluid-lg);
  align-items: flex-start;
  height: 100%;
  gap: var(--spacing-fluid-lg);
  /* background-color: aqua; */

  & .hero-flex1-container {
    max-width: 100%;
    /* background-color: aquamarine; */
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-fluid-sm);
    flex-direction: column;

    & h5 {
      width: 70%;
    }

    & h6 {
      width: 70%;
    }

    & .hero-flex1-into-text {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-fluid-sm);
    }
  }

  & img {
    max-width: 80%;
  }

  /* background-color: aquamarine; */
}



/** ---------------------- SECTION 1 END----------------------*/


/** ---------------------- SECTION 2 START----------------------*/




.section2-header {
  display: flex;
  position: relative;
  flex-direction: row;
  gap: var(--spacing-fluid-md);
  align-items: flex-start;
  padding-bottom: var(--spacing-fluid-lg);
}

.section2-header-text{
  display: flex;
  flex-direction: column;
  gap: var(--spacing-fluid-sm);
  flex: 1;
}

.filler-block {
  display: none;
  /* Hide by default on mobile */
  overflow: hidden;
  border-radius: var(--radius-rounded);
  background-image: url("../assets/images/gradient1.jpeg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  flex-shrink: 0;
  opacity: 0;
}

.section2-header-img-container {
  height: auto;
  max-width: 100%;
  object-fit: cover;
}

.section2-card-section {
  display: flex;
  flex-direction: column;
  padding-top: var(--spacing-fluid-lg);
  gap: 15vh;
}

/* Section 2 Card START */

.section2-card-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-fluid-xxl);
  padding-top: var(--spacing-fluid-lg);
  border-top: 1px solid currentColor;
  height: calc(100vh - (70px * 1.5));
}

.section2-card-header {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-fluid-md);
}

.section2-card-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-fluid-md);
}

.section2-card-content-list {
  & ol {
    list-style: none;
    counter-reset: services-counter;
    padding: 0;
  }

  & li {
    counter-increment: services-counter;
    position: relative;
    padding-left: 5em;
    padding-bottom: 1em;
    margin-bottom: 1em;
    width: 70%;
  }

  & li::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 5em;
    width: 0% !important;
    transition: width 2.5s ease-out;
    height: 0.5px;
    background-color: currentColor;
  }

  & li:last-child::after {
    display: none;
  }

  & li::before {
    content: "0" counter(services-counter);
    position: absolute;
    left: 0;
    font-family: "IBMPlexMono";
    font-size: var(--h5-font-size);
  }

  h6 {
    font-family: "IBMPlexMonoMedium";
  }
}

li.animate::after {
  width: 100% !important;
}

.section2-sticky-1 {
  position: sticky;
  top: var(--header-height);
  /* margin-bottom: 20vh; */
}

.section2-sticky-2 {
  position: sticky;
  background-color: var(--surface-base);
  top: calc(var(--header-height) + 8em);
  /* margin-bottom: 10vh; */
}

.section2-sticky-3 {
  position: sticky;
  background-color: var(--surface-base);
}



/* Section 2 Card END */

/** ---------------------- SECTION 2 END ----------------------*/

/** ---------------------- SECTION 3 START----------------------*/

.section3 {
  height: 100vh;
  /* background-color: var(--surface-base-invert); */
  border-radius: var(--spacing-fluid-lg) var(--spacing-fluid-lg) 0 0;
  position: relative;

  & h5,
  h3, h6 {
    color: var(--text-body-invert);
  }
}

.section3-works-container {
  padding: 12vh 0;
  display: flex;
  flex-direction: column;
  /* background-color: var(--surface-base-invert); */

}

.section3-works-card-container {
  border-top: 1px solid var(--border-body);
  padding: var(--spacing-fluid-md) 0;
}

.section3-works-card-container:last-child {
  border-bottom: 1px solid var(--border-body);
}

.section3-hover-container {
  display: none;
}

.section3-text-h6 {
  color: var(--text-body-invert) !important;
}

.section3-text-one {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-fluid-sm);
}


.background-video {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  border-radius: var(--spacing-fluid-xxl) var(--spacing-fluid-xxl) 0 0;

}

.video-fallback {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  border-radius: var(--spacing-fluid-xxl) var(--spacing-fluid-xxl) 0 0;

}






/** ---------------------- SECTION 3 END----------------------*/

/** ---------------------- SECTION 4 START----------------------*/

.section4 {
  position: relative;;
  /* background-color: var(--surface-base-invert); */
  /* border-radius: 0 0 var(--spacing-fluid-lg) var(--spacing-fluid-lg); */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  /* gap: var(--spacing-fluid-md); */

  padding-bottom: 100vh;
  /* margin-bottom: 30vh; */
}


.section4-header {
  background-color: var(--surface-base);
  padding: 6px 18px;
  border-radius: 16px;
  width: fit-content;
}


.section4-text-container {
  display: flex;
  flex-direction: column;
  gap: 10vh;
}

.section4-text {
  color: var(--text-body-invert);
}

.section4-sticky-1 {
  position: sticky;
  top: var(--header-height);
  margin-bottom: 20vh;
}

/* 30vh gap * 3 = 90vh, each text about 10vh */

.section4-sticky-2 {
  position: sticky;
  top: calc(var(--header-height) + 4em);
  margin-bottom: 80vh;
  /* background-color: var(--surface-base); */
}

.section4-sticky-3 {
  position: sticky;
  top: calc(var(--header-height) + 4em);
  margin-bottom: 30vh;
  /* background-color: var(--surface-base); */
}

.section4-sticky-4 {
  position: sticky;
  top: calc(var(--header-height) + 4em);
  margin-bottom: 0vh;
  /* background-color: var(--surface-base); */
}

/** ---------------------- SECTION 4 END----------------------*/

.scroll-top-button {
  z-index: 10;

  position: fixed;
  bottom: 8px;
  right: 8px;
}

.sticky-toc {
  display: none;
}

.sticky-toc h2 {
  opacity: 1;
  /* display: none; */
  height: 0;
}

/** ---------------------- GSAP ----------------------*/

.appear-text1 {
  opacity: 0;
}

/** ---------------------- GSAP END ----------------------*/

.services-text {
  flex: 1;
  max-width: 70%;
}