/* =========================================
   1. VARIABLES & CONFIGURATION
   ========================================= */
:root {
  --base-font-size: 16px;

  /* WIDTHS */
  --width-gutter: 2.5rem;
  --width-content-md: 1200px;
  --width-content-sm: 980px;
  --width-content-xsm: 600px;
  --width-content-lg: 1600px;
  --width-content-full: 100%;

  /* FONT FAMILIES */
  --ff-heading: "Poppins", sans-serif;
  --ff-body: "Poppins", sans-serif;

  /* FONT SIZES */
  --fs-h1: 3rem;
  --fs-h2: 2.25rem;
  --fs-h3: 1.5rem;
  --fs-h4: 1.3rem;
  --fs-h5: 1.2rem;
  --fs-h6: 1rem;

  --fs-p-xsm: 0.75rem;
  --fs-p-sm: 0.875rem;
  --fs-p-md: 1rem;
  --fs-p-lg: 1.125rem;
  --fs-p-xlg: 1.5rem;
  --fs-p-xxlg: 1.75rem;

  /* BORDER RADIUS */
  --border-radius-xsm: 0.125rem;
  --border-radius-sm: 0.25rem;
  --border-radius-md: 0.5rem;
  --border-radius-lg: 1.5rem;
  --border-radius-pill: 99rem;

  /* SPACING */
  --spacing-xxsm: 0.25rem;
  /* 4px */
  --spacing-xsm: 0.5rem;
  /* 8px */
  --spacing-sm: 1rem;
  /* 16px */
  --spacing-md: 2rem;
  /* 32px */
  --spacing-lg: 3rem;
  /* 48px */
  --spacing-xlg: 5rem;
  /* 80px */
  --spacing-xxlg: 10rem;
  /* 160px */

  /* SHADOWS */
  --shadow-xsm: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
  --shadow-sm: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
  --shadow-md: 0 8px 16px 0 rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 12px 24px 0 rgba(0, 0, 0, 0.1);
  --shadow-xlg: 0 16px 32px 0 rgba(0, 0, 0, 0.1);

  --text-shadow-xsm: 0 1px 4px rgba(0, 0, 0, 0.4);
  --text-shadow-sm: 0 4px 8px rgba(0, 0, 0, 0.4);
  --text-shadow-md: 0 8px 16px rgba(0, 0, 0, 0.4);
  --text-shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.4);
  --text-shadow-xlg: 0 16px 32px rgba(0, 0, 0, 0.4);

  /* COLORS */
  --clr-primary-light: #e4f0f8;
  --clr-primary: #1a9af3;
  --clr-secondary-light: #f1e7cf;
  --clr-secondary: #e9ba45;
  --clr-trinary: #001c6e;
  --clr-black: #000;
  --clr-white: #fff;
  --clr-grey: #666666;
  --clr-green: #C4D600;
  --clr-grey-light: #ececec;
  --clr-text: #323232;
  --clr-link: var(--clr-primary);
  --clr-link-hover: black;

  --clr-h1: var(--clr-text);
  --clr-h2: var(--clr-text);
  --clr-h3: var(--clr-text);
  --clr-h4: var(--clr-text);
  --clr-h5: var(--clr-text);
  --clr-h6: var(--clr-text);
  --clr-p: var(--clr-text);

  /* COMPONENT SPECIFICS */
  --sideHeaderWidth: 140px;
  --body-bg: #FAFAFA;
  --page-bg: #F5F5F5;
  --baseline: 15px;

  /* ICONS */
  --icon-round-width: 50px;
  --icon-round-height: 50px;
  --icon-round-width-md: 80px;
  --icon-round-height-md: 80px;
  --icon-round-width-lg: 100px;
  --icon-round-height-lg: 100px;
}

@media screen and (max-width: 600px) {
  :root {
    --sideHeaderWidth: 80px;
  }
}

/* =========================================
   2. RESET & BASE ELEMENTS
   ========================================= */
*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-p-md);
  line-height: 1.6;
  color: var(--clr-text);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  background: white;
}

a {
  color: var(--clr-link);
  transition: .3s color;
}

a:hover {
  color: var(--clr-link-hover);
}

.wf-navIcon {
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.wf-img img {
  max-width: 100%;
  height: auto;
}

/* =========================================
   3. TYPOGRAPHY
   ========================================= */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--ff-heading);
}

h1 {
  color: var(--clr-h1);
  font-size: var(--fs-h1);
  margin: 1rem 0;
  line-height: 1.2;
}

h2 {
  color: var(--clr-h2);
  font-size: var(--fs-h2);
  margin: 1rem 0;
  line-height: 1.3;
}

h3 {
  color: var(--clr-h3);
  font-size: var(--fs-h3);
  margin: 1rem 0;
  line-height: 1.4;
}

h4 {
  color: var(--clr-h4);
  font-size: var(--fs-h4);
  margin: 1rem 0;
}

h5 {
  color: var(--clr-h5);
  font-size: var(--fs-h5);
  margin: 1rem 0;
}

h6 {
  color: var(--clr-h6);
  font-size: var(--fs-h6);
  margin: 1rem 0;
}

p {
  margin: 0 0 1rem 0;
  font-size: var(--fs-p-md);
  color: var(--clr-p);
}

p:first-child {
  margin-top: 0;
}

p:last-child {
  margin-bottom: 0;
}

.wf-p--xsm {
  font-size: var(--fs-p-xsm);
}

.wf-p--sm {
  font-size: var(--fs-p-sm);
}

.wf-p--md {
  font-size: var(--fs-p);
}

.wf-p--lg {
  font-size: var(--fs-p-lg);
}

.wf-p--xlg {
  font-size: var(--fs-p-xlg);
}

.wf-p--xxlg {
  font-size: var(--fs-p-xxlg);
}

/* =========================================
   4. LAYOUT SYSTEM (ROW, ROW CONTENT, COLGROUP, COL, BLOCKS, BLOCK)
   ========================================= */
.wf-row {
  display: flex;
  padding: var(--spacing-xlg) 0;
  margin: 0;
  background-size: cover;
  position: relative;
}

.wf-row--lg {
  padding: var(--spacing-xxlg) 0;
}

.wf-row--sm {
  padding: var(--spacing-lg) 0;
}

.wf-row__content {
  margin: 0 auto;
  padding: 0 var(--width-gutter);
  max-width: var(--width-content-md);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.wf-row__content--sm {
  max-width: var(--width-content-sm);
}

.wf-row__content--lg {
  max-width: var(--width-content-lg);
}

.wf-row--wide .wf-row__content {
  max-width: var(--width-content-full);
  padding: 0;
}

body:has(.wf-sideHeader) .wf-row:first-of-type {
  margin-left: var(--sideHeaderWidth);
}

/* Flex Column Group & Blocks */
.wf-colGroup,
.wf-blocks {
  --gap: var(--spacing-md);
  --columns: 6;
  display: flex;
  gap: var(--gap);
  min-width: 0;
  flex-wrap: wrap;
  background-size: cover;
  position: relative;
}

.wf-blocks {
  --gap: var(--spacing-sm);
  --columns: 2;
}

/* Flex Utilities */
.direction\:row {
  flex-direction: row;
}

.direction\:row-reverse {
  flex-direction: row-reverse;
}

.direction\:column {
  flex-direction: column;
}

.wrap\:wrap {
  flex-wrap: wrap;
}

.wrap\:nowrap {
  flex-wrap: nowrap;
}

.justify\:center {
  justify-content: center;
}

.justify\:space-between {
  justify-content: space-between;
}

.justify\:start {
  justify-content: flex-start;
}

.justify\:end {
  justify-content: flex-end;
}

.justify\:space-around {
  justify-content: space-around;
}

.align\:center {
  align-items: center;
}

.align\:start {
  align-items: flex-start;
}

.align\:end {
  align-items: flex-end;
}

.align-self\:center {
  align-self: center;
}

.align-self\:start {
  align-self: flex-start;
}

.align-self\:end {
  align-self: flex-end;
}

.place-self\:center {
  place-self: center;
}

.place-self\:start {
  place-self: flex-start;
}

.place-self\:end {
  place-self: flex-end;
}

.shrink\:0 {
  flex-shrink: 0;
}

.shrink\:1 {
  flex-shrink: 1;
}

/* Gap Modifiers */
.gap\:0 {
  --gap: 0px;
}

.gap\:xlg {
  --gap: var(--spacing-xlg);
}

.gap\:lg {
  --gap: var(--spacing-lg);
}

.gap\:md {
  --gap: var(--spacing-md);
}

.gap\:sm {
  --gap: var(--spacing-sm);
}

.gap\:xsm {
  --gap: var(--spacing-xsm);
}

/* Column Counts */
.columns\:2 {
  --columns: 2;
}

.columns\:3 {
  --columns: 3;
}

.columns\:4 {
  --columns: 4;
}

.columns\:5 {
  --columns: 5;
}

.columns\:6 {
  --columns: 6;
}

.columns\:7 {
  --columns: 7;
}

.columns\:8 {
  --columns: 8;
}

.columns\:9 {
  --columns: 9;
}

.columns\:10 {
  --columns: 10;
}

.columns\:11 {
  --columns: 11;
}

.columns\:12 {
  --columns: 12;
}

/* Individual Columns & Blocks */
.wf-col,
.wf-block {
  flex-basis: 0;
  flex-grow: 1;
  min-width: calc((100% - (var(--gap) * (var(--columns) - 1))) / var(--columns));
  width: auto;
  background-size: cover;
  position: relative;
}

/* Span Modifiers */
[class^='span:'],
[class*=' span:'] {
  width: calc((100% - (var(--gap) * (var(--columns) - 1))) / var(--columns) * var(--span) + (var(--gap) * (var(--span) - 1)));
  flex-grow: 0;
  flex-basis: auto;
}

.span\:6 {
  --span: 6;
}

.span\:5 {
  --span: 5;
}

.span\:4 {
  --span: 4;
}

.span\:3 {
  --span: 3;
}

.span\:2 {
  --span: 2;
}

.span\:1 {
  --span: 1;
}

.span\:auto {
  flex-grow: 0;
  flex-basis: auto;
  min-width: auto;
  width: auto;
}

/* Auto Columns (Masonry / Waterfall) */

.u-auto-cols-1 {
  column-count: 1;
  display: block;
}

.u-auto-cols-2 {
  column-count: 2;
  display: block;
  gap: var(--gap);
}

.u-auto-cols-3 {
  column-count: 3;
  display: block;
  gap: var(--gap);
}

.u-auto-cols-4 {
  column-count: 4;
  display: block;
  gap: var(--gap);
}

.u-auto-cols-5 {
  column-count: 5;
  display: block;
  gap: var(--gap);
}

.u-auto-cols-6 {
  column-count: 6;
  display: block;
  gap: var(--gap);
}

[class*="u-auto-cols-"] .wf-col,
[class*="u-auto-cols-"] .wf-block {
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin-bottom: var(--spacing-md);
  min-width: 0;
  flex: none;
}

/* =========================================
   5. COMPONENTS (Buttons, Images, Nav)
   ========================================= */

/* Images */
.wf-img {
  margin: 0;
  width: fit-content;
}

.wf-img figcaption {
  display: block;
  margin-top: var(--spacing-xxsm);
  font-size: .8rem;
  color: var(--grey-500);
}

.wf-img--fill {
  height: 100%;
  width: 100%;
}

.wf-img--fill img {
  object-fit: cover;
  display: block;
  height: 100%;
  width: 100%;
}

.wf-img--contain {
  height: 100%;
  width: 100%;
}

.wf-img--contain img {
  object-fit: contain;
  display: block;
  height: 100%;
  width: 100%;
}

.wf-img--circle img {
  border-radius: 50%;
  aspect-ratio: 1/1;
  object-fit: cover;
  display: block;
  width: fit-content;
}

.wf-img--square img {
  aspect-ratio: 1/1;
  object-fit: cover;
  display: block;
  width: fit-content;
}

.wf-img--rectangle img {
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  width: fit-content;
}

.wf-img--portait img {
  aspect-ratio: 4/5;
  object-fit: cover;
  display: block;
  width: fit-content;
}

.wf-img img {
  display: block;
}

.wf-img--logo {
  display: inline-block;
}

.wf-img--logo img {
  max-height: 175px;
  width: auto;
}

.wf-img-80 {
  width: 80px;
}

.wf-img-100 {
  width: 100px;
}

.wf-img-h-50 {
  height: 50px;
}

/* Buttons */
.wf-btnGroup {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  position: relative;
}

.wf-btnGroup--center {
  justify-content: center;
}

.wf-btn {
  text-decoration: none;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xsm);
  transition: .3s all;
}

.wf-btn--primary {
  border-radius: var(--border-radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--clr-primary);
  color: var(--clr-white);
  border: 1px solid transparent;
}

.wf-btn--primary:hover {
  background: var(--clr-primary-light);
  color: var(--clr-primary);
}

.wf-btn--secondary {
  border-radius: var(--border-radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--clr-secondary);
  color: var(--clr-black);
  border: 1px solid transparent;
}

.wf-btn--secondary:hover {
  background: var(--clr-secondary-light);
}

.wf-btn--outline {
  border-radius: var(--border-radius-md);
  border: 1px solid var(--clr-secondary);
  padding: var(--spacing-sm) var(--spacing-md);
  background: transparent;
}

.wf-btn--outline:hover {
  border-color: var(--clr-secondary-light);
}

.wf-btn--icon {
  padding-block: 0;
  aspect-ratio: 1/1;
}

.wf-btn--black {
  border-radius: var(--border-radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--clr-black);
  color: var(--clr-white);
  border: 1px solid var(--clr-black);
}

.wf-btn--primary-light {
  border-radius: var(--border-radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--clr-primary-light);
  color: var(--clr-black);
  border: 1px solid var(--clr-primary-light);
}

/* Header & Menu */
.wf-header {
  background: white;
  box-shadow: var(--shadow-sm);
  padding: 1rem 0;
}

.wf-header--sticky {
  position: sticky;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
}

.wf-header--fixed {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
}

.wf-header--transparent {
  background: transparent;
  box-shadow: none;
}

.wf-header--xsm {
  padding: var(--spacing-xsm) 0;
}

.wf-menu__list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.wf-menu__item a {
  text-decoration: none;
}

/* Mobile & PopOut Menus */
.wf-mobileMenu,
.wf-popOutMenu {
  position: absolute;
  z-index: 99;
  top: 100%;
  width: 25%;
  right: 0;
  background: white;
  box-shadow: var(--shadow-lg);
  border-bottom-left-radius: var(--border-radius-md);
  border: 1px solid var(--clr-grey-light);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: calc(100vh - var(--height-header));
  visibility: hidden;
  opacity: 0;
  transform: translateY(-1rem);
  transform-origin: top right;
  transition: .3s opacity, .3s transform, 0s visibility .3s;
  transition-delay: 0s, 0s, 0.3s;
}

.wf-popOutMenu--wide {
  width: 100%;
  padding-left: 40px;
  padding-right: 40px;
}

.wf-popOutMenu .wf-menu__list {
  flex-direction: column;
}

.wf-popOutMenu--full {
  border-top: 5px solid var(--clr-primary);
  background: black;
  color: white;
  width: 101vw;
  top: 0;
  height: 101vh;
  flex-direction: unset;
  border-radius: 0;
  box-shadow: none;
  transform: translateX(-50%) translateY(0rem);
  max-height: unset;
  justify-content: center;
}

.wf-mobileMenu--active,
.wf-popOutMenu--active {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.wf-mobileMenu__list,
.wf-popOutMenu__list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.wf-mobileMenu__item a,
.wf-menu__item a {
  text-decoration: none;
  display: block;
}

/* Wide Menu */
.wf-wideMenu {
  max-width: unset;
  width: 97%;
  left: 50%;
  transform: translateX(-50%) translateY(-1rem);
  z-index: 999999999999999;
  border-radius: 10px;
  top: 110%;
  padding-bottom: 40px;
}

.wf-wideMenu .wf-mobileMenu__list,
.wf-wideMenu .wf-menu__list {
  align-items: center;
}

.wf-wideMenu .wf-accordion .fa-solid {
  margin-left: 5px;
}

.wf-wideMenu .wf-accordion__title {
  cursor: pointer;
  text-align: center;
  text-transform: uppercase;
  font-weight: 400;
}

.wf-wideMenu .wf-accordion__item--active .wf-accordion__title {
  text-decoration: underline;
  font-weight: 600;
}

.wf-wideMenu .wf-accordion {
  padding-top: 0px !important;
  font-size: unset;
  background: unset;
  align-items: center;
  margin: unset;
  padding-bottom: 50px !important;
}

.wf-wideMenu .wf-accordion__item {
  padding-bottom: 5px;
}

.wf-wideMenu .wf-accordion__body {
  margin: unset;
  padding-bottom: 0px;
}

.wf-wideMenu .wf-mobileMenu__item a,
.wf-wideMenu .wf-menu__item a {
  border-bottom: unset;
}

/* Menu Icons */
.wf-menuIcon {
  padding: 5px;
  border-radius: 10%;
}

.wf-menuIconWideMenu {
  padding: 5px;
  border-radius: 10%;
  transition: border 0.3s ease;
  border: 2px solid var(--clr-primary);
  background-color: var(--clr-secondary);
}

.wf-menuIconWideMenu:hover {
  background-color: var(--clr-primary);
  border-color: var(--clr-secondary);
}

.wf-menuIconWideMenu .fa-times {
  color: white;
}

.wf-menuIconWideMenu--active {
  border: 2px solid var(--clr-primary);
  padding: 5px;
  border-radius: 10%;
}

/* Vertical Dot Menu */
.wf-verticalDotMenu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: fixed;
  top: 0;
  height: 100vh;
  z-index: 9999;
  left: 2rem;
}

.wf-verticalDotMenu .wf-menu__item {
  display: block;
  position: relative;
  pointer-events: initial;
  cursor: pointer;
}

.wf-verticalDotMenu .wf-menu__item:nth-of-type(n + 2) {
  margin-top: .5rem;
}

.wf-verticalDotMenu .wf-menu__item a {
  position: absolute;
  left: 1.25rem;
  top: 50%;
  text-transform: uppercase;
  letter-spacing: .3em;
  display: block;
  font-size: .75rem;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  background: white;
  color: black;
  padding: .25rem .5rem;
  border-radius: .25rem;
  transform: translateY(-50%);
  width: max-content;
  transition: .3s opacity, 0s visibility .3s;
}

.wf-verticalDotMenu .wf-menu__item:hover a,
.wf-verticalDotMenu--active .wf-menu__item a {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
  pointer-events: initial;
}

.wf-verticalDotMenu .wf-menu__item:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -.25rem;
  width: .5rem;
  height: .5rem;
  border-radius: .25rem;
  background: black;
  transition: .3s background;
}

.wf-verticalDotMenu .wf-menu__item:hover:before {
  background: var(--clr-primary);
}

/* Side Header */
.wf-sideHeader {
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  pointer-events: none;
  overflow: hidden;
  background: unset;
  padding: unset !important;
  margin: unset !important;
}

.wf-sideHeader~.wf-row {
  margin-left: var(--sideHeaderWidth);
}

.wf-sideHeader__bar {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  overflow-x: auto;
  pointer-events: auto;
  width: var(--sideHeaderWidth);
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.wf-sideHeader__overlay {
  pointer-events: auto;
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  transition: .3s opacity, 0s visibility .3s;
}

.wf-sideHeader--open .wf-sideHeader__overlay {
  opacity: .2;
  visibility: visible;
  transition-delay: 0s;
}

.wf-sideHeader--open {
  pointer-events: auto;
}

/* Side Menus */
.wf-mobileMenu--side,
.wf-popOutMenu--side {
  z-index: 2;
  background: black;
  left: var(--sideHeaderWidth);
  top: 0;
  bottom: 0;
  width: 400px;
  max-width: calc(100% - var(--sideHeaderWidth));
  box-shadow: none;
  border-radius: 0;
  border: none;
  max-height: initial;
  overflow-x: auto;
  transform: translateX(-1rem);
  display: flex;
  justify-content: center;
}

.wf-mobileMenu--side .wf-mobileMenu__list,
.wf-popOutMenu--side .wf-menu__list {
  margin: auto 0;
}

.wf-mobileMenu--side.wf-mobileMenu--active,
.wf-popOutMenu--side.wf-popOutMenu--active {
  transform: none;
}

.wf-mobileMenu--side .wf-mobileMenu__item,
.wf-popOutMenu--side .wf-menu__item {
  border: none;
}

.wf-mobileMenu--side .wf-mobileMenu__item a,
.wf-popOutMenu--side .wf-menu__item a {
  color: white;
  padding: .5rem 1rem;
}

.wf-mobileMenu--side .wf-mobileMenu__item--hasSub>a,
.wf-popOutMenu--side .wf-menu__item--hasSub>a {
  width: auto;
}

.wf-mobileMenu--side .wf-menu__subNavTitle,
.wf-popOutMenu--side .wf-menu__subNavTitle {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--clr-grey-light);
  padding-right: 1rem;
}

.wf-menu__subNavTitle a {
  border-bottom: unset;
}

.wf-mobileMenu--side .wf-mobileMenu__item--hasSub,
.wf-popOutMenu--side .wf-menu__item--hasSub {
  justify-content: center;
}

.wf-mobileMenu--side .wf-mobileMenu__sub,
.wf-popOutMenu--side .wf-menu__sub {
  border: none;
  margin-bottom: 0rem;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease-in-out;
  display: block;
}

.wf-menu__sub--active {
  max-height: 500px !important;
}

/* Overlays & Icons */
.wf-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.wf-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  text-align: center;
  aspect-ratio: 1/1;
  width: fit-content;
}

/* Tabs */
.wf-tabs,
.wf-tab-button.active,
.wf-tab-header {
  border: none;
}

.wf-tab-header {
  display: flex;
  border-bottom: 1px solid #ccc;
  gap: 20px;
}

.wf-tab-button {
  padding: 10px 20px;
  border: none;
  background-color: #f1f1f1;
  cursor: pointer;
  transition: background-color 0.3s;
  background: var(--clr-secondary);
  color: black;
  font-weight: bold;
  border-radius: 5px;
  font-size: 16px;
  line-height: 25.6px;
}

.wf-tab-button.active {
  background-color: #fff;
  border-bottom: 2px solid #007bff;
  outline: none;
}

.wf-tab-button.active,
.wf-tab-button:hover {
  background: var(--clr-primary);
  color: white;
}

.wf-tab-button i {
  display: none;
}

.wf-tab-content {
  padding: 20px;
}

.wf-tab-pane {
  display: none;
}

.wf-tab-pane.active {
  display: block;
}

/* Masonry Grid */
.wf-masonry__grid {
  display: grid;
  grid-template: 175px 100px 25px 125px 25px 50px 75px 100px / 1fr 1fr 1fr;
  gap: var(--spacing-sm);
}

.wf-masonry__col {
  text-align: center;
  border: 1px solid var(--clr-grey);
  border-radius: var(--border-radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.wf-masonry__col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius-md);
}

.wf-masonry__col--1 {
  grid-column: 1;
  grid-row: 1 / 5;
}

.wf-masonry__col--2 {
  grid-column: 2;
  grid-row: 1 / 2;
}

.wf-masonry__col--3 {
  grid-column: 3;
  grid-row: 1 / 3;
}

.wf-masonry__col--4 {
  grid-column: 1;
  grid-row: 5 / 9;
}

.wf-masonry__col--5 {
  grid-column: 2;
  grid-row: 2 / 7;
}

.wf-masonry__col--6 {
  grid-column: 3;
  grid-row: 3 / 9;
}

.wf-masonry__col--7 {
  grid-column: 2;
  grid-row: 7 / 9;
}

/* Slider */
.wf-slider {
  display: grid;
  min-height: 100vh;
  transition: all 0.8s cubic-bezier(0.86, 0, 0.07, 1);
  gap: 0;
  grid-template-columns: repeat(5, 1fr);
}

.wf-slider__col {
  grid-row: 1;
  background-color: #ccc;
  transition: all 0.8s cubic-bezier(0.86, 0, 0.07, 1);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  padding: 0 30px;
}

.wf-slider__col .wf-col {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  padding: 20px;
}

.wf-slider__col.open .wf-col {
  opacity: 1;
  position: static;
  transform: none;
  transition-delay: 0.3s;
}

.wf-slider.one-open {
  grid-template-columns: 84% 4% 4% 4% 4%;
}

.wf-slider.two-open {
  grid-template-columns: 4% 84% 4% 4% 4%;
}

.wf-slider.three-open {
  grid-template-columns: 4% 4% 84% 4% 4%;
}

.wf-slider.four-open {
  grid-template-columns: 4% 4% 4% 84% 4%;
}

.wf-slider.five-open {
  grid-template-columns: 4% 4% 4% 4% 84%;
}

.wf-slider__col:not(.open) .wf-col {
  display: none;
}

.wf-slider__col:not(.open):hover {
  background-color: #bbb;
}

.wf-slider__col:first-child::before {
  color: black !important;
}

.wf-slider__col:not(.open)::before {
  content: attr(data-label);
  color: #fff;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(180deg);
  font-weight: bold;
  transition: opacity 0.3s ease;
}

.wf-slider__col.open::before {
  content: attr(data-label);
  color: #fff;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(270deg);
  font-weight: bold;
  transition: opacity 0.3s ease;
  opacity: 1;
}

/* Accordion */
.wf-accordion__item {
  border-radius: 5px;
  padding: 22px;
}

.wf-accordion__title {
  cursor: pointer;
}

/* Expand Box */
.wf-expandBox {
  position: relative;
}

.wf-expandBox__content {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 700px;
  max-width: calc(100vh - (var(--width-gutter) * 2));
  min-height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: .3s opacity, 0s visibility .3s;
}

.wf-expandBox--active .wf-expandBox__content {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.wf-expandBox--left .wf-expandBox__content {
  left: auto;
  right: 0;
}

/* Tooltips */
.wf-tooltip {
  display: none;
  opacity: 0;
  position: absolute;
  top: 30px;
  transform: translateX(-50%);
  max-width: 500px;
  text-align: center;
  background-color: rgba(0, 0, 0, 1);
  color: white;
  padding: 15px;
  border-radius: 25px;
  z-index: 99999999999;
  transition: opacity 0.3s ease;
  word-wrap: break-word;
}

.wf-tooltip.visible {
  opacity: 1;
}

.wf-tooltip a:hover {
  color: var(--clr-secondary);
}

.wf-tooltip-asterisk {
  align-items: center;
}

/* =========================================
   6. UTILITY CLASSES (Padding, Margin, Text)
   ========================================= */

/* Display & Position */
.u-d-flex--row {
  display: flex;
  flex-direction: row;
}

.u-d-flex--column {
  display: flex;
  flex-direction: column;
}

.u-display-block {
  display: block;
}

.u-margin-t-auto {
  margin-top: auto;
}

.u-margin-b-auto {
  margin-bottom: auto;
}

.u-margin-r-auto {
  margin-right: auto;
}

.u-margin-l-auto {
  margin-left: auto;
}

.u-margin-h-auto {
  margin-inline: auto;
}

.u-block-align-center {
  margin-inline: auto;
}

.u-align-content-center {
  align-content: center !important;
}

.auto-self-align {
  align-self: auto !important;
}

/* Gap Utilities */
.u-gap-0 {
  --gap: 0px;
  gap: var(--gap);
}

.u-gap-xsm {
  --gap: var(--spacing-xsm);
  gap: var(--gap);
}

.u-gap-sm {
  --gap: var(--spacing-sm);
  gap: var(--gap);
}

.u-gap-md {
  --gap: var(--spacing-md);
  gap: var(--gap);
}

.u-gap-lg {
  --gap: var(--spacing-lg);
  gap: var(--gap);
}

.u-gap-xlg {
  --gap: var(--spacing-xlg);
  gap: var(--gap);
}

.u-gap-xxlg {
  --gap: var(--spacing-xxlg);
  gap: var(--gap);
}

.u-gap-row-sm {
  --gap: var(--spacing-sm);
  row-gap: var(--gap);
}

.u-gap-row-md {
  --gap: var(--spacing-md);
  row-gap: var(--gap);
}

.u-gap-row-lg {
  --gap: var(--spacing-lg);
  row-gap: var(--gap);
}

.u-gap-row-xlg {
  --gap: var(--spacing-xlg);
  row-gap: var(--gap);
}

.u-gap-row-xxlg {
  --gap: var(--spacing-xxlg);
  row-gap: var(--gap);
}

.no-grid-gap {
  grid-gap: 0 !important;
}

/* Shadow Utilities */
.u-shadow-xsm {
  box-shadow: var(--shadow-xsm);
}

.u-shadow-sm {
  box-shadow: var(--shadow-sm);
}

.u-shadow-md {
  box-shadow: var(--shadow-md);
}

.u-shadow-lg {
  box-shadow: var(--shadow-lg);
}

.u-shadow-xlg {
  box-shadow: var(--shadow-xlg);
}

.u-text-shadow-xsm {
  text-shadow: var(--text-shadow-xsm);
}

.u-text-shadow-sm {
  text-shadow: var(--text-shadow-sm);
}

.u-text-shadow-md {
  text-shadow: var(--text-shadow-md);
}

.u-text-shadow-lg {
  text-shadow: var(--text-shadow-lg);
}

.u-text-shadow-xlg {
  text-shadow: var(--text-shadow-xlg);
}

/* Text Utilities */
.u-text-transform-uppercase {
  text-transform: uppercase;
}

.u-text-transform-none {
  text-transform: none;
}

.u-text-track-sm {
  letter-spacing: .05em;
}

.u-text-track-md {
  letter-spacing: .1em;
}

.u-text-track-lg {
  letter-spacing: 1.5em;
}

.u-text-decoration-none {
  text-decoration: none;
}

.u-text-align-center {
  text-align: center;
}

.u-text-align-left {
  text-align: left;
}

.u-text-align-right {
  text-align: right;
}

.u-text-align-justify {
  text-align: justify;
}

.u-fw-normal {
  font-weight: normal;
}

.u-fw-bold {
  font-weight: bold;
}

.u-fw-light {
  font-weight: light;
}

.c-glossTerm {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  margin-right: .25rem;
  text-decoration: none !important;
  cursor: pointer;
  color: var(--clr-primary);
}

.active-gloss-term-icon {
  color: var(--clr-secondary) !important;
}

.c-glossTerm:hover {
  z-index: 10;
  color: var(--clr-secondary);
}

.c-glossTerm:hover .gloss-term-icon {
  color: var(--clr-secondary);
}

.gloss-term-icon {
  color: var(--clr-primary);
  margin-left: 5px;
}

/* Border Radius Utilities */
.u-border-radius-0 {
  border-radius: 0;
}

.u-border-radius-xsm {
  border-radius: var(--border-radius-xsm);
}

.u-border-radius-sm {
  border-radius: var(--border-radius-sm);
}

.u-border-radius-md {
  border-radius: var(--border-radius-md);
}

.u-border-radius-lg {
  border-radius: var(--border-radius-lg);
}

.u-border-radius-pill {
  border-radius: var(--border-radius-pill);
}

.u-border-t-l-radius-md {
  border-top-left-radius: var(--border-radius-md);
}

.u-border-t-r-radius-md {
  border-top-right-radius: var(--border-radius-md);
}

.u-border-b-l-radius-md {
  border-bottom-left-radius: var(--border-radius-md);
}

.u-border-b-r-radius-md {
  border-bottom-right-radius: var(--border-radius-md);
}

/* Padding Utilities */
.u-padding-xxsm {
  padding: var(--spacing-xxsm);
}

.u-padding-t-xxsm {
  padding-top: var(--spacing-xxsm);
}

.u-padding-b-xxsm {
  padding-bottom: var(--spacing-xxsm);
}

.u-padding-l-xxsm {
  padding-left: var(--spacing-xxsm);
}

.u-padding-r-xxsm {
  padding-right: var(--spacing-xxsm);
}

.u-padding-v-xxsm {
  padding-block: var(--spacing-xxsm);
}

.u-padding-h-xxsm {
  padding-inline: var(--spacing-xxsm);
}

.u-padding-xsm {
  padding: var(--spacing-xsm);
}

.u-padding-t-xsm {
  padding-top: var(--spacing-xsm);
}

.u-padding-b-xsm {
  padding-bottom: var(--spacing-xsm);
}

.u-padding-l-xsm {
  padding-left: var(--spacing-xsm);
}

.u-padding-r-xsm {
  padding-right: var(--spacing-xsm);
}

.u-padding-v-xsm {
  padding-block: var(--spacing-xsm);
}

.u-padding-h-xsm {
  padding-inline: var(--spacing-xsm);
}

.u-padding-sm {
  padding: var(--spacing-sm);
}

.u-padding-t-sm {
  padding-top: var(--spacing-sm);
}

.u-padding-b-sm {
  padding-bottom: var(--spacing-sm);
}

.u-padding-l-sm {
  padding-left: var(--spacing-sm);
}

.u-padding-r-sm {
  padding-right: var(--spacing-sm);
}

.u-padding-v-sm {
  padding-block: var(--spacing-sm);
}

.u-padding-h-sm {
  padding-inline: var(--spacing-sm);
}

.u-padding-md {
  padding: var(--spacing-md);
}

.u-padding-t-md {
  padding-top: var(--spacing-md);
}

.u-padding-b-md {
  padding-bottom: var(--spacing-md);
}

.u-padding-l-md {
  padding-left: var(--spacing-md);
}

.u-padding-r-md {
  padding-right: var(--spacing-md);
}

.u-padding-v-md {
  padding-block: var(--spacing-md);
}

.u-padding-h-md {
  padding-inline: var(--spacing-md);
}

.u-padding-lg {
  padding: var(--spacing-lg);
}

.u-padding-t-lg {
  padding-top: var(--spacing-lg);
}

.u-padding-b-lg {
  padding-bottom: var(--spacing-lg);
}

.u-padding-l-lg {
  padding-left: var(--spacing-lg);
}

.u-padding-r-lg {
  padding-right: var(--spacing-lg);
}

.u-padding-v-lg {
  padding-block: var(--spacing-lg);
}

.u-padding-h-lg {
  padding-inline: var(--spacing-lg);
}

.u-padding-xlg {
  padding: var(--spacing-xlg);
}

.u-padding-t-xlg {
  padding-top: var(--spacing-xlg);
}

.u-padding-b-xlg {
  padding-bottom: var(--spacing-xlg);
}

.u-padding-l-xlg {
  padding-left: var(--spacing-xlg);
}

.u-padding-r-xlg {
  padding-right: var(--spacing-xlg);
}

.u-padding-v-xlg {
  padding-block: var(--spacing-xlg);
}

.u-padding-h-xlg {
  padding-inline: var(--spacing-xlg);
}

.u-padding-xxlg {
  padding: var(--spacing-xxlg);
}

.u-padding-t-xxlg {
  padding-top: var(--spacing-xxlg);
}

.u-padding-b-xxlg {
  padding-bottom: var(--spacing-xxlg);
}

.u-padding-l-xxlg {
  padding-left: var(--spacing-xxlg);
}

.u-padding-r-xxlg {
  padding-right: var(--spacing-xxlg);
}

.u-padding-v-xxlg {
  padding-block: var(--spacing-xxlg);
}

.u-padding-h-xxlg {
  padding-inline: var(--spacing-xxlg);
}

.u-padding-0 {
  padding: 0;
}

.u-padding-t-0 {
  padding-top: 0;
}

.u-padding-b-0 {
  padding-bottom: 0;
}

.u-padding-l-0 {
  padding-left: 0;
}

.u-padding-r-0 {
  padding-right: 0;
}

.u-padding-v-0 {
  padding-block: 0;
}

.u-padding-h-0 {
  padding-inline: 0;
}

/* Margin Utilities */
.u-margin-xxsm {
  margin: var(--spacing-xxsm);
}

.u-margin-t-xxsm {
  margin-top: var(--spacing-xxsm);
}

.u-margin-b-xxsm {
  margin-bottom: var(--spacing-xxsm);
}

.u-margin-l-xxsm {
  margin-left: var(--spacing-xxsm);
}

.u-margin-r-xxsm {
  margin-right: var(--spacing-xxsm);
}

.u-margin-v-xxsm {
  margin-block: var(--spacing-xxsm);
}

.u-margin-h-xxsm {
  margin-inline: var(--spacing-xxsm);
}

.u-margin-xsm {
  margin: var(--spacing-xsm);
}

.u-margin-t-xsm {
  margin-top: var(--spacing-xsm);
}

.u-margin-b-xsm {
  margin-bottom: var(--spacing-xsm);
}

.u-margin-l-xsm {
  margin-left: var(--spacing-xsm);
}

.u-margin-r-xsm {
  margin-right: var(--spacing-xsm);
}

.u-margin-v-xsm {
  margin-block: var(--spacing-xsm);
}

.u-margin-h-xsm {
  margin-inline: var(--spacing-xsm);
}

.u-margin-sm {
  margin: var(--spacing-sm);
}

.u-margin-t-sm {
  margin-top: var(--spacing-sm);
}

.u-margin-b-sm {
  margin-bottom: var(--spacing-sm);
}

.u-margin-l-sm {
  margin-left: var(--spacing-sm);
}

.u-margin-r-sm {
  margin-right: var(--spacing-sm);
}

.u-margin-v-sm {
  margin-block: var(--spacing-sm);
}

.u-margin-h-sm {
  margin-inline: var(--spacing-sm);
}

.u-margin-md {
  margin: var(--spacing-md);
}

.u-margin-t-md {
  margin-top: var(--spacing-md);
}

.u-margin-b-md {
  margin-bottom: var(--spacing-md);
}

.u-margin-l-md {
  margin-left: var(--spacing-md);
}

.u-margin-r-md {
  margin-right: var(--spacing-md);
}

.u-margin-v-md {
  margin-block: var(--spacing-md);
}

.u-margin-h-md {
  margin-inline: var(--spacing-md);
}

.u-margin-lg {
  margin: var(--spacing-lg);
}

.u-margin-t-lg {
  margin-top: var(--spacing-lg);
}

.u-margin-b-lg {
  margin-bottom: var(--spacing-lg);
}

.u-margin-l-lg {
  margin-left: var(--spacing-lg);
}

.u-margin-r-lg {
  margin-right: var(--spacing-lg);
}

.u-margin-v-lg {
  margin-block: var(--spacing-lg);
}

.u-margin-h-lg {
  margin-inline: var(--spacing-lg);
}

.u-margin-xlg {
  margin: var(--spacing-xlg);
}

.u-margin-t-xlg {
  margin-top: var(--spacing-xlg);
}

.u-margin-b-xlg {
  margin-bottom: var(--spacing-xlg);
}

.u-margin-l-xlg {
  margin-left: var(--spacing-xlg);
}

.u-margin-r-xlg {
  margin-right: var(--spacing-xlg);
}

.u-margin-v-xlg {
  margin-block: var(--spacing-xlg);
}

.u-margin-h-xlg {
  margin-inline: var(--spacing-xlg);
}

.u-margin-xxlg {
  margin: var(--spacing-xxlg);
}

.u-margin-t-xxlg {
  margin-top: var(--spacing-xxlg);
}

.u-margin-b-xxlg {
  margin-bottom: var(--spacing-xxlg);
}

.u-margin-l-xxlg {
  margin-left: var(--spacing-xxlg);
}

.u-margin-r-xxlg {
  margin-right: var(--spacing-xxlg);
}

.u-margin-v-xxlg {
  margin-block: var(--spacing-xxlg);
}

.u-margin-h-xxlg {
  margin-inline: var(--spacing-xxlg);
}

.u-margin-0 {
  margin: 0;
}

.u-margin-t-0 {
  margin-top: 0;
}

.u-margin-b-0 {
  margin-bottom: 0;
}

.u-margin-l-0 {
  margin-left: 0;
}

.u-margin-r-0 {
  margin-right: 0;
}

.u-margin-v-0 {
  margin-block: 0;
}

.u-margin-h-0 {
  margin-inline: 0;
}

/* Color Utilities */
.u-clr-primary {
  color: var(--clr-primary);
}

.u-clr-primary-light {
  color: var(--clr-primary-light);
}

.u-clr-secondary {
  color: var(--clr-secondary);
}

.u-clr-secondary-light {
  color: var(--clr-secondary-light);
}

.u-clr-white {
  color: var(--clr-white);
}

.u-clr-black {
  color: var(--clr-black);
}

.u-clr-grey {
  color: var(--clr-grey);
}

.u-clr-grey-light {
  color: var(--clr-grey-light);
}

.hover\:u-clr-primary:hover {
  color: var(--clr-primary);
}

.hover\:u-clr-primary-light:hover {
  color: var(--clr-primary-light);
}

.hover\:u-clr-secondary:hover {
  color: var(--clr-secondary);
}

.hover\:u-clr-secondary-light:hover {
  color: var(--clr-secondary-light);
}

.hover\:u-clr-white:hover {
  color: var(--clr-white);
}

.hover\:u-clr-black:hover {
  color: var(--clr-black);
}

.hover\:u-clr-grey:hover {
  color: var(--clr-grey);
}

.hover\:u-clr-grey-light:hover {
  color: var(--clr-grey-light);
}

/* Background Utilities */
.u-bg-clr-primary {
  background-color: var(--clr-primary);
}

.u-bg-clr-primary-light {
  background-color: var(--clr-primary-light);
}

.u-bg-clr-secondary {
  background-color: var(--clr-secondary);
}

.u-bg-clr-secondary-light {
  background-color: var(--clr-secondary-light);
}

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

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

.u-bg-clr-grey {
  background-color: var(--clr-grey);
}

.u-bg-clr-green {
  background-color: var(--clr-green);
}

.u-bg-clr-grey-light {
  background-color: var(--clr-grey-light);
}

.u-bg-clr-body {
  background-color: #FAFAFA;
}

.u-bg-clr-trinary {
  background-color: var(--clr-trinary);
}

.hover\:u-bg-clr-primary:hover {
  background-color: var(--clr-primary);
}

.hover\:u-bg-clr-primary-light:hover {
  background-color: var(--clr-primary-light);
}

.hover\:u-bg-clr-secondary:hover {
  background-color: var(--clr-secondary);
}

.hover\:u-bg-clr-secondary-light:hover {
  background-color: var(--clr-secondary-light);
}

.hover\:u-bg-clr-white:hover {
  background-color: var(--clr-white);
}

.hover\:u-bg-clr-black:hover {
  background-color: var(--clr-black);
}

.hover\:u-bg-clr-grey:hover {
  background-color: var(--clr-grey);
}

.hover\:u-bg-clr-grey-light:hover {
  background-color: var(--clr-grey-light);
}

/* Border Utilities */
.u-border-style-solid {
  border-style: solid;
}

.u-border-style-dashed {
  border-style: dashed;
}

.u-border-style-dotted {
  border-style: dotted;
}

.u-border-clr-primary {
  border-color: var(--clr-primary);
}

.u-border-clr-primary-light {
  border-color: var(--clr-primary-light);
}

.u-border-clr-secondary {
  border-color: var(--clr-secondary);
}

.u-border-clr-secondary-light {
  border-color: var(--clr-secondary-light);
}

.u-border-clr-grey {
  border-color: var(--clr-grey);
}

.u-border-clr-grey-light {
  border-color: var(--clr-grey-light);
}

.u-border-clr-white {
  border-color: var(--clr-white);
}

.u-border-clr-black {
  border-color: var(--clr-black);
}

.hover\:u-border-clr-primary:hover {
  border-color: var(--clr-primary);
}

.hover\:u-border-clr-primary-light:hover {
  border-color: var(--clr-primary-light);
}

.hover\:u-border-clr-secondary:hover {
  border-color: var(--clr-secondary);
}

.hover\:u-border-clr-secondary-light:hover {
  border-color: var(--clr-secondary-light);
}

.hover\:u-border-clr-grey:hover {
  border-color: var(--clr-grey);
}

.hover\:u-border-clr-grey-light:hover {
  border-color: var(--clr-grey-light);
}

.hover\:u-border-clr-white:hover {
  border-color: var(--clr-white);
}

.hover\:u-border-clr-black:hover {
  border-color: var(--clr-black);
}

.u-border-width-xsm {
  border-width: 1px;
}

.u-border-width-sm {
  border-width: 2px;
}

.u-border-t-width-0 {
  border-top-width: 0;
}

.u-border-t-width-xsm {
  border-top-width: 1px;
}

.u-border-t-width-sm {
  border-top-width: 2px;
}

.u-border-t-width-md {
  border-top-width: 6px;
}

.u-border-r-width-0 {
  border-right-width: 0;
}

.u-border-r-width-xsm {
  border-right-width: 1px;
}

.u-border-r-width-sm {
  border-right-width: 2px;
}

.u-border-r-width-md {
  border-right-width: 3px;
}

.u-border-r-width-lg {
  border-right-width: 6px;
}

.u-border-l-width-0 {
  border-left-width: 0;
}

.u-border-l-width-xsm {
  border-left-width: 1px;
}

.u-border-l-width-sm {
  border-left-width: 2px;
}

.u-border-l-width-md {
  border-left-width: 3px;
}

.u-border-l-width-lg {
  border-left-width: 6px;
}

.u-border-b-width-0 {
  border-bottom-width: 0;
}

.u-border-b-width-xsm {
  border-bottom-width: 1px;
}

.u-border-b-width-sm {
  border-bottom-width: 2px;
}

.u-border-b-width-md {
  border-bottom-width: 3px;
}

.u-border-b-width-lg {
  border-bottom-width: 6px;
}

/* Opacity */
.u-opacity-10 {
  opacity: .1;
}

.u-opacity-20 {
  opacity: .2;
}

.u-opacity-30 {
  opacity: .3;
}

.u-opacity-40 {
  opacity: .4;
}

.u-opacity-50 {
  opacity: .5;
}

.u-opacity-60 {
  opacity: .6;
}

.u-opacity-70 {
  opacity: .7;
}

.u-opacity-80 {
  opacity: .8;
}

.u-opacity-90 {
  opacity: .9;
}

.u-opacity-100 {
  opacity: 1;
}

/* Dimensions & Clips */
.u-height-parent-100 {
  height: 100%;
}

.u-height-screen-100 {
  min-height: 100vh;
}

.u-height-screen-75 {
  min-height: 75vh;
}

.u-height-screen-50 {
  min-height: 50vh;
}

.u-width-parent-100 {
  width: 100%;
}

.wf-w-100 {
  width: 100px;
}

.wf-w-120 {
  width: 120px;
}

.u-max-width-10 {
  max-width: calc(var(--width-content-md) * 0.1);
}

.u-max-width-20 {
  max-width: calc(var(--width-content-md) * 0.2);
}

.u-max-width-30 {
  max-width: calc(var(--width-content-md) * 0.3);
}

.u-max-width-40 {
  max-width: calc(var(--width-content-md) * 0.4);
}

.u-max-width-50 {
  max-width: calc(var(--width-content-md) * 0.5);
}

.u-max-width-60 {
  max-width: calc(var(--width-content-md) * 0.6);
}

.u-max-width-70 {
  max-width: calc(var(--width-content-md) * 0.7);
}

.u-max-width-80 {
  max-width: calc(var(--width-content-md) * 0.8);
}

.u-max-width-90 {
  max-width: calc(var(--width-content-md) * 0.9);
}

.u-max-width-100 {
  max-width: var(--width-content-md);
}

.u-clip-path-slant {
  clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%);
}

.u-clip-path-slant-reverse {
  clip-path: polygon(0 100%, 100% 90%, 100% 10%, 0 0);
}

.u-sr:not(:focus):not(:active):not(:focus-within) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}


/* Special Highlights & Shapes */
.wf-u-highlight {
  position: relative;
  z-index: 5;
}

.wf-u-highlight:before {
  content: '';
  position: absolute;
  width: calc(100% + 4px);
  height: 34%;
  left: 2px;
  bottom: 5px;
  z-index: -1;
  transform: rotate(-2deg);
  background: var(--clr-primary) !important;
}

.wf-u-highlight-secondary {
  position: relative;
  z-index: 5;
}

.wf-u-highlight-secondary::before {
  content: ' ';
  display: block;
  height: 90%;
  width: 100%;
  margin-left: -3px;
  margin-right: -3px;
  position: absolute;
  background: var(--clr-secondary);
  transform: rotate(2deg);
  top: -1px;
  left: -1px;
  border-radius: 20% 25% 20% 24%;
  padding: 10px 3px 3px 10px;
  z-index: -1;
}

.wf-u-highlight-secondary-light {
  display: inline;
  padding: 0.25em 0;
  background: var(--clr-secondary-light);
  color: #000000;
  box-shadow: 0.5em 0 0 var(--clr-secondary-light), -0.5em 0 0 var(--clr-secondary-light);
}

.wf-u-highlight-gradient {
  background-image: linear-gradient(to right, #f27121cc, #e94057cc, #8a2387cc);
  border-radius: 6px;
  padding: 3px 6px;
}

.u-number-circle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -4rem;
  width: 8rem;
  height: 8rem;
  background-color: var(--clr-black);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--clr-white);
  font-size: var(--fs-h1);
  font-weight: bold;
}

.number-percent:after {
  content: "%";
}

.number-plus:after {
  content: "+";
}

.heading-xl {
  font-size: 4rem;
}

.heading-exlg {
  font-size: 8rem;
}

.u-margin-l-nxl {
  margin-left: -4rem;
}

.icon-round-md {
  width: var(--icon-round-width-md);
  height: var(--icon-round-height-md);
  border-radius: 50%;
}

.category-block {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: .5rem;
}

.icon-block {
  width: 120px;
  text-align: center;
}

/* Section Specifics */
.wf-sectionTitle {
  border-bottom: 1px solid black;
  transition: border-bottom 0.3s ease;
}

.wf-colGroup-intersection {
  margin-top: -7rem;
}

.slant-block {
  position: relative;
  margin-top: -2rem;
  z-index: 1;
}

.slant-block:nth-child(2n) {
  z-index: 2;
  width: 90%;
}

.slant-overlay-left {
  position: absolute;
  right: -80%;
  bottom: 5rem;
  z-index: 2;
}

.number-block {
  position: relative;
  padding: 3rem;
  padding-left: 6rem;
  margin-left: 4rem;
}

.wf-text-desc-block .wf-block {
  padding: 25px;
  border: 1px solid var(--clr-grey-light);
  border-width: 0 1px 1px 0;
}

/* =========================================
   7. THIRD PARTY & MODULES (Owl, YT, Books)
   ========================================= */

/* YouTube / Video */
.video {
  padding: 20px;
}

.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.background-video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.background-video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
}

.background-video video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
}

.yt-wrapper {
  overflow: hidden;
  max-width: 100%;
  max-height: 100%;
}

.yt-frame-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  width: 300%;
  left: -100%;
  pointer-events: none;
}

.yt-frame-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform: unset !important;
}

.wf-row:has(.yt-frame-container) {
  min-height: unset !important;
}

.background-video-mute-toggle {
  position: absolute;
  top: 20px;
  left: 20px;
  background-image: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iNTEyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IndoaXRlIj48cGF0aCBkPSJtMTQuNDMzMiAyLjA5ODY5Yy4zNDY1LjE2NjUyLjU2NjguNTE2OS41NjY4LjkwMTN2MTAuNTg1ODFsMS4wNjMzIDEuMDYzM2MuMDM3My0uMDk5NS4wOTEyLS4xOTQ4LjE2MjItLjI4MTcuNDU3Ni0uNTYwMy43NzQ1LTEuMzk2Ny43NzQ1LTIuMzY3NHMtLjMxNjktMS44MDcxLS43NzQ1LTIuMzY3NDJjLS4zNDk0LS40Mjc3NC0uMjg1OC0xLjA1NzcxLjE0MTktMS40MDcwNy40Mjc4LS4zNDkzNyAxLjA1NzctLjI4NTgzIDEuNDA3MS4xNDE5MS43NzQ0Ljk0ODEzIDEuMjI1NSAyLjI0MjA4IDEuMjI1NSAzLjYzMjU4cy0uNDUxMSAyLjY4NDUtMS4yMjU1IDMuNjMyNmMtLjExNjEuMTQyMi0uMjYzMy4yNDQxLS40MjM3LjMwNGwxLjExNjMgMS4xMTY0Yy45MzYtMS4yOTQ5IDEuNTMyOS0zLjA2NzYgMS41MzI5LTUuMDUzIDAtMi4xNTEzMS0uNzAwOS00LjA1MjkzLTEuNzc0NS01LjM2NzQyLS4zNDk0LS40Mjc3NC0uMjg1OC0xLjA1NzcxLjE0MTktMS40MDcwNy40Mjc4LS4zNDkzNyAxLjA1NzctLjI4NTgzIDEuNDA3MS4xNDE5MSAxLjM5MDQgMS43MDIzMyAyLjIyNTUgNC4wNjE0NiAyLjIyNTUgNi42MzI1OCAwIDIuNDk1Ny0uNzg2OCA0Ljc5MTctMi4xMDQ3IDYuNDgxMmwxLjgxMTggMS44MTE3Yy4zOTA1LjM5MDUuMzkwNSAxLjAyMzcgMCAxLjQxNDItLjM5MDYuMzkwNS0xLjAyMzcuMzkwNS0xLjQxNDMgMGwtMTcuOTk5OTYtMTcuOTk5OTljLS4zOTA1Mi0uMzkwNTItLjM5MDUyLTEuMDIzNjggMC0xLjQxNDIxLjM5MDUyLS4zOTA1MiAxLjAyMzY5LS4zOTA1MiAxLjQxNDIxIDBsMy43MDcxIDMuNzA3MDlojg4NDI5Yy4yMjcwNyAwIC40NDczOC0uMDc3MjguNjI0NjktLjIxOTEzbDQuNDUyMTctMy41NjE3M2MuMzAwMi0uMjQwMTQuNzExNC0uMjg2OTYgMS4wNTc5LS4xMjA0NHoiLz48cGF0aCBkPSJtMy4xOTE3MyA2LjYwNjAxIDExLjgwODI3IDExLjgwODI5djIuNTg1N2MwIC4zODQ0LS4yMjAzLjczNDgtLjU2NjguOTAxM3MtLjc1NzcuMTE5Ny0xLjA1NzktLjEyMDRsLTQuNDUyMTctMy41NjE4Yy0uMTc3MzEtLjE0MTgtLjM5NzYyLS4yMTkxLS42MjQ2OS0uMjE5MWgtMy4yOTg0NGMtMS42NTY4NSAwLTMtMS4zNDMyLTMtM3YtNi4wMDAwMWMwLS45Nzc3Ny40Njc3Ny0xLjg0NjI5IDEuMTkxNzMtMi4zOTM5OHoiLz48L2c+PC9zdmc+');
  background-size: 24px 24px;
  width: 24px;
  height: 24px;
  z-index: 1;
  opacity: .8;
  transition: .3s opacity;
}

.background-video-mute-toggle:hover {
  opacity: 1;
}

.background-video-mute-toggle[data-mute="false"] {
  background-image: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iNTEyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IndoaXRlIj48cGF0aCBkPSJtMTUgMi45OTk5OWMwLS4zODQ0LS4yMjAzLS43MzQ3OC0uNTY2OC0uOTAxM3MtLjc1NzcuMTE5Ny0xLjA1NzkuEyMDQ0bC00LjQ1MjE3IDMuNTYxNzNjLS4xNzczMS4xNDE4NS0uMzk3NjIuMjE5MTMtLjYyNDY5LjIxOTEzaC0zLjI5ODQ0Yy0xLjY1Njg1IDAtMyAxLjM0MzE1LTMgM3Y2LjAwMDAxYzAgMS42NTY4IDEuMzQzMTUgMyAzIDNoMy4yOTg0NGMuMjI3MDcgMCAuNDQ3MzguMDc3My42MjQ2OS4yMTkxbDQuNDUyMTctMy41NjE4Yy4zMDAyLjI0MDEuNzExNC4yODY5IDEuMDU3OS4xMjA0cy41NjY4LS41MTY5LjU2NjgtLjkwMTN6Ii8+PHBhdGggZD0ibTE3IDEyYzAtLjk3MDctLjMxNjktMS44MDcxLS43NzQ1LTIuMzY3NDItLjM0OTQtLjQyNzc0LS4yODU4LTEuMDU3NzEuMTQxOS0xLjQwNzA3LjQyNzgtLjM0OTM3IDEuMDU3Ny0uMjg1ODMgMS40MDcxLjE0MTkxLjc3NDQuOTQ4MTMgMS4yMjU1IDIuMjQyMDggMS4yMjU1IDMuNjMyNThzLS40NTExIDIuNjg0NS0xLjIyNTUgMy42MzI2Yy0uMzQ5NC40Mjc3LS45NzkzLjQ5MTMtMS40MDcxLjE0MTktLjQyNzctLjM0OTQtLjQ5MTMtLjk3OTMtLjE0MTktMS40MDcxLjQ1NzYtLjU2MDMuNzc0NS0xLjM5NjcuNzc0NS0yLjM2NzR6Ii8+PHBhdGggZD0ibTE4LjIyNTUgNi42MzI1OGMxLjA3MzYgMS4zMTQ0OSAxLjc3NDUgMy4yMTYxMSAxLjc3NDUgNS4zNjc0MiAwIDIuMTUxMy0uNzAwOSA0LjA1MjktMS43NzQ1IDUuMzY3NC0uMzQ5NC40Mjc4LS4yODU4IDEuMDU3Ny4xNDE5IDEuNDA3MS40Mjc4LjM0OTQgMS4wNTc3LjI4NTggMS40MDcxLS4xNDE5IDEuMzkwNC0xLjcwMjQgMi4yMjU1LTQuMDYxNSAyLjIyNTUtNi42MzI2IDAtMi41NzExMi0uODM1MS00LjkzMDI1LTIuMjI1NS02LjYzMjU4LS4zNDk0LS40Mjc3NC0uOTc5My0uNDkxMjgtMS40MDcxLS4xNDE5MS0uNDI3Ny4zNDkzNi0uNDkxMy45NzkzMy0uMTQxOSAxLjQwNzA3eiIvPjwvZz48L3N2Zz4=');
}

/* Owl Carousel */
.owl-stage {
  display: flex !important;
  gap: unset;
}

.owl-carousel.wf-row {
  width: auto !important;
  display: flex !important;
}

.owl-item .wf-colGroup {
  flex-wrap: nowrap;
}

.owl-prev,
.owl-next {
  background-color: var(--clr-primary) !important;
  color: white !important;
  border-radius: 50% !important;
  margin: 0 5px !important;
}

.owl-nav-container {
  position: absolute;
  width: 100%;
  top: 40%;
}

.owl-nav-container .owl-next {
  position: absolute;
  right: 0;
}

.owl-nav-container .owl-prev {
  position: absolute;
  left: 0;
}

.owl-prev-icon,
.owl-next-icon {
  font-size: 20px;
  padding: 10px 13px;
}

.owl-theme .owl-dots,
.owl-theme .owl-nav {
  margin-top: 15px !important;
  -webkit-tap-highlight-color: #0a853d !important;
}

.owl-nav {
  margin-top: 15px !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Book Component */
.book-row {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cover img {
  max-width: unset;
}

.cover {
  width: calc(var(--baseline) * 60);
  height: calc(var(--baseline) * 42.6);
  box-shadow: 0 0 100px rgba(0, 0, 0, 0.3);
}

.book {
  width: 100%;
  height: 100%;
  display: flex;
  perspective: 1200px;
}

.book__page {
  position: relative;
  width: 50%;
  height: 100%;
  display: grid;
  transform: rotateY(0deg);
  transition: transform 0.9s cubic-bezier(0.645, 0.045, 0.355, 1);
  transform-origin: 0% 0%;
  background-color: var(--page-bg);
  background-image: linear-gradient(90deg, rgba(227, 227, 227, 1) 0%, rgba(247, 247, 247, 0) 18%);
}

.book__page:nth-of-type(1) {
  background-image: linear-gradient(-90deg, rgba(227, 227, 227, 1) 0%, rgba(247, 247, 247, 0) 18%);
}

.book__page--1 {
  cursor: pointer;
}

.book__page--1 img {
  width: 100%;
  max-width: 100%;
}

.book__page--2 {
  position: absolute;
  right: 0;
  pointer-events: none;
  cursor: pointer;
  transform-style: preserve-3d;
  background-color: var(--page-bg);
  background-image: linear-gradient(90deg, rgba(227, 227, 227, 1) 0%, rgba(247, 247, 247, 0) 18%);
}

.book__page--4 {
  cursor: pointer;
  padding: 0 calc(var(--baseline) * 3);
  overflow-y: scroll;
  overflow-x: hidden;
}

.book__page-front {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotateY(0deg) translateZ(1px);
}

.book__page-back {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0 calc(var(--baseline) * 1.8);
  transform: rotateY(180deg) translateZ(1px);
}

.book-row .book__page {
  background-color: var(--page-bg);
}

.book-row input[type="radio"] {
  display: none;
}

.book-row input[type='radio']:checked+label {
  background-color: var(--page-bg);
}

.book-row input[type='radio']:checked+.wf-img {
  background-color: var(--page-bg);
}

.book-row input[type="radio"]:checked+.book__page {
  transition: transform 0.9s cubic-bezier(0.645, 0.045, 0.355, 1);
  transform: rotateY(-180deg);
}

/* =========================================
   8. ANIMATIONS & MODALS
   ========================================= */

/* Modals */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999999999999;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.modal-overlay.open {
  visibility: visible;
  opacity: 1;
}

.modal-container {
  background-color: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transform: scale(0.7);
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  height: 70%;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 30px;
}

.modal-overlay.open .modal-container {
  transform: scale(1);
}

.modal-container .wf-row {
  margin: 0 !important;
}

.close-modal {
  position: absolute;
  top: 25px;
  right: 20px;
  z-index: 1000;
  color: white;
  cursor: pointer;
}

.close-modal:hover {
  color: black;
}

/* Loading & Previews */
.loading-overlay-preview {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  z-index: 999999999;
}

.loading-overlay-preview img {
  width: 100px;
  animation: pulse 1s infinite;
}

.loading-overlay-preview h4 {
  text-align: center;
}

/* Inputs */
.number-input {
  font-size: 50px;
  position: relative;
}

.toggle-container {
  position: fixed;
  top: 35px;
  left: 100px;
  z-index: 1000;
  animation: drop 1s ease forwards;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
  border-radius: 20px;
}

.toggle {
  position: relative;
  display: inline-block;
  width: 150px;
  height: 34px;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked+.toggle-slider {
  background-color: var(--clr-primary);
}

input:checked+.toggle-slider:before {
  transform: translateX(135px);
}

.toggle-text {
  color: var(--clr-grey);
  font-size: 17px !important;
  position: absolute;
  right: 10px;
  top: 4px;
  transition: transform 0.3s ease;
}

input:checked+.toggle-slider .toggle-text {
  transform: translateX(-25px);
  color: white;
}

/* Keyframes & Transitions */
@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

.slide-up {
  animation: slideUp 1s forwards;
}

@keyframes slideUp {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}

.fade-in {
  animation: fadeIn 0.5s forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fade-out {
  animation: fadeOut 0.5s forwards;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fade-rotate {
  animation: fadeRotate 1s forwards;
}

@keyframes fadeRotate {
  from {
    transform: rotate(0deg);
    opacity: 1;
  }

  to {
    transform: rotate(90deg);
    opacity: 0;
  }
}

.zoom-out {
  animation: zoomOut 1s forwards;
}

@keyframes zoomOut {
  from {
    transform: scale(1);
    opacity: 1;
  }

  to {
    transform: scale(0.5);
    opacity: 0;
  }
}

@keyframes drop {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

[data-animate="typewriter"]::after {
  content: '|';
  animation: blink 1s step-end infinite;
  margin-left: 0.1em;
}

@keyframes blink {

  from,
  to {
    color: transparent;
  }

  50% {
    color: var(--clr-secondary);
  }
}

.fade-out-transition {
  opacity: 0 !important;
  transition: opacity 0.6s ease-out !important;
}

.fade-in-transition {
  opacity: 1 !important;
  transition: opacity 0.6s ease-in !important;
}

.image-holder,
.image-slideshow {
  opacity: 1;
  transition: opacity 0.6s;
}

.image-slideshow {
  height: 100%;
}

/* Parallax */
.parallax-container {
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.parallax-divider {
  width: 100%;
  height: 200px;
  background-color: var(--clr-black);
}

.scroll-parallax {
  transition: background-image 1s ease-out;
}

.sticky-image-container {
  width: 50%;
  height: 40%;
  position: sticky;
  top: 0;
}

.image-transition {
  position: sticky;
  transition: transform 1.5s ease-in-out, opacity 1s ease-in-out;
  opacity: 0;
}

.image-left-slide {
  transform: translateX(-100%);
}

.image-right-slide {
  transform: translateX(100%);
}

.visible {
  transform: translateX(0%);
  opacity: 1;
}

/* Horizontal Mode */
.h-mode-active .horizontal-container {
  height: 100vh;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  padding: 0;
  overflow: hidden;
}

.h-mode-active .horizontal-container .wf-row {
  position: relative;
  min-width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.align-row-center {
  align-items: center !important;
}

.h-mode-active .horizontal-container .horizontal-container-wrapper {
  display: flex;
}

.h-mode-active .horizontal-container .wf-colGroup:not(.nested):not(.wf-masonry__grid):not(.wf-blocks) {
  display: flex;
  width: 100%;
  min-width: 15%;
  justify-content: center;
  align-content: flex-start;
}

.h-mode-active .horizontal-container .wf-col:not(.nested):not(.wf-masonry__col):not(.wf-block) {
  align-self: center;
}

.h-mode-active .horizontal-container .wf-row__content {
  margin: 0 auto;
  padding: 0 var(--width-gutter);
  max-width: var(--width-content-md);
  width: 100%;
  display: flex;
  flex-direction: row;
  grid-gap: var(--spacing-md);
  justify-content: space-evenly;
  transform-origin: center center;
}

.h-mode-active .wf-row p,
h1,
h2,
h3,
h4,
h5,
h6 {
  max-width: 100%;
  word-wrap: initial;
  overflow-wrap: initial;
  hyphens: initial;
  white-space: initial;
}

.h-mode-active .wf-sideHeader {
  z-index: 9999 !important;
}

.h-mode-active .slide-arrow {
  position: fixed;
  top: 20px;
  right: 20px;
  color: var(--clr-primary);
  background: transparent;
  border: none;
  padding: 10px;
  font-size: 4rem;
  cursor: pointer;
  transition: color 0.3s ease, transform 0.3s ease;
  z-index: 1000;
}

.h-mode-active .slide-arrow:hover {
  color: var(--clr-secondary);
  transform: scale(1.2);
}

.h-mode-active .prev-arrow {
  left: 1rem;
  z-index: 99999999999999999;
}

.h-mode-active .next-arrow {
  right: 1rem;
}

:not(.editor-mode):not(.h-mode-active) .wf-colGroup:empty {
  display: none;
}

.vertical-spacer {
  padding-top: 10px;
  padding-bottom: 10px;
}

.background-slideshow-row .wf-row__content {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.background-slideshow-row .wf-row__content::-webkit-scrollbar {
  display: none;
}

.left-side-sticky::-webkit-scrollbar {
  width: 8px;
}

.left-side-sticky::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
}

.left-side-sticky::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.special-row .wf-row__content::-webkit-scrollbar {
  display: none;
}

.special-row .wf-col:not(.nested):not(.wf-masonry__col) {
  align-self: unset !important;
}

.wf-social-icon {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  max-width: 30px;
}

/* =========================================
   9. MEDIA QUERIES (TABLET & MOBILE)
   ========================================= */

/* --- Tablet (max-width: 1200px) --- */
@media screen and (max-width: 1200px) {
  .wf-verticalDotMenu {
    left: 1rem;
  }

  .icon-block {
    width: 120px;
    text-align: center;
  }

  .wf-parallax {
    background-attachment: fixed;
  }
}

/* --- Tablet (max-width: 1024px) --- */
@media screen and (max-width: 1024px) {
  .tablet\:columns\:1 {
    --columns: 1;
  }

  .tablet\:columns\:2 {
    --columns: 2;
  }

  .tablet\:columns\:3 {
    --columns: 3;
  }

  .tablet\:columns\:4 {
    --columns: 4;
  }

  .tablet\:columns\:5 {
    --columns: 5;
  }

  .tablet\:columns\:6 {
    --columns: 6;
  }

  .tablet\:columns\:7 {
    --columns: 7;
  }

  .tablet\:columns\:8 {
    --columns: 8;
  }

  .tablet\:columns\:9 {
    --columns: 9;
  }

  .tablet\:columns\:10 {
    --columns: 10;
  }

  .tablet\:columns\:11 {
    --columns: 11;
  }

  .tablet\:columns\:12 {
    --columns: 12;
  }

  .wf-colGroup {
    --columns: 1;
  }

  .wf-col {
    --span: 6;
  }

  .tablet\:span\:6 {
    --span: 6;
  }

  .tablet\:span\:5 {
    --span: 5;
  }

  .tablet\:span\:4 {
    --span: 4;
  }

  .tablet\:span\:3 {
    --span: 3;
  }

  .tablet\:span\:2 {
    --span: 2;
  }

  .tablet\:span\:1 {
    --span: 1;
  }

  .tablet\:u-auto-cols-1 {
    column-count: 1;
  }

  .tablet\:u-auto-cols-2 {
    column-count: 2;
    gap: 2rem;
  }

  .tablet\:u-auto-cols-3 {
    column-count: 3;
    gap: 2rem;
  }

  .tablet\:u-auto-cols-4 {
    column-count: 4;
    gap: 2rem;
  }

  .tablet\:u-auto-cols-5 {
    column-count: 5;
    gap: 2rem;
  }

  .tablet\:u-auto-cols-6 {
    column-count: 6;
    gap: 2rem;
  }

  .tablet\:direction\:row-reverse {
    flex-direction: row-reverse;
  }

  .heading-xl {
    font-size: 3rem;
  }

  .heading-exlg {
    font-size: 6rem;
  }

  .u-margin-l-nxl {
    margin-left: -2rem;
  }

  h1 {
    font-size: var(--fs-h2)!important;
  }

  h2 {
    font-size: var(--fs-h3)!important;
  }

  h3 {
    font-size: var(--fs-h4)!important;
  }

  h4 {
    font-size: var(--fs-h5)!important;
  }

  h5 {
    font-size: var(--fs-h6)!important;
  }

  h6 {
    font-size: 0.9rem!important;
  }
  }

  /* Tablet Utilities (Padding/Margin) */
  .tablet\:u-padding-xxsm {
    padding: var(--spacing-xxsm);
  }

  .tablet\:u-padding-t-xxsm {
    padding-top: var(--spacing-xxsm);
  }

  .tablet\:u-padding-b-xxsm {
    padding-bottom: var(--spacing-xxsm);
  }

  .tablet\:u-padding-l-xxsm {
    padding-left: var(--spacing-xxsm);
  }

  .tablet\:u-padding-r-xxsm {
    padding-right: var(--spacing-xxsm);
  }

  .tablet\:u-padding-v-xxsm {
    padding-block: var(--spacing-xxsm);
  }

  .tablet\:u-padding-h-xxsm {
    padding-inline: var(--spacing-xxsm);
  }

  .tablet\:u-padding-xsm {
    padding: var(--spacing-xsm);
  }

  .tablet\:u-padding-t-xsm {
    padding-top: var(--spacing-xsm);
  }

  .tablet\:u-padding-b-xsm {
    padding-bottom: var(--spacing-xsm);
  }

  .tablet\:u-padding-l-xsm {
    padding-left: var(--spacing-xsm);
  }

  .tablet\:u-padding-r-xsm {
    padding-right: var(--spacing-xsm);
  }

  .tablet\:u-padding-v-xsm {
    padding-block: var(--spacing-xsm);
  }

  .tablet\:u-padding-h-xsm {
    padding-inline: var(--spacing-xsm);
  }

  .tablet\:u-padding-sm {
    padding: var(--spacing-sm);
  }

  .tablet\:u-padding-t-sm {
    padding-top: var(--spacing-sm);
  }

  .tablet\:u-padding-b-sm {
    padding-bottom: var(--spacing-sm);
  }

  .tablet\:u-padding-l-sm {
    padding-left: var(--spacing-sm);
  }

  .tablet\:u-padding-r-sm {
    padding-right: var(--spacing-sm);
  }

  .tablet\:u-padding-v-sm {
    padding-block: var(--spacing-sm);
  }

  .tablet\:u-padding-h-sm {
    padding-inline: var(--spacing-sm);
  }

  .tablet\:u-padding-md {
    padding: var(--spacing-md);
  }

  .tablet\:u-padding-t-md {
    padding-top: var(--spacing-md);
  }

  .tablet\:u-padding-b-md {
    padding-bottom: var(--spacing-md);
  }

  .tablet\:u-padding-l-md {
    padding-left: var(--spacing-md);
  }

  .tablet\:u-padding-r-md {
    padding-right: var(--spacing-md);
  }

  .tablet\:u-padding-v-md {
    padding-block: var(--spacing-md);
  }

  .tablet\:u-padding-h-md {
    padding-inline: var(--spacing-md);
  }

  .tablet\:u-padding-lg {
    padding: var(--spacing-lg);
  }

  .tablet\:u-padding-t-lg {
    padding-top: var(--spacing-lg);
  }

  .tablet\:u-padding-b-lg {
    padding-bottom: var(--spacing-lg);
  }

  .tablet\:u-padding-l-lg {
    padding-left: var(--spacing-lg);
  }

  .tablet\:u-padding-r-lg {
    padding-right: var(--spacing-lg);
  }

  .tablet\:u-padding-v-lg {
    padding-block: var(--spacing-lg);
  }

  .tablet\:u-padding-h-lg {
    padding-inline: var(--spacing-lg);
  }

  .tablet\:u-padding-xlg {
    padding: var(--spacing-xlg);
  }

  .tablet\:u-padding-t-xlg {
    padding-top: var(--spacing-xlg);
  }

  .tablet\:u-padding-b-xlg {
    padding-bottom: var(--spacing-xlg);
  }

  .tablet\:u-padding-l-xlg {
    padding-left: var(--spacing-xlg);
  }

  .tablet\:u-padding-r-xlg {
    padding-right: var(--spacing-xlg);
  }

  .tablet\:u-padding-v-xlg {
    padding-block: var(--spacing-xlg);
  }

  .tablet\:u-padding-h-xlg {
    padding-inline: var(--spacing-xlg);
  }

  .tablet\:u-padding-xxlg {
    padding: var(--spacing-xxlg);
  }

  .tablet\:u-padding-t-xxlg {
    padding-top: var(--spacing-xxlg);
  }

  .tablet\:u-padding-b-xxlg {
    padding-bottom: var(--spacing-xxlg);
  }

  .tablet\:u-padding-l-xxlg {
    padding-left: var(--spacing-xxlg);
  }

  .tablet\:u-padding-r-xxlg {
    padding-right: var(--spacing-xxlg);
  }

  .tablet\:u-padding-v-xxlg {
    padding-block: var(--spacing-xxlg);
  }

  .tablet\:u-padding-h-xxlg {
    padding-inline: var(--spacing-xxlg);
  }

  .tablet\:u-padding-0 {
    padding: 0;
  }

  .tablet\:u-padding-t-0 {
    padding-top: 0;
  }

  .tablet\:u-padding-b-0 {
    padding-bottom: 0;
  }

  .tablet\:u-padding-l-0 {
    padding-left: 0;
  }

  .tablet\:u-padding-r-0 {
    padding-right: 0;
  }

  .tablet\:u-padding-v-0 {
    padding-block: 0;
  }

  .tablet\:u-padding-h-0 {
    padding-inline: 0;
  }

  .tablet\:u-margin-t-auto {
    margin-top: auto;
  }

  .tablet\:u-margin-b-auto {
    margin-bottom: auto;
  }

  .tablet\:u-margin-r-auto {
    margin-right: auto;
  }

  .tablet\:u-margin-l-auto {
    margin-left: auto;
  }

  .tablet\:u-margin-h-auto {
    margin-inline: auto;
  }

  .tablet\:u-margin-xxsm {
    margin: var(--spacing-xxsm);
  }

  .tablet\:u-margin-t-xxsm {
    margin-top: var(--spacing-xxsm);
  }

  .tablet\:u-margin-b-xxsm {
    margin-bottom: var(--spacing-xxsm);
  }

  .tablet\:u-margin-l-xxsm {
    margin-left: var(--spacing-xxsm);
  }

  .tablet\:u-margin-r-xxsm {
    margin-right: var(--spacing-xxsm);
  }

  .tablet\:u-margin-v-xxsm {
    margin-block: var(--spacing-xxsm);
  }

  .tablet\:u-margin-h-xxsm {
    margin-inline: var(--spacing-xxsm);
  }

  .tablet\:u-margin-xsm {
    margin: var(--spacing-xsm);
  }

  .tablet\:u-margin-t-xsm {
    margin-top: var(--spacing-xsm);
  }

  .tablet\:u-margin-b-xsm {
    margin-bottom: var(--spacing-xsm);
  }

  .tablet\:u-margin-l-xsm {
    margin-left: var(--spacing-xsm);
  }

  .tablet\:u-margin-r-xsm {
    margin-right: var(--spacing-xsm);
  }

  .tablet\:u-margin-v-xsm {
    margin-block: var(--spacing-xsm);
  }

  .tablet\:u-margin-h-xsm {
    margin-inline: var(--spacing-xsm);
  }

  .tablet\:u-margin-sm {
    margin: var(--spacing-sm);
  }

  .tablet\:u-margin-t-sm {
    margin-top: var(--spacing-sm);
  }

  .tablet\:u-margin-b-sm {
    margin-bottom: var(--spacing-sm);
  }

  .tablet\:u-margin-l-sm {
    margin-left: var(--spacing-sm);
  }

  .tablet\:u-margin-r-sm {
    margin-right: var(--spacing-sm);
  }

  .tablet\:u-margin-v-sm {
    margin-block: var(--spacing-sm);
  }

  .tablet\:u-margin-h-sm {
    margin-inline: var(--spacing-sm);
  }

  .tablet\:u-margin-md {
    margin: var(--spacing-md);
  }

  .tablet\:u-margin-t-md {
    margin-top: var(--spacing-md);
  }

  .tablet\:u-margin-b-md {
    margin-bottom: var(--spacing-md);
  }

  .tablet\:u-margin-l-md {
    margin-left: var(--spacing-md);
  }

  .tablet\:u-margin-r-md {
    margin-right: var(--spacing-md);
  }

  .tablet\:u-margin-v-md {
    margin-block: var(--spacing-md);
  }

  .tablet\:u-margin-h-md {
    margin-inline: var(--spacing-md);
  }

  .tablet\:u-margin-lg {
    margin: var(--spacing-lg);
  }

  .tablet\:u-margin-t-lg {
    margin-top: var(--spacing-lg);
  }

  .tablet\:u-margin-b-lg {
    margin-bottom: var(--spacing-lg);
  }

  .tablet\:u-margin-l-lg {
    margin-left: var(--spacing-lg);
  }

  .tablet\:u-margin-r-lg {
    margin-right: var(--spacing-lg);
  }

  .tablet\:u-margin-v-lg {
    margin-block: var(--spacing-lg);
  }

  .tablet\:u-margin-h-lg {
    margin-inline: var(--spacing-lg);
  }

  .tablet\:u-margin-xlg {
    margin: var(--spacing-xlg);
  }

  .tablet\:u-margin-t-xlg {
    margin-top: var(--spacing-xlg);
  }

  .tablet\:u-margin-b-xlg {
    margin-bottom: var(--spacing-xlg);
  }

  .tablet\:u-margin-l-xlg {
    margin-left: var(--spacing-xlg);
  }

  .tablet\:u-margin-r-xlg {
    margin-right: var(--spacing-xlg);
  }

  .tablet\:u-margin-v-xlg {
    margin-block: var(--spacing-xlg);
  }

  .tablet\:u-margin-h-xlg {
    margin-inline: var(--spacing-xlg);
  }

  .tablet\:u-margin-xxlg {
    margin: var(--spacing-xxlg);
  }

  .tablet\:u-margin-t-xxlg {
    margin-top: var(--spacing-xxlg);
  }

  .tablet\:u-margin-b-xxlg {
    margin-bottom: var(--spacing-xxlg);
  }

  .tablet\:u-margin-l-xxlg {
    margin-left: var(--spacing-xxlg);
  }

  .tablet\:u-margin-r-xxlg {
    margin-right: var(--spacing-xxlg);
  }

  .tablet\:u-margin-v-xxlg {
    margin-block: var(--spacing-xxlg);
  }

  .tablet\:u-margin-h-xxlg {
    margin-inline: var(--spacing-xxlg);
  }

  .tablet\:u-margin-0 {
    margin: 0;
  }

  .tablet\:u-margin-t-0 {
    margin-top: 0;
  }

  .tablet\:u-margin-b-0 {
    margin-bottom: 0;
  }

  .tablet\:u-margin-l-0 {
    margin-left: 0;
  }

  .tablet\:u-margin-r-0 {
    margin-right: 0;
  }

  .tablet\:u-margin-v-0 {
    margin-block: 0;
  }

  .tablet\:u-margin-h-0 {
    margin-inline: 0;
  }
}

/* --- Mobile (max-width: 780px/768px/600px mixed) --- */
@media screen and (max-width: 780px) {
  .wf-expandBox__content {
    width: 500px;
  }
}

@media screen and (max-width: 768px) {
  .wf-row {
    padding: var(--spacing-lg) 0;
  }

  .wf-row[data-animate="sequence"] .wf-colGroup {
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .wf-colGroup {
    --gap: var(--spacing-sm);
  }

  .tablet\:direction\:row-reverse {
    flex-direction: row-reverse;
  }

  /* Mobile Book */
  .book-row {
    margin-left: 0 !important;
    padding: var(--spacing-sm) 0;
  }

  .book-row .wf-row_content {
    overflow: auto;
  }

  .mobile-book {
    overflow-x: auto;
    padding: 25px;
  }

  .mobile-book>* {
    margin-bottom: 10px;
  }

  .mobile-book>*:last-child {
    margin-bottom: 0;
  }

  .wf-sideHeader {
    min-height: 100vh;
  }

  body {
    overflow-x: hidden;
  }

  .owl-carousel {
    display: block !important;
    padding: 20px;
  }

  .slider-accordion-title {
    text-align: center;
    color: white;
    margin-bottom: 0;
    padding: 10px;
  }

  .slider-accordion-content {
    padding: 30px;
  }
}

@media screen and (max-width: 480px) {
  .mobile\:direction\:row-reverse {
    flex-direction: row-reverse;
  }
}

@media screen and (max-width: 600px) {
  .mobile\:columns\:1 {
    --columns: 1;
  }

  .mobile\:columns\:2 {
    --columns: 2;
  }

  .mobile\:columns\:3 {
    --columns: 3;
  }

  .mobile\:columns\:4 {
    --columns: 4;
  }

  .mobile\:columns\:5 {
    --columns: 5;
  }

  .mobile\:columns\:6 {
    --columns: 6;
  }

  .mobile\:columns\:7 {
    --columns: 7;
  }

  .mobile\:columns\:8 {
    --columns: 8;
  }

  .mobile\:columns\:9 {
    --columns: 9;
  }

  .mobile\:columns\:10 {
    --columns: 10;
  }

  .mobile\:columns\:11 {
    --columns: 11;
  }

  .mobile\:columns\:12 {
    --columns: 12;
  }

  .mobile\:span\:6 {
    --span: 6;
  }

  .mobile\:span\:5 {
    --span: 5;
  }

  .mobile\:span\:4 {
    --span: 4;
  }

  .mobile\:span\:3 {
    --span: 3;
  }

  .mobile\:span\:2 {
    --span: 2;
  }

  .mobile\:span\:1 {
    --span: 1;
  }

  .wf-expandBox__content {
    width: 500px;
  }

  .mobile\:justify\:left {
    justify-content: flex-start;
  }

  .mobile\:align\:left {
    align-items: flex-start;
  }

  .mobile\:wrap {
    flex-wrap: wrap;
  }

  .heading-xl {
    font-size: 2rem;
  }

  .heading-exlg {
    font-size: 3rem;
  }

  .u-margin-l-nxl {
    margin-left: 0;
  }

  h1 {
    font-size: var(--fs-h3)!important;
  }

  h2 {
    font-size: var(--fs-h4)!important;
  }

  h3 {
    font-size: var(--fs-h5)!important;
  }

  h4 {
    font-size: var(--fs-h6)!important;
  }

  h5 {
    font-size: 0.9rem!important;
  }

  h6 {
    font-size: 0.8rem!important;
  }

  .mobile\:u-auto-cols-1 {
    column-count: 1;
  }

  .mobile\:u-auto-cols-2 {
    column-count: 2;
    gap: 2rem;
  }

  .mobile\:u-auto-cols-3 {
    column-count: 3;
    gap: 2rem;
  }

  .mobile\:u-auto-cols-4 {
    column-count: 4;
    gap: 2rem;
  }

  .mobile\:u-auto-cols-5 {
    column-count: 5;
    gap: 2rem;
  }

  .mobile\:u-auto-cols-6 {
    column-count: 6;
    gap: 2rem;
  }

  /* Mobile Utilities (Padding/Margin) */
  .mobile\:u-padding-xxsm {
    padding: var(--spacing-xxsm);
  }

  .mobile\:u-padding-t-xxsm {
    padding-top: var(--spacing-xxsm);
  }

  .mobile\:u-padding-b-xxsm {
    padding-bottom: var(--spacing-xxsm);
  }

  .mobile\:u-padding-l-xxsm {
    padding-left: var(--spacing-xxsm);
  }

  .mobile\:u-padding-r-xxsm {
    padding-right: var(--spacing-xxsm);
  }

  .mobile\:u-padding-v-xxsm {
    padding-block: var(--spacing-xxsm);
  }

  .mobile\:u-padding-h-xxsm {
    padding-inline: var(--spacing-xxsm);
  }

  .mobile\:u-padding-xsm {
    padding: var(--spacing-xsm);
  }

  .mobile\:u-padding-t-xsm {
    padding-top: var(--spacing-xsm);
  }

  .mobile\:u-padding-b-xsm {
    padding-bottom: var(--spacing-xsm);
  }

  .mobile\:u-padding-l-xsm {
    padding-left: var(--spacing-xsm);
  }

  .mobile\:u-padding-r-xsm {
    padding-right: var(--spacing-xsm);
  }

  .mobile\:u-padding-v-xsm {
    padding-block: var(--spacing-xsm);
  }

  .mobile\:u-padding-h-xsm {
    padding-inline: var(--spacing-xsm);
  }

  .mobile\:u-padding-sm {
    padding: var(--spacing-sm);
  }

  .mobile\:u-padding-t-sm {
    padding-top: var(--spacing-sm);
  }

  .mobile\:u-padding-b-sm {
    padding-bottom: var(--spacing-sm);
  }

  .mobile\:u-padding-l-sm {
    padding-left: var(--spacing-sm);
  }

  .mobile\:u-padding-r-sm {
    padding-right: var(--spacing-sm);
  }

  .mobile\:u-padding-v-sm {
    padding-block: var(--spacing-sm);
  }

  .mobile\:u-padding-h-sm {
    padding-inline: var(--spacing-sm);
  }

  .mobile\:u-padding-md {
    padding: var(--spacing-md);
  }

  .mobile\:u-padding-t-md {
    padding-top: var(--spacing-md);
  }

  .mobile\:u-padding-b-md {
    padding-bottom: var(--spacing-md);
  }

  .mobile\:u-padding-l-md {
    padding-left: var(--spacing-md);
  }

  .mobile\:u-padding-r-md {
    padding-right: var(--spacing-md);
  }

  .mobile\:u-padding-v-md {
    padding-block: var(--spacing-md);
  }

  .mobile\:u-padding-h-md {
    padding-inline: var(--spacing-md);
  }

  .mobile\:u-padding-lg {
    padding: var(--spacing-lg);
  }

  .mobile\:u-padding-t-lg {
    padding-top: var(--spacing-lg);
  }

  .mobile\:u-padding-b-lg {
    padding-bottom: var(--spacing-lg);
  }

  .mobile\:u-padding-l-lg {
    padding-left: var(--spacing-lg);
  }

  .mobile\:u-padding-r-lg {
    padding-right: var(--spacing-lg);
  }

  .mobile\:u-padding-v-lg {
    padding-block: var(--spacing-lg);
  }

  .mobile\:u-padding-h-lg {
    padding-inline: var(--spacing-lg);
  }

  .mobile\:u-padding-xlg {
    padding: var(--spacing-xlg);
  }

  .mobile\:u-padding-t-xlg {
    padding-top: var(--spacing-xlg);
  }

  .mobile\:u-padding-b-xlg {
    padding-bottom: var(--spacing-xlg);
  }

  .mobile\:u-padding-l-xlg {
    padding-left: var(--spacing-xlg);
  }

  .mobile\:u-padding-r-xlg {
    padding-right: var(--spacing-xlg);
  }

  .mobile\:u-padding-v-xlg {
    padding-block: var(--spacing-xlg);
  }

  .mobile\:u-padding-h-xlg {
    padding-inline: var(--spacing-xlg);
  }

  .mobile\:u-padding-xxlg {
    padding: var(--spacing-xxlg);
  }

  .mobile\:u-padding-t-xxlg {
    padding-top: var(--spacing-xxlg);
  }

  .mobile\:u-padding-b-xxlg {
    padding-bottom: var(--spacing-xxlg);
  }

  .mobile\:u-padding-l-xxlg {
    padding-left: var(--spacing-xxlg);
  }

  .mobile\:u-padding-r-xxlg {
    padding-right: var(--spacing-xxlg);
  }

  .mobile\:u-padding-v-xxlg {
    padding-block: var(--spacing-xxlg);
  }

  .mobile\:u-padding-h-xxlg {
    padding-inline: var(--spacing-xxlg);
  }

  .mobile\:u-padding-0 {
    padding: 0;
  }

  .mobile\:u-padding-t-0 {
    padding-top: 0;
  }

  .mobile\:u-padding-b-0 {
    padding-bottom: 0;
  }

  .mobile\:u-padding-l-0 {
    padding-left: 0;
  }

  .mobile\:u-padding-r-0 {
    padding-right: 0;
  }

  .mobile\:u-padding-v-0 {
    padding-block: 0;
  }

  .mobile\:u-padding-h-0 {
    padding-inline: 0;
  }

  .mobile\:u-margin-t-auto {
    margin-top: auto;
  }

  .mobile\:u-margin-b-auto {
    margin-bottom: auto;
  }

  .mobile\:u-margin-r-auto {
    margin-right: auto;
  }

  .mobile\:u-margin-l-auto {
    margin-left: auto;
  }

  .mobile\:u-margin-h-auto {
    margin-inline: auto;
  }

  .mobile\:u-margin-xxsm {
    margin: var(--spacing-xxsm);
  }

  .mobile\:u-margin-t-xxsm {
    margin-top: var(--spacing-xxsm);
  }

  .mobile\:u-margin-b-xxsm {
    margin-bottom: var(--spacing-xxsm);
  }

  .mobile\:u-margin-l-xxsm {
    margin-left: var(--spacing-xxsm);
  }

  .mobile\:u-margin-r-xxsm {
    margin-right: var(--spacing-xxsm);
  }

  .mobile\:u-margin-v-xxsm {
    margin-block: var(--spacing-xxsm);
  }

  .mobile\:u-margin-h-xxsm {
    margin-inline: var(--spacing-xxsm);
  }

  .mobile\:u-margin-xsm {
    margin: var(--spacing-xsm);
  }

  .mobile\:u-margin-t-xsm {
    margin-top: var(--spacing-xsm);
  }

  .mobile\:u-margin-b-xsm {
    margin-bottom: var(--spacing-xsm);
  }

  .mobile\:u-margin-l-xsm {
    margin-left: var(--spacing-xsm);
  }

  .mobile\:u-margin-r-xsm {
    margin-right: var(--spacing-xsm);
  }

  .mobile\:u-margin-v-xsm {
    margin-block: var(--spacing-xsm);
  }

  .mobile\:u-margin-h-xsm {
    margin-inline: var(--spacing-xsm);
  }

  .mobile\:u-margin-sm {
    margin: var(--spacing-sm);
  }

  .mobile\:u-margin-t-sm {
    margin-top: var(--spacing-sm);
  }

  .mobile\:u-margin-b-sm {
    margin-bottom: var(--spacing-sm);
  }

  .mobile\:u-margin-l-sm {
    margin-left: var(--spacing-sm);
  }

  .mobile\:u-margin-r-sm {
    margin-right: var(--spacing-sm);
  }

  .mobile\:u-margin-v-sm {
    margin-block: var(--spacing-sm);
  }

  .mobile\:u-margin-h-sm {
    margin-inline: var(--spacing-sm);
  }

  .mobile\:u-margin-md {
    margin: var(--spacing-md);
  }

  .mobile\:u-margin-t-md {
    margin-top: var(--spacing-md);
  }

  .mobile\:u-margin-b-md {
    margin-bottom: var(--spacing-md);
  }

  .mobile\:u-margin-l-md {
    margin-left: var(--spacing-md);
  }

  .mobile\:u-margin-r-md {
    margin-right: var(--spacing-md);
  }

  .mobile\:u-margin-v-md {
    margin-block: var(--spacing-md);
  }

  .mobile\:u-margin-h-md {
    margin-inline: var(--spacing-md);
  }

  .mobile\:u-margin-lg {
    margin: var(--spacing-lg);
  }

  .mobile\:u-margin-t-lg {
    margin-top: var(--spacing-lg);
  }

  .mobile\:u-margin-b-lg {
    margin-bottom: var(--spacing-lg);
  }

  .mobile\:u-margin-l-lg {
    margin-left: var(--spacing-lg);
  }

  .mobile\:u-margin-r-lg {
    margin-right: var(--spacing-lg);
  }

  .mobile\:u-margin-v-lg {
    margin-block: var(--spacing-lg);
  }

  .mobile\:u-margin-h-lg {
    margin-inline: var(--spacing-lg);
  }

  .mobile\:u-margin-xlg {
    margin: var(--spacing-xlg);
  }

  .mobile\:u-margin-t-xlg {
    margin-top: var(--spacing-xlg);
  }

  .mobile\:u-margin-b-xlg {
    margin-bottom: var(--spacing-xlg);
  }

  .mobile\:u-margin-l-xlg {
    margin-left: var(--spacing-xlg);
  }

  .mobile\:u-margin-r-xlg {
    margin-right: var(--spacing-xlg);
  }

  .mobile\:u-margin-v-xlg {
    margin-block: var(--spacing-xlg);
  }

  .mobile\:u-margin-h-xlg {
    margin-inline: var(--spacing-xlg);
  }

  .mobile\:u-margin-xxlg {
    margin: var(--spacing-xxlg);
  }

  .mobile\:u-margin-t-xxlg {
    margin-top: var(--spacing-xxlg);
  }

  .mobile\:u-margin-b-xxlg {
    margin-bottom: var(--spacing-xxlg);
  }

  .mobile\:u-margin-l-xxlg {
    margin-left: var(--spacing-xxlg);
  }

  .mobile\:u-margin-r-xxlg {
    margin-right: var(--spacing-xxlg);
  }

  .mobile\:u-margin-v-xxlg {
    margin-block: var(--spacing-xxlg);
  }

  .mobile\:u-margin-h-xxlg {
    margin-inline: var(--spacing-xxlg);
  }

  .mobile\:u-margin-0 {
    margin: 0;
  }

  .mobile\:u-margin-t-0 {
    margin-top: 0;
  }

  .mobile\:u-margin-b-0 {
    margin-bottom: 0;
  }

  .mobile\:u-margin-l-0 {
    margin-left: 0;
  }

  .mobile\:u-margin-r-0 {
    margin-right: 0;
  }

  .mobile\:u-margin-v-0 {
    margin-block: 0;
  }

  .mobile\:u-margin-h-0 {
    margin-inline: 0;
  }

  .mobile\:u-max-width-10 {
    max-width: calc(var(--width-content-md) * 0.1);
  }

  .mobile\:u-max-width-20 {
    max-width: calc(var(--width-content-md) * 0.2);
  }

  .mobile\:u-max-width-30 {
    max-width: calc(var(--width-content-md) * 0.3);
  }

  .mobile\:u-max-width-40 {
    max-width: calc(var(--width-content-md) * 0.4);
  }

  .mobile\:u-max-width-50 {
    max-width: calc(var(--width-content-md) * 0.5);
  }

  .mobile\:u-max-width-60 {
    max-width: calc(var(--width-content-md) * 0.6);
  }

  .mobile\:u-max-width-70 {
    max-width: calc(var(--width-content-md) * 0.7);
  }

  .mobile\:u-max-width-80 {
    max-width: calc(var(--width-content-md) * 0.8);
  }

  .mobile\:u-max-width-90 {
    max-width: calc(var(--width-content-md) * 0.9);
  }

  .mobile\:u-max-width-100 {
    max-width: var(--width-content-md);
  }

  .mobile\:u-position-relative {
    position: relative !important;
  }

  .mobile\:u-border-r-width-0 {
    border-right-width: 0 !important;
  }

  .mobile\:u-border-l-width-0 {
    border-left-width: 0 !important;
  }

  .mobile\:u-border-t-width-0 {
    border-top-width: 0 !important;
  }

  .mobile\:u-border-b-width-0 {
    border-bottom-width: 0 !important;
  }

  .wf-colGroup-intersection {
    margin-top: -4rem;
  }

  .slant-block {
    margin-top: -1rem;
  }

  .slant-overlay-left {
    right: 0;
  }

  .number-block {
    margin-left: 2rem;
    padding: 2rem;
    padding-left: 3rem;
  }

  .u-number-circle {
    width: 4rem;
    height: 4rem;
    font-size: var(--fs-h2);
    left: -2rem;
    top: 2rem;
    transform: none;
  }
}

@media only screen and (max-width: 767px) {
  body .sticky-image-container {
    position: relative;
    height: 400px;
  }

  .m-no-border {
    border: none !important;
  }
}