/* @link https://utopia.fyi/type/calculator?c=576,16,1.125,2560,17,1.125,10,4,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
:root {
  --step--4: clamp(0.6243rem, 0.613rem + 0.0315vi, 0.6633rem);
  --step--3: clamp(0.7023rem, 0.6896rem + 0.0354vi, 0.7462rem);
  --step--2: clamp(0.7901rem, 0.7758rem + 0.0398vi, 0.8395rem);
  --step--1: clamp(0.8889rem, 0.8728rem + 0.0448vi, 0.9444rem);
  --step-0: clamp(1rem, 0.9819rem + 0.0504vi, 1.0625rem);
  --step-1: clamp(1.125rem, 1.1046rem + 0.0567vi, 1.1953rem);
  --step-2: clamp(1.2656rem, 1.2427rem + 0.0638vi, 1.3447rem);
  --step-3: clamp(1.4238rem, 1.398rem + 0.0718vi, 1.5128rem);
  --step-4: clamp(1.6018rem, 1.5727rem + 0.0807vi, 1.7019rem);
  --step-5: clamp(1.802rem, 1.7693rem + 0.0908vi, 1.9147rem);
  --step-6: clamp(2.0273rem, 1.9905rem + 0.1022vi, 2.154rem);
  --step-7: clamp(2.2807rem, 2.2393rem + 0.115vi, 2.4232rem);
  --step-8: clamp(2.5658rem, 2.5192rem + 0.1293vi, 2.7261rem);
  --step-9: clamp(2.8865rem, 2.8341rem + 0.1455vi, 3.0669rem);
  --step-10: clamp(3.2473rem, 3.1884rem + 0.1637vi, 3.4503rem);
}

.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);
}

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

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

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

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

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

body,
html {
  font-size: var(--step-0);
}

/* @link https://utopia.fyi/space/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25|0.25,1.5|2|3|4|6|6,s-l&g=s,l,xl,12 */
:root {
  --space-4xs: clamp(0.3125rem, 0.3125rem + 0vi, 0.3125rem);
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vi, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vi, 0.625rem);
  --space-xs: clamp(0.875rem, 0.8533rem + 0.1087vi, 0.9375rem);
  --space-s: clamp(1.125rem, 1.0815rem + 0.2174vi, 1.25rem);
  --space-m: clamp(1.6875rem, 1.6223rem + 0.3261vi, 1.875rem);
  --space-l: clamp(2.25rem, 2.163rem + 0.4348vi, 2.5rem);
  --space-xl: clamp(3.375rem, 3.2446rem + 0.6522vi, 3.75rem);
  --space-2xl: clamp(4.5rem, 4.3261rem + 0.8696vi, 5rem);
  --space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vi, 7.5rem);
  --space-4xl: clamp(6.75rem, 6.4891rem + 1.3043vi, 7.5rem);
  /* One-up pairs */
  --space-4xs-3xs: clamp(0.3125rem, 0.3125rem + 0vi, 0.3125rem);
  --space-3xs-2xs: clamp(0.3125rem, 0.2038rem + 0.5435vi, 0.625rem);
  --space-2xs-xs: clamp(0.5625rem, 0.4321rem + 0.6522vi, 0.9375rem);
  --space-xs-s: clamp(0.875rem, 0.7446rem + 0.6522vi, 1.25rem);
  --space-s-m: clamp(1.125rem, 0.8641rem + 1.3043vi, 1.875rem);
  --space-m-l: clamp(1.6875rem, 1.4049rem + 1.413vi, 2.5rem);
  --space-l-xl: clamp(2.25rem, 1.7283rem + 2.6087vi, 3.75rem);
  --space-xl-2xl: clamp(3.375rem, 2.8098rem + 2.8261vi, 5rem);
  --space-2xl-3xl: clamp(4.5rem, 3.4565rem + 5.2174vi, 7.5rem);
  --space-3xl-4xl: clamp(6.75rem, 6.4891rem + 1.3043vi, 7.5rem);
  /* Custom pairs */
  --space-s-l: clamp(1.125rem, 0.6467rem + 2.3913vi, 2.5rem);
}

:root {
  --text-color: #555960;
  --ihh-primary-blue: #2F2E73;
  --ihh-secondary-purple: #97549E;
  --ihh-secondary-forest-green: #2F5954;
  --ihh-secondary-turquoise: #77CBC7;
  --ihh-secondary-light-blue: #C7E2EB;
  --ihh-secondary-light-purple: #DDC7C8;
  --ihh-secondary-beige: #F8F2EE;
  --ihh-light-primary-blue: #ACABC7;
  --ihh-bg-light-blue: #E9F3F7;
  --ihh-bg-light-purple: #F1E9EF;
  --ihh-bg-beige: #F8F2EE;
  --ihh-bg-light-turquoise: #EAF7F6;
  --ihh-gleneagles: #00769C;
  --ihh-pantai: #307FDE;
  --ihh-pcmc: #8f6f4C;
  --ihh-island: #136E70;
  --ihh-timberland: #84AFA1;
}

body {
  color: var(--text-color);
  font-optical-sizing: auto;
  font-family: "Inter", sans-serif !important;
}

.ihh-primary-blue {
  color: var(--ihh-primary-blue) !important;
}

.ihh-secondary-purple {
  color: var(--ihh-secondary-purple) !important;
}

.ihh-secondary-forest-green {
  color: var(--ihh-secondary-forest-green) !important;
}

.ihh-secondary-turquoise {
  color: var(--ihh-secondary-turquoise) !important;
}

.ihh-secondary-light-blue {
  color: var(--ihh-secondary-light-blue) !important;
}

.ihh-secondary-light-purple {
  color: var(--ihh-secondary-light-purple) !important;
}

.ihh-secondary-beige {
  color: var(--ihh-secondary-beige) !important;
}

.ihh-light-primary-blue {
  color: var(--ihh-light-primary-blue) !important;
}

.ihh-text-white {
  color: white;
}

/*background-color*/
.bg-primary-blue {
  background-color: var(--ihh-primary-blue) !important;
}

.bg-secondary-purple {
  background-color: var(--ihh-secondary-purple) !important;
}

.bg-secondary-forest-green {
  background-color: var(--ihh-secondary-forest-green) !important;
}

.bg-secondary-turquoise {
  background-color: var(--ihh-secondary-turquoise) !important;
}

.bg-secondary-light-blue {
  background-color: var(--ihh-secondary-light-blue) !important;
}

.bg-secondary-light-purple {
  background-color: var(--ihh-secondary-light-purple) !important;
}

.bg-secondary-beige {
  background-color: var(--ihh-secondary-beige) !important;
}

.bg-light-primary-blue {
  background-color: var(--ihh-light-primary-blue) !important;
}

.bg-bg-light-blue {
  background-color: var(--ihh-bg-light-blue) !important;
}

.bg-bg-light-purple {
  background-color: var(--ihh-bg-light-purple) !important;
}

.bg-bg-light-beige {
  background-color: var(--ihh-bg-beige) !important;
}

.bg-bg-light-turquoise {
  background-color: var(--ihh-bg-light-turquoise) !important;
}

.text-gray {
  color: #5c6f6a !important;
}

.text-white {
  color: #FFFFFF !important;
}

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

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

.line-height-1 {
  line-height: 1 !important;
}

.line-height-half {
  line-height: 1.15 !important;
}

.line-height-tall {
  line-height: 1.6;
}

img {
  max-width: 100%;
}

.color-inherit {
  color: inherit;
}

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

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

.width-fit-content {
  width: fit-content;
}

body {
  line-height: 1.3;
}

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

.border-radius-50 {
  border-radius: 50%;
}

.border-radius-0-5 {
  border-radius: 0.5rem;
}

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

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

.aspect-ratio-1 {
  aspect-ratio: 1;
}

.contain-layout {
  contain: layout;
}