@media (min-width: 991.99px) {
  .section.animated.hero-section .rotated {
    animation: bottom_to_top 1.5s forwards;
  }
  .hero-section {
    overflow: unset;
  }
  .hero-section img {
    height: 100dvh;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
  }
  .hero-section .nav-link {
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), color 0.4s ease-out;
  }
  .hero-section .nav-link:last-child {
    color: rgba(0, 0, 0, 0.1);
  }
  .hero-section a.active {
    color: rgba(0, 0, 0, 0.7490196078) !important;
    transform: translateY(-20px); /* slide up a bit */
  }
  .hero-section .section {
    height: 100vh;
  }
  .hero-section .left-side {
    padding: 0;
    float: left;
    width: 60%;
  }
  .hero-section .left-side .inner {
    position: sticky;
    top: 0;
  }
  .hero-section .benefits {
    width: 40%;
    float: right;
    position: sticky;
    top: 0;
    height: 100vh;
  }
  .hero-section .benefits div#nav {
    position: absolute;
    bottom: 20px;
    left: 0;
    padding: 0 20px;
  }
  .hero-section .benefits a {
    font-size: 50px;
    line-height: 60.9px;
    letter-spacing: 0.9px;
  }
  .hero-section h1 {
    font-size: 83px;
    line-height: 75.48px;
    letter-spacing: 1.28px;
    top: 110px;
    width: 100%;
    padding: 0 12%;
  }
  .hero-section .rotated {
    top: 280px;
    right: 15%;
    height: 360px;
    animation: bottom_to_top 1.5s ease;
    z-index: 1;
  }
  .hero-section h2 {
    font-size: 45px;
    line-height: 41.8px;
    letter-spacing: 0.8px;
    white-space: normal;
  }
  .explore-collections {
    padding: 200px 0 100px 0;
  }
  .explore-collections .rotated {
    width: 60%;
  }
  .explore-collections h2 {
    font-size: 83px;
    line-height: 75.48px;
    letter-spacing: 1.28px;
    transform: unset;
    writing-mode: unset;
    padding: 0 48px;
  }
  .explore-collections h3 {
    margin-right: 20px;
  }
  .explore-collections .flip-text {
    width: 40%;
    font-size: 45px;
    padding: 0 20px;
  }
  .explore-collections .content, .explore-collections .img-content {
    margin-bottom: 90px;
  }
  .explore-collections .content {
    padding: 0 60px;
  }
  .explore-collections .content .text, .explore-collections .content .textarea, .explore-collections .content p {
    font-size: 24px;
    line-height: 36px;
    margin-bottom: 25px;
  }
  .explore-collections .content a {
    font-size: 20px;
    line-height: 36px;
  }
  .explore-collections .content a.visible:hover:after {
    width: 0;
  }
  .explore-collections .slide-in-img {
    height: 100vh;
  }
  .home_why_spc {
    padding-top: 100px;
    padding-bottom: 200px;
  }
  .home_why_spc h2 {
    font-size: 128px;
    line-height: 116.48px;
    letter-spacing: 1.28px;
    top: 50px;
  }
  .home_why_spc .marquee .marquee__content {
    font-size: 96px;
    font-weight: 400;
    line-height: 65px;
  }
}
@media (min-width: 1200px) {
  .hero-section h1 {
    font-size: 100px;
    line-height: 90.48px;
  }
  .hero-section .rotated {
    top: 300px;
    height: 510px;
  }
  .hero-section h2 {
    font-size: 65px;
    line-height: 58.8px;
  }
  .hero-section .benefits a {
    font-size: 60px;
    line-height: 71.9px;
  }
  .explore-collections h2 {
    font-size: 100px;
    line-height: 90.48px;
  }
}
@media (min-width: 1400px) {
  .hero-section h1 {
    font-size: 128px;
    line-height: 116.48px;
  }
  .hero-section .rotated {
    height: 585px;
    top: 360px;
  }
  .hero-section div#nav {
    bottom: 50px;
  }
  .hero-section h2 {
    font-size: 80px;
    line-height: 72.8px;
  }
  .hero-section .benefits a {
    font-size: 70px;
    line-height: 70.9px;
  }
  .explore-collections h2 {
    font-size: 128px;
    line-height: 116.48px;
  }
}