@font-face {
  font-family: 'Amatic SC';
  font-style: normal;
  font-weight: 700;
  
  src:  url("../fonts/74ea15a03133e4e9.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Amatic SC';
  font-style: normal;
  font-weight: 700;
  
  src:  url("../fonts/f0602bb748154dca.woff2") format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: 'Amatic SC';
  font-style: normal;
  font-weight: 700;
  
  src:  url("../fonts/bbd15595ae2fb915.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Amatic SC';
  font-style: normal;
  font-weight: 700;
  
  src:  url("../fonts/1a55337ec5a930f7.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Amatic SC';
  font-style: normal;
  font-weight: 700;
  
  src:  url("../fonts/6128f52cb5539a1c.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Coming Soon';
  font-style: normal;
  font-weight: 400;
  
  src:  url("../fonts/001e54c261422e07.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      font-family: 'Coming Soon', cursive;
      overflow: hidden;
      background: url("../images/822a1222071df85e.jpg") no-repeat center center fixed; background-size: cover;
      background-size: cover;
    }

    .container {
      position: relative;
      width: 100%;
      height: 100%;
    }

    .title {
      position: absolute;
      top: 0;
      width: 100%;
      text-align: center;
      font-family: 'Amatic SC', cursive;
      color: #f5b400;
      text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
      font-size: 9vw;
      height: 25vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    
    

@media (max-width: 768px) {
  
}
    

    .donut {
      width: 100%;
      height: 100%;
      background: url("../images/d6a7b41dd73398eb.png") no-repeat center center;
      background-size: contain;
    }

    .items {
      position: absolute;
      top: 32%;
      left: 10%;
      width: 40%;
      font-size: 5vw;
      font-family: 'Amatic SC', cursive;
      text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
      z-index: 3;
    }

    .items div:nth-child(1) { color: #ffcc00; }
    .items div:nth-child(2) { color: #66cc66; }
    .items div:nth-child(3) { color: #cc66ff; }

    .extras {
      margin-top: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 1.5em;
      text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    }

    .extras a {
      color: #32cd32;
      text-decoration: none;
      border: 2px solid #32cd32;
      padding: 10px 20px;
      border-radius: 10px;
      background-color: rgba(255,255,255,0.15);
    }

    .extras div {
      color: #e754c3;
      margin-top: 10px;
    }

    .video-frame {
      position: absolute;
      bottom: 5%;
      left: 50%;
      transform: translateX(-50%);
      width: 90%;
      height: 25vh;
      border: 3px solid #fff;
      box-shadow: 0 0 15px rgba(0,0,0,0.4);
      background: #000;
      z-index: 1;
    }

    .video-frame video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .footer-text {
      position: absolute;
      bottom: 1vh;
      width: 100%;
      text-align: center;
      font-size: 1em;
      color: #ffcc00;
      text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
      z-index: 3;
    }

    .footer-text .rec { color: red; }
    .footer-text .foryou { color: red; }

    @keyframes float {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50%      { transform: translateY(-10px) rotate(-2deg); }
    }

    @media (min-width: 768px) {
      .title { font-size: 8vw; }
      .items { font-size: 3vw; }
      .extras {
      margin-top: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 1.5em;
      text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    }
      
    

@media (max-width: 768px) {
  
}
    
    }
  
    .video-container {
      width: 320px;
      max-width: 90vw;
      height: auto;
      margin-top: 40px;
      z-index: 2;
      position: relative;
    }

    .video-container video {
      width: 100%;
      height: auto;
      border-radius: 20px;
      box-shadow: 0 0 15px rgba(0,0,0,0.3);
    }

    

@keyframes ripple-effect {
  0% {
    transform: scale(0.6);
    opacity: 0.7;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}



.extras {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3em;
  z-index: 5;
}





}


.donut {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../images/d6a7b41dd73398eb.png") no-repeat center center;
  background-size: contain;
  z-index: 3;
}


.donut-wrapper {
  position: absolute;
  top: 5%;
  left: 20%;
  transform: translateX(-50%);
  width: 80vw;
  aspect-ratio: 1 / 1;
  z-index: 3;
  animation: float 6s ease-in-out infinite;
}








.donut-wrapper {
  position: absolute;
  top: 5%;
  left: 20%;
  transform: translateX(-50%);
  width: 80vw;
  aspect-ratio: 1 / 1;
  z-index: 3;
  animation: float 6s ease-in-out infinite;
}


.donut-wrapper {
  position: absolute;
  top: 5%;
  left: 20%;
  transform: translateX(-50%);
  width: 80vw;
  aspect-ratio: 1 / 1;
  z-index: 3;
  animation: float 6s ease-in-out infinite;
}

.donut {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../images/d6a7b41dd73398eb.png") no-repeat center center;
  background-size: contain;
  z-index: 4;
}


.ripple {
  position: absolute;
  top: 37.5%;
  left: 37.5%;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.4);
  animation: ripple-effect 3s infinite ease-out;
  pointer-events: none;
  z-index: 2;
}

@keyframes ripple-effect {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}


@media (min-width: 1024px) {
  .donut-wrapper {
    top: -60%;
    left: 20%;
    transform: translateX(-50%);
    width: 80vw;
    aspect-ratio: 1 / 1;
    z-index: 3;
    animation: float 6s ease-in-out infinite;
  }
}


@keyframes shake {
  0% { transform: translate(0, 0); }
  25% { transform: translate(1px, -1px); }
  50% { transform: translate(-1px, 1px); }
  75% { transform: translate(1px, 1px); }
  100% { transform: translate(0, 0); }
}
.shake {
  display: inline-block;
  animation: shake 0.6s infinite;
}



@media (min-width: 768px) {
  .responsive-red-eyes-title {
    transform: scaleX(1.5);
    display: inline-block;
  }
}


@media (max-width: 767px) {.responsive-red-eyes-title {
    transform: scale(2);
    display: inline-block;
   transform: scale(2) translateY(40%);
}





@media (max-width: 767px) {
  .mobile-down-40 {
    display: inline-block !important;
    transform: translateY(120%) !important;
  }
}
@media (min-width: 768px) {
  .desktop-shift-right {
    position: relative !important;
    display: inline-block !important;
    transform: translateX(30%) !important;
  }
}
}

    
    @media only screen and (max-width: 768px) and (orientation: landscape) {
      .donut-wave-container {
        transform: translateY(-20%);
        transform-origin: center top;
      }
      .phrase-canna-cookies,
      .phrase-buds,
      .phrase-magic-mushrooms {
        transform: scale(0.67);
        transform-origin: center center;
      }
      .btn-delivery,
      .text-danang {
        transform: translateY(-20%);
        transform-origin: center top;
      }
    }


    
    @media only screen and (max-width: 767px) and (orientation: landscape) {
      
      .donut-wrapper {
        transform: translateY(-20%) !important;
        transform-origin: center top;
      }
      
      .mobile-down-40 {
        transform: scale(0.67) !important;
        transform-origin: center center;
      }
      
      .shake,
      .danang-text {
        transform: translateY(-20%) !important;
        transform-origin: center top;
      }
    }

  .shake-button {
    animation: shake 0.5s infinite !important;
  }
}



}

@media only screen and (orientation: landscape) {
  .donut {
    animation: float 4s infinite ease-in-out !important;
  }
}

@media only screen and (orientation: landscape) {
  .donut {
    animation: float 4s infinite ease-in-out !important;
  }
}

@media only screen and (max-width: 768px) {
  .mobile-enlarge {
    font-size: 150% !important;
  }
}

@media only screen and (max-width: 768px) {
  .headline-double-mobile {
    font-size: 200% !important;
  }
}

@media only screen and (max-width: 768px) {
  .headline-double-mobile {
    font-size: clamp(24px, 6vw, 48px) !important;
  }
}

@media only screen and (max-width: 768px) {
  .headline-double-mobile {
    font-size: 48px !important;
  }
}

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes pulseOnce {
  0%   { transform: scale(1); opacity: 0.5; }
  50%  { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.animate-cookies {
  animation: pulseOnce 0.6s ease-out forwards;
  animation-delay: 0.2s;
}

.animate-buds {
  animation: pulseOnce 0.6s ease-out forwards;
  animation-delay: 1s;
}

.animate-mushrooms {
  animation: pulseOnce 0.6s ease-out forwards;
  animation-delay: 1.8s;
}


@keyframes pulseOnce {
  0%   { transform: scale(1); opacity: 0.5; }
  50%  { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.animate-cookies {
  animation: pulseOnce 0.6s ease-out forwards;
  animation-delay: 1s;
}

.animate-buds {
  animation: pulseOnce 0.6s ease-out forwards;
  animation-delay: 1.8s;
}

.animate-mushrooms {
  animation: pulseOnce 0.6s ease-out forwards;
  animation-delay: 2.6s;
}


@keyframes waveRise {
  0%   { transform: translateY(0px) scale(1); opacity: 0; }
  40%  { transform: translateY(-10px) scale(1.1); opacity: 1; }
  100% { transform: translateY(0px) scale(1); opacity: 1; }
}

.animate-cookies {
  animation: waveRise 1s ease-out forwards;
  animation-delay: 1s;
}

.animate-buds {
  animation: waveRise 1s ease-out forwards;
  animation-delay: 2s;
}

.animate-mushrooms {
  animation: waveRise 1s ease-out forwards;
  animation-delay: 3s;
}

@keyframes waveRise {
  0%   { margin-top: 0px; opacity: 0; }
  40%  { margin-top: -10px; transform: scale(1.1); opacity: 1; }
  100% { margin-top: 0px; transform: scale(1); opacity: 1; }
}

.animate-cookies {
  display: inline-block;
  animation: waveRise 1s ease-out forwards;
  animation-delay: 1s;
}

.animate-buds {
  display: inline-block;
  animation: waveRise 1s ease-out forwards;
  animation-delay: 2s;
}

.animate-mushrooms {
  display: inline-block;
  animation: waveRise 1s ease-out forwards;
  animation-delay: 3s;
}


@keyframes waveRise {
  0%   { margin-top: 0px; transform: scale(1); opacity: 0; }
  20%  { margin-top: -4px; transform: scale(1.02); opacity: 0.6; }
  50%  { margin-top: -8px; transform: scale(1.07); opacity: 1; }
  80%  { margin-top: -4px; transform: scale(1.02); opacity: 1; }
  100% { margin-top: 0px; transform: scale(1); opacity: 1; }
}

.animate-cookies {
  display: inline-block;
  animation: waveRise 1.5s ease-in-out forwards;
  animation-delay: 1s;
}

.animate-buds {
  display: inline-block;
  animation: waveRise 1.5s ease-in-out forwards;
  animation-delay: 2s;
}

.animate-mushrooms {
  display: inline-block;
  animation: waveRise 1.5s ease-in-out forwards;
  animation-delay: 3s;
}


@keyframes waveRise {
  0%   { margin-top: 0px; transform: scale(1); }
  20%  { margin-top: -4px; transform: scale(1.02); }
  50%  { margin-top: -8px; transform: scale(1.07); }
  80%  { margin-top: -4px; transform: scale(1.02); }
  100% { margin-top: 0px; transform: scale(1); }
}

.animate-cookies {
  display: inline-block;
  animation: waveRise 1.5s ease-in-out forwards;
  animation-delay: 1s;
}

.animate-buds {
  display: inline-block;
  animation: waveRise 1.5s ease-in-out forwards;
  animation-delay: 2s;
}

.animate-mushrooms {
  display: inline-block;
  animation: waveRise 1.5s ease-in-out forwards;
  animation-delay: 3s;
}


.animate-buds {
  display: inline-block;
  animation: waveRiseBuds 1.5s ease-in-out forwards;
  animation-delay: 2s;
}

@keyframes waveRiseBuds {
  0%   { margin-top: 0px; transform: scale(1); }
  20%  { margin-top: -4px; transform: scale(1.04); }
  50%  { margin-top: -8px; transform: scale(1.12); }
  80%  { margin-top: -4px; transform: scale(1.04); }
  100% { margin-top: 0px; transform: scale(1); }
}


  :root{
  }


/*__SWIPER_HEIGHT_FIX__*/
html .swiper:not(.swiper-vertical):not([class*="full"]):not([class*="vh"]) {
  align-self: start !important;
  height: auto !important;
}
html .swiper:not(.swiper-vertical):not([class*="full"]):not([class*="vh"]) > .swiper-wrapper,
html .swiper:not(.swiper-vertical):not([class*="full"]):not([class*="vh"]) .swiper-slide {
  height: auto !important;
}