:root {
  --font-primary: "Outfit", sans-serif;
  --font-secondary: "Fraunces", serif;

  --color-black: #000;
  --color-black-3: rgba(0, 0, 0, 0.3);
  --color-black-5: rgba(0, 0, 0, 0.5);
  --color-black-7: rgba(0, 0, 0, 0.7);

  --color-white: #fff;
  --color-white-3: rgba(255, 255, 255, 0.3);
  --color-white-5: rgba(255, 255, 255, 0.5);
  --color-white-6: rgba(255, 255, 255, 0.6);

  --color-gray-1: #4f5561;
  --color-gray-2: #353535;
  --color-gray-3: #404753;

  --color-pink-1: #d97a9e;
}

html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-smooth iframe {
  pointer-events: none;
}

html {
  overflow-x: hidden !important;
}

body {
  font-feature-settings: "liga" off;
  width: 100vw;
  height: auto;
  margin: 0 !important;
  font-family: var(--font-primary);
  overflow-x: hidden;
}

.overflow-x-hidden {
  overflow-x: hidden;
  overflow-y: visible;
}

button {
  border: none;
  background: none;
}

input:focus-visible,
input:focus,
input:focus-within {
  outline: none !important;
}

/* ======================================== */
/* Font family                              */
/* ======================================== */

.font-primary {
  font-family: var(--font-primary) !important;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.font-secondary {
  font-family: var(--font-secondary) !important;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "SOFT" 0, "WONK" 0;
}

/* ======================================== */
/* Font sizes                               */
/* ======================================== */

.text-11 {
  font-size: 11px !important;
}

.text-12 {
  font-size: 12px !important;
}

.text-14 {
  font-size: 14px !important;
}

.text-16 {
  font-size: 16px !important;
}

.text-21 {
  font-size: 21px !important;
}

.text-22 {
  font-size: 22px !important;
}

.text-24 {
  font-size: 24px !important;
}

.text-32 {
  font-size: 32px !important;
}
.text-36 {
  font-size: 36px !important;
}
.text-40 {
  font-size: 40px !important;
}

.text-54 {
  font-size: 54px !important;
}

/* ======================================== */
/* Text Colors                              */
/* ======================================== */

.text-white {
  color: var(--color-white);
}

.text-black {
  color: var(--color-black);
}

.text-black-5 {
  color: var(--color-black-5);
}

.text-black-7 {
  color: var(--color-black-7);
}

.text-gray-1 {
  color: var(--color-gray-1);
}
.text-gray-2 {
  color: var(--color-gray-2);
}
.text-gray-3 {
  color: var(--color-gray-3);
}

/* ======================================== */
/* BG Colors                                */
/* ======================================== */

.bg-white {
  background-color: var(--color-white);
}

.bg-white-6 {
  background-color: var(--color-white-6);
}

.bg-white-5 {
  background-color: var(--color-white-5);
}

.bg-black {
  background-color: var(--color-black);
}

.bg-black-3 {
  background-color: var(--color-black-3);
}

.bg-black-5 {
  background-color: var(--color-black-5);
}

/* ======================================== */
/* Font weights                             */
/* ======================================== */

.font-300 {
  font-weight: 300 !important;
}

.font-400 {
  font-weight: 400 !important;
}

.font-500 {
  font-weight: 500 !important;
}

.font-600 {
  font-weight: 600 !important;
}

/* ======================================== */
/* Line Height                              */
/* ======================================== */
.line-height-103 {
  line-height: 103% !important;
}

.line-height-112 {
  line-height: 112% !important;
}

.line-height-120 {
  line-height: 120% !important;
}

.line-height-128 {
  line-height: 128% !important;
}

.line-height-130 {
  line-height: 130% !important;
}

.line-height-140 {
  line-height: 140% !important;
}

.line-height-150 {
  line-height: 150% !important;
}

.line-height-normal {
  line-height: normal;
}

/* ======================================== */
/* Letter Spacing                           */
/* ======================================== */

.tracking-011 {
  letter-spacing: -0.11px !important;
}

.tracking-014 {
  letter-spacing: -0.14px !important;
}

.tracking-028 {
  letter-spacing: -0.28px !important;
}

.tracking-032 {
  letter-spacing: -0.32px !important;
}

.tracking-044 {
  letter-spacing: -0.44px !important;
}

.tracking-048 {
  letter-spacing: -0.48px !important;
}

.tracking-064 {
  letter-spacing: -0.64px !important;
}

.tracking-066 {
  letter-spacing: -0.66px !important;
}

.tracking-072 {
  letter-spacing: -0.72px !important;
}

.tracking-08 {
  letter-spacing: -0.8px !important;
}

/* ======================================== */
/* Widths and Heights                       */
/* ======================================== */

.w-screen {
  width: 100vw !important;
}
.h-screen {
  height: 100vh !important;
}

.w-dscreen {
  width: 100dvw;
}

.h-dscreen {
  height: 100dvh;
}

.min-w-screen {
  min-width: 100vw !important;
}
.min-h-screen {
  min-height: 100vh !important;
}

.max-w-screen {
  max-width: 100vw !important;
}
.max-h-screen {
  max-height: 100dvh !important;
}

.max-w-230 {
  max-width: 230px !important;
}

.max-w-270 {
  max-width: 270px !important;
}

/* ======================================== */
/* Opacity                                  */
/* ======================================== */

.opacity-80 {
  opacity: 80% !important;
}

/* ======================================== */
/* Margins                                  */
/* ======================================== */

.mb-15 {
  margin-bottom: 15px !important;
}

.mb-35 {
  margin-bottom: 35px !important;
}

.mx-auto {
  margin: 0 auto !important;
}

.my-auto {
  margin: auto 0 !important;
}
.m-auto {
  margin: auto !important;
}

/* ======================================== */
/* Padding                                  */
/* ======================================== */

/* 4px */
.p-4 {
  padding: 4px;
}
.px-4 {
  padding-left: 4px;
  padding-right: 4px;
}
.py-4 {
  padding-top: 4px;
  padding-bottom: 4px;
}

/* 8px */
.p-8 {
  padding: 8px;
}
.px-8 {
  padding-left: 8px;
  padding-right: 8px;
}
.py-8 {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* 10px */
.p-10 {
  padding: 10px;
}
.px-10 {
  padding-left: 10px;
  padding-right: 10px;
}
.py-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* 12px */
.p-12 {
  padding: 12px;
}
.px-12 {
  padding-left: 12px;
  padding-right: 12px;
}
.py-12 {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* 16px */
.p-16 {
  padding: 16px;
}
.px-16 {
  padding-left: 16px;
  padding-right: 16px;
}
.py-16 {
  padding-top: 16px;
  padding-bottom: 16px;
}

/* 18px */
.p-18 {
  padding: 18px;
}
.px-18 {
  padding-left: 18px;
  padding-right: 18px;
}
.py-18 {
  padding-top: 18px;
  padding-bottom: 18px;
}

/* 20px */
.p-20 {
  padding: 20px;
}
.px-20 {
  padding-left: 20px;
  padding-right: 20px;
}
.py-20 {
  padding-top: 20px;
  padding-bottom: 20px;
}

/* 20px */
.p-22 {
  padding: 22px;
}
.px-22 {
  padding-left: 22px;
  padding-right: 22px;
}
.py-22 {
  padding-top: 22px;
  padding-bottom: 22px;
}

/* 24px */
.p-24 {
  padding: 24px;
}
.px-24 {
  padding-left: 24px;
  padding-right: 24px;
}
.py-24 {
  padding-top: 24px;
  padding-bottom: 24px;
}

/* 27px */
.p-27 {
  padding: 27px;
}
.px-27 {
  padding-left: 27px;
  padding-right: 27px;
}
.py-27 {
  padding-top: 27px;
  padding-bottom: 27px;
}

/* 30px */
.p-30 {
  padding: 30px;
}
.px-30 {
  padding-left: 30px;
  padding-right: 30px;
}
.py-30 {
  padding-top: 30px;
  padding-bottom: 30px;
}

/* 32px */
.p-32 {
  padding: 32px;
}
.px-32 {
  padding-left: 32px;
  padding-right: 32px;
}
.py-32 {
  padding-top: 32px;
  padding-bottom: 32px;
}

/* 36px */
.p-36 {
  padding: 36px;
}
.px-36 {
  padding-left: 36px;
  padding-right: 36px;
}
.py-36 {
  padding-top: 36px;
  padding-bottom: 36px;
}

/* 40px */
.p-40 {
  padding: 40px;
}
.px-40 {
  padding-left: 40px;
  padding-right: 40px;
}
.py-40 {
  padding-top: 40px;
  padding-bottom: 40px;
}

/* ======================================== */
/* Border Radius                            */
/* ======================================== */
.rounded-12 {
  border-radius: 12px !important;
}

.rounded-20 {
  border-radius: 20px !important;
}

.rounded-24 {
  border-radius: 24px !important;
}

.rounded-30 {
  border-radius: 30px !important;
}

.rounded-90 {
  border-radius: 90px !important;
}

.rounded-88 {
  border-radius: 88px !important;
}

/* ======================================== */
/* Z Index                                  */
/* ======================================== */

.z-10 {
  z-index: 10 !important;
}

.z-20 {
  z-index: 20 !important;
}

.z-30 {
  z-index: 30 !important;
}

.z-40 {
  z-index: 40 !important;
}

.z-50 {
  z-index: 50 !important;
}

.z-90 {
  z-index: 90 !important;
}

.z-100 {
  z-index: 100 !important;
}

.z-110 {
  z-index: 110 !important;
}

.z-150 {
  z-index: 150 !important;
}

.z-180 {
  z-index: 180 !important;
}

.z-200 {
  z-index: 200 !important;
}

.z-210 {
  z-index: 210 !important;
}

.z-250 {
  z-index: 250 !important;
}

.z-998 {
  z-index: 998 !important;
}

.z-999 {
  z-index: 999 !important;
}

/* ======================================== */
/* Flex Box                                */
/* ======================================== */

.flex-grow {
  flex-grow: 1 !important;
}

/* ======================================== */
/* Flex Gaps                                */
/* ======================================== */

.gap-4 {
  gap: 4px !important;
}
.gap-8 {
  gap: 8px !important;
}

.gap-15 {
  gap: 15px !important;
}

.gap-16 {
  gap: 16px !important;
}

.gap-18 {
  gap: 18px !important;
}

.gap-20 {
  gap: 20px !important;
}

.gap-26 {
  gap: 26px !important;
}

.gap-40 {
  gap: 40px !important;
}

.gap-215 {
  gap: 215px !important;
}

/* ======================================== */
/* Positions                                */
/* ======================================== */

.left-0 {
  left: 0px !important;
}

.left-10 {
  left: 10px !important;
}

.left-20 {
  left: 20px !important;
}

.bottom-0 {
  bottom: 0px !important;
}

.bottom-10 {
  bottom: 10px !important;
}

.bottom-20 {
  bottom: 20px !important;
}

.right-0 {
  right: 0px !important;
}

.right-10 {
  right: 10px !important;
}

.right-20 {
  right: 20px !important;
}

.top-0 {
  top: 0px !important;
}

.top-10 {
  top: 10px !important;
}

.top-20 {
  top: 20px !important;
}

.inset-0 {
  inset: 0 !important;
}

.top-30percent {
  top: 30% !important;
}

.top-half {
  top: 50% !important;
}

.top-full {
  top: 100% !important;
}

.bottom-half {
  bottom: 50% !important;
}

.bottom-full {
  bottom: 100% !important;
}

.left-half {
  left: 50% !important;
}

.left-full {
  left: 100% !important;
}

.right-half {
  right: 50% !important;
}
.right-full {
  right: 100% !important;
}
/* ======================================== */
/* Button                                   */
/* ======================================== */

.btn-white {
  display: flex;
  justify-content: center;
  align-items: center;

  padding: 13px 28px;
  border-radius: 90px;

  border: 0.759px solid #da4786;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 7.07px 15.172px -7.586px rgba(0, 0, 0, 0.14);
}

/* ======================================== */
/* Text Blocks                              */
/* ======================================== */

.section-text-block {
  max-width: 310px;
}

.section-text-block p {
  letter-spacing: -0.14px;
  max-width: 90%;
}

@media screen and (max-width: 786px) {
  .section-text-block h2 {
    font-size: 22px !important;
    letter-spacing: -0.44px;
  }

  .section-text-block h3 {
    font-size: 26px !important;
    letter-spacing: -0.52px;
  }

  .section-text-block p {
    font-size: 12px !important;
    letter-spacing: -0.12px;
  }
}

/* ======================================== */
/* Text Blocks                              */
/* ======================================== */

.section-btn,
.section-btn-light {
  display: flex;

  padding: 16px 22px;
  justify-content: center;
  align-items: center;
  border-radius: 88px;
  background: linear-gradient(90deg, #832729 0.17%, #631517 99.86%);
  border: 1px solid #832729;
  color: var(--color-white);
  text-align: center;
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 400;
  line-height: 128%;
  letter-spacing: 0.66px;
  text-transform: uppercase;
}

.section-btn-light {
  background: #f2e7e9 !important;
  color: var(--color-black);
}

@media screen and (max-width: 768px) {
  .section-btn,
  .section-btn-light {
    white-space: nowrap;
    padding: 12px 18px !important;
    font-size: 9px !important;
    letter-spacing: 0.54px !important;
  }
}

/* ======================================== */
/* Inputs                                   */
/* ======================================== */

.modal-input {
  display: flex;
  padding: 12px 16px;
  align-items: center;
  border-radius: 80px;
  border: 1px solid #e0e0e0;
  font-size: 14px !important;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.14px;
}

.modal-input::placeholder {
  color: #b3b0a9;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.14px;
}

@media screen and (max-width: 768px) {
  .modal-input {
    font-size: 12px !important;
    letter-spacing: -0.12px;
  }

  .modal-input::placeholder {
    font-size: 12px;
    letter-spacing: -0.12px;
  }
}

/* ======================================== */
/* MISC.                                    */
/* ======================================== */

.cursor-pointer {
  cursor: pointer !important;
}

.pointer-events-none {
  pointer-events: none;
}

.trapezoid {
  border-left: 50px solid #555;
  border-top: 25px solid transparent;
  border-bottom: 0px solid transparent;
  height: 0;
  width: 384px;
  height: 555px;
}

.scrollLeftToRight {
  animation: scrollLeftToRight 20s linear infinite;
}

/* ANIMATIONS */
@keyframes scrollLeftToRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Target iOS 18+ */
.ios-18-plus .my-element,
.safari-26-plus .my-element {
  /* iOS 18+ / Safari 26+ specific styles */
  -webkit-overflow-scrolling: auto; /* Disable momentum scrolling if needed */
}

/* Smooth scrolling adjustments for iOS */
.is-ios body {
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

/* Fix for pinned elements on iOS */
.is-ios [data-gsap-product-3-section] {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform, opacity;
}

/* Specific fixes for Safari 26 */
.safari-26-plus .product-4-to-7-container {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Target Safari 26+ using feature queries */
@supports (font: -apple-system-body) and (background: -webkit-named-image(i)) {
  /* Safari-specific styles */
  .ios-18-plus {
    max-height: 98vh;
    height: calc(100vh - 40px) !important;
  }
  .ios-18-plus body {
    height: 100% !important;
  }
}

/* Target iOS specifically */
@supports (-webkit-touch-callout: none) {
  .ios-18-plus {
    /* iOS-specific styles */
  }
}