.frame[data-v-0199b75e] {
    position: relative;
    margin-inline: auto;
}
.popover {
&[data-v-0199b75e] {
    transition: opacity 0.3s ease-in-out;
    display: grid;
    position: absolute;
    padding-block: var(--dap-size-2);
    padding-inline: var(--dap-size-2);
    width: 23ch;
    background: var(--dap-pink);
    border-radius: var(--radius-lg);
    line-height: var(--leading-tight);
    color: white;
    text-wrap: balance;
    z-index: 2;
    text-align: center;
    translate: -50% 0%;
    }
&[data-v-0199b75e]::before {
        align-self: center;
        justify-self: center;
        content: "";
        position: absolute;
        width: 30px;
        height: 30px;
        background: inherit;
        border-radius: var(--radius-xs);
        rotate: 45deg;
        z-index: -1;
}
&.arrow-left[data-v-0199b75e]::before   { left: -6px;
}
&.arrow-top[data-v-0199b75e]::before    { top: -6px;
}
&.arrow-bottom[data-v-0199b75e]::before { bottom: -6px;
}
&.arrow-right[data-v-0199b75e]::before  { right: -6px;
}
&.popover-1 {
&[data-v-0199b75e] {
        top: 42%;
        left: 28%;
        }
&.arrow-top[data-v-0199b75e]::before { translate: 250% 0%
}
}
&.popover-2[data-v-0199b75e] {
        top: 50%;
        left: 50%;
}
&.popover-3[data-v-0199b75e] {
        top: 50%;
        left: 25%;
}
&.popover-4[data-v-0199b75e] {
        top: 58%;
        left: 18%;
}
}
swiper-slide:not(.swiper-slide-active) {
&[data-v-0199b75e] {
    z-index: -1;
    }
.popover[data-v-0199b75e] {
        opacity: 0;
}
}
swiper-slide[data-v-0199b75e] {
    padding-block-end: 3rem;
}
swiper-container {
&[data-v-0199b75e] {
    --swiper-theme-color: var(--dap-gray-8);
    --swiper-pagination-bullet-size: 12px;
    --swiper-pagination-bullet-inactive-color: var(--dap-gray-8);
    }
&[data-v-0199b75e]::part(pagination) {
        //position: relative;
        //z-index: 999;
}
}
.click-target[data-v-0199b75e] {
    position: absolute;
    left: 20%;
    top: 30%;
    width: 60%;
    height: 10%;
    background: transparent;
}
[data-slide-2][data-v-0199b75e] {
    transition: opacity 0.3s ease-in-out;
}
dap-card[data-v-0199b75e] {
    width: 42%;
    height: auto;
    position: absolute;
    left: 29%;
    top: 18%;
}

.bg-shop[data-v-85181837] {
  background-position: center;
  background-size: cover;
  aspect-ratio: 1/1.4;
}

#social-media {
&[data-v-78be3022] {
  position: relative;
  padding: 0;
}
.content[data-v-78be3022] {
    width: 100%;
    padding-block: min(16vw, var(--dap-size-10));
    padding-inline: min(8vw, var(--dap-size-10));
@media (width >= 1024px){
      width: 120%;
      padding: var(--dap-size-10) var(--dap-size-9);
      padding-left: 0;
}
}
.phones {
&[data-v-78be3022] {
    display: inline-block;
    position: relative;
    text-align: center;
    width: 100%;
}
& img[data-v-78be3022] {
      width: clamp(250px, 30vw, 400px);
      height: auto;
      margin-top: -30px;
}
.phone-clubcard[data-v-78be3022] {
      display: inline-block;
      aspect-ratio: var(--dap-ratio-creditcard);

      position: absolute;
      width: 30%;
      top: 48%;
      right: 23%;
}
}
@media (width >= 1024px){
.phones {
&[data-v-78be3022] {
      width: 94%;
      margin-left: -30px;
}
& img[data-v-78be3022] {
        width: 100%;
        margin-top: unset;
}
.phone-clubcard[data-v-78be3022] {
        position: absolute;
        width: 27%;
        top: 53%;
        right: 25%;
}
}
}
}

@property --rotate1 {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@property --rotate2 {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@property --translate1 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
@property --translate2 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
@keyframes reveal-image-1a5901f4 {
from {
    --rotate1: -10deg;
    --rotate2: 10deg;
    --translate1: 100%;
    --translate2: 80%;
    opacity: 0;
}
}
#referral {
&[data-v-1a5901f4] {
  position: relative;
  padding: 0;
  }
.images {
&[data-v-1a5901f4] {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding-bottom: 60px;
    }
@media (width >= 1024px){
      &[data-v-1a5901f4] {
      display: grid;
      place-content: center;
      gap: 0;
      width: 40%;
      padding-bottom: 0;
      }
}
img[data-v-1a5901f4] {
      width: clamp(100px, 40vw, 200px);
      height: auto;
      border-radius: var(--dap-radius-3);
      box-shadow: var(--dap-shadow-4);
}
}
.content[data-v-1a5901f4] {
    padding-block: min(16vw, var(--dap-size-10));
    padding-inline: min(8vw, var(--dap-size-10));
@media (width >= 1024px){
      width: 60%;
      padding: var(--dap-size-10) var(--dap-size-9);
      padding-left: 0;
}
}
.referral-images {
img {
&[data-v-1a5901f4] {
      --rotate1: -6deg;
      --rotate2: 8deg;
      --translate1: 15%;
      --translate2: 25%;
      }
&[data-v-1a5901f4]:nth-child(1) {
        transform:
            translateY(var(--translate1))
            translateX(4%)
            rotate(var(--rotate1));
}
&[data-v-1a5901f4]:nth-child(2) {
        transform:
            translateY(var(--translate2))
            translateX(-4%)
            rotate(var(--rotate2));
}
@media (width >= 1024px) {
&[data-v-1a5901f4] {
        --rotate1: -3deg;
        --rotate2: -5deg;
        --translate1: 3%;
        --translate2: -3%;
        }
&[data-v-1a5901f4]:nth-child(1) {
          transform:
              translateY(var(--translate1))
              translateX(0%)
              rotate(var(--rotate1));
}
&[data-v-1a5901f4]:nth-child(2) {
          transform:
              translateY(var(--translate2))
              translateX(5%)
              rotate(var(--rotate2));
}
}
}
}
@supports (animation-timeline: view(block)) {
.reveal-referral-image[data-v-1a5901f4] {
      animation: reveal-image-1a5901f4 linear both;
      animation-timeline: view();
      animation-range: cover 0% entry-crossing 40vh;
}
}
}