.hero-section {
  @media all and (max-width: 768px) {
  }
}

.hero-swiper {
  .hero-slide {
    height: 100svh;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    padding: var(--padding--side);
    color: var(--swatch--white);

    @media all and (max-width: 768px) {
      align-items: flex-start;
      padding-top: 8em;
    }
  }
  .hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    &::after {
      content: "";
      background: #0f0f0f;
      background: linear-gradient(
        180deg,
        rgba(15, 15, 15, 1) 0%,
        rgba(15, 15, 15, 0) 100%
      );
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      opacity: 0.3;
      pointer-events: none;
      z-index: 2;
      height: 10em;
    }
  }
  &.home-swiper {
    .hero-bg {
      &::before {
        content: "";
        background: #0f0f0f;
        background: linear-gradient(
          90deg,
          rgba(15, 15, 15, 1) 0%,
          rgba(15, 15, 15, 0) 100%
        );
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        opacity: 0.5;
        pointer-events: none;
        z-index: 2;
        width: 50vw;
      }
    }
  }
  .hero-slide-text {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    grid-gap: 1em;
    max-width: 36em;
    .h1 {
    }
    h3 {
      max-width: 14em;
      @media all and (max-width: 768px) {
        max-width: 60vw;
      }
    }
    .btn {
      margin-top: 1em;

      @media all and (max-width: 768px) {
        margin-top: 2em;
      }
    }
  }

  .hero-swiper-text {
    position: absolute;
    z-index: 1;
    inset: 0;
    color: var(--swatch--off-white);
    background-color: rgba(0, 0, 0, 0.2);
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;

    h1 {
      pointer-events: all;
    }
  }

  .swiper-pagination {
    height: auto;
    bottom: 30px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    right: auto;
    pointer-events: none;
    @media all and (max-width: 768px) {
      justify-content: flex-start;
      left: calc(20px - 0.5em);
    }
  }

  .swiper-pagination-bullet {
    width: 3em;
    height: 0.8em;
    border-radius: 1em;
    opacity: 1;
    background: transparent;
    pointer-events: all;
    border: 1px solid var(--swatch--white);
    margin: 0 0.5em !important;
    transition: 0.6s all var(--transition--ease);

    @media all and (max-width: 768px) {
      width: 32px;
    }
  }
  .swiper-pagination-bullet-active {
    margin: 0 0.5em !important;
    width: 6.25em;
    height: 0.8em;
    border-radius: 1em;
    background: var(--swatch--red);
    border: 1px solid var(--swatch--white);

    @media all and (max-width: 768px) {
      width: 64px;
    }
  }
}

.dopa-boy {
  position: absolute;
  display: inline-block;
  right: 0em;
  top: -9em;
  width: 18em;
  height: auto;
  aspect-ratio: 1;

  @media all and (max-width: 768px) {
    display: none;
    visibility: hidden;
  }
}

.dopa-boy img {
  display: block;
  width: 100%;
  height: auto;
}

.dopa-boy-img-1,
.dopa-boy-img-2 {
  position: absolute;
  top: 0;
  left: 0;
}

/* Animation: alternate opacity every 3s */
.dopa-boy-img-1 {
  animation: boySwap1 4s steps(1) infinite;
}

.dopa-boy-img-2 {
  animation: boySwap2 4s steps(1) infinite;
}

@keyframes boySwap1 {
  0%,
  49.9% {
    opacity: 1;
    visibility: visible;
  }
  50%,
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes boySwap2 {
  0%,
  49.9% {
    opacity: 0;
    visibility: hidden;
  }
  50%,
  100% {
    opacity: 1;
    visibility: visible;
  }
}

.our-stores-split {
  padding: 6em var(--padding--side);
  text-align: center;
  .grid-2 {
    grid-gap: var(--padding--side);

    @media all and (max-width: 768px) {
      grid-template-columns: 1fr;
    }
  }
  .store-module {
    margin-top: 3em;
    position: relative;
    overflow: hidden;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: flex-end;
    padding: 2em 6em;
    aspect-ratio: 1;
    border-radius: var(--border-radius);
    border: 1px solid var(--swatch--black);
    color: var(--swatch--white);

    &::before {
      content: "";
      background: #0f0f0f;
      background: linear-gradient(
        0deg,
        rgba(15, 15, 15, 1) 0%,
        rgba(15, 15, 15, 0) 100%
      );
      bottom: 0;
      left: 0;
      right: 0;
      height: 20em;
      opacity: 0.9;
      position: absolute;
      z-index: 2;
    }

    img {
      z-index: 1;
      filter: grayscale(0.6);
      transform: scale(1.05);
      transition: all 0.4s ease;
      @media all and (max-width: 768px) {
        filter: grayscale(0);
      }
    }

    &:hover {
      img {
        filter: grayscale(0);
        transform: scale(1);
      }
    }

    @media all and (max-width: 768px) {
      aspect-ratio: 1 / 1.2;
      padding: 1em 2em;
    }
  }
  .store-module-text {
    position: relative;
    z-index: 2;
    display: grid;
    grid-gap: 1em;

    @media all and (max-width: 768px) {
      .h2 {
        font-size: var(--font-size--20);
      }
      p {
        font-size: var(--font-size--16);
      }
    }
  }

  @media all and (max-width: 768px) {
    padding: 3em var(--padding--side);
  }
}

.red-illustration {
  width: 60em;
  margin: 0 auto;
  padding: 2em var(--padding--side);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  img {
  }

  .play-dot {
    border: 1px solid var(--swatch--white);
    color: var(--swatch--red);
    width: 5em;
    aspect-ratio: 1;
    border-radius: 50%;
    position: absolute;
    z-index: 2;
    left: 8em;
    bottom: 27em;
    background-color: var(--swatch--white);
    display: grid;
    place-items: center;
    padding-top: 0.4em;
    transition: all 0.3s var(--transition--ease);
    box-shadow: 0 0 var(--swatch--white);

    &:hover {
      background-color: transparent;
      color: var(--swatch--white);
      box-shadow: -3px -3px var(--swatch--white);
      transform: translate(3px, 3px);
    }

    @media all and (max-width: 768px) {
      left: 8vw;
      bottom: 46vw;
      width: 13vw;
      padding-top: 1vw;
      h3 {
        font-size: 4vw;
      }
    }
  }

  @media all and (max-width: 768px) {
    width: 100%;
  }
}

.donburi-bg {
  position: fixed;
  top: -25vh;
  left: -10vw;
  width: auto;
  opacity: 0.1;
  height: 100vw;
  @media all and (max-width: 768px) {
    height: 130vh;
    object-fit: cover;
  }
}

.feature-menu {
  background: var(--swatch--off-white);
  position: relative;
  z-index: 1;
  padding: 12em 0 9em;
  text-align: center;

  .dish-section {
  }
  .dish-swiper {
    @media all and (max-width: 768px) {
      padding: 2em 3em;
    }
  }

  @media all and (max-width: 768px) {
    padding: 6em 0 3em;
  }
}
.feature-menu-banner {
  background: var(--swatch--off-white);
  border: 1px solid var(--swatch--black);
  border-radius: var(--border-radius);
  max-width: 60em;
  padding: 0em 8em;
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-gap: 4em;
  justify-content: center;
  margin: 0 auto 6em;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    right: -0.6em;
    bottom: -0.6em;
    background: var(--swatch--pink);
    border: 1px solid var(--swatch--black);
    border-radius: var(--border-radius);
    width: 100%;
    height: 100%;
    z-index: -1;
  }

  .h1 {
    position: relative;
    top: -0.45em;
  }
  .h3 {
    max-width: 85%;
    margin: auto;
  }
  .btn {
    position: relative;
    bottom: -1em;
  }
  @media all and (max-width: 768px) {
    margin: 0 3em 2em;
    padding: 0em 0.5em;
    grid-gap: 1em;
  }
}