:root {
  --text-gray: #6d6f71;
  --pantai-blue: #307fde;
  --pantai-blue-darker: #1c70d8;
  --pantai-orange: #ff6c37;
  --pantai-orange-darker: #ec5923;
  --pantai-green: #4cb748;
  --pantai-green-darker: #36aa31;
  --pantai-light-green: #89dc65;
  --pantai-light-green-darker: #7bc65b;
  --pantai-yellow: #ffbc29;
  --pantai-yellow-darker: #eaad25;
  --pantai-purple: #b72889;
  --pantai-purple-darker: #9b1a72;
  --pantai-pink: #fe79d7;
  --pantai-pink-darker: #d364b2;
  --pantai-light-blue: #32c2ee;
  --pantai-light-blue-darker: #2fb7e0;
}

.pantai-blue {
  color: var(--pantai-blue);
}

.pantai-yellow {
  color: var(--pantai-yellow);
}

.pantai-orange {
  color: var(--pantai-orange);
}

.pantai-green {
  color: var(--pantai-green);
}

.color-inherit {
  color: inherit;
}

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

/* @link https://utopia.fyi/type/calculator?c=320,15,1.2,1600,16,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
:root {
  --step--2: clamp(0.74rem, calc(0.73rem + 0.06vw), 0.79rem);
  --step--1: clamp(0.83rem, calc(0.82rem + 0.07vw), 0.89rem);
  --step-0: clamp(0.94rem, calc(0.92rem + 0.08vw), 1rem);
  --step-1: clamp(1.06rem, calc(1.04rem + 0.09vw), 1.13rem);
  --step-2: clamp(1.19rem, calc(1.17rem + 0.1vw), 1.27rem);
  --step-3: clamp(1.34rem, calc(1.31rem + 0.11vw), 1.42rem);
  --step-4: clamp(1.5rem, calc(1.48rem + 0.13vw), 1.6rem);
  --step-5: clamp(1.69rem, calc(1.66rem + 0.14vw), 1.8rem);
}

.fstep--2 {
  font-size: var(--step--2);
}

.fstep--1 {
  font-size: var(--step--1);
}

.fstep-0 {
  font-size: var(--step-0);
}

.fstep-1 {
  font-size: var(--step-1);
}

.fstep-2 {
  font-size: var(--step-2);
}

.fstep-3 {
  font-size: var(--step-3);
}

.fstep-4 {
  font-size: var(--step-4);
}

.fstep-5 {
  font-size: var(--step-5);
}

.fweight-500 {
  font-weight: 500;
}

.fweight-600 {
  font-weight: 600;
}

/* @link https://utopia.fyi/space/calculator?c=320,14,1.25,1600,18,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
:root {
  --space-3xs: clamp(0.25rem, calc(0.23rem + 0.08vw), 0.31rem);
  --space-2xs: clamp(0.44rem, calc(0.41rem + 0.16vw), 0.56rem);
  --space-xs: clamp(0.69rem, calc(0.64rem + 0.23vw), 0.88rem);
  --space-s: clamp(0.88rem, calc(0.81rem + 0.31vw), 1.13rem);
  --space-m: clamp(1.31rem, calc(1.22rem + 0.47vw), 1.69rem);
  --space-l: clamp(1.75rem, calc(1.63rem + 0.63vw), 2.25rem);
  --space-xl: clamp(2.63rem, calc(2.44rem + 0.94vw), 3.38rem);
  --space-2xl: clamp(3.5rem, calc(3.25rem + 1.25vw), 4.5rem);
  --space-3xl: clamp(5.25rem, calc(4.88rem + 1.88vw), 6.75rem);
  /* One-up pairs */
  --space-3xs-2xs: clamp(0.25rem, calc(0.17rem + 0.39vw), 0.56rem);
  --space-2xs-xs: clamp(0.44rem, calc(0.33rem + 0.55vw), 0.88rem);
  --space-xs-s: clamp(0.69rem, calc(0.58rem + 0.55vw), 1.13rem);
  --space-s-m: clamp(0.88rem, calc(0.67rem + 1.02vw), 1.69rem);
  --space-m-l: clamp(1.31rem, calc(1.08rem + 1.17vw), 2.25rem);
  --space-l-xl: clamp(1.75rem, calc(1.34rem + 2.03vw), 3.38rem);
  --space-xl-2xl: clamp(2.63rem, calc(2.16rem + 2.34vw), 4.5rem);
  --space-2xl-3xl: clamp(3.5rem, calc(2.69rem + 4.06vw), 6.75rem);
  /* Custom pairs */
  --space-s-l: clamp(0.88rem, calc(0.53rem + 1.72vw), 2.25rem);
}

body,
html {
  font-size: var(--step-0);
  font-family: "Poppins", sans-serif;
  font-optical-sizing: auto;
}

img {
  max-width: 100%;
}

.text-wrap-balance {
  text-wrap: balance;
}

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

.border-radius-1 {
  border-radius: 1rem;
}

.border-radius-05 {
  border-radius: 0.5rem;
}

.aspect-ratio-auto {
  aspect-ratio: auto !important;
}

.aspect-ratio-16-9 {
  aspect-ratio: 16/9 !important;
}

.youtube-iframe-16-9 {
  width: 100%;
  aspect-ratio: 16/9;
}

:root {
  scroll-behavior: auto;
}

@font-face {
  font-family: JennaSue;
  src: url("/styles/fonts/JennaSue.ttf");
}
@font-face {
  font-family: ShadowLight;
  src: url("/styles/fonts/ShadowsIntoLightTwo-Regular.ttf");
}
* {
  text-wrap: pretty;
}

.air-datepicker {
  --adp-font-family: "Poppins";
}

.grid-lg-75-3-1 {
  --grid: 3;
  display: grid !important;
  gap: 1rem !important;
  grid-template-columns: repeat(var(--grid), 1fr);
}
@media (max-width: 1200px) {
  .grid-lg-75-3-1 {
    --grid: 2;
  }
}
@media (max-width: 768px) {
  .grid-lg-75-3-1 {
    --grid: 1;
  }
}

.voucher-information-modal .modal-content {
  background: #FFF9EA;
}
.voucher-information-modal .modal-header {
  border: 0;
}