/* breakpoints for reference

sm-mobile 480px and down
mobile 600px and down
sm-tablet: 768px and down
tablet: 1024px and down
desktop: 1280px and down 
lg-desktop: 1281px and up */

:root {
  --base-font-size: 16px;

  /* WIDTH */
  --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 FAMILES */
  --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 */
  /* 4px */
  --spacing-xxsm: 0.25rem;
  /* 8px */
  --spacing-xsm: 0.5rem;
  /* 16px */
  --spacing-sm: 1rem;
  /* 32px */
  --spacing-md: 2rem;
  /* 48px */
  --spacing-lg: 3rem;
  /* 80px */
  --spacing-xlg: 5rem;
  /* 160px */
  --spacing-xxlg: 10rem;

  /* SHADOW */
  --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-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);


  --sideHeaderWidth: 140px;

  --body-bg: #FAFAFA;
  --page-bg: #F5F5F5;

  --baseline: 15px;






}


@media screen and (max-width: 600px) {

  :root {
    --sideHeaderWidth: 80px;
  }

}


*,
*:before,
*:after {
  box-sizing: border-box;
}

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

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

button {
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

html {
  font-size: var(--base-font-size);
  overflow-x: clip;
}

/* .v-mode-active {
  overflow-y: scroll;
  scroll-behavior: smooth;
} */

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

.wf-page {
  overflow-x: clip;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

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

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

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

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

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
  margin-top: 0;
}

h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child {
  margin-bottom: 0;
}

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

ul {
  margin: 0 0 1rem;
  position: relative;
}

ul:where(:last-child) {
  margin-bottom: 0;
}

ul {
  margin-bottom: 2rem;
}

.wf-row {
  display: flex;
  padding: var(--spacing-xlg) 0;
  margin: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  background-blend-mode: normal;
}

@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-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;
  grid-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__content--full {
  max-width: 100%;
  padding: 0;

}


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

.wf-colGroup,
.wf-layout {
  --gap: var(--spacing-md);
  --columns: 6;
  display: flex;
  gap: var(--gap);
  min-width: 0;
  flex-wrap: wrap;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  position: relative;
  background-blend-mode: normal;
}

@media screen and (max-width: 768px) {
  .wf-colGroup {
    --gap: var(--spacing-sm);
  }
}

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

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

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

@media screen and (max-width: 768px) {
  .tablet\:direction\:row-reverse {
    flex-direction: row-reverse;
  }
}

@media screen and (max-width: 480px) {
  .mobile\:direction\:row-reverse {
    flex-direction: row-reverse;
  }
}

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

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

.wf-colGroup--center,
.justify\:center {
  justify-content: center;
}

.wf-colGroup--justify,
.justify\:space-between {
  justify-content: space-between;
}

.wf-colGroup--left,
.justify\:start {
  justify-content: flex-start;
}

.wf-colGroup--right,
.justify\:end {
  justify-content: flex-end;
}

.wf-colGroup--space-around,
.justify\:space-around {
  justify-content: space-around;
}

.wf-colGroup--middle,
.align\:center {
  align-items: center;
}

.wf-colGroup--top,
.align\:start {
  align-items: flex-start;
}

.wf-colGroup--bottom,
.align\:end {
  align-items: flex-end;
}

.wf-colGroup--gap-0,
.gap\:0 {
  --gap: 0px;
}

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

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

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

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

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

.wf-colGroup--2,
.columns\:2 {
  --columns: 2;
}

.wf-colGroup--3,
.columns\:3 {
  --columns: 3;
}

.wf-colGroup--4,
.columns\:4 {
  --columns: 4;
}

.wf-colGroup--5,
.columns\:5 {
  --columns: 5;
}

.wf-colGroup--6,
.columns\:6 {
  --columns: 6;
}

.wf-colGroup--7,
.columns\:7 {
  --columns: 7;
}

.wf-colGroup--8,
.columns\:8 {
  --columns: 8;
}

.wf-colGroup--9,
.columns\:9 {
  --columns: 9;
}

.wf-colGroup--10,
.columns\:10 {
  --columns: 10;
}

.wf-colGroup--11,
.columns\:11 {
  --columns: 11;
}

.wf-colGroup--12,
.columns\:12 {
  --columns: 12;
}

@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;
  }

}

@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;
  }

}

.wf-col,
.wf-layout__item {
  /* --gap: inherit;
  --columns: inherit; */
  flex-basis: 0;
  flex-grow: 1;
  min-width: calc((100% - (var(--gap) * (var(--columns) - 1))) / var(--columns));
  width: auto;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  position: relative;
  /* z-index: 2; */
  background-blend-mode: normal;
}

@media screen and (max-width: 1024px) {
  .wf-col {
    width: 100%;
    flex-basis: 100%;
  }
}

.wf-colGroup--fixed .wf-col:not([class*='wf-col--span']),
.flow\:fixed>.wf-col:not([class*='span:']) {
  flex-basis: auto;
  flex-grow: 0;
  width: calc((100% - (var(--gap) * (var(--columns) - 1))) / var(--columns));
}

.flow\:auto>.wf-col:not([class*='span:']) {
  width: auto;
  flex-grow: 0;
  flex-basis: auto;
}

/* width minus all gaps divided into X columns, multiplied by span amount, then gaps added back in */

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

.wf-col--span6,
.span\:6 {
  --span: 6;
}

.wf-col--span5,
.span\:5 {
  --span: 5;
}

.wf-col--span4,
.span\:4 {
  --span: 4;
}

.wf-col--span3,
.span\:3 {
  --span: 3;
}

.wf-col--span2,
.span\:2 {
  --span: 2;
}

.wf-col--span1,
.span\:1 {
  --span: 1;
}

@media screen and (max-width: 1024px) {
  .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;
  }
}

@media screen and (max-width: 600px) {
  .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;
  }
}


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

/* better class name to align with other layout related classes? */
.wf-col--fixed,
.custom-width,
.auto {
  /* fixed class assumes an inline width has been added */
  flex-grow: 0;
  flex-basis: auto;
  min-width: auto;
}

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

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



/* for column demo purposes */
.wf-demoColumns .wf-col {
  text-align: center;
  border-radius: 4px;
  background: #ececec;
  padding: 12px;
}

.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-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-linearStat {
  position: relative;
  height: .125rem;
  background: var(--clr-grey-light);
}

.wf-linearStat__progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--clr-primary);
}

.wf-linearStat__thumb {
  position: absolute;
  width: .5rem;
  height: .5rem;
  top: 50%;
  margin-top: -.25rem;
  margin-left: -.25rem;
  border-radius: 50%;
  background: var(--clr-primary);
}


.wf-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* z-index: 1; */
}

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

/* 8px */
.wf-icon--xsm i {
  font-size: .5rem;
  width: .5rem;
}

/* 12px */
.wf-icon--sm i {
  font-size: .7rem;
  width: .75rem;
}

/* 16px */
.wf-icon--md i {
  font-size: .9rem;
  width: 1rem;
}

/* 24px */
.wf-icon--lg i {
  font-size: 1.3rem;
  width: 1.5rem;
}

/* 32px */
.wf-icon--xlg i {
  font-size: 1.6rem;
  width: 2rem;
}

/* 48px */
.wf-icon--xxlg i {
  font-size: 2.5rem;
  width: 3rem;
}

/* 60px */
.wf-icon--xxxlg i {
  font-size: 4rem;
  width: 4rem;
}

.wf-icon--2xxxlg i {
  font-size: 8rem;
  width: 8rem;
}

.wf-icon--solid {
  font-weight: 900;
}

.wf-icon--regular {
  font-weight: 400;
}

.wf-icon--light {
  font-weight: 300;
}

.wf-icon i {
  font-weight: inherit;
  /* font-family: "Font Awesome 6 Pro"; */
}

.wf-icon--xsm .wf-icon__text {
  font-size: .5rem;
}

.wf-icon--sm .wf-icon__text {
  font-size: .7rem;
}

.wf-icon--md .wf-icon__text,
.wf-icon .wf-icon__text {
  font-size: 1rem;
}

.wf-icon--lg .wf-icon__text {
  font-size: 1.3rem;
}

.wf-icon--xlg .wf-icon__text {
  font-size: 2rem;
}

.wf-icon--xxlg .wf-icon__text {
  font-size: 3rem;
}

.wf-icon--xxxlg .wf-icon__text {
  font-size: 4rem;
}

.wf-icon__text {
  color: inherit;
}



.wf-list {
  margin-block: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xsm);
}

.wf-list:first-child {
  margin-top: 0;
}

.wf-list:last-child {
  margin-bottom: 0;
}

.wf-list--icon {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.wf-list--icon li {
  display: flex;
  align-items: center;
  grid-gap: 8px;
}

.wf-list--icon .wf-icon {
  flex-shrink: 0;
}


.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-menu__list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}



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





.wf-mobileMenu, .wf-popOutMenu {
  position: absolute;
  z-index: 99;
  top: 100%;
  /* max-width: 25rem; */
  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;
  /* z-index: 999999999; */
  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 {
  /* padding: 1rem; */
  /* border-bottom: 1px solid var(--clr-grey-light); */
  text-decoration: none;
  display: block;
}

.wf-sectionTitle {
  border-bottom: 1px solid black;
}

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

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

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

/* START: Row Shadow Classes */

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

/* END: Row Shadow Classes */


/* START: Text Shadow Classes */


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

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

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

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

.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-block-align-center {
  margin-inline: auto;
}

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

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

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

.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-bottom-width: 3px;
}

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

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

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

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

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

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

.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-display-block {
  display: block;
}

.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-text-decoration-none {
  text-decoration: none;
}

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

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

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

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

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

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

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

@media screen and (max-width: 1024px) {

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

@media screen and (max-width: 600px) {

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

/* 

[data-animate="fade-up"] {
  opacity: 0;
  filter: blur(5px);
  visibility: hidden;
  transform: scale(1.1) translateY(100px);
  transition: 1s opacity .3s, 1s transform .3s, 1s filter .3s, 0s visibility .3s;
}

[data-animate="fade-up"].animate-show {
  visibility: visible;
  opacity: 1;
  filter: none;
  transform: none;
}

[data-animate="fade-rotate"] {
  opacity: 0;
  filter: blur(5px);
  visibility: hidden;
  transform-origin: top;
  transform: rotate(2deg) scale(1.1) translateY(1.8%);
  transition: 1s opacity .3s, 1s transform .3s, 1s filter .3s, 0s visibility .3s;
}

[data-animate="fade-rotate"].animate-show {
  visibility: visible;
  opacity: 1;
  filter: none;
  transform: none;
}

[data-animate="fade-right"] {
  opacity: 0;
  filter: blur(5px);
  visibility: hidden;
  transform-origin: top;
  transform: scale(1.1) translateX(50%);
  transition: 1s opacity .3s, 1s transform .3s, 1s filter .3s, 0s visibility .3s;
}

[data-animate="fade-right"].animate-show {
  visibility: visible;
  opacity: 1;
  filter: none;
  transform: none;
}

[data-animate="fade-left"] {
  opacity: 0;
  filter: blur(5px);
  visibility: hidden;
  transform-origin: top;
  transform: scale(1.1) translateX(-50%);
  transition: 1s opacity .3s, 1s transform .3s, 1s filter .3s, 0s visibility .3s;
}

[data-animate="fade-left"].animate-show {
  visibility: visible;
  opacity: 1;
  filter: none;
  transform: none;
} */
/* 
[delay-animate-delay="1"] {
  transition-delay: .3s;
}

[delay-animate-delay="2"] {
  transition-delay: .6s;
}

[delay-animate-delay="3"] {
  transition-delay: .9s;
}

[delay-animate-delay="4"] {
  transition-delay: 1.2s;
} */



/* Tabish additional css for header */

.wf-img--logo {

  display: inline-block;

}

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



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


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

/* .wf-menu {

  line-height: 150px;

} */

.wf-menu-list {

  float: right;

}

.wf-menu-item {
  display: inline-block;
  margin-right: 50px;

}


.wf-highlight {
  background-color: yellow;
  font-weight: bold;
}



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

.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 {
  /* text-align: center; */
  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;
}


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

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

.wf-verticalDotMenu .wf-menu__item {
  display: block;
  position: relative;
  /* height: 1.25rem;
  width: 1.25rem; */
  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);
}

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

.owl--1-col {}

.owl--2-col {}

.owl--3-col {}

.owl--4-col {}

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

.wf-tab {
  border: 1px solid #ccc;
  border-radius: 5px;
  position: relative;

}


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

.wf-tab-button {
  padding: 10px 20px;
  border: none;
  background-color: #f1f1f1;
  cursor: pointer;
  transition: background-color 0.3s;
}

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

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

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

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

.wf-tab-button.active {
  outline: none;
}

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


.owl-stage {
  display: flex !important;
}

.owl-stage {
  gap: unset;
}



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

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


/* .owl-item .wf-col {
  width: 100%!important;
} */



.owl-prev,
.owl-next {
  background-color: var(--clr-primary) !important;
  color: white !important;
  border-radius: 50% !important;
  /* padding: 10px 15px !important;
  margin: 0 5px !important;
  font-size: px !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;
}

/* 
.owl-carousel .owl-item {
  min-width: 300px !important;
} */

.background-video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  /* pointer-events: none; */
  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%;
  /* width: auto;
  height: auto;
  object-fit: cover; */
}





.loading-overlay-preview {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999999;


}

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

@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;
  }
}

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


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

/* .wf-colGroup.nested,
.wf-colGroup.wf-blocks {
  width: 100%;
} */

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



.wf-social-icon {

  display: flex;
  justify-content: flex-end;
  align-items: center;
  max-width: 30px;

}


.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999999999;
}

.modal-container {
  background: white;
  margin: 50px;
  border-radius: 5px;
  position: relative;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  width: 90%;



}

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

.close-modal:hover {

  color: black;

}

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

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


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

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}



@media (max-width: 768px) {

  .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;
    /* padding: 0 !important; */
    margin-bottom: 0;
    padding: 10px;

  }

  .slider-accordion-content {
    padding: 30px;
  }
}

/* 
.h-mode-active .wf-row[data-orientation="vertical"] {
  scroll-snap-type: y mandatory;
} */


.h-mode-active .horizontal-container {
  height: 100vh;
  /* scroll-snap-type: x mandatory; */

  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;
  /* /* margin-left: 125px; */
  /* margin-right: 5vw;  */
}

.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;
  /* overflow-y: hidden; */
  /* overflow: hidden;
  height: fit-content;
  margin-left: 5vw;
  margin-right: 5vw; */



}

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


.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 drop {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }

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

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

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




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

}

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

.asterisk-icon {
  margin-top: -10px;
  margin-left: 3px !important;
}

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

.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-wideMenu {

  /* right: unset !important; */
  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-decoration: underline; */
  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;
  /* padding: 0 !important; */
  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;
}

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

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

@media screen and (max-width: 780px) {
  .wf-expandBox__content {
    width: 500px;
  }
}

@media screen and (max-width: 600px) {
  .wf-expandBox__content {
    width: 500px;
  }

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

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


.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: #ffffff;
  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: 0;
  left: -7%;
  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;
}

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

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

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

@media screen and (max-width: 1024px) {
  .heading-xl {
    font-size: 3rem;
  }

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

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

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

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

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

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

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

  h6 {
    font-size: 0.9rem;
  }
}

@media screen and (max-width: 600px) {

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

  h2 {
    font-size: var(--fs-h4);
  }

  h3 {
    font-size: var(--fs-h5);
  }

  h4 {
    font-size: var(--fs-h6);
  }

  h5 {
    font-size: 0.9rem;
  }

  h6 {
    font-size: 0.8rem;
  }

}


@media screen and (max-width: 1024px) {

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

}

@media screen and (max-width: 600px) {

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

}


/* Parallax effect */
.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;
}

/* masonry styles */

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


.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;
  /* transition: opacity 0.5s ease, transform 0s ease; */
  position: absolute;
  top: 50%;
  left: 50%;
  /* transform: scale(0.95);  */
  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;
}

.book-row {
  /* background-color: var(--body-bg); */
  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);
}

@media only screen and (max-width: 767px) {
  body .sticky-image-container {
    position: relative;
    height: 400px;
  }

  .m-no-border {
    border: none !important;
  }
}



.background-slideshow-row .wf-row__content {
  /*overflow-y: auto;*/
  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 {
  /* top: 100vh;
  left: 25%; */
  /* transform-origin: unset !important;

  overflow: auto !important; */
}

/* .special-row .wf-colGroup:not(.nested):not(.wf-masonry__grid) {
  justify-content: unset !important;
  align-content: unset !important;
  margin-right: unset !important;
} */



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

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

/* Digital x Housing styles */
.number-col {
  position: relative;
}

.number-col:before {
  position: absolute;
  top: -80px;
  left: 0;
  font-size: 125px;
  font-weight: bold;
  color: rgba(125, 69, 230, 0.3);
  pointer-events: none;
  z-index: 1;
}

.number-col.housing:before {
  top: -60px;
  left: 10px;
  z-index: 1;
}

.popup-content.number-col:before {
  top: -40px;
}

.number-col h4,
.number-col p {
  z-index: 2;
  position: relative;
}

.number-col.num-01:before {
  content: "01";
}

.number-col.num-02:before {
  content: "02";
}

.number-col.num-03:before {
  content: "03";
}

.number-col.num-04:before {
  content: "04";
}

.number-col.num-05:before {
  content: "05";
}

.number-col.num-06:before {
  content: "06";
}

.number-col.num-07:before {
  content: "07";
}

.number-col.num-08:before {
  content: "08";
}

.number-col.housing {
  border-radius: 5px !important;
}

.partner-logo {
  aspect-ratio: 1/1;
  background: white;
  border-radius: 5px;
  max-width: 250px;
}

.partner-logo img {
  aspect-ratio: 1/1;
  object-fit: contain;
  max-height: 250px;
}

.flex-row {
  display: flex;
  width: 100%;
  justify-content: center;
}

.flex-row {
  display: flex;
  width: 100%;
  justify-content: center;
}

.heading-img,
.flex-img {
  align-items: center;
}

.flex-img {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.flex-row .flex-img {
  margin-bottom: 0;
}

.large-font {
  font-size: 21px;
  line-height: 26px;
  letter-spacing: 0.21px;
}

.footer-socials {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

.footer-socials .icon i {
  font-size: 20px;
  line-height: 32px;
  background: white;
  border-radius: 100%;
  width: 32px;
  height: 32px;
  padding-left: 6px;
}

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

.wf-tab-button {
  background: var(--clr-secondary);
  color: black;
  font-weight: bold;
  border-radius: 5px;
  font-size: 16px;
  line-height: 25.6px;
}

.wf-tab-header {
  gap: 20px;
}

.wf-tabs {
  grid-template-columns: unset;
}

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

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


.yt-frame-container iframe {
  transform: unset !important;
}

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


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

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

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

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

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

.background-video-mute-toggle {
  position: absolute;
  top: 20px;
  left: 20px;
  background-image: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iNTEyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IndoaXRlIj48cGF0aCBkPSJtMTQuNDMzMiAyLjA5ODY5Yy4zNDY1LjE2NjUyLjU2NjguNTE2OS41NjY4LjkwMTN2MTAuNTg1ODFsMS4wNjMzIDEuMDYzM2MuMDM3My0uMDk5NS4wOTEyLS4xOTQ4LjE2MjItLjI4MTcuNDU3Ni0uNTYwMy43NzQ1LTEuMzk2Ny43NzQ1LTIuMzY3NHMtLjMxNjktMS44MDcxLS43NzQ1LTIuMzY3NDJjLS4zNDk0LS40Mjc3NC0uMjg1OC0xLjA1NzcxLjE0MTktMS40MDcwNy40Mjc4LS4zNDkzNyAxLjA1NzctLjI4NTgzIDEuNDA3MS4xNDE5MS43NzQ0Ljk0ODEzIDEuMjI1NSAyLjI0MjA4IDEuMjI1NSAzLjYzMjU4cy0uNDUxMSAyLjY4NDUtMS4yMjU1IDMuNjMyNmMtLjExNjEuMTQyMi0uMjYzMy4yNDQxLS40MjM3LjMwNGwxLjExNjMgMS4xMTY0Yy45MzYtMS4yOTQ5IDEuNTMyOS0zLjA2NzYgMS41MzI5LTUuMDUzIDAtMi4xNTEzMS0uNzAwOS00LjA1MjkzLTEuNzc0NS01LjM2NzQyLS4zNDk0LS40Mjc3NC0uMjg1OC0xLjA1NzcxLjE0MTktMS40MDcwNy40Mjc4LS4zNDkzNyAxLjA1NzctLjI4NTgzIDEuNDA3MS4xNDE5MSAxLjM5MDQgMS43MDIzMyAyLjIyNTUgNC4wNjE0NiAyLjIyNTUgNi42MzI1OCAwIDIuNDk1Ny0uNzg2OCA0Ljc5MTctMi4xMDQ3IDYuNDgxMmwxLjgxMTggMS44MTE3Yy4zOTA1LjM5MDUuMzkwNSAxLjAyMzcgMCAxLjQxNDItLjM5MDYuMzkwNS0xLjAyMzcuMzkwNS0xLjQxNDMgMGwtMTcuOTk5OTYtMTcuOTk5OTljLS4zOTA1Mi0uMzkwNTItLjM5MDUyLTEuMDIzNjggMC0xLjQxNDIxLjM5MDUyLS4zOTA1MiAxLjAyMzY5LS4zOTA1MiAxLjQxNDIxIDBsMy43MDcxIDMuNzA3MDloLjg4NDI5Yy4yMjcwNyAwIC40NDczOC0uMDc3MjguNjI0NjktLjIxOTEzbDQuNDUyMTctMy41NjE3M2MuMzAwMi0uMjQwMTQuNzExNC0uMjg2OTYgMS4wNTc5LS4xMjA0NHoiLz48cGF0aCBkPSJtMy4xOTE3MyA2LjYwNjAxIDExLjgwODI3IDExLjgwODI5djIuNTg1N2MwIC4zODQ0LS4yMjAzLjczNDgtLjU2NjguOTAxM3MtLjc1NzcuMTE5Ny0xLjA1NzktLjEyMDRsLTQuNDUyMTctMy41NjE4Yy0uMTc3MzEtLjE0MTgtLjM5NzYyLS4yMTkxLS42MjQ2OS0uMjE5MWgtMy4yOTg0NGMtMS42NTY4NSAwLTMtMS4zNDMyLTMtM3YtNi4wMDAwMWMwLS45Nzc3Ny40Njc3Ny0xLjg0NjI5IDEuMTkxNzMtMi4zOTM5OHoiLz48L2c+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,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iNTEyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IndoaXRlIj48cGF0aCBkPSJtMTUgMi45OTk5OWMwLS4zODQ0LS4yMjAzLS43MzQ3OC0uNTY2OC0uOTAxM3MtLjc1NzctLjExOTctMS4wNTc5LjEyMDQ0bC00LjQ1MjE3IDMuNTYxNzNjLS4xNzczMS4xNDE4NS0uMzk3NjIuMjE5MTMtLjYyNDY5LjIxOTEzaC0zLjI5ODQ0Yy0xLjY1Njg1IDAtMyAxLjM0MzE1LTMgM3Y2LjAwMDAxYzAgMS42NTY4IDEuMzQzMTUgMyAzIDNoMy4yOTg0NGMuMjI3MDcgMCAuNDQ3MzguMDc3My42MjQ2OS4yMTkxbDQuNDUyMTcgMy41NjE4Yy4zMDAyLjI0MDEuNzExNC4yODY5IDEuMDU3OS4xMjA0cy41NjY4LS41MTY5LjU2NjgtLjkwMTN6Ii8+PHBhdGggZD0ibTE3IDEyYzAtLjk3MDctLjMxNjktMS44MDcxLS43NzQ1LTIuMzY3NDItLjM0OTQtLjQyNzc0LS4yODU4LTEuMDU3NzEuMTQxOS0xLjQwNzA3LjQyNzgtLjM0OTM3IDEuMDU3Ny0uMjg1ODMgMS40MDcxLjE0MTkxLjc3NDQuOTQ4MTMgMS4yMjU1IDIuMjQyMDggMS4yMjU1IDMuNjMyNThzLS40NTExIDIuNjg0NS0xLjIyNTUgMy42MzI2Yy0uMzQ5NC40Mjc3LS45NzkzLjQ5MTMtMS40MDcxLjE0MTktLjQyNzctLjM0OTQtLjQ5MTMtLjk3OTMtLjE0MTktMS40MDcxLjQ1NzYtLjU2MDMuNzc0NS0xLjM5NjcuNzc0NS0yLjM2NzR6Ii8+PHBhdGggZD0ibTE4LjIyNTUgNi42MzI1OGMxLjA3MzYgMS4zMTQ0OSAxLjc3NDUgMy4yMTYxMSAxLjc3NDUgNS4zNjc0MiAwIDIuMTUxMy0uNzAwOSA0LjA1MjktMS43NzQ1IDUuMzY3NC0uMzQ5NC40Mjc4LS4yODU4IDEuMDU3Ny4xNDE5IDEuNDA3MS40Mjc4LjM0OTQgMS4wNTc3LjI4NTggMS40MDcxLS4xNDE5IDEuMzkwNC0xLjcwMjQgMi4yMjU1LTQuMDYxNSAyLjIyNTUtNi42MzI2IDAtMi41NzExMi0uODM1MS00LjkzMDI1LTIuMjI1NS02LjYzMjU4LS4zNDk0LS40Mjc3NC0uOTc5My0uNDkxMjgtMS40MDcxLS4xNDE5MS0uNDI3Ny4zNDkzNi0uNDkxMy45NzkzMy0uMTQxOSAxLjQwNzA3eiIvPjwvZz48L3N2Zz4=');
}

.yt-frame-container {
  pointer-events: none;
}

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

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

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


.wf-accordion__title {
  cursor: pointer;
}