@charset "UTF-8";
/*! FrameX Css Framework v1.0.0 | MIT License*/
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700&family=Roboto:wght@400;700&display=swap");
::-ms-backdrop {
  box-sizing: border-box; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 2 */
  border: 0 solid; /* 3 */
}
::-webkit-file-upload-button {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 2 */
  border: 0 solid; /* 3 */
}
*,
::after,
::before,
::backdrop,
::file-selector-button {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 2 */
  border: 0 solid; /* 3 */
}

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4;
    -o-tab-size: 4;
       tab-size: 4; /* 3 */
  font-family: var(--primary-font, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); /* 4 */
  -webkit-font-feature-settings: var(--font-feature-settings, normal);
          font-feature-settings: var(--font-feature-settings, normal); /* 5 */
  font-variation-settings: var(--font-variation-settings, normal); /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
  1. Add the correct height in Firefox.
  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
  3. Reset the default border style to a 1px solid border.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
  Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

/*
  Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
  Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
}

/*
  Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}

/*
  1. Use the user's configured `mono` font-family by default.
  2. Use the user's configured `mono` font-feature-settings by default.
  3. Use the user's configured `mono` font-variation-settings by default.
  4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); /* 1 */
  -webkit-font-feature-settings: var(--mono-font-feature-settings, normal);
          font-feature-settings: var(--mono-font-feature-settings, normal); /* 2 */
  font-variation-settings: var(--mono-font-variation-settings, normal); /* 3 */
  font-size: 1em; /* 4 */
}

/*
  Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}

/*
  Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
  3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
  Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}

/*
  Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}

/*
  Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}

/*
  Make lists unstyled by default.
*/
ol,
ul,
menu {
  list-style: none;
}

/*
  1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
  2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
      This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}

/*
  1. Inherit font styles in all browsers.
  2. Remove border radius in all browsers.
  3. Remove background color in all browsers.
  4. Ensure consistent opacity for disabled states in all browsers.
*/
::-webkit-file-upload-button {
  font: inherit; /* 1 */
  -webkit-font-feature-settings: inherit;
          font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  border-radius: 0; /* 2 */
  background-color: transparent; /* 3 */
  opacity: 1; /* 4 */
}
button,
input,
select,
optgroup,
textarea,
::file-selector-button {
  font: inherit; /* 1 */
  -webkit-font-feature-settings: inherit;
          font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  border-radius: 0; /* 2 */
  background-color: transparent; /* 3 */
  opacity: 1; /* 4 */
}

/*
  Restore default font weight.
*/
:where(select:is([multiple], [size])) optgroup {
  font-weight: bolder;
}

/*
  Restore indentation.
*/
:where(select:is([multiple], [size])) optgroup option {
  -webkit-padding-start: 20px;
          padding-inline-start: 20px;
}

/*
  Restore space after button.
*/
::-webkit-file-upload-button {
  -webkit-margin-end: 4px;
          margin-inline-end: 4px;
}
::file-selector-button {
  -webkit-margin-end: 4px;
          margin-inline-end: 4px;
}

/*
  Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
*/
::-webkit-input-placeholder {
  opacity: 1;
}
::-moz-placeholder {
  opacity: 1;
}
:-ms-input-placeholder {
  opacity: 1;
}
::-ms-input-placeholder {
  opacity: 1;
}
::placeholder {
  opacity: 1;
}

/*
  Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not
  crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
*/
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
  ::-webkit-input-placeholder {
    color: color-mix(in oklab, currentcolor 50%, transparent);
  }
  ::-moz-placeholder {
    color: color-mix(in oklab, currentcolor 50%, transparent);
  }
  :-ms-input-placeholder {
    color: color-mix(in oklab, currentcolor 50%, transparent);
  }
  ::-ms-input-placeholder {
    color: color-mix(in oklab, currentcolor 50%, transparent);
  }
  ::placeholder {
    color: color-mix(in oklab, currentcolor 50%, transparent);
  }
}
/*
  Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}

/*
  Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
  1. Ensure date/time inputs have the same height when empty in iOS Safari.
  2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
*/
::-webkit-date-and-time-value {
  min-height: 1lh; /* 1 */
  text-align: inherit; /* 2 */
}

/*
  Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.
*/
::-webkit-datetime-edit {
  display: -webkit-inline-box;
  display: inline-flex;
}

/*
  Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
*/
::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

::-webkit-datetime-edit,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-meridiem-field {
  padding-block: 0;
}

/*
  Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)
*/
::-webkit-calendar-picker-indicator {
  line-height: 1;
}

/*
  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}

/*
  Correct the inability to style the border radius in iOS Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button;
     -moz-appearance: button;
          appearance: button;
}
button,
input:where([type=button], [type=reset], [type=submit]),
::file-selector-button {
  -webkit-appearance: button;
     -moz-appearance: button;
          appearance: button;
}

/*
  Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
  Make elements with the HTML hidden attribute stay hidden by default.
*/
[hidden]:where(:not([hidden=until-found])) {
  display: none !important;
}

/**
 * Swiper 12.1.0
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2026 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: January 28, 2026
 */
:root {
  --swiper-theme-color: blue;
}

:host {
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
}

.swiper {
  display: block;
  list-style: none;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  padding: 0;
  position: relative;
  z-index: 1;
}

.swiper-vertical > .swiper-wrapper {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.swiper-wrapper {
  -webkit-box-sizing: initial;
          box-sizing: initial;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  position: relative;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
          transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  width: 100%;
  z-index: 1;
}

.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}

.swiper-horizontal {
  -ms-touch-action: pan-y;
      touch-action: pan-y;
}

.swiper-vertical {
  -ms-touch-action: pan-x;
      touch-action: pan-x;
}

.swiper-slide {
  display: block;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  height: 100%;
  position: relative;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  width: 100%;
}

.swiper-slide-invisible-blank {
  visibility: hidden;
}

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}

.swiper-autoheight .swiper-wrapper {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-transition-property: height, -webkit-transform;
  transition-property: height, -webkit-transform;
  transition-property: transform, height;
  transition-property: transform, height, -webkit-transform;
}

.swiper-backface-hidden .swiper-slide {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}

.swiper-3d.swiper-css-mode .swiper-wrapper {
  -webkit-perspective: 1200px;
          perspective: 1200px;
}

.swiper-3d .swiper-wrapper {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.swiper-3d {
  -webkit-perspective: 1200px;
          perspective: 1200px;
}
.swiper-3d .swiper-cube-shadow,
.swiper-3d .swiper-slide {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.swiper-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}
.swiper-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}
.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
  -ms-scroll-snap-type: x mandatory;
      scroll-snap-type: x mandatory;
}
.swiper-css-mode.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
  -webkit-margin-start: var(--swiper-slides-offset-before);
          margin-inline-start: var(--swiper-slides-offset-before);
  scroll-margin-inline-start: var(--swiper-slides-offset-before);
}
.swiper-css-mode.swiper-horizontal > .swiper-wrapper > .swiper-slide:last-child {
  -webkit-margin-end: var(--swiper-slides-offset-after);
          margin-inline-end: var(--swiper-slides-offset-after);
}
.swiper-css-mode.swiper-vertical > .swiper-wrapper {
  -ms-scroll-snap-type: y mandatory;
      scroll-snap-type: y mandatory;
}
.swiper-css-mode.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
  -webkit-margin-before: var(--swiper-slides-offset-before);
          margin-block-start: var(--swiper-slides-offset-before);
  scroll-margin-block-start: var(--swiper-slides-offset-before);
}
.swiper-css-mode.swiper-vertical > .swiper-wrapper > .swiper-slide:last-child {
  -webkit-margin-after: var(--swiper-slides-offset-after);
          margin-block-end: var(--swiper-slides-offset-after);
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
  -ms-scroll-snap-type: none;
      scroll-snap-type: none;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: none;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper:before {
  content: "";
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-box-ordinal-group: 10000;
      -ms-flex-order: 9999;
          order: 9999;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: center center;
  scroll-snap-stop: always;
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
  -webkit-margin-start: var(--swiper-centered-offset-before);
          margin-inline-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper:before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after);
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
  -webkit-margin-before: var(--swiper-centered-offset-before);
          margin-block-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper:before {
  height: var(--swiper-centered-offset-after);
  min-width: 1px;
  width: 100%;
}

.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top {
  height: 100%;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10;
}
.swiper-3d .swiper-slide-shadow {
  background: rgba(0, 0, 0, 0.1490196078);
}
.swiper-3d .swiper-slide-shadow-left {
  background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5019607843)), to(rgba(0, 0, 0, 0)));
  background-image: linear-gradient(270deg, rgba(0, 0, 0, 0.5019607843), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-right {
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5019607843)), to(rgba(0, 0, 0, 0)));
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5019607843), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-top {
  background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5019607843)), to(rgba(0, 0, 0, 0)));
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5019607843), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-bottom {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5019607843)), to(rgba(0, 0, 0, 0)));
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5019607843), rgba(0, 0, 0, 0));
}

.swiper-lazy-preloader {
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top: 4px solid rgba(0, 0, 0, 0);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 42px;
  left: 50%;
  margin-left: -21px;
  margin-top: -21px;
  position: absolute;
  top: 50%;
  -webkit-transform-origin: 50%;
          transform-origin: 50%;
  width: 42px;
  z-index: 10;
}

.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
  -webkit-animation: swiper-preloader-spin 1s linear infinite;
          animation: swiper-preloader-spin 1s linear infinite;
}

.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}

.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}

@-webkit-keyframes swiper-preloader-spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(1turn);
            transform: rotate(1turn);
  }
}

@keyframes swiper-preloader-spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(1turn);
            transform: rotate(1turn);
  }
}
.swiper-virtual .swiper-slide {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}

.swiper-virtual.swiper-css-mode .swiper-wrapper:after {
  content: "";
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
}

.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper:after {
  height: 1px;
  width: var(--swiper-virtual-size);
}

.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper:after {
  height: var(--swiper-virtual-size);
  width: 1px;
}

:root {
  --swiper-navigation-size: 44px;
}

.swiper-button-next,
.swiper-button-prev {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: var(--swiper-navigation-size);
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  width: var(--swiper-navigation-size);
  z-index: 10;
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  cursor: auto;
  opacity: 0.35;
  pointer-events: none;
}
.swiper-button-next.swiper-button-hidden,
.swiper-button-prev.swiper-button-hidden {
  cursor: auto;
  opacity: 0;
  pointer-events: none;
}
.swiper-navigation-disabled .swiper-button-next,
.swiper-navigation-disabled .swiper-button-prev {
  display: none !important;
}
.swiper-button-next svg,
.swiper-button-prev svg {
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -webkit-transform-origin: center;
          transform-origin: center;
  width: 100%;
  fill: currentColor;
  pointer-events: none;
}

.swiper-button-lock {
  display: none;
}

.swiper-button-next,
.swiper-button-prev {
  margin-top: calc(0px - var(--swiper-navigation-size) / 2);
  top: var(--swiper-navigation-top-offset, 50%);
}

.swiper-button-prev {
  left: var(--swiper-navigation-sides-offset, 4px);
  right: auto;
}
.swiper-button-prev .swiper-navigation-icon {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.swiper-button-next {
  left: auto;
  right: var(--swiper-navigation-sides-offset, 4px);
}

.swiper-horizontal .swiper-button-next,
.swiper-horizontal .swiper-button-prev,
.swiper-horizontal ~ .swiper-button-next,
.swiper-horizontal ~ .swiper-button-prev {
  margin-left: 0;
  margin-top: calc(0px - var(--swiper-navigation-size) / 2);
  top: var(--swiper-navigation-top-offset, 50%);
}
.swiper-horizontal.swiper-rtl .swiper-button-next, .swiper-horizontal.swiper-rtl ~ .swiper-button-next, .swiper-horizontal ~ .swiper-button-prev,
.swiper-horizontal .swiper-button-prev {
  left: var(--swiper-navigation-sides-offset, 4px);
  right: auto;
}
.swiper-horizontal.swiper-rtl .swiper-button-prev, .swiper-horizontal.swiper-rtl ~ .swiper-button-prev, .swiper-horizontal ~ .swiper-button-next,
.swiper-horizontal .swiper-button-next {
  left: auto;
  right: var(--swiper-navigation-sides-offset, 4px);
}
.swiper-horizontal.swiper-rtl .swiper-button-next .swiper-navigation-icon, .swiper-horizontal.swiper-rtl ~ .swiper-button-next .swiper-navigation-icon, .swiper-horizontal ~ .swiper-button-prev .swiper-navigation-icon,
.swiper-horizontal .swiper-button-prev .swiper-navigation-icon {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.swiper-horizontal.swiper-rtl .swiper-button-prev .swiper-navigation-icon, .swiper-horizontal.swiper-rtl ~ .swiper-button-prev .swiper-navigation-icon {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.swiper-vertical .swiper-button-next,
.swiper-vertical .swiper-button-prev,
.swiper-vertical ~ .swiper-button-next,
.swiper-vertical ~ .swiper-button-prev {
  left: var(--swiper-navigation-top-offset, 50%);
  margin-left: calc(0px - var(--swiper-navigation-size) / 2);
  margin-top: 0;
  right: auto;
}
.swiper-vertical .swiper-button-prev,
.swiper-vertical ~ .swiper-button-prev {
  bottom: auto;
  top: var(--swiper-navigation-sides-offset, 4px);
}
.swiper-vertical .swiper-button-prev .swiper-navigation-icon,
.swiper-vertical ~ .swiper-button-prev .swiper-navigation-icon {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.swiper-vertical .swiper-button-next,
.swiper-vertical ~ .swiper-button-next {
  bottom: var(--swiper-navigation-sides-offset, 4px);
  top: auto;
}
.swiper-vertical .swiper-button-next .swiper-navigation-icon,
.swiper-vertical ~ .swiper-button-next .swiper-navigation-icon {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.swiper-pagination {
  position: absolute;
  text-align: center;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}
.swiper-pagination.swiper-pagination-disabled, .swiper-pagination-disabled > .swiper-pagination {
  display: none !important;
}

.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: var(--swiper-pagination-bottom, 8px);
  left: 0;
  top: var(--swiper-pagination-top, auto);
  width: 100%;
}

.swiper-pagination-bullets-dynamic {
  font-size: 0;
  overflow: hidden;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  position: relative;
  -webkit-transform: scale(0.33);
          transform: scale(0.33);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active,
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  -webkit-transform: scale(0.66);
          transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  -webkit-transform: scale(0.33);
          transform: scale(0.33);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  -webkit-transform: scale(0.66);
          transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  -webkit-transform: scale(0.33);
          transform: scale(0.33);
}

.swiper-pagination-bullet {
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
  display: inline-block;
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
}
.swiper-pagination-bullet button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  margin: 0;
  padding: 0;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}
.swiper-pagination-bullet:only-child {
  display: none !important;
}

.swiper-pagination-bullet-active {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  opacity: var(--swiper-pagination-bullet-opacity, 1);
}

.swiper-pagination-vertical.swiper-pagination-bullets,
.swiper-vertical > .swiper-pagination-bullets {
  left: var(--swiper-pagination-left, auto);
  right: var(--swiper-pagination-right, 8px);
  top: 50%;
  -webkit-transform: translate3d(0, -50%, 0);
          transform: translate3d(0, -50%, 0);
}
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  display: block;
  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
}
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 8px;
}
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  -webkit-transition: top 0.2s, -webkit-transform 0.2s;
  transition: top 0.2s, -webkit-transform 0.2s;
  transition: transform 0.2s, top 0.2s;
  transition: transform 0.2s, top 0.2s, -webkit-transform 0.2s;
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  white-space: nowrap;
}
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  -webkit-transition: left 0.2s, -webkit-transform 0.2s;
  transition: left 0.2s, -webkit-transform 0.2s;
  transition: transform 0.2s, left 0.2s;
  transition: transform 0.2s, left 0.2s, -webkit-transform 0.2s;
}

.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  -webkit-transition: right 0.2s, -webkit-transform 0.2s;
  transition: right 0.2s, -webkit-transform 0.2s;
  transition: transform 0.2s, right 0.2s;
  transition: transform 0.2s, right 0.2s, -webkit-transform 0.2s;
}

.swiper-pagination-fraction {
  color: var(--swiper-pagination-fraction-color, inherit);
}

.swiper-pagination-progressbar {
  background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.2509803922));
  position: absolute;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transform-origin: left top;
          transform-origin: left top;
  width: 100%;
}
.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  -webkit-transform-origin: right top;
          transform-origin: right top;
}
.swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-horizontal > .swiper-pagination-progressbar, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  height: var(--swiper-pagination-progressbar-size, 4px);
  left: 0;
  top: 0;
  width: 100%;
}
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-vertical > .swiper-pagination-progressbar {
  height: 100%;
  left: 0;
  top: 0;
  width: var(--swiper-pagination-progressbar-size, 4px);
}

.swiper-pagination-lock {
  display: none;
}

.swiper-scrollbar {
  background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1019607843));
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  position: relative;
  -ms-touch-action: none;
      touch-action: none;
}
.swiper-scrollbar.swiper-scrollbar-disabled, .swiper-scrollbar-disabled > .swiper-scrollbar {
  display: none !important;
}
.swiper-scrollbar.swiper-scrollbar-horizontal, .swiper-horizontal > .swiper-scrollbar {
  bottom: var(--swiper-scrollbar-bottom, 4px);
  height: var(--swiper-scrollbar-size, 4px);
  left: var(--swiper-scrollbar-sides-offset, 1%);
  position: absolute;
  top: var(--swiper-scrollbar-top, auto);
  width: calc(100% - var(--swiper-scrollbar-sides-offset, 1%) * 2);
  z-index: 50;
}
.swiper-scrollbar.swiper-scrollbar-vertical, .swiper-vertical > .swiper-scrollbar {
  height: calc(100% - var(--swiper-scrollbar-sides-offset, 1%) * 2);
  left: var(--swiper-scrollbar-left, auto);
  position: absolute;
  right: var(--swiper-scrollbar-right, 4px);
  top: var(--swiper-scrollbar-sides-offset, 1%);
  width: var(--swiper-scrollbar-size, 4px);
  z-index: 50;
}

.swiper-scrollbar-drag {
  background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5019607843));
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  height: 100%;
  left: 0;
  position: relative;
  top: 0;
  width: 100%;
}

.swiper-scrollbar-cursor-drag {
  cursor: move;
}

.swiper-scrollbar-lock {
  display: none;
}

.swiper-zoom-container {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  width: 100%;
}
.swiper-zoom-container > canvas,
.swiper-zoom-container > img,
.swiper-zoom-container > svg {
  max-height: 100%;
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.swiper-slide-zoomed {
  cursor: move;
  -ms-touch-action: none;
      touch-action: none;
}

.swiper .swiper-notification {
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  z-index: -1000;
}

.swiper-free-mode > .swiper-wrapper {
  margin: 0 auto;
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
}

.swiper-grid > .swiper-wrapper {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.swiper-grid-column > .swiper-wrapper {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.swiper-fade.swiper-free-mode .swiper-slide {
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
}
.swiper-fade .swiper-slide {
  pointer-events: none;
  -webkit-transition-property: opacity;
  transition-property: opacity;
}
.swiper-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-fade .swiper-slide-active {
  pointer-events: auto;
}
.swiper-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper.swiper-cube {
  overflow: visible;
}

.swiper-cube .swiper-slide {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  height: 100%;
  pointer-events: none;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  visibility: hidden;
  width: 100%;
  z-index: 1;
}
.swiper-cube .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-cube.swiper-rtl .swiper-slide {
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
}
.swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-next,
.swiper-cube .swiper-slide-prev {
  pointer-events: auto;
  visibility: visible;
}
.swiper-cube .swiper-cube-shadow {
  bottom: 0;
  height: 100%;
  left: 0;
  opacity: 0.6;
  position: absolute;
  width: 100%;
  z-index: 0;
}
.swiper-cube .swiper-cube-shadow:before {
  background: #000;
  bottom: 0;
  content: "";
  -webkit-filter: blur(50px);
          filter: blur(50px);
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.swiper-cube .swiper-slide-next + .swiper-slide {
  pointer-events: auto;
  visibility: visible;
}

.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  z-index: 0;
}

.swiper.swiper-flip {
  overflow: visible;
}

.swiper-flip .swiper-slide {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  pointer-events: none;
  z-index: 1;
}
.swiper-flip .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-flip .swiper-slide-active, .swiper-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  z-index: 0;
}

.swiper-creative .swiper-slide {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  overflow: hidden;
  -webkit-transition-property: opacity, height, -webkit-transform;
  transition-property: opacity, height, -webkit-transform;
  transition-property: transform, opacity, height;
  transition-property: transform, opacity, height, -webkit-transform;
}

.swiper.swiper-cards {
  overflow: visible;
}

.swiper-cards .swiper-slide {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  overflow: hidden;
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
}

.container,
.container-fluid,
.container-narrow,
.container-small,
.container-wide {
  width: 100%;
  max-width: 100%;
  padding-right: 1rem;
  padding-left: 1rem;
  margin-right: auto;
  margin-left: auto;
}

@media only screen and (min-width: 768px) {
  .container {
    max-width: 82rem;
  }
  .container-wide {
    max-width: 90rem;
  }
  .container-narrow {
    max-width: 60rem;
  }
  .container-small {
    max-width: 40rem;
  }
}
.bands {
  --bands-gutter-x: 0px;
  --bands-gutter-y: 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-column-gap: var(--bands-gutter-x);
     -moz-column-gap: var(--bands-gutter-x);
          column-gap: var(--bands-gutter-x);
  row-gap: var(--bands-gutter-y);
}
.bands > * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}
.bands.reverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
.bands .band-1 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 1 + 0 * var(--bands-gutter-x));
          flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 1 + 0 * var(--bands-gutter-x));
  max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 1 + 0 * var(--bands-gutter-x));
}
.bands .band-2 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 2 + 1 * var(--bands-gutter-x));
          flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 2 + 1 * var(--bands-gutter-x));
  max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 2 + 1 * var(--bands-gutter-x));
}
.bands .band-3 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 3 + 2 * var(--bands-gutter-x));
          flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 3 + 2 * var(--bands-gutter-x));
  max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 3 + 2 * var(--bands-gutter-x));
}
.bands .band-4 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 4 + 3 * var(--bands-gutter-x));
          flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 4 + 3 * var(--bands-gutter-x));
  max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 4 + 3 * var(--bands-gutter-x));
}
.bands .band-5 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 5 + 4 * var(--bands-gutter-x));
          flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 5 + 4 * var(--bands-gutter-x));
  max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 5 + 4 * var(--bands-gutter-x));
}
.bands .band-6 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 6 + 5 * var(--bands-gutter-x));
          flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 6 + 5 * var(--bands-gutter-x));
  max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 6 + 5 * var(--bands-gutter-x));
}
.bands .band-7 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 7 + 6 * var(--bands-gutter-x));
          flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 7 + 6 * var(--bands-gutter-x));
  max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 7 + 6 * var(--bands-gutter-x));
}
.bands .band-8 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 8 + 7 * var(--bands-gutter-x));
          flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 8 + 7 * var(--bands-gutter-x));
  max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 8 + 7 * var(--bands-gutter-x));
}
.bands .band-9 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 9 + 8 * var(--bands-gutter-x));
          flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 9 + 8 * var(--bands-gutter-x));
  max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 9 + 8 * var(--bands-gutter-x));
}
.bands .band-10 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 10 + 9 * var(--bands-gutter-x));
          flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 10 + 9 * var(--bands-gutter-x));
  max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 10 + 9 * var(--bands-gutter-x));
}
.bands .band-11 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 11 + 10 * var(--bands-gutter-x));
          flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 11 + 10 * var(--bands-gutter-x));
  max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 11 + 10 * var(--bands-gutter-x));
}
.bands .band-12 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 12 + 11 * var(--bands-gutter-x));
          flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 12 + 11 * var(--bands-gutter-x));
  max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 12 + 11 * var(--bands-gutter-x));
}
@media only screen and (min-width: 576px) {
  .bands .sm\:band-1,
  .bands .band-sm-1 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 1 + 0 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 1 + 0 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 1 + 0 * var(--bands-gutter-x));
  }
  .bands .sm\:band-2,
  .bands .band-sm-2 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 2 + 1 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 2 + 1 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 2 + 1 * var(--bands-gutter-x));
  }
  .bands .sm\:band-3,
  .bands .band-sm-3 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 3 + 2 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 3 + 2 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 3 + 2 * var(--bands-gutter-x));
  }
  .bands .sm\:band-4,
  .bands .band-sm-4 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 4 + 3 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 4 + 3 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 4 + 3 * var(--bands-gutter-x));
  }
  .bands .sm\:band-5,
  .bands .band-sm-5 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 5 + 4 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 5 + 4 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 5 + 4 * var(--bands-gutter-x));
  }
  .bands .sm\:band-6,
  .bands .band-sm-6 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 6 + 5 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 6 + 5 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 6 + 5 * var(--bands-gutter-x));
  }
  .bands .sm\:band-7,
  .bands .band-sm-7 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 7 + 6 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 7 + 6 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 7 + 6 * var(--bands-gutter-x));
  }
  .bands .sm\:band-8,
  .bands .band-sm-8 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 8 + 7 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 8 + 7 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 8 + 7 * var(--bands-gutter-x));
  }
  .bands .sm\:band-9,
  .bands .band-sm-9 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 9 + 8 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 9 + 8 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 9 + 8 * var(--bands-gutter-x));
  }
  .bands .sm\:band-10,
  .bands .band-sm-10 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 10 + 9 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 10 + 9 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 10 + 9 * var(--bands-gutter-x));
  }
  .bands .sm\:band-11,
  .bands .band-sm-11 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 11 + 10 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 11 + 10 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 11 + 10 * var(--bands-gutter-x));
  }
  .bands .sm\:band-12,
  .bands .band-sm-12 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 12 + 11 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 12 + 11 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 12 + 11 * var(--bands-gutter-x));
  }
}
@media only screen and (min-width: 768px) {
  .bands .md\:band-1,
  .bands .band-md-1 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 1 + 0 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 1 + 0 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 1 + 0 * var(--bands-gutter-x));
  }
  .bands .md\:band-2,
  .bands .band-md-2 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 2 + 1 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 2 + 1 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 2 + 1 * var(--bands-gutter-x));
  }
  .bands .md\:band-3,
  .bands .band-md-3 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 3 + 2 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 3 + 2 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 3 + 2 * var(--bands-gutter-x));
  }
  .bands .md\:band-4,
  .bands .band-md-4 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 4 + 3 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 4 + 3 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 4 + 3 * var(--bands-gutter-x));
  }
  .bands .md\:band-5,
  .bands .band-md-5 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 5 + 4 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 5 + 4 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 5 + 4 * var(--bands-gutter-x));
  }
  .bands .md\:band-6,
  .bands .band-md-6 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 6 + 5 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 6 + 5 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 6 + 5 * var(--bands-gutter-x));
  }
  .bands .md\:band-7,
  .bands .band-md-7 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 7 + 6 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 7 + 6 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 7 + 6 * var(--bands-gutter-x));
  }
  .bands .md\:band-8,
  .bands .band-md-8 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 8 + 7 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 8 + 7 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 8 + 7 * var(--bands-gutter-x));
  }
  .bands .md\:band-9,
  .bands .band-md-9 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 9 + 8 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 9 + 8 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 9 + 8 * var(--bands-gutter-x));
  }
  .bands .md\:band-10,
  .bands .band-md-10 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 10 + 9 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 10 + 9 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 10 + 9 * var(--bands-gutter-x));
  }
  .bands .md\:band-11,
  .bands .band-md-11 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 11 + 10 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 11 + 10 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 11 + 10 * var(--bands-gutter-x));
  }
  .bands .md\:band-12,
  .bands .band-md-12 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 12 + 11 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 12 + 11 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 12 + 11 * var(--bands-gutter-x));
  }
}
@media only screen and (min-width: 992px) {
  .bands .lg\:band-1,
  .bands .band-lg-1 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 1 + 0 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 1 + 0 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 1 + 0 * var(--bands-gutter-x));
  }
  .bands .lg\:band-2,
  .bands .band-lg-2 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 2 + 1 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 2 + 1 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 2 + 1 * var(--bands-gutter-x));
  }
  .bands .lg\:band-3,
  .bands .band-lg-3 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 3 + 2 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 3 + 2 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 3 + 2 * var(--bands-gutter-x));
  }
  .bands .lg\:band-4,
  .bands .band-lg-4 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 4 + 3 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 4 + 3 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 4 + 3 * var(--bands-gutter-x));
  }
  .bands .lg\:band-5,
  .bands .band-lg-5 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 5 + 4 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 5 + 4 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 5 + 4 * var(--bands-gutter-x));
  }
  .bands .lg\:band-6,
  .bands .band-lg-6 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 6 + 5 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 6 + 5 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 6 + 5 * var(--bands-gutter-x));
  }
  .bands .lg\:band-7,
  .bands .band-lg-7 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 7 + 6 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 7 + 6 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 7 + 6 * var(--bands-gutter-x));
  }
  .bands .lg\:band-8,
  .bands .band-lg-8 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 8 + 7 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 8 + 7 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 8 + 7 * var(--bands-gutter-x));
  }
  .bands .lg\:band-9,
  .bands .band-lg-9 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 9 + 8 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 9 + 8 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 9 + 8 * var(--bands-gutter-x));
  }
  .bands .lg\:band-10,
  .bands .band-lg-10 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 10 + 9 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 10 + 9 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 10 + 9 * var(--bands-gutter-x));
  }
  .bands .lg\:band-11,
  .bands .band-lg-11 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 11 + 10 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 11 + 10 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 11 + 10 * var(--bands-gutter-x));
  }
  .bands .lg\:band-12,
  .bands .band-lg-12 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 12 + 11 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 12 + 11 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 12 + 11 * var(--bands-gutter-x));
  }
}
@media only screen and (min-width: 1200px) {
  .bands .xl\:band-1,
  .bands .band-xl-1 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 1 + 0 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 1 + 0 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 1 + 0 * var(--bands-gutter-x));
  }
  .bands .xl\:band-2,
  .bands .band-xl-2 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 2 + 1 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 2 + 1 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 2 + 1 * var(--bands-gutter-x));
  }
  .bands .xl\:band-3,
  .bands .band-xl-3 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 3 + 2 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 3 + 2 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 3 + 2 * var(--bands-gutter-x));
  }
  .bands .xl\:band-4,
  .bands .band-xl-4 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 4 + 3 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 4 + 3 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 4 + 3 * var(--bands-gutter-x));
  }
  .bands .xl\:band-5,
  .bands .band-xl-5 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 5 + 4 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 5 + 4 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 5 + 4 * var(--bands-gutter-x));
  }
  .bands .xl\:band-6,
  .bands .band-xl-6 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 6 + 5 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 6 + 5 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 6 + 5 * var(--bands-gutter-x));
  }
  .bands .xl\:band-7,
  .bands .band-xl-7 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 7 + 6 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 7 + 6 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 7 + 6 * var(--bands-gutter-x));
  }
  .bands .xl\:band-8,
  .bands .band-xl-8 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 8 + 7 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 8 + 7 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 8 + 7 * var(--bands-gutter-x));
  }
  .bands .xl\:band-9,
  .bands .band-xl-9 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 9 + 8 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 9 + 8 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 9 + 8 * var(--bands-gutter-x));
  }
  .bands .xl\:band-10,
  .bands .band-xl-10 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 10 + 9 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 10 + 9 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 10 + 9 * var(--bands-gutter-x));
  }
  .bands .xl\:band-11,
  .bands .band-xl-11 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 11 + 10 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 11 + 10 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 11 + 10 * var(--bands-gutter-x));
  }
  .bands .xl\:band-12,
  .bands .band-xl-12 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 12 + 11 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 12 + 11 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 12 + 11 * var(--bands-gutter-x));
  }
}
@media only screen and (min-width: 1440px) {
  .bands .xxl\:band-1,
  .bands .band-xxl-1 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 1 + 0 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 1 + 0 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 1 + 0 * var(--bands-gutter-x));
  }
  .bands .xxl\:band-2,
  .bands .band-xxl-2 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 2 + 1 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 2 + 1 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 2 + 1 * var(--bands-gutter-x));
  }
  .bands .xxl\:band-3,
  .bands .band-xxl-3 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 3 + 2 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 3 + 2 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 3 + 2 * var(--bands-gutter-x));
  }
  .bands .xxl\:band-4,
  .bands .band-xxl-4 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 4 + 3 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 4 + 3 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 4 + 3 * var(--bands-gutter-x));
  }
  .bands .xxl\:band-5,
  .bands .band-xxl-5 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 5 + 4 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 5 + 4 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 5 + 4 * var(--bands-gutter-x));
  }
  .bands .xxl\:band-6,
  .bands .band-xxl-6 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 6 + 5 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 6 + 5 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 6 + 5 * var(--bands-gutter-x));
  }
  .bands .xxl\:band-7,
  .bands .band-xxl-7 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 7 + 6 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 7 + 6 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 7 + 6 * var(--bands-gutter-x));
  }
  .bands .xxl\:band-8,
  .bands .band-xxl-8 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 8 + 7 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 8 + 7 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 8 + 7 * var(--bands-gutter-x));
  }
  .bands .xxl\:band-9,
  .bands .band-xxl-9 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 9 + 8 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 9 + 8 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 9 + 8 * var(--bands-gutter-x));
  }
  .bands .xxl\:band-10,
  .bands .band-xxl-10 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 10 + 9 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 10 + 9 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 10 + 9 * var(--bands-gutter-x));
  }
  .bands .xxl\:band-11,
  .bands .band-xxl-11 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 11 + 10 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 11 + 10 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 11 + 10 * var(--bands-gutter-x));
  }
  .bands .xxl\:band-12,
  .bands .band-xxl-12 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 12 + 11 * var(--bands-gutter-x));
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12 * 12 + 11 * var(--bands-gutter-x));
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12 * 12 + 11 * var(--bands-gutter-x));
  }
}
.bands.bands-1 > * {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc((100% - 0 * var(--bands-gutter-x)) / 1);
          flex: 0 0 calc((100% - 0 * var(--bands-gutter-x)) / 1);
  max-width: calc((100% - 0 * var(--bands-gutter-x)) / 1);
}
.bands.bands-2 > * {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc((100% - 1 * var(--bands-gutter-x)) / 2);
          flex: 0 0 calc((100% - 1 * var(--bands-gutter-x)) / 2);
  max-width: calc((100% - 1 * var(--bands-gutter-x)) / 2);
}
.bands.bands-3 > * {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc((100% - 2 * var(--bands-gutter-x)) / 3);
          flex: 0 0 calc((100% - 2 * var(--bands-gutter-x)) / 3);
  max-width: calc((100% - 2 * var(--bands-gutter-x)) / 3);
}
.bands.bands-4 > * {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc((100% - 3 * var(--bands-gutter-x)) / 4);
          flex: 0 0 calc((100% - 3 * var(--bands-gutter-x)) / 4);
  max-width: calc((100% - 3 * var(--bands-gutter-x)) / 4);
}
.bands.bands-5 > * {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc((100% - 4 * var(--bands-gutter-x)) / 5);
          flex: 0 0 calc((100% - 4 * var(--bands-gutter-x)) / 5);
  max-width: calc((100% - 4 * var(--bands-gutter-x)) / 5);
}
.bands.bands-6 > * {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc((100% - 5 * var(--bands-gutter-x)) / 6);
          flex: 0 0 calc((100% - 5 * var(--bands-gutter-x)) / 6);
  max-width: calc((100% - 5 * var(--bands-gutter-x)) / 6);
}
.bands.bands-7 > * {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc((100% - 6 * var(--bands-gutter-x)) / 7);
          flex: 0 0 calc((100% - 6 * var(--bands-gutter-x)) / 7);
  max-width: calc((100% - 6 * var(--bands-gutter-x)) / 7);
}
.bands.bands-8 > * {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc((100% - 7 * var(--bands-gutter-x)) / 8);
          flex: 0 0 calc((100% - 7 * var(--bands-gutter-x)) / 8);
  max-width: calc((100% - 7 * var(--bands-gutter-x)) / 8);
}
.bands.bands-9 > * {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc((100% - 8 * var(--bands-gutter-x)) / 9);
          flex: 0 0 calc((100% - 8 * var(--bands-gutter-x)) / 9);
  max-width: calc((100% - 8 * var(--bands-gutter-x)) / 9);
}
.bands.bands-10 > * {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc((100% - 9 * var(--bands-gutter-x)) / 10);
          flex: 0 0 calc((100% - 9 * var(--bands-gutter-x)) / 10);
  max-width: calc((100% - 9 * var(--bands-gutter-x)) / 10);
}
.bands.bands-11 > * {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc((100% - 10 * var(--bands-gutter-x)) / 11);
          flex: 0 0 calc((100% - 10 * var(--bands-gutter-x)) / 11);
  max-width: calc((100% - 10 * var(--bands-gutter-x)) / 11);
}
.bands.bands-12 > * {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12);
          flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12);
  max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12);
}
@media only screen and (min-width: 576px) {
  .bands.bands-sm-1 > *, .bands.sm\:bands-1 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 0 * var(--bands-gutter-x)) / 1);
            flex: 0 0 calc((100% - 0 * var(--bands-gutter-x)) / 1);
    max-width: calc((100% - 0 * var(--bands-gutter-x)) / 1);
  }
  .bands.bands-sm-2 > *, .bands.sm\:bands-2 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 1 * var(--bands-gutter-x)) / 2);
            flex: 0 0 calc((100% - 1 * var(--bands-gutter-x)) / 2);
    max-width: calc((100% - 1 * var(--bands-gutter-x)) / 2);
  }
  .bands.bands-sm-3 > *, .bands.sm\:bands-3 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 2 * var(--bands-gutter-x)) / 3);
            flex: 0 0 calc((100% - 2 * var(--bands-gutter-x)) / 3);
    max-width: calc((100% - 2 * var(--bands-gutter-x)) / 3);
  }
  .bands.bands-sm-4 > *, .bands.sm\:bands-4 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 3 * var(--bands-gutter-x)) / 4);
            flex: 0 0 calc((100% - 3 * var(--bands-gutter-x)) / 4);
    max-width: calc((100% - 3 * var(--bands-gutter-x)) / 4);
  }
  .bands.bands-sm-5 > *, .bands.sm\:bands-5 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 4 * var(--bands-gutter-x)) / 5);
            flex: 0 0 calc((100% - 4 * var(--bands-gutter-x)) / 5);
    max-width: calc((100% - 4 * var(--bands-gutter-x)) / 5);
  }
  .bands.bands-sm-6 > *, .bands.sm\:bands-6 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 5 * var(--bands-gutter-x)) / 6);
            flex: 0 0 calc((100% - 5 * var(--bands-gutter-x)) / 6);
    max-width: calc((100% - 5 * var(--bands-gutter-x)) / 6);
  }
  .bands.bands-sm-7 > *, .bands.sm\:bands-7 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 6 * var(--bands-gutter-x)) / 7);
            flex: 0 0 calc((100% - 6 * var(--bands-gutter-x)) / 7);
    max-width: calc((100% - 6 * var(--bands-gutter-x)) / 7);
  }
  .bands.bands-sm-8 > *, .bands.sm\:bands-8 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 7 * var(--bands-gutter-x)) / 8);
            flex: 0 0 calc((100% - 7 * var(--bands-gutter-x)) / 8);
    max-width: calc((100% - 7 * var(--bands-gutter-x)) / 8);
  }
  .bands.bands-sm-9 > *, .bands.sm\:bands-9 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 8 * var(--bands-gutter-x)) / 9);
            flex: 0 0 calc((100% - 8 * var(--bands-gutter-x)) / 9);
    max-width: calc((100% - 8 * var(--bands-gutter-x)) / 9);
  }
  .bands.bands-sm-10 > *, .bands.sm\:bands-10 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 9 * var(--bands-gutter-x)) / 10);
            flex: 0 0 calc((100% - 9 * var(--bands-gutter-x)) / 10);
    max-width: calc((100% - 9 * var(--bands-gutter-x)) / 10);
  }
  .bands.bands-sm-11 > *, .bands.sm\:bands-11 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 10 * var(--bands-gutter-x)) / 11);
            flex: 0 0 calc((100% - 10 * var(--bands-gutter-x)) / 11);
    max-width: calc((100% - 10 * var(--bands-gutter-x)) / 11);
  }
  .bands.bands-sm-12 > *, .bands.sm\:bands-12 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12);
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12);
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12);
  }
}
@media only screen and (min-width: 768px) {
  .bands.bands-md-1 > *, .bands.md\:bands-1 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 0 * var(--bands-gutter-x)) / 1);
            flex: 0 0 calc((100% - 0 * var(--bands-gutter-x)) / 1);
    max-width: calc((100% - 0 * var(--bands-gutter-x)) / 1);
  }
  .bands.bands-md-2 > *, .bands.md\:bands-2 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 1 * var(--bands-gutter-x)) / 2);
            flex: 0 0 calc((100% - 1 * var(--bands-gutter-x)) / 2);
    max-width: calc((100% - 1 * var(--bands-gutter-x)) / 2);
  }
  .bands.bands-md-3 > *, .bands.md\:bands-3 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 2 * var(--bands-gutter-x)) / 3);
            flex: 0 0 calc((100% - 2 * var(--bands-gutter-x)) / 3);
    max-width: calc((100% - 2 * var(--bands-gutter-x)) / 3);
  }
  .bands.bands-md-4 > *, .bands.md\:bands-4 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 3 * var(--bands-gutter-x)) / 4);
            flex: 0 0 calc((100% - 3 * var(--bands-gutter-x)) / 4);
    max-width: calc((100% - 3 * var(--bands-gutter-x)) / 4);
  }
  .bands.bands-md-5 > *, .bands.md\:bands-5 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 4 * var(--bands-gutter-x)) / 5);
            flex: 0 0 calc((100% - 4 * var(--bands-gutter-x)) / 5);
    max-width: calc((100% - 4 * var(--bands-gutter-x)) / 5);
  }
  .bands.bands-md-6 > *, .bands.md\:bands-6 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 5 * var(--bands-gutter-x)) / 6);
            flex: 0 0 calc((100% - 5 * var(--bands-gutter-x)) / 6);
    max-width: calc((100% - 5 * var(--bands-gutter-x)) / 6);
  }
  .bands.bands-md-7 > *, .bands.md\:bands-7 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 6 * var(--bands-gutter-x)) / 7);
            flex: 0 0 calc((100% - 6 * var(--bands-gutter-x)) / 7);
    max-width: calc((100% - 6 * var(--bands-gutter-x)) / 7);
  }
  .bands.bands-md-8 > *, .bands.md\:bands-8 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 7 * var(--bands-gutter-x)) / 8);
            flex: 0 0 calc((100% - 7 * var(--bands-gutter-x)) / 8);
    max-width: calc((100% - 7 * var(--bands-gutter-x)) / 8);
  }
  .bands.bands-md-9 > *, .bands.md\:bands-9 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 8 * var(--bands-gutter-x)) / 9);
            flex: 0 0 calc((100% - 8 * var(--bands-gutter-x)) / 9);
    max-width: calc((100% - 8 * var(--bands-gutter-x)) / 9);
  }
  .bands.bands-md-10 > *, .bands.md\:bands-10 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 9 * var(--bands-gutter-x)) / 10);
            flex: 0 0 calc((100% - 9 * var(--bands-gutter-x)) / 10);
    max-width: calc((100% - 9 * var(--bands-gutter-x)) / 10);
  }
  .bands.bands-md-11 > *, .bands.md\:bands-11 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 10 * var(--bands-gutter-x)) / 11);
            flex: 0 0 calc((100% - 10 * var(--bands-gutter-x)) / 11);
    max-width: calc((100% - 10 * var(--bands-gutter-x)) / 11);
  }
  .bands.bands-md-12 > *, .bands.md\:bands-12 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12);
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12);
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12);
  }
}
@media only screen and (min-width: 992px) {
  .bands.bands-lg-1 > *, .bands.lg\:bands-1 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 0 * var(--bands-gutter-x)) / 1);
            flex: 0 0 calc((100% - 0 * var(--bands-gutter-x)) / 1);
    max-width: calc((100% - 0 * var(--bands-gutter-x)) / 1);
  }
  .bands.bands-lg-2 > *, .bands.lg\:bands-2 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 1 * var(--bands-gutter-x)) / 2);
            flex: 0 0 calc((100% - 1 * var(--bands-gutter-x)) / 2);
    max-width: calc((100% - 1 * var(--bands-gutter-x)) / 2);
  }
  .bands.bands-lg-3 > *, .bands.lg\:bands-3 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 2 * var(--bands-gutter-x)) / 3);
            flex: 0 0 calc((100% - 2 * var(--bands-gutter-x)) / 3);
    max-width: calc((100% - 2 * var(--bands-gutter-x)) / 3);
  }
  .bands.bands-lg-4 > *, .bands.lg\:bands-4 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 3 * var(--bands-gutter-x)) / 4);
            flex: 0 0 calc((100% - 3 * var(--bands-gutter-x)) / 4);
    max-width: calc((100% - 3 * var(--bands-gutter-x)) / 4);
  }
  .bands.bands-lg-5 > *, .bands.lg\:bands-5 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 4 * var(--bands-gutter-x)) / 5);
            flex: 0 0 calc((100% - 4 * var(--bands-gutter-x)) / 5);
    max-width: calc((100% - 4 * var(--bands-gutter-x)) / 5);
  }
  .bands.bands-lg-6 > *, .bands.lg\:bands-6 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 5 * var(--bands-gutter-x)) / 6);
            flex: 0 0 calc((100% - 5 * var(--bands-gutter-x)) / 6);
    max-width: calc((100% - 5 * var(--bands-gutter-x)) / 6);
  }
  .bands.bands-lg-7 > *, .bands.lg\:bands-7 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 6 * var(--bands-gutter-x)) / 7);
            flex: 0 0 calc((100% - 6 * var(--bands-gutter-x)) / 7);
    max-width: calc((100% - 6 * var(--bands-gutter-x)) / 7);
  }
  .bands.bands-lg-8 > *, .bands.lg\:bands-8 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 7 * var(--bands-gutter-x)) / 8);
            flex: 0 0 calc((100% - 7 * var(--bands-gutter-x)) / 8);
    max-width: calc((100% - 7 * var(--bands-gutter-x)) / 8);
  }
  .bands.bands-lg-9 > *, .bands.lg\:bands-9 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 8 * var(--bands-gutter-x)) / 9);
            flex: 0 0 calc((100% - 8 * var(--bands-gutter-x)) / 9);
    max-width: calc((100% - 8 * var(--bands-gutter-x)) / 9);
  }
  .bands.bands-lg-10 > *, .bands.lg\:bands-10 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 9 * var(--bands-gutter-x)) / 10);
            flex: 0 0 calc((100% - 9 * var(--bands-gutter-x)) / 10);
    max-width: calc((100% - 9 * var(--bands-gutter-x)) / 10);
  }
  .bands.bands-lg-11 > *, .bands.lg\:bands-11 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 10 * var(--bands-gutter-x)) / 11);
            flex: 0 0 calc((100% - 10 * var(--bands-gutter-x)) / 11);
    max-width: calc((100% - 10 * var(--bands-gutter-x)) / 11);
  }
  .bands.bands-lg-12 > *, .bands.lg\:bands-12 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12);
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12);
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12);
  }
}
@media only screen and (min-width: 1200px) {
  .bands.bands-xl-1 > *, .bands.xl\:bands-1 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 0 * var(--bands-gutter-x)) / 1);
            flex: 0 0 calc((100% - 0 * var(--bands-gutter-x)) / 1);
    max-width: calc((100% - 0 * var(--bands-gutter-x)) / 1);
  }
  .bands.bands-xl-2 > *, .bands.xl\:bands-2 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 1 * var(--bands-gutter-x)) / 2);
            flex: 0 0 calc((100% - 1 * var(--bands-gutter-x)) / 2);
    max-width: calc((100% - 1 * var(--bands-gutter-x)) / 2);
  }
  .bands.bands-xl-3 > *, .bands.xl\:bands-3 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 2 * var(--bands-gutter-x)) / 3);
            flex: 0 0 calc((100% - 2 * var(--bands-gutter-x)) / 3);
    max-width: calc((100% - 2 * var(--bands-gutter-x)) / 3);
  }
  .bands.bands-xl-4 > *, .bands.xl\:bands-4 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 3 * var(--bands-gutter-x)) / 4);
            flex: 0 0 calc((100% - 3 * var(--bands-gutter-x)) / 4);
    max-width: calc((100% - 3 * var(--bands-gutter-x)) / 4);
  }
  .bands.bands-xl-5 > *, .bands.xl\:bands-5 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 4 * var(--bands-gutter-x)) / 5);
            flex: 0 0 calc((100% - 4 * var(--bands-gutter-x)) / 5);
    max-width: calc((100% - 4 * var(--bands-gutter-x)) / 5);
  }
  .bands.bands-xl-6 > *, .bands.xl\:bands-6 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 5 * var(--bands-gutter-x)) / 6);
            flex: 0 0 calc((100% - 5 * var(--bands-gutter-x)) / 6);
    max-width: calc((100% - 5 * var(--bands-gutter-x)) / 6);
  }
  .bands.bands-xl-7 > *, .bands.xl\:bands-7 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 6 * var(--bands-gutter-x)) / 7);
            flex: 0 0 calc((100% - 6 * var(--bands-gutter-x)) / 7);
    max-width: calc((100% - 6 * var(--bands-gutter-x)) / 7);
  }
  .bands.bands-xl-8 > *, .bands.xl\:bands-8 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 7 * var(--bands-gutter-x)) / 8);
            flex: 0 0 calc((100% - 7 * var(--bands-gutter-x)) / 8);
    max-width: calc((100% - 7 * var(--bands-gutter-x)) / 8);
  }
  .bands.bands-xl-9 > *, .bands.xl\:bands-9 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 8 * var(--bands-gutter-x)) / 9);
            flex: 0 0 calc((100% - 8 * var(--bands-gutter-x)) / 9);
    max-width: calc((100% - 8 * var(--bands-gutter-x)) / 9);
  }
  .bands.bands-xl-10 > *, .bands.xl\:bands-10 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 9 * var(--bands-gutter-x)) / 10);
            flex: 0 0 calc((100% - 9 * var(--bands-gutter-x)) / 10);
    max-width: calc((100% - 9 * var(--bands-gutter-x)) / 10);
  }
  .bands.bands-xl-11 > *, .bands.xl\:bands-11 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 10 * var(--bands-gutter-x)) / 11);
            flex: 0 0 calc((100% - 10 * var(--bands-gutter-x)) / 11);
    max-width: calc((100% - 10 * var(--bands-gutter-x)) / 11);
  }
  .bands.bands-xl-12 > *, .bands.xl\:bands-12 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12);
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12);
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12);
  }
}
@media only screen and (min-width: 1440px) {
  .bands.bands-xxl-1 > *, .bands.xxl\:bands-1 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 0 * var(--bands-gutter-x)) / 1);
            flex: 0 0 calc((100% - 0 * var(--bands-gutter-x)) / 1);
    max-width: calc((100% - 0 * var(--bands-gutter-x)) / 1);
  }
  .bands.bands-xxl-2 > *, .bands.xxl\:bands-2 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 1 * var(--bands-gutter-x)) / 2);
            flex: 0 0 calc((100% - 1 * var(--bands-gutter-x)) / 2);
    max-width: calc((100% - 1 * var(--bands-gutter-x)) / 2);
  }
  .bands.bands-xxl-3 > *, .bands.xxl\:bands-3 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 2 * var(--bands-gutter-x)) / 3);
            flex: 0 0 calc((100% - 2 * var(--bands-gutter-x)) / 3);
    max-width: calc((100% - 2 * var(--bands-gutter-x)) / 3);
  }
  .bands.bands-xxl-4 > *, .bands.xxl\:bands-4 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 3 * var(--bands-gutter-x)) / 4);
            flex: 0 0 calc((100% - 3 * var(--bands-gutter-x)) / 4);
    max-width: calc((100% - 3 * var(--bands-gutter-x)) / 4);
  }
  .bands.bands-xxl-5 > *, .bands.xxl\:bands-5 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 4 * var(--bands-gutter-x)) / 5);
            flex: 0 0 calc((100% - 4 * var(--bands-gutter-x)) / 5);
    max-width: calc((100% - 4 * var(--bands-gutter-x)) / 5);
  }
  .bands.bands-xxl-6 > *, .bands.xxl\:bands-6 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 5 * var(--bands-gutter-x)) / 6);
            flex: 0 0 calc((100% - 5 * var(--bands-gutter-x)) / 6);
    max-width: calc((100% - 5 * var(--bands-gutter-x)) / 6);
  }
  .bands.bands-xxl-7 > *, .bands.xxl\:bands-7 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 6 * var(--bands-gutter-x)) / 7);
            flex: 0 0 calc((100% - 6 * var(--bands-gutter-x)) / 7);
    max-width: calc((100% - 6 * var(--bands-gutter-x)) / 7);
  }
  .bands.bands-xxl-8 > *, .bands.xxl\:bands-8 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 7 * var(--bands-gutter-x)) / 8);
            flex: 0 0 calc((100% - 7 * var(--bands-gutter-x)) / 8);
    max-width: calc((100% - 7 * var(--bands-gutter-x)) / 8);
  }
  .bands.bands-xxl-9 > *, .bands.xxl\:bands-9 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 8 * var(--bands-gutter-x)) / 9);
            flex: 0 0 calc((100% - 8 * var(--bands-gutter-x)) / 9);
    max-width: calc((100% - 8 * var(--bands-gutter-x)) / 9);
  }
  .bands.bands-xxl-10 > *, .bands.xxl\:bands-10 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 9 * var(--bands-gutter-x)) / 10);
            flex: 0 0 calc((100% - 9 * var(--bands-gutter-x)) / 10);
    max-width: calc((100% - 9 * var(--bands-gutter-x)) / 10);
  }
  .bands.bands-xxl-11 > *, .bands.xxl\:bands-11 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 10 * var(--bands-gutter-x)) / 11);
            flex: 0 0 calc((100% - 10 * var(--bands-gutter-x)) / 11);
    max-width: calc((100% - 10 * var(--bands-gutter-x)) / 11);
  }
  .bands.bands-xxl-12 > *, .bands.xxl\:bands-12 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12);
            flex: 0 0 calc((100% - 11 * var(--bands-gutter-x)) / 12);
    max-width: calc((100% - 11 * var(--bands-gutter-x)) / 12);
  }
}
.bands.bands-gap-0 {
  --bands-gutter-x: 0px;
  --bands-gutter-y: 0px;
}
.bands.bands-gap-x-0 {
  --bands-gutter-x: 0px;
}
.bands.bands-gap-y-0 {
  --bands-gutter-y: 0px;
}
.bands.bands-gap-1 {
  --bands-gutter-x: 0.5rem;
  --bands-gutter-y: 0.5rem;
}
.bands.bands-gap-x-1 {
  --bands-gutter-x: 0.5rem;
}
.bands.bands-gap-y-1 {
  --bands-gutter-y: 0.5rem;
}
.bands.bands-gap-2 {
  --bands-gutter-x: 1rem;
  --bands-gutter-y: 1rem;
}
.bands.bands-gap-x-2 {
  --bands-gutter-x: 1rem;
}
.bands.bands-gap-y-2 {
  --bands-gutter-y: 1rem;
}
.bands.bands-gap-3 {
  --bands-gutter-x: 1.5rem;
  --bands-gutter-y: 1.5rem;
}
.bands.bands-gap-x-3 {
  --bands-gutter-x: 1.5rem;
}
.bands.bands-gap-y-3 {
  --bands-gutter-y: 1.5rem;
}
.bands.bands-gap-4 {
  --bands-gutter-x: 2rem;
  --bands-gutter-y: 2rem;
}
.bands.bands-gap-x-4 {
  --bands-gutter-x: 2rem;
}
.bands.bands-gap-y-4 {
  --bands-gutter-y: 2rem;
}
.bands.bands-gap-5 {
  --bands-gutter-x: 3rem;
  --bands-gutter-y: 3rem;
}
.bands.bands-gap-x-5 {
  --bands-gutter-x: 3rem;
}
.bands.bands-gap-y-5 {
  --bands-gutter-y: 3rem;
}
@media only screen and (min-width: 576px) {
  .bands.bands-gap-sm-0 {
    --bands-gutter-x: 0px;
    --bands-gutter-y: 0px;
  }
  .bands.bands-gap-x-sm-0 {
    --bands-gutter-x: 0px;
  }
  .bands.bands-gap-y-sm-0 {
    --bands-gutter-y: 0px;
  }
  .bands.bands-gap-sm-1 {
    --bands-gutter-x: 0.5rem;
    --bands-gutter-y: 0.5rem;
  }
  .bands.bands-gap-x-sm-1 {
    --bands-gutter-x: 0.5rem;
  }
  .bands.bands-gap-y-sm-1 {
    --bands-gutter-y: 0.5rem;
  }
  .bands.bands-gap-sm-2 {
    --bands-gutter-x: 1rem;
    --bands-gutter-y: 1rem;
  }
  .bands.bands-gap-x-sm-2 {
    --bands-gutter-x: 1rem;
  }
  .bands.bands-gap-y-sm-2 {
    --bands-gutter-y: 1rem;
  }
  .bands.bands-gap-sm-3 {
    --bands-gutter-x: 1.5rem;
    --bands-gutter-y: 1.5rem;
  }
  .bands.bands-gap-x-sm-3 {
    --bands-gutter-x: 1.5rem;
  }
  .bands.bands-gap-y-sm-3 {
    --bands-gutter-y: 1.5rem;
  }
  .bands.bands-gap-sm-4 {
    --bands-gutter-x: 2rem;
    --bands-gutter-y: 2rem;
  }
  .bands.bands-gap-x-sm-4 {
    --bands-gutter-x: 2rem;
  }
  .bands.bands-gap-y-sm-4 {
    --bands-gutter-y: 2rem;
  }
  .bands.bands-gap-sm-5 {
    --bands-gutter-x: 3rem;
    --bands-gutter-y: 3rem;
  }
  .bands.bands-gap-x-sm-5 {
    --bands-gutter-x: 3rem;
  }
  .bands.bands-gap-y-sm-5 {
    --bands-gutter-y: 3rem;
  }
}
@media only screen and (min-width: 768px) {
  .bands.bands-gap-md-0 {
    --bands-gutter-x: 0px;
    --bands-gutter-y: 0px;
  }
  .bands.bands-gap-x-md-0 {
    --bands-gutter-x: 0px;
  }
  .bands.bands-gap-y-md-0 {
    --bands-gutter-y: 0px;
  }
  .bands.bands-gap-md-1 {
    --bands-gutter-x: 0.5rem;
    --bands-gutter-y: 0.5rem;
  }
  .bands.bands-gap-x-md-1 {
    --bands-gutter-x: 0.5rem;
  }
  .bands.bands-gap-y-md-1 {
    --bands-gutter-y: 0.5rem;
  }
  .bands.bands-gap-md-2 {
    --bands-gutter-x: 1rem;
    --bands-gutter-y: 1rem;
  }
  .bands.bands-gap-x-md-2 {
    --bands-gutter-x: 1rem;
  }
  .bands.bands-gap-y-md-2 {
    --bands-gutter-y: 1rem;
  }
  .bands.bands-gap-md-3 {
    --bands-gutter-x: 1.5rem;
    --bands-gutter-y: 1.5rem;
  }
  .bands.bands-gap-x-md-3 {
    --bands-gutter-x: 1.5rem;
  }
  .bands.bands-gap-y-md-3 {
    --bands-gutter-y: 1.5rem;
  }
  .bands.bands-gap-md-4 {
    --bands-gutter-x: 2rem;
    --bands-gutter-y: 2rem;
  }
  .bands.bands-gap-x-md-4 {
    --bands-gutter-x: 2rem;
  }
  .bands.bands-gap-y-md-4 {
    --bands-gutter-y: 2rem;
  }
  .bands.bands-gap-md-5 {
    --bands-gutter-x: 3rem;
    --bands-gutter-y: 3rem;
  }
  .bands.bands-gap-x-md-5 {
    --bands-gutter-x: 3rem;
  }
  .bands.bands-gap-y-md-5 {
    --bands-gutter-y: 3rem;
  }
}
@media only screen and (min-width: 992px) {
  .bands.bands-gap-lg-0 {
    --bands-gutter-x: 0px;
    --bands-gutter-y: 0px;
  }
  .bands.bands-gap-x-lg-0 {
    --bands-gutter-x: 0px;
  }
  .bands.bands-gap-y-lg-0 {
    --bands-gutter-y: 0px;
  }
  .bands.bands-gap-lg-1 {
    --bands-gutter-x: 0.5rem;
    --bands-gutter-y: 0.5rem;
  }
  .bands.bands-gap-x-lg-1 {
    --bands-gutter-x: 0.5rem;
  }
  .bands.bands-gap-y-lg-1 {
    --bands-gutter-y: 0.5rem;
  }
  .bands.bands-gap-lg-2 {
    --bands-gutter-x: 1rem;
    --bands-gutter-y: 1rem;
  }
  .bands.bands-gap-x-lg-2 {
    --bands-gutter-x: 1rem;
  }
  .bands.bands-gap-y-lg-2 {
    --bands-gutter-y: 1rem;
  }
  .bands.bands-gap-lg-3 {
    --bands-gutter-x: 1.5rem;
    --bands-gutter-y: 1.5rem;
  }
  .bands.bands-gap-x-lg-3 {
    --bands-gutter-x: 1.5rem;
  }
  .bands.bands-gap-y-lg-3 {
    --bands-gutter-y: 1.5rem;
  }
  .bands.bands-gap-lg-4 {
    --bands-gutter-x: 2rem;
    --bands-gutter-y: 2rem;
  }
  .bands.bands-gap-x-lg-4 {
    --bands-gutter-x: 2rem;
  }
  .bands.bands-gap-y-lg-4 {
    --bands-gutter-y: 2rem;
  }
  .bands.bands-gap-lg-5 {
    --bands-gutter-x: 3rem;
    --bands-gutter-y: 3rem;
  }
  .bands.bands-gap-x-lg-5 {
    --bands-gutter-x: 3rem;
  }
  .bands.bands-gap-y-lg-5 {
    --bands-gutter-y: 3rem;
  }
}
@media only screen and (min-width: 1200px) {
  .bands.bands-gap-xl-0 {
    --bands-gutter-x: 0px;
    --bands-gutter-y: 0px;
  }
  .bands.bands-gap-x-xl-0 {
    --bands-gutter-x: 0px;
  }
  .bands.bands-gap-y-xl-0 {
    --bands-gutter-y: 0px;
  }
  .bands.bands-gap-xl-1 {
    --bands-gutter-x: 0.5rem;
    --bands-gutter-y: 0.5rem;
  }
  .bands.bands-gap-x-xl-1 {
    --bands-gutter-x: 0.5rem;
  }
  .bands.bands-gap-y-xl-1 {
    --bands-gutter-y: 0.5rem;
  }
  .bands.bands-gap-xl-2 {
    --bands-gutter-x: 1rem;
    --bands-gutter-y: 1rem;
  }
  .bands.bands-gap-x-xl-2 {
    --bands-gutter-x: 1rem;
  }
  .bands.bands-gap-y-xl-2 {
    --bands-gutter-y: 1rem;
  }
  .bands.bands-gap-xl-3 {
    --bands-gutter-x: 1.5rem;
    --bands-gutter-y: 1.5rem;
  }
  .bands.bands-gap-x-xl-3 {
    --bands-gutter-x: 1.5rem;
  }
  .bands.bands-gap-y-xl-3 {
    --bands-gutter-y: 1.5rem;
  }
  .bands.bands-gap-xl-4 {
    --bands-gutter-x: 2rem;
    --bands-gutter-y: 2rem;
  }
  .bands.bands-gap-x-xl-4 {
    --bands-gutter-x: 2rem;
  }
  .bands.bands-gap-y-xl-4 {
    --bands-gutter-y: 2rem;
  }
  .bands.bands-gap-xl-5 {
    --bands-gutter-x: 3rem;
    --bands-gutter-y: 3rem;
  }
  .bands.bands-gap-x-xl-5 {
    --bands-gutter-x: 3rem;
  }
  .bands.bands-gap-y-xl-5 {
    --bands-gutter-y: 3rem;
  }
}
@media only screen and (min-width: 1440px) {
  .bands.bands-gap-xxl-0 {
    --bands-gutter-x: 0px;
    --bands-gutter-y: 0px;
  }
  .bands.bands-gap-x-xxl-0 {
    --bands-gutter-x: 0px;
  }
  .bands.bands-gap-y-xxl-0 {
    --bands-gutter-y: 0px;
  }
  .bands.bands-gap-xxl-1 {
    --bands-gutter-x: 0.5rem;
    --bands-gutter-y: 0.5rem;
  }
  .bands.bands-gap-x-xxl-1 {
    --bands-gutter-x: 0.5rem;
  }
  .bands.bands-gap-y-xxl-1 {
    --bands-gutter-y: 0.5rem;
  }
  .bands.bands-gap-xxl-2 {
    --bands-gutter-x: 1rem;
    --bands-gutter-y: 1rem;
  }
  .bands.bands-gap-x-xxl-2 {
    --bands-gutter-x: 1rem;
  }
  .bands.bands-gap-y-xxl-2 {
    --bands-gutter-y: 1rem;
  }
  .bands.bands-gap-xxl-3 {
    --bands-gutter-x: 1.5rem;
    --bands-gutter-y: 1.5rem;
  }
  .bands.bands-gap-x-xxl-3 {
    --bands-gutter-x: 1.5rem;
  }
  .bands.bands-gap-y-xxl-3 {
    --bands-gutter-y: 1.5rem;
  }
  .bands.bands-gap-xxl-4 {
    --bands-gutter-x: 2rem;
    --bands-gutter-y: 2rem;
  }
  .bands.bands-gap-x-xxl-4 {
    --bands-gutter-x: 2rem;
  }
  .bands.bands-gap-y-xxl-4 {
    --bands-gutter-y: 2rem;
  }
  .bands.bands-gap-xxl-5 {
    --bands-gutter-x: 3rem;
    --bands-gutter-y: 3rem;
  }
  .bands.bands-gap-x-xxl-5 {
    --bands-gutter-x: 3rem;
  }
  .bands.bands-gap-y-xxl-5 {
    --bands-gutter-y: 3rem;
  }
}
.bands > *:only-child {
  width: 100%;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  max-width: 100%;
}

:root {
  --bs-breakpoint-xs: 0;
  --bs-breakpoint-sm: 576px;
  --bs-breakpoint-md: 768px;
  --bs-breakpoint-lg: 992px;
  --bs-breakpoint-xl: 1200px;
  --bs-breakpoint-xxl: 1400px;
}

.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}

.row > * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

.col {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
}

.col-auto {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: auto;
}

.col-1 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 8.3333333333%;
}

.col-2 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 16.6666666667%;
}

.col-3 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 25%;
}

.col-4 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 33.3333333333%;
}

.col-5 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 41.6666666667%;
}

.col-6 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 50%;
}

.col-7 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 58.3333333333%;
}

.col-8 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 66.6666666667%;
}

.col-9 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 75%;
}

.col-10 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 83.3333333333%;
}

.col-11 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 91.6666666667%;
}

.col-12 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 100%;
}

.row-cols-auto > * {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: auto;
}

.row-cols-1 > * {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 100%;
}

.row-cols-2 > * {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 50%;
}

.row-cols-3 > * {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 33.3333333333%;
}

.row-cols-4 > * {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 25%;
}

.row-cols-5 > * {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 20%;
}

.row-cols-6 > * {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 16.6666666667%;
}

.offset-1 {
  margin-left: 8.3333333333%;
}

.offset-2 {
  margin-left: 16.6666666667%;
}

.offset-3 {
  margin-left: 25%;
}

.offset-4 {
  margin-left: 33.3333333333%;
}

.offset-5 {
  margin-left: 41.6666666667%;
}

.offset-6 {
  margin-left: 50%;
}

.offset-7 {
  margin-left: 58.3333333333%;
}

.offset-8 {
  margin-left: 66.6666666667%;
}

.offset-9 {
  margin-left: 75%;
}

.offset-10 {
  margin-left: 83.3333333333%;
}

.offset-11 {
  margin-left: 91.6666666667%;
}

.g-0,
.gx-0 {
  --bs-gutter-x: 0;
}

.g-0,
.gy-0 {
  --bs-gutter-y: 0;
}

.g-1,
.gx-1 {
  --bs-gutter-x: 0.25rem;
}

.g-1,
.gy-1 {
  --bs-gutter-y: 0.25rem;
}

.g-2,
.gx-2 {
  --bs-gutter-x: 0.5rem;
}

.g-2,
.gy-2 {
  --bs-gutter-y: 0.5rem;
}

.g-3,
.gx-3 {
  --bs-gutter-x: 1rem;
}

.g-3,
.gy-3 {
  --bs-gutter-y: 1rem;
}

.g-4,
.gx-4 {
  --bs-gutter-x: 1.5rem;
}

.g-4,
.gy-4 {
  --bs-gutter-y: 1.5rem;
}

.g-5,
.gx-5 {
  --bs-gutter-x: 3rem;
}

.g-5,
.gy-5 {
  --bs-gutter-y: 3rem;
}

@media (min-width: 576px) {
  .col-sm {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 0px;
            flex: 1 0 0;
  }
  .col-sm-auto {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: auto;
  }
  .col-sm-1 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-sm-2 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-sm-3 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 25%;
  }
  .col-sm-4 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-sm-5 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-sm-6 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 50%;
  }
  .col-sm-7 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-sm-8 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-sm-9 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 75%;
  }
  .col-sm-10 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-sm-11 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-sm-12 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-sm-auto > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: auto;
  }
  .row-cols-sm-1 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-sm-2 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-sm-3 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-sm-4 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-sm-5 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-sm-6 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .offset-sm-0 {
    margin-left: 0;
  }
  .offset-sm-1 {
    margin-left: 8.3333333333%;
  }
  .offset-sm-2 {
    margin-left: 16.6666666667%;
  }
  .offset-sm-3 {
    margin-left: 25%;
  }
  .offset-sm-4 {
    margin-left: 33.3333333333%;
  }
  .offset-sm-5 {
    margin-left: 41.6666666667%;
  }
  .offset-sm-6 {
    margin-left: 50%;
  }
  .offset-sm-7 {
    margin-left: 58.3333333333%;
  }
  .offset-sm-8 {
    margin-left: 66.6666666667%;
  }
  .offset-sm-9 {
    margin-left: 75%;
  }
  .offset-sm-10 {
    margin-left: 83.3333333333%;
  }
  .offset-sm-11 {
    margin-left: 91.6666666667%;
  }
  .g-sm-0,
  .gx-sm-0 {
    --bs-gutter-x: 0;
  }
  .g-sm-0,
  .gy-sm-0 {
    --bs-gutter-y: 0;
  }
  .g-sm-1,
  .gx-sm-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-sm-1,
  .gy-sm-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-sm-2,
  .gx-sm-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-sm-2,
  .gy-sm-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-sm-3,
  .gx-sm-3 {
    --bs-gutter-x: 1rem;
  }
  .g-sm-3,
  .gy-sm-3 {
    --bs-gutter-y: 1rem;
  }
  .g-sm-4,
  .gx-sm-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-sm-4,
  .gy-sm-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-sm-5,
  .gx-sm-5 {
    --bs-gutter-x: 3rem;
  }
  .g-sm-5,
  .gy-sm-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 768px) {
  .col-md {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 0px;
            flex: 1 0 0;
  }
  .col-md-auto {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: auto;
  }
  .col-md-1 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-md-2 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-md-3 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 25%;
  }
  .col-md-4 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-md-5 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-md-6 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 50%;
  }
  .col-md-7 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-md-8 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-md-9 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 75%;
  }
  .col-md-10 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-md-11 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-md-12 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-md-auto > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: auto;
  }
  .row-cols-md-1 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-md-2 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-md-3 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-md-4 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-md-5 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-md-6 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .offset-md-0 {
    margin-left: 0;
  }
  .offset-md-1 {
    margin-left: 8.3333333333%;
  }
  .offset-md-2 {
    margin-left: 16.6666666667%;
  }
  .offset-md-3 {
    margin-left: 25%;
  }
  .offset-md-4 {
    margin-left: 33.3333333333%;
  }
  .offset-md-5 {
    margin-left: 41.6666666667%;
  }
  .offset-md-6 {
    margin-left: 50%;
  }
  .offset-md-7 {
    margin-left: 58.3333333333%;
  }
  .offset-md-8 {
    margin-left: 66.6666666667%;
  }
  .offset-md-9 {
    margin-left: 75%;
  }
  .offset-md-10 {
    margin-left: 83.3333333333%;
  }
  .offset-md-11 {
    margin-left: 91.6666666667%;
  }
  .g-md-0,
  .gx-md-0 {
    --bs-gutter-x: 0;
  }
  .g-md-0,
  .gy-md-0 {
    --bs-gutter-y: 0;
  }
  .g-md-1,
  .gx-md-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-md-1,
  .gy-md-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-md-2,
  .gx-md-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-md-2,
  .gy-md-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-md-3,
  .gx-md-3 {
    --bs-gutter-x: 1rem;
  }
  .g-md-3,
  .gy-md-3 {
    --bs-gutter-y: 1rem;
  }
  .g-md-4,
  .gx-md-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-md-4,
  .gy-md-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-md-5,
  .gx-md-5 {
    --bs-gutter-x: 3rem;
  }
  .g-md-5,
  .gy-md-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 992px) {
  .col-lg {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 0px;
            flex: 1 0 0;
  }
  .col-lg-auto {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: auto;
  }
  .col-lg-1 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-lg-2 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-lg-3 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 25%;
  }
  .col-lg-4 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-lg-5 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-lg-6 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 50%;
  }
  .col-lg-7 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-lg-8 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-lg-9 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 75%;
  }
  .col-lg-10 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-lg-11 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-lg-12 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-lg-auto > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: auto;
  }
  .row-cols-lg-1 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-lg-2 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-lg-3 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-lg-4 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-lg-5 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-lg-6 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .offset-lg-0 {
    margin-left: 0;
  }
  .offset-lg-1 {
    margin-left: 8.3333333333%;
  }
  .offset-lg-2 {
    margin-left: 16.6666666667%;
  }
  .offset-lg-3 {
    margin-left: 25%;
  }
  .offset-lg-4 {
    margin-left: 33.3333333333%;
  }
  .offset-lg-5 {
    margin-left: 41.6666666667%;
  }
  .offset-lg-6 {
    margin-left: 50%;
  }
  .offset-lg-7 {
    margin-left: 58.3333333333%;
  }
  .offset-lg-8 {
    margin-left: 66.6666666667%;
  }
  .offset-lg-9 {
    margin-left: 75%;
  }
  .offset-lg-10 {
    margin-left: 83.3333333333%;
  }
  .offset-lg-11 {
    margin-left: 91.6666666667%;
  }
  .g-lg-0,
  .gx-lg-0 {
    --bs-gutter-x: 0;
  }
  .g-lg-0,
  .gy-lg-0 {
    --bs-gutter-y: 0;
  }
  .g-lg-1,
  .gx-lg-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-lg-1,
  .gy-lg-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-lg-2,
  .gx-lg-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-lg-2,
  .gy-lg-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-lg-3,
  .gx-lg-3 {
    --bs-gutter-x: 1rem;
  }
  .g-lg-3,
  .gy-lg-3 {
    --bs-gutter-y: 1rem;
  }
  .g-lg-4,
  .gx-lg-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-lg-4,
  .gy-lg-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-lg-5,
  .gx-lg-5 {
    --bs-gutter-x: 3rem;
  }
  .g-lg-5,
  .gy-lg-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 1200px) {
  .col-xl {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 0px;
            flex: 1 0 0;
  }
  .col-xl-auto {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: auto;
  }
  .col-xl-1 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-xl-2 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-xl-3 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 25%;
  }
  .col-xl-4 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-xl-5 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-xl-6 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 50%;
  }
  .col-xl-7 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-xl-8 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-xl-9 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 75%;
  }
  .col-xl-10 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-xl-11 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-xl-12 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-xl-auto > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: auto;
  }
  .row-cols-xl-1 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-xl-2 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-xl-3 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-xl-4 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-xl-5 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-xl-6 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .offset-xl-0 {
    margin-left: 0;
  }
  .offset-xl-1 {
    margin-left: 8.3333333333%;
  }
  .offset-xl-2 {
    margin-left: 16.6666666667%;
  }
  .offset-xl-3 {
    margin-left: 25%;
  }
  .offset-xl-4 {
    margin-left: 33.3333333333%;
  }
  .offset-xl-5 {
    margin-left: 41.6666666667%;
  }
  .offset-xl-6 {
    margin-left: 50%;
  }
  .offset-xl-7 {
    margin-left: 58.3333333333%;
  }
  .offset-xl-8 {
    margin-left: 66.6666666667%;
  }
  .offset-xl-9 {
    margin-left: 75%;
  }
  .offset-xl-10 {
    margin-left: 83.3333333333%;
  }
  .offset-xl-11 {
    margin-left: 91.6666666667%;
  }
  .g-xl-0,
  .gx-xl-0 {
    --bs-gutter-x: 0;
  }
  .g-xl-0,
  .gy-xl-0 {
    --bs-gutter-y: 0;
  }
  .g-xl-1,
  .gx-xl-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-xl-1,
  .gy-xl-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-xl-2,
  .gx-xl-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-xl-2,
  .gy-xl-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-xl-3,
  .gx-xl-3 {
    --bs-gutter-x: 1rem;
  }
  .g-xl-3,
  .gy-xl-3 {
    --bs-gutter-y: 1rem;
  }
  .g-xl-4,
  .gx-xl-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-xl-4,
  .gy-xl-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-xl-5,
  .gx-xl-5 {
    --bs-gutter-x: 3rem;
  }
  .g-xl-5,
  .gy-xl-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 1400px) {
  .col-xxl {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 0px;
            flex: 1 0 0;
  }
  .col-xxl-auto {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: auto;
  }
  .col-xxl-1 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-xxl-2 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-xxl-3 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 25%;
  }
  .col-xxl-4 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-xxl-5 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-xxl-6 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 50%;
  }
  .col-xxl-7 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-xxl-8 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-xxl-9 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 75%;
  }
  .col-xxl-10 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-xxl-11 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-xxl-12 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-xxl-auto > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: auto;
  }
  .row-cols-xxl-1 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-xxl-2 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-xxl-3 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-xxl-4 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-xxl-5 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-xxl-6 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .offset-xxl-0 {
    margin-left: 0;
  }
  .offset-xxl-1 {
    margin-left: 8.3333333333%;
  }
  .offset-xxl-2 {
    margin-left: 16.6666666667%;
  }
  .offset-xxl-3 {
    margin-left: 25%;
  }
  .offset-xxl-4 {
    margin-left: 33.3333333333%;
  }
  .offset-xxl-5 {
    margin-left: 41.6666666667%;
  }
  .offset-xxl-6 {
    margin-left: 50%;
  }
  .offset-xxl-7 {
    margin-left: 58.3333333333%;
  }
  .offset-xxl-8 {
    margin-left: 66.6666666667%;
  }
  .offset-xxl-9 {
    margin-left: 75%;
  }
  .offset-xxl-10 {
    margin-left: 83.3333333333%;
  }
  .offset-xxl-11 {
    margin-left: 91.6666666667%;
  }
  .g-xxl-0,
  .gx-xxl-0 {
    --bs-gutter-x: 0;
  }
  .g-xxl-0,
  .gy-xxl-0 {
    --bs-gutter-y: 0;
  }
  .g-xxl-1,
  .gx-xxl-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-xxl-1,
  .gy-xxl-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-xxl-2,
  .gx-xxl-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-xxl-2,
  .gy-xxl-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-xxl-3,
  .gx-xxl-3 {
    --bs-gutter-x: 1rem;
  }
  .g-xxl-3,
  .gy-xxl-3 {
    --bs-gutter-y: 1rem;
  }
  .g-xxl-4,
  .gx-xxl-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-xxl-4,
  .gy-xxl-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-xxl-5,
  .gx-xxl-5 {
    --bs-gutter-x: 3rem;
  }
  .g-xxl-5,
  .gy-xxl-5 {
    --bs-gutter-y: 3rem;
  }
}
.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-block {
  display: block !important;
}

.d-grid {
  display: grid !important;
}

.d-inline-grid {
  display: inline-grid !important;
}

.d-table {
  display: table !important;
}

.d-table-row {
  display: table-row !important;
}

.d-table-cell {
  display: table-cell !important;
}

.d-flex {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

.d-inline-flex {
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
}

.d-none {
  display: none !important;
}

.flex-fill {
  -webkit-box-flex: 1 !important;
      -ms-flex: 1 1 auto !important;
          flex: 1 1 auto !important;
}

.flex-row {
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: normal !important;
      -ms-flex-direction: row !important;
          flex-direction: row !important;
}

.flex-column {
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
      -ms-flex-direction: column !important;
          flex-direction: column !important;
}

.flex-row-reverse {
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: reverse !important;
      -ms-flex-direction: row-reverse !important;
          flex-direction: row-reverse !important;
}

.flex-column-reverse {
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: reverse !important;
      -ms-flex-direction: column-reverse !important;
          flex-direction: column-reverse !important;
}

.flex-wrap {
  -ms-flex-wrap: wrap !important;
      flex-wrap: wrap !important;
}

.flex-nowrap {
  -ms-flex-wrap: nowrap !important;
      flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
  -ms-flex-wrap: wrap-reverse !important;
      flex-wrap: wrap-reverse !important;
}

.flex-grow-0 {
  -webkit-box-flex: 0 !important;
      -ms-flex-positive: 0 !important;
          flex-grow: 0 !important;
}

.flex-shrink-0 {
  -ms-flex-negative: 0 !important;
      flex-shrink: 0 !important;
}

.flex-grow-1 {
  -webkit-box-flex: 1 !important;
      -ms-flex-positive: 1 !important;
          flex-grow: 1 !important;
}

.flex-shrink-1 {
  -ms-flex-negative: 1 !important;
      flex-shrink: 1 !important;
}

.justify-content-start {
  -webkit-box-pack: start !important;
      -ms-flex-pack: start !important;
          justify-content: flex-start !important;
}

.justify-content-end {
  -webkit-box-pack: end !important;
      -ms-flex-pack: end !important;
          justify-content: flex-end !important;
}

.justify-content-center {
  -webkit-box-pack: center !important;
      -ms-flex-pack: center !important;
          justify-content: center !important;
}

.justify-content-between {
  -webkit-box-pack: justify !important;
      -ms-flex-pack: justify !important;
          justify-content: space-between !important;
}

.justify-content-around {
  -ms-flex-pack: distribute !important;
      justify-content: space-around !important;
}

.justify-content-evenly {
  -webkit-box-pack: space-evenly !important;
      -ms-flex-pack: space-evenly !important;
          justify-content: space-evenly !important;
}

.align-items-start {
  -webkit-box-align: start !important;
      -ms-flex-align: start !important;
          align-items: flex-start !important;
}

.align-items-end {
  -webkit-box-align: end !important;
      -ms-flex-align: end !important;
          align-items: flex-end !important;
}

.align-items-center {
  -webkit-box-align: center !important;
      -ms-flex-align: center !important;
          align-items: center !important;
}

.align-items-baseline {
  -webkit-box-align: baseline !important;
      -ms-flex-align: baseline !important;
          align-items: baseline !important;
}

.align-items-stretch {
  -webkit-box-align: stretch !important;
      -ms-flex-align: stretch !important;
          align-items: stretch !important;
}

.align-content-start {
  -ms-flex-line-pack: start !important;
      align-content: flex-start !important;
}

.align-content-end {
  -ms-flex-line-pack: end !important;
      align-content: flex-end !important;
}

.align-content-center {
  -ms-flex-line-pack: center !important;
      align-content: center !important;
}

.align-content-between {
  -ms-flex-line-pack: justify !important;
      align-content: space-between !important;
}

.align-content-around {
  -ms-flex-line-pack: distribute !important;
      align-content: space-around !important;
}

.align-content-stretch {
  -ms-flex-line-pack: stretch !important;
      align-content: stretch !important;
}

.align-self-auto {
  -ms-flex-item-align: auto !important;
      align-self: auto !important;
}

.align-self-start {
  -ms-flex-item-align: start !important;
      align-self: flex-start !important;
}

.align-self-end {
  -ms-flex-item-align: end !important;
      align-self: flex-end !important;
}

.align-self-center {
  -ms-flex-item-align: center !important;
      align-self: center !important;
}

.align-self-baseline {
  -ms-flex-item-align: baseline !important;
      align-self: baseline !important;
}

.align-self-stretch {
  -ms-flex-item-align: stretch !important;
      align-self: stretch !important;
}

.order-first {
  -webkit-box-ordinal-group: 0 !important;
      -ms-flex-order: -1 !important;
          order: -1 !important;
}

.order-0 {
  -webkit-box-ordinal-group: 1 !important;
      -ms-flex-order: 0 !important;
          order: 0 !important;
}

.order-1 {
  -webkit-box-ordinal-group: 2 !important;
      -ms-flex-order: 1 !important;
          order: 1 !important;
}

.order-2 {
  -webkit-box-ordinal-group: 3 !important;
      -ms-flex-order: 2 !important;
          order: 2 !important;
}

.order-3 {
  -webkit-box-ordinal-group: 4 !important;
      -ms-flex-order: 3 !important;
          order: 3 !important;
}

.order-4 {
  -webkit-box-ordinal-group: 5 !important;
      -ms-flex-order: 4 !important;
          order: 4 !important;
}

.order-5 {
  -webkit-box-ordinal-group: 6 !important;
      -ms-flex-order: 5 !important;
          order: 5 !important;
}

.order-last {
  -webkit-box-ordinal-group: 7 !important;
      -ms-flex-order: 6 !important;
          order: 6 !important;
}

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

.mx-0 {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.me-0 {
  margin-right: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.ms-0 {
  margin-left: 0 !important;
}

.p-0 {
  padding: 0 !important;
}

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

.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pe-0 {
  padding-right: 0 !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.ps-0 {
  padding-left: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.mx-1 {
  margin-right: 0.25rem !important;
  margin-left: 0.25rem !important;
}

.my-1 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

.mt-1 {
  margin-top: 0.25rem !important;
}

.me-1 {
  margin-right: 0.25rem !important;
}

.mb-1 {
  margin-bottom: 0.25rem !important;
}

.ms-1 {
  margin-left: 0.25rem !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.px-1 {
  padding-right: 0.25rem !important;
  padding-left: 0.25rem !important;
}

.py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.pt-1 {
  padding-top: 0.25rem !important;
}

.pe-1 {
  padding-right: 0.25rem !important;
}

.pb-1 {
  padding-bottom: 0.25rem !important;
}

.ps-1 {
  padding-left: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.mx-2 {
  margin-right: 0.5rem !important;
  margin-left: 0.5rem !important;
}

.my-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

.me-2 {
  margin-right: 0.5rem !important;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.ms-2 {
  margin-left: 0.5rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.px-2 {
  padding-right: 0.5rem !important;
  padding-left: 0.5rem !important;
}

.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.pt-2 {
  padding-top: 0.5rem !important;
}

.pe-2 {
  padding-right: 0.5rem !important;
}

.pb-2 {
  padding-bottom: 0.5rem !important;
}

.ps-2 {
  padding-left: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.mx-3 {
  margin-right: 1rem !important;
  margin-left: 1rem !important;
}

.my-3 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.mt-3 {
  margin-top: 1rem !important;
}

.me-3 {
  margin-right: 1rem !important;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

.ms-3 {
  margin-left: 1rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.px-3 {
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}

.py-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.pt-3 {
  padding-top: 1rem !important;
}

.pe-3 {
  padding-right: 1rem !important;
}

.pb-3 {
  padding-bottom: 1rem !important;
}

.ps-3 {
  padding-left: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.mx-4 {
  margin-right: 1.5rem !important;
  margin-left: 1.5rem !important;
}

.my-4 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.mt-4 {
  margin-top: 1.5rem !important;
}

.me-4 {
  margin-right: 1.5rem !important;
}

.mb-4 {
  margin-bottom: 1.5rem !important;
}

.ms-4 {
  margin-left: 1.5rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.px-4 {
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
}

.py-4 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.pt-4 {
  padding-top: 1.5rem !important;
}

.pe-4 {
  padding-right: 1.5rem !important;
}

.pb-4 {
  padding-bottom: 1.5rem !important;
}

.ps-4 {
  padding-left: 1.5rem !important;
}

.m-5 {
  margin: 3rem !important;
}

.mx-5 {
  margin-right: 3rem !important;
  margin-left: 3rem !important;
}

.my-5 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}

.mt-5 {
  margin-top: 3rem !important;
}

.me-5 {
  margin-right: 3rem !important;
}

.mb-5 {
  margin-bottom: 3rem !important;
}

.ms-5 {
  margin-left: 3rem !important;
}

.p-5 {
  padding: 3rem !important;
}

.px-5 {
  padding-right: 3rem !important;
  padding-left: 3rem !important;
}

.py-5 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

.pt-5 {
  padding-top: 3rem !important;
}

.pe-5 {
  padding-right: 3rem !important;
}

.pb-5 {
  padding-bottom: 3rem !important;
}

.ps-5 {
  padding-left: 3rem !important;
}

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

.mx-auto {
  margin-right: auto !important;
  margin-left: auto !important;
}

.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.mt-auto {
  margin-top: auto !important;
}

.me-auto {
  margin-right: auto !important;
}

.mb-auto {
  margin-bottom: auto !important;
}

.ms-auto {
  margin-left: auto !important;
}

@media (min-width: 576px) {
  .d-sm-inline {
    display: inline !important;
  }
  .d-sm-inline-block {
    display: inline-block !important;
  }
  .d-sm-block {
    display: block !important;
  }
  .d-sm-grid {
    display: grid !important;
  }
  .d-sm-inline-grid {
    display: inline-grid !important;
  }
  .d-sm-table {
    display: table !important;
  }
  .d-sm-table-row {
    display: table-row !important;
  }
  .d-sm-table-cell {
    display: table-cell !important;
  }
  .d-sm-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-sm-inline-flex {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
  .d-sm-none {
    display: none !important;
  }
  .flex-sm-fill {
    -webkit-box-flex: 1 !important;
        -ms-flex: 1 1 auto !important;
            flex: 1 1 auto !important;
  }
  .flex-sm-row {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: row !important;
            flex-direction: row !important;
  }
  .flex-sm-column {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
  }
  .flex-sm-row-reverse {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: reverse !important;
        -ms-flex-direction: row-reverse !important;
            flex-direction: row-reverse !important;
  }
  .flex-sm-column-reverse {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: reverse !important;
        -ms-flex-direction: column-reverse !important;
            flex-direction: column-reverse !important;
  }
  .flex-sm-wrap {
    -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
  }
  .flex-sm-nowrap {
    -ms-flex-wrap: nowrap !important;
        flex-wrap: nowrap !important;
  }
  .flex-sm-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
        flex-wrap: wrap-reverse !important;
  }
  .flex-sm-grow-0 {
    -webkit-box-flex: 0 !important;
        -ms-flex-positive: 0 !important;
            flex-grow: 0 !important;
  }
  .flex-sm-shrink-0 {
    -ms-flex-negative: 0 !important;
        flex-shrink: 0 !important;
  }
  .flex-sm-grow-1 {
    -webkit-box-flex: 1 !important;
        -ms-flex-positive: 1 !important;
            flex-grow: 1 !important;
  }
  .flex-sm-shrink-1 {
    -ms-flex-negative: 1 !important;
        flex-shrink: 1 !important;
  }
  .justify-content-sm-start {
    -webkit-box-pack: start !important;
        -ms-flex-pack: start !important;
            justify-content: flex-start !important;
  }
  .justify-content-sm-end {
    -webkit-box-pack: end !important;
        -ms-flex-pack: end !important;
            justify-content: flex-end !important;
  }
  .justify-content-sm-center {
    -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
  }
  .justify-content-sm-between {
    -webkit-box-pack: justify !important;
        -ms-flex-pack: justify !important;
            justify-content: space-between !important;
  }
  .justify-content-sm-around {
    -ms-flex-pack: distribute !important;
        justify-content: space-around !important;
  }
  .justify-content-sm-evenly {
    -webkit-box-pack: space-evenly !important;
        -ms-flex-pack: space-evenly !important;
            justify-content: space-evenly !important;
  }
  .align-items-sm-start {
    -webkit-box-align: start !important;
        -ms-flex-align: start !important;
            align-items: flex-start !important;
  }
  .align-items-sm-end {
    -webkit-box-align: end !important;
        -ms-flex-align: end !important;
            align-items: flex-end !important;
  }
  .align-items-sm-center {
    -webkit-box-align: center !important;
        -ms-flex-align: center !important;
            align-items: center !important;
  }
  .align-items-sm-baseline {
    -webkit-box-align: baseline !important;
        -ms-flex-align: baseline !important;
            align-items: baseline !important;
  }
  .align-items-sm-stretch {
    -webkit-box-align: stretch !important;
        -ms-flex-align: stretch !important;
            align-items: stretch !important;
  }
  .align-content-sm-start {
    -ms-flex-line-pack: start !important;
        align-content: flex-start !important;
  }
  .align-content-sm-end {
    -ms-flex-line-pack: end !important;
        align-content: flex-end !important;
  }
  .align-content-sm-center {
    -ms-flex-line-pack: center !important;
        align-content: center !important;
  }
  .align-content-sm-between {
    -ms-flex-line-pack: justify !important;
        align-content: space-between !important;
  }
  .align-content-sm-around {
    -ms-flex-line-pack: distribute !important;
        align-content: space-around !important;
  }
  .align-content-sm-stretch {
    -ms-flex-line-pack: stretch !important;
        align-content: stretch !important;
  }
  .align-self-sm-auto {
    -ms-flex-item-align: auto !important;
        align-self: auto !important;
  }
  .align-self-sm-start {
    -ms-flex-item-align: start !important;
        align-self: flex-start !important;
  }
  .align-self-sm-end {
    -ms-flex-item-align: end !important;
        align-self: flex-end !important;
  }
  .align-self-sm-center {
    -ms-flex-item-align: center !important;
        align-self: center !important;
  }
  .align-self-sm-baseline {
    -ms-flex-item-align: baseline !important;
        align-self: baseline !important;
  }
  .align-self-sm-stretch {
    -ms-flex-item-align: stretch !important;
        align-self: stretch !important;
  }
  .order-sm-first {
    -webkit-box-ordinal-group: 0 !important;
        -ms-flex-order: -1 !important;
            order: -1 !important;
  }
  .order-sm-0 {
    -webkit-box-ordinal-group: 1 !important;
        -ms-flex-order: 0 !important;
            order: 0 !important;
  }
  .order-sm-1 {
    -webkit-box-ordinal-group: 2 !important;
        -ms-flex-order: 1 !important;
            order: 1 !important;
  }
  .order-sm-2 {
    -webkit-box-ordinal-group: 3 !important;
        -ms-flex-order: 2 !important;
            order: 2 !important;
  }
  .order-sm-3 {
    -webkit-box-ordinal-group: 4 !important;
        -ms-flex-order: 3 !important;
            order: 3 !important;
  }
  .order-sm-4 {
    -webkit-box-ordinal-group: 5 !important;
        -ms-flex-order: 4 !important;
            order: 4 !important;
  }
  .order-sm-5 {
    -webkit-box-ordinal-group: 6 !important;
        -ms-flex-order: 5 !important;
            order: 5 !important;
  }
  .order-sm-last {
    -webkit-box-ordinal-group: 7 !important;
        -ms-flex-order: 6 !important;
            order: 6 !important;
  }
  .m-sm-0 {
    margin: 0 !important;
  }
  .mx-sm-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .my-sm-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .mt-sm-0 {
    margin-top: 0 !important;
  }
  .me-sm-0 {
    margin-right: 0 !important;
  }
  .mb-sm-0 {
    margin-bottom: 0 !important;
  }
  .ms-sm-0 {
    margin-left: 0 !important;
  }
  .p-sm-0 {
    padding: 0 !important;
  }
  .px-sm-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .py-sm-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .pt-sm-0 {
    padding-top: 0 !important;
  }
  .pe-sm-0 {
    padding-right: 0 !important;
  }
  .pb-sm-0 {
    padding-bottom: 0 !important;
  }
  .ps-sm-0 {
    padding-left: 0 !important;
  }
  .m-sm-1 {
    margin: 0.25rem !important;
  }
  .mx-sm-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }
  .my-sm-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  .mt-sm-1 {
    margin-top: 0.25rem !important;
  }
  .me-sm-1 {
    margin-right: 0.25rem !important;
  }
  .mb-sm-1 {
    margin-bottom: 0.25rem !important;
  }
  .ms-sm-1 {
    margin-left: 0.25rem !important;
  }
  .p-sm-1 {
    padding: 0.25rem !important;
  }
  .px-sm-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }
  .py-sm-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  .pt-sm-1 {
    padding-top: 0.25rem !important;
  }
  .pe-sm-1 {
    padding-right: 0.25rem !important;
  }
  .pb-sm-1 {
    padding-bottom: 0.25rem !important;
  }
  .ps-sm-1 {
    padding-left: 0.25rem !important;
  }
  .m-sm-2 {
    margin: 0.5rem !important;
  }
  .mx-sm-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
  .my-sm-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .mt-sm-2 {
    margin-top: 0.5rem !important;
  }
  .me-sm-2 {
    margin-right: 0.5rem !important;
  }
  .mb-sm-2 {
    margin-bottom: 0.5rem !important;
  }
  .ms-sm-2 {
    margin-left: 0.5rem !important;
  }
  .p-sm-2 {
    padding: 0.5rem !important;
  }
  .px-sm-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .py-sm-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .pt-sm-2 {
    padding-top: 0.5rem !important;
  }
  .pe-sm-2 {
    padding-right: 0.5rem !important;
  }
  .pb-sm-2 {
    padding-bottom: 0.5rem !important;
  }
  .ps-sm-2 {
    padding-left: 0.5rem !important;
  }
  .m-sm-3 {
    margin: 1rem !important;
  }
  .mx-sm-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .my-sm-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .mt-sm-3 {
    margin-top: 1rem !important;
  }
  .me-sm-3 {
    margin-right: 1rem !important;
  }
  .mb-sm-3 {
    margin-bottom: 1rem !important;
  }
  .ms-sm-3 {
    margin-left: 1rem !important;
  }
  .p-sm-3 {
    padding: 1rem !important;
  }
  .px-sm-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .py-sm-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .pt-sm-3 {
    padding-top: 1rem !important;
  }
  .pe-sm-3 {
    padding-right: 1rem !important;
  }
  .pb-sm-3 {
    padding-bottom: 1rem !important;
  }
  .ps-sm-3 {
    padding-left: 1rem !important;
  }
  .m-sm-4 {
    margin: 1.5rem !important;
  }
  .mx-sm-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }
  .my-sm-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .mt-sm-4 {
    margin-top: 1.5rem !important;
  }
  .me-sm-4 {
    margin-right: 1.5rem !important;
  }
  .mb-sm-4 {
    margin-bottom: 1.5rem !important;
  }
  .ms-sm-4 {
    margin-left: 1.5rem !important;
  }
  .p-sm-4 {
    padding: 1.5rem !important;
  }
  .px-sm-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
  .py-sm-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .pt-sm-4 {
    padding-top: 1.5rem !important;
  }
  .pe-sm-4 {
    padding-right: 1.5rem !important;
  }
  .pb-sm-4 {
    padding-bottom: 1.5rem !important;
  }
  .ps-sm-4 {
    padding-left: 1.5rem !important;
  }
  .m-sm-5 {
    margin: 3rem !important;
  }
  .mx-sm-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }
  .my-sm-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .mt-sm-5 {
    margin-top: 3rem !important;
  }
  .me-sm-5 {
    margin-right: 3rem !important;
  }
  .mb-sm-5 {
    margin-bottom: 3rem !important;
  }
  .ms-sm-5 {
    margin-left: 3rem !important;
  }
  .p-sm-5 {
    padding: 3rem !important;
  }
  .px-sm-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .py-sm-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .pt-sm-5 {
    padding-top: 3rem !important;
  }
  .pe-sm-5 {
    padding-right: 3rem !important;
  }
  .pb-sm-5 {
    padding-bottom: 3rem !important;
  }
  .ps-sm-5 {
    padding-left: 3rem !important;
  }
  .m-sm-auto {
    margin: auto !important;
  }
  .mx-sm-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .my-sm-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mt-sm-auto {
    margin-top: auto !important;
  }
  .me-sm-auto {
    margin-right: auto !important;
  }
  .mb-sm-auto {
    margin-bottom: auto !important;
  }
  .ms-sm-auto {
    margin-left: auto !important;
  }
}
@media (min-width: 768px) {
  .d-md-inline {
    display: inline !important;
  }
  .d-md-inline-block {
    display: inline-block !important;
  }
  .d-md-block {
    display: block !important;
  }
  .d-md-grid {
    display: grid !important;
  }
  .d-md-inline-grid {
    display: inline-grid !important;
  }
  .d-md-table {
    display: table !important;
  }
  .d-md-table-row {
    display: table-row !important;
  }
  .d-md-table-cell {
    display: table-cell !important;
  }
  .d-md-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-md-inline-flex {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
  .d-md-none {
    display: none !important;
  }
  .flex-md-fill {
    -webkit-box-flex: 1 !important;
        -ms-flex: 1 1 auto !important;
            flex: 1 1 auto !important;
  }
  .flex-md-row {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: row !important;
            flex-direction: row !important;
  }
  .flex-md-column {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
  }
  .flex-md-row-reverse {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: reverse !important;
        -ms-flex-direction: row-reverse !important;
            flex-direction: row-reverse !important;
  }
  .flex-md-column-reverse {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: reverse !important;
        -ms-flex-direction: column-reverse !important;
            flex-direction: column-reverse !important;
  }
  .flex-md-wrap {
    -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
  }
  .flex-md-nowrap {
    -ms-flex-wrap: nowrap !important;
        flex-wrap: nowrap !important;
  }
  .flex-md-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
        flex-wrap: wrap-reverse !important;
  }
  .flex-md-grow-0 {
    -webkit-box-flex: 0 !important;
        -ms-flex-positive: 0 !important;
            flex-grow: 0 !important;
  }
  .flex-md-shrink-0 {
    -ms-flex-negative: 0 !important;
        flex-shrink: 0 !important;
  }
  .flex-md-grow-1 {
    -webkit-box-flex: 1 !important;
        -ms-flex-positive: 1 !important;
            flex-grow: 1 !important;
  }
  .flex-md-shrink-1 {
    -ms-flex-negative: 1 !important;
        flex-shrink: 1 !important;
  }
  .justify-content-md-start {
    -webkit-box-pack: start !important;
        -ms-flex-pack: start !important;
            justify-content: flex-start !important;
  }
  .justify-content-md-end {
    -webkit-box-pack: end !important;
        -ms-flex-pack: end !important;
            justify-content: flex-end !important;
  }
  .justify-content-md-center {
    -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
  }
  .justify-content-md-between {
    -webkit-box-pack: justify !important;
        -ms-flex-pack: justify !important;
            justify-content: space-between !important;
  }
  .justify-content-md-around {
    -ms-flex-pack: distribute !important;
        justify-content: space-around !important;
  }
  .justify-content-md-evenly {
    -webkit-box-pack: space-evenly !important;
        -ms-flex-pack: space-evenly !important;
            justify-content: space-evenly !important;
  }
  .align-items-md-start {
    -webkit-box-align: start !important;
        -ms-flex-align: start !important;
            align-items: flex-start !important;
  }
  .align-items-md-end {
    -webkit-box-align: end !important;
        -ms-flex-align: end !important;
            align-items: flex-end !important;
  }
  .align-items-md-center {
    -webkit-box-align: center !important;
        -ms-flex-align: center !important;
            align-items: center !important;
  }
  .align-items-md-baseline {
    -webkit-box-align: baseline !important;
        -ms-flex-align: baseline !important;
            align-items: baseline !important;
  }
  .align-items-md-stretch {
    -webkit-box-align: stretch !important;
        -ms-flex-align: stretch !important;
            align-items: stretch !important;
  }
  .align-content-md-start {
    -ms-flex-line-pack: start !important;
        align-content: flex-start !important;
  }
  .align-content-md-end {
    -ms-flex-line-pack: end !important;
        align-content: flex-end !important;
  }
  .align-content-md-center {
    -ms-flex-line-pack: center !important;
        align-content: center !important;
  }
  .align-content-md-between {
    -ms-flex-line-pack: justify !important;
        align-content: space-between !important;
  }
  .align-content-md-around {
    -ms-flex-line-pack: distribute !important;
        align-content: space-around !important;
  }
  .align-content-md-stretch {
    -ms-flex-line-pack: stretch !important;
        align-content: stretch !important;
  }
  .align-self-md-auto {
    -ms-flex-item-align: auto !important;
        align-self: auto !important;
  }
  .align-self-md-start {
    -ms-flex-item-align: start !important;
        align-self: flex-start !important;
  }
  .align-self-md-end {
    -ms-flex-item-align: end !important;
        align-self: flex-end !important;
  }
  .align-self-md-center {
    -ms-flex-item-align: center !important;
        align-self: center !important;
  }
  .align-self-md-baseline {
    -ms-flex-item-align: baseline !important;
        align-self: baseline !important;
  }
  .align-self-md-stretch {
    -ms-flex-item-align: stretch !important;
        align-self: stretch !important;
  }
  .order-md-first {
    -webkit-box-ordinal-group: 0 !important;
        -ms-flex-order: -1 !important;
            order: -1 !important;
  }
  .order-md-0 {
    -webkit-box-ordinal-group: 1 !important;
        -ms-flex-order: 0 !important;
            order: 0 !important;
  }
  .order-md-1 {
    -webkit-box-ordinal-group: 2 !important;
        -ms-flex-order: 1 !important;
            order: 1 !important;
  }
  .order-md-2 {
    -webkit-box-ordinal-group: 3 !important;
        -ms-flex-order: 2 !important;
            order: 2 !important;
  }
  .order-md-3 {
    -webkit-box-ordinal-group: 4 !important;
        -ms-flex-order: 3 !important;
            order: 3 !important;
  }
  .order-md-4 {
    -webkit-box-ordinal-group: 5 !important;
        -ms-flex-order: 4 !important;
            order: 4 !important;
  }
  .order-md-5 {
    -webkit-box-ordinal-group: 6 !important;
        -ms-flex-order: 5 !important;
            order: 5 !important;
  }
  .order-md-last {
    -webkit-box-ordinal-group: 7 !important;
        -ms-flex-order: 6 !important;
            order: 6 !important;
  }
  .m-md-0 {
    margin: 0 !important;
  }
  .mx-md-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .my-md-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .mt-md-0 {
    margin-top: 0 !important;
  }
  .me-md-0 {
    margin-right: 0 !important;
  }
  .mb-md-0 {
    margin-bottom: 0 !important;
  }
  .ms-md-0 {
    margin-left: 0 !important;
  }
  .p-md-0 {
    padding: 0 !important;
  }
  .px-md-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .py-md-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .pt-md-0 {
    padding-top: 0 !important;
  }
  .pe-md-0 {
    padding-right: 0 !important;
  }
  .pb-md-0 {
    padding-bottom: 0 !important;
  }
  .ps-md-0 {
    padding-left: 0 !important;
  }
  .m-md-1 {
    margin: 0.25rem !important;
  }
  .mx-md-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }
  .my-md-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  .mt-md-1 {
    margin-top: 0.25rem !important;
  }
  .me-md-1 {
    margin-right: 0.25rem !important;
  }
  .mb-md-1 {
    margin-bottom: 0.25rem !important;
  }
  .ms-md-1 {
    margin-left: 0.25rem !important;
  }
  .p-md-1 {
    padding: 0.25rem !important;
  }
  .px-md-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }
  .py-md-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  .pt-md-1 {
    padding-top: 0.25rem !important;
  }
  .pe-md-1 {
    padding-right: 0.25rem !important;
  }
  .pb-md-1 {
    padding-bottom: 0.25rem !important;
  }
  .ps-md-1 {
    padding-left: 0.25rem !important;
  }
  .m-md-2 {
    margin: 0.5rem !important;
  }
  .mx-md-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
  .my-md-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .mt-md-2 {
    margin-top: 0.5rem !important;
  }
  .me-md-2 {
    margin-right: 0.5rem !important;
  }
  .mb-md-2 {
    margin-bottom: 0.5rem !important;
  }
  .ms-md-2 {
    margin-left: 0.5rem !important;
  }
  .p-md-2 {
    padding: 0.5rem !important;
  }
  .px-md-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .py-md-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .pt-md-2 {
    padding-top: 0.5rem !important;
  }
  .pe-md-2 {
    padding-right: 0.5rem !important;
  }
  .pb-md-2 {
    padding-bottom: 0.5rem !important;
  }
  .ps-md-2 {
    padding-left: 0.5rem !important;
  }
  .m-md-3 {
    margin: 1rem !important;
  }
  .mx-md-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .my-md-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .mt-md-3 {
    margin-top: 1rem !important;
  }
  .me-md-3 {
    margin-right: 1rem !important;
  }
  .mb-md-3 {
    margin-bottom: 1rem !important;
  }
  .ms-md-3 {
    margin-left: 1rem !important;
  }
  .p-md-3 {
    padding: 1rem !important;
  }
  .px-md-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .py-md-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .pt-md-3 {
    padding-top: 1rem !important;
  }
  .pe-md-3 {
    padding-right: 1rem !important;
  }
  .pb-md-3 {
    padding-bottom: 1rem !important;
  }
  .ps-md-3 {
    padding-left: 1rem !important;
  }
  .m-md-4 {
    margin: 1.5rem !important;
  }
  .mx-md-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }
  .my-md-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .mt-md-4 {
    margin-top: 1.5rem !important;
  }
  .me-md-4 {
    margin-right: 1.5rem !important;
  }
  .mb-md-4 {
    margin-bottom: 1.5rem !important;
  }
  .ms-md-4 {
    margin-left: 1.5rem !important;
  }
  .p-md-4 {
    padding: 1.5rem !important;
  }
  .px-md-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
  .py-md-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .pt-md-4 {
    padding-top: 1.5rem !important;
  }
  .pe-md-4 {
    padding-right: 1.5rem !important;
  }
  .pb-md-4 {
    padding-bottom: 1.5rem !important;
  }
  .ps-md-4 {
    padding-left: 1.5rem !important;
  }
  .m-md-5 {
    margin: 3rem !important;
  }
  .mx-md-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }
  .my-md-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .mt-md-5 {
    margin-top: 3rem !important;
  }
  .me-md-5 {
    margin-right: 3rem !important;
  }
  .mb-md-5 {
    margin-bottom: 3rem !important;
  }
  .ms-md-5 {
    margin-left: 3rem !important;
  }
  .p-md-5 {
    padding: 3rem !important;
  }
  .px-md-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .py-md-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .pt-md-5 {
    padding-top: 3rem !important;
  }
  .pe-md-5 {
    padding-right: 3rem !important;
  }
  .pb-md-5 {
    padding-bottom: 3rem !important;
  }
  .ps-md-5 {
    padding-left: 3rem !important;
  }
  .m-md-auto {
    margin: auto !important;
  }
  .mx-md-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .my-md-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mt-md-auto {
    margin-top: auto !important;
  }
  .me-md-auto {
    margin-right: auto !important;
  }
  .mb-md-auto {
    margin-bottom: auto !important;
  }
  .ms-md-auto {
    margin-left: auto !important;
  }
}
@media (min-width: 992px) {
  .d-lg-inline {
    display: inline !important;
  }
  .d-lg-inline-block {
    display: inline-block !important;
  }
  .d-lg-block {
    display: block !important;
  }
  .d-lg-grid {
    display: grid !important;
  }
  .d-lg-inline-grid {
    display: inline-grid !important;
  }
  .d-lg-table {
    display: table !important;
  }
  .d-lg-table-row {
    display: table-row !important;
  }
  .d-lg-table-cell {
    display: table-cell !important;
  }
  .d-lg-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-lg-inline-flex {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
  .d-lg-none {
    display: none !important;
  }
  .flex-lg-fill {
    -webkit-box-flex: 1 !important;
        -ms-flex: 1 1 auto !important;
            flex: 1 1 auto !important;
  }
  .flex-lg-row {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: row !important;
            flex-direction: row !important;
  }
  .flex-lg-column {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
  }
  .flex-lg-row-reverse {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: reverse !important;
        -ms-flex-direction: row-reverse !important;
            flex-direction: row-reverse !important;
  }
  .flex-lg-column-reverse {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: reverse !important;
        -ms-flex-direction: column-reverse !important;
            flex-direction: column-reverse !important;
  }
  .flex-lg-wrap {
    -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
  }
  .flex-lg-nowrap {
    -ms-flex-wrap: nowrap !important;
        flex-wrap: nowrap !important;
  }
  .flex-lg-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
        flex-wrap: wrap-reverse !important;
  }
  .flex-lg-grow-0 {
    -webkit-box-flex: 0 !important;
        -ms-flex-positive: 0 !important;
            flex-grow: 0 !important;
  }
  .flex-lg-shrink-0 {
    -ms-flex-negative: 0 !important;
        flex-shrink: 0 !important;
  }
  .flex-lg-grow-1 {
    -webkit-box-flex: 1 !important;
        -ms-flex-positive: 1 !important;
            flex-grow: 1 !important;
  }
  .flex-lg-shrink-1 {
    -ms-flex-negative: 1 !important;
        flex-shrink: 1 !important;
  }
  .justify-content-lg-start {
    -webkit-box-pack: start !important;
        -ms-flex-pack: start !important;
            justify-content: flex-start !important;
  }
  .justify-content-lg-end {
    -webkit-box-pack: end !important;
        -ms-flex-pack: end !important;
            justify-content: flex-end !important;
  }
  .justify-content-lg-center {
    -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
  }
  .justify-content-lg-between {
    -webkit-box-pack: justify !important;
        -ms-flex-pack: justify !important;
            justify-content: space-between !important;
  }
  .justify-content-lg-around {
    -ms-flex-pack: distribute !important;
        justify-content: space-around !important;
  }
  .justify-content-lg-evenly {
    -webkit-box-pack: space-evenly !important;
        -ms-flex-pack: space-evenly !important;
            justify-content: space-evenly !important;
  }
  .align-items-lg-start {
    -webkit-box-align: start !important;
        -ms-flex-align: start !important;
            align-items: flex-start !important;
  }
  .align-items-lg-end {
    -webkit-box-align: end !important;
        -ms-flex-align: end !important;
            align-items: flex-end !important;
  }
  .align-items-lg-center {
    -webkit-box-align: center !important;
        -ms-flex-align: center !important;
            align-items: center !important;
  }
  .align-items-lg-baseline {
    -webkit-box-align: baseline !important;
        -ms-flex-align: baseline !important;
            align-items: baseline !important;
  }
  .align-items-lg-stretch {
    -webkit-box-align: stretch !important;
        -ms-flex-align: stretch !important;
            align-items: stretch !important;
  }
  .align-content-lg-start {
    -ms-flex-line-pack: start !important;
        align-content: flex-start !important;
  }
  .align-content-lg-end {
    -ms-flex-line-pack: end !important;
        align-content: flex-end !important;
  }
  .align-content-lg-center {
    -ms-flex-line-pack: center !important;
        align-content: center !important;
  }
  .align-content-lg-between {
    -ms-flex-line-pack: justify !important;
        align-content: space-between !important;
  }
  .align-content-lg-around {
    -ms-flex-line-pack: distribute !important;
        align-content: space-around !important;
  }
  .align-content-lg-stretch {
    -ms-flex-line-pack: stretch !important;
        align-content: stretch !important;
  }
  .align-self-lg-auto {
    -ms-flex-item-align: auto !important;
        align-self: auto !important;
  }
  .align-self-lg-start {
    -ms-flex-item-align: start !important;
        align-self: flex-start !important;
  }
  .align-self-lg-end {
    -ms-flex-item-align: end !important;
        align-self: flex-end !important;
  }
  .align-self-lg-center {
    -ms-flex-item-align: center !important;
        align-self: center !important;
  }
  .align-self-lg-baseline {
    -ms-flex-item-align: baseline !important;
        align-self: baseline !important;
  }
  .align-self-lg-stretch {
    -ms-flex-item-align: stretch !important;
        align-self: stretch !important;
  }
  .order-lg-first {
    -webkit-box-ordinal-group: 0 !important;
        -ms-flex-order: -1 !important;
            order: -1 !important;
  }
  .order-lg-0 {
    -webkit-box-ordinal-group: 1 !important;
        -ms-flex-order: 0 !important;
            order: 0 !important;
  }
  .order-lg-1 {
    -webkit-box-ordinal-group: 2 !important;
        -ms-flex-order: 1 !important;
            order: 1 !important;
  }
  .order-lg-2 {
    -webkit-box-ordinal-group: 3 !important;
        -ms-flex-order: 2 !important;
            order: 2 !important;
  }
  .order-lg-3 {
    -webkit-box-ordinal-group: 4 !important;
        -ms-flex-order: 3 !important;
            order: 3 !important;
  }
  .order-lg-4 {
    -webkit-box-ordinal-group: 5 !important;
        -ms-flex-order: 4 !important;
            order: 4 !important;
  }
  .order-lg-5 {
    -webkit-box-ordinal-group: 6 !important;
        -ms-flex-order: 5 !important;
            order: 5 !important;
  }
  .order-lg-last {
    -webkit-box-ordinal-group: 7 !important;
        -ms-flex-order: 6 !important;
            order: 6 !important;
  }
  .m-lg-0 {
    margin: 0 !important;
  }
  .mx-lg-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .my-lg-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .mt-lg-0 {
    margin-top: 0 !important;
  }
  .me-lg-0 {
    margin-right: 0 !important;
  }
  .mb-lg-0 {
    margin-bottom: 0 !important;
  }
  .ms-lg-0 {
    margin-left: 0 !important;
  }
  .p-lg-0 {
    padding: 0 !important;
  }
  .px-lg-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .py-lg-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .pt-lg-0 {
    padding-top: 0 !important;
  }
  .pe-lg-0 {
    padding-right: 0 !important;
  }
  .pb-lg-0 {
    padding-bottom: 0 !important;
  }
  .ps-lg-0 {
    padding-left: 0 !important;
  }
  .m-lg-1 {
    margin: 0.25rem !important;
  }
  .mx-lg-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }
  .my-lg-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  .mt-lg-1 {
    margin-top: 0.25rem !important;
  }
  .me-lg-1 {
    margin-right: 0.25rem !important;
  }
  .mb-lg-1 {
    margin-bottom: 0.25rem !important;
  }
  .ms-lg-1 {
    margin-left: 0.25rem !important;
  }
  .p-lg-1 {
    padding: 0.25rem !important;
  }
  .px-lg-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }
  .py-lg-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  .pt-lg-1 {
    padding-top: 0.25rem !important;
  }
  .pe-lg-1 {
    padding-right: 0.25rem !important;
  }
  .pb-lg-1 {
    padding-bottom: 0.25rem !important;
  }
  .ps-lg-1 {
    padding-left: 0.25rem !important;
  }
  .m-lg-2 {
    margin: 0.5rem !important;
  }
  .mx-lg-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
  .my-lg-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .mt-lg-2 {
    margin-top: 0.5rem !important;
  }
  .me-lg-2 {
    margin-right: 0.5rem !important;
  }
  .mb-lg-2 {
    margin-bottom: 0.5rem !important;
  }
  .ms-lg-2 {
    margin-left: 0.5rem !important;
  }
  .p-lg-2 {
    padding: 0.5rem !important;
  }
  .px-lg-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .py-lg-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .pt-lg-2 {
    padding-top: 0.5rem !important;
  }
  .pe-lg-2 {
    padding-right: 0.5rem !important;
  }
  .pb-lg-2 {
    padding-bottom: 0.5rem !important;
  }
  .ps-lg-2 {
    padding-left: 0.5rem !important;
  }
  .m-lg-3 {
    margin: 1rem !important;
  }
  .mx-lg-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .my-lg-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .mt-lg-3 {
    margin-top: 1rem !important;
  }
  .me-lg-3 {
    margin-right: 1rem !important;
  }
  .mb-lg-3 {
    margin-bottom: 1rem !important;
  }
  .ms-lg-3 {
    margin-left: 1rem !important;
  }
  .p-lg-3 {
    padding: 1rem !important;
  }
  .px-lg-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .py-lg-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .pt-lg-3 {
    padding-top: 1rem !important;
  }
  .pe-lg-3 {
    padding-right: 1rem !important;
  }
  .pb-lg-3 {
    padding-bottom: 1rem !important;
  }
  .ps-lg-3 {
    padding-left: 1rem !important;
  }
  .m-lg-4 {
    margin: 1.5rem !important;
  }
  .mx-lg-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }
  .my-lg-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .mt-lg-4 {
    margin-top: 1.5rem !important;
  }
  .me-lg-4 {
    margin-right: 1.5rem !important;
  }
  .mb-lg-4 {
    margin-bottom: 1.5rem !important;
  }
  .ms-lg-4 {
    margin-left: 1.5rem !important;
  }
  .p-lg-4 {
    padding: 1.5rem !important;
  }
  .px-lg-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
  .py-lg-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .pt-lg-4 {
    padding-top: 1.5rem !important;
  }
  .pe-lg-4 {
    padding-right: 1.5rem !important;
  }
  .pb-lg-4 {
    padding-bottom: 1.5rem !important;
  }
  .ps-lg-4 {
    padding-left: 1.5rem !important;
  }
  .m-lg-5 {
    margin: 3rem !important;
  }
  .mx-lg-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }
  .my-lg-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .mt-lg-5 {
    margin-top: 3rem !important;
  }
  .me-lg-5 {
    margin-right: 3rem !important;
  }
  .mb-lg-5 {
    margin-bottom: 3rem !important;
  }
  .ms-lg-5 {
    margin-left: 3rem !important;
  }
  .p-lg-5 {
    padding: 3rem !important;
  }
  .px-lg-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .py-lg-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .pt-lg-5 {
    padding-top: 3rem !important;
  }
  .pe-lg-5 {
    padding-right: 3rem !important;
  }
  .pb-lg-5 {
    padding-bottom: 3rem !important;
  }
  .ps-lg-5 {
    padding-left: 3rem !important;
  }
  .m-lg-auto {
    margin: auto !important;
  }
  .mx-lg-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .my-lg-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mt-lg-auto {
    margin-top: auto !important;
  }
  .me-lg-auto {
    margin-right: auto !important;
  }
  .mb-lg-auto {
    margin-bottom: auto !important;
  }
  .ms-lg-auto {
    margin-left: auto !important;
  }
}
@media (min-width: 1200px) {
  .d-xl-inline {
    display: inline !important;
  }
  .d-xl-inline-block {
    display: inline-block !important;
  }
  .d-xl-block {
    display: block !important;
  }
  .d-xl-grid {
    display: grid !important;
  }
  .d-xl-inline-grid {
    display: inline-grid !important;
  }
  .d-xl-table {
    display: table !important;
  }
  .d-xl-table-row {
    display: table-row !important;
  }
  .d-xl-table-cell {
    display: table-cell !important;
  }
  .d-xl-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-xl-inline-flex {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
  .d-xl-none {
    display: none !important;
  }
  .flex-xl-fill {
    -webkit-box-flex: 1 !important;
        -ms-flex: 1 1 auto !important;
            flex: 1 1 auto !important;
  }
  .flex-xl-row {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: row !important;
            flex-direction: row !important;
  }
  .flex-xl-column {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
  }
  .flex-xl-row-reverse {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: reverse !important;
        -ms-flex-direction: row-reverse !important;
            flex-direction: row-reverse !important;
  }
  .flex-xl-column-reverse {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: reverse !important;
        -ms-flex-direction: column-reverse !important;
            flex-direction: column-reverse !important;
  }
  .flex-xl-wrap {
    -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
  }
  .flex-xl-nowrap {
    -ms-flex-wrap: nowrap !important;
        flex-wrap: nowrap !important;
  }
  .flex-xl-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
        flex-wrap: wrap-reverse !important;
  }
  .flex-xl-grow-0 {
    -webkit-box-flex: 0 !important;
        -ms-flex-positive: 0 !important;
            flex-grow: 0 !important;
  }
  .flex-xl-shrink-0 {
    -ms-flex-negative: 0 !important;
        flex-shrink: 0 !important;
  }
  .flex-xl-grow-1 {
    -webkit-box-flex: 1 !important;
        -ms-flex-positive: 1 !important;
            flex-grow: 1 !important;
  }
  .flex-xl-shrink-1 {
    -ms-flex-negative: 1 !important;
        flex-shrink: 1 !important;
  }
  .justify-content-xl-start {
    -webkit-box-pack: start !important;
        -ms-flex-pack: start !important;
            justify-content: flex-start !important;
  }
  .justify-content-xl-end {
    -webkit-box-pack: end !important;
        -ms-flex-pack: end !important;
            justify-content: flex-end !important;
  }
  .justify-content-xl-center {
    -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
  }
  .justify-content-xl-between {
    -webkit-box-pack: justify !important;
        -ms-flex-pack: justify !important;
            justify-content: space-between !important;
  }
  .justify-content-xl-around {
    -ms-flex-pack: distribute !important;
        justify-content: space-around !important;
  }
  .justify-content-xl-evenly {
    -webkit-box-pack: space-evenly !important;
        -ms-flex-pack: space-evenly !important;
            justify-content: space-evenly !important;
  }
  .align-items-xl-start {
    -webkit-box-align: start !important;
        -ms-flex-align: start !important;
            align-items: flex-start !important;
  }
  .align-items-xl-end {
    -webkit-box-align: end !important;
        -ms-flex-align: end !important;
            align-items: flex-end !important;
  }
  .align-items-xl-center {
    -webkit-box-align: center !important;
        -ms-flex-align: center !important;
            align-items: center !important;
  }
  .align-items-xl-baseline {
    -webkit-box-align: baseline !important;
        -ms-flex-align: baseline !important;
            align-items: baseline !important;
  }
  .align-items-xl-stretch {
    -webkit-box-align: stretch !important;
        -ms-flex-align: stretch !important;
            align-items: stretch !important;
  }
  .align-content-xl-start {
    -ms-flex-line-pack: start !important;
        align-content: flex-start !important;
  }
  .align-content-xl-end {
    -ms-flex-line-pack: end !important;
        align-content: flex-end !important;
  }
  .align-content-xl-center {
    -ms-flex-line-pack: center !important;
        align-content: center !important;
  }
  .align-content-xl-between {
    -ms-flex-line-pack: justify !important;
        align-content: space-between !important;
  }
  .align-content-xl-around {
    -ms-flex-line-pack: distribute !important;
        align-content: space-around !important;
  }
  .align-content-xl-stretch {
    -ms-flex-line-pack: stretch !important;
        align-content: stretch !important;
  }
  .align-self-xl-auto {
    -ms-flex-item-align: auto !important;
        align-self: auto !important;
  }
  .align-self-xl-start {
    -ms-flex-item-align: start !important;
        align-self: flex-start !important;
  }
  .align-self-xl-end {
    -ms-flex-item-align: end !important;
        align-self: flex-end !important;
  }
  .align-self-xl-center {
    -ms-flex-item-align: center !important;
        align-self: center !important;
  }
  .align-self-xl-baseline {
    -ms-flex-item-align: baseline !important;
        align-self: baseline !important;
  }
  .align-self-xl-stretch {
    -ms-flex-item-align: stretch !important;
        align-self: stretch !important;
  }
  .order-xl-first {
    -webkit-box-ordinal-group: 0 !important;
        -ms-flex-order: -1 !important;
            order: -1 !important;
  }
  .order-xl-0 {
    -webkit-box-ordinal-group: 1 !important;
        -ms-flex-order: 0 !important;
            order: 0 !important;
  }
  .order-xl-1 {
    -webkit-box-ordinal-group: 2 !important;
        -ms-flex-order: 1 !important;
            order: 1 !important;
  }
  .order-xl-2 {
    -webkit-box-ordinal-group: 3 !important;
        -ms-flex-order: 2 !important;
            order: 2 !important;
  }
  .order-xl-3 {
    -webkit-box-ordinal-group: 4 !important;
        -ms-flex-order: 3 !important;
            order: 3 !important;
  }
  .order-xl-4 {
    -webkit-box-ordinal-group: 5 !important;
        -ms-flex-order: 4 !important;
            order: 4 !important;
  }
  .order-xl-5 {
    -webkit-box-ordinal-group: 6 !important;
        -ms-flex-order: 5 !important;
            order: 5 !important;
  }
  .order-xl-last {
    -webkit-box-ordinal-group: 7 !important;
        -ms-flex-order: 6 !important;
            order: 6 !important;
  }
  .m-xl-0 {
    margin: 0 !important;
  }
  .mx-xl-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .my-xl-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .mt-xl-0 {
    margin-top: 0 !important;
  }
  .me-xl-0 {
    margin-right: 0 !important;
  }
  .mb-xl-0 {
    margin-bottom: 0 !important;
  }
  .ms-xl-0 {
    margin-left: 0 !important;
  }
  .p-xl-0 {
    padding: 0 !important;
  }
  .px-xl-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .py-xl-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .pt-xl-0 {
    padding-top: 0 !important;
  }
  .pe-xl-0 {
    padding-right: 0 !important;
  }
  .pb-xl-0 {
    padding-bottom: 0 !important;
  }
  .ps-xl-0 {
    padding-left: 0 !important;
  }
  .m-xl-1 {
    margin: 0.25rem !important;
  }
  .mx-xl-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }
  .my-xl-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  .mt-xl-1 {
    margin-top: 0.25rem !important;
  }
  .me-xl-1 {
    margin-right: 0.25rem !important;
  }
  .mb-xl-1 {
    margin-bottom: 0.25rem !important;
  }
  .ms-xl-1 {
    margin-left: 0.25rem !important;
  }
  .p-xl-1 {
    padding: 0.25rem !important;
  }
  .px-xl-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }
  .py-xl-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  .pt-xl-1 {
    padding-top: 0.25rem !important;
  }
  .pe-xl-1 {
    padding-right: 0.25rem !important;
  }
  .pb-xl-1 {
    padding-bottom: 0.25rem !important;
  }
  .ps-xl-1 {
    padding-left: 0.25rem !important;
  }
  .m-xl-2 {
    margin: 0.5rem !important;
  }
  .mx-xl-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
  .my-xl-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .mt-xl-2 {
    margin-top: 0.5rem !important;
  }
  .me-xl-2 {
    margin-right: 0.5rem !important;
  }
  .mb-xl-2 {
    margin-bottom: 0.5rem !important;
  }
  .ms-xl-2 {
    margin-left: 0.5rem !important;
  }
  .p-xl-2 {
    padding: 0.5rem !important;
  }
  .px-xl-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .py-xl-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .pt-xl-2 {
    padding-top: 0.5rem !important;
  }
  .pe-xl-2 {
    padding-right: 0.5rem !important;
  }
  .pb-xl-2 {
    padding-bottom: 0.5rem !important;
  }
  .ps-xl-2 {
    padding-left: 0.5rem !important;
  }
  .m-xl-3 {
    margin: 1rem !important;
  }
  .mx-xl-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .my-xl-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .mt-xl-3 {
    margin-top: 1rem !important;
  }
  .me-xl-3 {
    margin-right: 1rem !important;
  }
  .mb-xl-3 {
    margin-bottom: 1rem !important;
  }
  .ms-xl-3 {
    margin-left: 1rem !important;
  }
  .p-xl-3 {
    padding: 1rem !important;
  }
  .px-xl-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .py-xl-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .pt-xl-3 {
    padding-top: 1rem !important;
  }
  .pe-xl-3 {
    padding-right: 1rem !important;
  }
  .pb-xl-3 {
    padding-bottom: 1rem !important;
  }
  .ps-xl-3 {
    padding-left: 1rem !important;
  }
  .m-xl-4 {
    margin: 1.5rem !important;
  }
  .mx-xl-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }
  .my-xl-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .mt-xl-4 {
    margin-top: 1.5rem !important;
  }
  .me-xl-4 {
    margin-right: 1.5rem !important;
  }
  .mb-xl-4 {
    margin-bottom: 1.5rem !important;
  }
  .ms-xl-4 {
    margin-left: 1.5rem !important;
  }
  .p-xl-4 {
    padding: 1.5rem !important;
  }
  .px-xl-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
  .py-xl-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .pt-xl-4 {
    padding-top: 1.5rem !important;
  }
  .pe-xl-4 {
    padding-right: 1.5rem !important;
  }
  .pb-xl-4 {
    padding-bottom: 1.5rem !important;
  }
  .ps-xl-4 {
    padding-left: 1.5rem !important;
  }
  .m-xl-5 {
    margin: 3rem !important;
  }
  .mx-xl-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }
  .my-xl-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .mt-xl-5 {
    margin-top: 3rem !important;
  }
  .me-xl-5 {
    margin-right: 3rem !important;
  }
  .mb-xl-5 {
    margin-bottom: 3rem !important;
  }
  .ms-xl-5 {
    margin-left: 3rem !important;
  }
  .p-xl-5 {
    padding: 3rem !important;
  }
  .px-xl-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .py-xl-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .pt-xl-5 {
    padding-top: 3rem !important;
  }
  .pe-xl-5 {
    padding-right: 3rem !important;
  }
  .pb-xl-5 {
    padding-bottom: 3rem !important;
  }
  .ps-xl-5 {
    padding-left: 3rem !important;
  }
  .m-xl-auto {
    margin: auto !important;
  }
  .mx-xl-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .my-xl-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mt-xl-auto {
    margin-top: auto !important;
  }
  .me-xl-auto {
    margin-right: auto !important;
  }
  .mb-xl-auto {
    margin-bottom: auto !important;
  }
  .ms-xl-auto {
    margin-left: auto !important;
  }
}
@media (min-width: 1400px) {
  .d-xxl-inline {
    display: inline !important;
  }
  .d-xxl-inline-block {
    display: inline-block !important;
  }
  .d-xxl-block {
    display: block !important;
  }
  .d-xxl-grid {
    display: grid !important;
  }
  .d-xxl-inline-grid {
    display: inline-grid !important;
  }
  .d-xxl-table {
    display: table !important;
  }
  .d-xxl-table-row {
    display: table-row !important;
  }
  .d-xxl-table-cell {
    display: table-cell !important;
  }
  .d-xxl-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-xxl-inline-flex {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
  .d-xxl-none {
    display: none !important;
  }
  .flex-xxl-fill {
    -webkit-box-flex: 1 !important;
        -ms-flex: 1 1 auto !important;
            flex: 1 1 auto !important;
  }
  .flex-xxl-row {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: row !important;
            flex-direction: row !important;
  }
  .flex-xxl-column {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
  }
  .flex-xxl-row-reverse {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: reverse !important;
        -ms-flex-direction: row-reverse !important;
            flex-direction: row-reverse !important;
  }
  .flex-xxl-column-reverse {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: reverse !important;
        -ms-flex-direction: column-reverse !important;
            flex-direction: column-reverse !important;
  }
  .flex-xxl-wrap {
    -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
  }
  .flex-xxl-nowrap {
    -ms-flex-wrap: nowrap !important;
        flex-wrap: nowrap !important;
  }
  .flex-xxl-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
        flex-wrap: wrap-reverse !important;
  }
  .flex-xxl-grow-0 {
    -webkit-box-flex: 0 !important;
        -ms-flex-positive: 0 !important;
            flex-grow: 0 !important;
  }
  .flex-xxl-shrink-0 {
    -ms-flex-negative: 0 !important;
        flex-shrink: 0 !important;
  }
  .flex-xxl-grow-1 {
    -webkit-box-flex: 1 !important;
        -ms-flex-positive: 1 !important;
            flex-grow: 1 !important;
  }
  .flex-xxl-shrink-1 {
    -ms-flex-negative: 1 !important;
        flex-shrink: 1 !important;
  }
  .justify-content-xxl-start {
    -webkit-box-pack: start !important;
        -ms-flex-pack: start !important;
            justify-content: flex-start !important;
  }
  .justify-content-xxl-end {
    -webkit-box-pack: end !important;
        -ms-flex-pack: end !important;
            justify-content: flex-end !important;
  }
  .justify-content-xxl-center {
    -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
  }
  .justify-content-xxl-between {
    -webkit-box-pack: justify !important;
        -ms-flex-pack: justify !important;
            justify-content: space-between !important;
  }
  .justify-content-xxl-around {
    -ms-flex-pack: distribute !important;
        justify-content: space-around !important;
  }
  .justify-content-xxl-evenly {
    -webkit-box-pack: space-evenly !important;
        -ms-flex-pack: space-evenly !important;
            justify-content: space-evenly !important;
  }
  .align-items-xxl-start {
    -webkit-box-align: start !important;
        -ms-flex-align: start !important;
            align-items: flex-start !important;
  }
  .align-items-xxl-end {
    -webkit-box-align: end !important;
        -ms-flex-align: end !important;
            align-items: flex-end !important;
  }
  .align-items-xxl-center {
    -webkit-box-align: center !important;
        -ms-flex-align: center !important;
            align-items: center !important;
  }
  .align-items-xxl-baseline {
    -webkit-box-align: baseline !important;
        -ms-flex-align: baseline !important;
            align-items: baseline !important;
  }
  .align-items-xxl-stretch {
    -webkit-box-align: stretch !important;
        -ms-flex-align: stretch !important;
            align-items: stretch !important;
  }
  .align-content-xxl-start {
    -ms-flex-line-pack: start !important;
        align-content: flex-start !important;
  }
  .align-content-xxl-end {
    -ms-flex-line-pack: end !important;
        align-content: flex-end !important;
  }
  .align-content-xxl-center {
    -ms-flex-line-pack: center !important;
        align-content: center !important;
  }
  .align-content-xxl-between {
    -ms-flex-line-pack: justify !important;
        align-content: space-between !important;
  }
  .align-content-xxl-around {
    -ms-flex-line-pack: distribute !important;
        align-content: space-around !important;
  }
  .align-content-xxl-stretch {
    -ms-flex-line-pack: stretch !important;
        align-content: stretch !important;
  }
  .align-self-xxl-auto {
    -ms-flex-item-align: auto !important;
        align-self: auto !important;
  }
  .align-self-xxl-start {
    -ms-flex-item-align: start !important;
        align-self: flex-start !important;
  }
  .align-self-xxl-end {
    -ms-flex-item-align: end !important;
        align-self: flex-end !important;
  }
  .align-self-xxl-center {
    -ms-flex-item-align: center !important;
        align-self: center !important;
  }
  .align-self-xxl-baseline {
    -ms-flex-item-align: baseline !important;
        align-self: baseline !important;
  }
  .align-self-xxl-stretch {
    -ms-flex-item-align: stretch !important;
        align-self: stretch !important;
  }
  .order-xxl-first {
    -webkit-box-ordinal-group: 0 !important;
        -ms-flex-order: -1 !important;
            order: -1 !important;
  }
  .order-xxl-0 {
    -webkit-box-ordinal-group: 1 !important;
        -ms-flex-order: 0 !important;
            order: 0 !important;
  }
  .order-xxl-1 {
    -webkit-box-ordinal-group: 2 !important;
        -ms-flex-order: 1 !important;
            order: 1 !important;
  }
  .order-xxl-2 {
    -webkit-box-ordinal-group: 3 !important;
        -ms-flex-order: 2 !important;
            order: 2 !important;
  }
  .order-xxl-3 {
    -webkit-box-ordinal-group: 4 !important;
        -ms-flex-order: 3 !important;
            order: 3 !important;
  }
  .order-xxl-4 {
    -webkit-box-ordinal-group: 5 !important;
        -ms-flex-order: 4 !important;
            order: 4 !important;
  }
  .order-xxl-5 {
    -webkit-box-ordinal-group: 6 !important;
        -ms-flex-order: 5 !important;
            order: 5 !important;
  }
  .order-xxl-last {
    -webkit-box-ordinal-group: 7 !important;
        -ms-flex-order: 6 !important;
            order: 6 !important;
  }
  .m-xxl-0 {
    margin: 0 !important;
  }
  .mx-xxl-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .my-xxl-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .mt-xxl-0 {
    margin-top: 0 !important;
  }
  .me-xxl-0 {
    margin-right: 0 !important;
  }
  .mb-xxl-0 {
    margin-bottom: 0 !important;
  }
  .ms-xxl-0 {
    margin-left: 0 !important;
  }
  .p-xxl-0 {
    padding: 0 !important;
  }
  .px-xxl-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .py-xxl-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .pt-xxl-0 {
    padding-top: 0 !important;
  }
  .pe-xxl-0 {
    padding-right: 0 !important;
  }
  .pb-xxl-0 {
    padding-bottom: 0 !important;
  }
  .ps-xxl-0 {
    padding-left: 0 !important;
  }
  .m-xxl-1 {
    margin: 0.25rem !important;
  }
  .mx-xxl-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }
  .my-xxl-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  .mt-xxl-1 {
    margin-top: 0.25rem !important;
  }
  .me-xxl-1 {
    margin-right: 0.25rem !important;
  }
  .mb-xxl-1 {
    margin-bottom: 0.25rem !important;
  }
  .ms-xxl-1 {
    margin-left: 0.25rem !important;
  }
  .p-xxl-1 {
    padding: 0.25rem !important;
  }
  .px-xxl-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }
  .py-xxl-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  .pt-xxl-1 {
    padding-top: 0.25rem !important;
  }
  .pe-xxl-1 {
    padding-right: 0.25rem !important;
  }
  .pb-xxl-1 {
    padding-bottom: 0.25rem !important;
  }
  .ps-xxl-1 {
    padding-left: 0.25rem !important;
  }
  .m-xxl-2 {
    margin: 0.5rem !important;
  }
  .mx-xxl-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
  .my-xxl-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .mt-xxl-2 {
    margin-top: 0.5rem !important;
  }
  .me-xxl-2 {
    margin-right: 0.5rem !important;
  }
  .mb-xxl-2 {
    margin-bottom: 0.5rem !important;
  }
  .ms-xxl-2 {
    margin-left: 0.5rem !important;
  }
  .p-xxl-2 {
    padding: 0.5rem !important;
  }
  .px-xxl-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .py-xxl-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .pt-xxl-2 {
    padding-top: 0.5rem !important;
  }
  .pe-xxl-2 {
    padding-right: 0.5rem !important;
  }
  .pb-xxl-2 {
    padding-bottom: 0.5rem !important;
  }
  .ps-xxl-2 {
    padding-left: 0.5rem !important;
  }
  .m-xxl-3 {
    margin: 1rem !important;
  }
  .mx-xxl-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .my-xxl-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .mt-xxl-3 {
    margin-top: 1rem !important;
  }
  .me-xxl-3 {
    margin-right: 1rem !important;
  }
  .mb-xxl-3 {
    margin-bottom: 1rem !important;
  }
  .ms-xxl-3 {
    margin-left: 1rem !important;
  }
  .p-xxl-3 {
    padding: 1rem !important;
  }
  .px-xxl-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .py-xxl-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .pt-xxl-3 {
    padding-top: 1rem !important;
  }
  .pe-xxl-3 {
    padding-right: 1rem !important;
  }
  .pb-xxl-3 {
    padding-bottom: 1rem !important;
  }
  .ps-xxl-3 {
    padding-left: 1rem !important;
  }
  .m-xxl-4 {
    margin: 1.5rem !important;
  }
  .mx-xxl-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }
  .my-xxl-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .mt-xxl-4 {
    margin-top: 1.5rem !important;
  }
  .me-xxl-4 {
    margin-right: 1.5rem !important;
  }
  .mb-xxl-4 {
    margin-bottom: 1.5rem !important;
  }
  .ms-xxl-4 {
    margin-left: 1.5rem !important;
  }
  .p-xxl-4 {
    padding: 1.5rem !important;
  }
  .px-xxl-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
  .py-xxl-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .pt-xxl-4 {
    padding-top: 1.5rem !important;
  }
  .pe-xxl-4 {
    padding-right: 1.5rem !important;
  }
  .pb-xxl-4 {
    padding-bottom: 1.5rem !important;
  }
  .ps-xxl-4 {
    padding-left: 1.5rem !important;
  }
  .m-xxl-5 {
    margin: 3rem !important;
  }
  .mx-xxl-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }
  .my-xxl-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .mt-xxl-5 {
    margin-top: 3rem !important;
  }
  .me-xxl-5 {
    margin-right: 3rem !important;
  }
  .mb-xxl-5 {
    margin-bottom: 3rem !important;
  }
  .ms-xxl-5 {
    margin-left: 3rem !important;
  }
  .p-xxl-5 {
    padding: 3rem !important;
  }
  .px-xxl-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .py-xxl-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .pt-xxl-5 {
    padding-top: 3rem !important;
  }
  .pe-xxl-5 {
    padding-right: 3rem !important;
  }
  .pb-xxl-5 {
    padding-bottom: 3rem !important;
  }
  .ps-xxl-5 {
    padding-left: 3rem !important;
  }
  .m-xxl-auto {
    margin: auto !important;
  }
  .mx-xxl-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .my-xxl-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mt-xxl-auto {
    margin-top: auto !important;
  }
  .me-xxl-auto {
    margin-right: auto !important;
  }
  .mb-xxl-auto {
    margin-bottom: auto !important;
  }
  .ms-xxl-auto {
    margin-left: auto !important;
  }
}
@media print {
  .d-print-inline {
    display: inline !important;
  }
  .d-print-inline-block {
    display: inline-block !important;
  }
  .d-print-block {
    display: block !important;
  }
  .d-print-grid {
    display: grid !important;
  }
  .d-print-inline-grid {
    display: inline-grid !important;
  }
  .d-print-table {
    display: table !important;
  }
  .d-print-table-row {
    display: table-row !important;
  }
  .d-print-table-cell {
    display: table-cell !important;
  }
  .d-print-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-print-inline-flex {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
  .d-print-none {
    display: none !important;
  }
}
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
}

.grid-dense {
  grid-auto-flow: row dense;
}

@media only screen and (max-width: 575.999px) {
  .grid > [class*=col-span-],
  .grid > [class*=row-span-] {
    grid-column: 1/-1;
    grid-row: auto;
  }
}
.has-cols-1 {
  grid-template-columns: repeat(1, 1fr);
}

.rows-1 {
  grid-template-rows: repeat(1, 1fr);
}

.col-span-1 {
  grid-column: span 1/span 1;
}

.row-span-1 {
  grid-row: span 1/span 1;
}

.col-start-1 {
  grid-column-start: 1;
}

.row-start-1 {
  grid-row-start: 1;
}

.has-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.rows-2 {
  grid-template-rows: repeat(2, 1fr);
}

.col-span-2 {
  grid-column: span 2/span 2;
}

.row-span-2 {
  grid-row: span 2/span 2;
}

.col-start-2 {
  grid-column-start: 2;
}

.row-start-2 {
  grid-row-start: 2;
}

.has-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.rows-3 {
  grid-template-rows: repeat(3, 1fr);
}

.col-span-3 {
  grid-column: span 3/span 3;
}

.row-span-3 {
  grid-row: span 3/span 3;
}

.col-start-3 {
  grid-column-start: 3;
}

.row-start-3 {
  grid-row-start: 3;
}

.has-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.rows-4 {
  grid-template-rows: repeat(4, 1fr);
}

.col-span-4 {
  grid-column: span 4/span 4;
}

.row-span-4 {
  grid-row: span 4/span 4;
}

.col-start-4 {
  grid-column-start: 4;
}

.row-start-4 {
  grid-row-start: 4;
}

.has-cols-5 {
  grid-template-columns: repeat(5, 1fr);
}

.rows-5 {
  grid-template-rows: repeat(5, 1fr);
}

.col-span-5 {
  grid-column: span 5/span 5;
}

.row-span-5 {
  grid-row: span 5/span 5;
}

.col-start-5 {
  grid-column-start: 5;
}

.row-start-5 {
  grid-row-start: 5;
}

.has-cols-6 {
  grid-template-columns: repeat(6, 1fr);
}

.rows-6 {
  grid-template-rows: repeat(6, 1fr);
}

.col-span-6 {
  grid-column: span 6/span 6;
}

.row-span-6 {
  grid-row: span 6/span 6;
}

.col-start-6 {
  grid-column-start: 6;
}

.row-start-6 {
  grid-row-start: 6;
}

.has-cols-7 {
  grid-template-columns: repeat(7, 1fr);
}

.rows-7 {
  grid-template-rows: repeat(7, 1fr);
}

.col-span-7 {
  grid-column: span 7/span 7;
}

.row-span-7 {
  grid-row: span 7/span 7;
}

.col-start-7 {
  grid-column-start: 7;
}

.row-start-7 {
  grid-row-start: 7;
}

.has-cols-8 {
  grid-template-columns: repeat(8, 1fr);
}

.rows-8 {
  grid-template-rows: repeat(8, 1fr);
}

.col-span-8 {
  grid-column: span 8/span 8;
}

.row-span-8 {
  grid-row: span 8/span 8;
}

.col-start-8 {
  grid-column-start: 8;
}

.row-start-8 {
  grid-row-start: 8;
}

.has-cols-9 {
  grid-template-columns: repeat(9, 1fr);
}

.rows-9 {
  grid-template-rows: repeat(9, 1fr);
}

.col-span-9 {
  grid-column: span 9/span 9;
}

.row-span-9 {
  grid-row: span 9/span 9;
}

.col-start-9 {
  grid-column-start: 9;
}

.row-start-9 {
  grid-row-start: 9;
}

.has-cols-10 {
  grid-template-columns: repeat(10, 1fr);
}

.rows-10 {
  grid-template-rows: repeat(10, 1fr);
}

.col-span-10 {
  grid-column: span 10/span 10;
}

.row-span-10 {
  grid-row: span 10/span 10;
}

.col-start-10 {
  grid-column-start: 10;
}

.row-start-10 {
  grid-row-start: 10;
}

.has-cols-11 {
  grid-template-columns: repeat(11, 1fr);
}

.rows-11 {
  grid-template-rows: repeat(11, 1fr);
}

.col-span-11 {
  grid-column: span 11/span 11;
}

.row-span-11 {
  grid-row: span 11/span 11;
}

.col-start-11 {
  grid-column-start: 11;
}

.row-start-11 {
  grid-row-start: 11;
}

.has-cols-12 {
  grid-template-columns: repeat(12, 1fr);
}

.rows-12 {
  grid-template-rows: repeat(12, 1fr);
}

.col-span-12 {
  grid-column: span 12/span 12;
}

.row-span-12 {
  grid-row: span 12/span 12;
}

.col-start-12 {
  grid-column-start: 12;
}

.row-start-12 {
  grid-row-start: 12;
}

.col-span-full {
  grid-column: 1/-1;
}

.row-span-full {
  grid-row: 1/-1;
}

.gap-0 {
  gap: 0px;
}

.gap-1 {
  gap: 5px;
}

.gap-2 {
  gap: 10px;
}

.gap-3 {
  gap: 15px;
}

.gap-4 {
  gap: 20px;
}

.gap-5 {
  gap: 25px;
}

.gap-6 {
  gap: 30px;
}

.gap-7 {
  gap: 35px;
}

.gap-8 {
  gap: 40px;
}

.auto-rows-0 {
  grid-auto-rows: 0;
}

.auto-cols-0 {
  grid-auto-columns: 0;
}

.auto-rows-xxs {
  grid-auto-rows: 0.25rem;
}

.auto-cols-xxs {
  grid-auto-columns: 0.25rem;
}

.auto-rows-xs {
  grid-auto-rows: 0.5rem;
}

.auto-cols-xs {
  grid-auto-columns: 0.5rem;
}

.auto-rows-s {
  grid-auto-rows: 1rem;
}

.auto-cols-s {
  grid-auto-columns: 1rem;
}

.auto-rows-m {
  grid-auto-rows: 1.2rem;
}

.auto-cols-m {
  grid-auto-columns: 1.2rem;
}

.auto-rows-l {
  grid-auto-rows: 2.5rem;
}

.auto-cols-l {
  grid-auto-columns: 2.5rem;
}

.auto-rows-lg {
  grid-auto-rows: 3.7rem;
}

.auto-cols-lg {
  grid-auto-columns: 3.7rem;
}

.auto-rows-xl {
  grid-auto-rows: 5rem;
}

.auto-cols-xl {
  grid-auto-columns: 5rem;
}

.auto-rows-xxl {
  grid-auto-rows: 7rem;
}

.auto-cols-xxl {
  grid-auto-columns: 7rem;
}

@media only screen and (min-width: 576px) {
  .sm\:grid-dense {
    grid-auto-flow: row dense;
  }
  .sm\:has-cols-1 {
    grid-template-columns: repeat(1, 1fr);
  }
  .sm\:rows-1 {
    grid-template-rows: repeat(1, 1fr);
  }
  .sm\:col-span-1 {
    grid-column: span 1/span 1;
  }
  .sm\:row-span-1 {
    grid-row: span 1/span 1;
  }
  .sm\:col-start-1 {
    grid-column-start: 1;
  }
  .sm\:row-start-1 {
    grid-row-start: 1;
  }
  .sm\:has-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .sm\:rows-2 {
    grid-template-rows: repeat(2, 1fr);
  }
  .sm\:col-span-2 {
    grid-column: span 2/span 2;
  }
  .sm\:row-span-2 {
    grid-row: span 2/span 2;
  }
  .sm\:col-start-2 {
    grid-column-start: 2;
  }
  .sm\:row-start-2 {
    grid-row-start: 2;
  }
  .sm\:has-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .sm\:rows-3 {
    grid-template-rows: repeat(3, 1fr);
  }
  .sm\:col-span-3 {
    grid-column: span 3/span 3;
  }
  .sm\:row-span-3 {
    grid-row: span 3/span 3;
  }
  .sm\:col-start-3 {
    grid-column-start: 3;
  }
  .sm\:row-start-3 {
    grid-row-start: 3;
  }
  .sm\:has-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .sm\:rows-4 {
    grid-template-rows: repeat(4, 1fr);
  }
  .sm\:col-span-4 {
    grid-column: span 4/span 4;
  }
  .sm\:row-span-4 {
    grid-row: span 4/span 4;
  }
  .sm\:col-start-4 {
    grid-column-start: 4;
  }
  .sm\:row-start-4 {
    grid-row-start: 4;
  }
  .sm\:has-cols-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .sm\:rows-5 {
    grid-template-rows: repeat(5, 1fr);
  }
  .sm\:col-span-5 {
    grid-column: span 5/span 5;
  }
  .sm\:row-span-5 {
    grid-row: span 5/span 5;
  }
  .sm\:col-start-5 {
    grid-column-start: 5;
  }
  .sm\:row-start-5 {
    grid-row-start: 5;
  }
  .sm\:has-cols-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  .sm\:rows-6 {
    grid-template-rows: repeat(6, 1fr);
  }
  .sm\:col-span-6 {
    grid-column: span 6/span 6;
  }
  .sm\:row-span-6 {
    grid-row: span 6/span 6;
  }
  .sm\:col-start-6 {
    grid-column-start: 6;
  }
  .sm\:row-start-6 {
    grid-row-start: 6;
  }
  .sm\:has-cols-7 {
    grid-template-columns: repeat(7, 1fr);
  }
  .sm\:rows-7 {
    grid-template-rows: repeat(7, 1fr);
  }
  .sm\:col-span-7 {
    grid-column: span 7/span 7;
  }
  .sm\:row-span-7 {
    grid-row: span 7/span 7;
  }
  .sm\:col-start-7 {
    grid-column-start: 7;
  }
  .sm\:row-start-7 {
    grid-row-start: 7;
  }
  .sm\:has-cols-8 {
    grid-template-columns: repeat(8, 1fr);
  }
  .sm\:rows-8 {
    grid-template-rows: repeat(8, 1fr);
  }
  .sm\:col-span-8 {
    grid-column: span 8/span 8;
  }
  .sm\:row-span-8 {
    grid-row: span 8/span 8;
  }
  .sm\:col-start-8 {
    grid-column-start: 8;
  }
  .sm\:row-start-8 {
    grid-row-start: 8;
  }
  .sm\:has-cols-9 {
    grid-template-columns: repeat(9, 1fr);
  }
  .sm\:rows-9 {
    grid-template-rows: repeat(9, 1fr);
  }
  .sm\:col-span-9 {
    grid-column: span 9/span 9;
  }
  .sm\:row-span-9 {
    grid-row: span 9/span 9;
  }
  .sm\:col-start-9 {
    grid-column-start: 9;
  }
  .sm\:row-start-9 {
    grid-row-start: 9;
  }
  .sm\:has-cols-10 {
    grid-template-columns: repeat(10, 1fr);
  }
  .sm\:rows-10 {
    grid-template-rows: repeat(10, 1fr);
  }
  .sm\:col-span-10 {
    grid-column: span 10/span 10;
  }
  .sm\:row-span-10 {
    grid-row: span 10/span 10;
  }
  .sm\:col-start-10 {
    grid-column-start: 10;
  }
  .sm\:row-start-10 {
    grid-row-start: 10;
  }
  .sm\:has-cols-11 {
    grid-template-columns: repeat(11, 1fr);
  }
  .sm\:rows-11 {
    grid-template-rows: repeat(11, 1fr);
  }
  .sm\:col-span-11 {
    grid-column: span 11/span 11;
  }
  .sm\:row-span-11 {
    grid-row: span 11/span 11;
  }
  .sm\:col-start-11 {
    grid-column-start: 11;
  }
  .sm\:row-start-11 {
    grid-row-start: 11;
  }
  .sm\:has-cols-12 {
    grid-template-columns: repeat(12, 1fr);
  }
  .sm\:rows-12 {
    grid-template-rows: repeat(12, 1fr);
  }
  .sm\:col-span-12 {
    grid-column: span 12/span 12;
  }
  .sm\:row-span-12 {
    grid-row: span 12/span 12;
  }
  .sm\:col-start-12 {
    grid-column-start: 12;
  }
  .sm\:row-start-12 {
    grid-row-start: 12;
  }
  .sm\:col-span-full {
    grid-column: 1/-1;
  }
  .sm\:row-span-full {
    grid-row: 1/-1;
  }
  .sm\:gap-0 {
    gap: 0px;
  }
  .sm\:gap-1 {
    gap: 5px;
  }
  .sm\:gap-2 {
    gap: 10px;
  }
  .sm\:gap-3 {
    gap: 15px;
  }
  .sm\:gap-4 {
    gap: 20px;
  }
  .sm\:gap-5 {
    gap: 25px;
  }
  .sm\:gap-6 {
    gap: 30px;
  }
  .sm\:gap-7 {
    gap: 35px;
  }
  .sm\:gap-8 {
    gap: 40px;
  }
}
@media only screen and (min-width: 768px) {
  .md\:grid-dense {
    grid-auto-flow: row dense;
  }
  .md\:has-cols-1 {
    grid-template-columns: repeat(1, 1fr);
  }
  .md\:rows-1 {
    grid-template-rows: repeat(1, 1fr);
  }
  .md\:col-span-1 {
    grid-column: span 1/span 1;
  }
  .md\:row-span-1 {
    grid-row: span 1/span 1;
  }
  .md\:col-start-1 {
    grid-column-start: 1;
  }
  .md\:row-start-1 {
    grid-row-start: 1;
  }
  .md\:has-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .md\:rows-2 {
    grid-template-rows: repeat(2, 1fr);
  }
  .md\:col-span-2 {
    grid-column: span 2/span 2;
  }
  .md\:row-span-2 {
    grid-row: span 2/span 2;
  }
  .md\:col-start-2 {
    grid-column-start: 2;
  }
  .md\:row-start-2 {
    grid-row-start: 2;
  }
  .md\:has-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .md\:rows-3 {
    grid-template-rows: repeat(3, 1fr);
  }
  .md\:col-span-3 {
    grid-column: span 3/span 3;
  }
  .md\:row-span-3 {
    grid-row: span 3/span 3;
  }
  .md\:col-start-3 {
    grid-column-start: 3;
  }
  .md\:row-start-3 {
    grid-row-start: 3;
  }
  .md\:has-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .md\:rows-4 {
    grid-template-rows: repeat(4, 1fr);
  }
  .md\:col-span-4 {
    grid-column: span 4/span 4;
  }
  .md\:row-span-4 {
    grid-row: span 4/span 4;
  }
  .md\:col-start-4 {
    grid-column-start: 4;
  }
  .md\:row-start-4 {
    grid-row-start: 4;
  }
  .md\:has-cols-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .md\:rows-5 {
    grid-template-rows: repeat(5, 1fr);
  }
  .md\:col-span-5 {
    grid-column: span 5/span 5;
  }
  .md\:row-span-5 {
    grid-row: span 5/span 5;
  }
  .md\:col-start-5 {
    grid-column-start: 5;
  }
  .md\:row-start-5 {
    grid-row-start: 5;
  }
  .md\:has-cols-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  .md\:rows-6 {
    grid-template-rows: repeat(6, 1fr);
  }
  .md\:col-span-6 {
    grid-column: span 6/span 6;
  }
  .md\:row-span-6 {
    grid-row: span 6/span 6;
  }
  .md\:col-start-6 {
    grid-column-start: 6;
  }
  .md\:row-start-6 {
    grid-row-start: 6;
  }
  .md\:has-cols-7 {
    grid-template-columns: repeat(7, 1fr);
  }
  .md\:rows-7 {
    grid-template-rows: repeat(7, 1fr);
  }
  .md\:col-span-7 {
    grid-column: span 7/span 7;
  }
  .md\:row-span-7 {
    grid-row: span 7/span 7;
  }
  .md\:col-start-7 {
    grid-column-start: 7;
  }
  .md\:row-start-7 {
    grid-row-start: 7;
  }
  .md\:has-cols-8 {
    grid-template-columns: repeat(8, 1fr);
  }
  .md\:rows-8 {
    grid-template-rows: repeat(8, 1fr);
  }
  .md\:col-span-8 {
    grid-column: span 8/span 8;
  }
  .md\:row-span-8 {
    grid-row: span 8/span 8;
  }
  .md\:col-start-8 {
    grid-column-start: 8;
  }
  .md\:row-start-8 {
    grid-row-start: 8;
  }
  .md\:has-cols-9 {
    grid-template-columns: repeat(9, 1fr);
  }
  .md\:rows-9 {
    grid-template-rows: repeat(9, 1fr);
  }
  .md\:col-span-9 {
    grid-column: span 9/span 9;
  }
  .md\:row-span-9 {
    grid-row: span 9/span 9;
  }
  .md\:col-start-9 {
    grid-column-start: 9;
  }
  .md\:row-start-9 {
    grid-row-start: 9;
  }
  .md\:has-cols-10 {
    grid-template-columns: repeat(10, 1fr);
  }
  .md\:rows-10 {
    grid-template-rows: repeat(10, 1fr);
  }
  .md\:col-span-10 {
    grid-column: span 10/span 10;
  }
  .md\:row-span-10 {
    grid-row: span 10/span 10;
  }
  .md\:col-start-10 {
    grid-column-start: 10;
  }
  .md\:row-start-10 {
    grid-row-start: 10;
  }
  .md\:has-cols-11 {
    grid-template-columns: repeat(11, 1fr);
  }
  .md\:rows-11 {
    grid-template-rows: repeat(11, 1fr);
  }
  .md\:col-span-11 {
    grid-column: span 11/span 11;
  }
  .md\:row-span-11 {
    grid-row: span 11/span 11;
  }
  .md\:col-start-11 {
    grid-column-start: 11;
  }
  .md\:row-start-11 {
    grid-row-start: 11;
  }
  .md\:has-cols-12 {
    grid-template-columns: repeat(12, 1fr);
  }
  .md\:rows-12 {
    grid-template-rows: repeat(12, 1fr);
  }
  .md\:col-span-12 {
    grid-column: span 12/span 12;
  }
  .md\:row-span-12 {
    grid-row: span 12/span 12;
  }
  .md\:col-start-12 {
    grid-column-start: 12;
  }
  .md\:row-start-12 {
    grid-row-start: 12;
  }
  .md\:col-span-full {
    grid-column: 1/-1;
  }
  .md\:row-span-full {
    grid-row: 1/-1;
  }
  .md\:gap-0 {
    gap: 0px;
  }
  .md\:gap-1 {
    gap: 5px;
  }
  .md\:gap-2 {
    gap: 10px;
  }
  .md\:gap-3 {
    gap: 15px;
  }
  .md\:gap-4 {
    gap: 20px;
  }
  .md\:gap-5 {
    gap: 25px;
  }
  .md\:gap-6 {
    gap: 30px;
  }
  .md\:gap-7 {
    gap: 35px;
  }
  .md\:gap-8 {
    gap: 40px;
  }
}
@media only screen and (min-width: 992px) {
  .lg\:grid-dense {
    grid-auto-flow: row dense;
  }
  .lg\:has-cols-1 {
    grid-template-columns: repeat(1, 1fr);
  }
  .lg\:rows-1 {
    grid-template-rows: repeat(1, 1fr);
  }
  .lg\:col-span-1 {
    grid-column: span 1/span 1;
  }
  .lg\:row-span-1 {
    grid-row: span 1/span 1;
  }
  .lg\:col-start-1 {
    grid-column-start: 1;
  }
  .lg\:row-start-1 {
    grid-row-start: 1;
  }
  .lg\:has-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .lg\:rows-2 {
    grid-template-rows: repeat(2, 1fr);
  }
  .lg\:col-span-2 {
    grid-column: span 2/span 2;
  }
  .lg\:row-span-2 {
    grid-row: span 2/span 2;
  }
  .lg\:col-start-2 {
    grid-column-start: 2;
  }
  .lg\:row-start-2 {
    grid-row-start: 2;
  }
  .lg\:has-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .lg\:rows-3 {
    grid-template-rows: repeat(3, 1fr);
  }
  .lg\:col-span-3 {
    grid-column: span 3/span 3;
  }
  .lg\:row-span-3 {
    grid-row: span 3/span 3;
  }
  .lg\:col-start-3 {
    grid-column-start: 3;
  }
  .lg\:row-start-3 {
    grid-row-start: 3;
  }
  .lg\:has-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .lg\:rows-4 {
    grid-template-rows: repeat(4, 1fr);
  }
  .lg\:col-span-4 {
    grid-column: span 4/span 4;
  }
  .lg\:row-span-4 {
    grid-row: span 4/span 4;
  }
  .lg\:col-start-4 {
    grid-column-start: 4;
  }
  .lg\:row-start-4 {
    grid-row-start: 4;
  }
  .lg\:has-cols-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .lg\:rows-5 {
    grid-template-rows: repeat(5, 1fr);
  }
  .lg\:col-span-5 {
    grid-column: span 5/span 5;
  }
  .lg\:row-span-5 {
    grid-row: span 5/span 5;
  }
  .lg\:col-start-5 {
    grid-column-start: 5;
  }
  .lg\:row-start-5 {
    grid-row-start: 5;
  }
  .lg\:has-cols-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  .lg\:rows-6 {
    grid-template-rows: repeat(6, 1fr);
  }
  .lg\:col-span-6 {
    grid-column: span 6/span 6;
  }
  .lg\:row-span-6 {
    grid-row: span 6/span 6;
  }
  .lg\:col-start-6 {
    grid-column-start: 6;
  }
  .lg\:row-start-6 {
    grid-row-start: 6;
  }
  .lg\:has-cols-7 {
    grid-template-columns: repeat(7, 1fr);
  }
  .lg\:rows-7 {
    grid-template-rows: repeat(7, 1fr);
  }
  .lg\:col-span-7 {
    grid-column: span 7/span 7;
  }
  .lg\:row-span-7 {
    grid-row: span 7/span 7;
  }
  .lg\:col-start-7 {
    grid-column-start: 7;
  }
  .lg\:row-start-7 {
    grid-row-start: 7;
  }
  .lg\:has-cols-8 {
    grid-template-columns: repeat(8, 1fr);
  }
  .lg\:rows-8 {
    grid-template-rows: repeat(8, 1fr);
  }
  .lg\:col-span-8 {
    grid-column: span 8/span 8;
  }
  .lg\:row-span-8 {
    grid-row: span 8/span 8;
  }
  .lg\:col-start-8 {
    grid-column-start: 8;
  }
  .lg\:row-start-8 {
    grid-row-start: 8;
  }
  .lg\:has-cols-9 {
    grid-template-columns: repeat(9, 1fr);
  }
  .lg\:rows-9 {
    grid-template-rows: repeat(9, 1fr);
  }
  .lg\:col-span-9 {
    grid-column: span 9/span 9;
  }
  .lg\:row-span-9 {
    grid-row: span 9/span 9;
  }
  .lg\:col-start-9 {
    grid-column-start: 9;
  }
  .lg\:row-start-9 {
    grid-row-start: 9;
  }
  .lg\:has-cols-10 {
    grid-template-columns: repeat(10, 1fr);
  }
  .lg\:rows-10 {
    grid-template-rows: repeat(10, 1fr);
  }
  .lg\:col-span-10 {
    grid-column: span 10/span 10;
  }
  .lg\:row-span-10 {
    grid-row: span 10/span 10;
  }
  .lg\:col-start-10 {
    grid-column-start: 10;
  }
  .lg\:row-start-10 {
    grid-row-start: 10;
  }
  .lg\:has-cols-11 {
    grid-template-columns: repeat(11, 1fr);
  }
  .lg\:rows-11 {
    grid-template-rows: repeat(11, 1fr);
  }
  .lg\:col-span-11 {
    grid-column: span 11/span 11;
  }
  .lg\:row-span-11 {
    grid-row: span 11/span 11;
  }
  .lg\:col-start-11 {
    grid-column-start: 11;
  }
  .lg\:row-start-11 {
    grid-row-start: 11;
  }
  .lg\:has-cols-12 {
    grid-template-columns: repeat(12, 1fr);
  }
  .lg\:rows-12 {
    grid-template-rows: repeat(12, 1fr);
  }
  .lg\:col-span-12 {
    grid-column: span 12/span 12;
  }
  .lg\:row-span-12 {
    grid-row: span 12/span 12;
  }
  .lg\:col-start-12 {
    grid-column-start: 12;
  }
  .lg\:row-start-12 {
    grid-row-start: 12;
  }
  .lg\:col-span-full {
    grid-column: 1/-1;
  }
  .lg\:row-span-full {
    grid-row: 1/-1;
  }
  .lg\:gap-0 {
    gap: 0px;
  }
  .lg\:gap-1 {
    gap: 5px;
  }
  .lg\:gap-2 {
    gap: 10px;
  }
  .lg\:gap-3 {
    gap: 15px;
  }
  .lg\:gap-4 {
    gap: 20px;
  }
  .lg\:gap-5 {
    gap: 25px;
  }
  .lg\:gap-6 {
    gap: 30px;
  }
  .lg\:gap-7 {
    gap: 35px;
  }
  .lg\:gap-8 {
    gap: 40px;
  }
}
@media only screen and (min-width: 1200px) {
  .xl\:grid-dense {
    grid-auto-flow: row dense;
  }
  .xl\:has-cols-1 {
    grid-template-columns: repeat(1, 1fr);
  }
  .xl\:rows-1 {
    grid-template-rows: repeat(1, 1fr);
  }
  .xl\:col-span-1 {
    grid-column: span 1/span 1;
  }
  .xl\:row-span-1 {
    grid-row: span 1/span 1;
  }
  .xl\:col-start-1 {
    grid-column-start: 1;
  }
  .xl\:row-start-1 {
    grid-row-start: 1;
  }
  .xl\:has-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .xl\:rows-2 {
    grid-template-rows: repeat(2, 1fr);
  }
  .xl\:col-span-2 {
    grid-column: span 2/span 2;
  }
  .xl\:row-span-2 {
    grid-row: span 2/span 2;
  }
  .xl\:col-start-2 {
    grid-column-start: 2;
  }
  .xl\:row-start-2 {
    grid-row-start: 2;
  }
  .xl\:has-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .xl\:rows-3 {
    grid-template-rows: repeat(3, 1fr);
  }
  .xl\:col-span-3 {
    grid-column: span 3/span 3;
  }
  .xl\:row-span-3 {
    grid-row: span 3/span 3;
  }
  .xl\:col-start-3 {
    grid-column-start: 3;
  }
  .xl\:row-start-3 {
    grid-row-start: 3;
  }
  .xl\:has-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .xl\:rows-4 {
    grid-template-rows: repeat(4, 1fr);
  }
  .xl\:col-span-4 {
    grid-column: span 4/span 4;
  }
  .xl\:row-span-4 {
    grid-row: span 4/span 4;
  }
  .xl\:col-start-4 {
    grid-column-start: 4;
  }
  .xl\:row-start-4 {
    grid-row-start: 4;
  }
  .xl\:has-cols-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .xl\:rows-5 {
    grid-template-rows: repeat(5, 1fr);
  }
  .xl\:col-span-5 {
    grid-column: span 5/span 5;
  }
  .xl\:row-span-5 {
    grid-row: span 5/span 5;
  }
  .xl\:col-start-5 {
    grid-column-start: 5;
  }
  .xl\:row-start-5 {
    grid-row-start: 5;
  }
  .xl\:has-cols-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  .xl\:rows-6 {
    grid-template-rows: repeat(6, 1fr);
  }
  .xl\:col-span-6 {
    grid-column: span 6/span 6;
  }
  .xl\:row-span-6 {
    grid-row: span 6/span 6;
  }
  .xl\:col-start-6 {
    grid-column-start: 6;
  }
  .xl\:row-start-6 {
    grid-row-start: 6;
  }
  .xl\:has-cols-7 {
    grid-template-columns: repeat(7, 1fr);
  }
  .xl\:rows-7 {
    grid-template-rows: repeat(7, 1fr);
  }
  .xl\:col-span-7 {
    grid-column: span 7/span 7;
  }
  .xl\:row-span-7 {
    grid-row: span 7/span 7;
  }
  .xl\:col-start-7 {
    grid-column-start: 7;
  }
  .xl\:row-start-7 {
    grid-row-start: 7;
  }
  .xl\:has-cols-8 {
    grid-template-columns: repeat(8, 1fr);
  }
  .xl\:rows-8 {
    grid-template-rows: repeat(8, 1fr);
  }
  .xl\:col-span-8 {
    grid-column: span 8/span 8;
  }
  .xl\:row-span-8 {
    grid-row: span 8/span 8;
  }
  .xl\:col-start-8 {
    grid-column-start: 8;
  }
  .xl\:row-start-8 {
    grid-row-start: 8;
  }
  .xl\:has-cols-9 {
    grid-template-columns: repeat(9, 1fr);
  }
  .xl\:rows-9 {
    grid-template-rows: repeat(9, 1fr);
  }
  .xl\:col-span-9 {
    grid-column: span 9/span 9;
  }
  .xl\:row-span-9 {
    grid-row: span 9/span 9;
  }
  .xl\:col-start-9 {
    grid-column-start: 9;
  }
  .xl\:row-start-9 {
    grid-row-start: 9;
  }
  .xl\:has-cols-10 {
    grid-template-columns: repeat(10, 1fr);
  }
  .xl\:rows-10 {
    grid-template-rows: repeat(10, 1fr);
  }
  .xl\:col-span-10 {
    grid-column: span 10/span 10;
  }
  .xl\:row-span-10 {
    grid-row: span 10/span 10;
  }
  .xl\:col-start-10 {
    grid-column-start: 10;
  }
  .xl\:row-start-10 {
    grid-row-start: 10;
  }
  .xl\:has-cols-11 {
    grid-template-columns: repeat(11, 1fr);
  }
  .xl\:rows-11 {
    grid-template-rows: repeat(11, 1fr);
  }
  .xl\:col-span-11 {
    grid-column: span 11/span 11;
  }
  .xl\:row-span-11 {
    grid-row: span 11/span 11;
  }
  .xl\:col-start-11 {
    grid-column-start: 11;
  }
  .xl\:row-start-11 {
    grid-row-start: 11;
  }
  .xl\:has-cols-12 {
    grid-template-columns: repeat(12, 1fr);
  }
  .xl\:rows-12 {
    grid-template-rows: repeat(12, 1fr);
  }
  .xl\:col-span-12 {
    grid-column: span 12/span 12;
  }
  .xl\:row-span-12 {
    grid-row: span 12/span 12;
  }
  .xl\:col-start-12 {
    grid-column-start: 12;
  }
  .xl\:row-start-12 {
    grid-row-start: 12;
  }
  .xl\:col-span-full {
    grid-column: 1/-1;
  }
  .xl\:row-span-full {
    grid-row: 1/-1;
  }
  .xl\:gap-0 {
    gap: 0px;
  }
  .xl\:gap-1 {
    gap: 5px;
  }
  .xl\:gap-2 {
    gap: 10px;
  }
  .xl\:gap-3 {
    gap: 15px;
  }
  .xl\:gap-4 {
    gap: 20px;
  }
  .xl\:gap-5 {
    gap: 25px;
  }
  .xl\:gap-6 {
    gap: 30px;
  }
  .xl\:gap-7 {
    gap: 35px;
  }
  .xl\:gap-8 {
    gap: 40px;
  }
}
@media only screen and (min-width: 1440px) {
  .xxl\:grid-dense {
    grid-auto-flow: row dense;
  }
  .xxl\:has-cols-1 {
    grid-template-columns: repeat(1, 1fr);
  }
  .xxl\:rows-1 {
    grid-template-rows: repeat(1, 1fr);
  }
  .xxl\:col-span-1 {
    grid-column: span 1/span 1;
  }
  .xxl\:row-span-1 {
    grid-row: span 1/span 1;
  }
  .xxl\:col-start-1 {
    grid-column-start: 1;
  }
  .xxl\:row-start-1 {
    grid-row-start: 1;
  }
  .xxl\:has-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .xxl\:rows-2 {
    grid-template-rows: repeat(2, 1fr);
  }
  .xxl\:col-span-2 {
    grid-column: span 2/span 2;
  }
  .xxl\:row-span-2 {
    grid-row: span 2/span 2;
  }
  .xxl\:col-start-2 {
    grid-column-start: 2;
  }
  .xxl\:row-start-2 {
    grid-row-start: 2;
  }
  .xxl\:has-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .xxl\:rows-3 {
    grid-template-rows: repeat(3, 1fr);
  }
  .xxl\:col-span-3 {
    grid-column: span 3/span 3;
  }
  .xxl\:row-span-3 {
    grid-row: span 3/span 3;
  }
  .xxl\:col-start-3 {
    grid-column-start: 3;
  }
  .xxl\:row-start-3 {
    grid-row-start: 3;
  }
  .xxl\:has-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .xxl\:rows-4 {
    grid-template-rows: repeat(4, 1fr);
  }
  .xxl\:col-span-4 {
    grid-column: span 4/span 4;
  }
  .xxl\:row-span-4 {
    grid-row: span 4/span 4;
  }
  .xxl\:col-start-4 {
    grid-column-start: 4;
  }
  .xxl\:row-start-4 {
    grid-row-start: 4;
  }
  .xxl\:has-cols-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .xxl\:rows-5 {
    grid-template-rows: repeat(5, 1fr);
  }
  .xxl\:col-span-5 {
    grid-column: span 5/span 5;
  }
  .xxl\:row-span-5 {
    grid-row: span 5/span 5;
  }
  .xxl\:col-start-5 {
    grid-column-start: 5;
  }
  .xxl\:row-start-5 {
    grid-row-start: 5;
  }
  .xxl\:has-cols-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  .xxl\:rows-6 {
    grid-template-rows: repeat(6, 1fr);
  }
  .xxl\:col-span-6 {
    grid-column: span 6/span 6;
  }
  .xxl\:row-span-6 {
    grid-row: span 6/span 6;
  }
  .xxl\:col-start-6 {
    grid-column-start: 6;
  }
  .xxl\:row-start-6 {
    grid-row-start: 6;
  }
  .xxl\:has-cols-7 {
    grid-template-columns: repeat(7, 1fr);
  }
  .xxl\:rows-7 {
    grid-template-rows: repeat(7, 1fr);
  }
  .xxl\:col-span-7 {
    grid-column: span 7/span 7;
  }
  .xxl\:row-span-7 {
    grid-row: span 7/span 7;
  }
  .xxl\:col-start-7 {
    grid-column-start: 7;
  }
  .xxl\:row-start-7 {
    grid-row-start: 7;
  }
  .xxl\:has-cols-8 {
    grid-template-columns: repeat(8, 1fr);
  }
  .xxl\:rows-8 {
    grid-template-rows: repeat(8, 1fr);
  }
  .xxl\:col-span-8 {
    grid-column: span 8/span 8;
  }
  .xxl\:row-span-8 {
    grid-row: span 8/span 8;
  }
  .xxl\:col-start-8 {
    grid-column-start: 8;
  }
  .xxl\:row-start-8 {
    grid-row-start: 8;
  }
  .xxl\:has-cols-9 {
    grid-template-columns: repeat(9, 1fr);
  }
  .xxl\:rows-9 {
    grid-template-rows: repeat(9, 1fr);
  }
  .xxl\:col-span-9 {
    grid-column: span 9/span 9;
  }
  .xxl\:row-span-9 {
    grid-row: span 9/span 9;
  }
  .xxl\:col-start-9 {
    grid-column-start: 9;
  }
  .xxl\:row-start-9 {
    grid-row-start: 9;
  }
  .xxl\:has-cols-10 {
    grid-template-columns: repeat(10, 1fr);
  }
  .xxl\:rows-10 {
    grid-template-rows: repeat(10, 1fr);
  }
  .xxl\:col-span-10 {
    grid-column: span 10/span 10;
  }
  .xxl\:row-span-10 {
    grid-row: span 10/span 10;
  }
  .xxl\:col-start-10 {
    grid-column-start: 10;
  }
  .xxl\:row-start-10 {
    grid-row-start: 10;
  }
  .xxl\:has-cols-11 {
    grid-template-columns: repeat(11, 1fr);
  }
  .xxl\:rows-11 {
    grid-template-rows: repeat(11, 1fr);
  }
  .xxl\:col-span-11 {
    grid-column: span 11/span 11;
  }
  .xxl\:row-span-11 {
    grid-row: span 11/span 11;
  }
  .xxl\:col-start-11 {
    grid-column-start: 11;
  }
  .xxl\:row-start-11 {
    grid-row-start: 11;
  }
  .xxl\:has-cols-12 {
    grid-template-columns: repeat(12, 1fr);
  }
  .xxl\:rows-12 {
    grid-template-rows: repeat(12, 1fr);
  }
  .xxl\:col-span-12 {
    grid-column: span 12/span 12;
  }
  .xxl\:row-span-12 {
    grid-row: span 12/span 12;
  }
  .xxl\:col-start-12 {
    grid-column-start: 12;
  }
  .xxl\:row-start-12 {
    grid-row-start: 12;
  }
  .xxl\:col-span-full {
    grid-column: 1/-1;
  }
  .xxl\:row-span-full {
    grid-row: 1/-1;
  }
  .xxl\:gap-0 {
    gap: 0px;
  }
  .xxl\:gap-1 {
    gap: 5px;
  }
  .xxl\:gap-2 {
    gap: 10px;
  }
  .xxl\:gap-3 {
    gap: 15px;
  }
  .xxl\:gap-4 {
    gap: 20px;
  }
  .xxl\:gap-5 {
    gap: 25px;
  }
  .xxl\:gap-6 {
    gap: 30px;
  }
  .xxl\:gap-7 {
    gap: 35px;
  }
  .xxl\:gap-8 {
    gap: 40px;
  }
}
.gap-0 {
  gap: 0 !important;
}

.row-gap-0 {
  row-gap: 0 !important;
}

.col-gap-0 {
  -webkit-column-gap: 0 !important;
     -moz-column-gap: 0 !important;
          column-gap: 0 !important;
}

.gap-1 {
  gap: 0.25rem !important;
}

.row-gap-1 {
  row-gap: 0.25rem !important;
}

.col-gap-1 {
  -webkit-column-gap: 0.25rem !important;
     -moz-column-gap: 0.25rem !important;
          column-gap: 0.25rem !important;
}

.gap-2 {
  gap: 0.5rem !important;
}

.row-gap-2 {
  row-gap: 0.5rem !important;
}

.col-gap-2 {
  -webkit-column-gap: 0.5rem !important;
     -moz-column-gap: 0.5rem !important;
          column-gap: 0.5rem !important;
}

.gap-3 {
  gap: 0.75rem !important;
}

.row-gap-3 {
  row-gap: 0.75rem !important;
}

.col-gap-3 {
  -webkit-column-gap: 0.75rem !important;
     -moz-column-gap: 0.75rem !important;
          column-gap: 0.75rem !important;
}

.gap-4 {
  gap: 1rem !important;
}

.row-gap-4 {
  row-gap: 1rem !important;
}

.col-gap-4 {
  -webkit-column-gap: 1rem !important;
     -moz-column-gap: 1rem !important;
          column-gap: 1rem !important;
}

.gap-5 {
  gap: 1.25rem !important;
}

.row-gap-5 {
  row-gap: 1.25rem !important;
}

.col-gap-5 {
  -webkit-column-gap: 1.25rem !important;
     -moz-column-gap: 1.25rem !important;
          column-gap: 1.25rem !important;
}

.gap-6 {
  gap: 1.5rem !important;
}

.row-gap-6 {
  row-gap: 1.5rem !important;
}

.col-gap-6 {
  -webkit-column-gap: 1.5rem !important;
     -moz-column-gap: 1.5rem !important;
          column-gap: 1.5rem !important;
}

.gap-7 {
  gap: 1.75rem !important;
}

.row-gap-7 {
  row-gap: 1.75rem !important;
}

.col-gap-7 {
  -webkit-column-gap: 1.75rem !important;
     -moz-column-gap: 1.75rem !important;
          column-gap: 1.75rem !important;
}

.gap-8 {
  gap: 2rem !important;
}

.row-gap-8 {
  row-gap: 2rem !important;
}

.col-gap-8 {
  -webkit-column-gap: 2rem !important;
     -moz-column-gap: 2rem !important;
          column-gap: 2rem !important;
}

.gap-9 {
  gap: 2.5rem !important;
}

.row-gap-9 {
  row-gap: 2.5rem !important;
}

.col-gap-9 {
  -webkit-column-gap: 2.5rem !important;
     -moz-column-gap: 2.5rem !important;
          column-gap: 2.5rem !important;
}

.gap-10 {
  gap: 3rem !important;
}

.row-gap-10 {
  row-gap: 3rem !important;
}

.col-gap-10 {
  -webkit-column-gap: 3rem !important;
     -moz-column-gap: 3rem !important;
          column-gap: 3rem !important;
}

@media only screen and (min-width: 576px) {
  .sm\:gap-0,
  .gap-sm-0 {
    gap: 0 !important;
  }
  .sm\:row-gap-0,
  .row-gap-sm-0 {
    row-gap: 0 !important;
  }
  .sm\:col-gap-0,
  .col-gap-sm-0 {
    -webkit-column-gap: 0 !important;
       -moz-column-gap: 0 !important;
            column-gap: 0 !important;
  }
  .sm\:gap-1,
  .gap-sm-1 {
    gap: 0.25rem !important;
  }
  .sm\:row-gap-1,
  .row-gap-sm-1 {
    row-gap: 0.25rem !important;
  }
  .sm\:col-gap-1,
  .col-gap-sm-1 {
    -webkit-column-gap: 0.25rem !important;
       -moz-column-gap: 0.25rem !important;
            column-gap: 0.25rem !important;
  }
  .sm\:gap-2,
  .gap-sm-2 {
    gap: 0.5rem !important;
  }
  .sm\:row-gap-2,
  .row-gap-sm-2 {
    row-gap: 0.5rem !important;
  }
  .sm\:col-gap-2,
  .col-gap-sm-2 {
    -webkit-column-gap: 0.5rem !important;
       -moz-column-gap: 0.5rem !important;
            column-gap: 0.5rem !important;
  }
  .sm\:gap-3,
  .gap-sm-3 {
    gap: 0.75rem !important;
  }
  .sm\:row-gap-3,
  .row-gap-sm-3 {
    row-gap: 0.75rem !important;
  }
  .sm\:col-gap-3,
  .col-gap-sm-3 {
    -webkit-column-gap: 0.75rem !important;
       -moz-column-gap: 0.75rem !important;
            column-gap: 0.75rem !important;
  }
  .sm\:gap-4,
  .gap-sm-4 {
    gap: 1rem !important;
  }
  .sm\:row-gap-4,
  .row-gap-sm-4 {
    row-gap: 1rem !important;
  }
  .sm\:col-gap-4,
  .col-gap-sm-4 {
    -webkit-column-gap: 1rem !important;
       -moz-column-gap: 1rem !important;
            column-gap: 1rem !important;
  }
  .sm\:gap-5,
  .gap-sm-5 {
    gap: 1.25rem !important;
  }
  .sm\:row-gap-5,
  .row-gap-sm-5 {
    row-gap: 1.25rem !important;
  }
  .sm\:col-gap-5,
  .col-gap-sm-5 {
    -webkit-column-gap: 1.25rem !important;
       -moz-column-gap: 1.25rem !important;
            column-gap: 1.25rem !important;
  }
  .sm\:gap-6,
  .gap-sm-6 {
    gap: 1.5rem !important;
  }
  .sm\:row-gap-6,
  .row-gap-sm-6 {
    row-gap: 1.5rem !important;
  }
  .sm\:col-gap-6,
  .col-gap-sm-6 {
    -webkit-column-gap: 1.5rem !important;
       -moz-column-gap: 1.5rem !important;
            column-gap: 1.5rem !important;
  }
  .sm\:gap-7,
  .gap-sm-7 {
    gap: 1.75rem !important;
  }
  .sm\:row-gap-7,
  .row-gap-sm-7 {
    row-gap: 1.75rem !important;
  }
  .sm\:col-gap-7,
  .col-gap-sm-7 {
    -webkit-column-gap: 1.75rem !important;
       -moz-column-gap: 1.75rem !important;
            column-gap: 1.75rem !important;
  }
  .sm\:gap-8,
  .gap-sm-8 {
    gap: 2rem !important;
  }
  .sm\:row-gap-8,
  .row-gap-sm-8 {
    row-gap: 2rem !important;
  }
  .sm\:col-gap-8,
  .col-gap-sm-8 {
    -webkit-column-gap: 2rem !important;
       -moz-column-gap: 2rem !important;
            column-gap: 2rem !important;
  }
  .sm\:gap-9,
  .gap-sm-9 {
    gap: 2.5rem !important;
  }
  .sm\:row-gap-9,
  .row-gap-sm-9 {
    row-gap: 2.5rem !important;
  }
  .sm\:col-gap-9,
  .col-gap-sm-9 {
    -webkit-column-gap: 2.5rem !important;
       -moz-column-gap: 2.5rem !important;
            column-gap: 2.5rem !important;
  }
  .sm\:gap-10,
  .gap-sm-10 {
    gap: 3rem !important;
  }
  .sm\:row-gap-10,
  .row-gap-sm-10 {
    row-gap: 3rem !important;
  }
  .sm\:col-gap-10,
  .col-gap-sm-10 {
    -webkit-column-gap: 3rem !important;
       -moz-column-gap: 3rem !important;
            column-gap: 3rem !important;
  }
}
@media only screen and (min-width: 768px) {
  .md\:gap-0,
  .gap-md-0 {
    gap: 0 !important;
  }
  .md\:row-gap-0,
  .row-gap-md-0 {
    row-gap: 0 !important;
  }
  .md\:col-gap-0,
  .col-gap-md-0 {
    -webkit-column-gap: 0 !important;
       -moz-column-gap: 0 !important;
            column-gap: 0 !important;
  }
  .md\:gap-1,
  .gap-md-1 {
    gap: 0.25rem !important;
  }
  .md\:row-gap-1,
  .row-gap-md-1 {
    row-gap: 0.25rem !important;
  }
  .md\:col-gap-1,
  .col-gap-md-1 {
    -webkit-column-gap: 0.25rem !important;
       -moz-column-gap: 0.25rem !important;
            column-gap: 0.25rem !important;
  }
  .md\:gap-2,
  .gap-md-2 {
    gap: 0.5rem !important;
  }
  .md\:row-gap-2,
  .row-gap-md-2 {
    row-gap: 0.5rem !important;
  }
  .md\:col-gap-2,
  .col-gap-md-2 {
    -webkit-column-gap: 0.5rem !important;
       -moz-column-gap: 0.5rem !important;
            column-gap: 0.5rem !important;
  }
  .md\:gap-3,
  .gap-md-3 {
    gap: 0.75rem !important;
  }
  .md\:row-gap-3,
  .row-gap-md-3 {
    row-gap: 0.75rem !important;
  }
  .md\:col-gap-3,
  .col-gap-md-3 {
    -webkit-column-gap: 0.75rem !important;
       -moz-column-gap: 0.75rem !important;
            column-gap: 0.75rem !important;
  }
  .md\:gap-4,
  .gap-md-4 {
    gap: 1rem !important;
  }
  .md\:row-gap-4,
  .row-gap-md-4 {
    row-gap: 1rem !important;
  }
  .md\:col-gap-4,
  .col-gap-md-4 {
    -webkit-column-gap: 1rem !important;
       -moz-column-gap: 1rem !important;
            column-gap: 1rem !important;
  }
  .md\:gap-5,
  .gap-md-5 {
    gap: 1.25rem !important;
  }
  .md\:row-gap-5,
  .row-gap-md-5 {
    row-gap: 1.25rem !important;
  }
  .md\:col-gap-5,
  .col-gap-md-5 {
    -webkit-column-gap: 1.25rem !important;
       -moz-column-gap: 1.25rem !important;
            column-gap: 1.25rem !important;
  }
  .md\:gap-6,
  .gap-md-6 {
    gap: 1.5rem !important;
  }
  .md\:row-gap-6,
  .row-gap-md-6 {
    row-gap: 1.5rem !important;
  }
  .md\:col-gap-6,
  .col-gap-md-6 {
    -webkit-column-gap: 1.5rem !important;
       -moz-column-gap: 1.5rem !important;
            column-gap: 1.5rem !important;
  }
  .md\:gap-7,
  .gap-md-7 {
    gap: 1.75rem !important;
  }
  .md\:row-gap-7,
  .row-gap-md-7 {
    row-gap: 1.75rem !important;
  }
  .md\:col-gap-7,
  .col-gap-md-7 {
    -webkit-column-gap: 1.75rem !important;
       -moz-column-gap: 1.75rem !important;
            column-gap: 1.75rem !important;
  }
  .md\:gap-8,
  .gap-md-8 {
    gap: 2rem !important;
  }
  .md\:row-gap-8,
  .row-gap-md-8 {
    row-gap: 2rem !important;
  }
  .md\:col-gap-8,
  .col-gap-md-8 {
    -webkit-column-gap: 2rem !important;
       -moz-column-gap: 2rem !important;
            column-gap: 2rem !important;
  }
  .md\:gap-9,
  .gap-md-9 {
    gap: 2.5rem !important;
  }
  .md\:row-gap-9,
  .row-gap-md-9 {
    row-gap: 2.5rem !important;
  }
  .md\:col-gap-9,
  .col-gap-md-9 {
    -webkit-column-gap: 2.5rem !important;
       -moz-column-gap: 2.5rem !important;
            column-gap: 2.5rem !important;
  }
  .md\:gap-10,
  .gap-md-10 {
    gap: 3rem !important;
  }
  .md\:row-gap-10,
  .row-gap-md-10 {
    row-gap: 3rem !important;
  }
  .md\:col-gap-10,
  .col-gap-md-10 {
    -webkit-column-gap: 3rem !important;
       -moz-column-gap: 3rem !important;
            column-gap: 3rem !important;
  }
}
@media only screen and (min-width: 992px) {
  .lg\:gap-0,
  .gap-lg-0 {
    gap: 0 !important;
  }
  .lg\:row-gap-0,
  .row-gap-lg-0 {
    row-gap: 0 !important;
  }
  .lg\:col-gap-0,
  .col-gap-lg-0 {
    -webkit-column-gap: 0 !important;
       -moz-column-gap: 0 !important;
            column-gap: 0 !important;
  }
  .lg\:gap-1,
  .gap-lg-1 {
    gap: 0.25rem !important;
  }
  .lg\:row-gap-1,
  .row-gap-lg-1 {
    row-gap: 0.25rem !important;
  }
  .lg\:col-gap-1,
  .col-gap-lg-1 {
    -webkit-column-gap: 0.25rem !important;
       -moz-column-gap: 0.25rem !important;
            column-gap: 0.25rem !important;
  }
  .lg\:gap-2,
  .gap-lg-2 {
    gap: 0.5rem !important;
  }
  .lg\:row-gap-2,
  .row-gap-lg-2 {
    row-gap: 0.5rem !important;
  }
  .lg\:col-gap-2,
  .col-gap-lg-2 {
    -webkit-column-gap: 0.5rem !important;
       -moz-column-gap: 0.5rem !important;
            column-gap: 0.5rem !important;
  }
  .lg\:gap-3,
  .gap-lg-3 {
    gap: 0.75rem !important;
  }
  .lg\:row-gap-3,
  .row-gap-lg-3 {
    row-gap: 0.75rem !important;
  }
  .lg\:col-gap-3,
  .col-gap-lg-3 {
    -webkit-column-gap: 0.75rem !important;
       -moz-column-gap: 0.75rem !important;
            column-gap: 0.75rem !important;
  }
  .lg\:gap-4,
  .gap-lg-4 {
    gap: 1rem !important;
  }
  .lg\:row-gap-4,
  .row-gap-lg-4 {
    row-gap: 1rem !important;
  }
  .lg\:col-gap-4,
  .col-gap-lg-4 {
    -webkit-column-gap: 1rem !important;
       -moz-column-gap: 1rem !important;
            column-gap: 1rem !important;
  }
  .lg\:gap-5,
  .gap-lg-5 {
    gap: 1.25rem !important;
  }
  .lg\:row-gap-5,
  .row-gap-lg-5 {
    row-gap: 1.25rem !important;
  }
  .lg\:col-gap-5,
  .col-gap-lg-5 {
    -webkit-column-gap: 1.25rem !important;
       -moz-column-gap: 1.25rem !important;
            column-gap: 1.25rem !important;
  }
  .lg\:gap-6,
  .gap-lg-6 {
    gap: 1.5rem !important;
  }
  .lg\:row-gap-6,
  .row-gap-lg-6 {
    row-gap: 1.5rem !important;
  }
  .lg\:col-gap-6,
  .col-gap-lg-6 {
    -webkit-column-gap: 1.5rem !important;
       -moz-column-gap: 1.5rem !important;
            column-gap: 1.5rem !important;
  }
  .lg\:gap-7,
  .gap-lg-7 {
    gap: 1.75rem !important;
  }
  .lg\:row-gap-7,
  .row-gap-lg-7 {
    row-gap: 1.75rem !important;
  }
  .lg\:col-gap-7,
  .col-gap-lg-7 {
    -webkit-column-gap: 1.75rem !important;
       -moz-column-gap: 1.75rem !important;
            column-gap: 1.75rem !important;
  }
  .lg\:gap-8,
  .gap-lg-8 {
    gap: 2rem !important;
  }
  .lg\:row-gap-8,
  .row-gap-lg-8 {
    row-gap: 2rem !important;
  }
  .lg\:col-gap-8,
  .col-gap-lg-8 {
    -webkit-column-gap: 2rem !important;
       -moz-column-gap: 2rem !important;
            column-gap: 2rem !important;
  }
  .lg\:gap-9,
  .gap-lg-9 {
    gap: 2.5rem !important;
  }
  .lg\:row-gap-9,
  .row-gap-lg-9 {
    row-gap: 2.5rem !important;
  }
  .lg\:col-gap-9,
  .col-gap-lg-9 {
    -webkit-column-gap: 2.5rem !important;
       -moz-column-gap: 2.5rem !important;
            column-gap: 2.5rem !important;
  }
  .lg\:gap-10,
  .gap-lg-10 {
    gap: 3rem !important;
  }
  .lg\:row-gap-10,
  .row-gap-lg-10 {
    row-gap: 3rem !important;
  }
  .lg\:col-gap-10,
  .col-gap-lg-10 {
    -webkit-column-gap: 3rem !important;
       -moz-column-gap: 3rem !important;
            column-gap: 3rem !important;
  }
}
@media only screen and (min-width: 1200px) {
  .xl\:gap-0,
  .gap-xl-0 {
    gap: 0 !important;
  }
  .xl\:row-gap-0,
  .row-gap-xl-0 {
    row-gap: 0 !important;
  }
  .xl\:col-gap-0,
  .col-gap-xl-0 {
    -webkit-column-gap: 0 !important;
       -moz-column-gap: 0 !important;
            column-gap: 0 !important;
  }
  .xl\:gap-1,
  .gap-xl-1 {
    gap: 0.25rem !important;
  }
  .xl\:row-gap-1,
  .row-gap-xl-1 {
    row-gap: 0.25rem !important;
  }
  .xl\:col-gap-1,
  .col-gap-xl-1 {
    -webkit-column-gap: 0.25rem !important;
       -moz-column-gap: 0.25rem !important;
            column-gap: 0.25rem !important;
  }
  .xl\:gap-2,
  .gap-xl-2 {
    gap: 0.5rem !important;
  }
  .xl\:row-gap-2,
  .row-gap-xl-2 {
    row-gap: 0.5rem !important;
  }
  .xl\:col-gap-2,
  .col-gap-xl-2 {
    -webkit-column-gap: 0.5rem !important;
       -moz-column-gap: 0.5rem !important;
            column-gap: 0.5rem !important;
  }
  .xl\:gap-3,
  .gap-xl-3 {
    gap: 0.75rem !important;
  }
  .xl\:row-gap-3,
  .row-gap-xl-3 {
    row-gap: 0.75rem !important;
  }
  .xl\:col-gap-3,
  .col-gap-xl-3 {
    -webkit-column-gap: 0.75rem !important;
       -moz-column-gap: 0.75rem !important;
            column-gap: 0.75rem !important;
  }
  .xl\:gap-4,
  .gap-xl-4 {
    gap: 1rem !important;
  }
  .xl\:row-gap-4,
  .row-gap-xl-4 {
    row-gap: 1rem !important;
  }
  .xl\:col-gap-4,
  .col-gap-xl-4 {
    -webkit-column-gap: 1rem !important;
       -moz-column-gap: 1rem !important;
            column-gap: 1rem !important;
  }
  .xl\:gap-5,
  .gap-xl-5 {
    gap: 1.25rem !important;
  }
  .xl\:row-gap-5,
  .row-gap-xl-5 {
    row-gap: 1.25rem !important;
  }
  .xl\:col-gap-5,
  .col-gap-xl-5 {
    -webkit-column-gap: 1.25rem !important;
       -moz-column-gap: 1.25rem !important;
            column-gap: 1.25rem !important;
  }
  .xl\:gap-6,
  .gap-xl-6 {
    gap: 1.5rem !important;
  }
  .xl\:row-gap-6,
  .row-gap-xl-6 {
    row-gap: 1.5rem !important;
  }
  .xl\:col-gap-6,
  .col-gap-xl-6 {
    -webkit-column-gap: 1.5rem !important;
       -moz-column-gap: 1.5rem !important;
            column-gap: 1.5rem !important;
  }
  .xl\:gap-7,
  .gap-xl-7 {
    gap: 1.75rem !important;
  }
  .xl\:row-gap-7,
  .row-gap-xl-7 {
    row-gap: 1.75rem !important;
  }
  .xl\:col-gap-7,
  .col-gap-xl-7 {
    -webkit-column-gap: 1.75rem !important;
       -moz-column-gap: 1.75rem !important;
            column-gap: 1.75rem !important;
  }
  .xl\:gap-8,
  .gap-xl-8 {
    gap: 2rem !important;
  }
  .xl\:row-gap-8,
  .row-gap-xl-8 {
    row-gap: 2rem !important;
  }
  .xl\:col-gap-8,
  .col-gap-xl-8 {
    -webkit-column-gap: 2rem !important;
       -moz-column-gap: 2rem !important;
            column-gap: 2rem !important;
  }
  .xl\:gap-9,
  .gap-xl-9 {
    gap: 2.5rem !important;
  }
  .xl\:row-gap-9,
  .row-gap-xl-9 {
    row-gap: 2.5rem !important;
  }
  .xl\:col-gap-9,
  .col-gap-xl-9 {
    -webkit-column-gap: 2.5rem !important;
       -moz-column-gap: 2.5rem !important;
            column-gap: 2.5rem !important;
  }
  .xl\:gap-10,
  .gap-xl-10 {
    gap: 3rem !important;
  }
  .xl\:row-gap-10,
  .row-gap-xl-10 {
    row-gap: 3rem !important;
  }
  .xl\:col-gap-10,
  .col-gap-xl-10 {
    -webkit-column-gap: 3rem !important;
       -moz-column-gap: 3rem !important;
            column-gap: 3rem !important;
  }
}
@media only screen and (min-width: 1440px) {
  .xxl\:gap-0,
  .gap-xxl-0 {
    gap: 0 !important;
  }
  .xxl\:row-gap-0,
  .row-gap-xxl-0 {
    row-gap: 0 !important;
  }
  .xxl\:col-gap-0,
  .col-gap-xxl-0 {
    -webkit-column-gap: 0 !important;
       -moz-column-gap: 0 !important;
            column-gap: 0 !important;
  }
  .xxl\:gap-1,
  .gap-xxl-1 {
    gap: 0.25rem !important;
  }
  .xxl\:row-gap-1,
  .row-gap-xxl-1 {
    row-gap: 0.25rem !important;
  }
  .xxl\:col-gap-1,
  .col-gap-xxl-1 {
    -webkit-column-gap: 0.25rem !important;
       -moz-column-gap: 0.25rem !important;
            column-gap: 0.25rem !important;
  }
  .xxl\:gap-2,
  .gap-xxl-2 {
    gap: 0.5rem !important;
  }
  .xxl\:row-gap-2,
  .row-gap-xxl-2 {
    row-gap: 0.5rem !important;
  }
  .xxl\:col-gap-2,
  .col-gap-xxl-2 {
    -webkit-column-gap: 0.5rem !important;
       -moz-column-gap: 0.5rem !important;
            column-gap: 0.5rem !important;
  }
  .xxl\:gap-3,
  .gap-xxl-3 {
    gap: 0.75rem !important;
  }
  .xxl\:row-gap-3,
  .row-gap-xxl-3 {
    row-gap: 0.75rem !important;
  }
  .xxl\:col-gap-3,
  .col-gap-xxl-3 {
    -webkit-column-gap: 0.75rem !important;
       -moz-column-gap: 0.75rem !important;
            column-gap: 0.75rem !important;
  }
  .xxl\:gap-4,
  .gap-xxl-4 {
    gap: 1rem !important;
  }
  .xxl\:row-gap-4,
  .row-gap-xxl-4 {
    row-gap: 1rem !important;
  }
  .xxl\:col-gap-4,
  .col-gap-xxl-4 {
    -webkit-column-gap: 1rem !important;
       -moz-column-gap: 1rem !important;
            column-gap: 1rem !important;
  }
  .xxl\:gap-5,
  .gap-xxl-5 {
    gap: 1.25rem !important;
  }
  .xxl\:row-gap-5,
  .row-gap-xxl-5 {
    row-gap: 1.25rem !important;
  }
  .xxl\:col-gap-5,
  .col-gap-xxl-5 {
    -webkit-column-gap: 1.25rem !important;
       -moz-column-gap: 1.25rem !important;
            column-gap: 1.25rem !important;
  }
  .xxl\:gap-6,
  .gap-xxl-6 {
    gap: 1.5rem !important;
  }
  .xxl\:row-gap-6,
  .row-gap-xxl-6 {
    row-gap: 1.5rem !important;
  }
  .xxl\:col-gap-6,
  .col-gap-xxl-6 {
    -webkit-column-gap: 1.5rem !important;
       -moz-column-gap: 1.5rem !important;
            column-gap: 1.5rem !important;
  }
  .xxl\:gap-7,
  .gap-xxl-7 {
    gap: 1.75rem !important;
  }
  .xxl\:row-gap-7,
  .row-gap-xxl-7 {
    row-gap: 1.75rem !important;
  }
  .xxl\:col-gap-7,
  .col-gap-xxl-7 {
    -webkit-column-gap: 1.75rem !important;
       -moz-column-gap: 1.75rem !important;
            column-gap: 1.75rem !important;
  }
  .xxl\:gap-8,
  .gap-xxl-8 {
    gap: 2rem !important;
  }
  .xxl\:row-gap-8,
  .row-gap-xxl-8 {
    row-gap: 2rem !important;
  }
  .xxl\:col-gap-8,
  .col-gap-xxl-8 {
    -webkit-column-gap: 2rem !important;
       -moz-column-gap: 2rem !important;
            column-gap: 2rem !important;
  }
  .xxl\:gap-9,
  .gap-xxl-9 {
    gap: 2.5rem !important;
  }
  .xxl\:row-gap-9,
  .row-gap-xxl-9 {
    row-gap: 2.5rem !important;
  }
  .xxl\:col-gap-9,
  .col-gap-xxl-9 {
    -webkit-column-gap: 2.5rem !important;
       -moz-column-gap: 2.5rem !important;
            column-gap: 2.5rem !important;
  }
  .xxl\:gap-10,
  .gap-xxl-10 {
    gap: 3rem !important;
  }
  .xxl\:row-gap-10,
  .row-gap-xxl-10 {
    row-gap: 3rem !important;
  }
  .xxl\:col-gap-10,
  .col-gap-xxl-10 {
    -webkit-column-gap: 3rem !important;
       -moz-column-gap: 3rem !important;
            column-gap: 3rem !important;
  }
}
.border {
  border: 1px solid var(--framex-base-color-border) !important;
}

.border-top {
  border-top: 1px solid var(--framex-base-color-border) !important;
}

.border-end {
  border-right: 1px solid var(--framex-base-color-border) !important;
}

.border-bottom {
  border-bottom: 1px solid var(--framex-base-color-border) !important;
}

.border-start {
  border-left: 1px solid var(--framex-base-color-border) !important;
}

.border-solid {
  border-style: solid !important;
}

.border-dashed {
  border-style: dashed !important;
}

.border-dotted {
  border-style: dotted !important;
}

.border-none {
  border-style: none !important;
}

.border-0 {
  border-width: 0px !important;
}

.border-1 {
  border-width: 1px !important;
}

.border-2 {
  border-width: 2px !important;
}

.border-3 {
  border-width: 3px !important;
}

.border-4 {
  border-width: 4px !important;
}

.border-5 {
  border-width: 5px !important;
}

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

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

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

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

.border-top-1 {
  border-top-width: 1px !important;
}

.border-right-1 {
  border-right-width: 1px !important;
}

.border-bottom-1 {
  border-bottom-width: 1px !important;
}

.border-left-1 {
  border-left-width: 1px !important;
}

.border-top-2 {
  border-top-width: 2px !important;
}

.border-right-2 {
  border-right-width: 2px !important;
}

.border-bottom-2 {
  border-bottom-width: 2px !important;
}

.border-left-2 {
  border-left-width: 2px !important;
}

.border-top-3 {
  border-top-width: 3px !important;
}

.border-right-3 {
  border-right-width: 3px !important;
}

.border-bottom-3 {
  border-bottom-width: 3px !important;
}

.border-left-3 {
  border-left-width: 3px !important;
}

.border-top-4 {
  border-top-width: 4px !important;
}

.border-right-4 {
  border-right-width: 4px !important;
}

.border-bottom-4 {
  border-bottom-width: 4px !important;
}

.border-left-4 {
  border-left-width: 4px !important;
}

.border-top-5 {
  border-top-width: 5px !important;
}

.border-right-5 {
  border-right-width: 5px !important;
}

.border-bottom-5 {
  border-bottom-width: 5px !important;
}

.border-left-5 {
  border-left-width: 5px !important;
}

.rounded-sm {
  border-radius: 0.4rem !important;
}

.rounded-top-sm {
  border-top-left-radius: 0.4rem !important;
  border-top-right-radius: 0.4rem !important;
}

.rounded-right-sm {
  border-top-right-radius: 0.4rem !important;
  border-bottom-right-radius: 0.4rem !important;
}

.rounded-bottom-sm {
  border-bottom-left-radius: 0.4rem !important;
  border-bottom-right-radius: 0.4rem !important;
}

.rounded-left-sm {
  border-top-left-radius: 0.4rem !important;
  border-bottom-left-radius: 0.4rem !important;
}

.rounded {
  border-radius: 0.7rem !important;
}

.rounded-top {
  border-top-left-radius: 0.7rem !important;
  border-top-right-radius: 0.7rem !important;
}

.rounded-right {
  border-top-right-radius: 0.7rem !important;
  border-bottom-right-radius: 0.7rem !important;
}

.rounded-bottom {
  border-bottom-left-radius: 0.7rem !important;
  border-bottom-right-radius: 0.7rem !important;
}

.rounded-left {
  border-top-left-radius: 0.7rem !important;
  border-bottom-left-radius: 0.7rem !important;
}

.rounded-lg {
  border-radius: 1rem !important;
}

.rounded-top-lg {
  border-top-left-radius: 1rem !important;
  border-top-right-radius: 1rem !important;
}

.rounded-right-lg {
  border-top-right-radius: 1rem !important;
  border-bottom-right-radius: 1rem !important;
}

.rounded-bottom-lg {
  border-bottom-left-radius: 1rem !important;
  border-bottom-right-radius: 1rem !important;
}

.rounded-left-lg {
  border-top-left-radius: 1rem !important;
  border-bottom-left-radius: 1rem !important;
}

.rounded-circle {
  border-radius: 50% !important;
}

.rounded-bubble-end {
  padding: 0 30px;
  border-radius: 50px 5px 50px 50px;
}

.rounded-bubble-start {
  padding: 0 30px;
  border-radius: 5px 50px 50px 50px;
}

.rounded-bubble-sm {
  border-radius: 20px 3px 20px 20px;
}

.rounded-0 {
  border-radius: 0 !important;
}

.blob-1 {
  border-radius: 67% 33% 61% 39%/47% 30% 70% 53%;
}

.border-slate {
  border-color: oklch(57% 0.017 255deg) !important;
}

.border-gray {
  border-color: oklch(57% 0.007 250deg) !important;
}

.border-zinc {
  border-color: oklch(57% 0.01 260deg) !important;
}

.border-neutral {
  border-color: oklch(56% 0.014 250deg) !important;
}

.border-stone {
  border-color: oklch(57% 0.017 70deg) !important;
}

.border-red {
  border-color: oklch(63% 0.5 25deg) !important;
}

.border-orange {
  border-color: oklch(70.5% 0.213 47.604deg) !important;
}

.border-amber {
  border-color: oklch(76.9% 0.188 70.08deg) !important;
}

.border-yellow {
  border-color: oklch(79.5% 0.184 86.047deg) !important;
}

.border-lime {
  border-color: oklch(76.8% 0.233 130.85deg) !important;
}

.border-green {
  border-color: oklch(72.3% 0.219 149.579deg) !important;
}

.border-emerald {
  border-color: oklch(69.6% 0.17 162.48deg) !important;
}

.border-teal {
  border-color: oklch(70.4% 0.14 182.503deg) !important;
}

.border-cyan {
  border-color: oklch(71.5% 0.143 215.221deg) !important;
}

.border-sky {
  border-color: oklch(68.5% 0.169 237.323deg) !important;
}

.border-blue {
  border-color: oklch(54.6% 0.245 262.881deg) !important;
}

.border-indigo {
  border-color: oklch(58.5% 0.233 277.117deg) !important;
}

.border-violet {
  border-color: oklch(60.6% 0.25 292.717deg) !important;
}

.border-purple {
  border-color: oklch(62.7% 0.265 303.9deg) !important;
}

.border-fuchsia {
  border-color: oklch(66.7% 0.295 322.15deg) !important;
}

.border-pink {
  border-color: oklch(65.6% 0.241 354.308deg) !important;
}

.border-rose {
  border-color: oklch(64.5% 0.246 16.439deg) !important;
}

.border-success {
  border-color: oklch(72.3% 0.219 149.579deg) !important;
}

.border-danger {
  border-color: oklch(63% 0.5 25deg) !important;
}

.border-warning {
  border-color: oklch(79.5% 0.184 86.047deg) !important;
}

.border-info {
  border-color: oklch(71.5% 0.143 215.221deg) !important;
}

.border-dark {
  border-color: oklch(37% 0.012 250deg) !important;
}

.border-primary {
  border-color: oklch(54.6% 0.245 262.881deg) !important;
}

.border-secondary {
  border-color: oklch(62.7% 0.265 303.9deg) !important;
}

.border-gray-50 {
  border-color: oklch(97% 0.004 250deg) !important;
}

.border-gray-100 {
  border-color: oklch(94% 0.005 250deg) !important;
}

.border-gray-200 {
  border-color: oklch(88% 0.006 250deg) !important;
}

.border-gray-300 {
  border-color: oklch(79% 0.007 250deg) !important;
}

.border-gray-400 {
  border-color: oklch(68% 0.007 250deg) !important;
}

.border-gray-500 {
  border-color: oklch(57% 0.007 250deg) !important;
}

.border-gray-600 {
  border-color: oklch(47% 0.006 250deg) !important;
}

.border-gray-700 {
  border-color: oklch(38% 0.006 250deg) !important;
}

.border-gray-800 {
  border-color: oklch(28% 0.005 250deg) !important;
}

.border-gray-900 {
  border-color: oklch(18% 0.004 250deg) !important;
}

.cursor-default {
  cursor: default;
}
.cursor-grab {
  cursor: -webkit-grab;
  cursor: grab;
}
.cursor-pointer {
  cursor: pointer;
}
.cursor-move {
  cursor: move;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-progress {
  cursor: progress;
}
.cursor-help {
  cursor: help;
}
.cursor-crosshair {
  cursor: crosshair;
}

.float-left {
  float: left !important;
}

.float-right {
  float: right !important;
}

.float-none {
  float: none !important;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

ul li a {
  -webkit-transition: linear 0.2s;
  transition: linear 0.2s;
}
ul[class*=" list-"], ul[class^=list-] {
  padding: 0;
}
ul.list-unstyled li, ul.list-dash li, ul.list-icon li {
  list-style-type: none;
}
ul.list-dash li:before {
  content: "-";
  padding-right: 7px;
}
ul.list-dash li a:hover {
  padding-left: 3px;
}
ul.list-dash li ul, ul.list-dash li ol {
  padding-left: 40px;
}
ul[class*=" list-inline"] li, ul[class^=list-inline] li {
  display: inline-block;
}
ul.list-inline {
  margin-right: -7px;
  margin-left: -7px;
}
ul.list-inline li {
  padding: 0 7px;
}
ul.list-inline-sm {
  margin-right: -3px;
  margin-left: -3px;
}
ul.list-inline-sm li {
  padding: 0 3px;
}
ul.list-inline-lg {
  margin-right: -14px;
  margin-left: -14px;
}
ul.list-inline-lg li {
  padding: 0 14px;
}
ul.list-inline-dash li:after {
  content: "-";
}
ul.list-inline-slash li:after {
  content: "/";
}
ul.list-inline-vbar li:after {
  content: "|";
}
ul.list-inline-dash li:after, ul.list-inline-slash li:after, ul.list-inline-vbar li:after {
  padding: 0 3px 0 6px;
}
ul.list-inline-dash li:last-child:after, ul.list-inline-slash li:last-child:after, ul.list-inline-vbar li:last-child:after {
  content: "";
  padding: 0;
}
ul.list-icon li {
  position: relative;
  padding-left: 22px;
}
ul.list-icon li:before {
  position: absolute;
  top: 0;
  left: 0;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}
ul.list-icon li a:hover {
  padding-left: 3px;
}
ul.list-icon li ul, ul.list-icon li ol {
  padding-left: 40px;
}
ul.list-icon.list-icon-check li:before {
  font-family: akar-icons !important;
  content: "\f153";
}
ul.list-icon.list-icon-close li:before {
  font-family: akar-icons !important;
  content: "\f00d";
}
ul.list-icon.list-icon-plus li:before {
  font-family: akar-icons !important;
  content: "\f16e";
}
ul.list-icon.list-icon-cevron li:before {
  font-family: akar-icons !important;
  content: "\f15a";
}
ul.list-icon.list-icon-download li:before {
  font-family: akar-icons !important;
  content: "\f1a0";
}
ul.list-icon.list-icon-caret li:before {
  font-family: akar-icons !important;
  content: "\f28a";
}
ul.list-icon.list-icon-ratio li:before {
  font-family: akar-icons !important;
  content: "\f23b";
}

ol {
  margin: 0 0 -7px;
}
ol li {
  margin: 0 0 7px;
}
ol li ul, ol li ol {
  margin-top: 7px;
}
ol.list-ordered {
  list-style: none;
  counter-reset: custom-counter;
  padding-left: 0;
}
ol.list-ordered li {
  position: relative;
  padding-left: 34px;
  counter-increment: custom-counter;
}
ol.list-ordered li::before {
  content: counter(custom-counter);
}
ol.list-ordered li ol {
  list-style: none;
  padding-left: 0;
}
ol.list-ordered.style-2 li::before, ol.list-ordered.style-3 li::before, ol.list-ordered.style-4 li::before, ol.list-ordered.style-5 li::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 13px;
  line-height: 24px;
  text-align: center;
}
ol.list-ordered.style-2 li::before {
  background: var(--framex-graycolors-color-gray-200);
  color: var(--framex-graycolors-color-gray-900);
}
ol.list-ordered.style-3 li::before {
  background: var(--framex-graycolors-color-gray-900);
  color: var(--framex-graycolors-color-gray-100);
}
ol.list-ordered.style-4 li::before {
  background: var(--framex-base-color-primary);
  color: var(--framex-graycolors-color-gray-50);
}
ol.list-ordered.style-5 li::before {
  background: var(--framex-base-color-secondary);
  color: var(--framex-graycolors-color-gray-50);
}

div[class^=bg-black] ol.list-ordered.style-2 li::before, div[class*=" bg-black"] ol.list-ordered.style-2 li::before, div[class^=bg-dark] ol.list-ordered.style-2 li::before, div[class*=" bg-dark"] ol.list-ordered.style-2 li::before {
  background: var(--framex-graycolors-color-gray-200);
  color: var(--framex-base-color-white);
}
div[class^=bg-black] ol.list-ordered.style-3 li::before, div[class*=" bg-black"] ol.list-ordered.style-3 li::before, div[class^=bg-dark] ol.list-ordered.style-3 li::before, div[class*=" bg-dark"] ol.list-ordered.style-3 li::before {
  background: var(--framex-base-color-white);
  color: var(--framex-graycolors-color-gray-900);
}
div[class^=bg-black] ol.list-ordered.style-4 li::before, div[class*=" bg-black"] ol.list-ordered.style-4 li::before, div[class^=bg-dark] ol.list-ordered.style-4 li::before, div[class*=" bg-dark"] ol.list-ordered.style-4 li::before {
  border-color: var(--framex-graycolors-color-gray-300);
  color: var(--framex-graycolors-color-gray-100);
}
div[class^=bg-black] ol.list-ordered.style-5 li::before, div[class*=" bg-black"] ol.list-ordered.style-5 li::before, div[class^=bg-dark] ol.list-ordered.style-5 li::before, div[class*=" bg-dark"] ol.list-ordered.style-5 li::before {
  border-color: var(--framex-base-color-white);
  color: var(--framex-base-color-white);
}

@media only screen and (max-width: 767.999px) {
  ol {
    margin: 0 0 -5px;
  }
  ol li {
    margin: 0 0 5px;
  }
  ul {
    margin: 0 0 -5px;
  }
  ul li {
    margin: 0 0 5px;
  }
  ul li ul, ul li ol {
    margin-top: 5px;
  }
  ul.list-dash li:before {
    content: "-";
    padding-right: 6px;
  }
  ul.list-dash li a:hover {
    padding-left: 2px;
  }
  ul.list-dash li ul, ul.list-dash li ol {
    padding-left: 30px;
  }
  ul.list-inline-lg {
    margin-right: -12px;
    margin-left: -12px;
  }
  ul.list-inline-lg li {
    padding: 0 12px;
  }
  ul.list-inline {
    margin-right: -6px;
    margin-left: -6px;
  }
  ul.list-inline li {
    padding: 0 6px;
  }
  ul.list-inline-sm {
    margin-right: -2px;
    margin-left: -2px;
  }
  ul.list-inline-sm li {
    padding: 0 2px;
  }
}
.opacity-0 {
  opacity: 0;
}
.opacity-5 {
  opacity: 0.05;
}
.opacity-10 {
  opacity: 0.1;
}
.opacity-25 {
  opacity: 0.25;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-75 {
  opacity: 0.75;
}
.opacity-100 {
  opacity: 1;
}

.position-static {
  position: static !important;
}

.position-relative {
  position: relative !important;
}

.position-absolute {
  position: absolute !important;
}

.position-fixed {
  position: fixed !important;
}

.position-sticky {
  position: sticky !important;
}

.ratio-21x9 {
  aspect-ratio: 2.3333333333;
}

.ratio-16x9 {
  aspect-ratio: 1.7777777778;
}

.ratio-4x3 {
  aspect-ratio: 1.3333333333;
}

.ratio-3x2 {
  aspect-ratio: 1.5;
}

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

.ratio-3x4 {
  aspect-ratio: 0.75;
}

.shadow-sm {
  -webkit-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
          box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.shadow {
  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
          box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.shadow-lg {
  -webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
          box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}

.shadow-page {
  -webkit-box-shadow: var(--framex-base-color-card-shadow) !important;
          box-shadow: var(--framex-base-color-card-shadow) !important;
}

.shadow-none {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}

/* Box shadow */
.box-shadow, .box-shadow-hover:hover {
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
  -webkit-transition: 350ms ease-in-out;
  transition: 350ms ease-in-out;
}

.box-shadow-small, .box-shadow-small-hover:hover {
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
  -webkit-transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
  transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
}

.box-shadow-medium, .box-shadow-medium-hover:hover {
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
  -webkit-transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
  transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
}

.box-shadow-medium-bottom, .box-shadow-medium-bottom-hover:hover {
  -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  -webkit-transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
  transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
}

.box-shadow-large, .box-shadow-large-hover:hover {
  -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.08);
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.08);
  -webkit-transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
  transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
}

.box-shadow-extra-large, .box-shadow-extra-large-hover:hover {
  -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.08);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.08);
  -webkit-transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
  transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
}

.box-shadow-double-large, .box-shadow-double-large-hover:hover {
  -webkit-box-shadow: 0 0 45px rgba(0, 0, 0, 0.09);
  box-shadow: 0 0 45px rgba(0, 0, 0, 0.09);
  -webkit-transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
  transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
}

.box-shadow-triple-large, .box-shadow-triple-large-hover:hover {
  -webkit-box-shadow: 0 0 60px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.2);
  -webkit-transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
  transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
}

.box-shadow-quadruple-large, .box-shadow-quadruple-large-hover:hover {
  -webkit-box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
  -webkit-transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
  transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
}

.box-shadow-hover:hover, .box-shadow-large-hover:hover, .box-shadow-extra-large-hover:hover, .box-shadow-medium-hover:hover, .box-shadow-small-hover:hover, .box-shadow-double-large-hover:hover, .box-shadow-quadruple-large-hover:hover {
  -webkit-transform: translate3d(0, -3px, 0);
  transform: translate3d(0, -3px, 0);
}

.box-shadow-bottom {
  -webkit-box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.05);
}

.w-25 {
  width: 25% !important;
}

.w-50 {
  width: 50% !important;
}

.w-75 {
  width: 75% !important;
}

.w-100 {
  width: 100% !important;
}

.w-auto {
  width: auto !important;
}

.h-25 {
  height: 25% !important;
}

.h-50 {
  height: 50% !important;
}

.h-75 {
  height: 75% !important;
}

.h-100 {
  height: 100% !important;
}

.h-auto {
  height: auto !important;
}

@media only screen and (min-width: 768px) {
  .md\:w-25, .w-md-25 {
    width: 25% !important;
  }
  .md\:w-50, .w-md-50 {
    width: 50% !important;
  }
  .md\:w-75, .w-md-75 {
    width: 75% !important;
  }
  .md\:w-100, .w-md-100 {
    width: 100% !important;
  }
  .md\:w-auto, .w-md-auto {
    width: auto !important;
  }
  .md\:h-25, .h-md-25 {
    height: 25% !important;
  }
  .md\:h-50, .h-md-50 {
    height: 50% !important;
  }
  .md\:h-75, .h-md-75 {
    height: 75% !important;
  }
  .md\:h-100, .h-md-100 {
    height: 100% !important;
  }
  .md\:h-auto, .h-md-auto {
    height: auto !important;
  }
}
@media only screen and (min-width: 992px) {
  .lg\:w-25, .w-lg-25 {
    width: 25% !important;
  }
  .lg\:w-50, .w-lg-50 {
    width: 50% !important;
  }
  .lg\:w-75, .w-lg-75 {
    width: 75% !important;
  }
  .lg\:w-100, .w-lg-100 {
    width: 100% !important;
  }
  .lg\:w-auto, .w-lg-auto {
    width: auto !important;
  }
  .lg\:h-25, .h-lg-25 {
    height: 25% !important;
  }
  .lg\:h-50, .h-lg-50 {
    height: 50% !important;
  }
  .lg\:h-75, .h-lg-75 {
    height: 75% !important;
  }
  .lg\:h-100, .h-lg-100 {
    height: 100% !important;
  }
  .lg\:h-auto, .h-lg-auto {
    height: auto !important;
  }
}
@media only screen and (min-width: 1200px) {
  .xl\:w-25, .w-xl-25 {
    width: 25% !important;
  }
  .xl\:w-50, .w-xl-50 {
    width: 50% !important;
  }
  .xl\:w-75, .w-xl-75 {
    width: 75% !important;
  }
  .xl\:w-100, .w-xl-100 {
    width: 100% !important;
  }
  .xl\:w-auto, .w-xl-auto {
    width: auto !important;
  }
  .xl\:h-25, .h-xl-25 {
    height: 25% !important;
  }
  .xl\:h-50, .h-xl-50 {
    height: 50% !important;
  }
  .xl\:h-75, .h-xl-75 {
    height: 75% !important;
  }
  .xl\:h-100, .h-xl-100 {
    height: 100% !important;
  }
  .xl\:h-auto, .h-xl-auto {
    height: auto !important;
  }
}
.w-max-100 {
  max-width: 100% !important;
}

.h-max-100 {
  max-height: 100% !important;
}

.wh-100 {
  width: 100% !important;
  height: 100% !important;
}

.themeMode {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 20px;
  height: 12px;
}
.themeMode i {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.light-switch {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.icon-light-mode {
  opacity: 1;
}

.icon-dark-mode {
  opacity: 0;
}

[data-theme-mode=dark] .icon-light-mode,
.dark .icon-light-mode {
  opacity: 0;
}
[data-theme-mode=dark] .icon-dark-mode,
.dark .icon-dark-mode {
  opacity: 1;
}

.text-start {
  text-align: left !important;
}

.text-end {
  text-align: right !important;
}

.text-center {
  text-align: center !important;
}

.text-wrap {
  white-space: normal !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

.text-break {
  word-break: break-word !important;
  word-wrap: break-word !important;
}

.text-lowercase {
  text-transform: lowercase !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

.text-decoration-none {
  text-decoration: none !important;
}

.text-decoration-underline {
  text-decoration: underline !important;
}

.text-decoration-line-through {
  text-decoration: line-through !important;
}

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

.lh-sm {
  line-height: 1.25 !important;
}

.lh-base {
  line-height: 1.5 !important;
}

.lh-lg {
  line-height: 2 !important;
}

.text-reset {
  color: inherit !important;
}

@media only screen and (min-width: 768px) {
  .text-start {
    text-align: left !important;
  }
  .text-end {
    text-align: right !important;
  }
  .text-center {
    text-align: center !important;
  }
}
@media only screen and (min-width: 992px) {
  .text-start {
    text-align: left !important;
  }
  .text-end {
    text-align: right !important;
  }
  .text-center {
    text-align: center !important;
  }
}
@media only screen and (min-width: 1200px) {
  .text-start {
    text-align: left !important;
  }
  .text-end {
    text-align: right !important;
  }
  .text-center {
    text-align: center !important;
  }
}
.visible {
  visibility: visible !important;
}

.invisible {
  visibility: hidden !important;
}

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

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

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

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

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

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

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

.clear-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.stretched-link::after {
  position: absolute;
  inset-block: 0;
  inset-inline: 0;
  cursor: pointer;
  content: "";
}

.f-icon {
  font-size: 28px;
  height: 55px;
  width: 55px;
  line-height: 55px;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  border-radius: 50px;
}

.hljs, code {
  display: initial;
  background: rgba(255, 210, 123, 0.2705882353);
  padding: 0.1em 0.25em;
  border-radius: 0.25em;
  font-size: 14px;
  font-family: monospace;
  font-weight: bold;
}

#scrollTopButton {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  -webkit-transition: all 500ms;
  transition: all 500ms;
  z-index: 9999;
  width: 2rem;
  height: 2rem;
  background-color: rgba(0, 0, 0, 0.383);
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  font-size: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  -webkit-transform: translateY(100px);
          transform: translateY(100px);
  border: none; /* κενό border */
  outline: none;
}
@media only screen and (min-width: 768px) {
  #scrollTopButton {
    width: 3rem;
    height: 3rem;
    bottom: 2rem;
    right: 2rem;
    font-size: 1.375rem;
  }
}
#scrollTopButton.scrolltop-show {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
#scrollTopButton.scrolltop-hide {
  -webkit-transform: translateY(100px);
          transform: translateY(100px);
}

.lift {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.lift:hover {
  -webkit-transform: translateY(-0.4rem);
          transform: translateY(-0.4rem);
  -webkit-box-shadow: 0rem 0.25rem 1.25rem rgba(52, 63, 82, 0.1);
          box-shadow: 0rem 0.25rem 1.25rem rgba(52, 63, 82, 0.1);
}

.nmt-25,
.nmt-35,
.nmt-half,
.nmt-full {
  position: relative;
}

.ai, .bi {
  margin-right: 0.5rem;
}
.ai-2x, .bi-2x {
  font-size: 2em;
}
.ai-3x, .bi-3x {
  font-size: 3em;
}
.ai-4x, .bi-4x {
  font-size: 4em;
}
.ai-5x, .bi-5x {
  font-size: 5em;
}
.ai-10x, .bi-10x {
  font-size: 10em;
}
.ai-fw, .bi-fw {
  width: 1.2857142857em;
  text-align: center;
}
.ai-border, .bi-border {
  padding: 0.2em 0.35em 0.2em;
  border: solid 0.08em var(--framex-base-color-border);
  border-radius: 0.1em;
}

.stickyInner {
  position: sticky;
  top: 5rem;
}

.full-screen {
  height: 100vh;
}

.full-screen.top-space-margin {
  height: calc(100vh - 96px);
}

/* Breadcrumb */
.breadcrumb {
  margin: 0;
}
.breadcrumb ul {
  margin: 0;
  padding: 0;
}

.breadcrumb-style-01 ul li {
  display: inline-block;
}
.breadcrumb-style-01 ul li:after {
  content: "\e844";
  font-family: "feather";
  font-size: 13px;
  font-weight: 900;
  display: inline-block;
  vertical-align: middle;
  padding: 0 8px 0 10px;
}
.breadcrumb-style-01 ul li:last-child:after {
  content: "";
  padding: 0;
}

/* Page title style */
.page-title-double-large h1 {
  font-size: 3.6rem;
  line-height: 3.3rem;
}
.page-title-double-large h2 {
  font-size: 17px;
  line-height: 26px;
}

.page-title-extra-large h1 {
  font-size: 3.3rem;
  line-height: 3.3rem;
}
.page-title-extra-large h2 {
  font-size: 18px;
  line-height: 26px;
}

.page-title-large h1 {
  font-size: 2.8rem;
  line-height: 3rem;
}
.page-title-large h2 {
  font-size: 16px;
  line-height: 22px;
}

.page-title-medium h1 {
  font-size: 2rem;
  line-height: 2.2rem;
}
.page-title-medium h2 {
  font-size: 16px;
  line-height: 22px;
}

.page-title-small h1 {
  font-size: 1.625rem;
  line-height: 1.875rem;
}
.page-title-small h2 {
  font-size: 16px;
  line-height: 22px;
}

.page-title-extra-small h1 {
  font-size: 17px;
  line-height: 20px;
}
.page-title-extra-small h2 {
  font-size: 3.8rem;
  line-height: 3.8rem;
}

.page-title-button-style.page-title-button-style {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.page-title-button-style h1 {
  padding: 13px 30px;
  display: inline-block;
}

.page-title-mini h1 {
  font-size: 20px;
  line-height: 30px;
}

/* Down section icon */
.down-section {
  position: absolute;
  bottom: 60px;
  left: 0;
  right: 0;
  width: 100%;
}
.down-section a {
  display: inline-block;
}
.down-section.down-bottom {
  bottom: 0;
  -webkit-transform: translateY(50%);
  transform: translateY(50%);
}

/* Down section line */
.down-section-line .section-line {
  position: relative;
}
.down-section-line .section-line:before {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  height: 0;
  width: 100%;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  background-color: white;
}
.down-section-line:hover .section-line:before {
  height: 100%;
}

section,
.section {
  padding-block: 2.5rem;
}
section.section-xl,
.section.section-xl {
  padding-block: 5rem;
}
section.section-xxl,
.section.section-xxl {
  padding-block: 7rem;
}

.sidebar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1.2rem;
}
.sidebar > :first-child {
  -ms-flex-preferred-size: 18.75rem;
      flex-basis: 18.75rem;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.sidebar > :last-child {
  -ms-flex-preferred-size: 0;
      flex-basis: 0;
  -webkit-box-flex: 999;
      -ms-flex-positive: 999;
          flex-grow: 999;
  min-inline-size: 50%;
}
.sidebar.reverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

.stack > * {
  -webkit-margin-after: 0;
          margin-block-end: 0;
  -webkit-margin-before: 0;
          margin-block-start: 0;
}
.stack > * + * {
  -webkit-margin-before: 1.2rem;
          margin-block-start: 1.2rem;
}

@media only screen and (max-width: 767.999px) {
  .stack-md-down > * {
    -webkit-margin-after: 0;
            margin-block-end: 0;
    -webkit-margin-before: 0;
            margin-block-start: 0;
  }
  .stack-md-down > * + * {
    -webkit-margin-before: 1.2rem;
            margin-block-start: 1.2rem;
  }
}

@media only screen and (max-width: 991.999px) {
  .stack-lg-down > * {
    -webkit-margin-after: 0;
            margin-block-end: 0;
    -webkit-margin-before: 0;
            margin-block-start: 0;
  }
  .stack-lg-down > * + * {
    -webkit-margin-before: 1.2rem;
            margin-block-start: 1.2rem;
  }
}

.center {
  inline-size: 100%;
  margin-inline: auto;
  max-inline-size: 82rem;
  padding-inline: 1.2rem;
}

@media only screen and (max-width: 767.999px) {
  .center-md-down {
    inline-size: 100%;
    margin-inline: auto;
    max-inline-size: 82rem;
    padding-inline: 1.2rem;
  }
}

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.bg-gray-50 {
  background-color: oklch(97% 0.004 250deg) !important;
}

.bg-hover-gray-50:hover {
  color: oklch(100% 0 0deg) !important;
  background-color: oklch(97% 0.004 250deg) !important;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.bg-gray-100 {
  background-color: oklch(94% 0.005 250deg) !important;
}

.bg-hover-gray-100:hover {
  color: oklch(100% 0 0deg) !important;
  background-color: oklch(94% 0.005 250deg) !important;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.bg-gray-200 {
  background-color: oklch(88% 0.006 250deg) !important;
}

.bg-hover-gray-200:hover {
  color: oklch(100% 0 0deg) !important;
  background-color: oklch(88% 0.006 250deg) !important;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.bg-gray-300 {
  background-color: oklch(79% 0.007 250deg) !important;
}

.bg-hover-gray-300:hover {
  color: oklch(100% 0 0deg) !important;
  background-color: oklch(79% 0.007 250deg) !important;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.bg-gray-400 {
  background-color: oklch(68% 0.007 250deg) !important;
}

.bg-hover-gray-400:hover {
  color: oklch(100% 0 0deg) !important;
  background-color: oklch(68% 0.007 250deg) !important;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.bg-gray-500 {
  background-color: oklch(57% 0.007 250deg) !important;
}

.bg-hover-gray-500:hover {
  color: oklch(100% 0 0deg) !important;
  background-color: oklch(57% 0.007 250deg) !important;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.bg-gray-600 {
  background-color: oklch(47% 0.006 250deg) !important;
}

.bg-hover-gray-600:hover {
  color: oklch(100% 0 0deg) !important;
  background-color: oklch(47% 0.006 250deg) !important;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.bg-gray-700 {
  background-color: oklch(38% 0.006 250deg) !important;
}

.bg-hover-gray-700:hover {
  color: oklch(100% 0 0deg) !important;
  background-color: oklch(38% 0.006 250deg) !important;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.bg-gray-800 {
  background-color: oklch(28% 0.005 250deg) !important;
}

.bg-hover-gray-800:hover {
  color: oklch(100% 0 0deg) !important;
  background-color: oklch(28% 0.005 250deg) !important;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.bg-gray-900 {
  background-color: oklch(18% 0.004 250deg) !important;
}

.bg-hover-gray-900:hover {
  color: oklch(100% 0 0deg) !important;
  background-color: oklch(18% 0.004 250deg) !important;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.bg-slate,
.btn-slate {
  background-color: oklch(57% 0.017 255deg) !important;
  color: oklch(100% 0 0deg) !important;
}
.bg-slate.btn:hover,
.btn-slate.btn:hover {
  -webkit-filter: brightness(0.85);
          filter: brightness(0.85);
}

.badge-slate {
  background-color: oklch(57% 0.017 255deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.btn-outline-slate {
  background-color: transparent !important;
  color: oklch(57% 0.017 255deg) !important;
  border: 1px solid oklch(57% 0.017 255deg) !important;
}
.btn-outline-slate:hover {
  background-color: oklch(57% 0.017 255deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.bg-hover-slate:hover {
  color: oklch(100% 0 0deg) !important;
  background-color: oklch(57% 0.017 255deg) !important;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.bg-soft-slate,
.btn-soft-slate,
.badge-soft-slate {
  background-color: oklch(95% 0.00374 255deg) !important;
  color: var(--framex-base-color-text) !important;
}

.bg-gray,
.btn-gray {
  background-color: oklch(57% 0.007 250deg) !important;
  color: oklch(100% 0 0deg) !important;
}
.bg-gray.btn:hover,
.btn-gray.btn:hover {
  -webkit-filter: brightness(0.85);
          filter: brightness(0.85);
}

.badge-gray {
  background-color: oklch(57% 0.007 250deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.btn-outline-gray {
  background-color: transparent !important;
  color: oklch(57% 0.007 250deg) !important;
  border: 1px solid oklch(57% 0.007 250deg) !important;
}
.btn-outline-gray:hover {
  background-color: oklch(57% 0.007 250deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.bg-hover-gray:hover {
  color: oklch(100% 0 0deg) !important;
  background-color: oklch(57% 0.007 250deg) !important;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.bg-soft-gray,
.btn-soft-gray,
.badge-soft-gray {
  background-color: oklch(95% 0.00154 250deg) !important;
  color: var(--framex-base-color-text) !important;
}

.bg-zinc,
.btn-zinc {
  background-color: oklch(57% 0.01 260deg) !important;
  color: oklch(100% 0 0deg) !important;
}
.bg-zinc.btn:hover,
.btn-zinc.btn:hover {
  -webkit-filter: brightness(0.85);
          filter: brightness(0.85);
}

.badge-zinc {
  background-color: oklch(57% 0.01 260deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.btn-outline-zinc {
  background-color: transparent !important;
  color: oklch(57% 0.01 260deg) !important;
  border: 1px solid oklch(57% 0.01 260deg) !important;
}
.btn-outline-zinc:hover {
  background-color: oklch(57% 0.01 260deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.bg-hover-zinc:hover {
  color: oklch(100% 0 0deg) !important;
  background-color: oklch(57% 0.01 260deg) !important;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.bg-soft-zinc,
.btn-soft-zinc,
.badge-soft-zinc {
  background-color: oklch(95% 0.0022 260deg) !important;
  color: var(--framex-base-color-text) !important;
}

.bg-neutral,
.btn-neutral {
  background-color: oklch(56% 0.014 250deg) !important;
  color: oklch(100% 0 0deg) !important;
}
.bg-neutral.btn:hover,
.btn-neutral.btn:hover {
  -webkit-filter: brightness(0.85);
          filter: brightness(0.85);
}

.badge-neutral {
  background-color: oklch(56% 0.014 250deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.btn-outline-neutral {
  background-color: transparent !important;
  color: oklch(56% 0.014 250deg) !important;
  border: 1px solid oklch(56% 0.014 250deg) !important;
}
.btn-outline-neutral:hover {
  background-color: oklch(56% 0.014 250deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.bg-hover-neutral:hover {
  color: oklch(100% 0 0deg) !important;
  background-color: oklch(56% 0.014 250deg) !important;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.bg-soft-neutral,
.btn-soft-neutral,
.badge-soft-neutral {
  background-color: oklch(95% 0.00308 250deg) !important;
  color: var(--framex-base-color-text) !important;
}

.bg-stone,
.btn-stone {
  background-color: oklch(57% 0.017 70deg) !important;
  color: oklch(100% 0 0deg) !important;
}
.bg-stone.btn:hover,
.btn-stone.btn:hover {
  -webkit-filter: brightness(0.85);
          filter: brightness(0.85);
}

.badge-stone {
  background-color: oklch(57% 0.017 70deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.btn-outline-stone {
  background-color: transparent !important;
  color: oklch(57% 0.017 70deg) !important;
  border: 1px solid oklch(57% 0.017 70deg) !important;
}
.btn-outline-stone:hover {
  background-color: oklch(57% 0.017 70deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.bg-hover-stone:hover {
  color: oklch(100% 0 0deg) !important;
  background-color: oklch(57% 0.017 70deg) !important;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.bg-soft-stone,
.btn-soft-stone,
.badge-soft-stone {
  background-color: oklch(95% 0.00374 70deg) !important;
  color: var(--framex-base-color-text) !important;
}

.bg-red,
.btn-red {
  background-color: oklch(63% 0.5 25deg) !important;
  color: oklch(100% 0 0deg) !important;
}
.bg-red.btn:hover,
.btn-red.btn:hover {
  -webkit-filter: brightness(0.85);
          filter: brightness(0.85);
}

.badge-red {
  background-color: oklch(63% 0.5 25deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.btn-outline-red {
  background-color: transparent !important;
  color: oklch(63% 0.5 25deg) !important;
  border: 1px solid oklch(63% 0.5 25deg) !important;
}
.btn-outline-red:hover {
  background-color: oklch(63% 0.5 25deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.bg-hover-red:hover {
  color: oklch(100% 0 0deg) !important;
  background-color: oklch(63% 0.5 25deg) !important;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.bg-soft-red,
.btn-soft-red,
.badge-soft-red {
  background-color: oklch(95% 0.11 25deg) !important;
  color: var(--framex-base-color-text) !important;
}

.bg-orange,
.btn-orange {
  background-color: oklch(70.5% 0.213 47.604deg) !important;
  color: oklch(100% 0 0deg) !important;
}
.bg-orange.btn:hover,
.btn-orange.btn:hover {
  -webkit-filter: brightness(0.85);
          filter: brightness(0.85);
}

.badge-orange {
  background-color: oklch(70.5% 0.213 47.604deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.btn-outline-orange {
  background-color: transparent !important;
  color: oklch(70.5% 0.213 47.604deg) !important;
  border: 1px solid oklch(70.5% 0.213 47.604deg) !important;
}
.btn-outline-orange:hover {
  background-color: oklch(70.5% 0.213 47.604deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.bg-hover-orange:hover {
  color: oklch(100% 0 0deg) !important;
  background-color: oklch(70.5% 0.213 47.604deg) !important;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.bg-soft-orange,
.btn-soft-orange,
.badge-soft-orange {
  background-color: oklch(95% 0.04686 47.604deg) !important;
  color: var(--framex-base-color-text) !important;
}

.bg-amber,
.btn-amber {
  background-color: oklch(76.9% 0.188 70.08deg) !important;
  color: oklch(0% 0 0deg) !important;
}
.bg-amber.btn:hover,
.btn-amber.btn:hover {
  -webkit-filter: brightness(0.85);
          filter: brightness(0.85);
}

.badge-amber {
  background-color: oklch(76.9% 0.188 70.08deg) !important;
  color: oklch(0% 0 0deg) !important;
}

.btn-outline-amber {
  background-color: transparent !important;
  color: oklch(76.9% 0.188 70.08deg) !important;
  border: 1px solid oklch(76.9% 0.188 70.08deg) !important;
}
.btn-outline-amber:hover {
  background-color: oklch(76.9% 0.188 70.08deg) !important;
  color: oklch(0% 0 0deg) !important;
}

.bg-hover-amber:hover {
  color: oklch(0% 0 0deg) !important;
  background-color: oklch(76.9% 0.188 70.08deg) !important;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.bg-soft-amber,
.btn-soft-amber,
.badge-soft-amber {
  background-color: oklch(95% 0.04136 70.08deg) !important;
  color: var(--framex-base-color-text) !important;
}

.bg-yellow,
.btn-yellow {
  background-color: oklch(79.5% 0.184 86.047deg) !important;
  color: oklch(0% 0 0deg) !important;
}
.bg-yellow.btn:hover,
.btn-yellow.btn:hover {
  -webkit-filter: brightness(0.85);
          filter: brightness(0.85);
}

.badge-yellow {
  background-color: oklch(79.5% 0.184 86.047deg) !important;
  color: oklch(0% 0 0deg) !important;
}

.btn-outline-yellow {
  background-color: transparent !important;
  color: oklch(79.5% 0.184 86.047deg) !important;
  border: 1px solid oklch(79.5% 0.184 86.047deg) !important;
}
.btn-outline-yellow:hover {
  background-color: oklch(79.5% 0.184 86.047deg) !important;
  color: oklch(0% 0 0deg) !important;
}

.bg-hover-yellow:hover {
  color: oklch(0% 0 0deg) !important;
  background-color: oklch(79.5% 0.184 86.047deg) !important;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.bg-soft-yellow,
.btn-soft-yellow,
.badge-soft-yellow {
  background-color: oklch(97% 0.04048 86.047deg) !important;
  color: var(--framex-base-color-text) !important;
}

.bg-lime,
.btn-lime {
  background-color: oklch(76.8% 0.233 130.85deg) !important;
  color: oklch(0% 0 0deg) !important;
}
.bg-lime.btn:hover,
.btn-lime.btn:hover {
  -webkit-filter: brightness(0.85);
          filter: brightness(0.85);
}

.badge-lime {
  background-color: oklch(76.8% 0.233 130.85deg) !important;
  color: oklch(0% 0 0deg) !important;
}

.btn-outline-lime {
  background-color: transparent !important;
  color: oklch(76.8% 0.233 130.85deg) !important;
  border: 1px solid oklch(76.8% 0.233 130.85deg) !important;
}
.btn-outline-lime:hover {
  background-color: oklch(76.8% 0.233 130.85deg) !important;
  color: oklch(0% 0 0deg) !important;
}

.bg-hover-lime:hover {
  color: oklch(0% 0 0deg) !important;
  background-color: oklch(76.8% 0.233 130.85deg) !important;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.bg-soft-lime,
.btn-soft-lime,
.badge-soft-lime {
  background-color: oklch(95% 0.05126 130.85deg) !important;
  color: var(--framex-base-color-text) !important;
}

.bg-green,
.btn-green {
  background-color: oklch(72.3% 0.219 149.579deg) !important;
  color: oklch(100% 0 0deg) !important;
}
.bg-green.btn:hover,
.btn-green.btn:hover {
  -webkit-filter: brightness(0.85);
          filter: brightness(0.85);
}

.badge-green {
  background-color: oklch(72.3% 0.219 149.579deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.btn-outline-green {
  background-color: transparent !important;
  color: oklch(72.3% 0.219 149.579deg) !important;
  border: 1px solid oklch(72.3% 0.219 149.579deg) !important;
}
.btn-outline-green:hover {
  background-color: oklch(72.3% 0.219 149.579deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.bg-hover-green:hover {
  color: oklch(100% 0 0deg) !important;
  background-color: oklch(72.3% 0.219 149.579deg) !important;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.bg-soft-green,
.btn-soft-green,
.badge-soft-green {
  background-color: oklch(95% 0.04818 149.579deg) !important;
  color: var(--framex-base-color-text) !important;
}

.bg-emerald,
.btn-emerald {
  background-color: oklch(69.6% 0.17 162.48deg) !important;
  color: oklch(100% 0 0deg) !important;
}
.bg-emerald.btn:hover,
.btn-emerald.btn:hover {
  -webkit-filter: brightness(0.85);
          filter: brightness(0.85);
}

.badge-emerald {
  background-color: oklch(69.6% 0.17 162.48deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.btn-outline-emerald {
  background-color: transparent !important;
  color: oklch(69.6% 0.17 162.48deg) !important;
  border: 1px solid oklch(69.6% 0.17 162.48deg) !important;
}
.btn-outline-emerald:hover {
  background-color: oklch(69.6% 0.17 162.48deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.bg-hover-emerald:hover {
  color: oklch(100% 0 0deg) !important;
  background-color: oklch(69.6% 0.17 162.48deg) !important;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.bg-soft-emerald,
.btn-soft-emerald,
.badge-soft-emerald {
  background-color: oklch(95% 0.0374 162.48deg) !important;
  color: var(--framex-base-color-text) !important;
}

.bg-teal,
.btn-teal {
  background-color: oklch(70.4% 0.14 182.503deg) !important;
  color: oklch(100% 0 0deg) !important;
}
.bg-teal.btn:hover,
.btn-teal.btn:hover {
  -webkit-filter: brightness(0.85);
          filter: brightness(0.85);
}

.badge-teal {
  background-color: oklch(70.4% 0.14 182.503deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.btn-outline-teal {
  background-color: transparent !important;
  color: oklch(70.4% 0.14 182.503deg) !important;
  border: 1px solid oklch(70.4% 0.14 182.503deg) !important;
}
.btn-outline-teal:hover {
  background-color: oklch(70.4% 0.14 182.503deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.bg-hover-teal:hover {
  color: oklch(100% 0 0deg) !important;
  background-color: oklch(70.4% 0.14 182.503deg) !important;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.bg-soft-teal,
.btn-soft-teal,
.badge-soft-teal {
  background-color: oklch(95% 0.0308 182.503deg) !important;
  color: var(--framex-base-color-text) !important;
}

.bg-cyan,
.btn-cyan {
  background-color: oklch(71.5% 0.143 215.221deg) !important;
  color: oklch(100% 0 0deg) !important;
}
.bg-cyan.btn:hover,
.btn-cyan.btn:hover {
  -webkit-filter: brightness(0.85);
          filter: brightness(0.85);
}

.badge-cyan {
  background-color: oklch(71.5% 0.143 215.221deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.btn-outline-cyan {
  background-color: transparent !important;
  color: oklch(71.5% 0.143 215.221deg) !important;
  border: 1px solid oklch(71.5% 0.143 215.221deg) !important;
}
.btn-outline-cyan:hover {
  background-color: oklch(71.5% 0.143 215.221deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.bg-hover-cyan:hover {
  color: oklch(100% 0 0deg) !important;
  background-color: oklch(71.5% 0.143 215.221deg) !important;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.bg-soft-cyan,
.btn-soft-cyan,
.badge-soft-cyan {
  background-color: oklch(95% 0.03146 215.221deg) !important;
  color: var(--framex-base-color-text) !important;
}

.bg-sky,
.btn-sky {
  background-color: oklch(68.5% 0.169 237.323deg) !important;
  color: oklch(100% 0 0deg) !important;
}
.bg-sky.btn:hover,
.btn-sky.btn:hover {
  -webkit-filter: brightness(0.85);
          filter: brightness(0.85);
}

.badge-sky {
  background-color: oklch(68.5% 0.169 237.323deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.btn-outline-sky {
  background-color: transparent !important;
  color: oklch(68.5% 0.169 237.323deg) !important;
  border: 1px solid oklch(68.5% 0.169 237.323deg) !important;
}
.btn-outline-sky:hover {
  background-color: oklch(68.5% 0.169 237.323deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.bg-hover-sky:hover {
  color: oklch(100% 0 0deg) !important;
  background-color: oklch(68.5% 0.169 237.323deg) !important;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.bg-soft-sky,
.btn-soft-sky,
.badge-soft-sky {
  background-color: oklch(95% 0.03718 237.323deg) !important;
  color: var(--framex-base-color-text) !important;
}

.bg-blue,
.btn-blue {
  background-color: oklch(54.6% 0.245 262.881deg) !important;
  color: oklch(100% 0 0deg) !important;
}
.bg-blue.btn:hover,
.btn-blue.btn:hover {
  -webkit-filter: brightness(0.85);
          filter: brightness(0.85);
}

.badge-blue {
  background-color: oklch(54.6% 0.245 262.881deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.btn-outline-blue {
  background-color: transparent !important;
  color: oklch(54.6% 0.245 262.881deg) !important;
  border: 1px solid oklch(54.6% 0.245 262.881deg) !important;
}
.btn-outline-blue:hover {
  background-color: oklch(54.6% 0.245 262.881deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.bg-hover-blue:hover {
  color: oklch(100% 0 0deg) !important;
  background-color: oklch(54.6% 0.245 262.881deg) !important;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.bg-soft-blue,
.btn-soft-blue,
.badge-soft-blue {
  background-color: oklch(95% 0.0539 262.881deg) !important;
  color: var(--framex-base-color-text) !important;
}

.bg-indigo,
.btn-indigo {
  background-color: oklch(58.5% 0.233 277.117deg) !important;
  color: oklch(100% 0 0deg) !important;
}
.bg-indigo.btn:hover,
.btn-indigo.btn:hover {
  -webkit-filter: brightness(0.85);
          filter: brightness(0.85);
}

.badge-indigo {
  background-color: oklch(58.5% 0.233 277.117deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.btn-outline-indigo {
  background-color: transparent !important;
  color: oklch(58.5% 0.233 277.117deg) !important;
  border: 1px solid oklch(58.5% 0.233 277.117deg) !important;
}
.btn-outline-indigo:hover {
  background-color: oklch(58.5% 0.233 277.117deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.bg-hover-indigo:hover {
  color: oklch(100% 0 0deg) !important;
  background-color: oklch(58.5% 0.233 277.117deg) !important;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.bg-soft-indigo,
.btn-soft-indigo,
.badge-soft-indigo {
  background-color: oklch(95% 0.05126 277.117deg) !important;
  color: var(--framex-base-color-text) !important;
}

.bg-violet,
.btn-violet {
  background-color: oklch(60.6% 0.25 292.717deg) !important;
  color: oklch(100% 0 0deg) !important;
}
.bg-violet.btn:hover,
.btn-violet.btn:hover {
  -webkit-filter: brightness(0.85);
          filter: brightness(0.85);
}

.badge-violet {
  background-color: oklch(60.6% 0.25 292.717deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.btn-outline-violet {
  background-color: transparent !important;
  color: oklch(60.6% 0.25 292.717deg) !important;
  border: 1px solid oklch(60.6% 0.25 292.717deg) !important;
}
.btn-outline-violet:hover {
  background-color: oklch(60.6% 0.25 292.717deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.bg-hover-violet:hover {
  color: oklch(100% 0 0deg) !important;
  background-color: oklch(60.6% 0.25 292.717deg) !important;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.bg-soft-violet,
.btn-soft-violet,
.badge-soft-violet {
  background-color: oklch(95% 0.055 292.717deg) !important;
  color: var(--framex-base-color-text) !important;
}

.bg-purple,
.btn-purple {
  background-color: oklch(62.7% 0.265 303.9deg) !important;
  color: oklch(100% 0 0deg) !important;
}
.bg-purple.btn:hover,
.btn-purple.btn:hover {
  -webkit-filter: brightness(0.85);
          filter: brightness(0.85);
}

.badge-purple {
  background-color: oklch(62.7% 0.265 303.9deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.btn-outline-purple {
  background-color: transparent !important;
  color: oklch(62.7% 0.265 303.9deg) !important;
  border: 1px solid oklch(62.7% 0.265 303.9deg) !important;
}
.btn-outline-purple:hover {
  background-color: oklch(62.7% 0.265 303.9deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.bg-hover-purple:hover {
  color: oklch(100% 0 0deg) !important;
  background-color: oklch(62.7% 0.265 303.9deg) !important;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.bg-soft-purple,
.btn-soft-purple,
.badge-soft-purple {
  background-color: oklch(95% 0.0583 303.9deg) !important;
  color: var(--framex-base-color-text) !important;
}

.bg-fuchsia,
.btn-fuchsia {
  background-color: oklch(66.7% 0.295 322.15deg) !important;
  color: oklch(100% 0 0deg) !important;
}
.bg-fuchsia.btn:hover,
.btn-fuchsia.btn:hover {
  -webkit-filter: brightness(0.85);
          filter: brightness(0.85);
}

.badge-fuchsia {
  background-color: oklch(66.7% 0.295 322.15deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.btn-outline-fuchsia {
  background-color: transparent !important;
  color: oklch(66.7% 0.295 322.15deg) !important;
  border: 1px solid oklch(66.7% 0.295 322.15deg) !important;
}
.btn-outline-fuchsia:hover {
  background-color: oklch(66.7% 0.295 322.15deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.bg-hover-fuchsia:hover {
  color: oklch(100% 0 0deg) !important;
  background-color: oklch(66.7% 0.295 322.15deg) !important;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.bg-soft-fuchsia,
.btn-soft-fuchsia,
.badge-soft-fuchsia {
  background-color: oklch(95% 0.0649 322.15deg) !important;
  color: var(--framex-base-color-text) !important;
}

.bg-pink,
.btn-pink {
  background-color: oklch(65.6% 0.241 354.308deg) !important;
  color: oklch(100% 0 0deg) !important;
}
.bg-pink.btn:hover,
.btn-pink.btn:hover {
  -webkit-filter: brightness(0.85);
          filter: brightness(0.85);
}

.badge-pink {
  background-color: oklch(65.6% 0.241 354.308deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.btn-outline-pink {
  background-color: transparent !important;
  color: oklch(65.6% 0.241 354.308deg) !important;
  border: 1px solid oklch(65.6% 0.241 354.308deg) !important;
}
.btn-outline-pink:hover {
  background-color: oklch(65.6% 0.241 354.308deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.bg-hover-pink:hover {
  color: oklch(100% 0 0deg) !important;
  background-color: oklch(65.6% 0.241 354.308deg) !important;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.bg-soft-pink,
.btn-soft-pink,
.badge-soft-pink {
  background-color: oklch(95% 0.05302 354.308deg) !important;
  color: var(--framex-base-color-text) !important;
}

.bg-rose,
.btn-rose {
  background-color: oklch(64.5% 0.246 16.439deg) !important;
  color: oklch(100% 0 0deg) !important;
}
.bg-rose.btn:hover,
.btn-rose.btn:hover {
  -webkit-filter: brightness(0.85);
          filter: brightness(0.85);
}

.badge-rose {
  background-color: oklch(64.5% 0.246 16.439deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.btn-outline-rose {
  background-color: transparent !important;
  color: oklch(64.5% 0.246 16.439deg) !important;
  border: 1px solid oklch(64.5% 0.246 16.439deg) !important;
}
.btn-outline-rose:hover {
  background-color: oklch(64.5% 0.246 16.439deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.bg-hover-rose:hover {
  color: oklch(100% 0 0deg) !important;
  background-color: oklch(64.5% 0.246 16.439deg) !important;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.bg-soft-rose,
.btn-soft-rose,
.badge-soft-rose {
  background-color: oklch(95% 0.05412 16.439deg) !important;
  color: var(--framex-base-color-text) !important;
}

.bg-success,
.btn-success {
  background-color: oklch(72.3% 0.219 149.579deg) !important;
  color: oklch(100% 0 0deg) !important;
}
.bg-success.btn:hover,
.btn-success.btn:hover {
  -webkit-filter: brightness(0.85);
          filter: brightness(0.85);
}

.badge-success {
  background-color: oklch(72.3% 0.219 149.579deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.btn-outline-success {
  background-color: transparent !important;
  color: oklch(72.3% 0.219 149.579deg) !important;
  border: 1px solid oklch(72.3% 0.219 149.579deg) !important;
}
.btn-outline-success:hover {
  background-color: oklch(72.3% 0.219 149.579deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.bg-hover-success:hover {
  color: oklch(100% 0 0deg) !important;
  background-color: oklch(72.3% 0.219 149.579deg) !important;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.bg-soft-success,
.btn-soft-success,
.badge-soft-success {
  background-color: oklch(95% 0.04818 149.579deg) !important;
  color: var(--framex-base-color-text) !important;
}

.bg-danger,
.btn-danger {
  background-color: oklch(63% 0.5 25deg) !important;
  color: oklch(100% 0 0deg) !important;
}
.bg-danger.btn:hover,
.btn-danger.btn:hover {
  -webkit-filter: brightness(0.85);
          filter: brightness(0.85);
}

.badge-danger {
  background-color: oklch(63% 0.5 25deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.btn-outline-danger {
  background-color: transparent !important;
  color: oklch(63% 0.5 25deg) !important;
  border: 1px solid oklch(63% 0.5 25deg) !important;
}
.btn-outline-danger:hover {
  background-color: oklch(63% 0.5 25deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.bg-hover-danger:hover {
  color: oklch(100% 0 0deg) !important;
  background-color: oklch(63% 0.5 25deg) !important;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.bg-soft-danger,
.btn-soft-danger,
.badge-soft-danger {
  background-color: oklch(95% 0.11 25deg) !important;
  color: var(--framex-base-color-text) !important;
}

.bg-warning,
.btn-warning {
  background-color: oklch(79.5% 0.184 86.047deg) !important;
  color: oklch(0% 0 0deg) !important;
}
.bg-warning.btn:hover,
.btn-warning.btn:hover {
  -webkit-filter: brightness(0.85);
          filter: brightness(0.85);
}

.badge-warning {
  background-color: oklch(79.5% 0.184 86.047deg) !important;
  color: oklch(0% 0 0deg) !important;
}

.btn-outline-warning {
  background-color: transparent !important;
  color: oklch(79.5% 0.184 86.047deg) !important;
  border: 1px solid oklch(79.5% 0.184 86.047deg) !important;
}
.btn-outline-warning:hover {
  background-color: oklch(79.5% 0.184 86.047deg) !important;
  color: oklch(0% 0 0deg) !important;
}

.bg-hover-warning:hover {
  color: oklch(0% 0 0deg) !important;
  background-color: oklch(79.5% 0.184 86.047deg) !important;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.bg-soft-warning,
.btn-soft-warning,
.badge-soft-warning {
  background-color: oklch(97% 0.04048 86.047deg) !important;
  color: var(--framex-base-color-text) !important;
}

.bg-info,
.btn-info {
  background-color: oklch(71.5% 0.143 215.221deg) !important;
  color: oklch(100% 0 0deg) !important;
}
.bg-info.btn:hover,
.btn-info.btn:hover {
  -webkit-filter: brightness(0.85);
          filter: brightness(0.85);
}

.badge-info {
  background-color: oklch(71.5% 0.143 215.221deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.btn-outline-info {
  background-color: transparent !important;
  color: oklch(71.5% 0.143 215.221deg) !important;
  border: 1px solid oklch(71.5% 0.143 215.221deg) !important;
}
.btn-outline-info:hover {
  background-color: oklch(71.5% 0.143 215.221deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.bg-hover-info:hover {
  color: oklch(100% 0 0deg) !important;
  background-color: oklch(71.5% 0.143 215.221deg) !important;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.bg-soft-info,
.btn-soft-info,
.badge-soft-info {
  background-color: oklch(95% 0.03146 215.221deg) !important;
  color: var(--framex-base-color-text) !important;
}

.bg-dark,
.btn-dark {
  background-color: oklch(37% 0.012 250deg) !important;
  color: oklch(100% 0 0deg) !important;
}
.bg-dark.btn:hover,
.btn-dark.btn:hover {
  -webkit-filter: brightness(0.85);
          filter: brightness(0.85);
}

.badge-dark {
  background-color: oklch(37% 0.012 250deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.btn-outline-dark {
  background-color: transparent !important;
  color: oklch(37% 0.012 250deg) !important;
  border: 1px solid oklch(37% 0.012 250deg) !important;
}
.btn-outline-dark:hover {
  background-color: oklch(37% 0.012 250deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.bg-hover-dark:hover {
  color: oklch(100% 0 0deg) !important;
  background-color: oklch(37% 0.012 250deg) !important;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.bg-soft-dark,
.btn-soft-dark,
.badge-soft-dark {
  background-color: oklch(95% 0.00264 250deg) !important;
  color: var(--framex-base-color-text) !important;
}

.bg-primary,
.btn-primary {
  background-color: oklch(54.6% 0.245 262.881deg) !important;
  color: oklch(100% 0 0deg) !important;
}
.bg-primary.btn:hover,
.btn-primary.btn:hover {
  -webkit-filter: brightness(0.85);
          filter: brightness(0.85);
}

.badge-primary {
  background-color: oklch(54.6% 0.245 262.881deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.btn-outline-primary {
  background-color: transparent !important;
  color: oklch(54.6% 0.245 262.881deg) !important;
  border: 1px solid oklch(54.6% 0.245 262.881deg) !important;
}
.btn-outline-primary:hover {
  background-color: oklch(54.6% 0.245 262.881deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.bg-hover-primary:hover {
  color: oklch(100% 0 0deg) !important;
  background-color: oklch(54.6% 0.245 262.881deg) !important;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.bg-soft-primary,
.btn-soft-primary,
.badge-soft-primary {
  background-color: oklch(95% 0.0539 262.881deg) !important;
  color: var(--framex-base-color-text) !important;
}

.bg-secondary,
.btn-secondary {
  background-color: oklch(62.7% 0.265 303.9deg) !important;
  color: oklch(100% 0 0deg) !important;
}
.bg-secondary.btn:hover,
.btn-secondary.btn:hover {
  -webkit-filter: brightness(0.85);
          filter: brightness(0.85);
}

.badge-secondary {
  background-color: oklch(62.7% 0.265 303.9deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.btn-outline-secondary {
  background-color: transparent !important;
  color: oklch(62.7% 0.265 303.9deg) !important;
  border: 1px solid oklch(62.7% 0.265 303.9deg) !important;
}
.btn-outline-secondary:hover {
  background-color: oklch(62.7% 0.265 303.9deg) !important;
  color: oklch(100% 0 0deg) !important;
}

.bg-hover-secondary:hover {
  color: oklch(100% 0 0deg) !important;
  background-color: oklch(62.7% 0.265 303.9deg) !important;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.bg-soft-secondary,
.btn-soft-secondary,
.badge-soft-secondary {
  background-color: oklch(95% 0.0583 303.9deg) !important;
  color: var(--framex-base-color-text) !important;
}

[data-theme-mode=dark] .bg-soft-slate,
[data-theme-mode=dark] .btn-soft-slate,
[data-theme-mode=dark] .badge-soft-slate,
.dark .bg-soft-slate,
.dark .btn-soft-slate,
.dark .badge-soft-slate {
  background-color: oklch(19% 0.00544 255deg) !important;
  color: var(--framex-base-color-text) !important;
}
[data-theme-mode=dark] .bg-soft-gray,
[data-theme-mode=dark] .btn-soft-gray,
[data-theme-mode=dark] .badge-soft-gray,
.dark .bg-soft-gray,
.dark .btn-soft-gray,
.dark .badge-soft-gray {
  background-color: oklch(19% 0.00224 250deg) !important;
  color: var(--framex-base-color-text) !important;
}
[data-theme-mode=dark] .bg-soft-zinc,
[data-theme-mode=dark] .btn-soft-zinc,
[data-theme-mode=dark] .badge-soft-zinc,
.dark .bg-soft-zinc,
.dark .btn-soft-zinc,
.dark .badge-soft-zinc {
  background-color: oklch(19% 0.0032 260deg) !important;
  color: var(--framex-base-color-text) !important;
}
[data-theme-mode=dark] .bg-soft-neutral,
[data-theme-mode=dark] .btn-soft-neutral,
[data-theme-mode=dark] .badge-soft-neutral,
.dark .bg-soft-neutral,
.dark .btn-soft-neutral,
.dark .badge-soft-neutral {
  background-color: oklch(18% 0.00448 250deg) !important;
  color: var(--framex-base-color-text) !important;
}
[data-theme-mode=dark] .bg-soft-stone,
[data-theme-mode=dark] .btn-soft-stone,
[data-theme-mode=dark] .badge-soft-stone,
.dark .bg-soft-stone,
.dark .btn-soft-stone,
.dark .badge-soft-stone {
  background-color: oklch(19% 0.00544 70deg) !important;
  color: var(--framex-base-color-text) !important;
}
[data-theme-mode=dark] .bg-soft-red,
[data-theme-mode=dark] .btn-soft-red,
[data-theme-mode=dark] .badge-soft-red,
.dark .bg-soft-red,
.dark .btn-soft-red,
.dark .badge-soft-red {
  background-color: oklch(25% 0.16 25deg) !important;
  color: var(--framex-base-color-text) !important;
}
[data-theme-mode=dark] .bg-soft-orange,
[data-theme-mode=dark] .btn-soft-orange,
[data-theme-mode=dark] .badge-soft-orange,
.dark .bg-soft-orange,
.dark .btn-soft-orange,
.dark .badge-soft-orange {
  background-color: oklch(32.5% 0.06816 47.604deg) !important;
  color: var(--framex-base-color-text) !important;
}
[data-theme-mode=dark] .bg-soft-amber,
[data-theme-mode=dark] .btn-soft-amber,
[data-theme-mode=dark] .badge-soft-amber,
.dark .bg-soft-amber,
.dark .btn-soft-amber,
.dark .badge-soft-amber {
  background-color: oklch(38.9% 0.06016 70.08deg) !important;
  color: var(--framex-base-color-text) !important;
}
[data-theme-mode=dark] .bg-soft-yellow,
[data-theme-mode=dark] .btn-soft-yellow,
[data-theme-mode=dark] .badge-soft-yellow,
.dark .bg-soft-yellow,
.dark .btn-soft-yellow,
.dark .badge-soft-yellow {
  background-color: oklch(41.5% 0.05888 86.047deg) !important;
  color: var(--framex-base-color-text) !important;
}
[data-theme-mode=dark] .bg-soft-lime,
[data-theme-mode=dark] .btn-soft-lime,
[data-theme-mode=dark] .badge-soft-lime,
.dark .bg-soft-lime,
.dark .btn-soft-lime,
.dark .badge-soft-lime {
  background-color: oklch(38.8% 0.07456 130.85deg) !important;
  color: var(--framex-base-color-text) !important;
}
[data-theme-mode=dark] .bg-soft-green,
[data-theme-mode=dark] .btn-soft-green,
[data-theme-mode=dark] .badge-soft-green,
.dark .bg-soft-green,
.dark .btn-soft-green,
.dark .badge-soft-green {
  background-color: oklch(34.3% 0.07008 149.579deg) !important;
  color: var(--framex-base-color-text) !important;
}
[data-theme-mode=dark] .bg-soft-emerald,
[data-theme-mode=dark] .btn-soft-emerald,
[data-theme-mode=dark] .badge-soft-emerald,
.dark .bg-soft-emerald,
.dark .btn-soft-emerald,
.dark .badge-soft-emerald {
  background-color: oklch(31.6% 0.0544 162.48deg) !important;
  color: var(--framex-base-color-text) !important;
}
[data-theme-mode=dark] .bg-soft-teal,
[data-theme-mode=dark] .btn-soft-teal,
[data-theme-mode=dark] .badge-soft-teal,
.dark .bg-soft-teal,
.dark .btn-soft-teal,
.dark .badge-soft-teal {
  background-color: oklch(32.4% 0.0448 182.503deg) !important;
  color: var(--framex-base-color-text) !important;
}
[data-theme-mode=dark] .bg-soft-cyan,
[data-theme-mode=dark] .btn-soft-cyan,
[data-theme-mode=dark] .badge-soft-cyan,
.dark .bg-soft-cyan,
.dark .btn-soft-cyan,
.dark .badge-soft-cyan {
  background-color: oklch(33.5% 0.04576 215.221deg) !important;
  color: var(--framex-base-color-text) !important;
}
[data-theme-mode=dark] .bg-soft-sky,
[data-theme-mode=dark] .btn-soft-sky,
[data-theme-mode=dark] .badge-soft-sky,
.dark .bg-soft-sky,
.dark .btn-soft-sky,
.dark .badge-soft-sky {
  background-color: oklch(30.5% 0.05408 237.323deg) !important;
  color: var(--framex-base-color-text) !important;
}
[data-theme-mode=dark] .bg-soft-blue,
[data-theme-mode=dark] .btn-soft-blue,
[data-theme-mode=dark] .badge-soft-blue,
.dark .bg-soft-blue,
.dark .btn-soft-blue,
.dark .badge-soft-blue {
  background-color: oklch(22% 0.0784 262.881deg) !important;
  color: var(--framex-base-color-text) !important;
}
[data-theme-mode=dark] .bg-soft-indigo,
[data-theme-mode=dark] .btn-soft-indigo,
[data-theme-mode=dark] .badge-soft-indigo,
.dark .bg-soft-indigo,
.dark .btn-soft-indigo,
.dark .badge-soft-indigo {
  background-color: oklch(20.5% 0.07456 277.117deg) !important;
  color: var(--framex-base-color-text) !important;
}
[data-theme-mode=dark] .bg-soft-violet,
[data-theme-mode=dark] .btn-soft-violet,
[data-theme-mode=dark] .badge-soft-violet,
.dark .bg-soft-violet,
.dark .btn-soft-violet,
.dark .badge-soft-violet {
  background-color: oklch(22.6% 0.08 292.717deg) !important;
  color: var(--framex-base-color-text) !important;
}
[data-theme-mode=dark] .bg-soft-purple,
[data-theme-mode=dark] .btn-soft-purple,
[data-theme-mode=dark] .badge-soft-purple,
.dark .bg-soft-purple,
.dark .btn-soft-purple,
.dark .badge-soft-purple {
  background-color: oklch(24.7% 0.0848 303.9deg) !important;
  color: var(--framex-base-color-text) !important;
}
[data-theme-mode=dark] .bg-soft-fuchsia,
[data-theme-mode=dark] .btn-soft-fuchsia,
[data-theme-mode=dark] .badge-soft-fuchsia,
.dark .bg-soft-fuchsia,
.dark .btn-soft-fuchsia,
.dark .badge-soft-fuchsia {
  background-color: oklch(28.7% 0.0944 322.15deg) !important;
  color: var(--framex-base-color-text) !important;
}
[data-theme-mode=dark] .bg-soft-pink,
[data-theme-mode=dark] .btn-soft-pink,
[data-theme-mode=dark] .badge-soft-pink,
.dark .bg-soft-pink,
.dark .btn-soft-pink,
.dark .badge-soft-pink {
  background-color: oklch(27.6% 0.07712 354.308deg) !important;
  color: var(--framex-base-color-text) !important;
}
[data-theme-mode=dark] .bg-soft-rose,
[data-theme-mode=dark] .btn-soft-rose,
[data-theme-mode=dark] .badge-soft-rose,
.dark .bg-soft-rose,
.dark .btn-soft-rose,
.dark .badge-soft-rose {
  background-color: oklch(26.5% 0.07872 16.439deg) !important;
  color: var(--framex-base-color-text) !important;
}
[data-theme-mode=dark] .bg-soft-success,
[data-theme-mode=dark] .btn-soft-success,
[data-theme-mode=dark] .badge-soft-success,
.dark .bg-soft-success,
.dark .btn-soft-success,
.dark .badge-soft-success {
  background-color: oklch(34.3% 0.07008 149.579deg) !important;
  color: var(--framex-base-color-text) !important;
}
[data-theme-mode=dark] .bg-soft-danger,
[data-theme-mode=dark] .btn-soft-danger,
[data-theme-mode=dark] .badge-soft-danger,
.dark .bg-soft-danger,
.dark .btn-soft-danger,
.dark .badge-soft-danger {
  background-color: oklch(25% 0.16 25deg) !important;
  color: var(--framex-base-color-text) !important;
}
[data-theme-mode=dark] .bg-soft-warning,
[data-theme-mode=dark] .btn-soft-warning,
[data-theme-mode=dark] .badge-soft-warning,
.dark .bg-soft-warning,
.dark .btn-soft-warning,
.dark .badge-soft-warning {
  background-color: oklch(41.5% 0.05888 86.047deg) !important;
  color: var(--framex-base-color-text) !important;
}
[data-theme-mode=dark] .bg-soft-info,
[data-theme-mode=dark] .btn-soft-info,
[data-theme-mode=dark] .badge-soft-info,
.dark .bg-soft-info,
.dark .btn-soft-info,
.dark .badge-soft-info {
  background-color: oklch(33.5% 0.04576 215.221deg) !important;
  color: var(--framex-base-color-text) !important;
}
[data-theme-mode=dark] .bg-soft-dark,
[data-theme-mode=dark] .btn-soft-dark,
[data-theme-mode=dark] .badge-soft-dark,
.dark .bg-soft-dark,
.dark .btn-soft-dark,
.dark .badge-soft-dark {
  background-color: oklch(22% 0.00384 250deg) !important;
  color: var(--framex-base-color-text) !important;
}
[data-theme-mode=dark] .bg-soft-primary,
[data-theme-mode=dark] .btn-soft-primary,
[data-theme-mode=dark] .badge-soft-primary,
.dark .bg-soft-primary,
.dark .btn-soft-primary,
.dark .badge-soft-primary {
  background-color: oklch(22% 0.0784 262.881deg) !important;
  color: var(--framex-base-color-text) !important;
}
[data-theme-mode=dark] .bg-soft-secondary,
[data-theme-mode=dark] .btn-soft-secondary,
[data-theme-mode=dark] .badge-soft-secondary,
.dark .bg-soft-secondary,
.dark .btn-soft-secondary,
.dark .badge-soft-secondary {
  background-color: oklch(24.7% 0.0848 303.9deg) !important;
  color: var(--framex-base-color-text) !important;
}

.hasBgImage {
  display: block;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 56.25%;
}

.bg {
  display: block;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-fixed {
  background-attachment: fixed !important;
}

.bg-norepeat {
  background-repeat: no-repeat;
}

.bg-overlay {
  position: relative;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-overlay::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.bg-overlay[data-op="1"]::after {
  opacity: 1 !important;
}

.bg-overlay[data-op="2"]::after {
  opacity: 0.2 !important;
}

.bg-overlay[data-op="3"]::after {
  opacity: 0.3 !important;
}

.bg-overlay[data-op="4"]::after {
  opacity: 0.4 !important;
}

.bg-overlay[data-op="5"]::after {
  opacity: 0.5 !important;
}

.bg-overlay[data-op="6"]::after {
  opacity: 0.6 !important;
}

.bg-overlay[data-op="7"]::after {
  opacity: 0.7 !important;
}

.bg-overlay[data-op="8"]::after {
  opacity: 0.8 !important;
}

.bg-overlay[data-op="9"]::after {
  opacity: 0.9 !important;
}

.bg-overlay[data-style="1"]::after {
  background: oklch(100% 0 0deg);
}

.bg-overlay[data-style="2"]::after {
  background: oklch(54.6% 0.245 262.881deg);
}

.bg-overlay[data-style="3"]::after {
  background: linear-gradient(140deg, #7c1bd6 0%, #31049b 100%);
}

.bg-overlay[data-style="4"]::after {
  background: -webkit-gradient(linear, left bottom, left top, from(rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0));
}

.bg-overlay[data-style="5"]::after {
  background: radial-gradient(circle at left top, #09c8e6 20%, #2250fc 38%, #bc39e4 66%);
}

.bg-overlay[data-style="6"]::after {
  background: radial-gradient(circle at left top, #fe68bb 38%, #4294fa 66%);
}

.bg-overlay[data-style="7"]::after {
  background: radial-gradient(circle at right top, rgb(196, 214, 34) 20%, rgb(147, 216, 57) 38%, #4294fa 66%);
}

.bg-overlay[data-style="8"]::after {
  background: -webkit-gradient(linear, left top, left bottom, from(#e02b20), to(#720462));
  background: linear-gradient(180deg, #e02b20 0%, #720462 100%);
}

.bg-overlay[data-style="9"]::after {
  background: radial-gradient(circle at center, #00a6c0 0%, #0c71c3 100%);
}

.bg-overlay[data-style="10"]::after {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.99)));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.99) 100%);
}

.bg-overlay[data-style="11"]::after {
  background: -webkit-gradient(linear, left top, right top, from(rgb(0, 144, 240)), to(#5d08e6));
  background: linear-gradient(90deg, rgb(0, 144, 240) 0%, #5d08e6 100%);
}

.bg-overlay[data-style="12"]::after {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ba01ff), to(#ff0092));
  background: linear-gradient(to bottom, #ba01ff 0, #ff0092 100%);
}

.bg-overlay[data-style="13"]::after {
  background-image: url(../images/bg/overlay.png);
  opacity: 1;
}

.bg-overlay[data-style="14"]::after {
  background-image: url(../images/bg/01.png);
  opacity: 1;
}

.bg-overlay[data-style="15"]::after {
  background-image: url(../images/bg/02.png);
  opacity: 1;
}

.bg-overlay[data-style="16"]::after {
  background-image: url(../images/bg/03.png);
  opacity: 1;
}

.bg-overlay[data-style="17"]::after {
  background-image: url(../images/bg/04.png);
  opacity: 1;
}

.bg-overlay[data-style="18"]::after {
  background-image: url(../images/bg/05.png);
  opacity: 1;
}

.bg-overlay[data-style="19"]::after {
  background-image: url(../images/bg/06.png);
  opacity: 1;
}

.bg-overlay[data-style="20"]::after {
  background-image: url(../images/bg/07.png);
  opacity: 1;
}

.bg-overlay[data-style="21"]::after {
  background-image: url(../images/bg/08.png);
  opacity: 1;
}

.bg-overlay[data-style="22"]::after {
  background-image: url(../images/bg/09.png);
  opacity: 1;
}

.bg-overlay[data-style="100"]::after {
  background: linear-gradient(cyan, transparent), linear-gradient(-45deg, magenta, transparent), linear-gradient(45deg, yellow, transparent);
  background-blend-mode: multiply;
  opacity: 1;
}

.bg-overlay > * {
  position: relative;
  z-index: 1;
}

.bg-gradient-1 {
  background: -webkit-gradient(linear, left top, right top, from(#171f21), to(#3e5b69));
  background: linear-gradient(to right, #171f21, #3e5b69);
}

.bg-svg-1 {
  background: #fff url("data:image/svg+xml,%3Csvg width='1280' height='710' xmlns='http://www.w3.org/2000/svg'%3E %3Cg fill='%231e51c9' fill-rule='evenodd'%3E %3Cpath d='M0 63.354c47.677-2.931 102.14 12.343 163.387 45.822 91.87 50.22 126.954 158.927 248.81 226.016 121.856 67.09 217.644 28.645 324.582 86.582C843.72 479.71 882.997 594 979.392 646.458c64.263 34.971 130.87 56.185 199.821 63.641H0V63.354z'/%3E %3Cpath d='M0 1.393C50.612-3.2 109.835 13.082 177.667 50.234c101.749 55.73 130.439 163.5 265.397 237.95 134.958 74.45 204.648 26.67 323.085 90.963 118.436 64.293 142.832 176.85 249.59 235.062 71.173 38.808 167.927 70.771 290.261 95.89H0V1.393z' opacity='.7'/%3E %3C/g%3E %3C/svg%3E") left bottom/60% no-repeat;
}

.bg-svg-2 {
  background: #fff url("data:image/svg+xml,%3Csvg width='615' height='554' xmlns='http://www.w3.org/2000/svg'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Cpath d='M463.283 528.726c45.144 0 95.716 8.237 151.717 24.712V0H41.584C28.58 76.038-4.694 126.702.957 203.448c16.342 221.959 215.179 325.278 462.326 325.278z' fill='%239592FB'/%3E %3Cpath d='M382.319 485.092c54.57 14.534 187.124 6.139 232.681-13.977V0H122.36c-16.232 41.585 18.088 107.04 18.088 154.372 0 203.855 45.087 278.309 241.87 330.72z' fill='%238B87FA'/%3E %3Cpath d='M443.883 440.71c54.208 0 128.702-54.567 171.117-81.896V0H231.198c-21.166 38.7-14.497 103.867-14.497 151.086 0 150.221 76.96 289.624 227.182 289.624z' fill='%207F7BFB'/%3E %3C/g%3E %3C/svg%3E") top right no-repeat;
}

.bg-svg-3 {
  background: #fff url("data:image/svg+xml,%3Csvg width='1280' height='433' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M0 0h1280L0 433z' fill='%237F7BFB' fill-rule='evenodd'/%3E %3C/svg%3E ") top/100% no-repeat fixed;
}

.body-bg {
  background-image: url("../images/bg/bg-body.svg");
}

.tw,
.text-white {
  color: oklch(100% 0 0deg);
}

.tb {
  color: var(--framex-base-color-text);
}

.color {
  color: var(--framex-base-color-primary) !important;
}

.bw {
  background-color: var(--framex-base-color-bg-foreground) !important;
}

.text-muted {
  color: var(--framex-base-color-muted);
}

.text-eyebrow {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--framex-base-color-primary);
  margin-bottom: 0.4rem;
  line-height: 1.3;
}

.bg-body {
  background-color: var(--framex-base-color-background);
}

.text-slate {
  color: oklch(57% 0.017 255deg) !important;
}

.text-hover-slate:hover {
  color: oklch(57% 0.017 255deg) !important;
}

.text-gray {
  color: oklch(57% 0.007 250deg) !important;
}

.text-hover-gray:hover {
  color: oklch(57% 0.007 250deg) !important;
}

.text-zinc {
  color: oklch(57% 0.01 260deg) !important;
}

.text-hover-zinc:hover {
  color: oklch(57% 0.01 260deg) !important;
}

.text-neutral {
  color: oklch(56% 0.014 250deg) !important;
}

.text-hover-neutral:hover {
  color: oklch(56% 0.014 250deg) !important;
}

.text-stone {
  color: oklch(57% 0.017 70deg) !important;
}

.text-hover-stone:hover {
  color: oklch(57% 0.017 70deg) !important;
}

.text-red {
  color: oklch(63% 0.5 25deg) !important;
}

.text-hover-red:hover {
  color: oklch(63% 0.5 25deg) !important;
}

.text-orange {
  color: oklch(70.5% 0.213 47.604deg) !important;
}

.text-hover-orange:hover {
  color: oklch(70.5% 0.213 47.604deg) !important;
}

.text-amber {
  color: oklch(76.9% 0.188 70.08deg) !important;
}

.text-hover-amber:hover {
  color: oklch(76.9% 0.188 70.08deg) !important;
}

.text-yellow {
  color: oklch(79.5% 0.184 86.047deg) !important;
}

.text-hover-yellow:hover {
  color: oklch(79.5% 0.184 86.047deg) !important;
}

.text-lime {
  color: oklch(76.8% 0.233 130.85deg) !important;
}

.text-hover-lime:hover {
  color: oklch(76.8% 0.233 130.85deg) !important;
}

.text-green {
  color: oklch(72.3% 0.219 149.579deg) !important;
}

.text-hover-green:hover {
  color: oklch(72.3% 0.219 149.579deg) !important;
}

.text-emerald {
  color: oklch(69.6% 0.17 162.48deg) !important;
}

.text-hover-emerald:hover {
  color: oklch(69.6% 0.17 162.48deg) !important;
}

.text-teal {
  color: oklch(70.4% 0.14 182.503deg) !important;
}

.text-hover-teal:hover {
  color: oklch(70.4% 0.14 182.503deg) !important;
}

.text-cyan {
  color: oklch(71.5% 0.143 215.221deg) !important;
}

.text-hover-cyan:hover {
  color: oklch(71.5% 0.143 215.221deg) !important;
}

.text-sky {
  color: oklch(68.5% 0.169 237.323deg) !important;
}

.text-hover-sky:hover {
  color: oklch(68.5% 0.169 237.323deg) !important;
}

.text-blue {
  color: oklch(54.6% 0.245 262.881deg) !important;
}

.text-hover-blue:hover {
  color: oklch(54.6% 0.245 262.881deg) !important;
}

.text-indigo {
  color: oklch(58.5% 0.233 277.117deg) !important;
}

.text-hover-indigo:hover {
  color: oklch(58.5% 0.233 277.117deg) !important;
}

.text-violet {
  color: oklch(60.6% 0.25 292.717deg) !important;
}

.text-hover-violet:hover {
  color: oklch(60.6% 0.25 292.717deg) !important;
}

.text-purple {
  color: oklch(62.7% 0.265 303.9deg) !important;
}

.text-hover-purple:hover {
  color: oklch(62.7% 0.265 303.9deg) !important;
}

.text-fuchsia {
  color: oklch(66.7% 0.295 322.15deg) !important;
}

.text-hover-fuchsia:hover {
  color: oklch(66.7% 0.295 322.15deg) !important;
}

.text-pink {
  color: oklch(65.6% 0.241 354.308deg) !important;
}

.text-hover-pink:hover {
  color: oklch(65.6% 0.241 354.308deg) !important;
}

.text-rose {
  color: oklch(64.5% 0.246 16.439deg) !important;
}

.text-hover-rose:hover {
  color: oklch(64.5% 0.246 16.439deg) !important;
}

.text-success {
  color: oklch(72.3% 0.219 149.579deg) !important;
}

.text-hover-success:hover {
  color: oklch(72.3% 0.219 149.579deg) !important;
}

.text-danger {
  color: oklch(63% 0.5 25deg) !important;
}

.text-hover-danger:hover {
  color: oklch(63% 0.5 25deg) !important;
}

.text-warning {
  color: oklch(79.5% 0.184 86.047deg) !important;
}

.text-hover-warning:hover {
  color: oklch(79.5% 0.184 86.047deg) !important;
}

.text-info {
  color: oklch(71.5% 0.143 215.221deg) !important;
}

.text-hover-info:hover {
  color: oklch(71.5% 0.143 215.221deg) !important;
}

.text-dark {
  color: oklch(37% 0.012 250deg) !important;
}

.text-hover-dark:hover {
  color: oklch(37% 0.012 250deg) !important;
}

.text-primary {
  color: oklch(54.6% 0.245 262.881deg) !important;
}

.text-hover-primary:hover {
  color: oklch(54.6% 0.245 262.881deg) !important;
}

.text-secondary {
  color: oklch(62.7% 0.265 303.9deg) !important;
}

.text-hover-secondary:hover {
  color: oklch(62.7% 0.265 303.9deg) !important;
}

.btn, .btn-toggle, .btn-dd {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  text-align: center;
  display: inline-block;
}

.btn-sm {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.btn-sm svg,
.btn-sm i,
.btn-sm span.icon {
  margin-right: 0.7rem;
  display: inline-block;
  line-height: 0;
  vertical-align: middle;
}
.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
}

.btn-md {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.btn-md svg,
.btn-md i,
.btn-md span.icon {
  margin-right: 0.7rem;
  display: inline-block;
  line-height: 0;
  vertical-align: middle;
}
.btn-md {
  padding: 0.5rem 1rem;
  font-size: 1rem;
}

.btn-lg {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.btn-lg svg,
.btn-lg i,
.btn-lg span.icon {
  margin-right: 0.7rem;
  display: inline-block;
  line-height: 0;
  vertical-align: middle;
}
.btn-lg {
  padding: 0.75rem 1.25rem;
  font-size: 1.125rem;
}

.btn-xl {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.btn-xl svg,
.btn-xl i,
.btn-xl span.icon {
  margin-right: 0.7rem;
  display: inline-block;
  line-height: 0;
  vertical-align: middle;
}
.btn-xl {
  padding: 1rem 1.5rem;
  font-size: 1.25rem;
}

.btn-group {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: 0.5rem;
}
.btn-group .btn, .btn-group .btn-toggle, .btn-group .btn-dd {
  margin: 0;
}

.btn-icon, .btn-icon-circle {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.btn-icon svg, .btn-icon-circle svg,
.btn-icon i,
.btn-icon-circle i,
.btn-icon span.icon,
.btn-icon-circle span.icon {
  margin-right: 0.7rem;
  display: inline-block;
  line-height: 0;
  vertical-align: middle;
}
.btn-icon, .btn-icon-circle {
  padding: 6px 8px !important;
  font-size: 1rem;
  width: auto;
  height: auto;
  line-height: 1;
}
.btn-icon svg, .btn-icon-circle svg,
.btn-icon i,
.btn-icon-circle i,
.btn-icon .icon,
.btn-icon-circle .icon {
  margin: 0;
}

.btn-icon-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  padding: 0;
}
.btn-icon-circle svg,
.btn-icon-circle i,
.btn-icon-circle .icon {
  font-size: 1.125rem;
}

.btn-group-vertical {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}
.btn-group-vertical .btn, .btn-group-vertical .btn-toggle, .btn-group-vertical .btn-dd {
  margin: 0;
}

.btn-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.btn:disabled, .btn-toggle:disabled, .btn-dd:disabled,
.btn.is-disabled,
.is-disabled.btn-toggle,
.is-disabled.btn-dd {
  opacity: 0.6;
  pointer-events: none;
  cursor: not-allowed;
}

.btn.icon-right, .icon-right.btn-toggle, .icon-right.btn-dd {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.btn.icon-right svg, .icon-right.btn-toggle svg, .icon-right.btn-dd svg,
.btn.icon-right i,
.icon-right.btn-toggle i,
.icon-right.btn-dd i,
.btn.icon-right .icon,
.icon-right.btn-toggle .icon,
.icon-right.btn-dd .icon {
  margin-left: 0.7rem;
  margin-right: 0;
}

.dd {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: middle;
}
.dd:focus-within > .dd-menu {
  opacity: 1;
  -webkit-transform: translateY(0) scale(1);
          transform: translateY(0) scale(1);
  pointer-events: auto;
}
.dd.is-open > .dd-menu {
  opacity: 1;
  -webkit-transform: translateY(0) scale(1);
          transform: translateY(0) scale(1);
  pointer-events: auto;
}

.btn-dd::after {
  content: "";
  display: inline-block;
  margin-left: 0.5rem;
  width: 0;
  height: 0;
  border: 0.3rem solid transparent;
  border-top-color: currentColor;
  -webkit-transform: translateY(1px);
          transform: translateY(1px);
}
.btn-dd.btn-icon::after, .btn-dd.btn-icon-circle::after {
  content: "";
  display: inline-block;
  margin-left: 0.5rem;
  width: 0;
  height: 0;
  border: 0.3rem solid transparent;
  border-top-color: currentColor;
  -webkit-transform: translateY(1px);
          transform: translateY(1px);
}
.btn-dd.btn-icon, .btn-dd.btn-icon-circle {
  padding-right: 0.75rem;
}

.btn-dd.dd-no-caret::after,
.btn-toggle.dd-no-caret::after {
  content: none !important;
  display: none !important;
}

.btn-split {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  border-radius: 0.25rem;
  overflow: hidden;
}
.btn-split > .btn:first-child, .btn-split > .btn-toggle:first-child, .btn-split > .btn-dd:first-child {
  border-radius: 0.25rem 0 0 0.25rem;
}
.btn-split > .btn-toggle {
  border-radius: 0 0.25rem 0.25rem 0;
}
.btn-split > .btn + .btn-toggle, .btn-split > .btn-toggle + .btn-toggle, .btn-split > .btn-dd + .btn-toggle {
  margin-left: 0;
}

.btn-toggle::after {
  content: "";
  display: inline-block;
  margin-left: 0.5rem;
  width: 0;
  height: 0;
  border: 0.3rem solid transparent;
  border-top-color: currentColor;
  -webkit-transform: translateY(1px);
          transform: translateY(1px);
}
.btn-toggle {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  min-width: 2.25rem;
}

.dd-menu {
  position: absolute;
  z-index: 1000;
  min-width: var(--dropdown-min-width, 12rem);
  margin-top: 0.375rem;
  padding: 0.375rem;
  background: var(--dropdown-bg, #fff);
  color: var(--dropdown-color, #111);
  border: 1px solid var(--dropdown-border, rgba(0, 0, 0, 0.08));
  border-radius: var(--dropdown-radius, 0.5rem);
  -webkit-box-shadow: var(--dropdown-shadow, 0 8px 24px rgba(0, 0, 0, 0.12));
          box-shadow: var(--dropdown-shadow, 0 8px 24px rgba(0, 0, 0, 0.12));
  top: 100%;
  left: 0;
  right: auto;
  opacity: 0;
  -webkit-transform: translateY(0.25rem) scale(0.98);
          transform: translateY(0.25rem) scale(0.98);
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transition: opacity 0.12s ease, -webkit-transform 0.12s ease;
  transition: opacity 0.12s ease, -webkit-transform 0.12s ease;
  transition: opacity 0.12s ease, transform 0.12s ease;
  transition: opacity 0.12s ease, transform 0.12s ease, -webkit-transform 0.12s ease;
  pointer-events: none;
}
.dd-menu .dd-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  padding: 0.5rem 0.875rem;
  border-radius: 0.375rem;
  font-size: 0.95rem;
  text-decoration: none;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.dd-menu .dd-item svg, .dd-menu .dd-item i, .dd-menu .dd-item .icon {
  margin-right: 0.5rem;
  font-size: 1.05em;
}
.dd-menu .dd-item:hover, .dd-menu .dd-item:focus-visible {
  background: var(--dropdown-hover-bg, color-mix(in srgb, currentColor 6%, transparent));
  outline: none;
}
.dd.dd--kb .dd-menu .dd-item :focus {
  background: var(--dropdown-hover-bg, color-mix(in srgb, currentColor 6%, transparent));
  outline: none;
}
.dd-menu .dd-item.is-active {
  background: var(--dropdown-active-bg, color-mix(in srgb, currentColor 8%, transparent));
  font-weight: 600;
}
.dd-menu .dd-item.is-disabled, .dd-menu .dd-item:disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}
.dd-menu .dd-divider {
  height: 1px;
  margin: 0.375rem 0;
  background: var(--dropdown-border, rgba(0, 0, 0, 0.08));
}
.dd-menu .dd-header {
  padding: 0.375rem 0.875rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.75;
}

.dd.drop-end > .dd-menu, .dd.dropright > .dd-menu {
  left: auto;
  right: 0;
  -webkit-transform-origin: top right;
          transform-origin: top right;
}
.dd.drop-up > .dd-menu, .dd.dropup > .dd-menu {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 0.375rem;
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
}
.dd.drop-start > .dd-menu, .dd.dropleft > .dd-menu {
  left: 0;
  right: auto;
  -webkit-transform-origin: top left;
          transform-origin: top left;
}

.dd .btn-sm::after,
.btn-split .btn-sm::after,
.btn-sm.btn-dd::after,
.btn-sm.btn-toggle::after {
  border-width: 0.25rem;
}
.dd .btn-sm + .dd-menu,
.btn-split .btn-sm + .dd-menu,
.btn-sm.btn-dd + .dd-menu,
.btn-sm.btn-toggle + .dd-menu {
  font-size: 0.9rem;
}
.dd .btn-sm + .dd-menu .dd-item,
.btn-split .btn-sm + .dd-menu .dd-item,
.btn-sm.btn-dd + .dd-menu .dd-item,
.btn-sm.btn-toggle + .dd-menu .dd-item {
  padding: 0.4rem 0.7rem;
}

.dd .btn-lg::after,
.btn-split .btn-lg::after,
.btn-lg.btn-dd::after,
.btn-lg.btn-toggle::after {
  border-width: 0.35rem;
}
.dd .btn-lg + .dd-menu,
.btn-split .btn-lg + .dd-menu,
.btn-lg.btn-dd + .dd-menu,
.btn-lg.btn-toggle + .dd-menu {
  font-size: 1.05rem;
}
.dd .btn-lg + .dd-menu .dd-item,
.btn-split .btn-lg + .dd-menu .dd-item,
.btn-lg.btn-dd + .dd-menu .dd-item,
.btn-lg.btn-toggle + .dd-menu .dd-item {
  padding: 0.6rem 1rem;
}

.dd .btn-xl::after,
.btn-split .btn-xl::after,
.btn-xl.btn-dd::after,
.btn-xl.btn-toggle::after {
  border-width: 0.4rem;
}
.dd .btn-xl + .dd-menu,
.btn-split .btn-xl + .dd-menu,
.btn-xl.btn-dd + .dd-menu,
.btn-xl.btn-toggle + .dd-menu {
  font-size: 1.125rem;
}
.dd .btn-xl + .dd-menu .dd-item,
.btn-split .btn-xl + .dd-menu .dd-item,
.btn-xl.btn-dd + .dd-menu .dd-item,
.btn-xl.btn-toggle + .dd-menu .dd-item {
  padding: 0.75rem 1.125rem;
}

a.btn, a.btn-dd, a.btn-toggle {
  text-decoration: none;
}
a.btn:hover, a.btn-dd:hover, a.btn-toggle:hover {
  text-decoration: none;
}

::-moz-selection {
  background-color: var(--framex-selection-color-background);
  color: var(--framex-selection-color-foreground);
  text-shadow: none;
}

::selection {
  background-color: var(--framex-selection-color-background);
  color: var(--framex-selection-color-foreground);
  text-shadow: none;
}

html {
  font-size: 100%;
  height: 100%;
}

body {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background: var(--framex-base-color-background);
  color: var(--framex-base-color-text);
  letter-spacing: 0;
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
}

.wrp,
footer {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.wrp {
  -ms-flex-positive: 1;
  -webkit-box-flex: 1;
          flex-grow: 1;
}

p,
li,
h1,
h2,
h3,
h4,
h5,
h6 {
  -ms-hyphens: auto;
      hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5 {
  margin-top: 1rem;
  margin-bottom: 1rem;
  color: var(--framex-base-color-heading);
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  color: inherit;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  line-height: calc(2px + 2ex + 2px);
  letter-spacing: 0;
}

h1,
.h1 {
  font-size: clamp(2rem, 1.7rem + 1.5vw, 2.5rem);
}

h2,
.h2 {
  font-size: clamp(1.75rem, 1.4rem + 1vw, 2rem);
}

h3,
.h3 {
  font-size: clamp(1.5rem, 1.3rem + 0.5vw, 1.75rem);
}

h4,
.h4 {
  font-size: clamp(1.25rem, 1.1rem + 0.3vw, 1.5rem);
}

h5,
.h5 {
  font-size: clamp(1.125rem, 1rem + 0.2vw, 1.25rem);
}

h6,
.h6 {
  font-size: clamp(1rem, 0.95rem + 0.1vw, 1.125rem);
}

.display-1 {
  font-size: clamp(1.61243136rem, 4vw + 1rem, 3.5831808rem);
}

.display-2 {
  font-size: clamp(1.7915904rem, 4vw + 1rem, 2.985984rem);
}

.display-3 {
  font-size: clamp(1.741824rem, 4vw + 1rem, 2.48832rem);
}

ul,
ol {
  list-style-position: inside;
}
ul li,
ol li {
  list-style-position: outside;
}
ul li::marker,
ol li::marker {
  color: var(--framex-base-color-marker);
}

dl dt {
  color: var(--framex-base-color-heading);
  font-weight: bold;
}
dl dd {
  margin: 0;
}
dl dd + dt {
  -webkit-margin-before: 1rem;
          margin-block-start: 1rem;
}

.quote > * {
  -webkit-margin-after: 0;
          margin-block-end: 0;
  -webkit-margin-before: 0;
          margin-block-start: 0;
}
.quote > * + * {
  -webkit-margin-before: 0.5rem;
          margin-block-start: 0.5rem;
}
.quote {
  -webkit-border-start: 0.5rem solid var(--framex-base-color-blockquote-border);
          border-inline-start: 0.5rem solid var(--framex-base-color-blockquote-border);
  -webkit-padding-start: 1.2rem;
          padding-inline-start: 1.2rem;
}
.quote blockquote {
  -webkit-border-start: 0;
          border-inline-start: 0;
  -webkit-padding-start: 0;
          padding-inline-start: 0;
}
.quote figcaption {
  text-align: start;
}

blockquote > * {
  -webkit-margin-after: 0;
          margin-block-end: 0;
  -webkit-margin-before: 0;
          margin-block-start: 0;
}
blockquote > * + * {
  -webkit-margin-before: 0.5rem;
          margin-block-start: 0.5rem;
}
blockquote {
  -webkit-border-start: 0.5rem solid var(--framex-base-color-blockquote-border);
          border-inline-start: 0.5rem solid var(--framex-base-color-blockquote-border);
  -webkit-margin-start: 0;
          margin-inline-start: 0;
  -webkit-padding-start: 1.2rem;
          padding-inline-start: 1.2rem;
}

abbr[title] {
  -webkit-border-after: 1px dotted;
          border-block-end: 1px dotted;
  cursor: help;
  text-decoration: none;
}

mark {
  background-color: var(--framex-base-color-mark-background);
  border-radius: 0.425rem;
  color: var(--framex-base-color-mark-foreground);
  padding: 0.1em 0.3em;
}

.lead {
  font-size: clamp(1.15rem, 2vw, 1.35rem);
}

a {
  color: var(--framex-base-color-link);
  text-decoration: none;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
}
a:hover {
  color: var(--framex-base-color-link-hover);
}

button {
  color: inherit;
}

a,
button {
  -ms-touch-action: manipulation;
      touch-action: manipulation;
}

p {
  margin: 0;
}
p + p {
  margin-top: 1rem;
}
p:last-child {
  margin-bottom: 0;
}

.text-sm {
  font-size: 0.875rem;
}

.text-lg {
  font-size: clamp(1.234rem, 2vw, 1.25rem);
}

.tc {
  text-align: center;
}

@media only screen and (max-width: 767.999px) {
  .text-center-md-max {
    text-align: center;
  }
}

@media only screen and (max-width: 991.999px) {
  .text-center-lg-max {
    text-align: center;
  }
}

.text-italic {
  font-style: italic;
}

/* Text shadow */
.text-shadow-large {
  text-shadow: 0 0 50px rgba(0, 0, 0, 0.9);
}

.text-shadow-extra-large {
  text-shadow: 0 0 60px rgba(0, 0, 0, 0.9);
}

.text-shadow-double-large {
  text-shadow: 0 0 100px rgba(0, 0, 0, 0.9);
}

/* Text bottom line */
.text-decoration-line-bottom {
  border-bottom: 1px solid;
}

.text-decoration-line-bottom-medium {
  border-bottom: 2px solid;
}

.text-decoration-line-bottom-thick {
  border-bottom: 3px solid;
}

.text-decoration-line-through {
  text-decoration: line-through;
}

.hyphens {
  -ms-hyphens: auto;
      hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

video {
  background-size: cover;
  display: table-cell;
  vertical-align: middle;
  width: 100%;
}

:focus-visible {
  outline: none;
}

.fw-100 {
  font-weight: 100 !important;
}

.fw-200 {
  font-weight: 200 !important;
}

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

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

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

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

.fw-700 {
  font-weight: 700 !important;
}

.fw-800 {
  font-weight: 800 !important;
}

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

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

.font-15 {
  font-size: 15px !important;
}

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

.font-18 {
  font-size: 18px !important;
}

.font-20 {
  font-size: 20px !important;
}

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

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

.font-28 {
  font-size: 28px !important;
}

.font-30 {
  font-size: 30px !important;
}

.font-34 {
  font-size: 34px !important;
}

.font-38 {
  font-size: 38px !important;
}

.font-42 {
  font-size: 42px !important;
}

.font-50 {
  font-size: 50px !important;
}

.font-60 {
  font-size: 60px !important;
}

.font-70 {
  font-size: 70px !important;
}

:root {
  --sidebarHeaderBack: oklch(18% 0.009 255deg);
  --sidebarBackground: oklch(18% 0.009 255deg);
  --sidebarColor: #ccc;
  --sidebarLinkHover: #0017ab;
}

#sidebar {
  background: var(--sidebarBackground);
  color: var(--sidebarColor);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 265px;
          flex: 0 0 265px;
  max-width: 265px;
  min-width: 265px;
  height: 100%;
  overflow-y: auto;
}
#sidebar .sidebar-header {
  padding: 20px;
  background: var(--sidebarHeaderBack);
  color: var(--sidebarColor);
}
#sidebar ul.sidebarMenu {
  list-style: none;
  margin: 0;
  padding: 20px;
}
#sidebar ul.sidebarMenu li a {
  padding: 7px 10px;
  font-size: 1rem;
  display: block;
  color: var(--sidebarColor);
  text-decoration: none;
}
#sidebar ul.sidebarMenu li a:hover {
  color: #fff;
  border-radius: 8px;
  background: var(--sidebarLinkHover);
}
#sidebar ul.sidebarMenu li ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#sidebar ul.sidebarMenu li ul li a {
  padding-left: 30px;
  display: block;
}

.wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  width: 100%;
}

#contentMain {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  min-height: 100vh;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  padding: 1rem;
}

#sidebar.active {
  margin-left: -265px;
}

@media only screen and (max-width: 991.999px) {
  .wrapper {
    position: relative;
  }
  #sidebar {
    position: absolute;
    z-index: 1;
    -webkit-transform: translateX(-265px);
            transform: translateX(-265px);
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
    margin-left: 0;
  }
  #sidebar.active {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    margin-left: 0;
  }
  #sidebarCollapse {
    float: right;
    margin-left: 5px;
  }
}
.flash-message {
  padding: 1rem;
  border-radius: 5px;
  margin: 10px 0;
}
.flash-message.success {
  background-color: #dff0d8;
  color: #3c763d;
}
.flash-message.error {
  background-color: #f2dede;
  color: #a94442;
}
.flash-message.info {
  background-color: #e3f2fd;
  color: #4090b7;
}

.table-responsive {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-responsive .table {
  min-width: -webkit-max-content;
  min-width: -moz-max-content;
  min-width: max-content;
}
.table-responsive .table th, .table-responsive .table td {
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.flash-message {
  padding: 1rem;
  border-radius: 5px;
  margin: 10px 0;
}

.flash-message.success {
  background-color: #dff0d8;
  color: #3c763d;
}

.flash-message.error {
  background-color: #f2dede;
  color: #a94442;
}

.flash-message.info {
  background-color: #e3f2fd;
  color: #4090b7;
}

.navbar {
  --nav-height: 80px;
  --navbar-bg: var(--framex-base-color-bg-nav);
  --navbar-bg-scrolled: var(--framex-base-color-bg-nav);
  --navbar-shadow: 0 2px 20px color-mix(in oklch, black 8%, transparent);
  --navbar-shadow-scrolled: 0 4px 30px color-mix(in oklch, black 12%, transparent);
  --navbar-text: var(--framex-base-color-text);
  --navbar-text-hover: var(--framex-base-color-primary);
  --navbar-accent: var(--framex-base-color-primary);
  --navbar-accent-hover: var(--color-interactive-hover);
  --navbar-link-hover-bg: color-mix(in oklch, var(--framex-base-color-primary) 5%, transparent);
  --navbar-megalink-hover-bg: color-mix(in oklch, var(--framex-base-color-primary) 10%, transparent);
  --dropdown-bg: var(--framex-base-color-bg-nav-dropdown);
  --dropdown-text: var(--framex-base-color-text);
  --dropdown-text-hover: var(--framex-base-color-primary);
  --mega-menu-bg: var(--framex-base-color-bg-nav-dropdown);
  --mega-menu-title: var(--framex-base-color-muted);
  --mega-menu-border: var(--framex-base-color-border);
  --mega-menu-text: var(--framex-base-color-text);
  --mega-menu-text-hover: var(--framex-base-color-primary);
  --mega-menu-desc: var(--framex-base-color-muted);
  --mega-menu-featured-bg: color-mix(in oklch, var(--framex-base-color-primary) 10%, transparent);
  --mega-menu-card-bg: linear-gradient(135deg, var(--framex-base-color-primary) 0%, var(--primitive-info-500) 100%);
  --mobile-menu-bg: var(--framex-base-color-bg-nav-dropdown);
  --mobile-menu-border: var(--framex-base-color-border);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  height: var(--nav-height);
  background: var(--navbar-bg, var(--framex-base-color-bg-nav));
  -webkit-transition: all 0.35s var(--navbar-transition-easing, cubic-bezier(0.37, 0, 0.63, 1));
  transition: all 0.35s var(--navbar-transition-easing, cubic-bezier(0.37, 0, 0.63, 1));
}
.navbar.is-scrolled {
  --nav-height: 60px;
  background: var(--navbar-bg-scrolled, var(--framex-base-color-bg-nav));
  -webkit-box-shadow: var(--navbar-shadow-scrolled, 0 4px 30px color-mix(in oklch, black 12%, transparent));
  box-shadow: var(--navbar-shadow-scrolled, 0 4px 30px color-mix(in oklch, black 12%, transparent));
}
.navbar.is-transparent {
  --navbar-bg: transparent;
  --navbar-bg-scrolled: var(--framex-base-color-bg-nav);
}
.navbar.is-dark {
  --navbar-bg: var(--framex-base-color-bg-nav);
  --navbar-bg-scrolled: var(--framex-base-color-bg-nav);
  --dropdown-bg: var(--framex-base-color-bg-nav-dropdown);
  --mega-menu-bg: var(--framex-base-color-bg-nav-dropdown);
}

.navbar-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 100%;
  max-width: var(--navbar-container-max-width, 1400px);
  margin: 0 auto;
  padding: 0 var(--navbar-container-padding-x, 1.5rem);
}
@media (min-width: 1199px) {
  .navbar-container {
    padding: 0 var(--navbar-container-padding-x-tablet, 3rem);
  }
}

.navbar-brand {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.navbar-brand:hover {
  text-decoration: none;
}

.navbar-logo {
  height: calc(var(--nav-height) - var(--navbar-logo-offset, 30px));
  width: auto;
  -webkit-transition: height 0.35s var(--navbar-transition-easing, cubic-bezier(0.37, 0, 0.63, 1));
  transition: height 0.35s var(--navbar-transition-easing, cubic-bezier(0.37, 0, 0.63, 1));
}
.navbar-logo img {
  height: 100%;
  width: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

.navbar-logo-text {
  font-size: var(--navbar-logo-font-size, 1.5rem);
  font-weight: var(--navbar-logo-font-weight, 700);
  letter-spacing: var(--navbar-logo-letter-spacing, -0.02em);
  color: var(--navbar-text, inherit);
}
.navbar-logo-text span {
  color: var(--navbar-accent, var(--framex-base-color-primary));
}

.navbar-nav {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  max-width: 100vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--navbar-nav-gap-mobile, 0.25rem);
  list-style: none;
  margin: 0;
  padding: var(--navbar-nav-padding-mobile, 1.5rem);
  background: var(--mobile-menu-bg, var(--framex-base-color-bg-nav-dropdown));
  overflow-y: auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: transform 0.35s var(--navbar-transition-easing, cubic-bezier(0.37, 0, 0.63, 1));
  -webkit-transition: -webkit-transform 0.35s var(--navbar-transition-easing, cubic-bezier(0.37, 0, 0.63, 1));
  transition: -webkit-transform 0.35s var(--navbar-transition-easing, cubic-bezier(0.37, 0, 0.63, 1));
  transition: transform 0.35s var(--navbar-transition-easing, cubic-bezier(0.37, 0, 0.63, 1));
  transition: transform 0.35s var(--navbar-transition-easing, cubic-bezier(0.37, 0, 0.63, 1)), -webkit-transform 0.35s var(--navbar-transition-easing, cubic-bezier(0.37, 0, 0.63, 1));
  z-index: 1029;
}
.navbar.is-mobile-open .navbar-nav {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
@media (min-width: 991px) {
  .navbar-nav {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: var(--navbar-nav-gap-desktop, 0.5rem);
    margin-left: var(--navbar-nav-margin-left-desktop, 1rem);
    padding: 0;
    background: none;
    overflow: visible;
    -webkit-transform: none;
            transform: none;
    z-index: auto;
  }
}

.navbar-item {
  position: relative;
}
@media (max-width: 991px) {
  .navbar-item {
    border-bottom: 1px solid var(--mobile-menu-border, var(--color-border-subtle));
  }
  .navbar-item:last-child {
    border-bottom: none;
  }
}

.navbar-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--navbar-link-gap, 0.375rem);
  padding: var(--navbar-link-padding-y, 0.5rem) var(--navbar-link-padding-x, 0.7rem);
  font-size: var(--navbar-link-font-size, 0.9375rem);
  font-weight: var(--navbar-link-font-weight, 500);
  color: var(--navbar-text, var(--framex-base-color-text));
  text-decoration: none;
  border-radius: var(--navbar-link-radius, 8px);
  -webkit-transition: all var(--navbar-transition-medium, 0.25s) ease;
  transition: all var(--navbar-transition-medium, 0.25s) ease;
}
.navbar-link:hover, .navbar-link:focus {
  color: var(--navbar-text-hover, var(--framex-base-color-primary));
  background: var(--navbar-link-hover-bg, color-mix(in oklch, var(--framex-base-color-primary) 5%, transparent));
  text-decoration: none;
}
.navbar-link.is-active {
  color: var(--navbar-accent, var(--framex-base-color-primary));
}
.navbar-item.has-dropdown > .navbar-link, .navbar-item.has-mega-menu > .navbar-link {
  padding-right: var(--navbar-link-padding-right-dropdown, 1.75rem);
}
.navbar-item.has-dropdown > .navbar-link::after, .navbar-item.has-mega-menu > .navbar-link::after {
  content: "";
  position: absolute;
  right: var(--navbar-indicator-right, 0.75rem);
  width: var(--navbar-indicator-size, 6px);
  height: var(--navbar-indicator-size, 6px);
  border-right: var(--navbar-indicator-stroke, 2px) currentColor solid;
  border-bottom: var(--navbar-indicator-stroke, 2px) currentColor solid;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition: transform var(--navbar-transition-medium, 0.25s) ease;
  -webkit-transition: -webkit-transform var(--navbar-transition-medium, 0.25s) ease;
  transition: -webkit-transform var(--navbar-transition-medium, 0.25s) ease;
  transition: transform var(--navbar-transition-medium, 0.25s) ease;
  transition: transform var(--navbar-transition-medium, 0.25s) ease, -webkit-transform var(--navbar-transition-medium, 0.25s) ease;
}
.navbar-item.is-open > .navbar-link::after {
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
  margin-top: var(--navbar-indicator-rotate-open-margin-top, 3px);
}
@media (max-width: 991px) {
  .navbar-link {
    width: 100%;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: var(--navbar-link-padding-y-mobile, 1rem) var(--navbar-link-padding-x-mobile, 0.75rem);
    border-radius: var(--navbar-link-radius-mobile, 6px);
  }
}

.navbar-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: var(--navbar-dropdown-min-width, 220px);
  padding: var(--navbar-dropdown-padding, 0.5rem);
  background: var(--dropdown-bg, var(--framex-base-color-bg-nav-dropdown));
  border-radius: 12px;
  -webkit-box-shadow: var(--dropdown-shadow, 0 10px 40px color-mix(in oklch, black 15%, transparent));
  box-shadow: var(--dropdown-shadow, 0 10px 40px color-mix(in oklch, black 15%, transparent));
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(var(--navbar-dropdown-offset-y, 10px));
          transform: translateY(var(--navbar-dropdown-offset-y, 10px));
  -webkit-transition: all var(--navbar-transition-medium, 0.25s) ease;
  transition: all var(--navbar-transition-medium, 0.25s) ease;
  list-style: none;
  margin: var(--navbar-dropdown-margin-top, 0.5rem) 0 0;
  z-index: 1001;
}
.navbar-item.is-open > .navbar-dropdown, .navbar-item:hover > .navbar-dropdown {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.navbar-dropdown.is-right {
  left: auto;
  right: 0;
}
@media (max-width: 991px) {
  .navbar-dropdown {
    position: static;
    top: auto;
    left: auto;
    min-width: 0;
    padding: var(--navbar-dropdown-mobile-padding-top, 0.25rem) 0 var(--navbar-dropdown-mobile-padding-bottom, 0.75rem) var(--navbar-dropdown-mobile-padding-left, 0.75rem);
    background: transparent;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    -webkit-transform: none;
            transform: none;
    margin: 0;
    display: none;
  }
  .navbar-item.is-open > .navbar-dropdown {
    display: block;
  }
}

.navbar-dropdown-item {
  position: relative;
}

.navbar-dropdown-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--navbar-dropdown-link-gap, 0.75rem);
  padding: var(--navbar-dropdown-link-padding-y, 0.75rem) var(--navbar-dropdown-link-padding-x, 1rem);
  font-size: var(--navbar-dropdown-font-size, 0.9375rem);
  color: var(--dropdown-text, var(--framex-base-color-text));
  text-decoration: none;
  border-radius: var(--navbar-dropdown-item-radius, 8px);
  -webkit-transition: all var(--navbar-transition-fast, 0.2s) ease;
  transition: all var(--navbar-transition-fast, 0.2s) ease;
}
.navbar-dropdown-link:hover, .navbar-dropdown-link:focus {
  color: var(--dropdown-text-hover, var(--framex-base-color-primary));
  background: color-mix(in oklch, var(--framex-base-color-primary) 10%, transparent);
  text-decoration: none;
}
.navbar-dropdown-link i,
.navbar-dropdown-link .icon {
  width: var(--navbar-dropdown-icon-size, 20px);
  height: var(--navbar-dropdown-icon-size, 20px);
  opacity: 0.7;
}
.has-dropdown > .navbar-dropdown-link::after {
  content: "";
  margin-left: auto;
  width: var(--navbar-sub-indicator-size, 5px);
  height: var(--navbar-sub-indicator-size, 5px);
  border-right: var(--navbar-sub-indicator-stroke, 1.5px) currentColor solid;
  border-bottom: var(--navbar-sub-indicator-stroke, 1.5px) currentColor solid;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.navbar-dropdown .navbar-dropdown {
  top: 0;
  left: 100%;
  margin-top: 0;
  margin-left: var(--navbar-dropdown-nested-offset, 0.5rem);
}
.navbar-dropdown .navbar-dropdown.is-left {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: var(--navbar-dropdown-nested-offset, 0.5rem);
}
@media (max-width: 991px) {
  .navbar-dropdown .navbar-dropdown {
    position: static;
    left: auto;
    right: auto;
    margin: 0;
    padding-left: var(--navbar-dropdown-mobile-padding-left, 0.75rem);
  }
}

.navbar-mega-menu {
  position: fixed;
  top: var(--nav-height, 80px);
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(var(--navbar-mega-offset-y, 10px));
          transform: translateX(-50%) translateY(var(--navbar-mega-offset-y, 10px));
  width: min(100% - var(--navbar-mega-gutter, 3rem), var(--navbar-mega-columns, 4) * 16rem + (var(--navbar-mega-columns, 4) - 1) * var(--navbar-mega-grid-gap, 2rem) + 2 * var(--navbar-mega-padding, 2rem));
  max-width: var(--navbar-mega-max-width, 1200px);
  padding: var(--navbar-mega-padding, 2rem);
  background: var(--mega-menu-bg, var(--framex-base-color-bg-nav-dropdown));
  border-radius: var(--navbar-mega-radius, 16px);
  -webkit-box-shadow: var(--mega-menu-shadow, 0 20px 60px color-mix(in oklch, black 15%, transparent));
  box-shadow: var(--mega-menu-shadow, 0 20px 60px color-mix(in oklch, black 15%, transparent));
  opacity: 0;
  visibility: hidden;
  max-height: calc(100vh - var(--nav-height, 80px) - var(--navbar-mega-overflow-bottom-margin, 1.5rem));
  overflow-y: auto;
  -webkit-transition: all var(--navbar-transition-slow, 0.3s) ease;
  transition: all var(--navbar-transition-slow, 0.3s) ease;
  z-index: 1001;
}
.navbar-item.is-open > .navbar-mega-menu, .navbar-item:hover > .navbar-mega-menu {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateX(-50%) translateY(0);
          transform: translateX(-50%) translateY(0);
}
@media (max-width: 991px) {
  .navbar-mega-menu {
    position: static;
    top: auto;
    left: auto;
    width: 100%;
    max-width: none;
    max-height: none;
    overflow-y: visible;
    padding: 0;
    background: transparent;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    -webkit-transform: none;
            transform: none;
    display: none;
  }
  .navbar-item.is-open > .navbar-mega-menu {
    display: block;
  }
}

.navbar-mega-grid {
  display: grid;
  grid-template-columns: repeat(var(--navbar-mega-columns, 4), minmax(16rem, 1fr));
  gap: var(--navbar-mega-grid-gap, 2rem);
}
@media (max-width: 1199px) {
  .navbar-mega-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 991px) {
  .navbar-mega-grid {
    grid-template-columns: 1fr;
    gap: var(--navbar-mega-grid-gap-mobile, 0.75rem);
    margin-left: 0;
    padding: 0 0 0.75rem 0;
  }
}

@media (max-width: 991px) {
  .navbar-nav .navbar-dropdown,
  .navbar-nav .navbar-mega-menu {
    position: static;
    left: 0;
    right: 0;
    top: auto;
    width: 100%;
    max-width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-transform: none;
            transform: none;
    margin: 0;
    opacity: 1;
    visibility: visible;
    display: none;
  }
  .navbar-nav .navbar-item.is-open > .navbar-dropdown,
  .navbar-nav .navbar-item.is-open > .navbar-mega-menu {
    display: block;
  }
  .navbar-nav .navbar-item.is-open > .navbar-mega-menu,
  .navbar-nav .navbar-item:hover > .navbar-mega-menu {
    -webkit-transform: none;
            transform: none;
  }
  .navbar-nav .navbar-item.is-open > .navbar-mega-menu {
    padding-top: var(--navbar-mega-mobile-padding-top, 1rem);
  }
  .navbar-mega-column {
    gap: var(--navbar-mega-column-gap-mobile, 0.5rem);
  }
  .navbar-mega-title {
    margin-bottom: var(--navbar-mega-title-margin-bottom-mobile, 0.25rem);
    padding-bottom: var(--navbar-mega-title-padding-bottom-mobile, 0.5rem);
  }
  .navbar-mega-link {
    width: 100%;
    padding: var(--navbar-mega-link-padding-y-mobile, 0.625rem) var(--navbar-mega-link-padding-x-mobile, 0.75rem);
    border-radius: var(--navbar-mega-link-radius-mobile, 8px);
  }
  .navbar-mega-desc {
    margin-top: var(--navbar-mega-desc-margin-top-mobile, 0.15rem);
  }
}
.navbar-mega-column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--navbar-mega-column-gap, 0.75rem);
}

.navbar-mega-title {
  font-size: var(--navbar-mega-title-font-size, 0.875rem);
  font-weight: var(--navbar-mega-title-font-weight, 600);
  text-transform: uppercase;
  letter-spacing: var(--navbar-mega-title-letter-spacing, 0.05em);
  color: var(--mega-menu-title, var(--framex-base-color-muted));
  margin-bottom: var(--navbar-mega-title-margin-bottom, 0.5rem);
  padding-bottom: var(--navbar-mega-title-padding-bottom, 0.75rem);
  border-bottom: 1px solid var(--mega-menu-border, var(--framex-base-color-border));
}

.navbar-mega-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--navbar-mega-list-gap, 0.25rem);
}

.navbar-mega-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--navbar-mega-link-gap, 0.75rem);
  padding: var(--navbar-mega-link-padding-y, 0.5rem) var(--navbar-mega-link-padding-x, 0.75rem);
  font-size: var(--navbar-link-font-size, 0.9375rem);
  color: var(--mega-menu-text, var(--framex-base-color-text));
  text-decoration: none;
  border-radius: var(--navbar-mega-link-radius, 8px);
  -webkit-transition: all var(--navbar-transition-fast, 0.2s) ease;
  transition: all var(--navbar-transition-fast, 0.2s) ease;
}
.navbar-mega-link:hover, .navbar-mega-link:focus {
  color: var(--mega-menu-text-hover, var(--framex-base-color-primary));
  background: var(--navbar-megalink-hover-bg, color-mix(in oklch, var(--framex-base-color-primary) 10%, transparent));
  text-decoration: none;
}
.navbar-mega-link.is-featured {
  background: var(--mega-menu-featured-bg, color-mix(in oklch, var(--framex-base-color-primary) 10%, transparent));
  color: var(--navbar-accent, var(--framex-base-color-primary));
  font-weight: 500;
}

.navbar-mega-desc {
  font-size: var(--navbar-mega-desc-font-size, 0.8125rem);
  color: var(--mega-menu-desc, var(--framex-base-color-muted));
  margin-top: var(--navbar-mega-desc-margin-top, 0.25rem);
  line-height: var(--navbar-mega-desc-line-height, 1.4);
}

.navbar-mega-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--navbar-mega-card-gap, 1rem);
  padding: var(--navbar-mega-card-padding, 1.5rem);
  background: var(--mega-menu-card-bg, linear-gradient(135deg, var(--framex-base-color-primary) 0%, var(--primitive-info-500) 100%));
  border-radius: var(--navbar-mega-card-radius, 12px);
  color: white;
  text-decoration: none;
}
.navbar-mega-card:hover {
  color: white;
  text-decoration: none;
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
}

.navbar-mega-card-title {
  font-size: var(--navbar-mega-card-title-font-size, 1.125rem);
  font-weight: var(--navbar-mega-card-title-font-weight, 600);
}

.navbar-mega-card-text {
  font-size: var(--navbar-mega-card-text-font-size, 0.875rem);
  opacity: 0.9;
}

.navbar-toggle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: var(--navbar-toggle-size, 44px);
  height: var(--navbar-toggle-size, 44px);
  margin-left: var(--navbar-toggle-margin-left, 1rem);
  gap: var(--navbar-toggle-gap, 6px);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  border-radius: var(--navbar-toggle-radius, 8px);
  -webkit-transition: all var(--navbar-transition-medium, 0.25s) ease;
  transition: all var(--navbar-transition-medium, 0.25s) ease;
}
@media (min-width: 991px) {
  .navbar-toggle {
    display: none;
  }
}
.navbar-toggle:hover {
  background: var(--navbar-link-hover-bg, color-mix(in oklch, var(--framex-base-color-primary) 5%, transparent));
}
.navbar-toggle span {
  display: block;
  width: var(--navbar-toggle-line-width, 24px);
  height: var(--navbar-toggle-line-height, 2px);
  background: var(--navbar-text, var(--framex-base-color-text));
  border-radius: var(--navbar-toggle-line-radius, 2px);
  -webkit-transition: all var(--navbar-transition-slow, 0.3s) ease;
  transition: all var(--navbar-transition-slow, 0.3s) ease;
  -webkit-transform-origin: center;
          transform-origin: center;
}
.navbar-toggle.is-active span:nth-child(1) {
  -webkit-transform: translateY(var(--navbar-toggle-active-shift, 8px)) rotate(45deg);
          transform: translateY(var(--navbar-toggle-active-shift, 8px)) rotate(45deg);
}
.navbar-toggle.is-active span:nth-child(2) {
  opacity: 0;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}
.navbar-toggle.is-active span:nth-child(3) {
  -webkit-transform: translateY(calc(0px - var(--navbar-toggle-active-shift, 8px))) rotate(-45deg);
          transform: translateY(calc(0px - var(--navbar-toggle-active-shift, 8px))) rotate(-45deg);
}

.navbar-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--navbar-actions-gap, 0.5rem);
  margin-left: auto;
  white-space: nowrap;
}

.navbar-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: var(--navbar-btn-gap, 0.5rem);
  padding: var(--navbar-btn-padding-y, 0.625rem) var(--navbar-btn-padding-x, 1.25rem);
  font-size: var(--navbar-btn-font-size, 0.9375rem);
  font-weight: var(--navbar-btn-font-weight, 500);
  border-radius: var(--navbar-btn-radius, 8px);
  text-decoration: none;
  -webkit-transition: all var(--navbar-transition-medium, 0.25s) ease;
  transition: all var(--navbar-transition-medium, 0.25s) ease;
  cursor: pointer;
  border: none;
}
.navbar-btn--primary {
  background: var(--navbar-accent, var(--framex-base-color-primary));
  color: var(--color-text-inverse);
}
.navbar-btn--primary:hover {
  background: var(--navbar-accent-hover, var(--color-interactive-hover));
  color: var(--color-text-inverse);
  text-decoration: none;
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
  -webkit-box-shadow: 0 4px 12px color-mix(in oklch, var(--framex-base-color-primary) 30%, transparent);
  box-shadow: 0 4px 12px color-mix(in oklch, var(--framex-base-color-primary) 30%, transparent);
}
.navbar-btn--ghost {
  background: transparent;
  color: var(--navbar-text, var(--framex-base-color-text));
}
.navbar-btn--ghost:hover {
  background: var(--navbar-link-hover-bg, color-mix(in oklch, var(--framex-base-color-primary) 5%, transparent));
  color: var(--navbar-text-hover, var(--framex-base-color-primary));
  text-decoration: none;
}
.navbar-btn--compact {
  padding: var(--navbar-btn-compact-padding-y, 0.45rem) var(--navbar-btn-compact-padding-x, 0.85rem);
  font-size: var(--navbar-btn-compact-font-size, 0.875rem);
  border-radius: var(--navbar-btn-compact-radius, 10px);
}
.navbar-btn i,
.navbar-btn .icon {
  width: var(--navbar-btn-icon-size, 18px);
  height: var(--navbar-btn-icon-size, 18px);
  font-size: var(--navbar-btn-icon-font-size, 1rem);
  line-height: 1;
}

.navbar-overlay {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--navbar-overlay-bg, var(--overlay-bg));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-transition: all var(--navbar-transition-slow, 0.3s) ease;
  transition: all var(--navbar-transition-slow, 0.3s) ease;
  z-index: 1028;
}
.navbar.is-mobile-open ~ .navbar-overlay, .navbar:has(.is-mobile-open) ~ .navbar-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.has-navbar-open {
  overflow: hidden;
}

.nav-transparent .navbar + .navbar-overlay + div[style*="height: var(--nav-height"],
.nav-transparent .navbar + div[style*="height: var(--nav-height"] {
  display: none !important;
}
.nav-transparent .navbar {
  --navbar-bg: transparent;
  --navbar-bg-scrolled: var(--framex-base-color-bg-nav);
  --navbar-shadow: none;
  --navbar-text: white;
  --navbar-text-hover: white;
  --navbar-link-hover-bg: color-mix(in oklch, white 10%, transparent);
}
.nav-transparent .navbar:not(.is-dark) .navbar-logo-text,
.nav-transparent .navbar:not(.is-dark) .navbar-link,
.nav-transparent .navbar:not(.is-dark) .navbar-btn--ghost,
.nav-transparent .navbar:not(.is-dark) .navbar-btn--ghost i {
  color: white;
  text-shadow: 0 1px 2px color-mix(in oklch, black 30%, transparent);
}
.nav-transparent .navbar:not(.is-dark) .navbar-toggle span {
  background: white;
}
.nav-transparent .navbar.is-scrolled {
  --navbar-bg: var(--framex-base-color-bg-nav);
  --navbar-shadow: var(--navbar-shadow-scrolled);
  --navbar-text: var(--framex-base-color-text);
  --navbar-text-hover: var(--framex-base-color-primary);
  --navbar-link-hover-bg: color-mix(in oklch, var(--framex-base-color-primary) 5%, transparent);
}
.nav-transparent .navbar.is-scrolled .navbar-logo-text,
.nav-transparent .navbar.is-scrolled .navbar-link,
.nav-transparent .navbar.is-scrolled .navbar-btn--ghost,
.nav-transparent .navbar.is-scrolled .navbar-btn--ghost i {
  color: inherit;
  text-shadow: none;
}
.nav-transparent .navbar.is-scrolled .navbar-toggle span {
  background: var(--framex-base-color-text);
}
.nav-transparent .nav-transparent {
  padding-top: var(--nav-height, 80px);
}
@media (max-width: 991px) {
  .nav-transparent.is-mobile-open,
  .nav-transparent .navbar.is-mobile-open {
    background: transparent;
  }
  .nav-transparent.is-mobile-open .navbar-nav,
  .nav-transparent .navbar.is-mobile-open .navbar-nav {
    --navbar-text: var(--framex-base-color-text);
    --navbar-text-hover: var(--framex-base-color-primary);
    --mobile-menu-bg: var(--framex-base-color-bg-nav-dropdown);
  }
  .nav-transparent.is-mobile-open .navbar-link,
  .nav-transparent .navbar.is-mobile-open .navbar-link {
    color: var(--navbar-text, var(--framex-base-color-text));
    text-shadow: none;
  }
  .nav-transparent.is-mobile-open .navbar-link:hover, .nav-transparent.is-mobile-open .navbar-link:focus,
  .nav-transparent .navbar.is-mobile-open .navbar-link:hover,
  .nav-transparent .navbar.is-mobile-open .navbar-link:focus {
    color: var(--navbar-text-hover, var(--framex-base-color-primary));
  }
  .nav-transparent.is-mobile-open .navbar-mega-title,
  .nav-transparent .navbar.is-mobile-open .navbar-mega-title {
    color: var(--framex-base-color-muted);
    border-bottom-color: var(--framex-base-color-border);
  }
  .nav-transparent.is-mobile-open .navbar-dropdown-link,
  .nav-transparent.is-mobile-open .navbar-mega-link,
  .nav-transparent .navbar.is-mobile-open .navbar-dropdown-link,
  .nav-transparent .navbar.is-mobile-open .navbar-mega-link {
    color: var(--framex-base-color-text);
  }
  .nav-transparent.is-mobile-open .navbar-dropdown-link:hover,
  .nav-transparent.is-mobile-open .navbar-mega-link:hover,
  .nav-transparent .navbar.is-mobile-open .navbar-dropdown-link:hover,
  .nav-transparent .navbar.is-mobile-open .navbar-mega-link:hover {
    color: var(--framex-base-color-primary);
  }
}

body:is([data-theme-mode=dark], .dark):not(.nav-transparent) .navbar,
[data-theme-mode=dark] body:not(.nav-transparent) .navbar,
.dark body:not(.nav-transparent) .navbar {
  --navbar-bg: var(--framex-base-color-bg-nav);
}

body:is([data-theme-mode=dark], .dark) .navbar,
[data-theme-mode=dark] .navbar,
.dark .navbar {
  --dropdown-bg: var(--framex-base-color-bg-nav-dropdown);
  --mega-menu-bg: var(--framex-base-color-bg-nav-dropdown);
}

.flexmasonry {
  --masonry-cols: 1;
  --masonry-gap: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column wrap;
          flex-flow: column wrap;
  -ms-flex-line-pack: start;
      align-content: flex-start;
  margin: calc(var(--masonry-gap) / -2);
  -webkit-transition: height 0.2s ease;
  transition: height 0.2s ease;
}

.masonry.flexmasonry:not(.is-ready) {
  opacity: 0;
}

.masonry.flexmasonry.is-ready {
  opacity: 1;
  -webkit-transition: opacity 0.2s ease, height 0.2s ease;
  transition: opacity 0.2s ease, height 0.2s ease;
}

.masonry.flexmasonry.masonry-effect--lift.is-reflowing .flexmasonry-item {
  -webkit-animation: masonry-reflow 0.62s cubic-bezier(0.16, 1, 0.3, 1) both;
          animation: masonry-reflow 0.62s cubic-bezier(0.16, 1, 0.3, 1) both;
  -webkit-animation-delay: var(--masonry-delay, 0ms);
          animation-delay: var(--masonry-delay, 0ms);
  will-change: transform, opacity, filter;
}

.masonry.flexmasonry.masonry-effect--soft.is-reflowing .flexmasonry-item {
  -webkit-animation: masonry-reflow-soft 0.28s ease-out both;
          animation: masonry-reflow-soft 0.28s ease-out both;
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
  will-change: opacity, transform;
}

.flexmasonry-item {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: calc(100% / var(--masonry-cols));
  padding: calc(var(--masonry-gap) / 2);
}

@-webkit-keyframes masonry-reflow {
  0% {
    opacity: 0.1;
    -webkit-transform: translateY(18px) scale(0.96);
            transform: translateY(18px) scale(0.96);
    -webkit-filter: blur(5px);
            filter: blur(5px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(-2px) scale(1.01);
            transform: translateY(-2px) scale(1.01);
    -webkit-filter: blur(0);
            filter: blur(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0) scale(1);
            transform: translateY(0) scale(1);
    -webkit-filter: blur(0);
            filter: blur(0);
  }
}

@keyframes masonry-reflow {
  0% {
    opacity: 0.1;
    -webkit-transform: translateY(18px) scale(0.96);
            transform: translateY(18px) scale(0.96);
    -webkit-filter: blur(5px);
            filter: blur(5px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(-2px) scale(1.01);
            transform: translateY(-2px) scale(1.01);
    -webkit-filter: blur(0);
            filter: blur(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0) scale(1);
            transform: translateY(0) scale(1);
    -webkit-filter: blur(0);
            filter: blur(0);
  }
}
@-webkit-keyframes masonry-reflow-soft {
  0% {
    opacity: 0.55;
    -webkit-transform: translateY(3px) scale(0.998);
            transform: translateY(3px) scale(0.998);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0) scale(1);
            transform: translateY(0) scale(1);
  }
}
@keyframes masonry-reflow-soft {
  0% {
    opacity: 0.55;
    -webkit-transform: translateY(3px) scale(0.998);
            transform: translateY(3px) scale(0.998);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0) scale(1);
            transform: translateY(0) scale(1);
  }
}
.gallery.flexmasonry {
  --masonry-gap: 5px;
}

.grid-gallery > .flexmasonry-item {
  padding: 3px !important;
}
.grid-gallery img {
  border-radius: 7px;
}

.flexmasonry-cols-1 {
  --masonry-cols: 1;
}

.flexmasonry-cols-2 {
  --masonry-cols: 2;
}

.flexmasonry-cols-3 {
  --masonry-cols: 3;
}

.flexmasonry-cols-4 {
  --masonry-cols: 4;
}

.flexmasonry-cols-5 {
  --masonry-cols: 5;
}

.flexmasonry-cols-6 {
  --masonry-cols: 6;
}

.flexmasonry-cols-7 {
  --masonry-cols: 7;
}

.flexmasonry-cols-8 {
  --masonry-cols: 8;
}

.flexmasonry-cols-2 .flexmasonry-item:nth-child(2n+1) {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

.flexmasonry-cols-2 .flexmasonry-item:nth-child(2n+2) {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}

.flexmasonry-cols-3 .flexmasonry-item:nth-child(3n+1) {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

.flexmasonry-cols-3 .flexmasonry-item:nth-child(3n+2) {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}

.flexmasonry-cols-3 .flexmasonry-item:nth-child(3n+3) {
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
}

.flexmasonry-cols-4 .flexmasonry-item:nth-child(4n+1) {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

.flexmasonry-cols-4 .flexmasonry-item:nth-child(4n+2) {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}

.flexmasonry-cols-4 .flexmasonry-item:nth-child(4n+3) {
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
}

.flexmasonry-cols-4 .flexmasonry-item:nth-child(4n+4) {
  -webkit-box-ordinal-group: 5;
      -ms-flex-order: 4;
          order: 4;
}

.flexmasonry-cols-5 .flexmasonry-item:nth-child(5n+1) {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

.flexmasonry-cols-5 .flexmasonry-item:nth-child(5n+2) {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}

.flexmasonry-cols-5 .flexmasonry-item:nth-child(5n+3) {
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
}

.flexmasonry-cols-5 .flexmasonry-item:nth-child(5n+4) {
  -webkit-box-ordinal-group: 5;
      -ms-flex-order: 4;
          order: 4;
}

.flexmasonry-cols-5 .flexmasonry-item:nth-child(5n+5) {
  -webkit-box-ordinal-group: 6;
      -ms-flex-order: 5;
          order: 5;
}

.flexmasonry-cols-6 .flexmasonry-item:nth-child(6n+1) {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

.flexmasonry-cols-6 .flexmasonry-item:nth-child(6n+2) {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}

.flexmasonry-cols-6 .flexmasonry-item:nth-child(6n+3) {
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
}

.flexmasonry-cols-6 .flexmasonry-item:nth-child(6n+4) {
  -webkit-box-ordinal-group: 5;
      -ms-flex-order: 4;
          order: 4;
}

.flexmasonry-cols-6 .flexmasonry-item:nth-child(6n+5) {
  -webkit-box-ordinal-group: 6;
      -ms-flex-order: 5;
          order: 5;
}

.flexmasonry-cols-6 .flexmasonry-item:nth-child(6n+6) {
  -webkit-box-ordinal-group: 7;
      -ms-flex-order: 6;
          order: 6;
}

.flexmasonry-cols-7 .flexmasonry-item:nth-child(7n+1) {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

.flexmasonry-cols-7 .flexmasonry-item:nth-child(7n+2) {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}

.flexmasonry-cols-7 .flexmasonry-item:nth-child(7n+3) {
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
}

.flexmasonry-cols-7 .flexmasonry-item:nth-child(7n+4) {
  -webkit-box-ordinal-group: 5;
      -ms-flex-order: 4;
          order: 4;
}

.flexmasonry-cols-7 .flexmasonry-item:nth-child(7n+5) {
  -webkit-box-ordinal-group: 6;
      -ms-flex-order: 5;
          order: 5;
}

.flexmasonry-cols-7 .flexmasonry-item:nth-child(7n+6) {
  -webkit-box-ordinal-group: 7;
      -ms-flex-order: 6;
          order: 6;
}

.flexmasonry-cols-7 .flexmasonry-item:nth-child(7n+7) {
  -webkit-box-ordinal-group: 8;
      -ms-flex-order: 7;
          order: 7;
}

.flexmasonry-cols-8 .flexmasonry-item:nth-child(8n+1) {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

.flexmasonry-cols-8 .flexmasonry-item:nth-child(8n+2) {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}

.flexmasonry-cols-8 .flexmasonry-item:nth-child(8n+3) {
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
}

.flexmasonry-cols-8 .flexmasonry-item:nth-child(8n+4) {
  -webkit-box-ordinal-group: 5;
      -ms-flex-order: 4;
          order: 4;
}

.flexmasonry-cols-8 .flexmasonry-item:nth-child(8n+5) {
  -webkit-box-ordinal-group: 6;
      -ms-flex-order: 5;
          order: 5;
}

.flexmasonry-cols-8 .flexmasonry-item:nth-child(8n+6) {
  -webkit-box-ordinal-group: 7;
      -ms-flex-order: 6;
          order: 6;
}

.flexmasonry-cols-8 .flexmasonry-item:nth-child(8n+7) {
  -webkit-box-ordinal-group: 8;
      -ms-flex-order: 7;
          order: 7;
}

.flexmasonry-cols-8 .flexmasonry-item:nth-child(8n+8) {
  -webkit-box-ordinal-group: 9;
      -ms-flex-order: 8;
          order: 8;
}

.flexmasonry-break {
  content: "";
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  width: 0 !important;
  margin: 0;
  padding: 0;
}

.flexmasonry-break-1 {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

.flexmasonry-break-2 {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}

.flexmasonry-break-3 {
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
}

.flexmasonry-break-4 {
  -webkit-box-ordinal-group: 5;
      -ms-flex-order: 4;
          order: 4;
}

.flexmasonry-break-5 {
  -webkit-box-ordinal-group: 6;
      -ms-flex-order: 5;
          order: 5;
}

.flexmasonry-break-6 {
  -webkit-box-ordinal-group: 7;
      -ms-flex-order: 6;
          order: 6;
}

.flexmasonry-break-7 {
  -webkit-box-ordinal-group: 8;
      -ms-flex-order: 7;
          order: 7;
}

.masonry-css {
  -webkit-columns: 3 300px;
     -moz-columns: 3 300px;
          columns: 3 300px;
  -webkit-column-gap: 1.5rem;
     -moz-column-gap: 1.5rem;
          column-gap: 1.5rem;
}
.masonry-css > * {
  -moz-column-break-inside: avoid;
       break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .masonry-css {
    -webkit-columns: 2 250px;
       -moz-columns: 2 250px;
            columns: 2 250px;
  }
}
@media only screen and (min-width: 992px) {
  .masonry-css {
    -webkit-columns: 3 300px;
       -moz-columns: 3 300px;
            columns: 3 300px;
  }
}
@media only screen and (min-width: 1200px) {
  .masonry-css {
    -webkit-columns: 4 300px;
       -moz-columns: 4 300px;
            columns: 4 300px;
  }
}

.hero {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.hero-purple {
  background-blend-mode: multiply;
  background-color: hsla(258, 89%, 43%, 0.5);
}
.hero-blue {
  background-blend-mode: multiply;
  background-color: hsla(237, 85%, 41%, 0.649);
}
.hero-dark {
  background-blend-mode: multiply;
  background-color: hsla(0, 1%, 14%, 0.116);
}
.hero-yellow {
  background-blend-mode: multiply;
  background-color: hsla(56, 86%, 42%, 0.409);
}
.hero-green {
  background-blend-mode: multiply;
  background-color: hsla(142, 71%, 45%, 0.45);
}
.hero-red {
  background-blend-mode: multiply;
  background-color: hsla(0, 85%, 45%, 0.5);
}
.hero-orange {
  background-blend-mode: multiply;
  background-color: hsla(25, 95%, 53%, 0.45);
}
.hero-teal {
  background-blend-mode: multiply;
  background-color: hsla(180, 65%, 45%, 0.5);
}
.hero-pink {
  background-blend-mode: multiply;
  background-color: hsla(330, 85%, 55%, 0.4);
}
.hero-cyan {
  background-blend-mode: multiply;
  background-color: hsla(190, 80%, 50%, 0.55);
}
.hero-indigo {
  background-blend-mode: multiply;
  background-color: hsla(240, 65%, 45%, 0.5);
}
.hero-lime {
  background-blend-mode: multiply;
  background-color: hsla(75, 80%, 50%, 0.35);
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 1.2rem;
}
@media only screen and (max-width: 575.999px) {
  .hero-content {
    text-align: center;
  }
}

.hero-editorial {
  --hero-min-height: 85vh;
  --hero-content-max-width: 800px;
  --hero-title-size: clamp(2rem, 5vw, 4rem);
  --hero-overlay-direction: to top;
  --hero-overlay-start: oklch(15% 0.02 260 / 0.95);
  --hero-overlay-mid: oklch(15% 0.02 260 / 0.7);
  --hero-overlay-end: oklch(15% 0.02 260 / 0.2);
  position: relative;
  min-height: var(--hero-min-height);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-block: 5rem;
}
.hero-editorial__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.hero-editorial__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(var(--hero-overlay-direction)), color-stop(0%, var(--hero-overlay-start)), color-stop(40%, var(--hero-overlay-mid)), to(var(--hero-overlay-end)));
  background: linear-gradient(var(--hero-overlay-direction), var(--hero-overlay-start) 0%, var(--hero-overlay-mid) 40%, var(--hero-overlay-end) 100%);
}
.hero-editorial__content {
  position: relative;
  z-index: 2;
  max-width: var(--hero-content-max-width);
}
.hero-editorial__label {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 1rem;
  background: var(--color-primary-600);
  color: var(--color-primary-contrast-dark);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.08em;
  border-radius: var(--radius-full);
  margin-bottom: 1.5rem;
}
.hero-editorial__title {
  font-size: var(--hero-title-size);
  font-weight: 800;
  line-height: 1.1;
  color: white;
  margin-bottom: 1.25rem;
  letter-spacing: -0.02em;
}
.hero-editorial__description {
  font-size: 1.125rem;
  line-height: 1.7;
  color: oklch(85% 0.01 260deg);
  margin-bottom: 2rem;
  max-width: 600px;
}
.hero-editorial__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.5rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.hero-editorial__author {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.75rem;
}
.hero-editorial__author-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: 2px solid oklch(100% 0 0deg / 0.3);
}
.hero-editorial__author-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.hero-editorial__author-name {
  color: white;
  font-weight: 600;
  font-size: 0.9375rem;
}
.hero-editorial__author-role {
  color: oklch(70% 0.01 260deg);
  font-size: 0.8125rem;
}
.hero-editorial__stat {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  color: oklch(70% 0.01 260deg);
  font-size: 0.875rem;
}
.hero-editorial__stat i {
  color: var(--color-primary-400);
}
.hero-editorial--center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
}
.hero-editorial--center .hero-editorial__content {
  margin-left: auto;
  margin-right: auto;
}
.hero-editorial--center .hero-editorial__description {
  margin-left: auto;
  margin-right: auto;
}
.hero-editorial--center .hero-editorial__meta {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.hero-editorial--bottom {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.hero-editorial--top {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding-top: calc(var(--nav-height, 80px) + 5rem);
}
.hero-editorial--compact {
  --hero-min-height: 60vh;
  --hero-title-size: clamp(1.75rem, 4vw, 3rem);
}
.hero-editorial--full {
  --hero-min-height: 100vh;
}
.hero-editorial--gradient-bottom {
  --hero-overlay-direction: to top;
}
.hero-editorial--gradient-top {
  --hero-overlay-direction: to bottom;
}
.hero-editorial--gradient-left {
  --hero-overlay-direction: to right;
}
.hero-editorial--gradient-right {
  --hero-overlay-direction: to left;
}
.hero-editorial--darken {
  --hero-overlay-start: oklch(10% 0.02 260 / 0.98);
  --hero-overlay-mid: oklch(10% 0.02 260 / 0.85);
  --hero-overlay-end: oklch(10% 0.02 260 / 0.5);
}
.hero-editorial--light {
  --hero-overlay-start: oklch(95% 0.01 260 / 0.9);
  --hero-overlay-mid: oklch(95% 0.01 260 / 0.7);
  --hero-overlay-end: oklch(95% 0.01 260 / 0.3);
}
.hero-editorial--light .hero-editorial__title {
  color: var(--text-base-color);
}
.hero-editorial--light .hero-editorial__description {
  color: var(--text-secondary);
}
.hero-editorial--light .hero-editorial__author-name {
  color: var(--text-base-color);
}
.hero-editorial--light .hero-editorial__author-role,
.hero-editorial--light .hero-editorial__stat {
  color: var(--text-muted);
}

.hero-video {
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 60vh;
}

.hero-video-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 0;
}

.hero-overlay {
  position: relative;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background: rgba(0, 0, 0, 0.4);
}
.hero-overlay::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(30, 34, 40, 0.5);
}
.hero-overlay-1::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(20, 20, 20, 0.52)), to(rgba(117, 19, 93, 0.055)));
  background: linear-gradient(to bottom, rgba(20, 20, 20, 0.52), rgba(117, 19, 93, 0.055));
}

.entry,
.card {
  position: relative;
  max-width: 100%;
  color: var(--framex-base-color-text);
  background-clip: border-box;
  border: 1px solid var(--framex-base-color-card-border);
  border-radius: 0.7rem;
  -webkit-box-shadow: var(--framex-base-color-card-shadow);
          box-shadow: var(--framex-base-color-card-shadow);
  background: var(--framex-base-color-card-bg);
  -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
  overflow: hidden;
}
.entry.entry-link, .entry.card-link,
.card.entry-link,
.card.card-link {
  cursor: pointer;
}
.entry.entry-link a::after, .entry.card-link a::after,
.card.entry-link a::after,
.card.card-link a::after {
  position: absolute;
  inset: 0;
  cursor: pointer;
  content: "";
  z-index: 10;
}
.entry.reverse,
.card.reverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
.entry.entry-elevated, .entry.card-elevated,
.card.entry-elevated,
.card.card-elevated {
  -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.entry.entry-elevated:hover, .entry.card-elevated:hover,
.card.entry-elevated:hover,
.card.card-elevated:hover {
  -webkit-box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
          box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.entry.entry-outlined, .entry.card-outlined,
.card.entry-outlined,
.card.card-outlined {
  background: transparent;
  border: 1px solid var(--framex-base-color-primary);
  -webkit-box-shadow: none;
          box-shadow: none;
}
.entry.entry-glass, .entry.card-glass,
.card.entry-glass,
.card.card-glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}
@media (prefers-color-scheme: dark) {
  .entry.entry-glass, .entry.card-glass,
  .card.entry-glass,
  .card.card-glass {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
}
.entry.entry-gradient, .entry.card-gradient,
.card.entry-gradient,
.card.card-gradient {
  background: linear-gradient(135deg, var(--framex-base-color-card-bg), var(--framex-base-color-bg-foreground-light));
  border: none;
}
.entry.entry-compact .entry-section,
.entry.entry-compact .card-body, .entry.card-compact .entry-section,
.entry.card-compact .card-body,
.card.entry-compact .entry-section,
.card.entry-compact .card-body,
.card.card-compact .entry-section,
.card.card-compact .card-body {
  padding: 1.2rem;
}
.entry.entry-spacious .entry-section,
.entry.entry-spacious .card-body, .entry.card-spacious .entry-section,
.entry.card-spacious .card-body,
.card.entry-spacious .entry-section,
.card.entry-spacious .card-body,
.card.card-spacious .entry-section,
.card.card-spacious .card-body {
  padding: 2.5rem;
}
.entry.entry-vertical, .entry.card-vertical,
.card.entry-vertical,
.card.card-vertical {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.entry.entry-vertical img,
.entry.entry-vertical .card-img-top, .entry.card-vertical img,
.entry.card-vertical .card-img-top,
.card.entry-vertical img,
.card.entry-vertical .card-img-top,
.card.card-vertical img,
.card.card-vertical .card-img-top {
  height: 200px;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  aspect-ratio: 16/9;
}
.entry .entry-media,
.entry .card-media,
.card .entry-media,
.card .card-media {
  position: relative;
  overflow: hidden;
}
.entry .entry-media img,
.entry .card-media img,
.card .entry-media img,
.card .card-media img {
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transition: -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.entry .entry-media::after,
.entry .card-media::after,
.card .entry-media::after,
.card .card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), to(rgba(0, 0, 0, 0.35)));
  background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.35) 100%);
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.entry:hover .entry-media::after, .entry:hover .card-media::after,
.card:hover .entry-media::after,
.card:hover .card-media::after {
  opacity: 1;
}
.entry:hover .entry-media img, .entry:hover .card-media img,
.card:hover .entry-media img,
.card:hover .card-media img {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
.entry.entry-overlay, .entry.card-overlay,
.card.entry-overlay,
.card.card-overlay {
  display: block;
  background: #111;
  border: 0;
  min-height: 320px;
}
.entry.entry-overlay .entry-media,
.entry.entry-overlay .card-media, .entry.card-overlay .entry-media,
.entry.card-overlay .card-media,
.card.entry-overlay .entry-media,
.card.entry-overlay .card-media,
.card.card-overlay .entry-media,
.card.card-overlay .card-media {
  position: absolute;
  inset: 0;
  height: 100%;
}
.entry.entry-overlay .entry-media img,
.entry.entry-overlay .card-media img, .entry.card-overlay .entry-media img,
.entry.card-overlay .card-media img,
.card.entry-overlay .entry-media img,
.card.entry-overlay .card-media img,
.card.card-overlay .entry-media img,
.card.card-overlay .card-media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.entry.entry-overlay .entry-media::after,
.entry.entry-overlay .card-media::after, .entry.card-overlay .entry-media::after,
.entry.card-overlay .card-media::after,
.card.entry-overlay .entry-media::after,
.card.entry-overlay .card-media::after,
.card.card-overlay .entry-media::after,
.card.card-overlay .card-media::after {
  opacity: 1;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.86)), color-stop(38%, rgba(0, 0, 0, 0.58)), color-stop(65%, rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.58) 38%, rgba(0, 0, 0, 0.2) 65%, rgba(0, 0, 0, 0) 100%);
}
.entry.entry-overlay .entry-section,
.entry.entry-overlay .card-body, .entry.card-overlay .entry-section,
.entry.card-overlay .card-body,
.card.entry-overlay .entry-section,
.card.entry-overlay .card-body,
.card.card-overlay .entry-section,
.card.card-overlay .card-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 1.5rem;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.45rem;
}
.entry.entry-overlay .entry-title,
.entry.entry-overlay .card-title,
.entry.entry-overlay .entry-text,
.entry.entry-overlay p,
.entry.entry-overlay h1,
.entry.entry-overlay h2,
.entry.entry-overlay h3,
.entry.entry-overlay h4,
.entry.entry-overlay h5,
.entry.entry-overlay h6, .entry.card-overlay .entry-title,
.entry.card-overlay .card-title,
.entry.card-overlay .entry-text,
.entry.card-overlay p,
.entry.card-overlay h1,
.entry.card-overlay h2,
.entry.card-overlay h3,
.entry.card-overlay h4,
.entry.card-overlay h5,
.entry.card-overlay h6,
.card.entry-overlay .entry-title,
.card.entry-overlay .card-title,
.card.entry-overlay .entry-text,
.card.entry-overlay p,
.card.entry-overlay h1,
.card.entry-overlay h2,
.card.entry-overlay h3,
.card.entry-overlay h4,
.card.entry-overlay h5,
.card.entry-overlay h6,
.card.card-overlay .entry-title,
.card.card-overlay .card-title,
.card.card-overlay .entry-text,
.card.card-overlay p,
.card.card-overlay h1,
.card.card-overlay h2,
.card.card-overlay h3,
.card.card-overlay h4,
.card.card-overlay h5,
.card.card-overlay h6 {
  color: #fff;
  margin-bottom: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.entry.entry-overlay .entry-title a,
.entry.entry-overlay .card-title a, .entry.card-overlay .entry-title a,
.entry.card-overlay .card-title a,
.card.entry-overlay .entry-title a,
.card.entry-overlay .card-title a,
.card.card-overlay .entry-title a,
.card.card-overlay .card-title a {
  color: inherit;
}
.entry.entry-overlay .entry-title a:hover,
.entry.entry-overlay .card-title a:hover, .entry.card-overlay .entry-title a:hover,
.entry.card-overlay .card-title a:hover,
.card.entry-overlay .entry-title a:hover,
.card.entry-overlay .card-title a:hover,
.card.card-overlay .entry-title a:hover,
.card.card-overlay .card-title a:hover {
  color: #fff;
}
.entry.entry-overlay:hover .entry-media::after, .entry.entry-overlay:hover .card-media::after, .entry.card-overlay:hover .entry-media::after, .entry.card-overlay:hover .card-media::after,
.card.entry-overlay:hover .entry-media::after,
.card.entry-overlay:hover .card-media::after,
.card.card-overlay:hover .entry-media::after,
.card.card-overlay:hover .card-media::after {
  opacity: 1;
}
.entry.entry-overlay:hover .entry-media img, .entry.entry-overlay:hover .card-media img, .entry.card-overlay:hover .entry-media img, .entry.card-overlay:hover .card-media img,
.card.entry-overlay:hover .entry-media img,
.card.entry-overlay:hover .card-media img,
.card.card-overlay:hover .entry-media img,
.card.card-overlay:hover .card-media img {
  -webkit-transform: scale(1.04);
          transform: scale(1.04);
}
.entry.entry-horizontal, .entry.card-horizontal,
.card.entry-horizontal,
.card.card-horizontal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
@media only screen and (max-width: 767.999px) {
  .entry.entry-horizontal, .entry.card-horizontal,
  .card.entry-horizontal,
  .card.card-horizontal {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.entry.entry-horizontal img,
.entry.entry-horizontal .card-img-top, .entry.card-horizontal img,
.entry.card-horizontal .card-img-top,
.card.entry-horizontal img,
.card.entry-horizontal .card-img-top,
.card.card-horizontal img,
.card.card-horizontal .card-img-top {
  width: 40%;
  height: auto;
  min-height: 200px;
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 16/9;
}
@media only screen and (max-width: 767.999px) {
  .entry.entry-horizontal img,
  .entry.entry-horizontal .card-img-top, .entry.card-horizontal img,
  .entry.card-horizontal .card-img-top,
  .card.entry-horizontal img,
  .card.entry-horizontal .card-img-top,
  .card.card-horizontal img,
  .card.card-horizontal .card-img-top {
    width: 100%;
    height: 200px;
  }
}
.entry.entry-horizontal .entry-section,
.entry.entry-horizontal .card-body, .entry.card-horizontal .entry-section,
.entry.card-horizontal .card-body,
.card.entry-horizontal .entry-section,
.card.entry-horizontal .card-body,
.card.card-horizontal .entry-section,
.card.card-horizontal .card-body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media only screen and (min-width: 768px) {
  .entry.entry-blog, .entry.card-blog,
  .card.entry-blog,
  .card.card-blog {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .entry.entry-blog [data-bg-image], .entry.card-blog [data-bg-image],
  .card.entry-blog [data-bg-image],
  .card.card-blog [data-bg-image] {
    width: 100%;
    min-height: 300px;
    background-size: cover;
    background-position: center;
  }
  .entry.entry-blog img,
  .entry.entry-blog img a, .entry.card-blog img,
  .entry.card-blog img a,
  .card.entry-blog img,
  .card.entry-blog img a,
  .card.card-blog img,
  .card.card-blog img a {
    max-width: 50%;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
@media only screen and (max-width: 767.999px) {
  .entry.entry-blog [data-bg-image], .entry.card-blog [data-bg-image],
  .card.entry-blog [data-bg-image],
  .card.card-blog [data-bg-image] {
    width: 100%;
    height: 400px;
  }
}
.entry.entry-blog .entry-section,
.entry.entry-blog .card-body, .entry.card-blog .entry-section,
.entry.card-blog .card-body,
.card.entry-blog .entry-section,
.card.entry-blog .card-body,
.card.card-blog .entry-section,
.card.card-blog .card-body {
  width: 100%;
}
.entry img,
.entry .card-img-top,
.card img,
.card .card-img-top {
  max-width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.entry .entry-title,
.entry .card-title,
.card .entry-title,
.card .card-title {
  margin-bottom: 0.5rem;
  line-height: 1.3;
}
.entry .entry-title a,
.entry .card-title a,
.card .entry-title a,
.card .card-title a {
  color: var(--framex-base-color-text);
  text-decoration: none;
  font-weight: 600;
  -webkit-transition: color 0.2s ease, background-size 0.3s ease;
  transition: color 0.2s ease, background-size 0.3s ease;
}
.entry .entry-title a:hover,
.entry .card-title a:hover,
.card .entry-title a:hover,
.card .card-title a:hover {
  color: var(--framex-base-color-primary);
  background-size: 100% 1.5px;
}
.entry .entry-list,
.entry .list-group-item,
.card .entry-list,
.card .list-group-item {
  color: inherit;
  text-decoration: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem;
  background-color: transparent;
  border: 1px solid transparent;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.entry .entry-list:not(:last-child),
.entry .list-group-item:not(:last-child),
.card .entry-list:not(:last-child),
.card .list-group-item:not(:last-child) {
  border-bottom: 1px solid var(--framex-base-color-border);
}
.entry .entry-list img,
.entry .list-group-item img,
.card .entry-list img,
.card .list-group-item img {
  margin: 0;
  max-width: 4rem;
  border-radius: 8px;
}
.entry .entry-list .entry-list-content,
.entry .list-group-item .entry-list-content,
.card .entry-list .entry-list-content,
.card .list-group-item .entry-list-content {
  margin-left: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.entry .entry-list .entry-list-title,
.entry .list-group-item .entry-list-title,
.card .entry-list .entry-list-title,
.card .list-group-item .entry-list-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.entry .entry-list :where(.entry-list-description),
.entry .list-group-item :where(.entry-list-description),
.card .entry-list :where(.entry-list-description),
.card .list-group-item :where(.entry-list-description) {
  color: var(--framex-graycolors-color-gray-300);
  font-size: 0.9rem;
  line-height: 1.4;
}
.entry.entry-clean, .entry.card-clean, .entry.border-0.shadow-none.bg-transparent,
.card.entry-clean,
.card.card-clean,
.card.border-0.shadow-none.bg-transparent {
  -webkit-box-shadow: none;
          box-shadow: none;
  background-color: transparent;
  border: none;
}
.entry .entry-footer,
.entry .card-footer,
.card .entry-footer,
.card .card-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.75rem;
  padding: 0 1.5rem 1.5rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.entry .entry-footer--bordered,
.entry .card-footer--bordered,
.card .entry-footer--bordered,
.card .card-footer--bordered {
  border-top: 1px solid var(--framex-base-color-border);
  padding: 1rem 1.5rem !important;
  margin-top: 0;
}
.entry .entry-header,
.entry .card-header,
.card .entry-header,
.card .card-header {
  font-weight: normal;
  padding: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.75rem;
}
.entry .entry-header--bordered,
.entry .card-header--bordered,
.card .entry-header--bordered,
.card .card-header--bordered {
  border-bottom: 1px solid var(--framex-base-color-border);
  padding-bottom: 1rem;
  margin-bottom: 0;
}
.entry .card-badge,
.entry .entry-badge,
.card .card-badge,
.card .entry-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.65rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: var(--framex-base-color-primary);
  color: var(--framex-base-color-white);
  z-index: 1;
  line-height: 1.4;
}
.entry .card-badge--top-right,
.entry .entry-badge--top-right,
.card .card-badge--top-right,
.card .entry-badge--top-right {
  left: auto;
  right: 0.75rem;
}
.entry .card-badge--bottom-left,
.entry .entry-badge--bottom-left,
.card .card-badge--bottom-left,
.card .entry-badge--bottom-left {
  top: auto;
  bottom: 0.75rem;
}
.entry .card-badge--bottom-right,
.entry .entry-badge--bottom-right,
.card .card-badge--bottom-right,
.card .entry-badge--bottom-right {
  top: auto;
  bottom: 0.75rem;
  left: auto;
  right: 0.75rem;
}
.entry .card-badge--glass,
.entry .entry-badge--glass,
.card .card-badge--glass,
.card .entry-badge--glass {
  background: color-mix(in oklch, white 20%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid color-mix(in oklch, white 30%, transparent);
}

.card-actions, .entry-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.card-actions--end, .entry-actions--end {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.card-actions--center, .entry-actions--center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.card-actions--between, .entry-actions--between {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
}

.entry-icon,
.card-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.625rem;
  font-size: 1.25rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-bottom: 1rem;
}
.entry-icon--primary,
.card-icon--primary {
  background: color-mix(in oklch, var(--framex-base-color-primary) 20%, transparent);
  color: var(--framex-framexcolors-color-primary);
}
.entry-icon--secondary,
.card-icon--secondary {
  background: color-mix(in oklch, var(--framex-base-color-secondary) 20%, transparent);
  color: var(--framex-framexcolors-color-secondary);
}
.entry-icon--lg,
.card-icon--lg {
  width: 4rem;
  height: 4rem;
  border-radius: 0.875rem;
  font-size: 1.5rem;
}
.entry-icon--circle,
.card-icon--circle {
  border-radius: 9999px;
}

.entry-table {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--framex-base-color-border);
}
.entry-table ul {
  list-style: none;
  margin: 0;
  padding: 0;
  margin: 0;
}
.entry-table li {
  list-style: none;
  padding: 0.8rem 1.25rem;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
  border-bottom: 1px solid var(--framex-base-color-border);
}
.entry-table li:last-child {
  border-bottom: none;
}
.entry-table li:hover {
  background-color: var(--framex-base-color-bg-foreground-light);
}

.entry-section,
.card-body {
  padding: 1.5rem;
}
.entry-section :is(h1, h2, h3, h4):first-of-type,
.card-body :is(h1, h2, h3, h4):first-of-type {
  margin-top: 0;
}
.entry-section p,
.card-body p {
  line-height: 1.6;
}
.entry-section--border-bottom,
.card-body--border-bottom {
  border-bottom: 1px solid var(--framex-base-color-border);
}
.entry-section--border-top,
.card-body--border-top {
  border-top: 1px solid var(--framex-base-color-border);
}
.entry-section .meta-item,
.card-body .meta-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.375rem;
}
.entry-section a,
.card-body a {
  text-decoration: none;
  color: inherit;
}
.entry-section a:hover,
.card-body a:hover {
  color: var(--framex-base-color-primary);
}

.card-meta,
.entry-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  font-size: 0.78rem;
  line-height: 1.6;
}
.card-meta > * + *::before,
.entry-meta > * + *::before {
  content: "·";
  margin-right: 0.5rem;
  opacity: 0.5;
}

.entries-grid,
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
  gap: 1.25rem;
}
.entries-grid--2,
.cards-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
.entries-grid--3,
.cards-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.entries-grid--4,
.cards-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}
@media only screen and (max-width: 991.999px) {
  .entries-grid--3, .entries-grid--4,
  .cards-grid--3,
  .cards-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 767.999px) {
  .entries-grid--2, .entries-grid--3, .entries-grid--4,
  .cards-grid--2,
  .cards-grid--3,
  .cards-grid--4 {
    grid-template-columns: 1fr;
  }
}
.entries-grid--gap-sm,
.cards-grid--gap-sm {
  gap: 0.75rem;
}
.entries-grid--gap-lg,
.cards-grid--gap-lg {
  gap: 2rem;
}

.entries-row, .cards-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  -ms-scroll-snap-type: x mandatory;
      scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.75rem;
}
.entries-row > .card,
.entries-row > .entry, .cards-row > .card,
.cards-row > .entry {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 min(20rem, 85vw);
          flex: 0 0 min(20rem, 85vw);
  scroll-snap-align: start;
}
.entries-row, .cards-row {
  scrollbar-width: auto;
  scrollbar-color: var(--color-brand-primary) var(--color-bg-muted);
}
.entries-row::-webkit-scrollbar, .cards-row::-webkit-scrollbar {
  height: 8px;
}
.entries-row::-webkit-scrollbar-track, .cards-row::-webkit-scrollbar-track {
  background: var(--color-bg-muted);
  border-radius: 9999px;
}
.entries-row::-webkit-scrollbar-thumb, .cards-row::-webkit-scrollbar-thumb {
  background: var(--color-brand-primary);
  border-radius: 9999px;
}
.entries-row::-webkit-scrollbar-thumb:hover, .cards-row::-webkit-scrollbar-thumb:hover {
  background: var(--color-brand-secondary);
}

.entries-masonry {
  -webkit-columns: 300px;
     -moz-columns: 300px;
          columns: 300px;
  gap: 1.5rem;
}
.entries-masonry .entry,
.entries-masonry .card {
  -webkit-column-break-inside: avoid;
     -moz-column-break-inside: avoid;
          break-inside: avoid;
  margin-bottom: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .entry,
  .card {
    -webkit-transition: none !important;
    transition: none !important;
    -webkit-animation: none !important;
            animation: none !important;
  }
}
@media only screen and (max-width: 575.999px) {
  .entry.entry-horizontal, .entry.card-horizontal,
  .card.entry-horizontal,
  .card.card-horizontal {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .entry.entry-horizontal img,
  .entry.entry-horizontal .card-img-top, .entry.card-horizontal img,
  .entry.card-horizontal .card-img-top,
  .card.entry-horizontal img,
  .card.entry-horizontal .card-img-top,
  .card.card-horizontal img,
  .card.card-horizontal .card-img-top {
    width: 100%;
    height: 200px;
  }
  .entry.entry--overlay, .entry.card--overlay, .entry.entry-overlay, .entry.card-overlay,
  .card.entry--overlay,
  .card.card--overlay,
  .card.entry-overlay,
  .card.card-overlay {
    aspect-ratio: 3/4;
    min-height: 280px;
  }
  .entry.entry--overlay .entry-section,
  .entry.entry--overlay .card-body, .entry.card--overlay .entry-section,
  .entry.card--overlay .card-body, .entry.entry-overlay .entry-section,
  .entry.entry-overlay .card-body, .entry.card-overlay .entry-section,
  .entry.card-overlay .card-body,
  .card.entry--overlay .entry-section,
  .card.entry--overlay .card-body,
  .card.card--overlay .entry-section,
  .card.card--overlay .card-body,
  .card.entry-overlay .entry-section,
  .card.entry-overlay .card-body,
  .card.card-overlay .entry-section,
  .card.card-overlay .card-body {
    padding: 1.1rem;
  }
}
.tree {
  /* declarations first */
  --tree-indent: 0;
  --tree-radius: 0.25rem;
  --tree-bg: var(--framex-base-color-bg-foreground);
  --tree-bg-hover: var(--framex-base-color-bg-nav-hover);
  --tree-bg-open: var(--framex-base-color-bg-background);
  --tree-border: var(--framex-base-color-border);
  --tree-text: var(--framex-base-color-text);
  --tree-shadow: var(--framex-base-color-card-shadow);
  --tree-open-max: 100%; /* Option A: numeric max for reliable animation */
  margin: 0;
  padding: 0;
  list-style: none;
  /* base node (top-level and nested) */
}
.tree > details,
.tree details details {
  position: relative;
  margin: 0 0 0.5rem;
  padding: 0;
  /* nested lists indent (nested rule after declarations = OK) */
}
.tree > details details,
.tree details details details {
  margin-left: var(--tree-indent);
}
.tree > details,
.tree details details {
  /* children container */
}
.tree > details > div,
.tree details details > div {
  /* declarations first */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 1rem;
  border-bottom-left-radius: var(--tree-radius);
  border-bottom-right-radius: var(--tree-radius);
  -webkit-box-shadow: var(--tree-shadow);
          box-shadow: var(--tree-shadow);
  background-color: var(--tree-bg);
  -webkit-transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
  transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
  will-change: max-height, padding, opacity;
}
.tree > details,
.tree details details {
  /* summary row */
}
.tree > details > summary,
.tree details details > summary {
  /* declarations first */
  position: relative; /* anchor for chevron */
  cursor: pointer;
  display: block;
  font-weight: 700;
  padding: 0.625rem 0.75rem 0.625rem 2.75rem;
  border-radius: var(--tree-radius);
  background-color: var(--tree-bg);
  color: var(--tree-text);
  -webkit-box-shadow: var(--tree-shadow);
          box-shadow: var(--tree-shadow);
  -webkit-transition: background-color 0.2s ease, border-radius 0.2s ease, color 0.2s ease;
  transition: background-color 0.2s ease, border-radius 0.2s ease, color 0.2s ease;
  /* nested rules after all declarations */
}
.tree > details > summary::-webkit-details-marker,
.tree details details > summary::-webkit-details-marker {
  display: none;
}
.tree > details > summary:hover,
.tree details details > summary:hover {
  background-color: var(--tree-bg-hover);
}
.tree > details > summary::before,
.tree details details > summary::before {
  content: "›";
  position: absolute;
  left: 0.75rem;
  top: 50%;
  -webkit-transform: translateY(-50%) rotate(90deg);
          transform: translateY(-50%) rotate(90deg);
  width: 1.75rem;
  height: 1.75rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 1rem;
  color: var(--tree-text);
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
  z-index: 1; /* keep it above the seam */
}
.tree > details,
.tree details details {
  /* open state (only nested rules here) */
}
.tree > details[open] > summary,
.tree details details[open] > summary {
  background-color: var(--tree-bg-open);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.tree > details[open] > summary::before,
.tree details details[open] > summary::before {
  -webkit-transform: translateY(-50%) rotate(-90deg);
          transform: translateY(-50%) rotate(-90deg);
}
.tree > details[open] > div,
.tree details details[open] > div {
  /* Option A: keep interpolation numeric so it animates every time */
  max-height: var(--tree-open-max);
  opacity: 1;
  /* late paddings wrapped to avoid mixed-decls later changes */
}
.tree > details[open] > div,
.tree details details[open] > div {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.tree {
  /* compact variant */
}
.tree.tree--compact {
  /* declarations must go first; modifier scopes avoid mixed-decls too */
}
.tree.tree--compact > details,
.tree.tree--compact details details {
  margin-bottom: 0.25rem;
}
.tree.tree--compact > details > summary,
.tree.tree--compact details details > summary {
  font-weight: 600;
  /* late paddings wrapped */
}
.tree.tree--compact > details > summary,
.tree.tree--compact details details > summary {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.tree.tree--compact > details > div,
.tree.tree--compact details details > div {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.tree {
  /* bordered variant */
}
.tree.tree--bordered > details > summary,
.tree.tree--bordered details details > summary {
  /* declarations first */
  border: 1px solid var(--tree-border);
  -webkit-box-shadow: none;
          box-shadow: none;
}
.tree.tree--bordered > details > div,
.tree.tree--bordered details details > div {
  border: 1px solid var(--tree-border);
  /* late cleanups wrapped */
}
.tree.tree--bordered > details > div,
.tree.tree--bordered details details > div {
  border-top: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.tree {
  /* borderless variant */
}
.tree.tree--borderless > details,
.tree.tree--borderless details details {
  margin-bottom: 0;
  font-weight: 400 !important;
}
.tree.tree--borderless > details > summary,
.tree.tree--borderless details details > summary {
  /* declarations first — FIX mixed-decls */
  font-weight: 400 !important;
  border-radius: 0;
  border-bottom: 1px solid #f1f1f1; /* keep as-is; swap με token αν θέλεις */
  -webkit-box-shadow: none;
          box-shadow: none;
  /* paddings wrapped to opt-in new behavior */
}
.tree.tree--borderless > details > summary,
.tree.tree--borderless details details > summary {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}
.tree.tree--borderless > details > div,
.tree.tree--borderless details details > div {
  border: none;
  /* group all late declarations inside & {} to avoid warnings */
}
.tree.tree--borderless > details > div,
.tree.tree--borderless details details > div {
  border-top: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.tree.tree--borderless > details > div,
.tree.tree--borderless details details > div {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 1rem;
}
.tree {
  /* icon variants (wrapper) */
}
.tree.tree--plus summary::before {
  content: "+";
  -webkit-transform: translateY(-50%) rotate(0deg);
          transform: translateY(-50%) rotate(0deg);
  font-size: 1rem;
}
.tree.tree--plus details[open] > summary::before {
  content: "−";
}
.tree.tree--arrow summary::before {
  content: "▼";
  -webkit-transform: translateY(-50%) rotate(0deg);
          transform: translateY(-50%) rotate(0deg);
  font-size: 0.75rem;
}
.tree.tree--arrow details[open] > summary::before {
  -webkit-transform: translateY(-50%) rotate(180deg);
          transform: translateY(-50%) rotate(180deg);
}
.tree.tree--amber > details > summary,
.tree.tree--amber details details > summary {
  background-color: oklch(98.7% 0.022 95.277deg);
  border: 1px solid var(--framex-base-color-border);
}
.tree.tree--amber > details > summary:hover,
.tree.tree--amber details details > summary:hover {
  background-color: oklch(96.2% 0.059 95.617deg);
}
.tree.tree--purple > details > summary,
.tree.tree--purple details details > summary {
  background-color: oklch(97.7% 0.014 308.299deg);
}
.tree.tree--purple > details > summary:hover,
.tree.tree--purple details details > summary:hover {
  background-color: oklch(94.6% 0.033 307.174deg);
}
.tree.tree--purple > details > summary,
.tree.tree--purple details details > summary {
  background-color: oklch(97.7% 0.014 308.299deg);
}
.tree.tree--purple > details > summary:hover,
.tree.tree--purple details details > summary:hover {
  background-color: oklch(94.6% 0.033 307.174deg);
}
.tree.tree--gray > details > summary,
.tree.tree--gray details details > summary {
  background-color: oklch(88% 0.006 250deg);
}
.tree.tree--gray > details > summary:hover,
.tree.tree--gray details details > summary:hover {
  background-color: oklch(79% 0.007 250deg);
}
.tree {
  /* content cleanup (nested rules only) */
}
.tree details > div > div {
  border: 0;
  padding: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.tree details > div > div p {
  margin-top: 0;
  padding-top: 0;
}
.tree {
  /* Admin tree: keep first nested node away from action buttons */
}
.tree details > div > .btn-group + details {
  margin-top: 1rem;
}

.avatar {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: var(--framex-base-color-light);
  color: var(--framex-base-color-dark);
  font-weight: 500;
  font-size: 1.2rem;
  text-transform: uppercase;
  vertical-align: middle;
}
.avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}
.avatar[data-initial]::before {
  content: attr(data-initial);
}

.avatar-sm {
  width: 2rem;
  height: 2rem;
  font-size: 0.8rem;
}

.avatar-md {
  width: 3rem;
  height: 3rem;
  font-size: 1.2rem;
}

.avatar-lg {
  width: 4rem;
  height: 4rem;
  font-size: 1.6rem;
}

.avatar-xl {
  width: 5rem;
  height: 5rem;
  font-size: 2rem;
}

.avatar-square {
  border-radius: 0.375rem;
}

.avatar-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  border: 2px solid var(--framex-base-color-white);
}
.avatar-status.status-online {
  background-color: oklch(72.3% 0.219 149.579deg);
}
.avatar-status.status-busy {
  background-color: oklch(63% 0.5 25deg);
}
.avatar-status.status-away {
  background-color: oklch(79.5% 0.184 86.047deg);
}
.avatar-status.status-offline {
  background-color: oklch(62.7% 0.265 303.9deg);
}

.avatar-badge {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.25rem;
  border-radius: 0.625rem;
  background-color: oklch(63% 0.5 25deg);
  color: var(--framex-base-color-white);
  font-size: 0.625rem;
  font-weight: 700;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border: 2px solid var(--framex-base-color-white);
}

.avatar-group {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.avatar-group .avatar {
  margin-left: -0.75rem;
  border: 2px solid var(--framex-base-color-white);
}
.avatar-group .avatar:first-child {
  margin-left: 0;
}
.avatar-group .avatar:hover {
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
  z-index: 10;
}

.title {
  padding: 0;
}
.title > span {
  display: block;
  -webkit-margin-before: 0.25rem;
          margin-block-start: 0.25rem;
  color: var(--framex-framexcolors-color-ash);
  font-weight: 400;
}
.title--right {
  padding: 0.125rem 1.25rem 0.1875rem 0;
  -webkit-border-start: 0;
          border-inline-start: 0;
  -webkit-border-end: 0.4375rem solid var(--framex-base-color-primary);
          border-inline-end: 0.4375rem solid var(--framex-base-color-primary);
  text-align: end;
}
.title-block {
  padding-inline: 0.9375rem;
  -webkit-border-start: 0.4375rem solid var(--framex-base-color-primary);
          border-inline-start: 0.4375rem solid var(--framex-base-color-primary);
}

.title :is(h1, h2, h3, h4) {
  margin: 0;
}

.title h1 + span {
  font-size: clamp(1.224rem, 2vw + 1rem, 1.44rem);
}

.title :is(h2, h3, h4) + span {
  font-size: 1rem;
}

.heading-block {
  -webkit-margin-after: 3.125rem;
          margin-block-end: 3.125rem;
}
.heading-block :is(h1, h2, h3, h4) {
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.0625rem;
  color: var(--framex-base-color-heading);
}
.heading-block > span:not(.before-heading) {
  display: block;
  -webkit-margin-before: 0.625rem;
          margin-block-start: 0.625rem;
  font-weight: 300;
  color: var(--framex-base-color-heading);
}
.heading-block .before-heading {
  -webkit-margin-after: 0.4375rem;
          margin-block-end: 0.4375rem;
}
.heading-block.center > span, .heading-block.text-center > span, .center .heading-block > span, .text-center .heading-block > span {
  max-inline-size: 43.75rem;
  margin-inline: auto;
}
@media only screen and (min-width: 768px) {
  .text-md-start .heading-block > span {
    max-inline-size: none !important;
  }
}
.heading-block::after {
  content: "";
  display: block;
  -webkit-margin-before: 1.875rem;
          margin-block-start: 1.875rem;
  inline-size: 2.5rem;
  -webkit-border-before: 0.3125rem solid var(--framex-base-color-primary);
          border-block-start: 0.3125rem solid var(--framex-base-color-primary);
}
.heading-block.center::after, .heading-block.text-center::after, .center .heading-block::after, .text-center .heading-block::after {
  margin-inline: auto;
}
@media only screen and (min-width: 768px) {
  .text-md-start .heading-block::after {
    -webkit-margin-start: 0 !important;
            margin-inline-start: 0 !important;
  }
}
.heading-block.border-0::after, .heading-block.border-bottom-0::after {
  display: none;
}
.heading-block.border-color::after {
  border-color: var(--framex-base-color-primary);
}
.heading-block .heading-block :where(h1) + span {
  font-size: 2.0736rem;
}
.heading-block .heading-block :where(h2) + span {
  font-size: 1.728rem;
}
.heading-block .heading-block :where(h3) + span {
  font-size: 1.44rem;
}
.heading-block .heading-block :where(h4) + span {
  font-size: 1.2rem;
}
.heading-block .heading-block :where(display-1) + span {
  font-size: 3.5831808rem;
}
.heading-block .heading-block :where(display-2) + span {
  font-size: 2.985984rem;
}
.heading-block .heading-block :where(display-3) + span {
  font-size: 2.48832rem;
}

.title--underline {
  position: relative;
  -webkit-padding-after: 0.5rem;
          padding-block-end: 0.5rem;
}
.title--underline::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  margin-inline: auto;
  inline-size: 3rem;
  -webkit-border-after: 0.25rem solid currentColor;
          border-block-end: 0.25rem solid currentColor;
  opacity: 0.85;
}

.title--accent-bar {
  position: relative;
  -webkit-padding-start: 1rem;
          padding-inline-start: 1rem;
}
.title--accent-bar::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 0.25rem;
  background: -webkit-gradient(linear, left top, left bottom, from(var(--framex-base-color-primary)), to(var(--framex-base-color-primary)));
  background: linear-gradient(180deg, var(--framex-base-color-primary) 0%, var(--framex-base-color-primary) 100%);
  border-radius: 0.25rem;
}

.heading-1 {
  position: relative;
  min-block-size: 18.75rem;
  text-align: center;
}
.heading-1 span {
  color: #7d0707;
}
.heading-1 h3::before {
  content: "";
  display: block;
  inline-size: 0.1875rem;
  block-size: 6rem;
  background-color: rgba(149, 149, 149, 0.7);
  margin: 0 auto 2.4rem;
}

.breadcrumb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 0.75rem 1rem;
  list-style: none;
  background-color: var(--framex-graycolors-color-gray-100);
  border-radius: 0.25rem;
  font-size: 0.875rem;
}
.breadcrumb li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.breadcrumb li:not(:first-child)::before {
  display: inline-block;
  padding: 0 0.5rem;
  color: var(--framex-graycolors-color-gray-500);
  content: "/";
}
.breadcrumb li:last-child {
  color: var(--framex-graycolors-color-gray-600);
}
.breadcrumb li a {
  color: var(--framex-base-color-primary);
  text-decoration: none;
}
.breadcrumb li a:hover {
  text-decoration: underline;
}

.breadcrumb-minimal {
  background-color: transparent;
  padding: 0;
}

input,
textarea,
select,
button {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.form-control, .form-select {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--framex-base-color-text);
  background-color: var(--framex-base-color-bg-foreground);
  border: 1px solid var(--framex-base-color-border);
  border-radius: 0.25rem;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.form-control:focus, .form-select:focus {
  outline: 0;
  border-color: var(--framex-base-color-primary);
}
.form-control::-webkit-input-placeholder, .form-select::-webkit-input-placeholder {
  color: var(--framex-graycolors-color-gray-500);
  opacity: 1;
}
.form-control::-moz-placeholder, .form-select::-moz-placeholder {
  color: var(--framex-graycolors-color-gray-500);
  opacity: 1;
}
.form-control:-ms-input-placeholder, .form-select:-ms-input-placeholder {
  color: var(--framex-graycolors-color-gray-500);
  opacity: 1;
}
.form-control::-ms-input-placeholder, .form-select::-ms-input-placeholder {
  color: var(--framex-graycolors-color-gray-500);
  opacity: 1;
}
.form-control::placeholder, .form-select::placeholder {
  color: var(--framex-graycolors-color-gray-500);
  opacity: 1;
}
.form-control:disabled, .form-select:disabled {
  background-color: var(--framex-graycolors-color-gray-100);
  opacity: 0.6;
  cursor: not-allowed;
}

textarea.form-control, textarea.form-select {
  min-height: 100px;
  resize: vertical;
}

.form-select {
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
}

.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.form-text {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--framex-graycolors-color-gray-600);
}

.form-check {
  display: block;
  min-height: 1.5rem;
  padding-left: 1.5em;
  margin-bottom: 0.125rem;
}
.form-check-input {
  float: left;
  margin-left: -1.5em;
  width: 1em;
  height: 1em;
  margin-top: 0.25em;
  background-color: var(--framex-base-color-white);
  border: 1px solid var(--framex-graycolors-color-gray-400);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.form-check-input:focus {
  outline: 2px solid var(--framex-base-color-primary);
  outline-offset: 2px;
}
.form-check-input[type=checkbox] {
  border-radius: 0.25em;
}
.form-check-input[type=checkbox]:checked {
  background-color: var(--framex-base-color-primary);
  border-color: var(--framex-base-color-primary);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.form-check-input[type=radio] {
  border-radius: 50%;
}
.form-check-input[type=radio]:checked {
  background-color: var(--framex-base-color-primary);
  border-color: var(--framex-base-color-primary);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.form-check-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.form-check-label {
  display: inline-block;
}

.form-group {
  margin-bottom: 1rem;
}

.input-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}
.input-group .form-control,
.input-group .form-select {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group > .btn {
  position: relative;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}
.input-group > .btn:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group > .btn:not(:first-child) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group > .btn:focus {
  z-index: 1;
}
.input-group .form-control:focus,
.input-group .form-select:focus {
  z-index: 1;
}

.is-valid {
  border-color: oklch(72.3% 0.219 149.579deg);
}
.is-valid:focus {
  border-color: oklch(72.3% 0.219 149.579deg);
}

.is-invalid {
  border-color: oklch(63% 0.5 25deg);
}
.is-invalid:focus {
  border-color: oklch(63% 0.5 25deg);
}

.valid-feedback {
  display: none;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: oklch(72.3% 0.219 149.579deg);
}

.invalid-feedback {
  display: none;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: oklch(63% 0.5 25deg);
}

.is-valid ~ .valid-feedback {
  display: block;
}

.is-invalid ~ .invalid-feedback {
  display: block;
}

.table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
  font-size: 1rem;
  color: var(--framex-base-color-text);
}
.table th, .table td {
  padding: 0.75rem;
  vertical-align: top;
  border-top: 1px solid var(--framex-base-color-border);
  text-align: left;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid var(--framex-base-color-border);
  background-color: #f8f9fa;
}
.table caption {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: #6c757d;
  text-align: left;
  caption-side: bottom;
}
.table tbody + tbody {
  border-top: 2px solid var(--framex-base-color-border);
}

.table-bordered {
  border: 1px solid var(--framex-base-color-border);
}
.table-bordered th, .table-bordered td {
  border: 1px solid var(--framex-base-color-border);
}
.table-bordered thead th {
  border-bottom-width: 2px;
}

.table-borderless th, .table-borderless td,
.table-borderless thead th,
.table-borderless tbody + tbody {
  border: 0;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}

.table-hover tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.075);
}

.table-sm th, .table-sm td {
  padding: 0.3rem;
}

.table-dark {
  color: #fff;
  background-color: #212529;
}
.table-dark th, .table-dark td,
.table-dark thead th {
  border-color: #454d55;
}
.table-dark.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.05);
}
.table-dark.table-hover tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.075);
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-responsive .table {
  margin-bottom: 0;
}
.table-responsive .table-bordered {
  border: 0;
}

@media only screen and (min-width: 576px) {
  .table-responsive-sm {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive-sm .table {
    margin-bottom: 0;
  }
}
@media only screen and (min-width: 768px) {
  .table-responsive-md {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive-md .table {
    margin-bottom: 0;
  }
}
@media only screen and (min-width: 992px) {
  .table-responsive-lg {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive-lg .table {
    margin-bottom: 0;
  }
}
@media only screen and (min-width: 1200px) {
  .table-responsive-xl {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive-xl .table {
    margin-bottom: 0;
  }
}
.align-top {
  vertical-align: top !important;
}

.align-middle {
  vertical-align: middle !important;
}

.align-bottom {
  vertical-align: bottom !important;
}

.my-6 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 20000;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.modal-backdrop.show {
  opacity: 1;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20001;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow-x: hidden;
  overflow-y: auto;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility 0.3s ease, opacity 0.3s ease;
  transition: visibility 0.3s ease, opacity 0.3s ease;
}
.modal.show {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.modal.show .modal-dialog {
  -webkit-transform: translateY(0) scale(1);
          transform: translateY(0) scale(1);
  opacity: 1;
}
.modal-dialog {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 1.75rem auto;
  background-color: var(--framex-base-color-bg-foreground);
  border-radius: 0.5rem;
  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
          box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
  transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transition: transform 0.3s ease, opacity 0.3s ease, -webkit-transform 0.3s ease;
  -webkit-transform: translateY(-30px) scale(0.95);
          transform: translateY(-30px) scale(0.95);
  opacity: 0;
  pointer-events: auto;
}
.modal-dialog .modal-content {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: var(--framex-base-color-bg-foreground);
  background-clip: padding-box;
  border-radius: 0.5rem;
  outline: 0;
}
.modal-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid var(--framex-base-color-border);
  border-top-left-radius: calc(0.5rem - 1px);
  border-top-right-radius: calc(0.5rem - 1px);
}
.modal-header .modal-title {
  margin: 0;
  line-height: 1.5;
  font-weight: 600;
}
.modal-header .modal-close {
  padding: 0.25rem;
  background-color: transparent;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  opacity: 0.7;
  cursor: pointer;
  -webkit-transition: opacity 0.15s ease;
  transition: opacity 0.15s ease;
}
.modal-header .modal-close:hover {
  opacity: 1;
}
.modal-header .modal-close:focus {
  outline: none;
  opacity: 1;
}
.modal-body {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  padding: 1rem;
}
.modal-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding: 1rem;
  border-top: 1px solid var(--framex-base-color-border);
  border-bottom-left-radius: calc(0.5rem - 1px);
  border-bottom-right-radius: calc(0.5rem - 1px);
}
.modal-footer button {
  margin-left: 0.5rem;
}

.modal-dialog.modal-sm {
  max-width: 300px;
}

.modal-dialog.modal-md {
  max-width: 500px;
}

.modal-dialog.modal-lg {
  max-width: 800px;
}

.modal-dialog.modal-xl {
  max-width: 1140px;
}

.modal-dialog.modal-fullscreen {
  max-width: 100%;
}

.modal-fullscreen {
  padding: 0;
}
.modal-fullscreen .modal-dialog {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
}
.modal-fullscreen .modal-content {
  height: 100%;
  border: 0;
  border-radius: 0;
}

.modal-dialog-centered {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: calc(100% - 3.5rem);
}

.modal-dialog-scrollable {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-height: calc(100% - 3.5rem);
}
.modal-dialog-scrollable .modal-content {
  max-height: 100%;
  overflow: hidden;
}
.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}

.modal-fade .modal-dialog {
  -webkit-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
  -webkit-transform: translateY(0) scale(1);
          transform: translateY(0) scale(1);
}
.modal-fade:not(.show) .modal-dialog {
  opacity: 0;
}

.modal-slide-up .modal-dialog {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}
.modal-slide-up.show .modal-dialog {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.modal-slide-down .modal-dialog {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
.modal-slide-down.show .modal-dialog {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.modal-slide-left .modal-dialog {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}
.modal-slide-left.show .modal-dialog {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.modal-slide-right .modal-dialog {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
.modal-slide-right.show .modal-dialog {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.modal-zoom .modal-dialog {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}
.modal-zoom.show .modal-dialog {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.modal-top, .modal-bottom {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.modal-top .modal-dialog, .modal-bottom .modal-dialog {
  margin: 0 auto;
  width: 100%;
}

.modal-bottom {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.modal-primary .modal-header {
  background-color: var(--framex-base-color-primary);
  color: oklch(100% 0 0deg);
  border-bottom-color: transparent;
}
.modal-primary .modal-header .modal-close {
  color: oklch(100% 0 0deg);
}

.modal-danger .modal-header {
  background-color: var(--framex-base-color-danger);
  color: oklch(100% 0 0deg);
  border-bottom-color: transparent;
}
.modal-danger .modal-header .modal-close {
  color: oklch(100% 0 0deg);
}

.modal-success .modal-header {
  background-color: var(--framex-base-color-success);
  color: oklch(100% 0 0deg);
  border-bottom-color: transparent;
}
.modal-success .modal-header .modal-close {
  color: oklch(100% 0 0deg);
}

.modal-static .modal-dialog {
  -webkit-transform: scale(1.02);
          transform: scale(1.02);
}

@media only screen and (max-width: 767.999px) {
  .modal-dialog {
    margin: 0.5rem;
  }
  .modal-dialog-centered {
    min-height: calc(100% - 1rem);
  }
  .modal-dialog-scrollable {
    max-height: calc(100% - 1rem);
  }
  .modal-fullscreen-md-down {
    padding: 0;
  }
  .modal-fullscreen-md-down .modal-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-md-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
}
@-webkit-keyframes modalZoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes modalZoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@-webkit-keyframes modalZoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
@keyframes modalZoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
.animate-zoom-in {
  -webkit-animation: modalZoomIn 0.3s;
          animation: modalZoomIn 0.3s;
}

.animate-zoom-out {
  -webkit-animation: modalZoomOut 0.3s;
          animation: modalZoomOut 0.3s;
}

.modal-nested {
  background-color: rgba(0, 0, 0, 0.2);
}
.modal-nested .modal-dialog {
  margin: 3rem auto;
}

[data-theme-mode=dark] .modal-content,
.dark .modal-content {
  background-color: var(--framex-base-color-bg-foreground);
}
[data-theme-mode=dark] .modal-header,
[data-theme-mode=dark] .modal-footer,
.dark .modal-header,
.dark .modal-footer {
  border-color: rgba(255, 255, 255, 0.1);
}

.modal:focus {
  outline: none;
}

.modal-dialog[tabindex="-1"]:focus {
  outline: none;
}

.modal-drawer.modal-left .modal-dialog, .modal-drawer.modal-right .modal-dialog {
  position: fixed;
  margin: 0;
  height: 100%;
  max-width: 350px;
}
.modal-drawer.modal-left .modal-content, .modal-drawer.modal-right .modal-content {
  height: 100%;
  border-radius: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.modal-drawer.modal-left .modal-body, .modal-drawer.modal-right .modal-body {
  overflow-y: auto;
}
.modal-drawer.modal-left .modal-dialog {
  left: 0;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
.modal-drawer.modal-left.show .modal-dialog {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.modal-drawer.modal-right .modal-dialog {
  right: 0;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}
.modal-drawer.modal-right.show .modal-dialog {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.modal-confirm .modal-footer {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-top: 1.5rem;
}
.modal-confirm .modal-footer .btn-confirm,
.modal-confirm .modal-footer .btn-cancel {
  min-width: 100px;
}
.modal-confirm .modal-body {
  padding: 1.5rem;
  text-align: center;
}
.modal-confirm .modal-body .modal-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 1rem;
  font-size: 3rem;
}
.modal-confirm .modal-body .modal-icon.warning {
  color: var(--framex-base-color-warning);
}
.modal-confirm .modal-body .modal-icon.danger {
  color: var(--framex-base-color-danger);
}
.modal-confirm .modal-body .modal-icon.success {
  color: var(--framex-base-color-success);
}

.modal-image .modal-content {
  background-color: transparent;
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.modal-image .modal-body {
  padding: 0;
  text-align: center;
}
.modal-image .modal-body img {
  max-height: 90vh;
  max-width: 100%;
  border-radius: 0.25rem;
  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
          box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.modal-image .modal-caption {
  margin-top: 1rem;
  color: oklch(100% 0 0deg);
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.modal-video .modal-dialog {
  max-width: 800px;
}
.modal-video .modal-body {
  padding: 0;
  position: relative;
  overflow: hidden;
}
.modal-video .video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}
.modal-video .video-container iframe,
.modal-video .video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.modal-steps .modal-header {
  padding-bottom: 0;
  border-bottom: none;
}
.modal-steps .modal-steps-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  margin-top: 1rem;
  border-bottom: 1px solid var(--framex-base-color-border);
}
.modal-steps .modal-steps-nav .step-item {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 0.75rem 1rem;
  text-align: center;
  cursor: pointer;
  opacity: 0.6;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  border-bottom: 3px solid transparent;
}
.modal-steps .modal-steps-nav .step-item.active {
  opacity: 1;
  border-bottom-color: var(--framex-base-color-primary);
  font-weight: 600;
}
.modal-steps .modal-step {
  display: none;
}
.modal-steps .modal-step.active {
  display: block;
}
.modal-steps .modal-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.modal-steps .modal-footer .btn-prev {
  margin-right: auto;
  margin-left: 0;
}

.modal-notification .modal-dialog {
  margin: 1rem;
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
  max-width: 400px;
}
.modal-notification .modal-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.modal-notification .modal-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 4rem;
  background-color: var(--framex-base-color-primary);
  border-bottom-left-radius: 0.5rem;
  border-top-left-radius: 0.5rem;
  color: oklch(100% 0 0deg);
  font-size: 1.5rem;
}
.modal-notification .modal-icon.success {
  background-color: var(--framex-base-color-success);
}
.modal-notification .modal-icon.warning {
  background-color: var(--framex-base-color-warning);
}
.modal-notification .modal-icon.danger {
  background-color: var(--framex-base-color-danger);
}
.modal-notification .modal-icon.info {
  background-color: var(--framex-base-color-info);
}
.modal-notification .modal-notification-content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.modal-notification .modal-notification-content .notification-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.modal-notification .modal-notification-content .notification-text {
  margin-bottom: 0;
  font-size: 0.875rem;
}
.modal-notification .modal-header {
  border-bottom: none;
  padding: 1rem 1rem 0.5rem;
}
.modal-notification .modal-body {
  padding: 0.5rem 1rem 1rem;
}

.modal-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
}
.modal-toast .modal-dialog {
  margin: 0;
  max-width: 350px;
}
.modal-toast .modal-content {
  border-radius: 0.25rem;
}
.modal-toast .modal-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.modal-toast .modal-body .toast-icon {
  margin-right: 0.75rem;
  font-size: 1.25rem;
}
.modal-toast .modal-body .toast-icon.success {
  color: var(--framex-base-color-success);
}
.modal-toast .modal-body .toast-icon.warning {
  color: var(--framex-base-color-warning);
}
.modal-toast .modal-body .toast-icon.danger {
  color: var(--framex-base-color-danger);
}
.modal-toast .modal-body .toast-icon.info {
  color: var(--framex-base-color-info);
}

.swiper {
  --swiper-theme-color: var(--color-surface-1);
  --swiper-navigation-size: 44px;
  --swiper-pagination-bullet-size: 10px;
  --swiper-pagination-bullet-horizontal-gap: 6px;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
  display: block;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
          transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}

.swiper-slide {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  display: block;
}

.swiper-button-prev svg,
.swiper-button-next svg,
.swiper-button-prev .swiper-navigation-icon,
.swiper-button-next .swiper-navigation-icon {
  display: none !important;
}

.swiper-button-prev,
.swiper-button-next {
  --swiper-nav-bg: color-mix(in oklch, black 20%, transparent);
  --swiper-nav-color: white;
  --swiper-nav-border: color-mix(in oklch, white 20%, transparent);
  --swiper-nav-shadow: 0 2px 12px color-mix(in oklch, black 30%, transparent);
  --swiper-nav-hover-bg: color-mix(in oklch, black 55%, transparent);
  --swiper-nav-hover-border: color-mix(in oklch, white 35%, transparent);
  position: absolute !important;
  top: 50% !important;
  width: var(--swiper-navigation-size) !important;
  height: var(--swiper-navigation-size) !important;
  margin-top: calc(var(--swiper-navigation-size) / -2) !important;
  z-index: 10;
  cursor: pointer;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center !important;
      -ms-flex-align: center !important;
          align-items: center !important;
  -webkit-box-pack: center !important;
      -ms-flex-pack: center !important;
          justify-content: center !important;
  border-radius: 50% !important;
  background: var(--swiper-nav-bg) !important;
  color: var(--swiper-nav-color) !important;
  border: 1px solid var(--swiper-nav-border) !important;
  -webkit-box-shadow: var(--swiper-nav-shadow) !important;
          box-shadow: var(--swiper-nav-shadow) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  -webkit-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  background-image: none !important;
}
.swiper-button-prev::after,
.swiper-button-next::after {
  font-family: "bootstrap-icons" !important;
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-variant: normal;
  line-height: 1;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
  background: var(--swiper-nav-hover-bg) !important;
  border-color: var(--swiper-nav-hover-border) !important;
  -webkit-transform: scale(1.08);
          transform: scale(1.08);
  -webkit-box-shadow: var(--shadow-lg) !important;
          box-shadow: var(--shadow-lg) !important;
}
.swiper-button-prev:active,
.swiper-button-next:active {
  -webkit-transform: scale(0.95);
          transform: scale(0.95);
}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 0.35 !important;
  cursor: not-allowed;
  pointer-events: none;
}
@media only screen and (max-width: 767.999px) {
  .swiper-button-prev,
  .swiper-button-next {
    display: none !important;
  }
}

.swiper-button-prev {
  left: 1rem !important;
  right: auto !important;
}
.swiper-button-prev::after {
  content: "\f284";
  margin-right: 2px;
}

.swiper-button-next {
  right: 1rem !important;
  left: auto !important;
}
.swiper-button-next::after {
  content: "\f285";
  margin-left: 2px;
}

.swiper-pagination {
  position: absolute;
  text-align: center;
  -webkit-transition: 300ms opacity;
  transition: 300ms opacity;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}

.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-size);
  height: var(--swiper-pagination-bullet-size);
  display: inline-block;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.4;
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap);
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.swiper-pagination-bullet:hover {
  opacity: 0.7;
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

.swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--swiper-theme-color);
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

.swiper-pagination-bottom {
  bottom: 1.5rem;
  left: 0;
  width: 100%;
}

.swiper-pagination-top {
  top: 1.5rem;
  left: 0;
  width: 100%;
}

.swiper-pagination-progressbar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: var(--framex-base-color-border);
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-theme-color);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: left;
          transform-origin: left;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

.swiper-pagination-fraction {
  color: var(--framex-base-color-text);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0.5rem 1rem;
  background: var(--bg-surface);
  border-radius: 0.425rem;
  -webkit-box-shadow: var(--shadow-sm);
          box-shadow: var(--shadow-sm);
}

.swiper-scrollbar {
  border-radius: 10px;
  position: relative;
  background: var(--framex-base-color-border);
}
.swiper-scrollbar.swiper-scrollbar-horizontal {
  position: absolute;
  left: 1%;
  bottom: 3px;
  z-index: 50;
  height: 5px;
  width: 98%;
}
.swiper-scrollbar .swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: var(--text-muted);
  border-radius: 10px;
  left: 0;
  top: 0;
  cursor: -webkit-grab;
  cursor: grab;
  -webkit-transition: background 0.2s;
  transition: background 0.2s;
}
.swiper-scrollbar .swiper-scrollbar-drag:hover {
  background: var(--text-secondary);
}
.swiper-scrollbar .swiper-scrollbar-drag:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
  background: var(--swiper-theme-color);
}

.slider-container {
  position: relative;
  width: 100%;
}
.slider-container.slider-hover-nav .swiper-button-prev,
.slider-container.slider-hover-nav .swiper-button-next {
  opacity: 0;
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
}
.slider-container.slider-hover-nav .swiper-button-next {
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
}
.slider-container.slider-hover-nav:hover .swiper-button-prev,
.slider-container.slider-hover-nav:hover .swiper-button-next {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.slider-container.slider-compact-nav {
  --swiper-navigation-size: 36px;
}
.slider-container.slider-compact-nav .swiper-button-prev::after,
.slider-container.slider-compact-nav .swiper-button-next::after {
  font-size: 1rem;
}
.slider-container.slider-dark-nav {
  --swiper-nav-bg: rgba(0, 0, 0, 0.7);
  --swiper-nav-color: #fff;
  --swiper-nav-border: transparent;
  --swiper-nav-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  --swiper-nav-hover-bg: rgba(0, 0, 0, 0.9);
}
.slider-container.slider-light-nav {
  --swiper-nav-bg: rgba(255, 255, 255, 0.95);
  --swiper-nav-color: color(text);
  --swiper-nav-border: transparent;
  --swiper-nav-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.slider-hero {
  --hero-slider-height: 70vh;
  --hero-slider-min-height: 500px;
  --hero-slider-max-height: 900px;
  height: var(--hero-slider-height);
  min-height: var(--hero-slider-min-height);
  max-height: var(--hero-slider-max-height);
}
.slider-hero .swiper-slide {
  position: relative;
  overflow: hidden;
}
.slider-hero .swiper-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.3)), color-stop(40%, rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.5)));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.5) 100%);
  z-index: 1;
  pointer-events: none;
}
.slider-hero .swiper-slide .slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  -webkit-transition: -webkit-transform 8s ease;
  transition: -webkit-transform 8s ease;
  transition: transform 8s ease;
  transition: transform 8s ease, -webkit-transform 8s ease;
}
.slider-hero .swiper-slide.swiper-slide-active .slide-bg {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.slider-hero .swiper-slide .slide-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 2rem;
  color: #fff;
}
.slider-hero .swiper-slide .slide-content .slide-subtitle {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 1rem;
  opacity: 0;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  -webkit-transition: all 0.6s ease 0.3s;
  transition: all 0.6s ease 0.3s;
}
.slider-hero .swiper-slide .slide-content .slide-title {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  opacity: 0;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  -webkit-transition: all 0.8s ease 0.4s;
  transition: all 0.8s ease 0.4s;
}
.slider-hero .swiper-slide .slide-content .slide-text {
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.6;
  max-width: 600px;
  margin-bottom: 2rem;
  opacity: 0;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  -webkit-transition: all 0.6s ease 0.5s;
  transition: all 0.6s ease 0.5s;
}
.slider-hero .swiper-slide .slide-content .slide-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  opacity: 0;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  -webkit-transition: all 0.6s ease 0.6s;
  transition: all 0.6s ease 0.6s;
}
.slider-hero .swiper-slide.swiper-slide-active .slide-subtitle,
.slider-hero .swiper-slide.swiper-slide-active .slide-title,
.slider-hero .swiper-slide.swiper-slide-active .slide-text,
.slider-hero .swiper-slide.swiper-slide-active .slide-actions {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.slider-hero .swiper-button-prev,
.slider-hero .swiper-button-next {
  --swiper-navigation-size: 56px;
}
@media only screen and (min-width: 768px) {
  .slider-hero .swiper-button-prev,
  .slider-hero .swiper-button-next {
    --swiper-navigation-size: 64px;
  }
}
.slider-hero .swiper-button-prev::after,
.slider-hero .swiper-button-next::after {
  font-size: 1.5rem;
}
.slider-hero .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.5);
}
.slider-hero .swiper-pagination-bullet-active {
  background: #fff;
}

.slider-cards {
  padding-bottom: 3rem;
}
.slider-cards .swiper-slide {
  height: auto;
}
.slider-cards .swiper-slide > .card {
  height: 100%;
  margin: 0;
}
.slider-cards.swiper-multi-slide .swiper-slide {
  opacity: 0.7;
  -webkit-transform: scale(0.95);
          transform: scale(0.95);
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.slider-cards.swiper-multi-slide .swiper-slide.swiper-slide-active, .slider-cards.swiper-multi-slide .swiper-slide.swiper-slide-next, .slider-cards.swiper-multi-slide .swiper-slide.swiper-slide-prev {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.slider-cards.slider-peek {
  overflow: visible;
}
.slider-cards.slider-peek .swiper-slide {
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
}
.slider-cards.slider-peek .swiper-slide:not(.swiper-slide-active) {
  -webkit-transform: scale(0.92);
          transform: scale(0.92);
  opacity: 0.6;
}

.slider-testimonials {
  --testimonial-avatar-size: 80px;
}
.slider-testimonials .testimonial-slide {
  text-align: center;
  padding: 2rem 1rem;
}
@media only screen and (min-width: 768px) {
  .slider-testimonials .testimonial-slide {
    padding: 3rem 4rem;
  }
}
.slider-testimonials .testimonial-slide .testimonial-avatar {
  width: var(--testimonial-avatar-size);
  height: var(--testimonial-avatar-size);
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  margin: 0 auto 1.5rem;
  border: 4px solid var(--bg-surface);
  -webkit-box-shadow: var(--shadow-lg);
          box-shadow: var(--shadow-lg);
}
.slider-testimonials .testimonial-slide .testimonial-quote {
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  line-height: 1.7;
  color: var(--text-base-color);
  font-style: italic;
  margin-bottom: 1.5rem;
  position: relative;
}
.slider-testimonials .testimonial-slide .testimonial-quote::before, .slider-testimonials .testimonial-slide .testimonial-quote::after {
  font-family: Georgia, serif;
  font-size: 4rem;
  line-height: 1;
  color: var(--color-primary-200);
  position: absolute;
  opacity: 0.5;
}
.slider-testimonials .testimonial-slide .testimonial-quote::before {
  content: '"';
  top: -1rem;
  left: -1rem;
}
.slider-testimonials .testimonial-slide .testimonial-quote::after {
  content: '"';
  bottom: -2rem;
  right: -1rem;
}
.slider-testimonials .testimonial-slide .testimonial-author .author-name {
  font-weight: 600;
  color: var(--text-base-color);
  margin-bottom: 0.25rem;
}
.slider-testimonials .testimonial-slide .testimonial-author .author-role {
  font-size: 0.875rem;
  color: var(--text-muted);
}
.slider-testimonials .testimonial-slide .testimonial-rating {
  color: var(--color-warning-400);
  font-size: 1.125rem;
  margin-bottom: 1rem;
}
.slider-testimonials .testimonial-slide .testimonial-rating i {
  margin: 0 2px;
}
.slider-testimonials.testimonial-large {
  --testimonial-avatar-size: 120px;
}

.slider-logos .swiper-slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1.5rem;
  opacity: 0.5;
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.slider-logos .swiper-slide:hover {
  opacity: 1;
  -webkit-filter: grayscale(0%);
          filter: grayscale(0%);
}
.slider-logos .swiper-slide img {
  max-width: 100%;
  max-height: 60px;
  -o-object-fit: contain;
     object-fit: contain;
}
.slider-logos.slider-marquee .swiper-wrapper {
  -webkit-transition-timing-function: linear !important;
          transition-timing-function: linear !important;
}
.slider-logos.slider-marquee .swiper-slide {
  opacity: 0.6;
}
.slider-logos.slider-marquee .swiper-slide:hover {
  opacity: 1;
}

.slider-gallery {
  --gallery-thumb-height: 100px;
}
.slider-gallery .gallery-main {
  margin-bottom: 1rem;
  border-radius: 0.925rem;
  overflow: hidden;
}
.slider-gallery .gallery-main .swiper-slide {
  aspect-ratio: 16/10;
}
.slider-gallery .gallery-main .swiper-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.slider-gallery .gallery-thumbs {
  height: var(--gallery-thumb-height);
}
.slider-gallery .gallery-thumbs .swiper-slide {
  border-radius: 0.925rem;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.4;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  border: 2px solid transparent;
}
.slider-gallery .gallery-thumbs .swiper-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.slider-gallery .gallery-thumbs .swiper-slide.swiper-slide-thumb-active {
  opacity: 1;
}
.slider-gallery .gallery-thumbs .swiper-slide:hover {
  opacity: 0.8;
}

.slider-product {
  overflow: hidden;
}
.slider-product .swiper-slide {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.4s ease, visibility 0.4s ease;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.slider-product .swiper-slide.swiper-slide-active {
  opacity: 1;
  visibility: visible;
}
.slider-product .product-slide {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 2rem 0;
}
@media only screen and (min-width: 992px) {
  .slider-product .product-slide {
    grid-template-columns: 1fr 1fr;
    padding: 3rem 2rem;
  }
}
.slider-product .product-slide .product-media {
  position: relative;
  border-radius: 0.925rem;
  overflow: hidden;
  background: var(--bg-soft-neutral);
}
.slider-product .product-slide .product-media img {
  width: 100%;
  aspect-ratio: 1;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}
.slider-product .product-slide .product-media:hover img {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
.slider-product .product-slide .product-media .product-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.5rem 1rem;
  background: var(--color-danger-600);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 0.925rem;
  letter-spacing: 0.05em;
}
.slider-product .product-slide .product-info .product-category {
  font-size: 0.875rem;
  color: var(--color-primary-600);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
}
.slider-product .product-slide .product-info .product-title {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.2;
}
.slider-product .product-slide .product-info .product-price {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.slider-product .product-slide .product-info .product-price .price-current {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-primary-600);
}
.slider-product .product-slide .product-info .product-price .price-original {
  font-size: 1.25rem;
  color: var(--text-muted);
  text-decoration: line-through;
}
.slider-product .product-slide .product-info .product-description {
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 2rem;
}
.slider-product .product-slide .product-info .product-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.slider-content .content-slide {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 400px;
}
@media only screen and (min-width: 768px) {
  .slider-content .content-slide {
    grid-template-columns: 1fr 1fr;
    min-height: 500px;
  }
}
.slider-content .content-slide .content-media {
  position: relative;
  overflow: hidden;
}
.slider-content .content-slide .content-media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.slider-content .content-slide .content-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 2.5rem;
  background: var(--bg-surface);
}
@media only screen and (min-width: 768px) {
  .slider-content .content-slide .content-body {
    padding: 3.5rem;
  }
}
.slider-content .content-slide .content-body .content-label {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-primary-600);
  margin-bottom: 1rem;
}
.slider-content .content-slide .content-body .content-label::before {
  content: "";
  width: 24px;
  height: 2px;
  background: currentColor;
}
.slider-content .content-slide .content-body .content-title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 1rem;
}
.slider-content .content-slide .content-body .content-text {
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .slider-content.content-right .content-slide .content-media {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  .slider-content.content-right .content-slide .content-body {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
}

@media only screen and (max-width: 767.999px) {
  .slider-container .swiper-pagination {
    bottom: 0.5rem;
  }
  .slider-hero {
    --hero-slider-height: 60vh;
    --hero-slider-min-height: 400px;
  }
  .slider-hero .swiper-slide .slide-content {
    padding: 1.5rem;
    text-align: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .slider-hero .swiper-slide .slide-content .slide-actions {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100%;
    max-width: 280px;
  }
  .slider-gallery {
    --gallery-thumb-height: 70px;
  }
  .slider-testimonials .testimonial-slide .testimonial-quote::before, .slider-testimonials .testimonial-slide .testimonial-quote::after {
    font-size: 2.5rem;
  }
  .slider-testimonials .testimonial-slide .testimonial-quote::before {
    left: -0.5rem;
  }
  .slider-testimonials .testimonial-slide .testimonial-quote::after {
    right: -0.5rem;
  }
}
.swiper-button-prev:focus-visible,
.swiper-button-next:focus-visible {
  outline: 2px solid var(--color-primary-600);
  outline-offset: 2px;
}

.swiper-pagination-bullet:focus {
  outline: 2px solid var(--color-primary-600);
  outline-offset: 2px;
}

.slider-news {
  --news-slider-gap: 2px;
  --news-slider-height: 500px; /* Fixed default height */
  --news-thumb-height: 90px;
  --news-thumb-overlay-bg: var(--bg-surface);
  --news-thumb-title-bg: var(--bg-elevated);
  --news-content-bg: var(--bg-surface);
  --news-content-padding: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--news-slider-gap);
}
.slider-news .news-main {
  position: relative;
  width: 100%;
  height: var(--news-slider-height);
  overflow: hidden;
  background: var(--bg-page);
}
.slider-news .news-main .swiper-wrapper {
  position: relative;
  height: 100%;
}
.slider-news .news-main .swiper-slide {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 400px;
  opacity: 0 !important;
  visibility: hidden !important;
  -webkit-transition: opacity 0.4s ease, visibility 0.4s ease;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.slider-news .news-main .swiper-slide.swiper-slide-active {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 1;
}
.slider-news .news-main .news-slide-inner {
  display: grid;
  grid-template-columns: 1fr;
  height: 100%;
}
@media only screen and (min-width: 992px) {
  .slider-news .news-main .news-slide-inner {
    grid-template-columns: 60% 40%;
  }
}
.slider-news .news-media {
  position: relative;
  overflow: hidden;
  background: var(--bg-soft-neutral);
  border-radius: 0;
  height: 100%;
}
.slider-news .news-media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
  border-radius: 0;
  -webkit-transition: -webkit-transform 0.6s ease;
  transition: -webkit-transform 0.6s ease;
  transition: transform 0.6s ease;
  transition: transform 0.6s ease, -webkit-transform 0.6s ease;
}
.swiper-slide-active .slider-news .news-media img {
  -webkit-transform: scale(1.02);
          transform: scale(1.02);
}
.slider-news .news-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1.5rem;
  background: var(--news-content-bg);
}
@media only screen and (min-width: 768px) {
  .slider-news .news-content {
    padding: 2rem;
  }
}
@media only screen and (min-width: 992px) {
  .slider-news .news-content {
    padding: 2.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .slider-news .news-content {
    padding: var(--news-content-padding);
  }
}
.slider-news .news-content .news-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}
.slider-news .news-content .news-meta .news-time {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.375rem;
}
.slider-news .news-content .news-meta .news-category {
  color: var(--action-primary);
  font-weight: 600;
}
.slider-news .news-content .news-title {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 1rem;
  color: var(--text-base-color);
}
.slider-news .news-content .news-title a {
  color: inherit;
  text-decoration: none;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}
.slider-news .news-content .news-title a:hover {
  color: var(--action-primary);
}
@media only screen and (min-width: 1200px) {
  .slider-news .news-content .news-title {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
  }
}
.slider-news .news-content .news-excerpt {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media only screen and (min-width: 992px) {
  .slider-news .news-content .news-excerpt {
    -webkit-line-clamp: 5;
  }
}
.slider-news .news-content .news-link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--action-primary);
  text-decoration: none;
  -webkit-transition: gap 0.2s ease;
  transition: gap 0.2s ease;
}
.slider-news .news-content .news-link::after {
  content: "\f285";
  font-family: "bootstrap-icons";
  font-size: 0.875rem;
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}
.slider-news .news-content .news-link:hover {
  gap: 0.75rem;
}
.slider-news .news-content .news-link:hover::after {
  -webkit-transform: translateX(3px);
          transform: translateX(3px);
}
.slider-news .swiper-slide-active .news-meta,
.slider-news .swiper-slide-active .news-title,
.slider-news .swiper-slide-active .news-excerpt,
.slider-news .swiper-slide-active .news-link {
  opacity: 0;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  -webkit-animation: newsContentIn 0.5s ease forwards;
          animation: newsContentIn 0.5s ease forwards;
}
.slider-news .swiper-slide-active .news-meta {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
.slider-news .swiper-slide-active .news-title {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.slider-news .swiper-slide-active .news-excerpt {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.slider-news .swiper-slide-active .news-link {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
.slider-news .news-thumbs {
  height: var(--news-thumb-height);
  background: var(--bg-page);
  overflow: hidden;
}
.slider-news .news-thumbs .swiper-wrapper {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  gap: 2px;
  height: 100%;
  width: 100%;
  -webkit-transform: none !important;
          transform: none !important;
}
.slider-news .news-thumbs .swiper-slide {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--bg-surface);
  -webkit-box-flex: 1 !important;
      -ms-flex: 1 1 0px !important;
          flex: 1 1 0 !important;
  min-width: 0;
  width: auto !important;
  height: 100%;
  margin: 0 !important;
}
.slider-news .news-thumbs .swiper-slide .thumb-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0;
  -webkit-transition: opacity 0.3s ease, -webkit-transform 0.4s ease;
  transition: opacity 0.3s ease, -webkit-transform 0.4s ease;
  transition: opacity 0.3s ease, transform 0.4s ease;
  transition: opacity 0.3s ease, transform 0.4s ease, -webkit-transform 0.4s ease;
}
.slider-news .news-thumbs .swiper-slide .thumb-title {
  position: absolute;
  inset: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.75rem 1rem;
  background: var(--news-thumb-title-bg);
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.slider-news .news-thumbs .swiper-slide .thumb-title span {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-base-color);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.slider-news .news-thumbs .swiper-slide:hover:not(.swiper-slide-thumb-active) .thumb-image {
  opacity: 0.3;
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
.slider-news .news-thumbs .swiper-slide:hover:not(.swiper-slide-thumb-active) .thumb-title {
  opacity: 1;
}
.slider-news .news-thumbs .swiper-slide.swiper-slide-thumb-active .thumb-image {
  opacity: 0;
}
.slider-news .news-thumbs .swiper-slide.swiper-slide-thumb-active .thumb-title {
  opacity: 1;
  background: var(--action-primary-soft);
}
.slider-news .news-thumbs .swiper-slide.swiper-slide-thumb-active .thumb-title span {
  color: var(--action-primary);
}
.slider-news .news-thumbs .swiper-slide.swiper-slide-thumb-active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--action-primary);
  z-index: 2;
}
.slider-news .swiper-button-prev {
  left: 1rem !important;
}
.slider-news .swiper-button-next {
  right: 1rem !important;
}

@-webkit-keyframes newsContentIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes newsContentIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
.slider-card-img {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  text-decoration: none;
}
.slider-card-img .card-overlay {
  -webkit-transition: background 0.35s ease;
  transition: background 0.35s ease;
}
.slider-card-img:hover .card-overlay {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, transparent), to(color-mix(in oklch, black 78%, transparent)));
  background: linear-gradient(to bottom, transparent 10%, color-mix(in oklch, black 78%, transparent));
}

.badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  white-space: nowrap;
  vertical-align: baseline;
  background-color: var(--framex-graycolors-color-gray-200);
  color: var(--framex-graycolors-color-gray-700);
}
.badge:empty {
  display: none;
}

.badge-sm {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
}

.badge-md {
  font-size: 0.875rem;
  padding: 0.375rem 0.625rem;
}

.badge-lg {
  font-size: 1rem;
  padding: 0.5rem 0.75rem;
}

.badge-pill {
  border-radius: 50rem;
}

.badge-square {
  border-radius: 0;
}

.badge-positioned {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
}

.badge-container {
  position: relative;
  display: inline-block;
}

.glightbox-container {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999 !important;
  overflow: hidden;
  -ms-touch-action: none;
  touch-action: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  outline: none;
}

.glightbox-container.inactive {
  display: none;
}

.glightbox-container .gcontainer {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 9999;
  overflow: hidden;
}

.glightbox-container .gslider {
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
  position: relative;
  overflow: hidden;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.glightbox-container .gslide {
  width: 100%;
  position: absolute;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  opacity: 0;
}

.glightbox-container .gslide.current {
  opacity: 1;
  z-index: 99999;
  position: relative;
}

.glightbox-container .gslide.prev {
  opacity: 1;
  z-index: 9999;
}

.glightbox-container .gslide-inner-content {
  width: 100%;
}

.glightbox-container .ginner-container {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  max-width: 100%;
  margin: auto;
  height: 100vh;
}

.glightbox-container .ginner-container.gvideo-container {
  width: 100%;
}

.glightbox-container .ginner-container.desc-bottom,
.glightbox-container .ginner-container.desc-top {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.glightbox-container .ginner-container.desc-left,
.glightbox-container .ginner-container.desc-right {
  max-width: 100% !important;
}

.gslide iframe,
.gslide video {
  outline: none !important;
  border: none;
  min-height: 165px;
  -webkit-overflow-scrolling: touch;
  -ms-touch-action: auto;
  touch-action: auto;
}

.gslide:not(.current) {
  pointer-events: none;
}

.gslide-image {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.gslide-image img {
  max-height: 100vh;
  display: block;
  padding: 0;
  float: none;
  outline: none;
  border: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  max-width: 100vw;
  width: auto;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
  -ms-touch-action: none;
  touch-action: none;
  margin: auto;
  min-width: 200px;
}

.desc-top .gslide-image img,
.desc-bottom .gslide-image img {
  width: auto;
}

.desc-left .gslide-image img,
.desc-right .gslide-image img {
  width: auto;
  max-width: 100%;
}

.gslide-image img.zoomable {
  position: relative;
}

.gslide-image img.dragging {
  cursor: -webkit-grabbing !important;
  cursor: grabbing !important;
  -webkit-transition: none;
  transition: none;
}

.gslide-video {
  position: relative;
  max-width: 100vh;
  width: 100% !important;
}

.gslide-video .gvideo-wrapper {
  width: 100%;
  /* max-width: 160vmin; */
  margin: auto;
}

.gslide-video::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 0, 0, 0.34);
  display: none;
}

.gslide-video.playing::before {
  display: none;
}

.gslide-video.fullscreen {
  max-width: 100% !important;
  min-width: 100%;
  height: 75vh;
}

.gslide-video.fullscreen video {
  max-width: 100% !important;
  width: 100% !important;
}

.gslide-inline {
  background: #fff;
  text-align: left;
  max-height: calc(100vh - 40px);
  overflow: auto;
  max-width: 100%;
  margin: auto;
}

.gslide-inline .ginlined-content {
  padding: 20px;
  width: 100%;
}

.gslide-inline .dragging {
  cursor: -webkit-grabbing !important;
  cursor: grabbing !important;
  -webkit-transition: none;
  transition: none;
}

.ginlined-content {
  overflow: auto;
  display: block !important;
  opacity: 1;
}

.gslide-external {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  min-width: 100%;
  background: #fff;
  padding: 0;
  overflow: auto;
  max-height: 75vh;
  height: 100%;
}

.gslide-media {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: auto;
}

.zoomed .gslide-media {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.desc-top .gslide-media,
.desc-bottom .gslide-media {
  margin: 0 auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.gslide-description {
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1 0 100%;
  flex: 1 0 100%;
}

.gslide-description.description-left,
.gslide-description.description-right {
  max-width: 100%;
}

.gslide-description.description-bottom,
.gslide-description.description-top {
  margin: 0 auto;
  width: 100%;
}

.gslide-description p {
  margin-bottom: 12px;
}

.gslide-description p:last-child {
  margin-bottom: 0;
}

.zoomed .gslide-description {
  display: none;
}

.glightbox-button-hidden {
  display: none;
}

/*
     * Description for mobiles
     * something like facebook does the description
     * for the photos
    */
.glightbox-mobile .glightbox-container .gslide-description {
  height: auto !important;
  width: 100%;
  position: absolute;
  bottom: 0;
  padding: 19px 11px;
  max-width: 100vw !important;
  -webkit-box-ordinal-group: 3 !important;
  -ms-flex-order: 2 !important;
  order: 2 !important;
  max-height: 78vh;
  overflow: auto !important;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.75)));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
  -webkit-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
  padding-bottom: 50px;
}

.glightbox-mobile .glightbox-container .gslide-title {
  color: #fff;
  font-size: 1em;
}

.glightbox-mobile .glightbox-container .gslide-desc {
  color: #a1a1a1;
}

.glightbox-mobile .glightbox-container .gslide-desc a {
  color: #fff;
  font-weight: bold;
}

.glightbox-mobile .glightbox-container .gslide-desc * {
  color: inherit;
}

.glightbox-mobile .glightbox-container .gslide-desc .desc-more {
  color: #fff;
  opacity: 0.4;
}

.gdesc-open .gslide-media {
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
  opacity: 0.4;
}

.gdesc-open .gdesc-inner {
  padding-bottom: 30px;
}

.gdesc-closed .gslide-media {
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
  opacity: 1;
}

.greset {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.gabsolute {
  position: absolute;
}

.grelative {
  position: relative;
}

.glightbox-desc {
  display: none !important;
}

.glightbox-open {
  overflow: hidden;
}

.gloader {
  height: 25px;
  width: 25px;
  -webkit-animation: lightboxLoader 0.8s infinite linear;
  animation: lightboxLoader 0.8s infinite linear;
  border: 2px solid #fff;
  border-right-color: transparent;
  border-radius: 50%;
  position: absolute;
  display: block;
  z-index: 9999;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 47%;
}

.goverlay {
  width: 100%;
  height: calc(100vh + 1px);
  position: fixed;
  top: -1px;
  left: 0;
  background: #000;
  will-change: opacity;
}

.glightbox-mobile .goverlay {
  background: #000;
}

.gprev,
.gnext,
.gclose {
  z-index: 99999;
  cursor: pointer;
  width: 26px;
  height: 44px;
  border: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.gprev svg,
.gnext svg,
.gclose svg {
  display: block;
  width: 25px;
  height: auto;
  margin: 0;
  padding: 0;
}

.gprev.disabled,
.gnext.disabled,
.gclose.disabled {
  opacity: 0.1;
}

.gprev .garrow,
.gnext .garrow,
.gclose .garrow {
  stroke: #fff;
}

.gbtn.focused {
  outline: 2px solid #0f3d81;
}

iframe.wait-autoplay {
  opacity: 0;
}

.glightbox-closing .gnext,
.glightbox-closing .gprev,
.glightbox-closing .gclose {
  opacity: 0 !important;
}

/*Skin */
.glightbox-clean .gslide-description {
  background: #fff;
}

.glightbox-clean .gdesc-inner {
  padding: 22px 20px;
}

.glightbox-clean .gslide-title {
  font-size: 1em;
  font-weight: normal;
  font-family: arial;
  color: #000;
  margin-bottom: 19px;
  line-height: 1.4em;
}

.glightbox-clean .gslide-desc {
  font-size: 0.86em;
  margin-bottom: 0;
  font-family: arial;
  line-height: 1.4em;
}

.glightbox-clean .gslide-video {
  background: #000;
}

.glightbox-clean .gprev,
.glightbox-clean .gnext,
.glightbox-clean .gclose {
  background-color: rgba(0, 0, 0, 0.75);
  border-radius: 4px;
}

.glightbox-clean .gprev path,
.glightbox-clean .gnext path,
.glightbox-clean .gclose path {
  fill: #fff;
}

.glightbox-clean .gprev {
  position: absolute;
  top: -100%;
  left: 30px;
  width: 40px;
  height: 50px;
}

.glightbox-clean .gnext {
  position: absolute;
  top: -100%;
  right: 30px;
  width: 40px;
  height: 50px;
}

.glightbox-clean .gclose {
  width: 35px;
  height: 35px;
  top: 15px;
  right: 10px;
  position: absolute;
}

.glightbox-clean .gclose svg {
  width: 18px;
  height: auto;
}

.glightbox-clean .gclose:hover {
  opacity: 1;
}

/*CSS Animations*/
.gfadeIn {
  -webkit-animation: gfadeIn 0.5s ease;
  animation: gfadeIn 0.5s ease;
}

.gfadeOut {
  -webkit-animation: gfadeOut 0.5s ease;
  animation: gfadeOut 0.5s ease;
}

.gslideOutLeft {
  -webkit-animation: gslideOutLeft 0.3s ease;
  animation: gslideOutLeft 0.3s ease;
}

.gslideInLeft {
  -webkit-animation: gslideInLeft 0.3s ease;
  animation: gslideInLeft 0.3s ease;
}

.gslideOutRight {
  -webkit-animation: gslideOutRight 0.3s ease;
  animation: gslideOutRight 0.3s ease;
}

.gslideInRight {
  -webkit-animation: gslideInRight 0.3s ease;
  animation: gslideInRight 0.3s ease;
}

.gzoomIn {
  -webkit-animation: gzoomIn 0.5s ease;
  animation: gzoomIn 0.5s ease;
}

.gzoomOut {
  -webkit-animation: gzoomOut 0.5s ease;
  animation: gzoomOut 0.5s ease;
}

@-webkit-keyframes lightboxLoader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes lightboxLoader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes gfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes gfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes gfadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes gfadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes gslideInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-60%, 0, 0);
    transform: translate3d(-60%, 0, 0);
  }
  to {
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes gslideInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-60%, 0, 0);
    transform: translate3d(-60%, 0, 0);
  }
  to {
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes gslideOutLeft {
  from {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(-60%, 0, 0);
    transform: translate3d(-60%, 0, 0);
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes gslideOutLeft {
  from {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(-60%, 0, 0);
    transform: translate3d(-60%, 0, 0);
    opacity: 0;
    visibility: hidden;
  }
}
@-webkit-keyframes gslideInRight {
  from {
    opacity: 0;
    visibility: visible;
    -webkit-transform: translate3d(60%, 0, 0);
    transform: translate3d(60%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes gslideInRight {
  from {
    opacity: 0;
    visibility: visible;
    -webkit-transform: translate3d(60%, 0, 0);
    transform: translate3d(60%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes gslideOutRight {
  from {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(60%, 0, 0);
    transform: translate3d(60%, 0, 0);
    opacity: 0;
  }
}
@keyframes gslideOutRight {
  from {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(60%, 0, 0);
    transform: translate3d(60%, 0, 0);
    opacity: 0;
  }
}
@-webkit-keyframes gzoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 1;
  }
}
@keyframes gzoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes gzoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
@keyframes gzoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
@media (min-width: 769px) {
  .glightbox-container .ginner-container {
    width: auto;
    height: auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .glightbox-container .ginner-container.desc-top .gslide-description {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
  }
  .glightbox-container .ginner-container.desc-top .gslide-image,
  .glightbox-container .ginner-container.desc-top .gslide-image img {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }
  .glightbox-container .ginner-container.desc-left .gslide-description {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
  }
  .glightbox-container .ginner-container.desc-left .gslide-image {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }
  .gslide-image img {
    max-height: 97vh;
    max-width: 100%;
  }
  .gslide-image img.zoomable {
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
  }
  .zoomed .gslide-image img.zoomable {
    cursor: -webkit-grab;
    cursor: grab;
  }
  .gslide-inline {
    max-height: 95vh;
  }
  .gslide-external {
    max-height: 100vh;
  }
  .gslide-description.description-left,
  .gslide-description.description-right {
    max-width: 275px;
  }
  .glightbox-open {
    height: auto;
  }
  .goverlay {
    background: rgba(0, 0, 0, 0.92);
  }
  .glightbox-clean .gslide-media {
    -webkit-box-shadow: 1px 2px 9px 0px rgba(0, 0, 0, 0.65);
    box-shadow: 1px 2px 9px 0px rgba(0, 0, 0, 0.65);
  }
  .glightbox-clean .description-left .gdesc-inner,
  .glightbox-clean .description-right .gdesc-inner {
    position: absolute;
    height: 100%;
    overflow-y: auto;
  }
  .glightbox-clean .gprev,
  .glightbox-clean .gnext,
  .glightbox-clean .gclose {
    background-color: rgba(0, 0, 0, 0.32);
  }
  .glightbox-clean .gprev:hover,
  .glightbox-clean .gnext:hover,
  .glightbox-clean .gclose:hover {
    background-color: rgba(0, 0, 0, 0.7);
  }
  .glightbox-clean .gprev {
    top: 45%;
  }
  .glightbox-clean .gnext {
    top: 45%;
  }
}
@media (min-width: 992px) {
  .glightbox-clean .gclose {
    opacity: 0.7;
    right: 20px;
  }
}
@media screen and (max-height: 420px) {
  .goverlay {
    background: #000;
  }
}
.plyr--video {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.pagination {
  --pagination-font-size: 0.875rem;
  --pagination-padding-y: 0.5rem;
  --pagination-padding-x: 0.75rem;
  --pagination-gap: 0.5rem;
  --pagination-border-radius: 0.25rem;
  --pagination-bg: var(--framex-base-color-bg-foreground);
  --pagination-border-color: var(--framex-base-color-border);
  --pagination-text-color: var(--framex-base-color-text);
  --pagination-hover-bg: var(--framex-base-color-bg-hover);
  --pagination-hover-color: var(--framex-base-color-primary-dark);
  --pagination-active-bg: var(--framex-base-color-primary);
  --pagination-active-color: var(--framex-base-color-white);
  --pagination-disabled-bg: var(--framex-graycolors-color-gray-100);
  --pagination-disabled-color: var(--framex-graycolors-color-gray-500);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.pagination__links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: var(--pagination-gap);
  list-style: none;
  padding: 0;
  margin: 0;
}
.pagination__page-number {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: var(--pagination-padding-y) var(--pagination-padding-x);
  font-size: var(--pagination-font-size);
  font-weight: 500;
  text-decoration: none;
  color: var(--pagination-text-color);
  background-color: var(--pagination-bg);
  border: 1px solid var(--pagination-border-color);
  border-radius: var(--pagination-border-radius);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}
.pagination__page-number:hover:not(.pagination__page-number--current):not(.disabled) {
  background-color: var(--pagination-hover-bg);
  color: var(--pagination-hover-color);
  border-color: var(--pagination-hover-color);
}
.pagination__page-number:focus-visible {
  outline: 2px solid var(--pagination-active-bg);
  outline-offset: 2px;
}
.pagination__page-number--current {
  background-color: var(--pagination-active-bg);
  color: var(--pagination-active-color) !important;
  border-color: var(--pagination-active-bg);
  cursor: default;
}
.pagination__page-number.disabled {
  color: var(--pagination-disabled-color);
  background-color: var(--pagination-disabled-bg);
  border-color: var(--pagination-border-color);
  cursor: not-allowed;
  opacity: 0.7;
}
.pagination__page-number.pagination__page-number:not(a) {
  background-color: transparent;
  border-color: transparent;
  cursor: default;
  padding: 0 var(--pagination-gap);
}
.pagination__page-number i, .pagination__page-number svg {
  font-size: 1em;
}
.pagination--sm {
  --pagination-font-size: 0.75rem;
  --pagination-padding-y: 0.375rem;
  --pagination-padding-x: 0.625rem;
}
.pagination--sm .pagination__page-number {
  min-width: 1.875rem;
  height: 1.875rem;
}
.pagination--lg {
  --pagination-font-size: 1rem;
  --pagination-padding-y: 0.625rem;
  --pagination-padding-x: 1rem;
}
.pagination--lg .pagination__page-number {
  min-width: 2.75rem;
  height: 2.75rem;
}

.tabs {
  --tabs-accent: var(--framex-base-color-primary);
  --tabs-bg: var(--framex-base-color-bg-foreground);
  --tabs-bg-active: var(--framex-base-color-bg-foreground);
  --tabs-text: var(--framex-base-color-text);
  --tabs-muted: var(--framex-graycolors-color-gray-400);
  --tabs-border: var(--framex-base-color-border);
  display: block;
  color: var(--tabs-text);
}

.tabs-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem;
  border-bottom: 1px solid var(--tabs-border);
  margin-bottom: 1rem;
}

.tab {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: 0;
  color: var(--tabs-muted);
  padding: 0.5rem 0.875rem;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  border-radius: 0.5rem;
  position: relative;
  -webkit-transition: color 0.2s ease, background-color 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: color 0.2s ease, background-color 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.tab:hover {
  color: var(--tabs-text);
}
.tab.is-active {
  color: var(--tabs-text);
}
.tab[aria-selected=true] {
  color: var(--tabs-text);
}

.tabs.tabs--underline .tab {
  border-radius: 0;
}
.tabs.tabs--underline .tab.is-active,
.tabs.tabs--underline .tab[aria-selected=true] {
  -webkit-box-shadow: inset 0 -2px 0 0 var(--tabs-accent);
          box-shadow: inset 0 -2px 0 0 var(--tabs-accent);
}

.tabs.tabs--boxed .tab {
  background: transparent;
  border: 1px solid transparent;
}
.tabs.tabs--boxed .tab.is-active,
.tabs.tabs--boxed .tab[aria-selected=true] {
  background: var(--tabs-bg-active);
  border-color: var(--tabs-border);
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.tabs.tabs--pill .tab {
  border-radius: 999px;
  background: transparent;
}
.tabs.tabs--pill .tab.is-active,
.tabs.tabs--pill .tab[aria-selected=true] {
  background: var(--tabs-bg-active);
}

.tabs-panels {
  position: relative;
}

.tab-panel {
  display: none;
  margin: 0;
  padding: 1rem;
  background: var(--tabs-bg);
  border: 1px solid var(--tabs-border);
}
.tab-panel.is-active {
  display: block;
}
.tab-panel[hidden] {
  display: none !important;
}

.tab + .tab {
  margin-left: 0.125rem;
}

:root {
  --framex-base-color-black: oklch(0% 0 0deg);
  --framex-base-color-white: oklch(100% 0 0deg);
  --framex-base-color-primary: oklch(54.6% 0.245 262.881deg);
  --framex-base-color-secondary: oklch(62.7% 0.265 303.9deg);
  --framex-base-color-success: oklch(72.3% 0.219 149.579deg);
  --framex-base-color-danger: oklch(63% 0.5 25deg);
  --framex-base-color-warning: oklch(79.5% 0.184 86.047deg);
  --framex-base-color-info: oklch(71.5% 0.143 215.221deg);
  --framex-base-color-light: oklch(97% 0.008 250deg);
  --framex-base-color-dark: oklch(37% 0.012 250deg);
  --framex-base-color-muted: oklch(56% 0.014 250deg);
  --framex-base-color-link: oklch(54.6% 0.245 262.881deg);
  --framex-base-color-link-hover: oklch(48.8% 0.243 264.376deg);
  --framex-base-color-border: oklch(88% 0.012 250deg);
  --framex-base-color-blockquote-border: oklch(54.6% 0.245 262.881deg);
  --framex-base-color-mark-background: oklch(96.2% 0.059 95.617deg);
  --framex-base-color-mark-foreground: oklch(0% 0 0deg);
  --framex-base-color-code-background: oklch(97% 0.014 254.604deg);
  --framex-base-color-code-foreground: oklch(0% 0 0deg);
  --framex-base-color-background: oklch(98.809% 0.00011 271.152deg);
  --framex-base-color-text: oklch(18% 0.008 250deg);
  --framex-base-color-heading: oklch(18% 0.008 250deg);
  --framex-base-color-accent: oklch(70.7% 0.165 254.624deg);
  --framex-base-color-highlight: oklch(90.5% 0.182 98.111deg);
  --framex-base-color-bg-foreground: oklch(100% 0 0deg);
  --framex-base-color-bg-background: oklch(97% 0.004 250deg);
  --framex-base-color-bg-nav: oklch(100% 0 0deg);
  --framex-base-color-bg-nav-dropdown: oklch(100% 0 0deg);
  --framex-base-color-bg-nav-hover: oklch(97% 0.014 254.604deg);
  --framex-base-color-card-bg: oklch(100% 0 0deg);
  --framex-base-color-card-shadow: 0px 6px 34px rgba(215, 216, 222, 0.41);
  --framex-base-color-footer-bg: oklch(32% 0.011 250deg);
  --framex-graycolors-color-gray-50: oklch(97% 0.004 250deg);
  --framex-graycolors-color-gray-100: oklch(94% 0.005 250deg);
  --framex-graycolors-color-gray-200: oklch(88% 0.006 250deg);
  --framex-graycolors-color-gray-300: oklch(79% 0.007 250deg);
  --framex-graycolors-color-gray-400: oklch(68% 0.007 250deg);
  --framex-graycolors-color-gray-500: oklch(57% 0.007 250deg);
  --framex-graycolors-color-gray-600: oklch(47% 0.006 250deg);
  --framex-graycolors-color-gray-700: oklch(38% 0.006 250deg);
  --framex-graycolors-color-gray-800: oklch(28% 0.005 250deg);
  --framex-graycolors-color-gray-900: oklch(18% 0.004 250deg);
  --framex-framexcolors-color-slate: oklch(57% 0.017 255deg);
  --framex-framexcolors-color-gray: oklch(57% 0.007 250deg);
  --framex-framexcolors-color-zinc: oklch(57% 0.01 260deg);
  --framex-framexcolors-color-neutral: oklch(56% 0.014 250deg);
  --framex-framexcolors-color-stone: oklch(57% 0.017 70deg);
  --framex-framexcolors-color-red: oklch(63% 0.5 25deg);
  --framex-framexcolors-color-orange: oklch(70.5% 0.213 47.604deg);
  --framex-framexcolors-color-amber: oklch(76.9% 0.188 70.08deg);
  --framex-framexcolors-color-yellow: oklch(79.5% 0.184 86.047deg);
  --framex-framexcolors-color-lime: oklch(76.8% 0.233 130.85deg);
  --framex-framexcolors-color-green: oklch(72.3% 0.219 149.579deg);
  --framex-framexcolors-color-emerald: oklch(69.6% 0.17 162.48deg);
  --framex-framexcolors-color-teal: oklch(70.4% 0.14 182.503deg);
  --framex-framexcolors-color-cyan: oklch(71.5% 0.143 215.221deg);
  --framex-framexcolors-color-sky: oklch(68.5% 0.169 237.323deg);
  --framex-framexcolors-color-blue: oklch(54.6% 0.245 262.881deg);
  --framex-framexcolors-color-indigo: oklch(58.5% 0.233 277.117deg);
  --framex-framexcolors-color-violet: oklch(60.6% 0.25 292.717deg);
  --framex-framexcolors-color-purple: oklch(62.7% 0.265 303.9deg);
  --framex-framexcolors-color-fuchsia: oklch(66.7% 0.295 322.15deg);
  --framex-framexcolors-color-pink: oklch(65.6% 0.241 354.308deg);
  --framex-framexcolors-color-rose: oklch(64.5% 0.246 16.439deg);
  --framex-framexcolors-color-success: oklch(72.3% 0.219 149.579deg);
  --framex-framexcolors-color-danger: oklch(63% 0.5 25deg);
  --framex-framexcolors-color-warning: oklch(79.5% 0.184 86.047deg);
  --framex-framexcolors-color-info: oklch(71.5% 0.143 215.221deg);
  --framex-framexcolors-color-dark: oklch(37% 0.012 250deg);
  --framex-framexcolors-color-primary: oklch(54.6% 0.245 262.881deg);
  --framex-framexcolors-color-secondary: oklch(62.7% 0.265 303.9deg);
  --framex-selection-color-foreground: oklch(37% 0.012 250deg);
  --framex-selection-color-background: oklch(80.9% 0.105 251.813deg);
}

[data-theme-mode=dark], .dark {
  --framex-base-color-black: oklch(0% 0 0deg);
  --framex-base-color-white: oklch(100% 0 0deg);
  --framex-base-color-primary: oklch(88.2% 0.059 254.128deg);
  --framex-base-color-secondary: oklch(62.7% 0.265 303.9deg);
  --framex-base-color-success: oklch(72.3% 0.219 149.579deg);
  --framex-base-color-danger: oklch(63% 0.5 25deg);
  --framex-base-color-warning: oklch(79.5% 0.184 86.047deg);
  --framex-base-color-info: oklch(71.5% 0.143 215.221deg);
  --framex-base-color-light: oklch(97% 0.008 250deg);
  --framex-base-color-dark: oklch(37% 0.012 250deg);
  --framex-base-color-muted: oklch(56% 0.014 250deg);
  --framex-base-color-link: oklch(54.6% 0.245 262.881deg);
  --framex-base-color-link-hover: oklch(80.9% 0.105 251.813deg);
  --framex-base-color-border: oklch(37% 0.012 250deg);
  --framex-base-color-blockquote-border: oklch(54.6% 0.245 262.881deg);
  --framex-base-color-mark-background: oklch(96.2% 0.059 95.617deg);
  --framex-base-color-mark-foreground: oklch(0% 0 0deg);
  --framex-base-color-code-background: oklch(97% 0.014 254.604deg);
  --framex-base-color-code-foreground: oklch(0% 0 0deg);
  --framex-base-color-background: oklch(22.5% 0.009 250deg);
  --framex-base-color-text: oklch(88% 0.012 250deg);
  --framex-base-color-heading: oklch(18% 0.008 250deg);
  --framex-base-color-accent: oklch(70.7% 0.165 254.624deg);
  --framex-base-color-highlight: oklch(90.5% 0.182 98.111deg);
  --framex-base-color-bg-foreground: oklch(37% 0.012 250deg);
  --framex-base-color-bg-background: oklch(22.5% 0.009 250deg);
  --framex-base-color-bg-nav: oklch(12% 0.003 250deg);
  --framex-base-color-bg-nav-dropdown: oklch(27% 0.01 250deg);
  --framex-base-color-bg-nav-hover: oklch(46% 0.014 250deg);
  --framex-base-color-card-bg: oklch(32% 0.011 250deg);
  --framex-base-color-card-shadow: 0px 6px 34px rgba(51, 51, 51, 0.41);
  --framex-base-color-footer-bg: oklch(32% 0.011 250deg);
  --framex-base-color-card-border: oklch(46% 0.014 250deg);
  --framex-graycolors-color-gray-50: oklch(97% 0.004 250deg);
  --framex-graycolors-color-gray-100: oklch(94% 0.005 250deg);
  --framex-graycolors-color-gray-200: oklch(88% 0.006 250deg);
  --framex-graycolors-color-gray-300: oklch(79% 0.007 250deg);
  --framex-graycolors-color-gray-400: oklch(68% 0.007 250deg);
  --framex-graycolors-color-gray-500: oklch(57% 0.007 250deg);
  --framex-graycolors-color-gray-600: oklch(47% 0.006 250deg);
  --framex-graycolors-color-gray-700: oklch(38% 0.006 250deg);
  --framex-graycolors-color-gray-800: oklch(28% 0.005 250deg);
  --framex-graycolors-color-gray-900: oklch(18% 0.004 250deg);
  --framex-framexcolors-color-slate: oklch(57% 0.017 255deg);
  --framex-framexcolors-color-gray: oklch(57% 0.007 250deg);
  --framex-framexcolors-color-zinc: oklch(57% 0.01 260deg);
  --framex-framexcolors-color-neutral: oklch(56% 0.014 250deg);
  --framex-framexcolors-color-stone: oklch(57% 0.017 70deg);
  --framex-framexcolors-color-red: oklch(63% 0.5 25deg);
  --framex-framexcolors-color-orange: oklch(70.5% 0.213 47.604deg);
  --framex-framexcolors-color-amber: oklch(76.9% 0.188 70.08deg);
  --framex-framexcolors-color-yellow: oklch(79.5% 0.184 86.047deg);
  --framex-framexcolors-color-lime: oklch(76.8% 0.233 130.85deg);
  --framex-framexcolors-color-green: oklch(72.3% 0.219 149.579deg);
  --framex-framexcolors-color-emerald: oklch(69.6% 0.17 162.48deg);
  --framex-framexcolors-color-teal: oklch(70.4% 0.14 182.503deg);
  --framex-framexcolors-color-cyan: oklch(71.5% 0.143 215.221deg);
  --framex-framexcolors-color-sky: oklch(68.5% 0.169 237.323deg);
  --framex-framexcolors-color-blue: oklch(54.6% 0.245 262.881deg);
  --framex-framexcolors-color-indigo: oklch(58.5% 0.233 277.117deg);
  --framex-framexcolors-color-violet: oklch(60.6% 0.25 292.717deg);
  --framex-framexcolors-color-purple: oklch(62.7% 0.265 303.9deg);
  --framex-framexcolors-color-fuchsia: oklch(66.7% 0.295 322.15deg);
  --framex-framexcolors-color-pink: oklch(65.6% 0.241 354.308deg);
  --framex-framexcolors-color-rose: oklch(64.5% 0.246 16.439deg);
  --framex-framexcolors-color-success: oklch(72.3% 0.219 149.579deg);
  --framex-framexcolors-color-danger: oklch(63% 0.5 25deg);
  --framex-framexcolors-color-warning: oklch(79.5% 0.184 86.047deg);
  --framex-framexcolors-color-info: oklch(71.5% 0.143 215.221deg);
  --framex-framexcolors-color-dark: oklch(37% 0.012 250deg);
  --framex-framexcolors-color-primary: oklch(54.6% 0.245 262.881deg);
  --framex-framexcolors-color-secondary: oklch(62.7% 0.265 303.9deg);
  --framex-selection-color-foreground: oklch(37% 0.012 250deg);
  --framex-selection-color-background: oklch(80.9% 0.105 251.813deg);
}