/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
/*!-----------------------------------------------------------------------------------
  Theme Name: Sellzy - Multipurpose eCommerce HTML Template
  Author: sellzy
  Description: Sellzy - Multipurpose eCommerce HTML Template
  Version: 1.0.0
-----------------------------------------------------------------------------------*/
/*! ************ TABLE OF CONTENTS ***************
tailwind css
menu css
preloader css
select css
404 css
breadcrumb css
slider css
accordion css
payment method css
comments css
widget css
product details css
table css
others css

----------------------------------------*/
/*!----------------------------------------
 Tailwind css
----------------------------------------*/
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-gray-100: #f9fafb;
    --color-gray-200: #f4f6f8;
    --color-gray-300: #dfe3e8;
    --color-gray-400: #c4cdd5;
    --color-gray-500: #919eab;
    --color-gray-800: #212b36;
    --color-gray-900: #161c24;
    --color-neutral-300: oklch(87% 0 0);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-4xl: 2rem;
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --animate-bounce: bounce 1.4s infinite ease-in-out both;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --font-urbanist: "Urbanist", sans-serif;
    --font-dm-sans: "DM Sans", sans-serif;
    --color-light-primary-text: #212529;
    --color-light-secondary-text: #495057;
    --color-light-disabled-text: #919eab;
    --color-dark-secondary-text: #919eab;
    --color-primary-lighter: #caf8e4;
    --color-primary-light: #5ed9ba;
    --color-primary: #088178;
    --color-primary-dark: #056d6e;
    --color-primary-darker: #04535c;
    --color-secondary: #3366ff;
    --color-secondary-dark: #1939b7;
    --color-info: #1890ff;
    --color-info-dark: #0c53b7;
    --color-info-darker: #04297a;
    --color-success-lighter: #e9fcd4;
    --color-success-light: #aaf27f;
    --color-success: #54d62c;
    --color-success-dark: #229a16;
    --color-warning-lighter: #fff7cd;
    --color-warning-light: #ffe16a;
    --color-warning: #ffc107;
    --color-warning-dark: #b78103;
    --color-error-lighter: #fcd1ca;
    --color-error-light: #ef6168;
    --color-error: #cb0233;
    --color-error-dark: #ae013c;
    --radius-5xl: 3rem;
    --animate-fadeInDown: fadeInDown 700ms ease-in-out 0s 1 normal none running;
    --animate-marquee: marquee-animation 20s linear infinite;
  }
}
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html,
  :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
      -o-tab-size: 4;
         tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b,
  strong {
    font-weight: bolder;
  }
  code,
  kbd,
  samp,
  pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol,
  ul,
  menu {
    list-style: none;
  }
  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    display: block;
    vertical-align: middle;
  }
  img,
  video {
    max-width: 100%;
    height: auto;
  }
  button,
  input,
  select,
  optgroup,
  textarea,
  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::-moz-placeholder {
    opacity: 1;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or
    (contain-intrinsic-size: 1px) {
    ::-moz-placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-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;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button,
  input:where([type="button"], [type="reset"], [type="submit"]),
  ::file-selector-button {
    -webkit-appearance: button;
       -moz-appearance: button;
            appearance: button;
  }
  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .\@container\/quick-view-product-details {
    container-type: inline-size;
    container-name: quick-view-product-details;
  }
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }
  .-top-8 {
    top: calc(var(--spacing) * -8);
  }
  .-top-\[50px\] {
    top: calc(50px * -1);
  }
  .-top-\[60px\] {
    top: calc(60px * -1);
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .top-1\/2 {
    top: calc(1/2 * 100%);
  }
  .top-3 {
    top: calc(var(--spacing) * 3);
  }
  .top-4 {
    top: calc(var(--spacing) * 4);
  }
  .top-5 {
    top: calc(var(--spacing) * 5);
  }
  .top-6 {
    top: calc(var(--spacing) * 6);
  }
  .top-10 {
    top: calc(var(--spacing) * 10);
  }
  .top-20 {
    top: calc(var(--spacing) * 20);
  }
  .top-\[-36px\] {
    top: -36px;
  }
  .top-\[-76px\] {
    top: -76px;
  }
  .top-\[11px\] {
    top: 11px;
  }
  .top-\[43px\] {
    top: 43px;
  }
  .top-\[85px\] {
    top: 85px;
  }
  .top-\[calc\(100\%\+10px\)\] {
    top: calc(100% + 10px);
  }
  .top-full {
    top: 100%;
  }
  .right-0 {
    right: calc(var(--spacing) * 0);
  }
  .right-2 {
    right: calc(var(--spacing) * 2);
  }
  .right-6 {
    right: calc(var(--spacing) * 6);
  }
  .right-\[15px\] {
    right: 15px;
  }
  .right-\[25px\] {
    right: 25px;
  }
  .right-\[30px\] {
    right: 30px;
  }
  .right-\[35px\] {
    right: 35px;
  }
  .right-\[65px\] {
    right: 65px;
  }
  .right-\[100px\] {
    right: 100px;
  }
  .right-\[105px\] {
    right: 105px;
  }
  .right-\[165px\] {
    right: 165px;
  }
  .right-\[405px\] {
    right: 405px;
  }
  .right-auto {
    right: auto;
  }
  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }
  .bottom-\[85px\] {
    bottom: 85px;
  }
  .left-0 {
    left: calc(var(--spacing) * 0);
  }
  .left-1\/2 {
    left: calc(1/2 * 100%);
  }
  .left-6 {
    left: calc(var(--spacing) * 6);
  }
  .left-12 {
    left: calc(var(--spacing) * 12);
  }
  .left-\[14px\] {
    left: 14px;
  }
  .left-\[48px\] {
    left: 48px;
  }
  .left-auto {
    left: auto;
  }
  .left-full {
    left: 100%;
  }
  .z-1 {
    z-index: 1;
  }
  .z-5 {
    z-index: 5;
  }
  .z-9 {
    z-index: 9;
  }
  .z-10 {
    z-index: 10;
  }
  .z-16 {
    z-index: 16;
  }
  .z-40 {
    z-index: 40;
  }
  .z-50 {
    z-index: 50;
  }
  .z-60 {
    z-index: 60;
  }
  .z-80 {
    z-index: 80;
  }
  .z-90 {
    z-index: 90;
  }
  .z-91 {
    z-index: 91;
  }
  .z-99 {
    z-index: 99;
  }
  .order-1 {
    order: 1;
  }
  .order-2 {
    order: 2;
  }
  .col-span-1 {
    grid-column: span 1 / span 1;
  }
  .col-span-6 {
    grid-column: span 6 / span 6;
  }
  .col-span-12 {
    grid-column: span 12 / span 12;
  }
  .col-start-1 {
    grid-column-start: 1;
  }
  .col-start-2 {
    grid-column-start: 2;
  }
  .col-start-3 {
    grid-column-start: 3;
  }
  .col-end-11 {
    grid-column-end: 11;
  }
  .col-end-12 {
    grid-column-end: 12;
  }
  .col-end-13 {
    grid-column-end: 13;
  }
  .row-start-1 {
    grid-row-start: 1;
  }
  .row-start-2 {
    grid-row-start: 2;
  }
  .row-start-auto {
    grid-row-start: auto;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .-m-2\.5 {
    margin: calc(var(--spacing) * -2.5);
  }
  .-m-3 {
    margin: calc(var(--spacing) * -3);
  }
  .container {
    margin-inline: auto;
    padding-inline: 1rem;
    @media (width >= 80rem) {
      max-width: 1632px;
    }
    @media (width >= 96rem) {
      padding-inline: 0;
    }
  }
  .-mx-1\.5 {
    margin-inline: calc(var(--spacing) * -1.5);
  }
  .-mx-2\.5 {
    margin-inline: calc(var(--spacing) * -2.5);
  }
  .-mx-3 {
    margin-inline: calc(var(--spacing) * -3);
  }
  .-mx-4 {
    margin-inline: calc(var(--spacing) * -4);
  }
  .mx-1\.5 {
    margin-inline: calc(var(--spacing) * 1.5);
  }
  .mx-2\.5 {
    margin-inline: calc(var(--spacing) * 2.5);
  }
  .mx-3 {
    margin-inline: calc(var(--spacing) * 3);
  }
  .mx-auto {
    margin-inline: auto;
  }
  .my-4 {
    margin-block: calc(var(--spacing) * 4);
  }
  .my-6 {
    margin-block: calc(var(--spacing) * 6);
  }
  .-mt-px {
    margin-top: -1px;
  }
  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }
  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }
  .mt-7 {
    margin-top: calc(var(--spacing) * 7);
  }
  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }
  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }
  .mt-\[2px\] {
    margin-top: 2px;
  }
  .mr-\[19px\] {
    margin-right: 19px;
  }
  .-mb-\[100px\] {
    margin-bottom: calc(100px * -1);
  }
  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-2\.5 {
    margin-bottom: calc(var(--spacing) * 2.5);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .mb-7 {
    margin-bottom: calc(var(--spacing) * 7);
  }
  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }
  .mb-12 {
    margin-bottom: calc(var(--spacing) * 12);
  }
  .mb-\[18px\] {
    margin-bottom: 18px;
  }
  .mb-\[27px\] {
    margin-bottom: 27px;
  }
  .mb-\[70px\] {
    margin-bottom: 70px;
  }
  .ml-0\.5 {
    margin-left: calc(var(--spacing) * 0.5);
  }
  .ml-1 {
    margin-left: calc(var(--spacing) * 1);
  }
  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }
  .ml-auto {
    margin-left: auto;
  }
  .line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .line-clamp-6 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
  }
  .block {
    display: block;
  }
  .flex {
    display: flex;
  }
  .flex\! {
    display: flex !important;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-block {
    display: inline-block;
  }
  .inline-flex {
    display: inline-flex;
  }
  .table {
    display: table;
  }
  .size-3 {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }
  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }
  .size-5 {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }
  .size-6 {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }
  .size-7 {
    width: calc(var(--spacing) * 7);
    height: calc(var(--spacing) * 7);
  }
  .size-8 {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
  }
  .size-9 {
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
  }
  .size-10 {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
  }
  .size-11 {
    width: calc(var(--spacing) * 11);
    height: calc(var(--spacing) * 11);
  }
  .size-12 {
    width: calc(var(--spacing) * 12);
    height: calc(var(--spacing) * 12);
  }
  .size-14 {
    width: calc(var(--spacing) * 14);
    height: calc(var(--spacing) * 14);
  }
  .size-\[64px\] {
    width: 64px;
    height: 64px;
  }
  .size-\[70px\] {
    width: 70px;
    height: 70px;
  }
  .size-\[72px\] {
    width: 72px;
    height: 72px;
  }
  .size-full {
    width: 100%;
    height: 100%;
  }
  .h-1\.5 {
    height: calc(var(--spacing) * 1.5);
  }
  .h-2 {
    height: calc(var(--spacing) * 2);
  }
  .h-4\.5 {
    height: calc(var(--spacing) * 4.5);
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .h-8 {
    height: calc(var(--spacing) * 8);
  }
  .h-9 {
    height: calc(var(--spacing) * 9);
  }
  .h-10 {
    height: calc(var(--spacing) * 10);
  }
  .h-12 {
    height: calc(var(--spacing) * 12);
  }
  .h-14 {
    height: calc(var(--spacing) * 14);
  }
  .h-16 {
    height: calc(var(--spacing) * 16);
  }
  .h-32 {
    height: calc(var(--spacing) * 32);
  }
  .h-36 {
    height: calc(var(--spacing) * 36);
  }
  .h-60 {
    height: calc(var(--spacing) * 60);
  }
  .h-\[15px\] {
    height: 15px;
  }
  .h-\[60px\] {
    height: 60px;
  }
  .h-\[86px\] {
    height: 86px;
  }
  .h-\[88px\] {
    height: 88px;
  }
  .h-\[100px\] {
    height: 100px;
  }
  .h-\[102px\] {
    height: 102px;
  }
  .h-\[120px\] {
    height: 120px;
  }
  .h-\[128px\] {
    height: 128px;
  }
  .h-\[144px\] {
    height: 144px;
  }
  .h-\[150px\] {
    height: 150px;
  }
  .h-\[194px\] {
    height: 194px;
  }
  .h-\[200px\] {
    height: 200px;
  }
  .h-\[220px\] {
    height: 220px;
  }
  .h-\[250px\] {
    height: 250px;
  }
  .h-\[300px\] {
    height: 300px;
  }
  .h-\[338px\] {
    height: 338px;
  }
  .h-\[358px\] {
    height: 358px;
  }
  .h-\[380px\] {
    height: 380px;
  }
  .h-\[400px\] {
    height: 400px;
  }
  .h-\[447px\] {
    height: 447px;
  }
  .h-\[460px\] {
    height: 460px;
  }
  .h-\[470px\]\! {
    height: 470px !important;
  }
  .h-\[500px\]\! {
    height: 500px !important;
  }
  .h-\[520px\]\! {
    height: 520px !important;
  }
  .h-\[528px\] {
    height: 528px;
  }
  .h-\[550px\] {
    height: 550px;
  }
  .h-\[600px\] {
    height: 600px;
  }
  .h-\[760px\] {
    height: 760px;
  }
  .h-\[calc\(100\%-60px\)\] {
    height: calc(100% - 60px);
  }
  .h-\[calc\(100\%-100px\)\] {
    height: calc(100% - 100px);
  }
  .h-\[calc\(100\%-250px\)\] {
    height: calc(100% - 250px);
  }
  .h-auto {
    height: auto;
  }
  .h-full {
    height: 100%;
  }
  .h-screen {
    height: 100vh;
  }
  .max-h-\[170px\] {
    max-height: 170px;
  }
  .max-h-\[289px\] {
    max-height: 289px;
  }
  .max-h-\[290px\] {
    max-height: 290px;
  }
  .max-h-\[300px\] {
    max-height: 300px;
  }
  .max-h-\[400px\] {
    max-height: 400px;
  }
  .max-h-\[500px\] {
    max-height: 500px;
  }
  .max-h-\[688px\] {
    max-height: 688px;
  }
  .max-h-\[800px\] {
    max-height: 800px;
  }
  .max-h-\[calc\(100\%-70px\)\] {
    max-height: calc(100% - 70px);
  }
  .min-h-\[90px\] {
    min-height: 90px;
  }
  .min-h-\[414px\] {
    min-height: 414px;
  }
  .min-h-\[432px\] {
    min-height: 432px;
  }
  .min-h-\[520px\] {
    min-height: 520px;
  }
  .min-h-\[532px\] {
    min-height: 532px;
  }
  .min-h-\[570px\] {
    min-height: 570px;
  }
  .min-h-\[586px\] {
    min-height: 586px;
  }
  .min-h-\[844px\] {
    min-height: 844px;
  }
  .w-1\/2 {
    width: calc(1/2 * 100%);
  }
  .w-1\/3 {
    width: calc(1/3 * 100%);
  }
  .w-2 {
    width: calc(var(--spacing) * 2);
  }
  .w-5 {
    width: calc(var(--spacing) * 5);
  }
  .w-6 {
    width: calc(var(--spacing) * 6);
  }
  .w-8 {
    width: calc(var(--spacing) * 8);
  }
  .w-9 {
    width: calc(var(--spacing) * 9);
  }
  .w-10 {
    width: calc(var(--spacing) * 10);
  }
  .w-12 {
    width: calc(var(--spacing) * 12);
  }
  .w-16 {
    width: calc(var(--spacing) * 16);
  }
  .w-20 {
    width: calc(var(--spacing) * 20);
  }
  .w-32 {
    width: calc(var(--spacing) * 32);
  }
  .w-36 {
    width: calc(var(--spacing) * 36);
  }
  .w-\[15px\] {
    width: 15px;
  }
  .w-\[45\%\] {
    width: 45%;
  }
  .w-\[47\%\] {
    width: 47%;
  }
  .w-\[55px\] {
    width: 55px;
  }
  .w-\[60px\] {
    width: 60px;
  }
  .w-\[90px\] {
    width: 90px;
  }
  .w-\[95\%\] {
    width: 95%;
  }
  .w-\[96\%\] {
    width: 96%;
  }
  .w-\[100px\] {
    width: 100px;
  }
  .w-\[102px\] {
    width: 102px;
  }
  .w-\[120px\] {
    width: 120px;
  }
  .w-\[128px\] {
    width: 128px;
  }
  .w-\[144px\] {
    width: 144px;
  }
  .w-\[150px\] {
    width: 150px;
  }
  .w-\[180px\] {
    width: 180px;
  }
  .w-\[250px\] {
    width: 250px;
  }
  .w-\[338px\] {
    width: 338px;
  }
  .w-\[350px\] {
    width: 350px;
  }
  .w-\[390px\] {
    width: 390px;
  }
  .w-auto {
    width: auto;
  }
  .w-fit {
    width: -moz-fit-content;
    width: fit-content;
  }
  .w-full {
    width: 100%;
  }
  .w-full\! {
    width: 100% !important;
  }
  .max-w-\[88px\] {
    max-width: 88px;
  }
  .max-w-\[100px\] {
    max-width: 100px;
  }
  .max-w-\[108px\] {
    max-width: 108px;
  }
  .max-w-\[120px\] {
    max-width: 120px;
  }
  .max-w-\[126px\] {
    max-width: 126px;
  }
  .max-w-\[147px\] {
    max-width: 147px;
  }
  .max-w-\[185px\] {
    max-width: 185px;
  }
  .max-w-\[250px\] {
    max-width: 250px;
  }
  .max-w-\[300px\] {
    max-width: 300px;
  }
  .max-w-\[345px\] {
    max-width: 345px;
  }
  .max-w-\[356px\] {
    max-width: 356px;
  }
  .max-w-\[368px\] {
    max-width: 368px;
  }
  .max-w-\[390px\] {
    max-width: 390px;
  }
  .max-w-\[452px\] {
    max-width: 452px;
  }
  .max-w-\[480px\] {
    max-width: 480px;
  }
  .max-w-\[500px\] {
    max-width: 500px;
  }
  .max-w-\[509px\] {
    max-width: 509px;
  }
  .max-w-\[512px\] {
    max-width: 512px;
  }
  .max-w-\[528px\] {
    max-width: 528px;
  }
  .max-w-\[540px\] {
    max-width: 540px;
  }
  .max-w-\[549px\] {
    max-width: 549px;
  }
  .max-w-\[550px\] {
    max-width: 550px;
  }
  .max-w-\[552px\] {
    max-width: 552px;
  }
  .max-w-\[566px\] {
    max-width: 566px;
  }
  .max-w-\[600px\] {
    max-width: 600px;
  }
  .max-w-\[642px\] {
    max-width: 642px;
  }
  .max-w-\[657px\] {
    max-width: 657px;
  }
  .max-w-\[670px\] {
    max-width: 670px;
  }
  .max-w-\[932px\] {
    max-width: 932px;
  }
  .max-w-\[950px\] {
    max-width: 950px;
  }
  .max-w-\[1101px\] {
    max-width: 1101px;
  }
  .max-w-full {
    max-width: 100%;
  }
  .max-w-lg {
    max-width: var(--container-lg);
  }
  .max-w-xl {
    max-width: var(--container-xl);
  }
  .min-w-21 {
    min-width: calc(var(--spacing) * 21);
  }
  .min-w-\[100px\] {
    min-width: 100px;
  }
  .min-w-\[566px\] {
    min-width: 566px;
  }
  .flex-1 {
    flex: 1;
  }
  .flex-1\! {
    flex: 1 !important;
  }
  .flex-none {
    flex: none;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .grow {
    flex-grow: 1;
  }
  .border-collapse {
    border-collapse: collapse;
  }
  .origin-top {
    transform-origin: top;
  }
  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-4 {
    --tw-translate-x: calc(var(--spacing) * 4);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-4 {
    --tw-translate-y: calc(var(--spacing) * 4);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .scale-0 {
    --tw-scale-x: 0%;
    --tw-scale-y: 0%;
    --tw-scale-z: 0%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .-rotate-180 {
    rotate: calc(180deg * -1);
  }
  .rotate-180 {
    rotate: 180deg;
  }
  .rotate-\[-40deg\] {
    rotate: -40deg;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .animate-marquee {
    animation: var(--animate-marquee);
  }
  .cursor-not-allowed {
    cursor: not-allowed;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .resize {
    resize: both;
  }
  .resize-none {
    resize: none;
  }
  .\[appearance\:textfield\] {
    -webkit-appearance: textfield;
       -moz-appearance: textfield;
            appearance: textfield;
  }
  .appearance-none {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-row {
    flex-direction: row;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-center {
    align-items: center;
  }
  .items-end {
    align-items: flex-end;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .justify-start {
    justify-content: flex-start;
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }
  .space-y-2 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-4 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-6 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .gap-x-0 {
    -moz-column-gap: calc(var(--spacing) * 0);
         column-gap: calc(var(--spacing) * 0);
  }
  .gap-x-1 {
    -moz-column-gap: calc(var(--spacing) * 1);
         column-gap: calc(var(--spacing) * 1);
  }
  .gap-x-1\.5 {
    -moz-column-gap: calc(var(--spacing) * 1.5);
         column-gap: calc(var(--spacing) * 1.5);
  }
  .gap-x-2 {
    -moz-column-gap: calc(var(--spacing) * 2);
         column-gap: calc(var(--spacing) * 2);
  }
  .gap-x-2\.5 {
    -moz-column-gap: calc(var(--spacing) * 2.5);
         column-gap: calc(var(--spacing) * 2.5);
  }
  .gap-x-3 {
    -moz-column-gap: calc(var(--spacing) * 3);
         column-gap: calc(var(--spacing) * 3);
  }
  .gap-x-4 {
    -moz-column-gap: calc(var(--spacing) * 4);
         column-gap: calc(var(--spacing) * 4);
  }
  .gap-x-5 {
    -moz-column-gap: calc(var(--spacing) * 5);
         column-gap: calc(var(--spacing) * 5);
  }
  .gap-x-6 {
    -moz-column-gap: calc(var(--spacing) * 6);
         column-gap: calc(var(--spacing) * 6);
  }
  .gap-x-8 {
    -moz-column-gap: calc(var(--spacing) * 8);
         column-gap: calc(var(--spacing) * 8);
  }
  .gap-x-10 {
    -moz-column-gap: calc(var(--spacing) * 10);
         column-gap: calc(var(--spacing) * 10);
  }
  .gap-x-15 {
    -moz-column-gap: calc(var(--spacing) * 15);
         column-gap: calc(var(--spacing) * 15);
  }
  .gap-x-\[7px\] {
    -moz-column-gap: 7px;
         column-gap: 7px;
  }
  .gap-x-\[10px\] {
    -moz-column-gap: 10px;
         column-gap: 10px;
  }
  .gap-x-\[18px\] {
    -moz-column-gap: 18px;
         column-gap: 18px;
  }
  .gap-x-\[19px\] {
    -moz-column-gap: 19px;
         column-gap: 19px;
  }
  .gap-x-\[25px\] {
    -moz-column-gap: 25px;
         column-gap: 25px;
  }
  .gap-x-\[30px\] {
    -moz-column-gap: 30px;
         column-gap: 30px;
  }
  .gap-x-\[54px\] {
    -moz-column-gap: 54px;
         column-gap: 54px;
  }
  .gap-x-px {
    -moz-column-gap: 1px;
         column-gap: 1px;
  }
  .gap-y-0\.5 {
    row-gap: calc(var(--spacing) * 0.5);
  }
  .gap-y-1 {
    row-gap: calc(var(--spacing) * 1);
  }
  .gap-y-1\.5 {
    row-gap: calc(var(--spacing) * 1.5);
  }
  .gap-y-2 {
    row-gap: calc(var(--spacing) * 2);
  }
  .gap-y-2\.5 {
    row-gap: calc(var(--spacing) * 2.5);
  }
  .gap-y-3 {
    row-gap: calc(var(--spacing) * 3);
  }
  .gap-y-4 {
    row-gap: calc(var(--spacing) * 4);
  }
  .gap-y-5 {
    row-gap: calc(var(--spacing) * 5);
  }
  .gap-y-6 {
    row-gap: calc(var(--spacing) * 6);
  }
  .gap-y-8 {
    row-gap: calc(var(--spacing) * 8);
  }
  .gap-y-10 {
    row-gap: calc(var(--spacing) * 10);
  }
  .gap-y-12 {
    row-gap: calc(var(--spacing) * 12);
  }
  .gap-y-\[6px\] {
    row-gap: 6px;
  }
  .gap-y-\[15px\] {
    row-gap: 15px;
  }
  .gap-y-\[22px\] {
    row-gap: 22px;
  }
  .gap-y-\[25px\] {
    row-gap: 25px;
  }
  .divide-x {
    :where(& > :not(:last-child)) {
      --tw-divide-x-reverse: 0;
      border-inline-style: var(--tw-border-style);
      border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
      border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
    }
  }
  .divide-x-0 {
    :where(& > :not(:last-child)) {
      --tw-divide-x-reverse: 0;
      border-inline-style: var(--tw-border-style);
      border-inline-start-width: calc(0px * var(--tw-divide-x-reverse));
      border-inline-end-width: calc(0px * calc(1 - var(--tw-divide-x-reverse)));
    }
  }
  .divide-y {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
  }
  .divide-\[rgba\(145\,158\,171\,0\.24\)\] {
    :where(& > :not(:last-child)) {
      border-color: rgba(145,158,171,0.24);
    }
  }
  .divide-gray-300 {
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-300);
    }
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .overflow-x-hidden {
    overflow-x: hidden;
  }
  .overflow-x-scroll {
    overflow-x: scroll;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }
  .rounded-3xl {
    border-radius: var(--radius-3xl);
  }
  .rounded-4xl {
    border-radius: var(--radius-4xl);
  }
  .rounded-5xl {
    border-radius: var(--radius-5xl);
  }
  .rounded-\[20px\] {
    border-radius: 20px;
  }
  .rounded-\[30px\] {
    border-radius: 30px;
  }
  .rounded-\[32px\] {
    border-radius: 32px;
  }
  .rounded-\[50px\] {
    border-radius: 50px;
  }
  .rounded-\[55px\] {
    border-radius: 55px;
  }
  .rounded-\[60px\] {
    border-radius: 60px;
  }
  .rounded-\[80px\] {
    border-radius: 80px;
  }
  .rounded-\[90px\] {
    border-radius: 90px;
  }
  .rounded-\[100px\] {
    border-radius: 100px;
  }
  .rounded-\[100px\]\! {
    border-radius: 100px !important;
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-md {
    border-radius: var(--radius-md);
  }
  .rounded-none {
    border-radius: 0;
  }
  .rounded-sm {
    border-radius: var(--radius-sm);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .rounded-t-2xl {
    border-top-left-radius: var(--radius-2xl);
    border-top-right-radius: var(--radius-2xl);
  }
  .rounded-t-3xl {
    border-top-left-radius: var(--radius-3xl);
    border-top-right-radius: var(--radius-3xl);
  }
  .rounded-l-lg {
    border-top-left-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
  }
  .rounded-l-none {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .rounded-tl-2xl {
    border-top-left-radius: var(--radius-2xl);
  }
  .rounded-tl-none\! {
    border-top-left-radius: 0 !important;
  }
  .rounded-tl-sm {
    border-top-left-radius: var(--radius-sm);
  }
  .rounded-r-3xl {
    border-top-right-radius: var(--radius-3xl);
    border-bottom-right-radius: var(--radius-3xl);
  }
  .rounded-r-\[100px\] {
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
  }
  .rounded-r-lg {
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
  }
  .rounded-tr-2xl {
    border-top-right-radius: var(--radius-2xl);
  }
  .rounded-tr-sm {
    border-top-right-radius: var(--radius-sm);
  }
  .rounded-b-2xl {
    border-bottom-right-radius: var(--radius-2xl);
    border-bottom-left-radius: var(--radius-2xl);
  }
  .rounded-br-2xl {
    border-bottom-right-radius: var(--radius-2xl);
  }
  .rounded-br-sm {
    border-bottom-right-radius: var(--radius-sm);
  }
  .rounded-bl-2xl {
    border-bottom-left-radius: var(--radius-2xl);
  }
  .rounded-bl-none\! {
    border-bottom-left-radius: 0 !important;
  }
  .rounded-bl-sm {
    border-bottom-left-radius: var(--radius-sm);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0px;
  }
  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }
  .border-\[3px\] {
    border-style: var(--tw-border-style);
    border-width: 3px;
  }
  .border-x {
    border-inline-style: var(--tw-border-style);
    border-inline-width: 1px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-t-0 {
    border-top-style: var(--tw-border-style);
    border-top-width: 0px;
  }
  .border-t-2 {
    border-top-style: var(--tw-border-style);
    border-top-width: 2px;
  }
  .border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }
  .border-r-0 {
    border-right-style: var(--tw-border-style);
    border-right-width: 0px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-b-0 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0px;
  }
  .border-b-2 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }
  .border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }
  .border-l-0 {
    border-left-style: var(--tw-border-style);
    border-left-width: 0px;
  }
  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .border-none\! {
    --tw-border-style: none !important;
    border-style: none !important;
  }
  .border-\[\#161C24\] {
    border-color: #161C24;
  }
  .border-\[\#919EAB3D\] {
    border-color: #919EAB3D;
  }
  .border-\[rgba\(145\,158\,171\,0\.24\)\] {
    border-color: rgba(145,158,171,0.24);
  }
  .border-\[text-light-primary-text\] {
    border-color: text-light-primary-text;
  }
  .border-error {
    border-color: var(--color-error);
  }
  .border-gray-300 {
    border-color: var(--color-gray-300);
  }
  .border-gray-500\/24 {
    border-color: color-mix(in srgb, #919eab 24%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-gray-500) 24%, transparent);
    }
  }
  .border-primary {
    border-color: var(--color-primary);
  }
  .border-primary-dark {
    border-color: var(--color-primary-dark);
  }
  .border-transparent {
    border-color: transparent;
  }
  .border-white {
    border-color: var(--color-white);
  }
  .border-b-\[rgba\(145\,158\,171\,0\.24\)\] {
    border-bottom-color: rgba(145,158,171,0.24);
  }
  .border-b-gray-300 {
    border-bottom-color: var(--color-gray-300);
  }
  .bg-\[\#00AB5514\] {
    background-color: #00AB5514;
  }
  .bg-\[\#5ED9BA\] {
    background-color: #5ED9BA;
  }
  .bg-\[\#8EBDD1\] {
    background-color: #8EBDD1;
  }
  .bg-\[\#9EE872\] {
    background-color: #9EE872;
  }
  .bg-\[\#74CAFF\] {
    background-color: #74CAFF;
  }
  .bg-\[\#84A9FF\] {
    background-color: #84A9FF;
  }
  .bg-\[\#92BDF5\] {
    background-color: #92BDF5;
  }
  .bg-\[\#161C247A\] {
    background-color: #161C247A;
  }
  .bg-\[\#919EAB14\] {
    background-color: #919EAB14;
  }
  .bg-\[\#A0E2E0\] {
    background-color: #A0E2E0;
  }
  .bg-\[\#A4F7CC\] {
    background-color: #A4F7CC;
  }
  .bg-\[\#AAF27F\] {
    background-color: #AAF27F;
  }
  .bg-\[\#C0ECFF\] {
    background-color: #C0ECFF;
  }
  .bg-\[\#C0F2DC\] {
    background-color: #C0F2DC;
  }
  .bg-\[\#D0AEFF\] {
    background-color: #D0AEFF;
  }
  .bg-\[\#D3F3FF\] {
    background-color: #D3F3FF;
  }
  .bg-\[\#D5FFFC\] {
    background-color: #D5FFFC;
  }
  .bg-\[\#DBFFF0\] {
    background-color: #DBFFF0;
  }
  .bg-\[\#E2FFFC\] {
    background-color: #E2FFFC;
  }
  .bg-\[\#E5F6FF\] {
    background-color: #E5F6FF;
  }
  .bg-\[\#E6F9FF\] {
    background-color: #E6F9FF;
  }
  .bg-\[\#E6FFDB\] {
    background-color: #E6FFDB;
  }
  .bg-\[\#EDEDED\] {
    background-color: #EDEDED;
  }
  .bg-\[\#F0F0F0\] {
    background-color: #F0F0F0;
  }
  .bg-\[\#F4F3F5\] {
    background-color: #F4F3F5;
  }
  .bg-\[\#F4F5F6\] {
    background-color: #F4F5F6;
  }
  .bg-\[\#F4F6F8\] {
    background-color: #F4F6F8;
  }
  .bg-\[\#FF4842\]\/12 {
    background-color: color-mix(in oklab, #FF4842 12%, transparent);
  }
  .bg-\[\#FFC091\] {
    background-color: #FFC091;
  }
  .bg-\[\#FFCFD1\] {
    background-color: #FFCFD1;
  }
  .bg-\[\#FFD6EF\] {
    background-color: #FFD6EF;
  }
  .bg-\[\#FFE0F9\] {
    background-color: #FFE0F9;
  }
  .bg-\[\#FFE3D9\] {
    background-color: #FFE3D9;
  }
  .bg-\[\#FFE4DA\] {
    background-color: #FFE4DA;
  }
  .bg-\[\#FFE9D7\] {
    background-color: #FFE9D7;
  }
  .bg-\[\#FFE16A\] {
    background-color: #FFE16A;
  }
  .bg-\[\#FFE700\] {
    background-color: #FFE700;
  }
  .bg-\[\#FFEB69\] {
    background-color: #FFEB69;
  }
  .bg-\[\#FFEFF6\] {
    background-color: #FFEFF6;
  }
  .bg-\[\#FFF0F9\] {
    background-color: #FFF0F9;
  }
  .bg-\[\#FFF1F0\] {
    background-color: #FFF1F0;
  }
  .bg-\[\#FFF5FB\] {
    background-color: #FFF5FB;
  }
  .bg-\[\#FFF8CC\] {
    background-color: #FFF8CC;
  }
  .bg-\[\#FFF9D3\] {
    background-color: #FFF9D3;
  }
  .bg-\[rgba\(0\,171\,85\,0\.08\)\] {
    background-color: rgba(0,171,85,0.08);
  }
  .bg-\[rgba\(24\,144\,255\,0\.16\)\] {
    background-color: rgba(24,144,255,0.16);
  }
  .bg-\[rgba\(84\,214\,44\,0\.16\)\] {
    background-color: rgba(84,214,44,0.16);
  }
  .bg-\[rgba\(145\,158\,171\,0\.08\)\] {
    background-color: rgba(145,158,171,0.08);
  }
  .bg-\[rgba\(145\,158\,171\,0\.16\)\] {
    background-color: rgba(145,158,171,0.16);
  }
  .bg-\[rgba\(145\,158\,171\,0\.24\)\] {
    background-color: rgba(145,158,171,0.24);
  }
  .bg-\[rgba\(145\,158\,171\,0\.32\)\] {
    background-color: rgba(145,158,171,0.32);
  }
  .bg-\[rgba\(255\,72\,66\,0\.08\)\] {
    background-color: rgba(255,72,66,0.08);
  }
  .bg-\[rgba\(255\,72\,66\,0\.16\)\] {
    background-color: rgba(255,72,66,0.16);
  }
  .bg-\[rgba\(255\,193\,7\,0\.16\)\] {
    background-color: rgba(255,193,7,0.16);
  }
  .bg-\[rgba\(255\,235\,105\,1\)\] {
    background-color: rgba(255,235,105,1);
  }
  .bg-black {
    background-color: var(--color-black);
  }
  .bg-black\/20 {
    background-color: color-mix(in srgb, #000 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
    }
  }
  .bg-error {
    background-color: var(--color-error);
  }
  .bg-error-dark {
    background-color: var(--color-error-dark);
  }
  .bg-error-light {
    background-color: var(--color-error-light);
  }
  .bg-error-lighter {
    background-color: var(--color-error-lighter);
  }
  .bg-error\/8 {
    background-color: color-mix(in srgb, #cb0233 8%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-error) 8%, transparent);
    }
  }
  .bg-gray-100 {
    background-color: var(--color-gray-100);
  }
  .bg-gray-200 {
    background-color: var(--color-gray-200);
  }
  .bg-gray-300 {
    background-color: var(--color-gray-300);
  }
  .bg-info {
    background-color: var(--color-info);
  }
  .bg-info-darker {
    background-color: var(--color-info-darker);
  }
  .bg-primary {
    background-color: var(--color-primary);
  }
  .bg-primary-dark {
    background-color: var(--color-primary-dark);
  }
  .bg-primary-darker {
    background-color: var(--color-primary-darker);
  }
  .bg-primary-light {
    background-color: var(--color-primary-light);
  }
  .bg-primary-lighter {
    background-color: var(--color-primary-lighter);
  }
  .bg-primary\/8 {
    background-color: color-mix(in srgb, #088178 8%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-primary) 8%, transparent);
    }
  }
  .bg-success-light {
    background-color: var(--color-success-light);
  }
  .bg-success-lighter {
    background-color: var(--color-success-lighter);
  }
  .bg-transparent {
    background-color: transparent;
  }
  .bg-warning {
    background-color: var(--color-warning);
  }
  .bg-warning-light {
    background-color: var(--color-warning-light);
  }
  .bg-warning-lighter {
    background-color: var(--color-warning-lighter);
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-\[url\(\'\.\.\/images\/bottom-border\.png\'\)\] {
    background-image: url('../images/bottom-border.png');
  }
  .bg-\[url\(\'\.\.\/images\/home-4\/black-dress-woman\.png\'\)\] {
    background-image: url('../images/home-4/black-dress-woman.png');
  }
  .bg-\[url\(\'\.\.\/images\/home-5\/promo-bg-1\.png\'\)\] {
    background-image: url('../images/home-5/promo-bg-1.png');
  }
  .bg-\[url\(\'\.\.\/images\/home-5\/promo-bg-2\.jpg\'\)\] {
    background-image: url('../images/home-5/promo-bg-2.jpg');
  }
  .bg-\[url\(\'\.\.\/images\/home-5\/promo-bg-3\.jpg\'\)\] {
    background-image: url('../images/home-5/promo-bg-3.jpg');
  }
  .bg-\[url\(\'\.\.\/images\/home-5\/promo-bg-4\.png\'\)\] {
    background-image: url('../images/home-5/promo-bg-4.png');
  }
  .bg-\[url\(\'\.\.\/images\/home-5\/promo-grid-1\.jpg\'\)\] {
    background-image: url('../images/home-5/promo-grid-1.jpg');
  }
  .bg-\[url\(\'\.\.\/images\/home-5\/promo-grid-2\.jpg\'\)\] {
    background-image: url('../images/home-5/promo-grid-2.jpg');
  }
  .bg-\[url\(\'\.\.\/images\/home-5\/promo-grid-3\.jpg\'\)\] {
    background-image: url('../images/home-5/promo-grid-3.jpg');
  }
  .bg-\[url\(\'\.\.\/images\/product-details\/product-details-9\.jpg\'\)\] {
    background-image: url('../images/product-details/product-details-9.jpg');
  }
  .bg-\[url\(\'\.\.\/images\/product-details\/product-details-10\.jpg\'\)\] {
    background-image: url('../images/product-details/product-details-10.jpg');
  }
  .bg-\[url\(\'\.\.\/images\/product-details\/product-details-11\.jpg\'\)\] {
    background-image: url('../images/product-details/product-details-11.jpg');
  }
  .bg-\[url\(\'\.\.\/images\/product-details\/product-details-12\.jpg\'\)\] {
    background-image: url('../images/product-details/product-details-12.jpg');
  }
  .bg-\[url\(\'\.\.\/images\/product-details\/product-details-13\.png\'\)\] {
    background-image: url('../images/product-details/product-details-13.png');
  }
  .bg-\[url\(\'\.\.\/images\/star-icon\.png\'\)\] {
    background-image: url('../images/star-icon.png');
  }
  .bg-\[url\(\'\/assets\/images\/home-2\/apply-facewash\.jpg\'\)\] {
    background-image: url('/assets/images/home-2/apply-facewash.jpg');
  }
  .bg-\[url\(\'\/assets\/images\/home-3\/tomato-ketchup-bg\.png\'\)\] {
    background-image: url('/assets/images/home-3/tomato-ketchup-bg.png');
  }
  .bg-\[url\(\.\.\/images\/home-2\/apply-makeup-1\.jpg\)\] {
    background-image: url(../images/home-2/apply-makeup-1.jpg);
  }
  .bg-\[url\(\.\.\/images\/home-2\/apply-makeup-2\.jpg\)\] {
    background-image: url(../images/home-2/apply-makeup-2.jpg);
  }
  .bg-\[url\(\.\.\/images\/home-2\/cosmetic-bg\.jpg\)\] {
    background-image: url(../images/home-2/cosmetic-bg.jpg);
  }
  .bg-\[url\(\.\.\/images\/home-2\/female\.jpg\)\] {
    background-image: url(../images/home-2/female.jpg);
  }
  .bg-\[url\(\.\.\/images\/home-2\/hero-promo-1\.png\)\] {
    background-image: url(../images/home-2/hero-promo-1.png);
  }
  .bg-\[url\(\.\.\/images\/home-2\/hero-promo-2\.png\)\] {
    background-image: url(../images/home-2/hero-promo-2.png);
  }
  .bg-\[url\(\.\.\/images\/home-2\/promo-bg-1\.jpg\)\] {
    background-image: url(../images/home-2/promo-bg-1.jpg);
  }
  .bg-\[url\(\.\.\/images\/home-2\/promo-bg-2\.jpg\)\] {
    background-image: url(../images/home-2/promo-bg-2.jpg);
  }
  .bg-\[url\(\.\.\/images\/home-2\/promo-bg-3\.jpg\)\] {
    background-image: url(../images/home-2/promo-bg-3.jpg);
  }
  .bg-\[url\(\.\.\/images\/home-2\/promo-bg-4\.jpg\)\] {
    background-image: url(../images/home-2/promo-bg-4.jpg);
  }
  .bg-\[url\(\.\.\/images\/home-3\/corn-can-bg\.png\)\] {
    background-image: url(../images/home-3/corn-can-bg.png);
  }
  .bg-\[url\(\.\.\/images\/home-3\/hot-sauce-bg\.jpg\)\] {
    background-image: url(../images/home-3/hot-sauce-bg.jpg);
  }
  .bg-\[url\(\.\.\/images\/home-3\/mango-juice-bg\.png\)\] {
    background-image: url(../images/home-3/mango-juice-bg.png);
  }
  .bg-\[url\(\.\.\/images\/home-3\/tomato-ketchup-bg\.png\)\] {
    background-image: url(../images/home-3/tomato-ketchup-bg.png);
  }
  .bg-\[url\(\.\.\/images\/home-4\/kid-with-skateboard\.jpg\)\] {
    background-image: url(../images/home-4/kid-with-skateboard.jpg);
  }
  .bg-\[url\(\.\.\/images\/home-4\/man-woman\.png\)\] {
    background-image: url(../images/home-4/man-woman.png);
  }
  .bg-\[url\(\.\.\/images\/home-5\/countdown-bg\.png\)\] {
    background-image: url(../images/home-5/countdown-bg.png);
  }
  .bg-\[url\(\/assets\/images\/home-2\/promo-bg-3\.jpg\)\] {
    background-image: url(/assets/images/home-2/promo-bg-3.jpg);
  }
  .bg-\[url\(\/assets\/images\/home-4\/2-women-red-dress\.png\)\] {
    background-image: url(/assets/images/home-4/2-women-red-dress.png);
  }
  .bg-\[url\(\/assets\/images\/home-4\/promo-card-2\.png\)\] {
    background-image: url(/assets/images/home-4/promo-card-2.png);
  }
  .bg-\[url\(\/assets\/images\/home-4\/promo-card-3\.png\)\] {
    background-image: url(/assets/images/home-4/promo-card-3.png);
  }
  .bg-cover {
    background-size: cover;
  }
  .bg-bottom {
    background-position: bottom;
  }
  .bg-center {
    background-position: center;
  }
  .bg-left {
    background-position: left;
  }
  .bg-position-\[0_-18px\] {
    background-position: 0 -18px;
  }
  .bg-position-\[0_0\] {
    background-position: 0 0;
  }
  .bg-right {
    background-position: right;
  }
  .bg-top {
    background-position: top;
  }
  .bg-no-repeat {
    background-repeat: no-repeat;
  }
  .bg-repeat-x {
    background-repeat: repeat-x;
  }
  .object-cover {
    -o-object-fit: cover;
       object-fit: cover;
  }
  .object-top {
    -o-object-position: top;
       object-position: top;
  }
  .p-0\! {
    padding: calc(var(--spacing) * 0) !important;
  }
  .p-1 {
    padding: calc(var(--spacing) * 1);
  }
  .p-2\.5 {
    padding: calc(var(--spacing) * 2.5);
  }
  .p-3 {
    padding: calc(var(--spacing) * 3);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-5 {
    padding: calc(var(--spacing) * 5);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .p-8 {
    padding: calc(var(--spacing) * 8);
  }
  .p-10 {
    padding: calc(var(--spacing) * 10);
  }
  .p-\[34px\] {
    padding: 34px;
  }
  .px-0 {
    padding-inline: calc(var(--spacing) * 0);
  }
  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-3\.5 {
    padding-inline: calc(var(--spacing) * 3.5);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }
  .px-5\.5 {
    padding-inline: calc(var(--spacing) * 5.5);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .px-6\.5 {
    padding-inline: calc(var(--spacing) * 6.5);
  }
  .px-7 {
    padding-inline: calc(var(--spacing) * 7);
  }
  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }
  .px-10 {
    padding-inline: calc(var(--spacing) * 10);
  }
  .px-11 {
    padding-inline: calc(var(--spacing) * 11);
  }
  .px-15 {
    padding-inline: calc(var(--spacing) * 15);
  }
  .px-\[9px\] {
    padding-inline: 9px;
  }
  .px-\[13px\] {
    padding-inline: 13px;
  }
  .px-\[15px\] {
    padding-inline: 15px;
  }
  .px-\[17px\] {
    padding-inline: 17px;
  }
  .px-\[19px\] {
    padding-inline: 19px;
  }
  .px-\[21px\] {
    padding-inline: 21px;
  }
  .px-\[22px\] {
    padding-inline: 22px;
  }
  .px-\[25px\] {
    padding-inline: 25px;
  }
  .px-\[29px\] {
    padding-inline: 29px;
  }
  .px-\[32\.5px\] {
    padding-inline: 32.5px;
  }
  .px-\[35px\] {
    padding-inline: 35px;
  }
  .px-\[38px\] {
    padding-inline: 38px;
  }
  .px-\[51px\] {
    padding-inline: 51px;
  }
  .py-0\.5 {
    padding-block: calc(var(--spacing) * 0.5);
  }
  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }
  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-3\.5 {
    padding-block: calc(var(--spacing) * 3.5);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }
  .py-5\.5 {
    padding-block: calc(var(--spacing) * 5.5);
  }
  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }
  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }
  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }
  .py-\[3px\] {
    padding-block: 3px;
  }
  .py-\[5px\] {
    padding-block: 5px;
  }
  .py-\[7px\] {
    padding-block: 7px;
  }
  .py-\[9px\] {
    padding-block: 9px;
  }
  .py-\[11px\] {
    padding-block: 11px;
  }
  .py-\[15px\] {
    padding-block: 15px;
  }
  .py-\[18px\] {
    padding-block: 18px;
  }
  .py-\[29px\] {
    padding-block: 29px;
  }
  .py-\[31px\] {
    padding-block: 31px;
  }
  .py-\[33px\] {
    padding-block: 33px;
  }
  .py-\[37px\] {
    padding-block: 37px;
  }
  .py-\[70px\] {
    padding-block: 70px;
  }
  .py-\[78px\] {
    padding-block: 78px;
  }
  .py-\[120px\] {
    padding-block: 120px;
  }
  .py-px {
    padding-block: 1px;
  }
  .ps-3\.5 {
    padding-inline-start: calc(var(--spacing) * 3.5);
  }
  .ps-4 {
    padding-inline-start: calc(var(--spacing) * 4);
  }
  .pe-6 {
    padding-inline-end: calc(var(--spacing) * 6);
  }
  .pe-24 {
    padding-inline-end: calc(var(--spacing) * 24);
  }
  .pt-0\.5 {
    padding-top: calc(var(--spacing) * 0.5);
  }
  .pt-1 {
    padding-top: calc(var(--spacing) * 1);
  }
  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }
  .pt-2\.5 {
    padding-top: calc(var(--spacing) * 2.5);
  }
  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }
  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }
  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }
  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }
  .pt-8 {
    padding-top: calc(var(--spacing) * 8);
  }
  .pt-9 {
    padding-top: calc(var(--spacing) * 9);
  }
  .pt-10 {
    padding-top: calc(var(--spacing) * 10);
  }
  .pt-12 {
    padding-top: calc(var(--spacing) * 12);
  }
  .pt-40 {
    padding-top: calc(var(--spacing) * 40);
  }
  .pt-\[13px\] {
    padding-top: 13px;
  }
  .pt-\[21px\] {
    padding-top: 21px;
  }
  .pt-\[22px\] {
    padding-top: 22px;
  }
  .pt-\[40px\] {
    padding-top: 40px;
  }
  .pt-\[42px\] {
    padding-top: 42px;
  }
  .pt-\[62px\] {
    padding-top: 62px;
  }
  .pt-\[70px\] {
    padding-top: 70px;
  }
  .pt-\[92px\] {
    padding-top: 92px;
  }
  .pr-0 {
    padding-right: calc(var(--spacing) * 0);
  }
  .pr-0\! {
    padding-right: calc(var(--spacing) * 0) !important;
  }
  .pr-1\.5 {
    padding-right: calc(var(--spacing) * 1.5);
  }
  .pr-2 {
    padding-right: calc(var(--spacing) * 2);
  }
  .pr-2\.5 {
    padding-right: calc(var(--spacing) * 2.5);
  }
  .pr-3 {
    padding-right: calc(var(--spacing) * 3);
  }
  .pr-4 {
    padding-right: calc(var(--spacing) * 4);
  }
  .pr-5 {
    padding-right: calc(var(--spacing) * 5);
  }
  .pr-6 {
    padding-right: calc(var(--spacing) * 6);
  }
  .pr-8\.5 {
    padding-right: calc(var(--spacing) * 8.5);
  }
  .pr-10 {
    padding-right: calc(var(--spacing) * 10);
  }
  .pr-24 {
    padding-right: calc(var(--spacing) * 24);
  }
  .pr-\[19px\] {
    padding-right: 19px;
  }
  .pr-\[30px\] {
    padding-right: 30px;
  }
  .pb-0 {
    padding-bottom: calc(var(--spacing) * 0);
  }
  .pb-0\.5 {
    padding-bottom: calc(var(--spacing) * 0.5);
  }
  .pb-1 {
    padding-bottom: calc(var(--spacing) * 1);
  }
  .pb-1\.5 {
    padding-bottom: calc(var(--spacing) * 1.5);
  }
  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }
  .pb-2\.5 {
    padding-bottom: calc(var(--spacing) * 2.5);
  }
  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }
  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }
  .pb-5 {
    padding-bottom: calc(var(--spacing) * 5);
  }
  .pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
  }
  .pb-8 {
    padding-bottom: calc(var(--spacing) * 8);
  }
  .pb-9 {
    padding-bottom: calc(var(--spacing) * 9);
  }
  .pb-10 {
    padding-bottom: calc(var(--spacing) * 10);
  }
  .pb-12 {
    padding-bottom: calc(var(--spacing) * 12);
  }
  .pb-15 {
    padding-bottom: calc(var(--spacing) * 15);
  }
  .pb-\[5px\] {
    padding-bottom: 5px;
  }
  .pb-\[7px\] {
    padding-bottom: 7px;
  }
  .pb-\[22px\] {
    padding-bottom: 22px;
  }
  .pb-\[27px\] {
    padding-bottom: 27px;
  }
  .pb-\[50px\] {
    padding-bottom: 50px;
  }
  .pb-\[70px\] {
    padding-bottom: 70px;
  }
  .pb-\[74px\] {
    padding-bottom: 74px;
  }
  .pb-\[90px\] {
    padding-bottom: 90px;
  }
  .pb-\[100px\] {
    padding-bottom: 100px;
  }
  .pb-px {
    padding-bottom: 1px;
  }
  .pl-0 {
    padding-left: calc(var(--spacing) * 0);
  }
  .pl-0\! {
    padding-left: calc(var(--spacing) * 0) !important;
  }
  .pl-2 {
    padding-left: calc(var(--spacing) * 2);
  }
  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }
  .pl-3\.5 {
    padding-left: calc(var(--spacing) * 3.5);
  }
  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }
  .pl-5 {
    padding-left: calc(var(--spacing) * 5);
  }
  .pl-6 {
    padding-left: calc(var(--spacing) * 6);
  }
  .pl-8 {
    padding-left: calc(var(--spacing) * 8);
  }
  .pl-8\.5 {
    padding-left: calc(var(--spacing) * 8.5);
  }
  .pl-11 {
    padding-left: calc(var(--spacing) * 11);
  }
  .pl-\[30px\] {
    padding-left: 30px;
  }
  .text-center {
    text-align: center;
  }
  .text-end {
    text-align: end;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .align-bottom {
    vertical-align: bottom;
  }
  .font-dm-sans {
    font-family: var(--font-dm-sans);
  }
  .font-urbanist {
    font-family: var(--font-urbanist);
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-sm\! {
    font-size: var(--text-sm) !important;
    line-height: var(--tw-leading, var(--text-sm--line-height)) !important;
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .text-\[10px\] {
    font-size: 10px;
  }
  .text-\[12px\] {
    font-size: 12px;
  }
  .text-\[13px\] {
    font-size: 13px;
  }
  .text-\[16px\] {
    font-size: 16px;
  }
  .text-\[18px\] {
    font-size: 18px;
  }
  .text-\[20px\] {
    font-size: 20px;
  }
  .text-\[22px\] {
    font-size: 22px;
  }
  .text-\[32px\] {
    font-size: 32px;
  }
  .text-\[86px\] {
    font-size: 86px;
  }
  .leading-4 {
    --tw-leading: calc(var(--spacing) * 4);
    line-height: calc(var(--spacing) * 4);
  }
  .leading-4\.5 {
    --tw-leading: calc(var(--spacing) * 4.5);
    line-height: calc(var(--spacing) * 4.5);
  }
  .leading-5 {
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
  }
  .leading-5\.5 {
    --tw-leading: calc(var(--spacing) * 5.5);
    line-height: calc(var(--spacing) * 5.5);
  }
  .leading-6 {
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
  }
  .leading-7 {
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
  }
  .leading-8 {
    --tw-leading: calc(var(--spacing) * 8);
    line-height: calc(var(--spacing) * 8);
  }
  .leading-9 {
    --tw-leading: calc(var(--spacing) * 9);
    line-height: calc(var(--spacing) * 9);
  }
  .leading-\[10px\] {
    --tw-leading: 10px;
    line-height: 10px;
  }
  .leading-\[18px\] {
    --tw-leading: 18px;
    line-height: 18px;
  }
  .leading-\[22px\] {
    --tw-leading: 22px;
    line-height: 22px;
  }
  .leading-\[22px\]\! {
    --tw-leading: 22px !important;
    line-height: 22px !important;
  }
  .leading-\[26px\] {
    --tw-leading: 26px;
    line-height: 26px;
  }
  .leading-\[30px\] {
    --tw-leading: 30px;
    line-height: 30px;
  }
  .leading-\[48px\] {
    --tw-leading: 48px;
    line-height: 48px;
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  .font-normal\! {
    --tw-font-weight: var(--font-weight-normal) !important;
    font-weight: var(--font-weight-normal) !important;
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .text-\[\#919EABCC\] {
    color: #919EABCC;
  }
  .text-\[rgba\(145\,158\,171\,0\.8\)\] {
    color: rgba(145,158,171,0.8);
  }
  .text-black {
    color: var(--color-black);
  }
  .text-dark-secondary-text {
    color: var(--color-dark-secondary-text);
  }
  .text-error {
    color: var(--color-error);
  }
  .text-error-dark {
    color: var(--color-error-dark);
  }
  .text-gray-500 {
    color: var(--color-gray-500);
  }
  .text-gray-800 {
    color: var(--color-gray-800);
  }
  .text-gray-900 {
    color: var(--color-gray-900);
  }
  .text-info {
    color: var(--color-info);
  }
  .text-info-dark {
    color: var(--color-info-dark);
  }
  .text-light-disabled-text {
    color: var(--color-light-disabled-text);
  }
  .text-light-primary-text {
    color: var(--color-light-primary-text);
  }
  .text-light-primary-text\! {
    color: var(--color-light-primary-text) !important;
  }
  .text-light-secondary-text {
    color: var(--color-light-secondary-text);
  }
  .text-primary {
    color: var(--color-primary);
  }
  .text-primary-dark {
    color: var(--color-primary-dark);
  }
  .text-primary-darker {
    color: var(--color-primary-darker);
  }
  .text-primary-lighter {
    color: var(--color-primary-lighter);
  }
  .text-secondary {
    color: var(--color-secondary);
  }
  .text-success {
    color: var(--color-success);
  }
  .text-success-dark {
    color: var(--color-success-dark);
  }
  .text-warning-dark {
    color: var(--color-warning-dark);
  }
  .text-warning-lighter {
    color: var(--color-warning-lighter);
  }
  .text-white {
    color: var(--color-white);
  }
  .capitalize {
    text-transform: capitalize;
  }
  .uppercase {
    text-transform: uppercase;
  }
  .line-through {
    text-decoration-line: line-through;
  }
  .underline {
    text-decoration-line: underline;
  }
  .placeholder-transparent {
    &::-moz-placeholder {
      color: transparent;
    }
    &::placeholder {
      color: transparent;
    }
  }
  .opacity-0 {
    opacity: 0%;
  }
  .bg-blend-overlay {
    background-blend-mode: overlay;
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-dark-z-24 {
    --tw-shadow: 0px 24px 48px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.12));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-light-z-8 {
    --tw-shadow: 0px 8px 16px 0px var(--tw-shadow-color, rgba(145, 158, 171, 0.12));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-light-z-12 {
    --tw-shadow: 0px 12px 24px -4px var(--tw-shadow-color, rgba(145, 158, 171, 0.12));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-light-z-24 {
    --tw-shadow: 0px 24px 48px 0px var(--tw-shadow-color, rgba(145, 158, 171, 0.12));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-none {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-0 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-gray-300 {
    --tw-ring-color: var(--color-gray-300);
  }
  .ring-primary {
    --tw-ring-color: var(--color-primary);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .invert {
    --tw-invert: invert(100%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .duration-250 {
    --tw-duration: 250ms;
    transition-duration: 250ms;
  }
  .duration-300 {
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .duration-400 {
    --tw-duration: 400ms;
    transition-duration: 400ms;
  }
  .ease-\[cubic-bezier\(0\.02\,0\.01\,0\.47\,1\)\] {
    --tw-ease: cubic-bezier(0.02,0.01,0.47,1);
    transition-timing-function: cubic-bezier(0.02,0.01,0.47,1);
  }
  .ease-\[cubic-bezier\(0\.645\,0\.045\,0\.355\,1\)\] {
    --tw-ease: cubic-bezier(0.645,0.045,0.355,1);
    transition-timing-function: cubic-bezier(0.645,0.045,0.355,1);
  }
  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }
  .group-hover\:visible {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        visibility: visible;
      }
    }
  }
  .group-hover\:bottom-3 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        bottom: calc(var(--spacing) * 3);
      }
    }
  }
  .group-hover\:translate-x-0 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-translate-x: calc(var(--spacing) * 0);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .group-hover\:translate-y-0 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-translate-y: calc(var(--spacing) * 0);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .group-hover\:scale-110 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-scale-x: 110%;
        --tw-scale-y: 110%;
        --tw-scale-z: 110%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .group-hover\:-rotate-3 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        rotate: calc(3deg * -1);
      }
    }
  }
  .group-hover\:rotate-0 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        rotate: 0deg;
      }
    }
  }
  .group-hover\:border-primary {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        border-color: var(--color-primary);
      }
    }
  }
  .group-hover\:bg-\[\#919EAB\]\/8 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        background-color: color-mix(in oklab, #919EAB 8%, transparent);
      }
    }
  }
  .group-hover\:bg-\[rgba\(0\,171\,85\,0\.08\)\] {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        background-color: rgba(0,171,85,0.08);
      }
    }
  }
  .group-hover\:bg-primary {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        background-color: var(--color-primary);
      }
    }
  }
  .group-hover\:bg-primary-lighter {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        background-color: var(--color-primary-lighter);
      }
    }
  }
  .group-hover\:font-semibold {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold);
      }
    }
  }
  .group-hover\:text-primary {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--color-primary);
      }
    }
  }
  .group-hover\:text-white {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
  }
  .group-hover\:opacity-100 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .group-hover\/item\:visible {
    &:is(:where(.group\/item):hover *) {
      @media (hover: hover) {
        visibility: visible;
      }
    }
  }
  .group-hover\/item\:translate-x-0 {
    &:is(:where(.group\/item):hover *) {
      @media (hover: hover) {
        --tw-translate-x: calc(var(--spacing) * 0);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .group-hover\/item\:bg-\[\#00AB55\]\/8 {
    &:is(:where(.group\/item):hover *) {
      @media (hover: hover) {
        background-color: color-mix(in oklab, #00AB55 8%, transparent);
      }
    }
  }
  .group-hover\/item\:bg-\[rgba\(0\,171\,85\,0\.08\)\] {
    &:is(:where(.group\/item):hover *) {
      @media (hover: hover) {
        background-color: rgba(0,171,85,0.08);
      }
    }
  }
  .group-hover\/item\:text-primary {
    &:is(:where(.group\/item):hover *) {
      @media (hover: hover) {
        color: var(--color-primary);
      }
    }
  }
  .group-hover\/item\:opacity-100 {
    &:is(:where(.group\/item):hover *) {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .group-hover\/sub\:text-primary {
    &:is(:where(.group\/sub):hover *) {
      @media (hover: hover) {
        color: var(--color-primary);
      }
    }
  }
  .group-has-\[input\:checked\]\:group-hover\:bg-\[\#00AB55\]\/8 {
    &:is(:where(.group):has(*:is(input:checked)) *) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: color-mix(in oklab, #00AB55 8%, transparent);
        }
      }
    }
  }
  .peer-checked\:scale-100 {
    &:is(:where(.peer):checked ~ *) {
      --tw-scale-x: 100%;
      --tw-scale-y: 100%;
      --tw-scale-z: 100%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }
  .peer-checked\:opacity-100 {
    &:is(:where(.peer):checked ~ *) {
      opacity: 100%;
    }
  }
  .peer-placeholder-shown\:top-1\/2 {
    &:is(:where(.peer):-moz-placeholder ~ *) {
      top: calc(1/2 * 100%);
    }
    &:is(:where(.peer):placeholder-shown ~ *) {
      top: calc(1/2 * 100%);
    }
  }
  .peer-placeholder-shown\:top-6 {
    &:is(:where(.peer):-moz-placeholder ~ *) {
      top: calc(var(--spacing) * 6);
    }
    &:is(:where(.peer):placeholder-shown ~ *) {
      top: calc(var(--spacing) * 6);
    }
  }
  .peer-placeholder-shown\:text-\[16px\] {
    &:is(:where(.peer):-moz-placeholder ~ *) {
      font-size: 16px;
    }
    &:is(:where(.peer):placeholder-shown ~ *) {
      font-size: 16px;
    }
  }
  .peer-placeholder-shown\:text-light-disabled-text {
    &:is(:where(.peer):-moz-placeholder ~ *) {
      color: var(--color-light-disabled-text);
    }
    &:is(:where(.peer):placeholder-shown ~ *) {
      color: var(--color-light-disabled-text);
    }
  }
  .peer-focus\:top-0 {
    &:is(:where(.peer):focus ~ *) {
      top: calc(var(--spacing) * 0);
    }
  }
  .peer-focus\:left-\[14px\] {
    &:is(:where(.peer):focus ~ *) {
      left: 14px;
    }
  }
  .peer-focus\:bg-white {
    &:is(:where(.peer):focus ~ *) {
      background-color: var(--color-white);
    }
  }
  .peer-focus\:px-1 {
    &:is(:where(.peer):focus ~ *) {
      padding-inline: calc(var(--spacing) * 1);
    }
  }
  .peer-focus\:text-\[12px\] {
    &:is(:where(.peer):focus ~ *) {
      font-size: 12px;
    }
  }
  .peer-focus\:text-light-disabled-text {
    &:is(:where(.peer):focus ~ *) {
      color: var(--color-light-disabled-text);
    }
  }
  .peer-\[\:not\(\:-moz-placeholder\)\]\:top-0 {
    &:is(:where(.peer):is(:not(:placeholder-shown)) ~ *) {
      top: calc(var(--spacing) * 0);
    }
  }
  .peer-\[\:not\(\:placeholder-shown\)\]\:top-0 {
    &:is(:where(.peer):is(:not(:-moz-placeholder)) ~ *) {
      top: calc(var(--spacing) * 0);
    }
    &:is(:where(.peer):is(:not(:placeholder-shown)) ~ *) {
      top: calc(var(--spacing) * 0);
    }
  }
  .peer-\[\:not\(\:-moz-placeholder\)\]\:left-\[14px\] {
    &:is(:where(.peer):is(:not(:placeholder-shown)) ~ *) {
      left: 14px;
    }
  }
  .peer-\[\:not\(\:placeholder-shown\)\]\:left-\[14px\] {
    &:is(:where(.peer):is(:not(:-moz-placeholder)) ~ *) {
      left: 14px;
    }
    &:is(:where(.peer):is(:not(:placeholder-shown)) ~ *) {
      left: 14px;
    }
  }
  .peer-\[\:not\(\:-moz-placeholder\)\]\:bg-white {
    &:is(:where(.peer):is(:not(:placeholder-shown)) ~ *) {
      background-color: var(--color-white);
    }
  }
  .peer-\[\:not\(\:placeholder-shown\)\]\:bg-white {
    &:is(:where(.peer):is(:not(:-moz-placeholder)) ~ *) {
      background-color: var(--color-white);
    }
    &:is(:where(.peer):is(:not(:placeholder-shown)) ~ *) {
      background-color: var(--color-white);
    }
  }
  .peer-\[\:not\(\:-moz-placeholder\)\]\:px-1 {
    &:is(:where(.peer):is(:not(:placeholder-shown)) ~ *) {
      padding-inline: calc(var(--spacing) * 1);
    }
  }
  .peer-\[\:not\(\:placeholder-shown\)\]\:px-1 {
    &:is(:where(.peer):is(:not(:-moz-placeholder)) ~ *) {
      padding-inline: calc(var(--spacing) * 1);
    }
    &:is(:where(.peer):is(:not(:placeholder-shown)) ~ *) {
      padding-inline: calc(var(--spacing) * 1);
    }
  }
  .peer-\[\:not\(\:-moz-placeholder\)\]\:text-\[12px\] {
    &:is(:where(.peer):is(:not(:placeholder-shown)) ~ *) {
      font-size: 12px;
    }
  }
  .peer-\[\:not\(\:placeholder-shown\)\]\:text-\[12px\] {
    &:is(:where(.peer):is(:not(:-moz-placeholder)) ~ *) {
      font-size: 12px;
    }
    &:is(:where(.peer):is(:not(:placeholder-shown)) ~ *) {
      font-size: 12px;
    }
  }
  .before\:invisible {
    &::before {
      content: var(--tw-content);
      visibility: hidden;
    }
  }
  .before\:absolute {
    &::before {
      content: var(--tw-content);
      position: absolute;
    }
  }
  .before\:inset-x-0 {
    &::before {
      content: var(--tw-content);
      inset-inline: calc(var(--spacing) * 0);
    }
  }
  .before\:top-0 {
    &::before {
      content: var(--tw-content);
      top: calc(var(--spacing) * 0);
    }
  }
  .before\:top-1\/2 {
    &::before {
      content: var(--tw-content);
      top: calc(1/2 * 100%);
    }
  }
  .before\:bottom-full {
    &::before {
      content: var(--tw-content);
      bottom: 100%;
    }
  }
  .before\:left-0 {
    &::before {
      content: var(--tw-content);
      left: calc(var(--spacing) * 0);
    }
  }
  .before\:left-1\/2 {
    &::before {
      content: var(--tw-content);
      left: calc(1/2 * 100%);
    }
  }
  .before\:left-\[calc\(50\%-8px\)\] {
    &::before {
      content: var(--tw-content);
      left: calc(50% - 8px);
    }
  }
  .before\:-z-1 {
    &::before {
      content: var(--tw-content);
      z-index: calc(1 * -1);
    }
  }
  .before\:-z-10 {
    &::before {
      content: var(--tw-content);
      z-index: calc(10 * -1);
    }
  }
  .before\:z-9 {
    &::before {
      content: var(--tw-content);
      z-index: 9;
    }
  }
  .before\:z-\[-1\] {
    &::before {
      content: var(--tw-content);
      z-index: -1;
    }
  }
  .before\:-mb-3\.5 {
    &::before {
      content: var(--tw-content);
      margin-bottom: calc(var(--spacing) * -3.5);
    }
  }
  .before\:h-\[64px\] {
    &::before {
      content: var(--tw-content);
      height: 64px;
    }
  }
  .before\:h-px {
    &::before {
      content: var(--tw-content);
      height: 1px;
    }
  }
  .before\:w-\[144px\] {
    &::before {
      content: var(--tw-content);
      width: 144px;
    }
  }
  .before\:w-full {
    &::before {
      content: var(--tw-content);
      width: 100%;
    }
  }
  .before\:-translate-x-1\/2 {
    &::before {
      content: var(--tw-content);
      --tw-translate-x: calc(calc(1/2 * 100%) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .before\:-translate-y-1\/2 {
    &::before {
      content: var(--tw-content);
      --tw-translate-y: calc(calc(1/2 * 100%) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .before\:-rotate-45 {
    &::before {
      content: var(--tw-content);
      rotate: calc(45deg * -1);
    }
  }
  .before\:border-8 {
    &::before {
      content: var(--tw-content);
      border-style: var(--tw-border-style);
      border-width: 8px;
    }
  }
  .before\:border-transparent {
    &::before {
      content: var(--tw-content);
      border-color: transparent;
    }
  }
  .before\:border-t-black {
    &::before {
      content: var(--tw-content);
      border-top-color: var(--color-black);
    }
  }
  .before\:bg-gray-300 {
    &::before {
      content: var(--tw-content);
      background-color: var(--color-gray-300);
    }
  }
  .before\:bg-neutral-300 {
    &::before {
      content: var(--tw-content);
      background-color: var(--color-neutral-300);
    }
  }
  .before\:bg-\[url\(\'\.\.\/images\/vendor-filter-top-shape\.png\'\)\] {
    &::before {
      content: var(--tw-content);
      background-image: url('../images/vendor-filter-top-shape.png');
    }
  }
  .before\:bg-no-repeat {
    &::before {
      content: var(--tw-content);
      background-repeat: no-repeat;
    }
  }
  .before\:opacity-0 {
    &::before {
      content: var(--tw-content);
      opacity: 0%;
    }
  }
  .before\:transition-all {
    &::before {
      content: var(--tw-content);
      transition-property: all;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
    }
  }
  .before\:transition-transform {
    &::before {
      content: var(--tw-content);
      transition-property: transform, translate, scale, rotate;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
    }
  }
  .before\:duration-300 {
    &::before {
      content: var(--tw-content);
      --tw-duration: 300ms;
      transition-duration: 300ms;
    }
  }
  .after\:invisible {
    &::after {
      content: var(--tw-content);
      visibility: hidden;
    }
  }
  .after\:absolute {
    &::after {
      content: var(--tw-content);
      position: absolute;
    }
  }
  .after\:inset-x-0 {
    &::after {
      content: var(--tw-content);
      inset-inline: calc(var(--spacing) * 0);
    }
  }
  .after\:start-3\.5 {
    &::after {
      content: var(--tw-content);
      inset-inline-start: calc(var(--spacing) * 3.5);
    }
  }
  .after\:top-0 {
    &::after {
      content: var(--tw-content);
      top: calc(var(--spacing) * 0);
    }
  }
  .after\:top-1\/2 {
    &::after {
      content: var(--tw-content);
      top: calc(1/2 * 100%);
    }
  }
  .after\:top-2 {
    &::after {
      content: var(--tw-content);
      top: calc(var(--spacing) * 2);
    }
  }
  .after\:right-0 {
    &::after {
      content: var(--tw-content);
      right: calc(var(--spacing) * 0);
    }
  }
  .after\:bottom-0 {
    &::after {
      content: var(--tw-content);
      bottom: calc(var(--spacing) * 0);
    }
  }
  .after\:bottom-full {
    &::after {
      content: var(--tw-content);
      bottom: 100%;
    }
  }
  .after\:left-1\/2 {
    &::after {
      content: var(--tw-content);
      left: calc(1/2 * 100%);
    }
  }
  .after\:left-full {
    &::after {
      content: var(--tw-content);
      left: 100%;
    }
  }
  .after\:-z-10 {
    &::after {
      content: var(--tw-content);
      z-index: calc(10 * -1);
    }
  }
  .after\:z-10 {
    &::after {
      content: var(--tw-content);
      z-index: 10;
    }
  }
  .after\:hidden {
    &::after {
      content: var(--tw-content);
      display: none;
    }
  }
  .after\:h-3 {
    &::after {
      content: var(--tw-content);
      height: calc(var(--spacing) * 3);
    }
  }
  .after\:h-6 {
    &::after {
      content: var(--tw-content);
      height: calc(var(--spacing) * 6);
    }
  }
  .after\:h-7\.5 {
    &::after {
      content: var(--tw-content);
      height: calc(var(--spacing) * 7.5);
    }
  }
  .after\:h-\[22px\] {
    &::after {
      content: var(--tw-content);
      height: 22px;
    }
  }
  .after\:h-full {
    &::after {
      content: var(--tw-content);
      height: 100%;
    }
  }
  .after\:h-px {
    &::after {
      content: var(--tw-content);
      height: 1px;
    }
  }
  .after\:w-1 {
    &::after {
      content: var(--tw-content);
      width: calc(var(--spacing) * 1);
    }
  }
  .after\:w-px {
    &::after {
      content: var(--tw-content);
      width: 1px;
    }
  }
  .after\:-translate-x-1 {
    &::after {
      content: var(--tw-content);
      --tw-translate-x: calc(var(--spacing) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .after\:-translate-x-1\/2 {
    &::after {
      content: var(--tw-content);
      --tw-translate-x: calc(calc(1/2 * 100%) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .after\:-translate-y-1\/2 {
    &::after {
      content: var(--tw-content);
      --tw-translate-y: calc(calc(1/2 * 100%) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .after\:rotate-45 {
    &::after {
      content: var(--tw-content);
      rotate: 45deg;
    }
  }
  .after\:rounded-sm {
    &::after {
      content: var(--tw-content);
      border-radius: var(--radius-sm);
    }
  }
  .after\:bg-gray-300 {
    &::after {
      content: var(--tw-content);
      background-color: var(--color-gray-300);
    }
  }
  .after\:bg-gray-800 {
    &::after {
      content: var(--tw-content);
      background-color: var(--color-gray-800);
    }
  }
  .after\:bg-neutral-300 {
    &::after {
      content: var(--tw-content);
      background-color: var(--color-neutral-300);
    }
  }
  .after\:bg-primary {
    &::after {
      content: var(--tw-content);
      background-color: var(--color-primary);
    }
  }
  .after\:bg-primary-light {
    &::after {
      content: var(--tw-content);
      background-color: var(--color-primary-light);
    }
  }
  .after\:bg-\[url\(\'\.\.\/images\/discount-primary-shape\.png\'\)\] {
    &::after {
      content: var(--tw-content);
      background-image: url('../images/discount-primary-shape.png');
    }
  }
  .after\:bg-\[url\(\'\.\.\/images\/discount-shape\.png\'\)\] {
    &::after {
      content: var(--tw-content);
      background-image: url('../images/discount-shape.png');
    }
  }
  .after\:bg-\[url\(\'\.\.\/images\/discount-warning-shape\.png\'\)\] {
    &::after {
      content: var(--tw-content);
      background-image: url('../images/discount-warning-shape.png');
    }
  }
  .after\:bg-contain {
    &::after {
      content: var(--tw-content);
      background-size: contain;
    }
  }
  .after\:bg-no-repeat {
    &::after {
      content: var(--tw-content);
      background-repeat: no-repeat;
    }
  }
  .after\:px-2 {
    &::after {
      content: var(--tw-content);
      padding-inline: calc(var(--spacing) * 2);
    }
  }
  .after\:py-\[3px\] {
    &::after {
      content: var(--tw-content);
      padding-block: 3px;
    }
  }
  .after\:text-xs {
    &::after {
      content: var(--tw-content);
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
    }
  }
  .after\:leading-\[18px\] {
    &::after {
      content: var(--tw-content);
      --tw-leading: 18px;
      line-height: 18px;
    }
  }
  .after\:whitespace-nowrap {
    &::after {
      content: var(--tw-content);
      white-space: nowrap;
    }
  }
  .after\:text-white {
    &::after {
      content: var(--tw-content);
      color: var(--color-white);
    }
  }
  .after\:opacity-0 {
    &::after {
      content: var(--tw-content);
      opacity: 0%;
    }
  }
  .after\:transition-all {
    &::after {
      content: var(--tw-content);
      transition-property: all;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
    }
  }
  .after\:transition-transform {
    &::after {
      content: var(--tw-content);
      transition-property: transform, translate, scale, rotate;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
    }
  }
  .after\:duration-300 {
    &::after {
      content: var(--tw-content);
      --tw-duration: 300ms;
      transition-duration: 300ms;
    }
  }
  .after\:content-\[attr\(aria-label\)\] {
    &::after {
      --tw-content: attr(aria-label);
      content: var(--tw-content);
    }
  }
  .first\:pt-0 {
    &:first-child {
      padding-top: calc(var(--spacing) * 0);
    }
  }
  .last\:border-b-0 {
    &:last-child {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 0px;
    }
  }
  .last\:pb-0 {
    &:last-child {
      padding-bottom: calc(var(--spacing) * 0);
    }
  }
  .last\:after\:hidden {
    &:last-child {
      &::after {
        content: var(--tw-content);
        display: none;
      }
    }
  }
  .checked\:border-none {
    &:checked {
      --tw-border-style: none;
      border-style: none;
    }
  }
  .checked\:border-primary {
    &:checked {
      border-color: var(--color-primary);
    }
  }
  .checked\:bg-primary {
    &:checked {
      background-color: var(--color-primary);
    }
  }
  .hover\:translate-y-3 {
    &:hover {
      @media (hover: hover) {
        --tw-translate-y: calc(var(--spacing) * 3);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .hover\:translate-y-\[-5px\] {
    &:hover {
      @media (hover: hover) {
        --tw-translate-y: -5px;
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .hover\:scale-\[1\.15\] {
    &:hover {
      @media (hover: hover) {
        scale: 1.15;
      }
    }
  }
  .hover\:transform {
    &:hover {
      @media (hover: hover) {
        transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
      }
    }
  }
  .hover\:border-primary {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-primary);
      }
    }
  }
  .hover\:border-warning {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-warning);
      }
    }
  }
  .hover\:bg-\[\#00AB5514\] {
    &:hover {
      @media (hover: hover) {
        background-color: #00AB5514;
      }
    }
  }
  .hover\:bg-\[\#919EAB\]\/8 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in oklab, #919EAB 8%, transparent);
      }
    }
  }
  .hover\:bg-\[rgba\(145\,158\,171\,0\.08\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: rgba(145,158,171,0.08);
      }
    }
  }
  .hover\:bg-gray-200 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .hover\:bg-primary {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-primary);
      }
    }
  }
  .hover\:bg-primary-darker {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-primary-darker);
      }
    }
  }
  .hover\:bg-white {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-white);
      }
    }
  }
  .hover\:text-primary {
    &:hover {
      @media (hover: hover) {
        color: var(--color-primary);
      }
    }
  }
  .hover\:text-white {
    &:hover {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
  }
  .hover\:underline {
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .hover\:transition-all {
    &:hover {
      @media (hover: hover) {
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
      }
    }
  }
  .hover\:duration-250 {
    &:hover {
      @media (hover: hover) {
        --tw-duration: 250ms;
        transition-duration: 250ms;
      }
    }
  }
  .hover\:ease-\[cubic-bezier\(0\.02\,0\.01\,0\.47\,1\)\] {
    &:hover {
      @media (hover: hover) {
        --tw-ease: cubic-bezier(0.02,0.01,0.47,1);
        transition-timing-function: cubic-bezier(0.02,0.01,0.47,1);
      }
    }
  }
  .hover\:before\:visible {
    &:hover {
      @media (hover: hover) {
        &::before {
          content: var(--tw-content);
          visibility: visible;
        }
      }
    }
  }
  .hover\:before\:-translate-y-2\.5 {
    &:hover {
      @media (hover: hover) {
        &::before {
          content: var(--tw-content);
          --tw-translate-y: calc(var(--spacing) * -2.5);
          translate: var(--tw-translate-x) var(--tw-translate-y);
        }
      }
    }
  }
  .hover\:before\:opacity-100 {
    &:hover {
      @media (hover: hover) {
        &::before {
          content: var(--tw-content);
          opacity: 100%;
        }
      }
    }
  }
  .hover\:after\:visible {
    &:hover {
      @media (hover: hover) {
        &::after {
          content: var(--tw-content);
          visibility: visible;
        }
      }
    }
  }
  .hover\:after\:-translate-y-2\.5 {
    &:hover {
      @media (hover: hover) {
        &::after {
          content: var(--tw-content);
          --tw-translate-y: calc(var(--spacing) * -2.5);
          translate: var(--tw-translate-x) var(--tw-translate-y);
        }
      }
    }
  }
  .hover\:after\:opacity-100 {
    &:hover {
      @media (hover: hover) {
        &::after {
          content: var(--tw-content);
          opacity: 100%;
        }
      }
    }
  }
  .focus\:placeholder-transparent {
    &:focus {
      &::-moz-placeholder {
        color: transparent;
      }
      &::placeholder {
        color: transparent;
      }
    }
  }
  .focus\:ring-light-primary-text {
    &:focus {
      --tw-ring-color: var(--color-light-primary-text);
    }
  }
  .focus\:outline-none {
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .has-\[input\:checked\]\:hover\:bg-\[\#00AB55\]\/8 {
    &:has(*:is(input:checked)) {
      &:hover {
        @media (hover: hover) {
          background-color: color-mix(in oklab, #00AB55 8%, transparent);
        }
      }
    }
  }
  .has-\[input\:checked\]\:hover\:bg-primary\/8 {
    &:has(*:is(input:checked)) {
      &:hover {
        @media (hover: hover) {
          background-color: color-mix(in srgb, #088178 8%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-primary) 8%, transparent);
          }
        }
      }
    }
  }
  .data-\[state\=close\]\:invisible {
    &[data-state="close"] {
      visibility: hidden;
    }
  }
  .data-\[state\=close\]\:-translate-x-\[200px\] {
    &[data-state="close"] {
      --tw-translate-x: calc(200px * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .data-\[state\=close\]\:translate-x-\[200px\] {
    &[data-state="close"] {
      --tw-translate-x: 200px;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .data-\[state\=close\]\:translate-y-4 {
    &[data-state="close"] {
      --tw-translate-y: calc(var(--spacing) * 4);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .data-\[state\=close\]\:opacity-0 {
    &[data-state="close"] {
      opacity: 0%;
    }
  }
  .data-\[state\=open\]\:visible {
    &[data-state="open"] {
      visibility: visible;
    }
  }
  .data-\[state\=open\]\:translate-x-0 {
    &[data-state="open"] {
      --tw-translate-x: calc(var(--spacing) * 0);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .data-\[state\=open\]\:translate-y-0 {
    &[data-state="open"] {
      --tw-translate-y: calc(var(--spacing) * 0);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .data-\[state\=open\]\:opacity-100 {
    &[data-state="open"] {
      opacity: 100%;
    }
  }
  .sm\:mb-10 {
    @media (width >= 40rem) {
      margin-bottom: calc(var(--spacing) * 10);
    }
  }
  .sm\:flex {
    @media (width >= 40rem) {
      display: flex;
    }
  }
  .sm\:size-6 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 6);
      height: calc(var(--spacing) * 6);
    }
  }
  .sm\:size-20 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 20);
      height: calc(var(--spacing) * 20);
    }
  }
  .sm\:h-15 {
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 15);
    }
  }
  .sm\:h-\[102px\] {
    @media (width >= 40rem) {
      height: 102px;
    }
  }
  .sm\:w-15 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 15);
    }
  }
  .sm\:w-\[102px\] {
    @media (width >= 40rem) {
      width: 102px;
    }
  }
  .sm\:flex-row {
    @media (width >= 40rem) {
      flex-direction: row;
    }
  }
  .sm\:flex-nowrap {
    @media (width >= 40rem) {
      flex-wrap: nowrap;
    }
  }
  .sm\:justify-between {
    @media (width >= 40rem) {
      justify-content: space-between;
    }
  }
  .sm\:gap-0 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 0);
    }
  }
  .sm\:gap-x-4 {
    @media (width >= 40rem) {
      -moz-column-gap: calc(var(--spacing) * 4);
           column-gap: calc(var(--spacing) * 4);
    }
  }
  .sm\:gap-x-5 {
    @media (width >= 40rem) {
      -moz-column-gap: calc(var(--spacing) * 5);
           column-gap: calc(var(--spacing) * 5);
    }
  }
  .sm\:gap-y-0 {
    @media (width >= 40rem) {
      row-gap: calc(var(--spacing) * 0);
    }
  }
  .sm\:rounded-5xl {
    @media (width >= 40rem) {
      border-radius: var(--radius-5xl);
    }
  }
  .sm\:px-0 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 0);
    }
  }
  .sm\:px-4 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 4);
    }
  }
  .sm\:px-\[34\.5px\] {
    @media (width >= 40rem) {
      padding-inline: 34.5px;
    }
  }
  .sm\:py-10 {
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 10);
    }
  }
  .sm\:py-\[70px\] {
    @media (width >= 40rem) {
      padding-block: 70px;
    }
  }
  .sm\:pr-2\.5 {
    @media (width >= 40rem) {
      padding-right: calc(var(--spacing) * 2.5);
    }
  }
  .sm\:pr-28 {
    @media (width >= 40rem) {
      padding-right: calc(var(--spacing) * 28);
    }
  }
  .sm\:pl-4 {
    @media (width >= 40rem) {
      padding-left: calc(var(--spacing) * 4);
    }
  }
  .sm\:text-2xl {
    @media (width >= 40rem) {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
  }
  .sm\:text-base {
    @media (width >= 40rem) {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }
  .sm\:text-sm {
    @media (width >= 40rem) {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }
  .sm\:text-xl {
    @media (width >= 40rem) {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
  }
  .sm\:text-\[32px\] {
    @media (width >= 40rem) {
      font-size: 32px;
    }
  }
  .sm\:leading-\[22px\] {
    @media (width >= 40rem) {
      --tw-leading: 22px;
      line-height: 22px;
    }
  }
  .md\:relative {
    @media (width >= 48rem) {
      position: relative;
    }
  }
  .md\:top-10 {
    @media (width >= 48rem) {
      top: calc(var(--spacing) * 10);
    }
  }
  .md\:top-\[41px\] {
    @media (width >= 48rem) {
      top: 41px;
    }
  }
  .md\:top-\[45px\] {
    @media (width >= 48rem) {
      top: 45px;
    }
  }
  .md\:top-\[85px\] {
    @media (width >= 48rem) {
      top: 85px;
    }
  }
  .md\:top-\[95px\] {
    @media (width >= 48rem) {
      top: 95px;
    }
  }
  .md\:right-8 {
    @media (width >= 48rem) {
      right: calc(var(--spacing) * 8);
    }
  }
  .md\:right-60 {
    @media (width >= 48rem) {
      right: calc(var(--spacing) * 60);
    }
  }
  .md\:right-\[30px\] {
    @media (width >= 48rem) {
      right: 30px;
    }
  }
  .md\:right-\[100px\] {
    @media (width >= 48rem) {
      right: 100px;
    }
  }
  .md\:right-\[150px\] {
    @media (width >= 48rem) {
      right: 150px;
    }
  }
  .md\:right-\[160px\] {
    @media (width >= 48rem) {
      right: 160px;
    }
  }
  .md\:right-\[180px\] {
    @media (width >= 48rem) {
      right: 180px;
    }
  }
  .md\:right-\[200px\] {
    @media (width >= 48rem) {
      right: 200px;
    }
  }
  .md\:right-\[215px\] {
    @media (width >= 48rem) {
      right: 215px;
    }
  }
  .md\:right-\[265px\] {
    @media (width >= 48rem) {
      right: 265px;
    }
  }
  .md\:right-\[300px\] {
    @media (width >= 48rem) {
      right: 300px;
    }
  }
  .md\:right-\[380px\] {
    @media (width >= 48rem) {
      right: 380px;
    }
  }
  .md\:right-\[405px\] {
    @media (width >= 48rem) {
      right: 405px;
    }
  }
  .md\:bottom-8 {
    @media (width >= 48rem) {
      bottom: calc(var(--spacing) * 8);
    }
  }
  .md\:order-1 {
    @media (width >= 48rem) {
      order: 1;
    }
  }
  .md\:order-2 {
    @media (width >= 48rem) {
      order: 2;
    }
  }
  .md\:col-span-1 {
    @media (width >= 48rem) {
      grid-column: span 1 / span 1;
    }
  }
  .md\:col-span-4 {
    @media (width >= 48rem) {
      grid-column: span 4 / span 4;
    }
  }
  .md\:col-span-6 {
    @media (width >= 48rem) {
      grid-column: span 6 / span 6;
    }
  }
  .md\:col-span-12 {
    @media (width >= 48rem) {
      grid-column: span 12 / span 12;
    }
  }
  .md\:col-start-2 {
    @media (width >= 48rem) {
      grid-column-start: 2;
    }
  }
  .md\:col-end-12 {
    @media (width >= 48rem) {
      grid-column-end: 12;
    }
  }
  .md\:row-start-1 {
    @media (width >= 48rem) {
      grid-row-start: 1;
    }
  }
  .md\:-mx-3 {
    @media (width >= 48rem) {
      margin-inline: calc(var(--spacing) * -3);
    }
  }
  .md\:mt-0 {
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 0);
    }
  }
  .md\:mb-0 {
    @media (width >= 48rem) {
      margin-bottom: calc(var(--spacing) * 0);
    }
  }
  .md\:mb-1 {
    @media (width >= 48rem) {
      margin-bottom: calc(var(--spacing) * 1);
    }
  }
  .md\:block {
    @media (width >= 48rem) {
      display: block;
    }
  }
  .md\:flex {
    @media (width >= 48rem) {
      display: flex;
    }
  }
  .md\:hidden {
    @media (width >= 48rem) {
      display: none;
    }
  }
  .md\:inline-flex {
    @media (width >= 48rem) {
      display: inline-flex;
    }
  }
  .md\:size-10 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 10);
      height: calc(var(--spacing) * 10);
    }
  }
  .md\:size-32 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 32);
      height: calc(var(--spacing) * 32);
    }
  }
  .md\:size-\[100px\] {
    @media (width >= 48rem) {
      width: 100px;
      height: 100px;
    }
  }
  .md\:h-\[120px\] {
    @media (width >= 48rem) {
      height: 120px;
    }
  }
  .md\:h-\[180px\] {
    @media (width >= 48rem) {
      height: 180px;
    }
  }
  .md\:h-\[290px\] {
    @media (width >= 48rem) {
      height: 290px;
    }
  }
  .md\:h-\[600px\]\! {
    @media (width >= 48rem) {
      height: 600px !important;
    }
  }
  .md\:h-\[702px\] {
    @media (width >= 48rem) {
      height: 702px;
    }
  }
  .md\:w-1\/2 {
    @media (width >= 48rem) {
      width: calc(1/2 * 100%);
    }
  }
  .md\:w-1\/3 {
    @media (width >= 48rem) {
      width: calc(1/3 * 100%);
    }
  }
  .md\:w-\[120px\] {
    @media (width >= 48rem) {
      width: 120px;
    }
  }
  .md\:w-\[150px\] {
    @media (width >= 48rem) {
      width: 150px;
    }
  }
  .md\:w-\[180px\] {
    @media (width >= 48rem) {
      width: 180px;
    }
  }
  .md\:w-\[255px\] {
    @media (width >= 48rem) {
      width: 255px;
    }
  }
  .md\:w-\[390px\] {
    @media (width >= 48rem) {
      width: 390px;
    }
  }
  .md\:w-\[400px\] {
    @media (width >= 48rem) {
      width: 400px;
    }
  }
  .md\:w-\[408px\] {
    @media (width >= 48rem) {
      width: 408px;
    }
  }
  .md\:w-\[460px\] {
    @media (width >= 48rem) {
      width: 460px;
    }
  }
  .md\:w-\[734px\] {
    @media (width >= 48rem) {
      width: 734px;
    }
  }
  .md\:w-auto {
    @media (width >= 48rem) {
      width: auto;
    }
  }
  .md\:max-w-80 {
    @media (width >= 48rem) {
      max-width: calc(var(--spacing) * 80);
    }
  }
  .md\:max-w-\[380px\] {
    @media (width >= 48rem) {
      max-width: 380px;
    }
  }
  .md\:max-w-\[420px\] {
    @media (width >= 48rem) {
      max-width: 420px;
    }
  }
  .md\:min-w-\[140px\] {
    @media (width >= 48rem) {
      min-width: 140px;
    }
  }
  .md\:-translate-y-1\/2 {
    @media (width >= 48rem) {
      --tw-translate-y: calc(calc(1/2 * 100%) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .md\:grid-cols-2 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-3 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .md\:flex-row {
    @media (width >= 48rem) {
      flex-direction: row;
    }
  }
  .md\:flex-nowrap {
    @media (width >= 48rem) {
      flex-wrap: nowrap;
    }
  }
  .md\:items-center {
    @media (width >= 48rem) {
      align-items: center;
    }
  }
  .md\:items-start {
    @media (width >= 48rem) {
      align-items: flex-start;
    }
  }
  .md\:justify-between {
    @media (width >= 48rem) {
      justify-content: space-between;
    }
  }
  .md\:justify-end {
    @media (width >= 48rem) {
      justify-content: flex-end;
    }
  }
  .md\:justify-start {
    @media (width >= 48rem) {
      justify-content: flex-start;
    }
  }
  .md\:gap-4 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 4);
    }
  }
  .md\:gap-10 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 10);
    }
  }
  .md\:gap-x-2\.5 {
    @media (width >= 48rem) {
      -moz-column-gap: calc(var(--spacing) * 2.5);
           column-gap: calc(var(--spacing) * 2.5);
    }
  }
  .md\:gap-x-4 {
    @media (width >= 48rem) {
      -moz-column-gap: calc(var(--spacing) * 4);
           column-gap: calc(var(--spacing) * 4);
    }
  }
  .md\:gap-x-6 {
    @media (width >= 48rem) {
      -moz-column-gap: calc(var(--spacing) * 6);
           column-gap: calc(var(--spacing) * 6);
    }
  }
  .md\:gap-x-10 {
    @media (width >= 48rem) {
      -moz-column-gap: calc(var(--spacing) * 10);
           column-gap: calc(var(--spacing) * 10);
    }
  }
  .md\:gap-x-12 {
    @media (width >= 48rem) {
      -moz-column-gap: calc(var(--spacing) * 12);
           column-gap: calc(var(--spacing) * 12);
    }
  }
  .md\:gap-y-0 {
    @media (width >= 48rem) {
      row-gap: calc(var(--spacing) * 0);
    }
  }
  .md\:gap-y-6 {
    @media (width >= 48rem) {
      row-gap: calc(var(--spacing) * 6);
    }
  }
  .md\:divide-x {
    @media (width >= 48rem) {
      :where(& > :not(:last-child)) {
        --tw-divide-x-reverse: 0;
        border-inline-style: var(--tw-border-style);
        border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
        border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
      }
    }
  }
  .md\:divide-y-0 {
    @media (width >= 48rem) {
      :where(& > :not(:last-child)) {
        --tw-divide-y-reverse: 0;
        border-bottom-style: var(--tw-border-style);
        border-top-style: var(--tw-border-style);
        border-top-width: calc(0px * var(--tw-divide-y-reverse));
        border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
      }
    }
  }
  .md\:divide-gray-300 {
    @media (width >= 48rem) {
      :where(& > :not(:last-child)) {
        border-color: var(--color-gray-300);
      }
    }
  }
  .md\:rounded-3xl {
    @media (width >= 48rem) {
      border-radius: var(--radius-3xl);
    }
  }
  .md\:border {
    @media (width >= 48rem) {
      border-style: var(--tw-border-style);
      border-width: 1px;
    }
  }
  .md\:border-l {
    @media (width >= 48rem) {
      border-left-style: var(--tw-border-style);
      border-left-width: 1px;
    }
  }
  .md\:border-none {
    @media (width >= 48rem) {
      --tw-border-style: none;
      border-style: none;
    }
  }
  .md\:border-gray-300 {
    @media (width >= 48rem) {
      border-color: var(--color-gray-300);
    }
  }
  .md\:bg-transparent {
    @media (width >= 48rem) {
      background-color: transparent;
    }
  }
  .md\:bg-white {
    @media (width >= 48rem) {
      background-color: var(--color-white);
    }
  }
  .md\:bg-\[url\(\'\.\.\/images\/banner-horizontal-filter\/banner-1\.png\'\)\] {
    @media (width >= 48rem) {
      background-image: url('../images/banner-horizontal-filter/banner-1.png');
    }
  }
  .md\:bg-\[url\(\'\.\.\/images\/banner-horizontal-filter\/banner-2\.png\'\)\] {
    @media (width >= 48rem) {
      background-image: url('../images/banner-horizontal-filter/banner-2.png');
    }
  }
  .md\:bg-\[url\(\'\.\.\/images\/banner-horizontal-filter\/banner-3\.png\'\)\] {
    @media (width >= 48rem) {
      background-image: url('../images/banner-horizontal-filter/banner-3.png');
    }
  }
  .md\:bg-\[url\(\'\.\.\/images\/banner-horizontal-filter\/banner-4\.png\'\)\] {
    @media (width >= 48rem) {
      background-image: url('../images/banner-horizontal-filter/banner-4.png');
    }
  }
  .md\:bg-\[url\(\.\.\/images\/banner-left-sidebar\/banner-1\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/banner-left-sidebar/banner-1.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/banner-left-sidebar\/banner-2\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/banner-left-sidebar/banner-2.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/banner-left-sidebar\/banner-3\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/banner-left-sidebar/banner-3.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/full-banner\/banner-1\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/full-banner/banner-1.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/full-banner\/banner-2\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/full-banner/banner-2.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/full-banner\/banner-3\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/full-banner/banner-3.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/full-banner\/banner-4\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/full-banner/banner-4.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/full-banner\/banner-5\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/full-banner/banner-5.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-1\/hero-1\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-1/hero-1.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-1\/hero-2\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-1/hero-2.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-1\/hero-3\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-1/hero-3.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-1\/hero-4\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-1/hero-4.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-2\/hero-1\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-2/hero-1.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-2\/hero-2\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-2/hero-2.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-2\/hero-3\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-2/hero-3.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-2\/hero-4\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-2/hero-4.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-2\/hero-5\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-2/hero-5.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-3\/hero-1\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-3/hero-1.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-3\/hero-2\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-3/hero-2.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-3\/hero-3\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-3/hero-3.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-3\/hero-4\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-3/hero-4.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-3\/hero-5\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-3/hero-5.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-4\/hero-1\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-4/hero-1.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-4\/hero-2\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-4/hero-2.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-4\/hero-3\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-4/hero-3.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-4\/hero-4\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-4/hero-4.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-4\/hero-5\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-4/hero-5.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-5\/hero-1\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-5/hero-1.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-5\/hero-2\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-5/hero-2.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-5\/hero-3\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-5/hero-3.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-5\/hero-4\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-5/hero-4.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-5\/hero-5\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-5/hero-5.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/top-banner-left-filter\/banner-1\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/top-banner-left-filter/banner-1.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/top-banner-left-filter\/banner-2\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/top-banner-left-filter/banner-2.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/top-banner-left-filter\/banner-3\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/top-banner-left-filter/banner-3.png);
    }
  }
  .md\:p-5 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 5);
    }
  }
  .md\:p-6 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 6);
    }
  }
  .md\:px-0 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 0);
    }
  }
  .md\:px-3 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 3);
    }
  }
  .md\:px-4 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 4);
    }
  }
  .md\:px-6 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .md\:px-10 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 10);
    }
  }
  .md\:px-\[22px\] {
    @media (width >= 48rem) {
      padding-inline: 22px;
    }
  }
  .md\:px-\[33px\] {
    @media (width >= 48rem) {
      padding-inline: 33px;
    }
  }
  .md\:px-\[41px\] {
    @media (width >= 48rem) {
      padding-inline: 41px;
    }
  }
  .md\:px-\[42px\] {
    @media (width >= 48rem) {
      padding-inline: 42px;
    }
  }
  .md\:px-\[94px\] {
    @media (width >= 48rem) {
      padding-inline: 94px;
    }
  }
  .md\:px-\[100px\] {
    @media (width >= 48rem) {
      padding-inline: 100px;
    }
  }
  .md\:py-0 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 0);
    }
  }
  .md\:py-6 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 6);
    }
  }
  .md\:pt-0 {
    @media (width >= 48rem) {
      padding-top: calc(var(--spacing) * 0);
    }
  }
  .md\:pt-6 {
    @media (width >= 48rem) {
      padding-top: calc(var(--spacing) * 6);
    }
  }
  .md\:pt-\[56px\] {
    @media (width >= 48rem) {
      padding-top: 56px;
    }
  }
  .md\:pr-3 {
    @media (width >= 48rem) {
      padding-right: calc(var(--spacing) * 3);
    }
  }
  .md\:pr-4 {
    @media (width >= 48rem) {
      padding-right: calc(var(--spacing) * 4);
    }
  }
  .md\:pb-0 {
    @media (width >= 48rem) {
      padding-bottom: calc(var(--spacing) * 0);
    }
  }
  .md\:pb-4 {
    @media (width >= 48rem) {
      padding-bottom: calc(var(--spacing) * 4);
    }
  }
  .md\:pb-15 {
    @media (width >= 48rem) {
      padding-bottom: calc(var(--spacing) * 15);
    }
  }
  .md\:pl-0 {
    @media (width >= 48rem) {
      padding-left: calc(var(--spacing) * 0);
    }
  }
  .md\:pl-3 {
    @media (width >= 48rem) {
      padding-left: calc(var(--spacing) * 3);
    }
  }
  .md\:pl-4 {
    @media (width >= 48rem) {
      padding-left: calc(var(--spacing) * 4);
    }
  }
  .md\:pl-6 {
    @media (width >= 48rem) {
      padding-left: calc(var(--spacing) * 6);
    }
  }
  .md\:text-center {
    @media (width >= 48rem) {
      text-align: center;
    }
  }
  .md\:text-left {
    @media (width >= 48rem) {
      text-align: left;
    }
  }
  .md\:text-2xl {
    @media (width >= 48rem) {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
  }
  .md\:text-base {
    @media (width >= 48rem) {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }
  .md\:text-\[40px\] {
    @media (width >= 48rem) {
      font-size: 40px;
    }
  }
  .md\:leading-6 {
    @media (width >= 48rem) {
      --tw-leading: calc(var(--spacing) * 6);
      line-height: calc(var(--spacing) * 6);
    }
  }
  .md\:leading-\[26px\] {
    @media (width >= 48rem) {
      --tw-leading: 26px;
      line-height: 26px;
    }
  }
  .md\:after\:absolute {
    @media (width >= 48rem) {
      &::after {
        content: var(--tw-content);
        position: absolute;
      }
    }
  }
  .md\:after\:top-1\/2 {
    @media (width >= 48rem) {
      &::after {
        content: var(--tw-content);
        top: calc(1/2 * 100%);
      }
    }
  }
  .md\:after\:right-0 {
    @media (width >= 48rem) {
      &::after {
        content: var(--tw-content);
        right: calc(var(--spacing) * 0);
      }
    }
  }
  .md\:after\:h-3 {
    @media (width >= 48rem) {
      &::after {
        content: var(--tw-content);
        height: calc(var(--spacing) * 3);
      }
    }
  }
  .md\:after\:h-4 {
    @media (width >= 48rem) {
      &::after {
        content: var(--tw-content);
        height: calc(var(--spacing) * 4);
      }
    }
  }
  .md\:after\:h-5 {
    @media (width >= 48rem) {
      &::after {
        content: var(--tw-content);
        height: calc(var(--spacing) * 5);
      }
    }
  }
  .md\:after\:w-px {
    @media (width >= 48rem) {
      &::after {
        content: var(--tw-content);
        width: 1px;
      }
    }
  }
  .md\:after\:-translate-y-1\/2 {
    @media (width >= 48rem) {
      &::after {
        content: var(--tw-content);
        --tw-translate-y: calc(calc(1/2 * 100%) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .md\:after\:bg-\[rgba\(145\,158\,171\,0\.24\)\] {
    @media (width >= 48rem) {
      &::after {
        content: var(--tw-content);
        background-color: rgba(145,158,171,0.24);
      }
    }
  }
  .md\:after\:bg-gray-300 {
    @media (width >= 48rem) {
      &::after {
        content: var(--tw-content);
        background-color: var(--color-gray-300);
      }
    }
  }
  .lg\:top-\[58px\] {
    @media (width >= 64rem) {
      top: 58px;
    }
  }
  .lg\:top-\[60px\] {
    @media (width >= 64rem) {
      top: 60px;
    }
  }
  .lg\:top-\[105px\] {
    @media (width >= 64rem) {
      top: 105px;
    }
  }
  .lg\:top-\[110px\] {
    @media (width >= 64rem) {
      top: 110px;
    }
  }
  .lg\:right-80 {
    @media (width >= 64rem) {
      right: calc(var(--spacing) * 80);
    }
  }
  .lg\:right-\[62px\] {
    @media (width >= 64rem) {
      right: 62px;
    }
  }
  .lg\:right-\[80px\] {
    @media (width >= 64rem) {
      right: 80px;
    }
  }
  .lg\:right-\[90px\] {
    @media (width >= 64rem) {
      right: 90px;
    }
  }
  .lg\:right-\[120px\] {
    @media (width >= 64rem) {
      right: 120px;
    }
  }
  .lg\:right-\[130px\] {
    @media (width >= 64rem) {
      right: 130px;
    }
  }
  .lg\:right-\[170px\] {
    @media (width >= 64rem) {
      right: 170px;
    }
  }
  .lg\:right-\[210px\] {
    @media (width >= 64rem) {
      right: 210px;
    }
  }
  .lg\:right-\[230px\] {
    @media (width >= 64rem) {
      right: 230px;
    }
  }
  .lg\:right-\[260px\] {
    @media (width >= 64rem) {
      right: 260px;
    }
  }
  .lg\:right-\[270px\] {
    @media (width >= 64rem) {
      right: 270px;
    }
  }
  .lg\:right-\[290px\] {
    @media (width >= 64rem) {
      right: 290px;
    }
  }
  .lg\:right-\[300px\] {
    @media (width >= 64rem) {
      right: 300px;
    }
  }
  .lg\:right-\[380px\] {
    @media (width >= 64rem) {
      right: 380px;
    }
  }
  .lg\:right-\[405px\] {
    @media (width >= 64rem) {
      right: 405px;
    }
  }
  .lg\:order-1 {
    @media (width >= 64rem) {
      order: 1;
    }
  }
  .lg\:order-2 {
    @media (width >= 64rem) {
      order: 2;
    }
  }
  .lg\:col-span-2 {
    @media (width >= 64rem) {
      grid-column: span 2 / span 2;
    }
  }
  .lg\:col-span-3 {
    @media (width >= 64rem) {
      grid-column: span 3 / span 3;
    }
  }
  .lg\:col-span-4 {
    @media (width >= 64rem) {
      grid-column: span 4 / span 4;
    }
  }
  .lg\:col-span-5 {
    @media (width >= 64rem) {
      grid-column: span 5 / span 5;
    }
  }
  .lg\:col-span-6 {
    @media (width >= 64rem) {
      grid-column: span 6 / span 6;
    }
  }
  .lg\:col-span-7 {
    @media (width >= 64rem) {
      grid-column: span 7 / span 7;
    }
  }
  .lg\:col-span-8 {
    @media (width >= 64rem) {
      grid-column: span 8 / span 8;
    }
  }
  .lg\:col-span-9 {
    @media (width >= 64rem) {
      grid-column: span 9 / span 9;
    }
  }
  .lg\:col-span-10 {
    @media (width >= 64rem) {
      grid-column: span 10 / span 10;
    }
  }
  .lg\:col-start-2 {
    @media (width >= 64rem) {
      grid-column-start: 2;
    }
  }
  .lg\:col-start-4 {
    @media (width >= 64rem) {
      grid-column-start: 4;
    }
  }
  .lg\:col-start-7 {
    @media (width >= 64rem) {
      grid-column-start: 7;
    }
  }
  .lg\:col-end-7 {
    @media (width >= 64rem) {
      grid-column-end: 7;
    }
  }
  .lg\:col-end-10 {
    @media (width >= 64rem) {
      grid-column-end: 10;
    }
  }
  .lg\:col-end-12 {
    @media (width >= 64rem) {
      grid-column-end: 12;
    }
  }
  .lg\:row-start-auto {
    @media (width >= 64rem) {
      grid-row-start: auto;
    }
  }
  .lg\:mx-10 {
    @media (width >= 64rem) {
      margin-inline: calc(var(--spacing) * 10);
    }
  }
  .lg\:mt-0 {
    @media (width >= 64rem) {
      margin-top: calc(var(--spacing) * 0);
    }
  }
  .lg\:-mb-\[103px\] {
    @media (width >= 64rem) {
      margin-bottom: calc(103px * -1);
    }
  }
  .lg\:mb-0 {
    @media (width >= 64rem) {
      margin-bottom: calc(var(--spacing) * 0);
    }
  }
  .lg\:mb-\[53px\] {
    @media (width >= 64rem) {
      margin-bottom: 53px;
    }
  }
  .lg\:block {
    @media (width >= 64rem) {
      display: block;
    }
  }
  .lg\:flex {
    @media (width >= 64rem) {
      display: flex;
    }
  }
  .lg\:grid {
    @media (width >= 64rem) {
      display: grid;
    }
  }
  .lg\:table-cell {
    @media (width >= 64rem) {
      display: table-cell;
    }
  }
  .lg\:h-\[calc\(100\%-60px\)\] {
    @media (width >= 64rem) {
      height: calc(100% - 60px);
    }
  }
  .lg\:h-auto {
    @media (width >= 64rem) {
      height: auto;
    }
  }
  .lg\:h-full {
    @media (width >= 64rem) {
      height: 100%;
    }
  }
  .lg\:max-h-\[340px\] {
    @media (width >= 64rem) {
      max-height: 340px;
    }
  }
  .lg\:min-h-\[532px\] {
    @media (width >= 64rem) {
      min-height: 532px;
    }
  }
  .lg\:min-h-\[536px\] {
    @media (width >= 64rem) {
      min-height: 536px;
    }
  }
  .lg\:w-1\/2 {
    @media (width >= 64rem) {
      width: calc(1/2 * 100%);
    }
  }
  .lg\:w-5\/12 {
    @media (width >= 64rem) {
      width: calc(5/12 * 100%);
    }
  }
  .lg\:w-\[390px\] {
    @media (width >= 64rem) {
      width: 390px;
    }
  }
  .lg\:w-\[620px\] {
    @media (width >= 64rem) {
      width: 620px;
    }
  }
  .lg\:w-\[644px\] {
    @media (width >= 64rem) {
      width: 644px;
    }
  }
  .lg\:w-full {
    @media (width >= 64rem) {
      width: 100%;
    }
  }
  .lg\:max-w-40 {
    @media (width >= 64rem) {
      max-width: calc(var(--spacing) * 40);
    }
  }
  .lg\:max-w-\[190px\] {
    @media (width >= 64rem) {
      max-width: 190px;
    }
  }
  .lg\:max-w-\[350px\] {
    @media (width >= 64rem) {
      max-width: 350px;
    }
  }
  .lg\:max-w-\[450px\] {
    @media (width >= 64rem) {
      max-width: 450px;
    }
  }
  .lg\:max-w-\[500px\] {
    @media (width >= 64rem) {
      max-width: 500px;
    }
  }
  .lg\:max-w-\[530px\] {
    @media (width >= 64rem) {
      max-width: 530px;
    }
  }
  .lg\:max-w-\[642px\] {
    @media (width >= 64rem) {
      max-width: 642px;
    }
  }
  .lg\:max-w-\[704px\] {
    @media (width >= 64rem) {
      max-width: 704px;
    }
  }
  .lg\:max-w-\[762px\] {
    @media (width >= 64rem) {
      max-width: 762px;
    }
  }
  .lg\:flex-1 {
    @media (width >= 64rem) {
      flex: 1;
    }
  }
  .lg\:flex-none {
    @media (width >= 64rem) {
      flex: none;
    }
  }
  .lg\:grid-cols-2 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-3 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-12 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
  }
  .lg\:flex-col {
    @media (width >= 64rem) {
      flex-direction: column;
    }
  }
  .lg\:flex-row {
    @media (width >= 64rem) {
      flex-direction: row;
    }
  }
  .lg\:flex-nowrap {
    @media (width >= 64rem) {
      flex-wrap: nowrap;
    }
  }
  .lg\:items-center {
    @media (width >= 64rem) {
      align-items: center;
    }
  }
  .lg\:items-start {
    @media (width >= 64rem) {
      align-items: flex-start;
    }
  }
  .lg\:justify-between {
    @media (width >= 64rem) {
      justify-content: space-between;
    }
  }
  .lg\:justify-end {
    @media (width >= 64rem) {
      justify-content: flex-end;
    }
  }
  .lg\:gap-12 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 12);
    }
  }
  .lg\:gap-x-2\.5 {
    @media (width >= 64rem) {
      -moz-column-gap: calc(var(--spacing) * 2.5);
           column-gap: calc(var(--spacing) * 2.5);
    }
  }
  .lg\:gap-x-6 {
    @media (width >= 64rem) {
      -moz-column-gap: calc(var(--spacing) * 6);
           column-gap: calc(var(--spacing) * 6);
    }
  }
  .lg\:gap-x-10 {
    @media (width >= 64rem) {
      -moz-column-gap: calc(var(--spacing) * 10);
           column-gap: calc(var(--spacing) * 10);
    }
  }
  .lg\:gap-x-18 {
    @media (width >= 64rem) {
      -moz-column-gap: calc(var(--spacing) * 18);
           column-gap: calc(var(--spacing) * 18);
    }
  }
  .lg\:gap-x-\[70px\] {
    @media (width >= 64rem) {
      -moz-column-gap: 70px;
           column-gap: 70px;
    }
  }
  .lg\:gap-y-0 {
    @media (width >= 64rem) {
      row-gap: calc(var(--spacing) * 0);
    }
  }
  .lg\:gap-y-3 {
    @media (width >= 64rem) {
      row-gap: calc(var(--spacing) * 3);
    }
  }
  .lg\:gap-y-6 {
    @media (width >= 64rem) {
      row-gap: calc(var(--spacing) * 6);
    }
  }
  .lg\:divide-x {
    @media (width >= 64rem) {
      :where(& > :not(:last-child)) {
        --tw-divide-x-reverse: 0;
        border-inline-style: var(--tw-border-style);
        border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
        border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
      }
    }
  }
  .lg\:divide-x-0 {
    @media (width >= 64rem) {
      :where(& > :not(:last-child)) {
        --tw-divide-x-reverse: 0;
        border-inline-style: var(--tw-border-style);
        border-inline-start-width: calc(0px * var(--tw-divide-x-reverse));
        border-inline-end-width: calc(0px * calc(1 - var(--tw-divide-x-reverse)));
      }
    }
  }
  .lg\:overflow-x-visible {
    @media (width >= 64rem) {
      overflow-x: visible;
    }
  }
  .lg\:overflow-y-auto {
    @media (width >= 64rem) {
      overflow-y: auto;
    }
  }
  .lg\:rounded-\[164px\] {
    @media (width >= 64rem) {
      border-radius: 164px;
    }
  }
  .lg\:rounded-tr-\[164px\] {
    @media (width >= 64rem) {
      border-top-right-radius: 164px;
    }
  }
  .lg\:border-r {
    @media (width >= 64rem) {
      border-right-style: var(--tw-border-style);
      border-right-width: 1px;
    }
  }
  .lg\:border-b-0 {
    @media (width >= 64rem) {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 0px;
    }
  }
  .lg\:bg-white {
    @media (width >= 64rem) {
      background-color: var(--color-white);
    }
  }
  .lg\:bg-center {
    @media (width >= 64rem) {
      background-position: center;
    }
  }
  .lg\:p-0 {
    @media (width >= 64rem) {
      padding: calc(var(--spacing) * 0);
    }
  }
  .lg\:p-8 {
    @media (width >= 64rem) {
      padding: calc(var(--spacing) * 8);
    }
  }
  .lg\:p-10 {
    @media (width >= 64rem) {
      padding: calc(var(--spacing) * 10);
    }
  }
  .lg\:p-\[60px\] {
    @media (width >= 64rem) {
      padding: 60px;
    }
  }
  .lg\:px-0 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 0);
    }
  }
  .lg\:px-3 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 3);
    }
  }
  .lg\:px-4 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 4);
    }
  }
  .lg\:px-6 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .lg\:px-10 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 10);
    }
  }
  .lg\:px-11 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 11);
    }
  }
  .lg\:px-\[66px\] {
    @media (width >= 64rem) {
      padding-inline: 66px;
    }
  }
  .lg\:px-\[160px\] {
    @media (width >= 64rem) {
      padding-inline: 160px;
    }
  }
  .lg\:py-8 {
    @media (width >= 64rem) {
      padding-block: calc(var(--spacing) * 8);
    }
  }
  .lg\:py-20 {
    @media (width >= 64rem) {
      padding-block: calc(var(--spacing) * 20);
    }
  }
  .lg\:py-\[70px\] {
    @media (width >= 64rem) {
      padding-block: 70px;
    }
  }
  .lg\:pt-0 {
    @media (width >= 64rem) {
      padding-top: calc(var(--spacing) * 0);
    }
  }
  .lg\:pt-\[172px\] {
    @media (width >= 64rem) {
      padding-top: 172px;
    }
  }
  .lg\:pr-0 {
    @media (width >= 64rem) {
      padding-right: calc(var(--spacing) * 0);
    }
  }
  .lg\:pr-4 {
    @media (width >= 64rem) {
      padding-right: calc(var(--spacing) * 4);
    }
  }
  .lg\:pr-6 {
    @media (width >= 64rem) {
      padding-right: calc(var(--spacing) * 6);
    }
  }
  .lg\:pr-8 {
    @media (width >= 64rem) {
      padding-right: calc(var(--spacing) * 8);
    }
  }
  .lg\:pr-12 {
    @media (width >= 64rem) {
      padding-right: calc(var(--spacing) * 12);
    }
  }
  .lg\:pr-20 {
    @media (width >= 64rem) {
      padding-right: calc(var(--spacing) * 20);
    }
  }
  .lg\:pr-\[30px\] {
    @media (width >= 64rem) {
      padding-right: 30px;
    }
  }
  .lg\:pr-\[50px\] {
    @media (width >= 64rem) {
      padding-right: 50px;
    }
  }
  .lg\:pb-0 {
    @media (width >= 64rem) {
      padding-bottom: calc(var(--spacing) * 0);
    }
  }
  .lg\:pb-6 {
    @media (width >= 64rem) {
      padding-bottom: calc(var(--spacing) * 6);
    }
  }
  .lg\:pb-8 {
    @media (width >= 64rem) {
      padding-bottom: calc(var(--spacing) * 8);
    }
  }
  .lg\:pb-\[23px\] {
    @media (width >= 64rem) {
      padding-bottom: 23px;
    }
  }
  .lg\:pl-0 {
    @media (width >= 64rem) {
      padding-left: calc(var(--spacing) * 0);
    }
  }
  .lg\:pl-4 {
    @media (width >= 64rem) {
      padding-left: calc(var(--spacing) * 4);
    }
  }
  .lg\:pl-6 {
    @media (width >= 64rem) {
      padding-left: calc(var(--spacing) * 6);
    }
  }
  .lg\:pl-8 {
    @media (width >= 64rem) {
      padding-left: calc(var(--spacing) * 8);
    }
  }
  .lg\:pl-12 {
    @media (width >= 64rem) {
      padding-left: calc(var(--spacing) * 12);
    }
  }
  .lg\:pl-20 {
    @media (width >= 64rem) {
      padding-left: calc(var(--spacing) * 20);
    }
  }
  .lg\:pl-\[50px\] {
    @media (width >= 64rem) {
      padding-left: 50px;
    }
  }
  .lg\:pl-\[100px\] {
    @media (width >= 64rem) {
      padding-left: 100px;
    }
  }
  .lg\:text-center {
    @media (width >= 64rem) {
      text-align: center;
    }
  }
  .lg\:text-2xl {
    @media (width >= 64rem) {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
  }
  .lg\:text-xl {
    @media (width >= 64rem) {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
  }
  .lg\:leading-9 {
    @media (width >= 64rem) {
      --tw-leading: calc(var(--spacing) * 9);
      line-height: calc(var(--spacing) * 9);
    }
  }
  .lg\:leading-\[30px\] {
    @media (width >= 64rem) {
      --tw-leading: 30px;
      line-height: 30px;
    }
  }
  .lg\:before\:absolute {
    @media (width >= 64rem) {
      &::before {
        content: var(--tw-content);
        position: absolute;
      }
    }
  }
  .lg\:before\:top-full {
    @media (width >= 64rem) {
      &::before {
        content: var(--tw-content);
        top: 100%;
      }
    }
  }
  .lg\:before\:bottom-0 {
    @media (width >= 64rem) {
      &::before {
        content: var(--tw-content);
        bottom: calc(var(--spacing) * 0);
      }
    }
  }
  .lg\:before\:left-0 {
    @media (width >= 64rem) {
      &::before {
        content: var(--tw-content);
        left: calc(var(--spacing) * 0);
      }
    }
  }
  .lg\:before\:z-11 {
    @media (width >= 64rem) {
      &::before {
        content: var(--tw-content);
        z-index: 11;
      }
    }
  }
  .lg\:before\:h-12 {
    @media (width >= 64rem) {
      &::before {
        content: var(--tw-content);
        height: calc(var(--spacing) * 12);
      }
    }
  }
  .lg\:before\:h-full {
    @media (width >= 64rem) {
      &::before {
        content: var(--tw-content);
        height: 100%;
      }
    }
  }
  .lg\:before\:w-12 {
    @media (width >= 64rem) {
      &::before {
        content: var(--tw-content);
        width: calc(var(--spacing) * 12);
      }
    }
  }
  .lg\:before\:w-\[145px\] {
    @media (width >= 64rem) {
      &::before {
        content: var(--tw-content);
        width: 145px;
      }
    }
  }
  .lg\:before\:bg-\[\#9EE872\] {
    @media (width >= 64rem) {
      &::before {
        content: var(--tw-content);
        background-color: #9EE872;
      }
    }
  }
  .lg\:before\:bg-\[\#A0E2E0\] {
    @media (width >= 64rem) {
      &::before {
        content: var(--tw-content);
        background-color: #A0E2E0;
      }
    }
  }
  .lg\:before\:bg-\[\#FFD6EF\] {
    @media (width >= 64rem) {
      &::before {
        content: var(--tw-content);
        background-color: #FFD6EF;
      }
    }
  }
  .lg\:before\:bg-\[\#FFEB69\] {
    @media (width >= 64rem) {
      &::before {
        content: var(--tw-content);
        background-color: #FFEB69;
      }
    }
  }
  .lg\:before\:bg-\[url\(\'\.\.\/images\/home-2\/slider-left-shape-2\.png\'\)\] {
    @media (width >= 64rem) {
      &::before {
        content: var(--tw-content);
        background-image: url('../images/home-2/slider-left-shape-2.png');
      }
    }
  }
  .lg\:before\:bg-\[url\(\'\.\.\/images\/slider-left-shape\.png\'\)\] {
    @media (width >= 64rem) {
      &::before {
        content: var(--tw-content);
        background-image: url('../images/slider-left-shape.png');
      }
    }
  }
  .lg\:before\:bg-no-repeat {
    @media (width >= 64rem) {
      &::before {
        content: var(--tw-content);
        background-repeat: no-repeat;
      }
    }
  }
  .lg\:after\:absolute {
    @media (width >= 64rem) {
      &::after {
        content: var(--tw-content);
        position: absolute;
      }
    }
  }
  .lg\:after\:right-0 {
    @media (width >= 64rem) {
      &::after {
        content: var(--tw-content);
        right: calc(var(--spacing) * 0);
      }
    }
  }
  .lg\:after\:bottom-0 {
    @media (width >= 64rem) {
      &::after {
        content: var(--tw-content);
        bottom: calc(var(--spacing) * 0);
      }
    }
  }
  .lg\:after\:z-11 {
    @media (width >= 64rem) {
      &::after {
        content: var(--tw-content);
        z-index: 11;
      }
    }
  }
  .lg\:after\:hidden {
    @media (width >= 64rem) {
      &::after {
        content: var(--tw-content);
        display: none;
      }
    }
  }
  .lg\:after\:h-full {
    @media (width >= 64rem) {
      &::after {
        content: var(--tw-content);
        height: 100%;
      }
    }
  }
  .lg\:after\:w-\[145px\] {
    @media (width >= 64rem) {
      &::after {
        content: var(--tw-content);
        width: 145px;
      }
    }
  }
  .lg\:after\:bg-\[\#9EE872\] {
    @media (width >= 64rem) {
      &::after {
        content: var(--tw-content);
        background-color: #9EE872;
      }
    }
  }
  .lg\:after\:bg-\[\#92BDF5\] {
    @media (width >= 64rem) {
      &::after {
        content: var(--tw-content);
        background-color: #92BDF5;
      }
    }
  }
  .lg\:after\:bg-\[\#A0E2E0\] {
    @media (width >= 64rem) {
      &::after {
        content: var(--tw-content);
        background-color: #A0E2E0;
      }
    }
  }
  .lg\:after\:bg-\[\#FFD6EF\] {
    @media (width >= 64rem) {
      &::after {
        content: var(--tw-content);
        background-color: #FFD6EF;
      }
    }
  }
  .lg\:after\:bg-\[\#FFEB69\] {
    @media (width >= 64rem) {
      &::after {
        content: var(--tw-content);
        background-color: #FFEB69;
      }
    }
  }
  .lg\:after\:bg-\[url\(\'\.\.\/images\/slider-right-shape\.png\'\)\] {
    @media (width >= 64rem) {
      &::after {
        content: var(--tw-content);
        background-image: url('../images/slider-right-shape.png');
      }
    }
  }
  .lg\:after\:bg-no-repeat {
    @media (width >= 64rem) {
      &::after {
        content: var(--tw-content);
        background-repeat: no-repeat;
      }
    }
  }
  .xl\:top-\[22px\] {
    @media (width >= 80rem) {
      top: 22px;
    }
  }
  .xl\:top-\[30px\] {
    @media (width >= 80rem) {
      top: 30px;
    }
  }
  .xl\:top-\[170px\] {
    @media (width >= 80rem) {
      top: 170px;
    }
  }
  .xl\:right-\[22px\] {
    @media (width >= 80rem) {
      right: 22px;
    }
  }
  .xl\:right-\[23px\] {
    @media (width >= 80rem) {
      right: 23px;
    }
  }
  .xl\:right-\[300px\] {
    @media (width >= 80rem) {
      right: 300px;
    }
  }
  .xl\:order-1 {
    @media (width >= 80rem) {
      order: 1;
    }
  }
  .xl\:order-2 {
    @media (width >= 80rem) {
      order: 2;
    }
  }
  .xl\:col-span-1 {
    @media (width >= 80rem) {
      grid-column: span 1 / span 1;
    }
  }
  .xl\:col-span-2 {
    @media (width >= 80rem) {
      grid-column: span 2 / span 2;
    }
  }
  .xl\:col-span-3 {
    @media (width >= 80rem) {
      grid-column: span 3 / span 3;
    }
  }
  .xl\:col-span-4 {
    @media (width >= 80rem) {
      grid-column: span 4 / span 4;
    }
  }
  .xl\:col-span-5 {
    @media (width >= 80rem) {
      grid-column: span 5 / span 5;
    }
  }
  .xl\:col-span-6 {
    @media (width >= 80rem) {
      grid-column: span 6 / span 6;
    }
  }
  .xl\:col-span-7 {
    @media (width >= 80rem) {
      grid-column: span 7 / span 7;
    }
  }
  .xl\:col-span-8 {
    @media (width >= 80rem) {
      grid-column: span 8 / span 8;
    }
  }
  .xl\:col-span-9 {
    @media (width >= 80rem) {
      grid-column: span 9 / span 9;
    }
  }
  .xl\:col-start-3 {
    @media (width >= 80rem) {
      grid-column-start: 3;
    }
  }
  .xl\:col-start-4 {
    @media (width >= 80rem) {
      grid-column-start: 4;
    }
  }
  .xl\:col-end-10 {
    @media (width >= 80rem) {
      grid-column-end: 10;
    }
  }
  .xl\:col-end-11 {
    @media (width >= 80rem) {
      grid-column-end: 11;
    }
  }
  .xl\:col-end-12 {
    @media (width >= 80rem) {
      grid-column-end: 12;
    }
  }
  .xl\:row-start-1 {
    @media (width >= 80rem) {
      grid-row-start: 1;
    }
  }
  .xl\:mb-0 {
    @media (width >= 80rem) {
      margin-bottom: calc(var(--spacing) * 0);
    }
  }
  .xl\:block {
    @media (width >= 80rem) {
      display: block;
    }
  }
  .xl\:flex {
    @media (width >= 80rem) {
      display: flex;
    }
  }
  .xl\:hidden {
    @media (width >= 80rem) {
      display: none;
    }
  }
  .xl\:h-\[220px\] {
    @media (width >= 80rem) {
      height: 220px;
    }
  }
  .xl\:h-\[274px\] {
    @media (width >= 80rem) {
      height: 274px;
    }
  }
  .xl\:h-\[688px\] {
    @media (width >= 80rem) {
      height: 688px;
    }
  }
  .xl\:h-\[calc\(100vh-52px\)\] {
    @media (width >= 80rem) {
      height: calc(100vh - 52px);
    }
  }
  .xl\:h-full {
    @media (width >= 80rem) {
      height: 100%;
    }
  }
  .xl\:max-h-\[361px\] {
    @media (width >= 80rem) {
      max-height: 361px;
    }
  }
  .xl\:w-\[100px\] {
    @media (width >= 80rem) {
      width: 100px;
    }
  }
  .xl\:w-\[114px\] {
    @media (width >= 80rem) {
      width: 114px;
    }
  }
  .xl\:w-auto {
    @media (width >= 80rem) {
      width: auto;
    }
  }
  .xl\:w-full {
    @media (width >= 80rem) {
      width: 100%;
    }
  }
  .xl\:max-w-\[306px\] {
    @media (width >= 80rem) {
      max-width: 306px;
    }
  }
  .xl\:max-w-\[551px\] {
    @media (width >= 80rem) {
      max-width: 551px;
    }
  }
  .xl\:max-w-\[600px\] {
    @media (width >= 80rem) {
      max-width: 600px;
    }
  }
  .xl\:max-w-\[1728px\] {
    @media (width >= 80rem) {
      max-width: 1728px;
    }
  }
  .xl\:flex-1 {
    @media (width >= 80rem) {
      flex: 1;
    }
  }
  .xl\:grid-cols-2 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .xl\:grid-cols-4 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .xl\:grid-cols-6 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
  .xl\:grid-cols-12 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
  }
  .xl\:flex-col {
    @media (width >= 80rem) {
      flex-direction: column;
    }
  }
  .xl\:flex-row {
    @media (width >= 80rem) {
      flex-direction: row;
    }
  }
  .xl\:items-center {
    @media (width >= 80rem) {
      align-items: center;
    }
  }
  .xl\:justify-between {
    @media (width >= 80rem) {
      justify-content: space-between;
    }
  }
  .xl\:gap-x-0 {
    @media (width >= 80rem) {
      -moz-column-gap: calc(var(--spacing) * 0);
           column-gap: calc(var(--spacing) * 0);
    }
  }
  .xl\:gap-x-6 {
    @media (width >= 80rem) {
      -moz-column-gap: calc(var(--spacing) * 6);
           column-gap: calc(var(--spacing) * 6);
    }
  }
  .xl\:gap-x-10 {
    @media (width >= 80rem) {
      -moz-column-gap: calc(var(--spacing) * 10);
           column-gap: calc(var(--spacing) * 10);
    }
  }
  .xl\:gap-x-\[76px\] {
    @media (width >= 80rem) {
      -moz-column-gap: 76px;
           column-gap: 76px;
    }
  }
  .xl\:gap-y-0 {
    @media (width >= 80rem) {
      row-gap: calc(var(--spacing) * 0);
    }
  }
  .xl\:gap-y-12 {
    @media (width >= 80rem) {
      row-gap: calc(var(--spacing) * 12);
    }
  }
  .xl\:divide-x {
    @media (width >= 80rem) {
      :where(& > :not(:last-child)) {
        --tw-divide-x-reverse: 0;
        border-inline-style: var(--tw-border-style);
        border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
        border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
      }
    }
  }
  .xl\:divide-y-0 {
    @media (width >= 80rem) {
      :where(& > :not(:last-child)) {
        --tw-divide-y-reverse: 0;
        border-bottom-style: var(--tw-border-style);
        border-top-style: var(--tw-border-style);
        border-top-width: calc(0px * var(--tw-divide-y-reverse));
        border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
      }
    }
  }
  .xl\:divide-gray-300 {
    @media (width >= 80rem) {
      :where(& > :not(:last-child)) {
        border-color: var(--color-gray-300);
      }
    }
  }
  .xl\:rounded-2xl {
    @media (width >= 80rem) {
      border-radius: var(--radius-2xl);
    }
  }
  .xl\:rounded-5xl {
    @media (width >= 80rem) {
      border-radius: var(--radius-5xl);
    }
  }
  .xl\:rounded-tl-\[22px\] {
    @media (width >= 80rem) {
      border-top-left-radius: 22px;
    }
  }
  .xl\:rounded-tr-5xl {
    @media (width >= 80rem) {
      border-top-right-radius: var(--radius-5xl);
    }
  }
  .xl\:rounded-tr-\[22px\] {
    @media (width >= 80rem) {
      border-top-right-radius: 22px;
    }
  }
  .xl\:rounded-br-5xl {
    @media (width >= 80rem) {
      border-bottom-right-radius: var(--radius-5xl);
    }
  }
  .xl\:rounded-bl-5xl {
    @media (width >= 80rem) {
      border-bottom-left-radius: var(--radius-5xl);
    }
  }
  .xl\:border-0 {
    @media (width >= 80rem) {
      border-style: var(--tw-border-style);
      border-width: 0px;
    }
  }
  .xl\:object-left {
    @media (width >= 80rem) {
      -o-object-position: left;
         object-position: left;
    }
  }
  .xl\:object-top-left {
    @media (width >= 80rem) {
      -o-object-position: left top;
         object-position: left top;
    }
  }
  .xl\:px-0 {
    @media (width >= 80rem) {
      padding-inline: calc(var(--spacing) * 0);
    }
  }
  .xl\:px-2 {
    @media (width >= 80rem) {
      padding-inline: calc(var(--spacing) * 2);
    }
  }
  .xl\:px-\[114px\] {
    @media (width >= 80rem) {
      padding-inline: 114px;
    }
  }
  .xl\:py-0 {
    @media (width >= 80rem) {
      padding-block: calc(var(--spacing) * 0);
    }
  }
  .xl\:py-\[100px\] {
    @media (width >= 80rem) {
      padding-block: 100px;
    }
  }
  .xl\:pr-0 {
    @media (width >= 80rem) {
      padding-right: calc(var(--spacing) * 0);
    }
  }
  .xl\:pr-3 {
    @media (width >= 80rem) {
      padding-right: calc(var(--spacing) * 3);
    }
  }
  .xl\:pr-\[91px\] {
    @media (width >= 80rem) {
      padding-right: 91px;
    }
  }
  .xl\:pr-\[123px\] {
    @media (width >= 80rem) {
      padding-right: 123px;
    }
  }
  .xl\:pr-\[139px\] {
    @media (width >= 80rem) {
      padding-right: 139px;
    }
  }
  .xl\:pl-0 {
    @media (width >= 80rem) {
      padding-left: calc(var(--spacing) * 0);
    }
  }
  .xl\:pl-3 {
    @media (width >= 80rem) {
      padding-left: calc(var(--spacing) * 3);
    }
  }
  .xl\:pl-24 {
    @media (width >= 80rem) {
      padding-left: calc(var(--spacing) * 24);
    }
  }
  .xl\:pl-\[100px\] {
    @media (width >= 80rem) {
      padding-left: 100px;
    }
  }
  .xl\:pl-\[103px\] {
    @media (width >= 80rem) {
      padding-left: 103px;
    }
  }
  .xl\:pl-\[106px\] {
    @media (width >= 80rem) {
      padding-left: 106px;
    }
  }
  .xl\:pl-\[112px\] {
    @media (width >= 80rem) {
      padding-left: 112px;
    }
  }
  .xl\:pl-\[116px\] {
    @media (width >= 80rem) {
      padding-left: 116px;
    }
  }
  .xl\:pl-\[177px\] {
    @media (width >= 80rem) {
      padding-left: 177px;
    }
  }
  .xl\:text-left {
    @media (width >= 80rem) {
      text-align: left;
    }
  }
  .xl\:before\:absolute {
    @media (width >= 80rem) {
      &::before {
        content: var(--tw-content);
        position: absolute;
      }
    }
  }
  .xl\:before\:bottom-0 {
    @media (width >= 80rem) {
      &::before {
        content: var(--tw-content);
        bottom: calc(var(--spacing) * 0);
      }
    }
  }
  .xl\:before\:left-\[-23px\] {
    @media (width >= 80rem) {
      &::before {
        content: var(--tw-content);
        left: -23px;
      }
    }
  }
  .xl\:before\:z-11 {
    @media (width >= 80rem) {
      &::before {
        content: var(--tw-content);
        z-index: 11;
      }
    }
  }
  .xl\:before\:h-\[100px\] {
    @media (width >= 80rem) {
      &::before {
        content: var(--tw-content);
        height: 100px;
      }
    }
  }
  .xl\:before\:w-\[145px\] {
    @media (width >= 80rem) {
      &::before {
        content: var(--tw-content);
        width: 145px;
      }
    }
  }
  .xl\:before\:bg-\[url\(\'\.\.\/images\/footer-left-shape\.png\'\)\] {
    @media (width >= 80rem) {
      &::before {
        content: var(--tw-content);
        background-image: url('../images/footer-left-shape.png');
      }
    }
  }
  .xl\:before\:bg-no-repeat {
    @media (width >= 80rem) {
      &::before {
        content: var(--tw-content);
        background-repeat: no-repeat;
      }
    }
  }
  .xl\:after\:absolute {
    @media (width >= 80rem) {
      &::after {
        content: var(--tw-content);
        position: absolute;
      }
    }
  }
  .xl\:after\:right-\[-23px\] {
    @media (width >= 80rem) {
      &::after {
        content: var(--tw-content);
        right: -23px;
      }
    }
  }
  .xl\:after\:bottom-0 {
    @media (width >= 80rem) {
      &::after {
        content: var(--tw-content);
        bottom: calc(var(--spacing) * 0);
      }
    }
  }
  .xl\:after\:z-11 {
    @media (width >= 80rem) {
      &::after {
        content: var(--tw-content);
        z-index: 11;
      }
    }
  }
  .xl\:after\:block {
    @media (width >= 80rem) {
      &::after {
        content: var(--tw-content);
        display: block;
      }
    }
  }
  .xl\:after\:h-\[100px\] {
    @media (width >= 80rem) {
      &::after {
        content: var(--tw-content);
        height: 100px;
      }
    }
  }
  .xl\:after\:w-\[145px\] {
    @media (width >= 80rem) {
      &::after {
        content: var(--tw-content);
        width: 145px;
      }
    }
  }
  .xl\:after\:bg-\[url\(\'\.\.\/images\/footer-right-shape\.png\'\)\] {
    @media (width >= 80rem) {
      &::after {
        content: var(--tw-content);
        background-image: url('../images/footer-right-shape.png');
      }
    }
  }
  .xl\:after\:bg-no-repeat {
    @media (width >= 80rem) {
      &::after {
        content: var(--tw-content);
        background-repeat: no-repeat;
      }
    }
  }
  .\32 xl\:order-1 {
    @media (width >= 96rem) {
      order: 1;
    }
  }
  .\32 xl\:order-2 {
    @media (width >= 96rem) {
      order: 2;
    }
  }
  .\32 xl\:col-span-1 {
    @media (width >= 96rem) {
      grid-column: span 1 / span 1;
    }
  }
  .\32 xl\:col-span-2 {
    @media (width >= 96rem) {
      grid-column: span 2 / span 2;
    }
  }
  .\32 xl\:col-span-3 {
    @media (width >= 96rem) {
      grid-column: span 3 / span 3;
    }
  }
  .\32 xl\:col-start-5 {
    @media (width >= 96rem) {
      grid-column-start: 5;
    }
  }
  .\32 xl\:col-end-9 {
    @media (width >= 96rem) {
      grid-column-end: 9;
    }
  }
  .\32 xl\:flex {
    @media (width >= 96rem) {
      display: flex;
    }
  }
  .\32 xl\:hidden {
    @media (width >= 96rem) {
      display: none;
    }
  }
  .\32 xl\:max-w-\[340px\] {
    @media (width >= 96rem) {
      max-width: 340px;
    }
  }
  .\32 xl\:max-w-\[800px\] {
    @media (width >= 96rem) {
      max-width: 800px;
    }
  }
  .\32 xl\:grid-cols-3 {
    @media (width >= 96rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .\32 xl\:grid-cols-5 {
    @media (width >= 96rem) {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
  .\32 xl\:grid-cols-6 {
    @media (width >= 96rem) {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
  .\32 xl\:flex-row {
    @media (width >= 96rem) {
      flex-direction: row;
    }
  }
  .\32 xl\:flex-nowrap {
    @media (width >= 96rem) {
      flex-wrap: nowrap;
    }
  }
  .\32 xl\:items-start {
    @media (width >= 96rem) {
      align-items: flex-start;
    }
  }
  .\@md\/quick-view-product-details\:flex-row {
    @container quick-view-product-details (width >= 28rem) {
      flex-direction: row;
    }
  }
  .\@md\/quick-view-product-details\:flex-nowrap {
    @container quick-view-product-details (width >= 28rem) {
      flex-wrap: nowrap;
    }
  }
  .\@md\/quick-view-product-details\:items-center {
    @container quick-view-product-details (width >= 28rem) {
      align-items: center;
    }
  }
  .\@md\/quick-view-product-details\:gap-y-0 {
    @container quick-view-product-details (width >= 28rem) {
      row-gap: calc(var(--spacing) * 0);
    }
  }
  .\@md\/quick-view-product-details\:rounded-3xl {
    @container quick-view-product-details (width >= 28rem) {
      border-radius: var(--radius-3xl);
    }
  }
  .\@md\/quick-view-product-details\:border {
    @container quick-view-product-details (width >= 28rem) {
      border-style: var(--tw-border-style);
      border-width: 1px;
    }
  }
  .\@md\/quick-view-product-details\:border-gray-300 {
    @container quick-view-product-details (width >= 28rem) {
      border-color: var(--color-gray-300);
    }
  }
  .\@md\/quick-view-product-details\:p-6 {
    @container quick-view-product-details (width >= 28rem) {
      padding: calc(var(--spacing) * 6);
    }
  }
  .\@md\/quick-view-product-details\:pr-3 {
    @container quick-view-product-details (width >= 28rem) {
      padding-right: calc(var(--spacing) * 3);
    }
  }
  .\@md\/quick-view-product-details\:pl-3 {
    @container quick-view-product-details (width >= 28rem) {
      padding-left: calc(var(--spacing) * 3);
    }
  }
  .\@md\/quick-view-product-details\:after\:absolute {
    @container quick-view-product-details (width >= 28rem) {
      &::after {
        content: var(--tw-content);
        position: absolute;
      }
    }
  }
  .\@md\/quick-view-product-details\:after\:top-1\/2 {
    @container quick-view-product-details (width >= 28rem) {
      &::after {
        content: var(--tw-content);
        top: calc(1/2 * 100%);
      }
    }
  }
  .\@md\/quick-view-product-details\:after\:right-0 {
    @container quick-view-product-details (width >= 28rem) {
      &::after {
        content: var(--tw-content);
        right: calc(var(--spacing) * 0);
      }
    }
  }
  .\@md\/quick-view-product-details\:after\:h-5 {
    @container quick-view-product-details (width >= 28rem) {
      &::after {
        content: var(--tw-content);
        height: calc(var(--spacing) * 5);
      }
    }
  }
  .\@md\/quick-view-product-details\:after\:w-px {
    @container quick-view-product-details (width >= 28rem) {
      &::after {
        content: var(--tw-content);
        width: 1px;
      }
    }
  }
  .\@md\/quick-view-product-details\:after\:-translate-y-1\/2 {
    @container quick-view-product-details (width >= 28rem) {
      &::after {
        content: var(--tw-content);
        --tw-translate-y: calc(calc(1/2 * 100%) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .\@md\/quick-view-product-details\:after\:bg-gray-300 {
    @container quick-view-product-details (width >= 28rem) {
      &::after {
        content: var(--tw-content);
        background-color: var(--color-gray-300);
      }
    }
  }
  .\[\&\:\:-webkit-inner-spin-button\]\:appearance-none {
    &::-webkit-inner-spin-button {
      -webkit-appearance: none;
              appearance: none;
    }
  }
  .\[\&\:\:-webkit-outer-spin-button\]\:appearance-none {
    &::-webkit-outer-spin-button {
      -webkit-appearance: none;
              appearance: none;
    }
  }
}
@layer base {
  body {
    scroll-behavior: smooth;
    background-color: var(--color-white);
    font-family: var(--font-dm-sans);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--color-light-secondary-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-user-select: none;
    -moz-user-select: none;
         user-select: none;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-urbanist);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-light-primary-text);
  }
  h1 {
    font-size: 40px;
    --tw-leading: 50px;
    line-height: 50px;
    @media (width >= 64rem) {
      font-size: 64px;
    }
    @media (width >= 64rem) {
      --tw-leading: calc(var(--spacing) * 20);
      line-height: calc(var(--spacing) * 20);
    }
  }
  h2 {
    font-size: 32px;
    --tw-leading: 42px;
    line-height: 42px;
    @media (width >= 64rem) {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
    @media (width >= 64rem) {
      --tw-leading: calc(var(--spacing) * 16);
      line-height: calc(var(--spacing) * 16);
    }
  }
  h3 {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-leading: calc(var(--spacing) * 9);
    line-height: calc(var(--spacing) * 9);
    @media (width >= 64rem) {
      font-size: 32px;
    }
    @media (width >= 64rem) {
      --tw-leading: calc(var(--spacing) * 12);
      line-height: calc(var(--spacing) * 12);
    }
  }
  h4 {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-leading: 30px;
    line-height: 30px;
    @media (width >= 64rem) {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
    @media (width >= 64rem) {
      --tw-leading: calc(var(--spacing) * 9);
      line-height: calc(var(--spacing) * 9);
    }
  }
  h5 {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
    @media (width >= 64rem) {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
    @media (width >= 64rem) {
      --tw-leading: 30px;
      line-height: 30px;
    }
  }
  h6 {
    font-size: 17px;
    --tw-leading: 26px;
    line-height: 26px;
    @media (width >= 64rem) {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
    @media (width >= 64rem) {
      --tw-leading: calc(var(--spacing) * 7);
      line-height: calc(var(--spacing) * 7);
    }
  }
  .btn i.hgi,
  a i.hgi {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  :where(h1, h2, h3, h4, h5, h6) a {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 300ms;
    transition-duration: 300ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    &:hover {
      @media (hover: hover) {
        color: var(--color-primary);
      }
    }
  }
  button,
  a {
    cursor: pointer;
  }
}
@layer components {
  .btn {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-outline-style: none;
    outline-style: none;
    & svg {
      flex-shrink: 0;
    }
  }
  .btn-small {
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1);
    font-size: 13px;
    --tw-leading: 22px;
    line-height: 22px;
    & svg {
      width: 18px;
      height: 18px;
    }
  }
  .btn-medium {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    & svg {
      width: calc(var(--spacing) * 5);
      height: calc(var(--spacing) * 5);
    }
  }
  .btn-large {
    padding-inline: 22px;
    padding-block: 11px;
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-leading: 26px;
    line-height: 26px;
    & svg {
      width: 22px;
      height: 22px;
    }
  }
  .btn-default {
    background-color: var(--color-gray-300);
    color: var(--color-gray-800);
    --tw-shadow: 0px 8px 16px 0px var(--tw-shadow-color, rgba(145, 158, 171, 0.12));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-400);
      }
    }
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .btn-default.outline {
    background-color: transparent;
    color: var(--color-light-primary-text);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: rgba(145,158,171,0.32);
    &:hover {
      @media (hover: hover) {
        background-color: rgba(145,158,171,0.08);
      }
    }
  }
  .btn-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
    --tw-shadow: 0px 6px 15px 0px var(--tw-shadow-color, rgba(8, 129, 120, 0.16));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-primary-dark);
      }
    }
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .btn-primary.outline {
    background-color: transparent;
    color: var(--color-primary);
    --tw-shadow: 0 0 #0000;
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: rgba(0,171,85,0.48);
    &:hover {
      @media (hover: hover) {
        background-color: rgba(0,171,85,0.08);
      }
    }
    &:hover {
      @media (hover: hover) {
        --tw-ring-color: var(--color-primary);
      }
    }
  }
  .btn-secondary {
    background-color: var(--color-secondary);
    color: var(--color-white);
    --tw-shadow: 0px 8px 16px 0px var(--tw-shadow-color, rgba(51, 102, 255, 0.24));
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-secondary);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-secondary-dark);
      }
    }
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .btn-secondary.outline {
    background-color: transparent;
    color: var(--color-secondary);
    --tw-shadow: 0 0 #0000;
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-secondary);
    &:hover {
      @media (hover: hover) {
        background-color: rgba(51,102,255,0.08);
      }
    }
  }
  .btn-info {
    background-color: var(--color-info);
    color: var(--color-white);
    --tw-shadow: 0px 8px 16px 0px var(--tw-shadow-color, rgba(24, 144, 255, 0.24));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-info-dark);
      }
    }
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .btn-info.outline {
    background-color: transparent;
    color: var(--color-info);
    --tw-shadow: 0 0 #0000;
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: rgba(24,144,255,0.48);
    &:hover {
      @media (hover: hover) {
        background-color: rgba(24,144,255,0.08);
      }
    }
    &:hover {
      @media (hover: hover) {
        --tw-ring-color: var(--color-info);
      }
    }
  }
  .btn-success {
    background-color: var(--color-success);
    color: var(--color-gray-800);
    --tw-shadow: 0px 8px 16px 0px var(--tw-shadow-color, rgba(84, 214, 44, 0.24));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-success-dark);
      }
    }
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .btn-success.outline {
    background-color: transparent;
    color: var(--color-success);
    --tw-shadow: 0 0 #0000;
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: rgba(84,214,44,0.48);
    &:hover {
      @media (hover: hover) {
        background-color: rgba(84,214,44,0.08);
      }
    }
    &:hover {
      @media (hover: hover) {
        --tw-ring-color: var(--color-success);
      }
    }
  }
  .btn-warning {
    background-color: var(--color-warning);
    color: var(--color-gray-800);
    --tw-shadow: 0px 8px 16px 0px var(--tw-shadow-color, rgba(255, 193, 7, 0.24));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-warning-dark);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .btn-warning.outline {
    background-color: transparent;
    color: var(--color-warning);
    --tw-shadow: 0 0 #0000;
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: rgba(255,193,7,0.48);
    &:hover {
      @media (hover: hover) {
        background-color: rgba(255,193,7,0.08);
      }
    }
    &:hover {
      @media (hover: hover) {
        --tw-ring-color: var(--color-warning);
      }
    }
  }
  .btn-error {
    background-color: var(--color-error);
    color: var(--color-white);
    --tw-shadow: 0px 8px 16px 0px var(--tw-shadow-color, rgba(255, 72, 66, 0.24));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-error-dark);
      }
    }
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .btn-error.outline {
    background-color: transparent;
    color: var(--color-error);
    --tw-shadow: 0 0 #0000;
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: rgba(255,72,66,0.48);
    &:hover {
      @media (hover: hover) {
        background-color: rgba(255,72,66,0.08);
      }
    }
    &:hover {
      @media (hover: hover) {
        --tw-ring-color: var(--color-error);
      }
    }
  }
  .btn-disabled {
    background-color: rgba(145,158,171,0.24);
    color: rgba(145,158,171,0.8);
  }
  .btn-disabled.outline {
    background-color: transparent;
    color: rgba(145,158,171,0.8);
    --tw-shadow: 0 0 #0000;
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: rgba(145,158,171,0.24);
  }
  .input-group {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: transparent;
    --tw-shadow: 0 0 #0000;
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: rgba(145,158,171,0.32);
    --tw-outline-style: none;
    outline-style: none;
    &:focus-within {
      --tw-ring-color: var(--color-light-primary-text);
    }
    &:has(>[data-align=inline-end]) {
      &>input {
        padding-right: calc(var(--spacing) * 2);
      }
    }
    &:has(>[data-align=inline-start]) {
      &>input {
        padding-left: calc(var(--spacing) * 2);
      }
    }
  }
  .input-group-addon[data-align="inline-end"] {
    order: 9999;
  }
  .input-group-addon[data-align="inline-start"] {
    order: -9999;
  }
  .form-control {
    width: 100%;
    background-color: transparent;
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    color: var(--color-light-primary-text);
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-outline-style: none;
    outline-style: none;
    &::-moz-placeholder {
      color: var(--color-light-disabled-text);
    }
    &::placeholder {
      color: var(--color-light-disabled-text);
    }
  }
  .input-group.medium {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 4);
  }
  .input-group.small {
    padding-inline: calc(var(--spacing) * 3.5);
    padding-block: calc(var(--spacing) * 2);
  }
  .scroll-to-top.hide {
    visibility: hidden;
    opacity: 0%;
  }
  .scroll-to-top.active {
    visibility: visible;
    opacity: 100%;
  }
}
/*!-----------------------------------------------------------------------------------
Menu Css
-------------------------------------------------------------------------------------*/
.mobile-menu > ul {
  display: flex;
  flex-direction: column;
  :where(& > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }
  :where(& > :not(:last-child)) {
    border-color: rgba(145,158,171,0.21);
  }
  padding-inline: calc(var(--spacing) * 2);
}
.mobile-menu ul li {
  padding-block: calc(var(--spacing) * 2);
}
.mobile-menu ul li.has-sub-item {
  position: relative;
}
.mobile-menu ul li .submenu-button {
  position: absolute;
  top: calc(var(--spacing) * 0);
  right: calc(var(--spacing) * 0);
  display: inline-flex;
  width: calc(var(--spacing) * 10);
  height: calc(var(--spacing) * 10);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.mobile-menu ul li .submenu-button:not(.submenu-opened)::before {
  font-family: "hgi-stroke-rounded";
  font-size: 16px;
  line-height: 22px;
  color: #919eab;
  content: "㭚";
  transform: rotate(0deg);
  transition: transform 0.3s ease-in-out;
}
.mobile-menu ul li .submenu-button.submenu-opened::after {
  font-family: "hgi-stroke-rounded";
  font-size: 16px;
  line-height: 22px;
  color: #919eab;
  content: "㭚";
  transform: rotate(-180deg);
  transition: transform 0.3s ease-in-out;
}
.mobile-menu ul li ul {
  display: none;
  flex-direction: column;
  padding-top: calc(var(--spacing) * 2);
  padding-left: calc(var(--spacing) * 2);
}
.mobile-menu ul li a {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-leading: 22px;
  line-height: 22px;
}
.mobile-menu ul li a.active {
  color: var(--color-primary);
}
.main-menu > ul {
  display: none;
  align-items: center;
  justify-content: center;
  @media (width >= 80rem) {
    display: flex;
  }
}
.main-menu > ul > li > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -moz-column-gap: calc(var(--spacing) * 2);
       column-gap: calc(var(--spacing) * 2);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 6);
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  --tw-leading: calc(var(--spacing) * 6);
  line-height: calc(var(--spacing) * 6);
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-light-primary-text);
  &:hover {
    @media (hover: hover) {
      color: var(--color-primary);
    }
  }
  @media (width >= 96rem) {
    padding-inline: calc(var(--spacing) * 6);
  }
}
.main-menu > ul > li:hover > a {
  color: var(--color-primary);
}
.main-menu > ul > li ul li:hover > a {
  color: var(--color-light-primary-text);
}
.main-menu ul li.has-sub-item {
  position: relative;
}
.main-menu ul li.has-sub-item:has(.mega-menu) {
  position: static;
}
.main-menu ul li.has-sub-item:hover > ul {
  visibility: visible;
  --tw-translate-y: calc(var(--spacing) * 0);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  opacity: 100%;
}
.main-menu ul li > ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: calc(var(--spacing) * 0);
  z-index: 50;
  width: 250px;
  --tw-translate-y: calc(var(--spacing) * 4);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  padding-block: calc(var(--spacing) * 3);
  opacity: 0%;
  --tw-shadow: 0px 24px 48px 0px var(--tw-shadow-color, rgba(145, 158, 171, 0.12));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 300ms;
  transition-duration: 300ms;
}
.main-menu ul li ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-leading: 22px;
  line-height: 22px;
  &:hover {
    @media (hover: hover) {
      color: var(--color-primary);
    }
  }
}
.main-menu ul li ul li a i {
  rotate: 270deg;
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
  color: var(--color-light-primary-text);
}
.main-menu ul li > .mega-menu ul li a {
  padding: calc(var(--spacing) * 0);
}
.main-menu ul li > .mega-menu {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: calc(1/2 * 100%);
  z-index: 50;
  width: 100%;
  --tw-translate-x: calc(calc(1/2 * 100%) * -1);
  --tw-translate-y: calc(var(--spacing) * 4);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  opacity: 0%;
  --tw-shadow: 0px 12px 24px -4px var(--tw-shadow-color, rgba(145, 158, 171, 0.12));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 300ms;
  transition-duration: 300ms;
}
.main-menu ul li.has-sub-item:hover > .mega-menu {
  visibility: visible;
  --tw-translate-y: calc(var(--spacing) * 0);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  opacity: 100%;
}
.main-menu ul li ul li ul {
  top: calc(var(--spacing) * 0);
  left: 100%;
}
.main-menu ul li a.active {
  color: var(--color-primary);
}
/*!-----------------------------------------------------------------------------------
Preloader Css
-------------------------------------------------------------------------------------*/
.preloader {
  pointer-events: none;
  visibility: visible;
  position: fixed;
  top: calc(var(--spacing) * 0);
  left: calc(var(--spacing) * 0);
  z-index: 999999;
  height: 100%;
  width: 100%;
  background-color: var(--color-white);
  opacity: 100%;
}
.preloader.loaded {
  visibility: hidden;
  opacity: 0%;
}
.preloader .pxl-loader-spinner {
  position: absolute;
  top: calc(1/2 * 100%);
  right: calc(var(--spacing) * 0);
  left: calc(var(--spacing) * 0);
  margin-inline: auto;
  width: 70px;
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  text-align: center;
}
.preloader .pxl-loader-spinner > div {
  display: inline-block;
  height: 18px;
  width: 18px;
  animation: var(--animate-bounce);
  border-radius: calc(infinity * 1px);
  background-color: var(--color-primary);
}
.preloader .pxl-loader-spinner .pxl-loader-bounce1 {
  animation-delay: -0.32s;
}
.preloader .pxl-loader-spinner .pxl-loader-bounce2 {
  animation-delay: -0.16s;
}
/*!-----------------------------------------------------------------------------------
Custom Nice Select Css
-------------------------------------------------------------------------------------*/
.nice-select {
  display: flex !important;
  align-items: center !important;
  border-radius: 100px !important;
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: color-mix(in oklab, #919EAB 32%, transparent) !important;
  padding: calc(var(--spacing) * 4) !important;
  padding-right: calc(var(--spacing) * 8) !important;
}
.nice-select.open {
  border-color: var(--color-black) !important;
}
.nice-select span.current {
  font-size: var(--text-base) !important;
  line-height: var(--tw-leading, var(--text-base--line-height)) !important;
  color: var(--color-light-disabled-text) !important;
}
.nice-select.changed span.current {
  color: var(--color-light-primary-text) !important;
}
.nice-select.open .list {
  z-index: 20 !important;
  margin-top: calc(var(--spacing) * 2.5) !important;
  width: 100% !important;
  min-width: 205px !important;
  border-radius: var(--radius-lg) !important;
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: color-mix(in oklab, #919EAB 32%, transparent) !important;
  background-color: var(--color-white) !important;
  padding-block: calc(var(--spacing) * 2) !important;
  font-size: var(--text-base) !important;
  line-height: var(--tw-leading, var(--text-base--line-height)) !important;
  color: var(--color-light-primary-text) !important;
  --tw-shadow: 0px 24px 48px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.12)) !important;
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
}
.nice-select.open .list li {
  padding-inline: calc(var(--spacing) * 4) !important;
  color: var(--color-light-primary-text) !important;
}
.nice-select.open .list li:hover {
  background-color: transparent !important;
  color: var(--color-primary) !important;
}
.nice-select.open .list li.selected {
  background-color: transparent !important;
  color: var(--color-primary) !important;
}
.nice-select:before {
  font-family: "hgi-stroke-rounded";
  content: "㭚";
  pointer-events: none;
  position: absolute;
  top: calc(1/2 * 100%);
  right: calc(var(--spacing) * 2);
  z-index: 1;
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
  --tw-leading: calc(var(--spacing) * 6);
  line-height: calc(var(--spacing) * 6);
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 300ms;
  transition-duration: 300ms;
  --tw-ease: var(--ease-in-out);
  transition-timing-function: var(--ease-in-out);
}
.nice-select:after {
  display: none !important;
}
.nice-select.open:before {
  --tw-translate-y: calc(calc(1/2 * 100%) * -1) !important;
  translate: var(--tw-translate-x) var(--tw-translate-y) !important;
  rotate: 180deg !important;
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}
.address-select {
  height: 56px !important;
  width: 100% !important;
  border-radius: 80px !important;
  padding-inline: calc(var(--spacing) * 3.5) !important;
  padding-block: calc(var(--spacing) * 4) !important;
}
.pack-select {
  height: 44px !important;
  border-radius: 80px !important;
  padding: calc(var(--spacing) * 4) !important;
  padding-right: calc(var(--spacing) * 11) !important;
}
.pack-select span.current {
  font-size: var(--text-base) !important;
  line-height: var(--tw-leading, var(--text-base--line-height)) !important;
  color: var(--color-light-disabled-text) !important;
}
.pack-select.bottom.open .list {
  top: calc(var(--spacing) * 0) !important;
  margin-top: calc(var(--spacing) * 0) !important;
  --tw-translate-y: calc(102% * -1) !important;
  translate: var(--tw-translate-x) var(--tw-translate-y) !important;
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}
.filter-select {
  width: 100% !important;
  border-radius: 80px !important;
}
.filter-select .list,
.quick-view-select .list {
  right: calc(var(--spacing) * 0) !important;
  left: auto !important;
}
.nice-select.open + .nice-select-label,
.nice-select.label.changed + .nice-select-label {
  top: calc(var(--spacing) * 0) !important;
  background-color: var(--color-white) !important;
  padding-inline: calc(var(--spacing) * 1) !important;
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-leading: 18px;
  line-height: 18px;
}
.nice-select.open.label span.current {
  visibility: visible !important;
  opacity: 100% !important;
}
.nice-select + .nice-select-label {
  position: absolute;
  top: calc(1/2 * 100%);
  left: 14px;
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  color: var(--color-light-disabled-text);
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.nice-select.label span.current {
  visibility: hidden !important;
  opacity: 0% !important;
}
.nice-select.label.changed span.current {
  visibility: visible !important;
  opacity: 100% !important;
}
/*!-----------------------------------------------------------------------------------
404 Css
-------------------------------------------------------------------------------------*/
.notfound {
  position: relative;
  display: flex;
  justify-content: center;
  padding-bottom: 70px;
}
.notfound .notfound-section {
  margin-inline: auto;
  max-width: 565px;
  text-align: center;
}
.notfound .notfound-section h2 {
  padding-top: calc(var(--spacing) * 10);
  padding-bottom: calc(var(--spacing) * 4);
}
.notfound .notfound-section p {
  margin-inline: auto;
  max-width: 392px;
  padding-bottom: calc(var(--spacing) * 6);
  color: var(--color-light-secondary-text);
}
/*!-----------------------------------------------------------------------------------
Breadcrumb Css
-------------------------------------------------------------------------------------*/
.breadcrumb ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: calc(var(--spacing) * 4);
       column-gap: calc(var(--spacing) * 4);
  row-gap: calc(var(--spacing) * 2);
}
.breadcrumb ul li a {
  display: flex;
  align-items: center;
  -moz-column-gap: calc(var(--spacing) * 2);
       column-gap: calc(var(--spacing) * 2);
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  color: var(--color-light-primary-text);
}
.breadcrumb li > span {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-leading: 22px;
  line-height: 22px;
  color: var(--color-light-disabled-text);
}
/*!-----------------------------------------------------------------------------------
Slider Css
-------------------------------------------------------------------------------------*/
.home-one-hero-slider .slick-dots,
.home-four-hero-slider .slick-dots,
.home-five-hero-slider .slick-dots,
.banner-left-sidebar-slider .slick-dots {
  position: absolute;
  bottom: calc(var(--spacing) * 4);
  left: calc(1/2 * 100%);
  z-index: 11;
  display: flex;
  --tw-translate-x: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  justify-content: center;
  -moz-column-gap: calc(var(--spacing) * 4);
       column-gap: calc(var(--spacing) * 4);
  background-color: transparent;
}
.banner-category-hero-slider .slick-dots {
  position: absolute;
  bottom: calc(var(--spacing) * -12);
  left: calc(1/2 * 100%);
  z-index: 11;
  display: flex;
  --tw-translate-x: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  justify-content: center;
  -moz-column-gap: calc(var(--spacing) * 4);
       column-gap: calc(var(--spacing) * 4);
  background-color: transparent;
}
.home-one-hero-slider .slick-dots button,
.home-four-hero-slider .slick-dots button,
.home-five-hero-slider .slick-dots button,
.banner-left-sidebar-slider .slick-dots button,
.banner-category-hero-slider .slick-dots button {
  width: calc(var(--spacing) * 3.5);
  height: calc(var(--spacing) * 3.5);
  cursor: pointer;
  border-radius: calc(infinity * 1px);
  background-color: var(--color-gray-300);
  font-size: 0px;
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 300ms;
  transition-duration: 300ms;
  --tw-ease: var(--ease-in-out);
  transition-timing-function: var(--ease-in-out);
}
.home-one-hero-slider .slick-dots .slick-active button,
.home-four-hero-slider .slick-dots .slick-active button,
.home-five-hero-slider .slick-dots .slick-active button,
.banner-left-sidebar-slider .slick-dots .slick-active button,
.banner-category-hero-slider .slick-dots .slick-active button {
  width: 78px;
  background-color: var(--color-primary);
}
.home-one-hero-slider-dots-shape,
.home-five-hero-slider-dots-shape,
.home-four-hero-slider-dots-shape {
  display: none;
  height: 61px;
  width: 332px;
  @media (width >= 64rem) {
    position: absolute;
  }
  @media (width >= 64rem) {
    bottom: calc(var(--spacing) * 0);
  }
  @media (width >= 64rem) {
    left: calc(1/2 * 100%);
  }
  @media (width >= 64rem) {
    z-index: 9;
  }
  @media (width >= 64rem) {
    display: block;
  }
  @media (width >= 64rem) {
    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  @media (width >= 64rem) {
    background-color: var(--color-white);
  }
  @media (width >= 64rem) {
    &::before {
      content: var(--tw-content);
      position: absolute;
    }
  }
  @media (width >= 64rem) {
    &::before {
      content: var(--tw-content);
      top: calc(var(--spacing) * 0);
    }
  }
  @media (width >= 64rem) {
    &::before {
      content: var(--tw-content);
      left: calc(var(--spacing) * 0);
    }
  }
  @media (width >= 64rem) {
    &::before {
      content: var(--tw-content);
      z-index: 10;
    }
  }
  @media (width >= 64rem) {
    &::before {
      content: var(--tw-content);
      height: 100%;
    }
  }
  @media (width >= 64rem) {
    &::before {
      content: var(--tw-content);
      width: 86px;
    }
  }
  @media (width >= 64rem) {
    &::before {
      content: var(--tw-content);
      background-image: url('../images/banner-left-shape.png');
    }
  }
  @media (width >= 64rem) {
    &::before {
      content: var(--tw-content);
      background-repeat: no-repeat;
    }
  }
  @media (width >= 64rem) {
    &::after {
      content: var(--tw-content);
      position: absolute;
    }
  }
  @media (width >= 64rem) {
    &::after {
      content: var(--tw-content);
      top: calc(var(--spacing) * 0);
    }
  }
  @media (width >= 64rem) {
    &::after {
      content: var(--tw-content);
      right: calc(var(--spacing) * 0);
    }
  }
  @media (width >= 64rem) {
    &::after {
      content: var(--tw-content);
      z-index: 10;
    }
  }
  @media (width >= 64rem) {
    &::after {
      content: var(--tw-content);
      height: 100%;
    }
  }
  @media (width >= 64rem) {
    &::after {
      content: var(--tw-content);
      width: 86px;
    }
  }
  @media (width >= 64rem) {
    &::after {
      content: var(--tw-content);
      background-image: url('../images/banner-right-shape.png');
    }
  }
  @media (width >= 64rem) {
    &::after {
      content: var(--tw-content);
      background-repeat: no-repeat;
    }
  }
}
.home-one-hero-slider-dots-shape {
  @media (width >= 64rem) {
    &::before {
      content: var(--tw-content);
      background-color: var(--color-primary-darker);
    }
  }
  @media (width >= 64rem) {
    &::after {
      content: var(--tw-content);
      background-color: var(--color-primary-darker);
    }
  }
}
.home-four-hero-slider-dots-shape {
  @media (width >= 64rem) {
    &::before {
      content: var(--tw-content);
      background-color: #FFEB69;
    }
  }
  @media (width >= 64rem) {
    &::after {
      content: var(--tw-content);
      background-color: #FFEB69;
    }
  }
}
.home-five-hero-slider-dots-shape {
  @media (width >= 64rem) {
    &::before {
      content: var(--tw-content);
      background-color: #8EBDD1;
    }
  }
  @media (width >= 64rem) {
    &::after {
      content: var(--tw-content);
      background-color: #8EBDD1;
    }
  }
}
.home-one-hot-deals-slider .slick-dots {
  margin-top: calc(var(--spacing) * 8);
  display: flex;
  width: 100%;
  padding-inline: calc(var(--spacing) * 4);
  @media (width >= 64rem) {
    padding-inline: calc(var(--spacing) * 0);
  }
}
.home-one-hot-deals-slider .slick-dots li {
  height: calc(var(--spacing) * 0.5);
  flex-grow: 1;
  background-color: var(--color-gray-300);
}
.home-one-hot-deals-slider .slick-dots li.slick-active {
  height: calc(var(--spacing) * 1.5);
  --tw-translate-y: calc(var(--spacing) * -0.5);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  border-radius: 47px;
  background-color: var(--color-primary);
}
.home-one-hot-deals-slider .slick-dots li button {
  font-size: 0px;
}
.home-five-deal-of-the-day-slider .slick-dots {
  margin-top: calc(var(--spacing) * 8);
  display: flex;
  width: 100%;
  justify-content: center;
  -moz-column-gap: calc(var(--spacing) * 4);
       column-gap: calc(var(--spacing) * 4);
}
.home-five-deal-of-the-day-slider .slick-dots button {
  width: calc(var(--spacing) * 3.5);
  height: calc(var(--spacing) * 3.5);
  cursor: pointer;
  border-radius: calc(infinity * 1px);
  background-color: var(--color-gray-300);
  font-size: 0px;
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 300ms;
  transition-duration: 300ms;
  --tw-ease: var(--ease-in-out);
  transition-timing-function: var(--ease-in-out);
}
.home-five-deal-of-the-day-slider .slick-dots .slick-active button {
  background-color: var(--color-primary);
}
.home-two-top-offer-slider-nav span {
  background-color: color-mix(in srgb, #fff 48%, transparent) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-white) 48%, transparent) !important;
  }
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-white) !important;
    }
  }
}
.home-two-top-offer-slider-nav span:hover i {
  color: var(--color-black) !important;
}
.best-selling-products-slider-nav .slider-btn,
.banner-left-sidebar-slider-nav .slider-btn,
.about-us-testimonial-slider-nav .slider-btn,
.product-details-big-slider-nav .slider-btn,
.product-details-big-slider-nav-2 .slider-btn {
  background-color: var(--color-white);
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-primary);
    }
  }
}
.best-selling-products-slider-nav .slider-btn:hover i,
.home-one-category-slider-nav .slider-btn:hover i,
.home-one-hero-slider-nav .slider-btn:hover i,
.home-one-newly-launched-products-slider-nav .slider-btn:hover i,
.new-branded-products-nav .slider-btn:hover i,
.new-branded-products-multi-vendor-nav .slider-btn:hover i,
.banner-category-hero-slider-nav .slider-btn:hover i,
.banner-left-sidebar-slider-nav .slider-btn:hover i,
.about-us-testimonial-slider-nav .slider-btn:hover i,
.frequently-products-slider-nav .slider-btn:hover i,
.related-products-slider-4-nav .slider-btn:hover i,
.related-post-slider-nav .slider-btn:hover i,
.product-details-big-slider-nav .slider-btn:hover i,
.product-details-big-slider-nav-2 .slider-btn:hover i,
.related-products-slider-nav .slider-btn:hover i,
.home-two-category-slider-nav .slider-btn:hover i,
.home-two-category-promo-slider-nav .slider-btn:hover i,
.home-four-picks-slider-nav .slider-btn:hover i,
.premium-pack-nav .slider-btn:hover i,
.farm-fresh-grocery-nav .slider-btn:hover i {
  color: var(--color-white);
}
.home-one-category-slider-nav .slider-btn,
.home-one-hero-slider-nav .slider-btn,
.new-branded-products-nav .slider-btn,
.new-branded-products-multi-vendor-nav .slider-btn,
.frequently-products-slider-nav .slider-btn,
.related-products-slider-4-nav .slider-btn,
.related-post-slider-nav .slider-btn,
.related-products-slider-nav .slider-btn,
.home-two-category-slider-nav .slider-btn,
.home-two-category-promo-slider-nav .slider-btn,
.home-four-picks-slider-nav .slider-btn,
.premium-pack-nav .slider-btn,
.farm-fresh-grocery-nav .slider-btn {
  background-color: rgba(145,158,171,0.08);
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-primary);
    }
  }
}
.home-one-hero-slider-nav .slider-btn i,
.home-four-hero-slider-nav .slider-btn i,
.home-five-hero-slider-nav .slider-btn i {
  color: var(--color-white);
}
.home-one-top-rate-slider-nav .slider-btn,
.home-one-top-items-slider-nav .slider-btn {
  width: calc(var(--spacing) * 9);
  height: calc(var(--spacing) * 9);
  background-color: rgba(255,255,255,0.48);
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-white);
    }
  }
}
.home-one-newly-launched-products-slider-nav .slider-btn {
  background-color: color-mix(in srgb, #fff 48%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-white) 48%, transparent);
  }
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-primary);
    }
  }
}
.banner-category-hero-slider-nav .slider-btn {
  background-color: var(--color-white);
  --tw-shadow: 0px 24px 48px 0px var(--tw-shadow-color, rgba(145, 158, 171, 0.12));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-primary);
    }
  }
}
.home-four-hero-slider-nav .slider-btn {
  background-color: var(--color-black);
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-white);
    }
  }
}
.home-five-hero-slider-nav .slider-btn {
  background-color: rgba(145,158,171,0.08);
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-white);
    }
  }
}
.home-four-hero-slider-nav .slider-btn:hover i,
.home-five-hero-slider-nav .slider-btn:hover i {
  color: var(--color-black);
}
.home-two-beauty-launched-product-nav .slider-btn,
.home-two-newly-launched-product-nav .slider-btn {
  background-color: color-mix(in srgb, #fff 48%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-white) 48%, transparent);
  }
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-white);
    }
  }
}
/*!-----------------------------------------------------------------------------------
Accordian Css
-------------------------------------------------------------------------------------*/
.accordion-item {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  border-color: var(--color-gray-300);
  padding-block: calc(var(--spacing) * 8);
}
.accordion-item:first-child {
  padding-top: calc(var(--spacing) * 0);
}
.accordion-item:last-child {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 0px;
  padding-bottom: calc(var(--spacing) * 0);
}
.accordion-item .accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  -moz-column-gap: calc(var(--spacing) * 2);
       column-gap: calc(var(--spacing) * 2);
}
.accordion-item .accordion-header h4 {
  font-family: var(--font-dm-sans);
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  --tw-leading: calc(var(--spacing) * 6);
  line-height: calc(var(--spacing) * 6);
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.accordion-item .accordion-header i {
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
  color: var(--color-light-primary-text);
}
.accordion-item .accordion-header.active i.hgi-minus-sign {
  display: inline-block;
}
.accordion-item .accordion-header i.hgi-minus-sign {
  display: none;
}
.accordion-item .accordion-header.active i.hgi-plus-sign {
  display: none;
}
.accordion-item .accordion-header i.hgi-plus-sign {
  display: inline-block;
}
.accordion-item .accordion-body {
  display: none;
  padding-top: calc(var(--spacing) * 4);
}
.accordion .accordion-item:first-child .accordion-body {
  display: block;
}
/*!-----------------------------------------------------------------------------------
Payment Method Css
-------------------------------------------------------------------------------------*/
.payment-method.selected {
  border-radius: 20px;
  border-color: var(--color-primary);
  background-color: var(--color-gray-100);
}
.payment-method {
  border-radius: 80px;
}
.payment-method .payment-content {
  display: none;
}
/*!-----------------------------------------------------------------------------------
Comments Css
-------------------------------------------------------------------------------------*/
.comment-list {
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
  }
}
.comment-body {
  position: relative;
  margin-bottom: calc(var(--spacing) * 6);
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  border-color: var(--color-gray-300);
}
.comment-meta {
  margin-bottom: calc(var(--spacing) * 1);
  display: flex;
  align-items: center;
  -moz-column-gap: calc(var(--spacing) * 4);
       column-gap: calc(var(--spacing) * 4);
}
.comment-reply {
  position: absolute;
  top: calc(var(--spacing) * 0);
  right: calc(var(--spacing) * 0);
}
.comment-reply-link {
  --tw-leading: 26px;
  line-height: 26px;
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}
.comment-content {
  margin-bottom: calc(var(--spacing) * 6);
  padding-right: calc(var(--spacing) * 15);
  padding-left: calc(var(--spacing) * 16);
}
ol.comment-list li:last-child ol.children li:last-child .comment-body {
  margin-bottom: calc(var(--spacing) * 0);
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 0px;
}
ol.comment-list
  li:last-child
  ol.children
  li:last-child
  .comment-body
  .comment-content {
  margin-bottom: calc(var(--spacing) * 0);
}
.comments-area .nice-select {
  border-radius: 100px !important;
}
.comments-area .nice-select .list {
  right: calc(var(--spacing) * 0) !important;
  left: auto !important;
}
.comment-list ol.children {
  margin-left: calc(var(--spacing) * 7);
  @media (width >= 64rem) {
    margin-left: calc(var(--spacing) * 15);
  }
}
/*!-----------------------------------------------------------------------------------
Widget Css
-------------------------------------------------------------------------------------*/
.widget-rating a.active {
  background-color: var(--color-primary);
  color: var(--color-white);
}
.widget-price-range .noUi-target {
  cursor: pointer;
  --tw-border-style: none;
  border-style: none;
  background-color: transparent;
  --tw-shadow: 0 0 #0000;
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.widget-price-range .noUi-target:focus {
  --tw-outline-style: none;
  outline-style: none;
}
.widget-price-range .noUi-horizontal {
  height: calc(var(--spacing) * 0.5) !important;
}
.widget-price-range .noUi-horizontal .noUi-handle {
  top: calc(var(--spacing) * -2);
  right: -15px;
  width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
  cursor: pointer;
  border-radius: calc(infinity * 1px);
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  --tw-shadow: 0 0 #0000;
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 100ms;
  transition-duration: 100ms;
  &::before {
    content: var(--tw-content);
    display: none;
  }
  &::after {
    content: var(--tw-content);
    display: none;
  }
}
.widget-price-range .noUi-horizontal .noUi-handle:hover {
  background-color: var(--color-primary);
}
.widget-price-range .noUi-connect {
  background-color: var(--color-primary);
}
.widget-price-range .noUi-base {
  background-color: var(--color-gray-300);
}
.widget-price-range .noUi-handle.noUi-handle-upper {
  right: -2px;
}
.widget-color-picker button.active {
  width: 28px;
  height: 28px;
}
.widget-color-picker button {
  position: relative;
  &::before {
    content: var(--tw-content);
    display: none;
  }
  &::before {
    content: var(--tw-content);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  &::before {
    content: var(--tw-content);
    --tw-leading: 22px;
    line-height: 22px;
  }
  &::before {
    content: var(--tw-content);
    color: var(--color-white);
  }
  &::before {
    --tw-content: "䤈";
    content: var(--tw-content);
  }
}
.widget-color-picker button::before {
  font-family: "hgi-stroke-rounded";
}
.widget-color-picker button.active::before {
  display: block;
}
.widget-size-picker button.active {
  background-color: var(--color-primary);
  color: var(--color-white);
}
.shop-filter-select .list {
  right: calc(var(--spacing) * 0) !important;
  left: auto !important;
}
/*!-----------------------------------------------------------------------------------
Product details Css
-------------------------------------------------------------------------------------*/
#product-details-tabs ul.filter-list {
  margin-bottom: calc(var(--spacing) * 10);
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 4);
  --tw-border-style: none !important;
  border-style: none !important;
  background-color: transparent !important;
  padding: calc(var(--spacing) * 0) !important;
  --tw-font-weight: var(--font-weight-medium) !important;
  font-weight: var(--font-weight-medium) !important;
}
#product-details-tabs ul.filter-list li button {
  border-radius: 100px;
  padding: calc(var(--spacing) * 3);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-light-primary-text);
}
#product-details-tabs ul.filter-list li button.active {
  background-color: rgba(0,171,85,0.08);
  color: var(--color-primary);
}
#product-details-tabs .product-details-tab {
  border-radius: var(--radius-3xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-300);
  padding: calc(var(--spacing) * 0) !important;
}
#product-details-tabs .product-details-tab .product-details-tab-title {
  border-top-left-radius: var(--radius-3xl);
  border-top-right-radius: var(--radius-3xl);
  background-color: var(--color-gray-200);
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 4);
}
#product-details-tabs .product-details-tab .product-details-tab-content {
  padding: calc(var(--spacing) * 6);
}
#product-details-tabs
  .product-details-tab#description
  .product-details-tab-content
  ul,
.custom-list-style {
  display: flex;
  flex-direction: column;
  row-gap: calc(var(--spacing) * 6);
}
#product-details-tabs
  .product-details-tab#description
  .product-details-tab-content
  ul
  li,
.custom-list-style li {
  position: relative;
  padding-left: calc(var(--spacing) * 10);
  &::before {
    content: var(--tw-content);
    position: absolute;
  }
  &::before {
    content: var(--tw-content);
    top: calc(var(--spacing) * 0);
  }
  &::before {
    content: var(--tw-content);
    left: calc(var(--spacing) * 0);
  }
  &::before {
    content: var(--tw-content);
    display: inline-flex;
  }
  &::before {
    content: var(--tw-content);
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }
  &::before {
    content: var(--tw-content);
    align-items: center;
  }
  &::before {
    content: var(--tw-content);
    justify-content: center;
  }
  &::before {
    content: var(--tw-content);
    border-radius: calc(infinity * 1px);
  }
  &::before {
    content: var(--tw-content);
    background-color: var(--color-primary);
  }
  &::before {
    content: var(--tw-content);
    color: var(--color-white);
  }
  &::before {
    --tw-content: "䤈";
    content: var(--tw-content);
  }
}
#product-details-tabs
  .product-details-tab#description
  .product-details-tab-content
  ul
  li::before,
.custom-list-style li::before {
  font-family: "hgi-stroke-rounded";
}
#product-details-tabs .comment-list-title .nice-select .list {
  right: calc(var(--spacing) * 0) !important;
  left: auto !important;
}
#product-details-tabs .comment-list .comment-body,
#product-details-accordion .comment-list .comment-body,
#quick-view-product-details-accordion .comment-list .comment-body {
  padding-bottom: calc(var(--spacing) * 6);
}
.height-range-slider-section .noUi-target,
.weight-range-slider-section .noUi-target {
  height: calc(var(--spacing) * 2) !important;
  cursor: pointer;
  --tw-border-style: none;
  border-style: none;
  background-color: var(--color-gray-200) !important;
  --tw-shadow: 0 0 #0000;
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.height-range-slider-section .noUi-target:focus,
.weight-range-slider-section .noUi-target:focus {
  --tw-outline-style: none;
  outline-style: none;
}
.height-range-slider-section .noUi-horizontal .noUi-handle,
.weight-range-slider-section .noUi-horizontal .noUi-handle {
  top: calc(var(--spacing) * -1);
  right: -15px;
  width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
  cursor: pointer;
  border-radius: calc(infinity * 1px);
  border-style: var(--tw-border-style);
  border-width: 2px;
  border-color: var(--color-primary);
  background-color: var(--color-white);
  --tw-shadow: 0 0 #0000;
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 100ms;
  transition-duration: 100ms;
  &::before {
    content: var(--tw-content);
    display: none;
  }
  &::after {
    content: var(--tw-content);
    display: none;
  }
}
.height-range-slider-section .noUi-connect,
.weight-range-slider-section .noUi-connect {
  background-color: var(--color-primary);
}
#product-details-accordion .accordion-item,
#quick-view-product-details-accordion .accordion-item {
  margin-bottom: calc(var(--spacing) * 6);
  --tw-border-style: none;
  border-style: none;
  padding-block: calc(var(--spacing) * 0);
  &:last-child {
    margin-bottom: calc(var(--spacing) * 0);
  }
}
#product-details-accordion .accordion-item .accordion-header,
#quick-view-product-details-accordion .accordion-item .accordion-header {
  cursor: pointer;
  border-radius: var(--radius-2xl);
  background-color: var(--color-gray-200);
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 4);
}
#product-details-accordion .accordion-item .accordion-header.active,
#quick-view-product-details-accordion .accordion-item .accordion-header.active {
  border-top-left-radius: var(--radius-2xl);
  border-top-right-radius: var(--radius-2xl);
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
#product-details-accordion .accordion-item .accordion-header i,
#quick-view-product-details-accordion .accordion-item .accordion-header i {
  rotate: calc(90deg * -1);
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 300ms;
  transition-duration: 300ms;
}
#product-details-accordion .accordion-item .accordion-header.active i,
#quick-view-product-details-accordion .accordion-item .accordion-header.active i {
  rotate: 0deg;
}
#product-details-accordion .accordion-item .accordion-body,
#quick-view-product-details-accordion .accordion-item .accordion-body {
  border-bottom-right-radius: var(--radius-2xl);
  border-bottom-left-radius: var(--radius-2xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-top-style: var(--tw-border-style);
  border-top-width: 0px;
  border-color: var(--color-gray-300);
  padding: calc(var(--spacing) * 6);
}
/*!-----------------------------------------------------------------------------------
Table css
-------------------------------------------------------------------------------------*/
.wishlist-table,
.cart-items-table,
.compare-table,
.order-history-table {
  border-collapse: collapse;
  --tw-border-spacing-x: calc(var(--spacing) * 0);
  --tw-border-spacing-y: calc(var(--spacing) * 0);
  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
  border-style: var(--tw-border-style);
  border-width: 0px;
}
.wishlist-table thead {
  border-style: var(--tw-border-style);
  border-width: 0px;
}
.wishlist-table th {
  display: none;
  @media (width >= 64rem) {
    display: table-cell;
  }
}
.wishlist-table td {
  display: flex;
  align-items: center;
  justify-content: space-between;
  &::before {
    --tw-content: attr(data-title) ':';
    content: var(--tw-content);
  }
  @media (width >= 64rem) {
    display: table-cell;
  }
  @media (width >= 64rem) {
    &::before {
      content: var(--tw-content);
      display: none;
    }
  }
}
.wishlist-table tbody tr,
.cart-items-table tbody tr,
.compare-table tbody tr {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  border-bottom-color: var(--color-gray-300);
  &:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0px;
  }
}
.compare-table tbody tr td {
  border-right-style: var(--tw-border-style);
  border-right-width: 1px;
  border-right-color: var(--color-gray-300);
  &:last-child {
    border-right-style: var(--tw-border-style);
    border-right-width: 0px;
  }
}
/*!-----------------------------------------------------------------------------------
Others css
-------------------------------------------------------------------------------------*/
.tab-pane,
.faq-tab-pane {
  display: none;
  opacity: 0%;
}
.tab-pane.active,
.faq-tab-pane.active {
  display: block;
  opacity: 100%;
}
.tab-pane.fade,
.faq-tab-pane.fade {
  transition-property: opacity;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 150ms;
  transition-duration: 150ms;
  --tw-ease: linear;
  transition-timing-function: linear;
}
#dropdownMenu.active {
  visibility: visible;
  --tw-translate-y: calc(var(--spacing) * 0);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  opacity: 100%;
}
#dropdownMenu.hide {
  visibility: hidden;
  --tw-translate-y: calc(var(--spacing) * 4);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  opacity: 0%;
}
.filter-dropdown-menu.active {
  visibility: visible;
  --tw-translate-y: calc(var(--spacing) * 0);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  opacity: 100%;
}
.filter-dropdown-menu.hide {
  visibility: hidden;
  --tw-translate-y: calc(var(--spacing) * 4);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  opacity: 0%;
}
.faq-filter button.active {
  background-color: #00AB5514;
  color: var(--color-primary);
}
.sticky-header.sticky-top {
  position: fixed;
  top: calc(var(--spacing) * 0);
  left: calc(var(--spacing) * 0);
  z-index: 50;
  width: 100%;
  animation: var(--animate-fadeInDown);
  border-top-style: var(--tw-border-style) !important;
  border-top-width: 0px !important;
  background-color: var(--color-white);
  --tw-shadow: 0px 24px 48px 0px var(--tw-shadow-color, rgba(145, 158, 171, 0.12));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.scrollbar-offset {
  padding-right: 15px;
}
.blog-pagination li a.active,
.comment-pagination li a.active {
  cursor: pointer;
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-primary);
  background-color: rgba(0,171,85,0.08);
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 300ms;
  transition-duration: 300ms;
  --tw-ease: var(--ease-in-out);
  transition-timing-function: var(--ease-in-out);
}
.my-account-menu li button.active {
  background-color: var(--color-primary);
  color: var(--color-white);
}
.footer-bottom-nav a.active {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}
.footer-bottom-nav a.active i {
  color: var(--color-primary) !important;
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-divide-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@property --tw-content {
  syntax: "*";
  initial-value: "";
  inherits: false;
}
@property --tw-border-spacing-x {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-spacing-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}
@keyframes bounce {
  0%,
      100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    transform: translateZ(0);
  }
}
@keyframes marquee-animation {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes bounce {
  0%,
    80%,
    100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-divide-x-reverse: 0;
      --tw-border-style: solid;
      --tw-divide-y-reverse: 0;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-content: "";
      --tw-border-spacing-x: 0;
      --tw-border-spacing-y: 0;
    }
  }
}