.hero {
  position: relative;
  margin-bottom: 5rem; }
  .hero .hands-illustration {
    display: block;
    max-width: 320px;
    width: 100%;
    height: auto;
    margin: auto;
    margin-bottom: 7.5rem; }
  .hero .hero-image {
    max-width: 100%;
    height: auto; }

.image-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 5rem;
  gap: 2rem; }
  .image-container .product-container {
    flex: 1 1 48%;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 0.5s ease; }
    @media (max-width: 768px) {
      .image-container .product-container {
        flex: 1 1 100%; } }
    .image-container .product-container .image-wrapper {
      position: relative;
      aspect-ratio: 250 / 300;
      flex: 1; }
    .image-container .product-container .bg-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center; }
    .image-container .product-container .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0;
      transition: opacity 0.3s ease; }
    .image-container .product-container .overlay-text {
      font-family: "GFS Didot", serif;
      color: #ee4300;
      font-size: 40px;
      text-align: center; }
      @media screen and (min-width: 320px) {
        .image-container .product-container .overlay-text {
          font-size: calc(40px + 20 * ((100vw - 320px) / 960)); } }
      @media screen and (min-width: 1280px) {
        .image-container .product-container .overlay-text {
          font-size: 60px; } }
    .image-container .product-container:hover .overlay {
      opacity: 1;
      cursor: pointer; }
  .image-container .image-wrapper.left {
    transform: translateX(-100%); }
  .image-container .product-info {
    display: flex;
    gap: 2rem;
    align-items: center;
    padding-top: 10px; }
    .image-container .product-info .product-title {
      flex: 1;
      color: #ee4300; }
      .image-container .product-info .product-title h2 {
        margin: 10px 0 0 0;
        line-height: 1.2;
        font-weight: 300;
        font-size: 28px; }
        @media screen and (min-width: 320px) {
          .image-container .product-info .product-title h2 {
            font-size: calc(28px + 6 * ((100vw - 320px) / 960)); } }
        @media screen and (min-width: 1280px) {
          .image-container .product-info .product-title h2 {
            font-size: 34px; } }
      .image-container .product-info .product-title .price {
        color: #000000; }
    .image-container .product-info .button {
      font-size: 13px; }
      @media screen and (min-width: 320px) {
        .image-container .product-info .button {
          font-size: calc(13px + 1 * ((100vw - 320px) / 960)); } }
      @media screen and (min-width: 1280px) {
        .image-container .product-info .button {
          font-size: 14px; } }

.poem-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 5rem; }
  .poem-section .poem {
    font-size: 1.2rem;
    line-height: 1.8; }
    .poem-section .poem p {
      margin: 0; }
    .poem-section .poem p:not(:last-child) {
      margin: 0 0 1rem; }
    .poem-section .poem .poem-author {
      font-family: "GFS Didot", serif;
      font-size: 24px;
      font-weight: 400; }
      @media screen and (min-width: 320px) {
        .poem-section .poem .poem-author {
          font-size: calc(24px + 18 * ((100vw - 320px) / 960)); } }
      @media screen and (min-width: 1280px) {
        .poem-section .poem .poem-author {
          font-size: 42px; } }

.divider {
  border: none;
  border-top: 2px solid #ee4300;
  margin: 5rem 0; }

.video-section {
  margin-bottom: 5rem; }

.video-container {
  position: relative;
  width: 100%;
  padding-top: 75%;
  overflow: hidden; }

.video-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; }

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  cursor: pointer;
  z-index: 2;
  transition: transform 0.3s ease; }
  .play-button img {
    width: 160px;
    height: 160px; }
  .play-button:hover {
    transform: translate(-50%, -50%) scale(1.1); }

.main-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none; }
  .main-video:hover {
    cursor: pointer; }

.video-playing .video-placeholder,
.video-playing .play-button {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease; }

.video-playing .main-video {
  display: block; }

.two-column-text {
  padding: 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 0rem; }
  .two-column-text p {
    margin: 0; }
  @media (max-width: 768px) {
    .two-column-text {
      flex-direction: column; } }
  .two-column-text .column {
    flex: 1;
    max-width: 42%; }
    @media (max-width: 768px) {
      .two-column-text .column {
        max-width: 100%; }
        .two-column-text .column:not(:last-child) {
          margin-bottom: 2rem; } }

.centered-text {
  max-width: 900px;
  margin: 0 auto 2.5rem;
  text-align: center; }

.centered-text-logos {
  margin-bottom: 5rem; }
  .centered-text-logos .logo-container {
    margin-top: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5rem;
    flex-wrap: wrap; }
    .centered-text-logos .logo-container .partner-logo {
      max-height: 70px;
      width: auto; }
      @media (max-width: 768px) {
        .centered-text-logos .logo-container .partner-logo {
          max-height: 50px; } }

.image-carousel {
  margin-bottom: 5rem;
  overflow: hidden;
  width: 99.5vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw; }
  .image-carousel .swiper {
    overflow: hidden;
    padding: 0;
    margin-bottom: 5rem; }
  .image-carousel .swiper-wrapper {
    transition-timing-function: linear; }
  .image-carousel .swiper-slide {
    width: 400px; }
    .image-carousel .swiper-slide img {
      width: 400px;
      height: auto;
      object-fit: cover;
      user-select: none;
      aspect-ratio: 4 / 5; }
  .image-carousel .centered-text {
    color: #666666;
    margin-bottom: 0; }