/*! tailwindcss v4.1.4 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@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-red-100: oklch(93.6% 0.032 17.717);
    --color-red-400: oklch(70.4% 0.191 22.216);
    --color-red-500: oklch(63.7% 0.237 25.331);
    --color-red-600: oklch(57.7% 0.245 27.325);
    --color-red-700: oklch(50.5% 0.213 27.518);
    --color-yellow-200: oklch(94.5% 0.129 101.54);
    --color-yellow-300: oklch(90.5% 0.182 98.111);
    --color-yellow-400: oklch(85.2% 0.199 91.936);
    --color-yellow-500: oklch(79.5% 0.184 86.047);
    --color-yellow-900: oklch(42.1% 0.095 57.708);
    --color-green-500: oklch(72.3% 0.219 149.579);
    --color-sky-300: oklch(82.8% 0.111 230.318);
    --color-sky-500: oklch(68.5% 0.169 237.323);
    --color-sky-600: oklch(58.8% 0.158 241.966);
    --color-sky-700: oklch(50% 0.134 242.749);
    --color-blue-400: oklch(70.7% 0.165 254.624);
    --color-blue-500: oklch(62.3% 0.214 259.815);
    --color-blue-600: oklch(54.6% 0.245 262.881);
    --color-blue-700: oklch(48.8% 0.243 264.376);
    --color-blue-800: oklch(42.4% 0.199 265.638);
    --color-blue-900: oklch(37.9% 0.146 265.522);
    --color-rose-500: oklch(64.5% 0.246 16.439);
    --color-rose-600: oklch(58.6% 0.253 17.585);
    --color-rose-700: oklch(51.4% 0.222 16.935);
    --color-gray-50: oklch(98.5% 0.002 247.839);
    --color-gray-100: oklch(96.7% 0.003 264.542);
    --color-gray-300: oklch(87.2% 0.01 258.338);
    --color-gray-500: oklch(55.1% 0.027 264.364);
    --color-gray-700: oklch(37.3% 0.034 259.733);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-md: 28rem;
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
    --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);
  }
}
@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%;
    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;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::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;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .modal {
    pointer-events: none;
    visibility: hidden;
    position: fixed;
    inset: calc(0.25rem * 0);
    margin: calc(0.25rem * 0);
    display: grid;
    height: 100%;
    max-height: none;
    width: 100%;
    max-width: none;
    align-items: center;
    justify-items: center;
    background-color: transparent;
    padding: calc(0.25rem * 0);
    color: inherit;
    overflow-x: hidden;
    transition: translate 0.3s ease-out, visibility 0.3s allow-discrete, background-color 0.3s ease-out, opacity 0.1s ease-out;
    overflow-y: hidden;
    overscroll-behavior: contain;
    z-index: 999;
    &::backdrop {
      display: none;
    }
    &.modal-open, &[open], &:target {
      pointer-events: auto;
      visibility: visible;
      opacity: 100%;
      background-color: oklch(0% 0 0/ 0.4);
      .modal-box {
        translate: 0 0;
        scale: 1;
        opacity: 1;
      }
    }
    @starting-style {
      &.modal-open, &[open], &:target {
        visibility: hidden;
        opacity: 0%;
      }
    }
  }
  .loading {
    pointer-events: none;
    display: inline-block;
    aspect-ratio: 1 / 1;
    background-color: currentColor;
    vertical-align: middle;
    width: calc(var(--size-selector, 0.25rem) * 6);
    mask-size: 100%;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
  }
  .input {
    cursor: text;
    border: var(--border) solid #0000;
    position: relative;
    display: inline-flex;
    flex-shrink: 1;
    appearance: none;
    align-items: center;
    gap: calc(0.25rem * 2);
    background-color: var(--color-base-100);
    padding-inline: calc(0.25rem * 3);
    vertical-align: middle;
    white-space: nowrap;
    width: clamp(3rem, 20rem, 100%);
    height: var(--size);
    font-size: 0.875rem;
    border-start-start-radius: var(--join-ss, var(--radius-field));
    border-start-end-radius: var(--join-se, var(--radius-field));
    border-end-start-radius: var(--join-es, var(--radius-field));
    border-end-end-radius: var(--join-ee, var(--radius-field));
    border-color: var(--input-color);
    box-shadow: 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
    }
    --size: calc(var(--size-field, 0.25rem) * 10);
    --input-color: var(--color-base-content);
    @supports (color: color-mix(in lab, red, red)) {
      --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
    }
    &:where(input) {
      display: inline-flex;
    }
    :where(input) {
      display: inline-flex;
      height: 100%;
      width: 100%;
      appearance: none;
      background-color: transparent;
      border: none;
      &:focus, &:focus-within {
        --tw-outline-style: none;
        outline-style: none;
        @media (forced-colors: active) {
          outline: 2px solid transparent;
          outline-offset: 2px;
        }
      }
    }
    :where(input[type="date"]) {
      display: inline-block;
    }
    &:focus, &:focus-within {
      --input-color: var(--color-base-content);
      box-shadow: 0 1px var(--input-color);
      @supports (color: color-mix(in lab, red, red)) {
        box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);
      }
      outline: 2px solid var(--input-color);
      outline-offset: 2px;
      isolation: isolate;
    }
    &:has(> input[disabled]), &:is(:disabled, [disabled]) {
      cursor: not-allowed;
      border-color: var(--color-base-200);
      background-color: var(--color-base-200);
      color: var(--color-base-content);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
      }
      &::placeholder {
        color: var(--color-base-content);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
        }
      }
      box-shadow: none;
    }
    &:has(> input[disabled]) > input[disabled] {
      cursor: not-allowed;
    }
    &::-webkit-date-and-time-value {
      text-align: inherit;
    }
    &[type="number"] {
      &::-webkit-inner-spin-button {
        margin-block: calc(0.25rem * -3);
        margin-inline-end: calc(0.25rem * -3);
      }
    }
    &::-webkit-calendar-picker-indicator {
      position: absolute;
      inset-inline-end: 0.75em;
    }
  }
  .select {
    border: var(--border) solid #0000;
    position: relative;
    display: inline-flex;
    flex-shrink: 1;
    appearance: none;
    align-items: center;
    gap: calc(0.25rem * 1.5);
    background-color: var(--color-base-100);
    padding-inline-start: calc(0.25rem * 4);
    padding-inline-end: calc(0.25rem * 7);
    vertical-align: middle;
    width: clamp(3rem, 20rem, 100%);
    height: var(--size);
    font-size: 0.875rem;
    border-start-start-radius: var(--join-ss, var(--radius-field));
    border-start-end-radius: var(--join-se, var(--radius-field));
    border-end-start-radius: var(--join-es, var(--radius-field));
    border-end-end-radius: var(--join-ee, var(--radius-field));
    background-image: linear-gradient(45deg, #0000 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, #0000 50%);
    background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16.1px) calc(1px + 50%);
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
    text-overflow: ellipsis;
    box-shadow: 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
    }
    border-color: var(--input-color);
    --input-color: var(--color-base-content);
    @supports (color: color-mix(in lab, red, red)) {
      --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
    }
    --size: calc(var(--size-field, 0.25rem) * 10);
    [dir="rtl"] & {
      background-position: calc(0% + 12px) calc(1px + 50%), calc(0% + 16px) calc(1px + 50%);
    }
    select {
      margin-inline-start: calc(0.25rem * -4);
      margin-inline-end: calc(0.25rem * -7);
      width: calc(100% + 2.75rem);
      appearance: none;
      padding-inline-start: calc(0.25rem * 4);
      padding-inline-end: calc(0.25rem * 7);
      height: calc(100% - 2px);
      background: inherit;
      border-radius: inherit;
      border-style: none;
      &:focus, &:focus-within {
        --tw-outline-style: none;
        outline-style: none;
        @media (forced-colors: active) {
          outline: 2px solid transparent;
          outline-offset: 2px;
        }
      }
      &:not(:last-child) {
        margin-inline-end: calc(0.25rem * -5.5);
        background-image: none;
      }
    }
    &:focus, &:focus-within {
      --input-color: var(--color-base-content);
      box-shadow: 0 1px var(--input-color);
      @supports (color: color-mix(in lab, red, red)) {
        box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);
      }
      outline: 2px solid var(--input-color);
      outline-offset: 2px;
      isolation: isolate;
    }
    &:has(> select[disabled]), &:is(:disabled, [disabled]) {
      cursor: not-allowed;
      border-color: var(--color-base-200);
      background-color: var(--color-base-200);
      color: var(--color-base-content);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
      }
      &::placeholder {
        color: var(--color-base-content);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
        }
      }
    }
    &:has(> select[disabled]) > select[disabled] {
      cursor: not-allowed;
    }
  }
  .checkbox {
    border: var(--border) solid var(--input-color, var(--color-base-content));
    @supports (color: color-mix(in lab, red, red)) {
      border: var(--border) solid var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000));
    }
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    appearance: none;
    border-radius: var(--radius-selector);
    padding: calc(0.25rem * 1);
    vertical-align: middle;
    color: var(--color-base-content);
    box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 0 #0000 inset, 0 0 #0000;
    transition: background-color 0.2s, box-shadow 0.2s;
    --size: calc(var(--size-selector, 0.25rem) * 6);
    width: var(--size);
    height: var(--size);
    background-size: auto, calc(var(--noise) * 100%);
    background-image: none, var(--fx-noise);
    &:before {
      --tw-content: "";
      content: var(--tw-content);
      display: block;
      width: 100%;
      height: 100%;
      rotate: 45deg;
      background-color: currentColor;
      opacity: 0%;
      transition: clip-path 0.3s, opacity 0.1s, rotate 0.3s, translate 0.3s;
      transition-delay: 0.1s;
      clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%);
      box-shadow: 0px 3px 0 0px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
      font-size: 1rem;
      line-height: 0.75;
    }
    &:focus-visible {
      outline: 2px solid var(--input-color, currentColor);
      outline-offset: 2px;
    }
    &:checked, &[aria-checked="true"] {
      background-color: var(--input-color, #0000);
      box-shadow: 0 0 #0000 inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1));
      &:before {
        clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%);
        opacity: 100%;
      }
      @media (forced-colors: active) {
        &:before {
          rotate: 0deg;
          background-color: transparent;
          --tw-content: "✔︎";
          clip-path: none;
        }
      }
      @media print {
        &:before {
          rotate: 0deg;
          background-color: transparent;
          --tw-content: "✔︎";
          clip-path: none;
        }
      }
    }
    &:indeterminate {
      &:before {
        rotate: 0deg;
        opacity: 100%;
        translate: 0 -35%;
        clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%);
      }
    }
    &:disabled {
      cursor: not-allowed;
      opacity: 20%;
    }
  }
  .radio {
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    appearance: none;
    border-radius: calc(infinity * 1px);
    padding: calc(0.25rem * 1);
    vertical-align: middle;
    border: var(--border) solid var(--input-color, currentColor);
    @supports (color: color-mix(in lab, red, red)) {
      border: var(--border) solid var(--input-color, color-mix(in srgb, currentColor 20%, #0000));
    }
    box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset;
    --size: calc(var(--size-selector, 0.25rem) * 6);
    width: var(--size);
    height: var(--size);
    color: var(--input-color, currentColor);
    &:before {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: calc(infinity * 1px);
      --tw-content: "";
      content: var(--tw-content);
      background-size: auto, calc(var(--noise) * 100%);
      background-image: none, var(--fx-noise);
    }
    &:focus-visible {
      outline: 2px solid currentColor;
    }
    &:checked, &[aria-checked="true"] {
      animation: radio 0.2s ease-out;
      border-color: currentColor;
      background-color: var(--color-base-100);
      &:before {
        background-color: currentColor;
        box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1));
      }
      @media (forced-colors: active) {
        &:before {
          outline-style: var(--tw-outline-style);
          outline-width: 1px;
          outline-offset: calc(1px * -1);
        }
      }
      @media print {
        &:before {
          outline: 0.25rem solid;
          outline-offset: -1rem;
        }
      }
    }
    &:disabled {
      cursor: not-allowed;
      opacity: 20%;
    }
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .sticky {
    position: sticky;
  }
  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .top-5 {
    top: calc(var(--spacing) * 5);
  }
  .top-\[-5px\] {
    top: -5px;
  }
  .top-\[-7\.5px\] {
    top: -7.5px;
  }
  .top-\[-25\%\] {
    top: -25%;
  }
  .top-\[-40px\] {
    top: -40px;
  }
  .top-\[3px\] {
    top: 3px;
  }
  .top-\[5\.5px\] {
    top: 5.5px;
  }
  .top-\[calc\(50\%-12\.5px\)\] {
    top: calc(50% - 12.5px);
  }
  .top-\[calc\(50\%-15px\)\] {
    top: calc(50% - 15px);
  }
  .right-\[-5px\] {
    right: -5px;
  }
  .right-\[5\%\] {
    right: 5%;
  }
  .right-\[calc\(50\%-50px\)\] {
    right: calc(50% - 50px);
  }
  .right-\[calc\(100\%\+7\.5px\)\] {
    right: calc(100% + 7.5px);
  }
  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }
  .bottom-\[7\.5px\] {
    bottom: 7.5px;
  }
  .bottom-\[10\.75px\] {
    bottom: 10.75px;
  }
  .bottom-\[33px\] {
    bottom: 33px;
  }
  .left-1\/2 {
    left: calc(1/2 * 100%);
  }
  .left-\[2\.5\%\] {
    left: 2.5%;
  }
  .left-\[6px\] {
    left: 6px;
  }
  .left-\[8px\] {
    left: 8px;
  }
  .left-\[15px\] {
    left: 15px;
  }
  .left-\[59\.75px\] {
    left: 59.75px;
  }
  .\!z-1199 {
    z-index: 1199 !important;
  }
  .\!z-1200 {
    z-index: 1200 !important;
  }
  .\!z-12000 {
    z-index: 12000 !important;
  }
  .z-50 {
    z-index: 50;
  }
  .z-1000 {
    z-index: 1000;
  }
  .z-1001 {
    z-index: 1001;
  }
  .container {
    width: 100%;
    @media (width >= 320px) {
      max-width: 320px;
    }
    @media (width >= 375px) {
      max-width: 375px;
    }
    @media (width >= 430px) {
      max-width: 430px;
    }
    @media (width >= 768px) {
      max-width: 768px;
    }
    @media (width >= 896px) {
      max-width: 896px;
    }
    @media (width >= 1024px) {
      max-width: 1024px;
    }
    @media (width >= 1232px) {
      max-width: 1232px;
    }
    @media (width >= 1440px) {
      max-width: 1440px;
    }
    @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-1 {
    margin: calc(var(--spacing) * 1);
  }
  .m-3 {
    margin: calc(var(--spacing) * 3);
  }
  .m-\[auto_0\] {
    margin: auto 0;
  }
  .m-auto {
    margin: auto;
  }
  .mx-auto {
    margin-inline: auto;
  }
  .label {
    display: inline-flex;
    align-items: center;
    gap: calc(0.25rem * 1.5);
    white-space: nowrap;
    color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, currentColor 60%, transparent);
    }
    &:has(input) {
      cursor: pointer;
    }
    &:is(.input > *, .select > *) {
      display: flex;
      height: calc(100% - 0.5rem);
      align-items: center;
      padding-inline: calc(0.25rem * 3);
      white-space: nowrap;
      font-size: inherit;
      &:first-child {
        margin-inline-start: calc(0.25rem * -3);
        margin-inline-end: calc(0.25rem * 3);
        border-inline-end: var(--border) solid currentColor;
        @supports (color: color-mix(in lab, red, red)) {
          border-inline-end: var(--border) solid color-mix(in oklab, currentColor 10%, #0000);
        }
      }
      &:last-child {
        margin-inline-start: calc(0.25rem * 3);
        margin-inline-end: calc(0.25rem * -3);
        border-inline-start: var(--border) solid currentColor;
        @supports (color: color-mix(in lab, red, red)) {
          border-inline-start: var(--border) solid color-mix(in oklab, currentColor 10%, #0000);
        }
      }
    }
  }
  .mt-\[50px\] {
    margin-top: 50px;
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-\[2px\] {
    margin-bottom: 2px;
  }
  .mb-\[7\.5px\] {
    margin-bottom: 7.5px;
  }
  .mb-\[12\.5px\] {
    margin-bottom: 12.5px;
  }
  .mb-\[20px\] {
    margin-bottom: 20px;
  }
  .ml-\[4px\] {
    margin-left: 4px;
  }
  .footer {
    display: grid;
    width: 100%;
    grid-auto-flow: row;
    place-items: start;
    column-gap: calc(0.25rem * 4);
    row-gap: calc(0.25rem * 10);
    font-size: 0.875rem;
    line-height: 1.25rem;
    & > * {
      display: grid;
      place-items: start;
      gap: calc(0.25rem * 2);
    }
    &.footer-center {
      grid-auto-flow: column dense;
      place-items: center;
      text-align: center;
      & > * {
        place-items: center;
      }
    }
  }
  .alert {
    display: grid;
    align-items: center;
    gap: calc(0.25rem * 4);
    border-radius: var(--radius-box);
    padding-inline: calc(0.25rem * 4);
    padding-block: calc(0.25rem * 3);
    color: var(--color-base-content);
    background-color: var(--alert-color, var(--color-base-200));
    justify-content: start;
    justify-items: start;
    grid-auto-flow: column;
    grid-template-columns: auto;
    text-align: start;
    border: var(--border) solid var(--color-base-200);
    font-size: 0.875rem;
    line-height: 1.25rem;
    background-size: auto, calc(var(--noise) * 100%);
    background-image: none, var(--fx-noise);
    box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * 0.08)) inset, 0 1px #000, 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * 0.08));
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * 0.08)) inset, 0 1px color-mix( in oklab, color-mix(in oklab, #000 20%, var(--alert-color, var(--color-base-200))) calc(var(--depth) * 20%), #0000 ), 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * 0.08));
    }
    &:has(:nth-child(2)) {
      grid-template-columns: auto minmax(auto, 1fr);
    }
    &.alert-outline {
      background-color: transparent;
      color: var(--alert-color);
      box-shadow: none;
      background-image: none;
    }
    &.alert-dash {
      background-color: transparent;
      color: var(--alert-color);
      border-style: dashed;
      box-shadow: none;
      background-image: none;
    }
    &.alert-soft {
      color: var(--alert-color, var(--color-base-content));
      background: var(--alert-color, var(--color-base-content));
      @supports (color: color-mix(in lab, red, red)) {
        background: color-mix( in oklab, var(--alert-color, var(--color-base-content)) 8%, var(--color-base-100) );
      }
      border-color: var(--alert-color, var(--color-base-content));
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix( in oklab, var(--alert-color, var(--color-base-content)) 10%, var(--color-base-100) );
      }
      box-shadow: none;
      background-image: none;
    }
  }
  .\!flex {
    display: flex !important;
  }
  .\!hidden {
    display: none !important;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .h-\[10px\] {
    height: 10px;
  }
  .h-\[14\.5px\] {
    height: 14.5px;
  }
  .h-\[25px\] {
    height: 25px;
  }
  .h-\[30px\] {
    height: 30px;
  }
  .h-\[40px\] {
    height: 40px;
  }
  .h-\[41px\] {
    height: 41px;
  }
  .h-\[44px\] {
    height: 44px;
  }
  .h-\[45\.5px\] {
    height: 45.5px;
  }
  .h-\[50px\] {
    height: 50px;
  }
  .h-\[55px\] {
    height: 55px;
  }
  .h-\[60px\] {
    height: 60px;
  }
  .h-\[65\%\] {
    height: 65%;
  }
  .h-\[70px\] {
    height: 70px;
  }
  .h-\[75px\] {
    height: 75px;
  }
  .h-\[80\%\] {
    height: 80%;
  }
  .h-\[80px\] {
    height: 80px;
  }
  .h-\[90px\] {
    height: 90px;
  }
  .h-\[100\%\] {
    height: 100%;
  }
  .h-\[100px\] {
    height: 100px;
  }
  .h-\[250px\] {
    height: 250px;
  }
  .h-fit {
    height: fit-content;
  }
  .\!w-\[110px\] {
    width: 110px !important;
  }
  .w-\[2px\] {
    width: 2px;
  }
  .w-\[4px\] {
    width: 4px;
  }
  .w-\[10px\] {
    width: 10px;
  }
  .w-\[14\.5px\] {
    width: 14.5px;
  }
  .w-\[15px\] {
    width: 15px;
  }
  .w-\[17\.5px\] {
    width: 17.5px;
  }
  .w-\[20px\] {
    width: 20px;
  }
  .w-\[25px\] {
    width: 25px;
  }
  .w-\[30px\] {
    width: 30px;
  }
  .w-\[40px\] {
    width: 40px;
  }
  .w-\[41px\] {
    width: 41px;
  }
  .w-\[44px\] {
    width: 44px;
  }
  .w-\[45\.5px\] {
    width: 45.5px;
  }
  .w-\[55px\] {
    width: 55px;
  }
  .w-\[60px\] {
    width: 60px;
  }
  .w-\[65px\] {
    width: 65px;
  }
  .w-\[75\%\] {
    width: 75%;
  }
  .w-\[75px\] {
    width: 75px;
  }
  .w-\[80px\] {
    width: 80px;
  }
  .w-\[85\%\] {
    width: 85%;
  }
  .w-\[85px\] {
    width: 85px;
  }
  .w-\[90\%\] {
    width: 90%;
  }
  .w-\[95\%\] {
    width: 95%;
  }
  .w-\[100\%\] {
    width: 100%;
  }
  .w-\[100px\] {
    width: 100px;
  }
  .w-\[200px\] {
    width: 200px;
  }
  .w-\[225px\] {
    width: 225px;
  }
  .w-\[calc\(100\%\*1\/4\)\] {
    width: calc(100% * 1 / 4);
  }
  .w-\[calc\(100\%\*3\/4\)\] {
    width: calc(100% * 3 / 4);
  }
  .w-fit {
    width: fit-content;
  }
  .w-full {
    width: 100%;
  }
  .w-max {
    width: max-content;
  }
  .max-w-\[225px\] {
    max-width: 225px;
  }
  .max-w-\[750px\] {
    max-width: 750px;
  }
  .max-w-\[1440px\] {
    max-width: 1440px;
  }
  .max-w-md {
    max-width: var(--container-md);
  }
  .\!min-w-\[110px\] {
    min-width: 110px !important;
  }
  .min-w-\[30px\] {
    min-width: 30px;
  }
  .\!translate-x-\[-300\%\] {
    --tw-translate-x: -300% !important;
    translate: var(--tw-translate-x) var(--tw-translate-y) !important;
  }
  .\!translate-x-\[300\%\] {
    --tw-translate-x: 300% !important;
    translate: var(--tw-translate-x) var(--tw-translate-y) !important;
  }
  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-\[100\%\] {
    --tw-translate-x: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-\[300\%\] {
    --tw-translate-x: 300%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-\[150\%\] {
    --tw-translate-y: 150%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .scale-95 {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-100 {
    --tw-scale-x: 100%;
    --tw-scale-y: 100%;
    --tw-scale-z: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .\!scale-\[1\.55\] {
    scale: 1.55 !important;
  }
  .rotate-180 {
    rotate: 180deg;
  }
  .rotate-\[180deg\] {
    rotate: 180deg;
  }
  .rotate-x-\[180deg\] {
    --tw-rotate-x: rotateX(180deg);
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .rotate-y-\[-180deg\] {
    --tw-rotate-y: rotateY(-180deg);
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .rotate-y-\[180deg\] {
    --tw-rotate-y: rotateY(180deg);
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .transform-gpu {
    transform: translateZ(0) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .animate-ping {
    animation: var(--animate-ping);
  }
  .\!cursor-pointer {
    cursor: pointer !important;
  }
  .cursor-default {
    cursor: default;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .resize {
    resize: both;
  }
  .list-inside {
    list-style-position: inside;
  }
  .list-disc {
    list-style-type: disc;
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-col-reverse {
    flex-direction: column-reverse;
  }
  .flex-row {
    flex-direction: row;
  }
  .items-center {
    align-items: center;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-around {
    justify-content: space-around;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .gap-\[3px\] {
    gap: 3px;
  }
  .gap-\[5px\] {
    gap: 5px;
  }
  .gap-\[6px\] {
    gap: 6px;
  }
  .gap-\[7\.5px\] {
    gap: 7.5px;
  }
  .gap-\[10px\] {
    gap: 10px;
  }
  .gap-\[15px\] {
    gap: 15px;
  }
  .gap-\[20px\] {
    gap: 20px;
  }
  .gap-\[25px\] {
    gap: 25px;
  }
  .space-x-2 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .space-x-reverse {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 1;
    }
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }
  .rounded-\[5px\] {
    border-radius: 5px;
  }
  .rounded-\[7\.5px\] {
    border-radius: 7.5px;
  }
  .rounded-\[10px\] {
    border-radius: 10px;
  }
  .rounded-\[15px\] {
    border-radius: 15px;
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .\!border-\[5px\] {
    border-style: var(--tw-border-style) !important;
    border-width: 5px !important;
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-\[2px\] {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }
  .border-\[4px\] {
    border-style: var(--tw-border-style);
    border-width: 4px;
  }
  .border-\[5px\] {
    border-style: var(--tw-border-style);
    border-width: 5px;
  }
  .border-t-\[4px\] {
    border-top-style: var(--tw-border-style);
    border-top-width: 4px;
  }
  .border-b-\[4px\] {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 4px;
  }
  .\!border-\[\#0073ff\] {
    border-color: #0073ff !important;
  }
  .border-\[\#00bafe\] {
    border-color: #00bafe;
  }
  .border-\[\#001f5d\] {
    border-color: #001f5d;
  }
  .border-\[\#005ac8\] {
    border-color: #005ac8;
  }
  .border-\[\#0030A1\] {
    border-color: #0030A1;
  }
  .border-\[\#0073ff\] {
    border-color: #0073ff;
  }
  .border-\[\#d9e6ec\] {
    border-color: #d9e6ec;
  }
  .border-\[\#e09d00\] {
    border-color: #e09d00;
  }
  .border-red-400 {
    border-color: var(--color-red-400);
  }
  .border-white {
    border-color: var(--color-white);
  }
  .border-yellow-500 {
    border-color: var(--color-yellow-500);
  }
  .bg-\[\#00bbff\] {
    background-color: #00bbff;
  }
  .bg-\[\#001f5d\] {
    background-color: #001f5d;
  }
  .bg-\[\#005ac8\] {
    background-color: #005ac8;
  }
  .bg-\[\#32a5d8\] {
    background-color: #32a5d8;
  }
  .bg-\[\#295697\] {
    background-color: #295697;
  }
  .bg-\[\#E8F1F2\] {
    background-color: #E8F1F2;
  }
  .bg-\[\#e8f1f2\] {
    background-color: #e8f1f2;
  }
  .bg-\[\#e61358\] {
    background-color: #e61358;
  }
  .bg-\[\#f08008\] {
    background-color: #f08008;
  }
  .bg-\[\#ffb300\] {
    background-color: #ffb300;
  }
  .bg-blue-600 {
    background-color: var(--color-blue-600);
  }
  .bg-blue-700 {
    background-color: var(--color-blue-700);
  }
  .bg-green-500 {
    background-color: var(--color-green-500);
  }
  .bg-red-100 {
    background-color: var(--color-red-100);
  }
  .bg-red-500 {
    background-color: var(--color-red-500);
  }
  .bg-red-600 {
    background-color: var(--color-red-600);
  }
  .bg-sky-700 {
    background-color: var(--color-sky-700);
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-linear-to-bl {
    --tw-gradient-position: to bottom left;
    @supports (background-image: linear-gradient(in lab, red, red)) {
      --tw-gradient-position: to bottom left in oklab;
    }
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-gradient-to-r {
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-linear-\[145deg\,\#d1d9da\,\#f8ffff\] {
    --tw-gradient-position: 145deg,#d1d9da,#f8ffff;
    background-image: linear-gradient(var(--tw-gradient-stops,145deg,#d1d9da,#f8ffff));
  }
  .bg-linear-\[145deg\,\#f8ffff\,\#d1d9da\] {
    --tw-gradient-position: 145deg,#f8ffff,#d1d9da;
    background-image: linear-gradient(var(--tw-gradient-stops,145deg,#f8ffff,#d1d9da));
  }
  .bg-linear-\[145deg\,\#f8ffff\,\#d1d9daaf\,\#f8ffff\] {
    --tw-gradient-position: 145deg,#f8ffff,#d1d9daaf,#f8ffff;
    background-image: linear-gradient(var(--tw-gradient-stops,145deg,#f8ffff,#d1d9daaf,#f8ffff));
  }
  .bg-linear-\[145deg\,\#ffffff\,\#d1d9da\] {
    --tw-gradient-position: 145deg,#ffffff,#d1d9da;
    background-image: linear-gradient(var(--tw-gradient-stops,145deg,#ffffff,#d1d9da));
  }
  .from-\[\#833AB2D9\] {
    --tw-gradient-from: #833AB2D9;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-blue-700 {
    --tw-gradient-from: var(--color-blue-700);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-yellow-200 {
    --tw-gradient-from: var(--color-yellow-200);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .via-\[\#FD1D1DD9\] {
    --tw-gradient-via: #FD1D1DD9;
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .via-yellow-300 {
    --tw-gradient-via: var(--color-yellow-300);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .to-\[\#FCB045D9\] {
    --tw-gradient-to: #FCB045D9;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-blue-800 {
    --tw-gradient-to: var(--color-blue-800);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-yellow-400 {
    --tw-gradient-to: var(--color-yellow-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-\[2px\] {
    padding: 2px;
  }
  .p-\[3px\] {
    padding: 3px;
  }
  .p-\[4\.5px\] {
    padding: 4.5px;
  }
  .p-\[5px\] {
    padding: 5px;
  }
  .p-\[10px\] {
    padding: 10px;
  }
  .p-\[10px_20px_130px\] {
    padding: 10px 20px 130px;
  }
  .p-\[25px\] {
    padding: 25px;
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .px-\[10px\] {
    padding-inline: 10px;
  }
  .px-\[15px\] {
    padding-inline: 15px;
  }
  .px-\[20px\] {
    padding-inline: 20px;
  }
  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .pt-\[6px\] {
    padding-top: 6px;
  }
  .pt-\[7\.5px\] {
    padding-top: 7.5px;
  }
  .pr-\[1\.5px\] {
    padding-right: 1.5px;
  }
  .pr-\[6px\] {
    padding-right: 6px;
  }
  .pb-\[5px\] {
    padding-bottom: 5px;
  }
  .pb-\[20px\] {
    padding-bottom: 20px;
  }
  .pl-\[4px\] {
    padding-left: 4px;
  }
  .pl-\[20px\] {
    padding-left: 20px;
  }
  .pl-\[40px\] {
    padding-left: 40px;
  }
  .pl-\[50px\] {
    padding-left: 50px;
  }
  .text-center {
    text-align: center;
  }
  .text-justify {
    text-align: justify;
  }
  .text-left {
    text-align: left;
  }
  .font-\[kalameh-black\] {
    font-family: kalameh-black;
  }
  .font-\[kalameh-bold\] {
    font-family: kalameh-bold;
  }
  .font-\[kalameh-medium\] {
    font-family: kalameh-medium;
  }
  .font-\[kalameh-regular\] {
    font-family: kalameh-regular;
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-\[7\.5px\] {
    font-size: 7.5px;
  }
  .text-\[9px\] {
    font-size: 9px;
  }
  .text-\[10px\] {
    font-size: 10px;
  }
  .text-\[11px\] {
    font-size: 11px;
  }
  .text-\[12\.5px\] {
    font-size: 12.5px;
  }
  .text-\[12px\] {
    font-size: 12px;
  }
  .text-\[13px\] {
    font-size: 13px;
  }
  .text-\[14px\] {
    font-size: 14px;
  }
  .text-\[15px\] {
    font-size: 15px;
  }
  .text-\[17\.5px\] {
    font-size: 17.5px;
  }
  .text-\[18px\] {
    font-size: 18px;
  }
  .text-\[20px\] {
    font-size: 20px;
  }
  .text-\[22px\] {
    font-size: 22px;
  }
  .text-\[35px\] {
    font-size: 35px;
  }
  .text-\[90px\] {
    font-size: 90px;
  }
  .leading-\[15px\] {
    --tw-leading: 15px;
    line-height: 15px;
  }
  .font-extrabold {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .text-nowrap {
    text-wrap: nowrap;
  }
  .text-\[\#001f5d\] {
    color: #001f5d;
  }
  .text-\[\#002c56\] {
    color: #002c56;
  }
  .text-\[\#003f8c\] {
    color: #003f8c;
  }
  .text-\[\#005ac8\] {
    color: #005ac8;
  }
  .text-\[\#13293d\] {
    color: #13293d;
  }
  .text-black {
    color: var(--color-black);
  }
  .text-gray-500 {
    color: var(--color-gray-500);
  }
  .text-red-700 {
    color: var(--color-red-700);
  }
  .text-white {
    color: var(--color-white);
  }
  .text-yellow-900 {
    color: var(--color-yellow-900);
  }
  .opacity-0 {
    opacity: 0%;
  }
  .opacity-75 {
    opacity: 75%;
  }
  .opacity-100 {
    opacity: 100%;
  }
  .opacity-\[97\.5\%\] {
    opacity: 97.5%;
  }
  .shadow-\[0_0_3px_\#00000066\] {
    --tw-shadow: 0 0 3px var(--tw-shadow-color, #00000066);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_0_5px_\#00000066\] {
    --tw-shadow: 0 0 5px var(--tw-shadow-color, #00000066);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_0_7\.5px_\#65aaffae\] {
    --tw-shadow: 0 0 7.5px var(--tw-shadow-color, #65aaffae);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_0_10px_\#00BAFE80\] {
    --tw-shadow: 0 0 10px var(--tw-shadow-color, #00BAFE80);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_0_10px_\#006EFF80\] {
    --tw-shadow: 0 0 10px var(--tw-shadow-color, #006EFF80);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_0_10px_\#FFB30080\] {
    --tw-shadow: 0 0 10px var(--tw-shadow-color, #FFB30080);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_0_50px_\#00000025\] {
    --tw-shadow: 0 0 50px var(--tw-shadow-color, #00000025);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[3px_3px_10px_\#aeb5b680\,_-3px_-3px_10px_\#ffffffbb\] {
    --tw-shadow: 3px 3px 10px var(--tw-shadow-color, #aeb5b680), -3px -3px 10px var(--tw-shadow-color, #ffffffbb);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[10px_10px_15px_\#d1d9dac0\,-10px_-10px_15px_\#ffffffc0\] {
    --tw-shadow: 10px 10px 15px var(--tw-shadow-color, #d1d9dac0), -10px -10px 15px var(--tw-shadow-color, #ffffffc0);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[10px_10px_15px_\#ffffffc0\,-10px_-10px_15px_\#d1d9dac0\] {
    --tw-shadow: 10px 10px 15px var(--tw-shadow-color, #ffffffc0), -10px -10px 15px var(--tw-shadow-color, #d1d9dac0);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px 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-md {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px 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);
  }
  .inset-shadow-\[0_0_7\.5px_\#00000066\] {
    --tw-inset-shadow: inset 0 0 7.5px var(--tw-inset-shadow-color, #00000066);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .blur-\[1\.5px\] {
    --tw-blur: blur(1.5px);
    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,);
  }
  .blur-\[15px\] {
    --tw-blur: blur(15px);
    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-0 {
    --tw-invert: invert(0%);
    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,);
  }
  .saturate-0 {
    --tw-saturate: saturate(0%);
    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,);
  }
  .backdrop-blur-\[7\.5px\] {
    --tw-backdrop-blur: blur(7.5px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .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, -webkit-backdrop-filter, backdrop-filter;
    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-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .delay-50 {
    transition-delay: 50ms;
  }
  .delay-150 {
    transition-delay: 150ms;
  }
  .duration-200 {
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .duration-250 {
    --tw-duration: 250ms;
    transition-duration: 250ms;
  }
  .duration-300 {
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .duration-400 {
    --tw-duration: 400ms;
    transition-duration: 400ms;
  }
  .duration-500 {
    --tw-duration: 500ms;
    transition-duration: 500ms;
  }
  .duration-600 {
    --tw-duration: 600ms;
    transition-duration: 600ms;
  }
  .ease-in {
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
  }
  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
  .select-all {
    -webkit-user-select: all;
    user-select: all;
  }
  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }
  .backface-hidden {
    backface-visibility: hidden;
  }
  .perspective-\[250px\] {
    perspective: 250px;
  }
  .text-shadow-\[0_1\.5px_7\.5px_\#000000E6\] {
    text-shadow: 0 1.5px 7.5px var(--tw-text-shadow-color, #000000E6);
  }
  .text-shadow-\[0px_1px_5px_\#00bbff70\] {
    text-shadow: 0px 1px 5px var(--tw-text-shadow-color, #00bbff70);
  }
  .text-shadow-\[0px_2px_5px_rgba\(0\,0\,0\,0\.5\)\] {
    text-shadow: 0px 2px 5px var(--tw-text-shadow-color, rgba(0,0,0,0.5));
  }
  .group-hover\:translate-x-\[-2px\] {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-translate-x: -2px;
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .placeholder\:text-right {
    &::placeholder {
      text-align: right;
    }
  }
  .placeholder\:font-\[kalameh-regular\] {
    &::placeholder {
      font-family: kalameh-regular;
    }
  }
  .placeholder\:text-\[\#acb6cf\] {
    &::placeholder {
      color: #acb6cf;
    }
  }
  .hover\:-translate-y-1 {
    &:hover {
      @media (hover: hover) {
        --tw-translate-y: calc(var(--spacing) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .hover\:scale-\[1\.05\] {
    &:hover {
      @media (hover: hover) {
        scale: 1.05;
      }
    }
  }
  .hover\:scale-\[1\.025\] {
    &:hover {
      @media (hover: hover) {
        scale: 1.025;
      }
    }
  }
  .hover\:bg-\[\#003f8c\] {
    &:hover {
      @media (hover: hover) {
        background-color: #003f8c;
      }
    }
  }
  .hover\:bg-blue-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .hover\:from-blue-800 {
    &:hover {
      @media (hover: hover) {
        --tw-gradient-from: var(--color-blue-800);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      }
    }
  }
  .hover\:to-blue-900 {
    &:hover {
      @media (hover: hover) {
        --tw-gradient-to: var(--color-blue-900);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      }
    }
  }
  .hover\:text-\[\#005ac8\] {
    &:hover {
      @media (hover: hover) {
        color: #005ac8;
      }
    }
  }
  .hover\:text-sky-300 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-sky-300);
      }
    }
  }
  .hover\:opacity-10 {
    &:hover {
      @media (hover: hover) {
        opacity: 10%;
      }
    }
  }
  .hover\:shadow-xl {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px 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);
      }
    }
  }
  .focus\:scale-\[1\.002\] {
    &:focus {
      scale: 1.002;
    }
  }
  .focus\:border-\[\#67acff\] {
    &:focus {
      border-color: #67acff;
    }
  }
  .focus\:shadow-\[0_0_3px_\#65aaffae\] {
    &:focus {
      --tw-shadow: 0 0 3px var(--tw-shadow-color, #65aaffae);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus\:ring-2 {
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + 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);
    }
  }
  .focus\:ring-blue-400 {
    &:focus {
      --tw-ring-color: var(--color-blue-400);
    }
  }
  .focus\:outline-none {
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .active\:scale-\[0\.95\] {
    &:active {
      scale: 0.95;
    }
  }
  .active\:scale-\[0\.925\] {
    &:active {
      scale: 0.925;
    }
  }
  .mobilel\:w-\[15px\] {
    @media (width >= 430px) {
      width: 15px;
    }
  }
  .tablet\:\!sticky {
    @media (width >= 768px) {
      position: sticky !important;
    }
  }
  .tablet\:absolute {
    @media (width >= 768px) {
      position: absolute;
    }
  }
  .tablet\:static {
    @media (width >= 768px) {
      position: static;
    }
  }
  .tablet\:top-\[-62\.5px\] {
    @media (width >= 768px) {
      top: -62.5px;
    }
  }
  .tablet\:bottom-\[-52\.5px\] {
    @media (width >= 768px) {
      bottom: -52.5px;
    }
  }
  .tablet\:my-\[30px\] {
    @media (width >= 768px) {
      margin-block: 30px;
    }
  }
  .tablet\:mt-0 {
    @media (width >= 768px) {
      margin-top: calc(var(--spacing) * 0);
    }
  }
  .tablet\:flex {
    @media (width >= 768px) {
      display: flex;
    }
  }
  .tablet\:hidden {
    @media (width >= 768px) {
      display: none;
    }
  }
  .tablet\:h-\[17\.5px\] {
    @media (width >= 768px) {
      height: 17.5px;
    }
  }
  .tablet\:h-\[40px\] {
    @media (width >= 768px) {
      height: 40px;
    }
  }
  .tablet\:h-\[65px\] {
    @media (width >= 768px) {
      height: 65px;
    }
  }
  .tablet\:h-\[100\%\] {
    @media (width >= 768px) {
      height: 100%;
    }
  }
  .tablet\:\!w-\[300px\] {
    @media (width >= 768px) {
      width: 300px !important;
    }
  }
  .tablet\:w-\[25px\] {
    @media (width >= 768px) {
      width: 25px;
    }
  }
  .tablet\:w-\[40\%\] {
    @media (width >= 768px) {
      width: 40%;
    }
  }
  .tablet\:w-\[40px\] {
    @media (width >= 768px) {
      width: 40px;
    }
  }
  .tablet\:w-\[50\%\] {
    @media (width >= 768px) {
      width: 50%;
    }
  }
  .tablet\:w-\[55px\] {
    @media (width >= 768px) {
      width: 55px;
    }
  }
  .tablet\:w-\[60px\] {
    @media (width >= 768px) {
      width: 60px;
    }
  }
  .tablet\:w-\[65px\] {
    @media (width >= 768px) {
      width: 65px;
    }
  }
  .tablet\:w-\[225px\] {
    @media (width >= 768px) {
      width: 225px;
    }
  }
  .tablet\:w-\[calc\(100\%\/3\)\] {
    @media (width >= 768px) {
      width: calc(100% / 3);
    }
  }
  .tablet\:w-fit {
    @media (width >= 768px) {
      width: fit-content;
    }
  }
  .tablet\:max-w-\[1440px\] {
    @media (width >= 768px) {
      max-width: 1440px;
    }
  }
  .tablet\:\!min-w-\[300px\] {
    @media (width >= 768px) {
      min-width: 300px !important;
    }
  }
  .tablet\:min-w-\[119\.55px\] {
    @media (width >= 768px) {
      min-width: 119.55px;
    }
  }
  .tablet\:translate-y-\[calc\(100\%\+10px\)\] {
    @media (width >= 768px) {
      --tw-translate-y: calc(100% + 10px);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .tablet\:flex-col {
    @media (width >= 768px) {
      flex-direction: column;
    }
  }
  .tablet\:flex-row {
    @media (width >= 768px) {
      flex-direction: row;
    }
  }
  .tablet\:justify-between {
    @media (width >= 768px) {
      justify-content: space-between;
    }
  }
  .tablet\:gap-\[5px\] {
    @media (width >= 768px) {
      gap: 5px;
    }
  }
  .tablet\:gap-\[10px\] {
    @media (width >= 768px) {
      gap: 10px;
    }
  }
  .tablet\:gap-\[15px\] {
    @media (width >= 768px) {
      gap: 15px;
    }
  }
  .tablet\:border-none {
    @media (width >= 768px) {
      --tw-border-style: none;
      border-style: none;
    }
  }
  .tablet\:p-\[40px_20px\] {
    @media (width >= 768px) {
      padding: 40px 20px;
    }
  }
  .tablet\:px-\[10px\] {
    @media (width >= 768px) {
      padding-inline: 10px;
    }
  }
  .tablet\:px-\[20px\] {
    @media (width >= 768px) {
      padding-inline: 20px;
    }
  }
  .tablet\:py-\[4\.5px\] {
    @media (width >= 768px) {
      padding-block: 4.5px;
    }
  }
  .tablet\:py-\[20px\] {
    @media (width >= 768px) {
      padding-block: 20px;
    }
  }
  .tablet\:py-\[30px\] {
    @media (width >= 768px) {
      padding-block: 30px;
    }
  }
  .tablet\:pb-\[65px\] {
    @media (width >= 768px) {
      padding-bottom: 65px;
    }
  }
  .tablet\:text-start {
    @media (width >= 768px) {
      text-align: start;
    }
  }
  .tablet\:text-\[9\.5px\] {
    @media (width >= 768px) {
      font-size: 9.5px;
    }
  }
  .tablet\:text-\[9\.25px\] {
    @media (width >= 768px) {
      font-size: 9.25px;
    }
  }
  .tablet\:text-\[10px\] {
    @media (width >= 768px) {
      font-size: 10px;
    }
  }
  .tablet\:text-\[11px\] {
    @media (width >= 768px) {
      font-size: 11px;
    }
  }
  .tablet\:text-\[12\.5px\] {
    @media (width >= 768px) {
      font-size: 12.5px;
    }
  }
  .tablet\:text-\[15px\] {
    @media (width >= 768px) {
      font-size: 15px;
    }
  }
  .tablet\:text-\[18px\] {
    @media (width >= 768px) {
      font-size: 18px;
    }
  }
  .tablet\:text-\[22px\] {
    @media (width >= 768px) {
      font-size: 22px;
    }
  }
  .tablet\:placeholder\:text-\[\#ffffff\] {
    @media (width >= 768px) {
      &::placeholder {
        color: #ffffff;
      }
    }
  }
  .tabletx2\:bottom-\[-58px\] {
    @media (width >= 896px) {
      bottom: -58px;
    }
  }
  .tabletx2\:ml-\[20px\] {
    @media (width >= 896px) {
      margin-left: 20px;
    }
  }
  .tabletx2\:flex {
    @media (width >= 896px) {
      display: flex;
    }
  }
  .tabletx2\:h-\[25px\] {
    @media (width >= 896px) {
      height: 25px;
    }
  }
  .tabletx2\:h-\[60px\] {
    @media (width >= 896px) {
      height: 60px;
    }
  }
  .tabletx2\:h-\[75px\] {
    @media (width >= 896px) {
      height: 75px;
    }
  }
  .tabletx2\:w-\[40px\] {
    @media (width >= 896px) {
      width: 40px;
    }
  }
  .tabletx2\:w-\[60px\] {
    @media (width >= 896px) {
      width: 60px;
    }
  }
  .tabletx2\:w-\[65px\] {
    @media (width >= 896px) {
      width: 65px;
    }
  }
  .tabletx2\:w-\[75px\] {
    @media (width >= 896px) {
      width: 75px;
    }
  }
  .tabletx2\:w-\[80px\] {
    @media (width >= 896px) {
      width: 80px;
    }
  }
  .tabletx2\:w-\[85px\] {
    @media (width >= 896px) {
      width: 85px;
    }
  }
  .tabletx2\:justify-around {
    @media (width >= 896px) {
      justify-content: space-around;
    }
  }
  .tabletx2\:gap-\[20px\] {
    @media (width >= 896px) {
      gap: 20px;
    }
  }
  .tabletx2\:gap-\[25px\] {
    @media (width >= 896px) {
      gap: 25px;
    }
  }
  .tabletx2\:p-\[30px_0_30px\] {
    @media (width >= 896px) {
      padding: 30px 0 30px;
    }
  }
  .tabletx2\:text-\[11px\] {
    @media (width >= 896px) {
      font-size: 11px;
    }
  }
  .tabletx2\:text-\[12\.5px\] {
    @media (width >= 896px) {
      font-size: 12.5px;
    }
  }
  .tabletx2\:text-\[13px\] {
    @media (width >= 896px) {
      font-size: 13px;
    }
  }
  .tabletx2\:text-\[17\.5px\] {
    @media (width >= 896px) {
      font-size: 17.5px;
    }
  }
  .tabletx2\:text-\[20px\] {
    @media (width >= 896px) {
      font-size: 20px;
    }
  }
  .tabletx2\:placeholder\:text-\[\#acb6cf\] {
    @media (width >= 896px) {
      &::placeholder {
        color: #acb6cf;
      }
    }
  }
  .laptop\:font-\[kalameh-bold\] {
    @media (width >= 1024px) {
      font-family: kalameh-bold;
    }
  }
  .laptop\:font-\[kalameh-medium\] {
    @media (width >= 1024px) {
      font-family: kalameh-medium;
    }
  }
  .laptop\:text-\[16px\] {
    @media (width >= 1024px) {
      font-size: 16px;
    }
  }
  .laptop\:text-\[25px\] {
    @media (width >= 1024px) {
      font-size: 25px;
    }
  }
  .laptopl\:top-\[-5px\] {
    @media (width >= 1440px) {
      top: -5px;
    }
  }
  .laptopl\:text-\[14px\] {
    @media (width >= 1440px) {
      font-size: 14px;
    }
  }
  .laptopl\:text-\[15px\] {
    @media (width >= 1440px) {
      font-size: 15px;
    }
  }
  .laptopl\:text-\[25px\] {
    @media (width >= 1440px) {
      font-size: 25px;
    }
  }
}
/*!
 * animate.css - https://animate.style/
 * Version - 4.1.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2020 Animate.css
 */
@charset "UTF-8";
:root {
  --animate-duration: 1s;
  --animate-delay: 0.5s;
  --animate-repeat: 1;
}
.animate__animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: var(--animate-duration);
  animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animate__animated.animate__infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animate__animated.animate__repeat-1 {
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: var(--animate-repeat);
  animation-iteration-count: var(--animate-repeat);
}
.animate__animated.animate__repeat-2 {
  -webkit-animation-iteration-count: calc(1 * 2);
  animation-iteration-count: calc(1 * 2);
  -webkit-animation-iteration-count: calc(var(--animate-repeat) * 2);
  animation-iteration-count: calc(var(--animate-repeat) * 2);
}
.animate__animated.animate__repeat-3 {
  -webkit-animation-iteration-count: calc(1 * 3);
  animation-iteration-count: calc(1 * 3);
  -webkit-animation-iteration-count: calc(var(--animate-repeat) * 3);
  animation-iteration-count: calc(var(--animate-repeat) * 3);
}
.animate__animated.animate__delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-delay: var(--animate-delay);
  animation-delay: var(--animate-delay);
}
.animate__animated.animate__delay-2s {
  -webkit-animation-delay: calc(1s * 2);
  animation-delay: calc(1s * 2);
  -webkit-animation-delay: calc(var(--animate-delay) * 2);
  animation-delay: calc(var(--animate-delay) * 2);
}
.animate__animated.animate__delay-3s {
  -webkit-animation-delay: calc(1s * 3);
  animation-delay: calc(1s * 3);
  -webkit-animation-delay: calc(var(--animate-delay) * 3);
  animation-delay: calc(var(--animate-delay) * 3);
}
.animate__animated.animate__delay-4s {
  -webkit-animation-delay: calc(1s * 4);
  animation-delay: calc(1s * 4);
  -webkit-animation-delay: calc(var(--animate-delay) * 4);
  animation-delay: calc(var(--animate-delay) * 4);
}
.animate__animated.animate__delay-5s {
  -webkit-animation-delay: calc(1s * 5);
  animation-delay: calc(1s * 5);
  -webkit-animation-delay: calc(var(--animate-delay) * 5);
  animation-delay: calc(var(--animate-delay) * 5);
}
.animate__animated.animate__faster {
  -webkit-animation-duration: calc(1s / 2);
  animation-duration: calc(1s / 2);
  -webkit-animation-duration: calc(var(--animate-duration) / 2);
  animation-duration: calc(var(--animate-duration) / 2);
}
.animate__animated.animate__fast {
  -webkit-animation-duration: calc(1s * 0.8);
  animation-duration: calc(1s * 0.8);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.8);
  animation-duration: calc(var(--animate-duration) * 0.8);
}
.animate__animated.animate__slow {
  -webkit-animation-duration: calc(1s * 2);
  animation-duration: calc(1s * 2);
  -webkit-animation-duration: calc(var(--animate-duration) * 2);
  animation-duration: calc(var(--animate-duration) * 2);
}
.animate__animated.animate__slower {
  -webkit-animation-duration: calc(1s * 7.5);
  animation-duration: calc(1s * 7.5);
  -webkit-animation-duration: calc(var(--animate-duration) * 7.5);
  animation-duration: calc(var(--animate-duration) * 7.5);
}
@media print, (prefers-reduced-motion: reduce) {
  .animate__animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }
  .animate__animated[class*='Out'] {
    opacity: 0;
  }
}
@-webkit-keyframes bounce {
  from, 20%, 53%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }
  80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}
@keyframes bounce {
  from, 20%, 53%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }
  80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}
.animate__bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
@-webkit-keyframes flash {
  from, 50%, to {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
@keyframes flash {
  from, 50%, to {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
.animate__flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}
@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}
@-webkit-keyframes shakeX {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
@keyframes shakeX {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
.animate__shakeX {
  -webkit-animation-name: shakeX;
  animation-name: shakeX;
}
@-webkit-keyframes shakeY {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
}
@keyframes shakeY {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
}
.animate__shakeY {
  -webkit-animation-name: shakeY;
  animation-name: shakeY;
}
@-webkit-keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }
  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }
  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }
  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }
  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }
  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }
  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }
  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }
  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.animate__headShake {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: headShake;
  animation-name: headShake;
}
@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
.animate__swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}
@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}
@-webkit-keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}
@-webkit-keyframes jello {
  from, 11.1%, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
@keyframes jello {
  from, 11.1%, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
.animate__jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center;
}
@-webkit-keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.animate__heartBeat {
  -webkit-animation-name: heartBeat;
  animation-name: heartBeat;
  -webkit-animation-duration: calc(1s * 1.3);
  animation-duration: calc(1s * 1.3);
  -webkit-animation-duration: calc(var(--animate-duration) * 1.3);
  animation-duration: calc(var(--animate-duration) * 1.3);
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
@-webkit-keyframes backInDown {
  0% {
    -webkit-transform: translateY(-1200px) scale(0.7);
    transform: translateY(-1200px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInDown {
  0% {
    -webkit-transform: translateY(-1200px) scale(0.7);
    transform: translateY(-1200px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInDown {
  -webkit-animation-name: backInDown;
  animation-name: backInDown;
}
@-webkit-keyframes backInLeft {
  0% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInLeft {
  0% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInLeft {
  -webkit-animation-name: backInLeft;
  animation-name: backInLeft;
}
@-webkit-keyframes backInRight {
  0% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInRight {
  0% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInRight {
  -webkit-animation-name: backInRight;
  animation-name: backInRight;
}
@-webkit-keyframes backInUp {
  0% {
    -webkit-transform: translateY(1200px) scale(0.7);
    transform: translateY(1200px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInUp {
  0% {
    -webkit-transform: translateY(1200px) scale(0.7);
    transform: translateY(1200px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInUp {
  -webkit-animation-name: backInUp;
  animation-name: backInUp;
}
@-webkit-keyframes backOutDown {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: translateY(700px) scale(0.7);
    transform: translateY(700px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutDown {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: translateY(700px) scale(0.7);
    transform: translateY(700px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutDown {
  -webkit-animation-name: backOutDown;
  animation-name: backOutDown;
}
@-webkit-keyframes backOutLeft {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutLeft {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutLeft {
  -webkit-animation-name: backOutLeft;
  animation-name: backOutLeft;
}
@-webkit-keyframes backOutRight {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutRight {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutRight {
  -webkit-animation-name: backOutRight;
  animation-name: backOutRight;
}
@-webkit-keyframes backOutUp {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: translateY(-700px) scale(0.7);
    transform: translateY(-700px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutUp {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: translateY(-700px) scale(0.7);
    transform: translateY(-700px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutUp {
  -webkit-animation-name: backOutUp;
  animation-name: backOutUp;
}
@-webkit-keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__bounceIn {
  -webkit-animation-duration: calc(1s * 0.75);
  animation-duration: calc(1s * 0.75);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}
@-webkit-keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
    transform: translate3d(0, -3000px, 0) scaleY(3);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9);
    transform: translate3d(0, 25px, 0) scaleY(0.9);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
    transform: translate3d(0, -10px, 0) scaleY(0.95);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
    transform: translate3d(0, 5px, 0) scaleY(0.985);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
    transform: translate3d(0, -3000px, 0) scaleY(3);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9);
    transform: translate3d(0, 25px, 0) scaleY(0.9);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
    transform: translate3d(0, -10px, 0) scaleY(0.95);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
    transform: translate3d(0, 5px, 0) scaleY(0.985);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}
@-webkit-keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
    transform: translate3d(-3000px, 0, 0) scaleX(3);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
    transform: translate3d(25px, 0, 0) scaleX(1);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98);
    transform: translate3d(-10px, 0, 0) scaleX(0.98);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
    transform: translate3d(5px, 0, 0) scaleX(0.995);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
    transform: translate3d(-3000px, 0, 0) scaleX(3);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
    transform: translate3d(25px, 0, 0) scaleX(1);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98);
    transform: translate3d(-10px, 0, 0) scaleX(0.98);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
    transform: translate3d(5px, 0, 0) scaleX(0.995);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}
@-webkit-keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
    transform: translate3d(3000px, 0, 0) scaleX(3);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
    transform: translate3d(-25px, 0, 0) scaleX(1);
  }
  75% {
    -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
    transform: translate3d(10px, 0, 0) scaleX(0.98);
  }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
    transform: translate3d(-5px, 0, 0) scaleX(0.995);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
    transform: translate3d(3000px, 0, 0) scaleX(3);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
    transform: translate3d(-25px, 0, 0) scaleX(1);
  }
  75% {
    -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
    transform: translate3d(10px, 0, 0) scaleX(0.98);
  }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
    transform: translate3d(-5px, 0, 0) scaleX(0.995);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}
@-webkit-keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
    transform: translate3d(0, 3000px, 0) scaleY(5);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }
  75% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95);
    transform: translate3d(0, 10px, 0) scaleY(0.95);
  }
  90% {
    -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985);
    transform: translate3d(0, -5px, 0) scaleY(0.985);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
    transform: translate3d(0, 3000px, 0) scaleY(5);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }
  75% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95);
    transform: translate3d(0, 10px, 0) scaleY(0.95);
  }
  90% {
    -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985);
    transform: translate3d(0, -5px, 0) scaleY(0.985);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}
@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
.animate__bounceOut {
  -webkit-animation-duration: calc(1s * 0.75);
  animation-duration: calc(1s * 0.75);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}
@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985);
    transform: translate3d(0, 10px, 0) scaleY(0.985);
  }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0) scaleY(3);
    transform: translate3d(0, 2000px, 0) scaleY(3);
  }
}
@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985);
    transform: translate3d(0, 10px, 0) scaleY(0.985);
  }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0) scaleY(3);
    transform: translate3d(0, 2000px, 0) scaleY(3);
  }
}
.animate__bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}
@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9);
    transform: translate3d(20px, 0, 0) scaleX(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2);
    transform: translate3d(-2000px, 0, 0) scaleX(2);
  }
}
@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9);
    transform: translate3d(20px, 0, 0) scaleX(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2);
    transform: translate3d(-2000px, 0, 0) scaleX(2);
  }
}
.animate__bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}
@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9);
    transform: translate3d(-20px, 0, 0) scaleX(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0) scaleX(2);
    transform: translate3d(2000px, 0, 0) scaleX(2);
  }
}
@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9);
    transform: translate3d(-20px, 0, 0) scaleX(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0) scaleX(2);
    transform: translate3d(2000px, 0, 0) scaleX(2);
  }
}
.animate__bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}
@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985);
    transform: translate3d(0, -10px, 0) scaleY(0.985);
  }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9);
    transform: translate3d(0, 20px, 0) scaleY(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0) scaleY(3);
    transform: translate3d(0, -2000px, 0) scaleY(3);
  }
}
@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985);
    transform: translate3d(0, -10px, 0) scaleY(0.985);
  }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9);
    transform: translate3d(0, 20px, 0) scaleY(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0) scaleY(3);
    transform: translate3d(0, -2000px, 0) scaleY(3);
  }
}
.animate__bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.animate__fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}
@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}
@-webkit-keyframes fadeInTopLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInTopLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInTopLeft {
  -webkit-animation-name: fadeInTopLeft;
  animation-name: fadeInTopLeft;
}
@-webkit-keyframes fadeInTopRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInTopRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInTopRight {
  -webkit-animation-name: fadeInTopRight;
  animation-name: fadeInTopRight;
}
@-webkit-keyframes fadeInBottomLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInBottomLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInBottomLeft {
  -webkit-animation-name: fadeInBottomLeft;
  animation-name: fadeInBottomLeft;
}
@-webkit-keyframes fadeInBottomRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInBottomRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInBottomRight {
  -webkit-animation-name: fadeInBottomRight;
  animation-name: fadeInBottomRight;
}
@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.animate__fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}
@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes fadeOutDown {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.animate__fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}
@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
.animate__fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}
@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.animate__fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}
@-webkit-keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
.animate__fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}
@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes fadeOutRight {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.animate__fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}
@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
.animate__fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}
@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes fadeOutUp {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.animate__fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}
@-webkit-keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
.animate__fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}
@-webkit-keyframes fadeOutTopLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
}
@keyframes fadeOutTopLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
}
.animate__fadeOutTopLeft {
  -webkit-animation-name: fadeOutTopLeft;
  animation-name: fadeOutTopLeft;
}
@-webkit-keyframes fadeOutTopRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
}
@keyframes fadeOutTopRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
}
.animate__fadeOutTopRight {
  -webkit-animation-name: fadeOutTopRight;
  animation-name: fadeOutTopRight;
}
@-webkit-keyframes fadeOutBottomRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
}
@keyframes fadeOutBottomRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
}
.animate__fadeOutBottomRight {
  -webkit-animation-name: fadeOutBottomRight;
  animation-name: fadeOutBottomRight;
}
@-webkit-keyframes fadeOutBottomLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
}
@keyframes fadeOutBottomLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
}
.animate__fadeOutBottomLeft {
  -webkit-animation-name: fadeOutBottomLeft;
  animation-name: fadeOutBottomLeft;
}
@-webkit-keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
@keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
.animate__animated.animate__flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}
@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
.animate__flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}
@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
.animate__flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}
@-webkit-keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
.animate__flipOutX {
  -webkit-animation-duration: calc(1s * 0.75);
  animation-duration: calc(1s * 0.75);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}
@-webkit-keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
@keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
.animate__flipOutY {
  -webkit-animation-duration: calc(1s * 0.75);
  animation-duration: calc(1s * 0.75);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}
@-webkit-keyframes lightSpeedInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes lightSpeedInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__lightSpeedInRight {
  -webkit-animation-name: lightSpeedInRight;
  animation-name: lightSpeedInRight;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}
@-webkit-keyframes lightSpeedInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
    transform: translate3d(-100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(5deg);
    transform: skewX(5deg);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes lightSpeedInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
    transform: translate3d(-100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(5deg);
    transform: skewX(5deg);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__lightSpeedInLeft {
  -webkit-animation-name: lightSpeedInLeft;
  animation-name: lightSpeedInLeft;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}
@-webkit-keyframes lightSpeedOutRight {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
@keyframes lightSpeedOutRight {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
.animate__lightSpeedOutRight {
  -webkit-animation-name: lightSpeedOutRight;
  animation-name: lightSpeedOutRight;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}
@-webkit-keyframes lightSpeedOutLeft {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
    transform: translate3d(-100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
}
@keyframes lightSpeedOutLeft {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
    transform: translate3d(-100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
}
.animate__lightSpeedOutLeft {
  -webkit-animation-name: lightSpeedOutLeft;
  animation-name: lightSpeedOutLeft;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}
@-webkit-keyframes rotateIn {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateIn {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
  -webkit-transform-origin: center;
  transform-origin: center;
}
@-webkit-keyframes rotateInDownLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInDownLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}
@-webkit-keyframes rotateInDownRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInDownRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}
@-webkit-keyframes rotateInUpLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInUpLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}
@-webkit-keyframes rotateInUpRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInUpRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}
@-webkit-keyframes rotateOut {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}
@keyframes rotateOut {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}
.animate__rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
  -webkit-transform-origin: center;
  transform-origin: center;
}
@-webkit-keyframes rotateOutDownLeft {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownLeft {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}
.animate__rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}
@-webkit-keyframes rotateOutDownRight {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownRight {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
.animate__rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}
@-webkit-keyframes rotateOutUpLeft {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpLeft {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
.animate__rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}
@-webkit-keyframes rotateOutUpRight {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpRight {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}
.animate__rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}
@-webkit-keyframes hinge {
  0% {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  20%, 60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  40%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
@keyframes hinge {
  0% {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  20%, 60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  40%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
.animate__hinge {
  -webkit-animation-duration: calc(1s * 2);
  animation-duration: calc(1s * 2);
  -webkit-animation-duration: calc(var(--animate-duration) * 2);
  animation-duration: calc(var(--animate-duration) * 2);
  -webkit-animation-name: hinge;
  animation-name: hinge;
  -webkit-transform-origin: top left;
  transform-origin: top left;
}
@-webkit-keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }
  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }
  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.animate__jackInTheBox {
  -webkit-animation-name: jackInTheBox;
  animation-name: jackInTheBox;
}
@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}
@-webkit-keyframes rollOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}
@keyframes rollOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}
.animate__rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}
@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
.animate__zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}
@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}
@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}
@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}
@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}
@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
@keyframes zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
.animate__zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}
@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
  }
}
@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
  }
}
.animate__zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
  -webkit-transform-origin: left center;
  transform-origin: left center;
}
@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
  }
}
@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
  }
}
.animate__zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
  -webkit-transform-origin: right center;
  transform-origin: right center;
}
@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}
@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}
@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}
@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}
@-webkit-keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.animate__slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}
@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.animate__slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}
@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.animate__slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}
@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.animate__slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}
@layer base {
  h5 {
    all: unset;
  }
}
.user__dashboard__main {
  display: flex;
  height: 100dvh;
  width: 100%;
  flex-direction: row;
  @media (prefers-color-scheme: dark) {
    background-color: #2b2b2b;
  }
  .user__dashboard__aside__section {
    position: fixed;
    bottom: calc(var(--spacing) * 0);
    z-index: 1200 !important;
    display: flex;
    height: fit-content;
    width: 100%;
    flex-direction: column;
    overflow-x: hidden;
    padding: 10px;
    @media (width >= 768px) {
      position: sticky !important;
    }
    @media (width >= 768px) {
      top: calc(var(--spacing) * 0);
    }
    @media (width >= 768px) {
      padding: 15px;
    }
    .user__dashboard__aside {
      display: flex;
      height: calc(100dvh - 90px);
      width: 100%;
      flex-direction: column;
      justify-content: space-between;
      overflow: auto;
      border-radius: 10px;
      background-color: #2b2b2b;
      padding: 20px;
      @media (width >= 768px) {
        height: calc(100dvh - 30px);
      }
      @media (width >= 768px) {
        border-radius: 15px;
      }
      @media (prefers-color-scheme: dark) {
        background-color: #005ac8;
      }
      .aside__logo__profile {
        display: flex;
        height: 125px;
        min-height: 125px;
        width: 100%;
        flex-direction: column;
        justify-content: space-between;
        .aside__logo {
          margin-bottom: 5px;
          display: flex;
          height: fit-content;
          width: 100%;
          align-items: center;
          justify-content: space-between;
          gap: 10px;
          .aside__logo__icon__section {
            width: 40px;
            --tw-drop-shadow-size: drop-shadow(0 0 5px var(--tw-drop-shadow-color, #00000030));
            --tw-drop-shadow: var(--tw-drop-shadow-size);
            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,);
          }
          .aside__logo__typo__section {
            width: 170px;
            --tw-drop-shadow-size: drop-shadow(0 0 5px var(--tw-drop-shadow-color, #00000030));
            --tw-drop-shadow: var(--tw-drop-shadow-size);
            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,);
          }
        }
        .aside__profile {
          display: flex;
          height: 50%;
          width: 100%;
          align-items: center;
          justify-content: space-between;
          gap: 20px;
          padding-block: 7.5px;
          .aside__profile__picture {
            display: flex;
            height: 40px;
            width: 40px;
            min-width: 40px;
            scale: 1.2;
            align-items: center;
            justify-content: center;
            border-radius: calc(infinity * 1px);
            border-style: var(--tw-border-style);
            border-width: 3.25px;
            border-color: var(--color-white);
            background-color: #005ac8;
            padding-top: 2.5px;
            font-family: kalameh-bold;
            font-size: 16px;
            color: var(--color-white);
            --tw-drop-shadow-size: drop-shadow(0 0 5px var(--tw-drop-shadow-color, #00000030));
            --tw-drop-shadow: var(--tw-drop-shadow-size);
            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,);
            @media (prefers-color-scheme: dark) {
              background-color: #003f8c;
            }
          }
          .aside__profile__userName__edit {
            display: flex;
            height: calc(100% + 5px);
            width: 100%;
            flex-direction: column;
            justify-content: space-between;
            gap: 5px;
            .aside__profile__userName {
              display: flex;
              height: 40%;
              width: 100%;
              align-items: flex-start;
              justify-content: center;
              color: var(--color-white);
              p {
                font-family: kalameh-bold;
                font-size: 16.5px;
                text-wrap: nowrap;
              }
              span {
                font-family: kalameh-medium;
                font-size: 14px;
                text-wrap: nowrap;
              }
            }
            .aside__profile__edit {
              display: flex;
              height: 60%;
              width: 100%;
              align-items: center;
              justify-content: center;
              border-radius: 5px;
              background-color: #005ac8;
              --tw-drop-shadow-size: drop-shadow(0 0 5px var(--tw-drop-shadow-color, #00000030));
              --tw-drop-shadow: var(--tw-drop-shadow-size);
              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,);
              --tw-duration: 150ms;
              transition-duration: 150ms;
              &:hover {
                @media (hover: hover) {
                  scale: 1.02;
                }
              }
              &:hover {
                @media (hover: hover) {
                  background-color: #003f8c;
                }
              }
              &:active {
                scale: 0.98;
              }
              @media (prefers-color-scheme: dark) {
                background-color: #003f8c;
              }
              p {
                font-family: kalameh-light;
                font-size: 14px;
                color: var(--color-white);
              }
            }
          }
        }
        .aside__logo__profile__separator {
          display: flex;
          height: 7.5px;
          width: 100%;
          border-radius: 50px;
          background-color: #005ac8;
          @media (prefers-color-scheme: dark) {
            background-color: #2b2b2b;
          }
        }
      }
      .aside__main {
        margin-block: 10px;
        display: flex;
        height: 100%;
        width: 100%;
        flex-direction: column;
        gap: 10px;
        overflow: auto;
        .aside__main__item {
          position: relative;
          display: flex;
          height: 40px;
          min-height: 40px;
          width: 100%;
          cursor: pointer;
          align-items: center;
          justify-content: center;
          gap: 10px;
          border-radius: 5px;
          background-color: color-mix(in srgb, #fff 10%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
          }
          --tw-duration: 150ms;
          transition-duration: 150ms;
          &:hover {
            @media (hover: hover) {
              background-color: color-mix(in srgb, #fff 20%, transparent);
              @supports (color: color-mix(in lab, red, red)) {
                background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
              }
            }
          }
          .aside__main__item__icon__section {
            position: absolute;
            right: calc(var(--spacing) * 0);
            height: 40px;
            width: 40px;
            scale: 0.8;
            border-radius: 5px;
            background-color: #005ac8;
            @media (prefers-color-scheme: dark) {
              background-color: #003f8c;
            }
            .aside__main__item__icon {
              width: 40px;
              scale: 0.7;
              color: var(--color-white);
            }
          }
          .aside__main__item__text {
            font-family: kalameh-bold;
            color: var(--color-white);
          }
          .exit__icon {
            background-color: var(--color-rose-700) !important;
          }
        }
      }
      .aside__home__minimize {
        display: flex;
        height: 57.5px;
        min-height: 57.5px;
        width: 100%;
        flex-direction: column;
        justify-content: space-between;
        @media (width >= 768px) {
          height: 107.5px;
        }
        @media (width >= 768px) {
          min-height: 107.5px;
        }
        .aside__home__minimize__separator {
          display: flex;
          height: 7.5px;
          width: 100%;
          border-radius: 50px;
          background-color: #005ac8;
          @media (prefers-color-scheme: dark) {
            background-color: #2b2b2b;
          }
        }
        .aside__home {
          position: relative;
          display: flex;
          height: 40px;
          min-height: 40px;
          width: 100%;
          align-items: center;
          justify-content: center;
          gap: 10px;
          border-radius: 5px;
          background-color: color-mix(in srgb, #fff 10%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
          }
          --tw-duration: 150ms;
          transition-duration: 150ms;
          &:hover {
            @media (hover: hover) {
              background-color: color-mix(in srgb, #fff 20%, transparent);
              @supports (color: color-mix(in lab, red, red)) {
                background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
              }
            }
          }
          .aside__home__icon__section {
            position: absolute;
            right: calc(var(--spacing) * 0);
            height: 40px;
            width: 40px;
            scale: 0.8;
            border-radius: 5px;
            background-color: #005ac8;
            @media (prefers-color-scheme: dark) {
              background-color: #003f8c;
            }
            .aside__home__icon {
              width: 40px;
              scale: 0.7;
              color: var(--color-white);
            }
          }
          .aside__home__text {
            font-family: kalameh-bold;
            color: var(--color-white);
          }
        }
        .aside__minimize {
          position: relative;
          display: none;
          height: 40px;
          min-height: 40px;
          width: 100%;
          cursor: pointer;
          align-items: center;
          justify-content: center;
          gap: 10px;
          border-radius: calc(infinity * 1px);
          border-style: var(--tw-border-style);
          border-width: 2px;
          border-color: color-mix(in srgb, #fff 40%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            border-color: color-mix(in oklab, var(--color-white) 40%, transparent);
          }
          background-color: color-mix(in srgb, #fff 10%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
          }
          --tw-duration: 150ms;
          transition-duration: 150ms;
          &:hover {
            @media (hover: hover) {
              border-color: var(--color-white);
            }
          }
          &:hover {
            @media (hover: hover) {
              background-color: color-mix(in srgb, #fff 20%, transparent);
              @supports (color: color-mix(in lab, red, red)) {
                background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
              }
            }
          }
          @media (width >= 768px) {
            display: flex;
          }
          .aside__minimize__icon__section {
            position: absolute;
            right: -1px;
            height: 40px;
            width: 40px;
            scale: 0.75;
            border-radius: calc(infinity * 1px);
            background-color: #005ac8;
            @media (prefers-color-scheme: dark) {
              background-color: #003f8c;
            }
            .aside__minimize__icon {
              width: 40px;
              scale: 0.7;
              color: var(--color-white);
              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: 500ms;
              transition-duration: 500ms;
            }
          }
          .aside__minimize__text {
            font-family: kalameh-medium;
            color: var(--color-white);
          }
        }
      }
    }
  }
  .user__dashboard__main__section {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    @media (width >= 768px) {
      gap: 15px;
    }
    @media (width >= 768px) {
      padding: 15px 0 15px 15px;
    }
    .user__dashboard__main__header {
      display: flex;
      height: 60px;
      width: 100%;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      border-radius: 10px;
      background-color: #2b2b2b;
      padding: 20px;
      @media (width >= 768px) {
        height: 80px;
      }
      @media (width >= 768px) {
        border-radius: 15px;
      }
      @media (prefers-color-scheme: dark) {
        background-color: #005ac8;
      }
      .user__dashboard__mobile__main__header__title {
        display: flex;
        height: 100%;
        width: fit-content;
        align-items: center;
        justify-content: center;
        @media (width >= 768px) {
          display: none;
        }
        h1 {
          font-family: kalameh-bold;
          font-size: 20px;
          color: var(--color-white);
        }
      }
      #nav-icon {
        right: -10px;
        margin: calc(var(--spacing) * 0);
      }
      #nav-icon span {
        background-color: var(--color-white);
      }
      .user__dashboard__mobile__main__header__home {
        display: flex;
        height: 45px;
        width: 60px;
        justify-content: flex-end;
        @media (width >= 768px) {
          display: none;
        }
        .user__dashboard__mobile__main__header__home__iconSection {
          display: flex;
          height: 45px;
          width: 45px;
          align-items: center;
          justify-content: center;
          border-radius: 5px;
          background-color: #005ac8;
          --tw-shadow: 0 0 5px var(--tw-shadow-color, #00000050);
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
          @media (prefers-color-scheme: dark) {
            background-color: #003f8c;
          }
          .user__dashboard__mobile__main__header__home__icon {
            height: 45px;
            width: 45px;
            scale: 0.7;
            color: var(--color-white);
          }
        }
      }
      .user__dashboard__main__header__title {
        display: none;
        height: 100%;
        width: calc(1/2 * 100%);
        align-items: center;
        gap: 20px;
        @media (width >= 768px) {
          display: flex;
        }
        .user__dashboard__main__header__title__icon__section {
          display: none;
          height: 40px;
          width: 40px;
          min-width: 40px;
          align-items: center;
          justify-content: center;
          border-radius: 5px;
          background-color: #005ac8;
          @media (width >= 768px) {
            display: flex;
          }
          @media (prefers-color-scheme: dark) {
            background-color: #003f8c;
          }
          .user__dashboard__main__header__title__icon {
            width: 30px;
            color: var(--color-white);
          }
        }
        .user__dashboard__main__header__title__h2 {
          font-family: kalameh-bold;
          font-size: 25px;
          color: var(--color-white);
        }
      }
    }
    .user__dashboard__main__body {
      display: flex;
      height: 100vh;
      width: 100%;
      overflow: auto;
      border-radius: 10px;
      padding: 15px 15px 0 15px;
      --tw-shadow: inset 0 0 5px var(--tw-shadow-color, #00000050), inset 0 0 20px var(--tw-shadow-color, #00000020);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      @media (width >= 768px) {
        height: calc(100dvh - 125px);
      }
      @media (width >= 768px) {
        border-radius: 15px;
      }
      @media (prefers-color-scheme: dark) {
        --tw-shadow: inset 0 0 5px var(--tw-shadow-color, #00000075), inset 0 0 20px var(--tw-shadow-color, #00000050);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
      scrollbar-width: none;
      -ms-overflow-style: none;
      &::-webkit-scrollbar {
        display: none !important;
      }
      .user__dashboard__main__panel {
        display: flex;
        height: fit-content;
        width: 100%;
        flex-direction: column;
        gap: 15px;
        @media (width >= 1232px) {
          height: 100%;
        }
        .user__dashboard__main__panel__cards {
          display: flex;
          height: 100%;
          width: 100%;
          flex-direction: column;
          gap: 15px;
          @media (width >= 1232px) {
            height: calc(100% * 2 / 5);
          }
          @media (width >= 1232px) {
            flex-direction: row;
          }
          .main__panel__cards__total__price__total__items, .main__panel__cards__total__payReady__currency {
            display: flex;
            height: 100%;
            width: 100%;
            flex-direction: column;
            gap: 15px;
            @media (width >= 768px) {
              flex-direction: row;
            }
            @media (width >= 1232px) {
              width: calc(1/2 * 100%);
            }
            .user__dashboard__main__panel__cards__item {
              display: flex;
              height: 200px;
              width: 100%;
              flex-direction: column;
              gap: 10px;
              overflow: hidden;
              border-radius: 10px;
              padding-inline: 15px;
              padding-block: 10px;
              --tw-shadow: 0 0 10px var(--tw-shadow-color, #00000025);
              box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
              --tw-duration: 400ms;
              transition-duration: 400ms;
              -webkit-user-select: none;
              user-select: none;
              &:hover {
                @media (hover: hover) {
                  --tw-translate-y: -3px;
                  translate: var(--tw-translate-x) var(--tw-translate-y);
                }
              }
              &:hover {
                @media (hover: hover) {
                  --tw-shadow: 0 5px 20px var(--tw-shadow-color, #00000050);
                  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
                }
              }
              @media (width >= 768px) {
                width: calc(1/2 * 100%);
              }
              @media (width >= 1232px) {
                height: 100%;
              }
              .panel__cards__item__topic__icon {
                display: flex;
                height: calc(100% * 1 / 3);
                width: 100%;
                align-items: center;
                justify-content: space-between;
                gap: 5px;
                .panel__cards__item__topic {
                  display: flex;
                  height: fit-content;
                  width: fit-content;
                  align-items: center;
                  font-family: kalameh-bold;
                  font-size: 17.5px;
                  color: var(--color-white);
                }
                .panel__cards__item__icon {
                  aspect-ratio: 1 / 1;
                  width: 40px;
                  scale: 1.25;
                  border-radius: calc(infinity * 1px);
                  background-color: color-mix(in srgb, #000 25%, transparent);
                  @supports (color: color-mix(in lab, red, red)) {
                    background-color: color-mix(in oklab, var(--color-black) 25%, transparent);
                  }
                  color: var(--color-white);
                  svg {
                    scale: 0.5;
                  }
                }
              }
              .panel__cards__item__body {
                margin-bottom: 5px;
                display: flex;
                height: calc(100% * 2 / 3);
                width: 100%;
                flex-direction: column;
                justify-content: center;
                gap: 15px;
                overflow: hidden;
                border-radius: 7.5px;
                --tw-gradient-position: to top right in oklab;
                background-image: linear-gradient(var(--tw-gradient-stops));
                --tw-gradient-from: color-mix(in srgb, #000 17.5%, transparent);
                @supports (color: color-mix(in lab, red, red)) {
                  --tw-gradient-from: color-mix(in oklab, var(--color-black) 17.5%, transparent);
                }
                --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
                --tw-gradient-via: color-mix(in srgb, #000 12.5%, transparent);
                @supports (color: color-mix(in lab, red, red)) {
                  --tw-gradient-via: color-mix(in oklab, var(--color-black) 12.5%, transparent);
                }
                --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
                --tw-gradient-stops: var(--tw-gradient-via-stops);
                --tw-gradient-to: color-mix(in srgb, #000 17.5%, transparent);
                @supports (color: color-mix(in lab, red, red)) {
                  --tw-gradient-to: color-mix(in oklab, var(--color-black) 17.5%, transparent);
                }
                --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
                padding: 5px;
                --tw-shadow: inset 0 0 5px var(--tw-shadow-color, #00000050), inset 0 0 20px var(--tw-shadow-color, #00000020);
                box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
                .panel__cards__item__body__info {
                  display: flex;
                  height: fit-content;
                  width: 100%;
                  align-items: center;
                  justify-content: center;
                  padding-inline: 5px;
                  p {
                    text-align: center;
                    font-family: kalameh-medium;
                    font-size: 12.5px;
                    color: var(--color-white);
                    text-shadow: 0 0 5px var(--tw-text-shadow-color, #00000075);
                  }
                }
                .panel__cards__item__body__data {
                  display: flex;
                  height: fit-content;
                  width: 100%;
                  align-items: center;
                  justify-content: center;
                  gap: 10px;
                  padding-inline: 5px;
                  .panel__cards__item__body__data__number {
                    display: flex;
                    height: 100%;
                    width: fit-content;
                    align-items: center;
                    p {
                      font-family: kalameh-medium;
                      font-size: 20px;
                      color: var(--color-white);
                      text-shadow: 0 0 5px var(--tw-text-shadow-color, #00000075);
                    }
                  }
                  .panel__cards__item__body__data__unit {
                    width: 25px;
                    padding-bottom: 5px;
                    color: var(--color-white);
                  }
                }
              }
            }
            .total__buy__price {
              --tw-gradient-position: to bottom left in oklab;
              background-image: linear-gradient(var(--tw-gradient-stops));
              --tw-gradient-from: #005ac8;
              --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
              --tw-gradient-to: #00d1e0;
              --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
              .panel__cards__item__topic__icon {
                .panel__cards__item__icon {
                  svg {
                    position: relative;
                    top: 1.5px;
                    right: 1px;
                  }
                }
              }
            }
            .total__buy__items {
              --tw-gradient-position: to bottom left in oklab;
              background-image: linear-gradient(var(--tw-gradient-stops));
              --tw-gradient-from: #ff2d52;
              --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
              --tw-gradient-to: #ff5ebc;
              --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
              .panel__cards__item__topic__icon {
                .panel__cards__item__icon {
                  svg {
                    position: relative;
                    right: 1px;
                  }
                }
              }
              .panel__cards__item__body {
                .panel__cards__item__body__data {
                  scale: 1.3;
                }
              }
            }
            .total__readyTo__pay {
              --tw-gradient-position: to bottom left in oklab;
              background-image: linear-gradient(var(--tw-gradient-stops));
              --tw-gradient-from: #ff3300;
              --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
              --tw-gradient-to: #ff9913;
              --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
              .panel__cards__item__body {
                .panel__cards__item__body__data {
                  scale: 1.3;
                }
              }
            }
            .currency__exchange {
              --tw-gradient-position: to bottom left in oklab;
              background-image: linear-gradient(var(--tw-gradient-stops));
              --tw-gradient-from: #006b32;
              --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
              --tw-gradient-to: #00bd32;
              --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
              .panel__cards__item__topic__icon {
                .panel__cards__item__icon {
                  svg {
                    scale: 0.6;
                  }
                }
              }
              .panel__cards__item__body {
                justify-content: center !important;
                gap: 2.5px !important;
                .currency__exchange__result__section {
                  display: flex;
                  scale: 0.85;
                  flex-direction: column;
                  gap: 1px;
                  .currency__exchange__topic {
                    display: flex;
                    height: fit-content;
                    width: 100%;
                    align-items: center;
                    justify-content: center;
                    gap: 5px;
                    .currency__exchange__topic__icon {
                      width: 15px;
                      color: var(--color-white);
                    }
                    .currency__exchange__topic__unit {
                      font-family: kalameh-bold;
                      font-size: 14px;
                      color: var(--color-white);
                    }
                  }
                  .currency__exchange__result {
                    display: flex;
                    height: fit-content;
                    width: 100%;
                    align-items: center;
                    justify-content: space-between;
                    gap: 5px;
                    border-radius: 5px;
                    background-color: color-mix(in srgb, #000 25%, transparent);
                    @supports (color: color-mix(in lab, red, red)) {
                      background-color: color-mix(in oklab, var(--color-black) 25%, transparent);
                    }
                    padding-inline: 10px;
                    padding-block: 1px;
                    .currency__exchange__result__number {
                      display: flex;
                      align-items: center;
                      padding-top: 2px;
                      font-family: kalameh-bold;
                      font-size: 14px;
                      --tw-tracking: 2px;
                      letter-spacing: 2px;
                      color: var(--color-white);
                      text-shadow: 0 0 5px var(--tw-text-shadow-color, #00000075);
                    }
                    .currency__exchange__result__icon {
                      width: 17.5px;
                      color: var(--color-white);
                    }
                  }
                }
              }
            }
          }
        }
        .user__dashboard__main__panel__personal__info__section {
          display: flex;
          height: 100%;
          width: 100%;
          padding-bottom: 15px;
          .user__dashboard__main__panel__personal__info {
            display: flex;
            height: 100%;
            width: 100%;
            flex-direction: column;
            border-radius: 10px;
            --tw-gradient-position: to top right;
            @supports (background-image: linear-gradient(in lab, red, red)) {
              --tw-gradient-position: to top right in oklab;
            }
            background-image: linear-gradient(var(--tw-gradient-stops));
            --tw-gradient-from: #005ac8;
            --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
            --tw-gradient-to: #00d1e0;
            --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
            --tw-shadow: 0 0 10px var(--tw-shadow-color, #00000050);
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
            @media (prefers-color-scheme: dark) {
              --tw-gradient-from: #141E30;
              --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
            }
            @media (prefers-color-scheme: dark) {
              --tw-gradient-to: #243B55;
              --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
            }
            @media (prefers-color-scheme: dark) {
              --tw-shadow: 0 0 10px var(--tw-shadow-color, #000000c0);
              box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
            }
            .user__dashboard__main__panel__personal__info__header {
              margin-inline: auto;
              margin-top: 15px;
              display: flex;
              height: 60px;
              min-height: 60px;
              width: calc(100% - 30px);
              align-items: center;
              justify-content: center;
              border-radius: 7.5px;
              background-color: #2b2b2b;
              --tw-shadow: 0 0 5px var(--tw-shadow-color, #00000025);
              box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
              @media (prefers-color-scheme: dark) {
                background-color: #005ac8;
              }
              .user__dashboard__main__panel__personal__info__header__topic {
                display: flex;
                height: 100%;
                width: fit-content;
                align-items: center;
                justify-content: center;
                font-family: kalameh-bold;
                font-size: 25px;
                color: var(--color-white);
              }
            }
            .user__dashboard__main__panel__personal__info__body {
              margin-top: 5px;
              display: flex;
              height: fit-content;
              width: 100%;
              flex-direction: column;
              justify-content: flex-start;
              gap: 17.5px;
              padding: 15px;
              scrollbar-width: none;
              -ms-overflow-style: none;
              &::-webkit-scrollbar {
                display: none !important;
              }
              .personal__info__item {
                display: flex;
                height: 100%;
                width: 100%;
                flex-direction: column;
                justify-content: space-between;
                gap: 17.5px;
                @media (width >= 768px) {
                  flex-direction: row;
                }
                .personal__info__sub__item {
                  position: relative;
                  display: flex;
                  height: 60px;
                  width: 100%;
                  flex-direction: column;
                  border-radius: 7.5px;
                  background-color: var(--color-white);
                  padding-inline: 15px;
                  --tw-shadow: 0 0 5px var(--tw-shadow-color, #00000050), 0 0 20px var(--tw-shadow-color, #00000020);
                  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
                  @media (width >= 768px) {
                    height: 100%;
                  }
                  @media (width >= 768px) {
                    min-height: 50px;
                  }
                  @media (width >= 768px) {
                    width: calc(1/2 * 100%);
                  }
                  @media (prefers-color-scheme: dark) {
                    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);
                    }
                  }
                  @media (prefers-color-scheme: dark) {
                    --tw-shadow: inset 0 0 5px var(--tw-shadow-color, #00000050), inset 0 0 20px var(--tw-shadow-color, #00000020);
                    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
                  }
                  .personal__info__sub__item__topic {
                    position: absolute;
                    right: 15px;
                    height: fit-content;
                    width: fit-content;
                    --tw-translate-y: -50%;
                    translate: var(--tw-translate-x) var(--tw-translate-y);
                    border-radius: 5px;
                    background-color: #2b2b2b;
                    padding-inline: 10px;
                    padding-block: 2.5px;
                    --tw-shadow: 0 0 5px var(--tw-shadow-color, #00000050), 0 0 20px var(--tw-shadow-color, #00000020);
                    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
                    @media (prefers-color-scheme: dark) {
                      background-color: #005ac8;
                    }
                    p {
                      font-family: kalameh-bold;
                      font-size: 11px;
                      color: var(--color-white);
                    }
                  }
                  .personal__info__sub__item__data {
                    margin-block: auto;
                    display: flex;
                    height: 100%;
                    width: 100%;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                    font-family: kalameh-medium;
                    font-size: 17.5px;
                    color: #2b2b2b;
                    @media (prefers-color-scheme: dark) {
                      color: var(--color-white);
                    }
                  }
                }
              }
              .adress__item {
                height: 125px !important;
                width: 100% !important;
                @media (width >= 1232px) {
                  height: auto !important;
                }
              }
            }
          }
        }
      }
    }
  }
}
.about__page__main {
  display: flex;
  height: fit-content;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 50px;
  .about__page__hero {
    position: relative;
    display: flex;
    height: 200px;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    --tw-gradient-position: 145deg,#0055ff,#005ac8;
    background-image: linear-gradient(var(--tw-gradient-stops,145deg,#0055ff,#005ac8));
    padding: 25px 25px;
    --tw-inset-shadow: inset 0 4px 20px -1px var(--tw-inset-shadow-color, #00000025),inset  0 -4px 20px -1px var(--tw-inset-shadow-color, #00000025);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    @media (width >= 768px) {
      height: 300px;
    }
    .about__page__hero__logo {
      z-index: 2;
      margin-bottom: 20px;
      display: flex;
      width: 100%;
      max-width: 750px;
      flex-direction: row-reverse;
      align-items: center;
      justify-content: center;
      gap: 20px;
      .about__page__hero__logo__typo {
        width: 81%;
        --tw-drop-shadow-alpha: 25%;
        --tw-drop-shadow-size: drop-shadow(0 9px 7px var(--tw-drop-shadow-color, oklab(from rgb(0 0 0 / 0.1) l a b / 25%)));
        --tw-drop-shadow: var(--tw-drop-shadow-size);
        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,);
      }
      .about__page__hero__logo__main {
        width: 16%;
        --tw-translate-y: -10px;
        translate: var(--tw-translate-x) var(--tw-translate-y);
        --tw-drop-shadow-alpha: 40%;
        --tw-drop-shadow-size: drop-shadow(0 9px 7px var(--tw-drop-shadow-color, oklab(from rgb(0 0 0 / 0.1) l a b / 40%)));
        --tw-drop-shadow: var(--tw-drop-shadow-size);
        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,);
      }
    }
    .about__page__hero__text {
      position: absolute;
      bottom: calc(var(--spacing) * 0);
      display: flex;
      height: 75px;
      width: 90%;
      max-width: 750px;
      --tw-translate-y: 50%;
      translate: var(--tw-translate-x) var(--tw-translate-y);
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      border-style: var(--tw-border-style);
      border-width: 3px;
      border-color: #d9e6ec;
      background-color: #e8f1f2;
      padding: 10px;
      --tw-shadow: 0 0 10px var(--tw-shadow-color, #2200ff25);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      .about__page__hero__text__p {
        display: flex;
        --tw-gradient-position: to right in oklab;
        background-image: linear-gradient(var(--tw-gradient-stops));
        --tw-gradient-from: #002e66;
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
        --tw-gradient-to: #0067b1;
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
        background-clip: text;
        text-align: center;
        font-family: kalameh-black;
        font-size: 25px;
        --tw-leading: 45px;
        line-height: 45px;
        color: transparent;
        -webkit-user-select: none;
        user-select: none;
        @media (width >= 768px) {
          font-size: 30px;
        }
      }
    }
  }
  .about__page__description {
    margin-top: 50px;
    display: flex;
    height: fit-content;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding-bottom: 50px;
    @media (width >= 768px) {
      padding-bottom: 0px;
    }
    .about__page__description__section {
      display: flex;
      height: 100%;
      width: 90%;
      max-width: 1400px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 20px;
      @media (width >= 768px) {
        flex-direction: row-reverse;
      }
      @media (width >= 768px) {
        gap: 40px;
      }
      @media (width >= 768px) {
        padding-block: 50px;
      }
      .about__page__description__icon {
        perspective: 100px;
        perspective-origin: 50% 50%;
        height: fit-content;
        width: 100%;
        --tw-drop-shadow-size: drop-shadow(0 20px 20px var(--tw-drop-shadow-color, #005ac825));
        --tw-drop-shadow: var(--tw-drop-shadow-size);
        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,);
        @media (width >= 768px) {
          width: 40%;
        }
      }
      .about__page__description__text {
        display: flex;
        height: fit-content;
        width: 100%;
        flex-direction: column;
        gap: 20px;
        @media (width >= 768px) {
          width: 60%;
        }
        @media (width >= 768px) {
          gap: 10px;
        }
        @media (width >= 1024px) {
          gap: 20px;
        }
        .about__page__description__text__title {
          text-align: center;
          font-family: kalameh-black;
          font-size: 30px;
          @media (width >= 768px) {
            font-size: 20px;
          }
          @media (width >= 1024px) {
            font-size: 25px;
          }
          @media (width >= 1232px) {
            font-size: 30px;
          }
        }
        .about__page__description__text__text {
          display: flex;
          width: 100%;
          flex-direction: column;
          gap: 10px;
          text-align: justify;
          font-family: kalameh-medium;
          @media (width >= 1024px) {
            gap: 15px;
          }
          .about__page__description__text__text__title {
            text-align: center;
            font-family: kalameh-black;
            font-size: 20px;
            color: #01205D;
            @media (width >= 768px) {
              font-size: 15px;
            }
            @media (width >= 1024px) {
              font-size: 17.5px;
            }
            @media (width >= 1232px) {
              font-size: 20px;
            }
          }
          .about__page__description__text__text__dsc {
            text-align: center;
            @media (width >= 768px) {
              font-size: 12.5px;
            }
            @media (width >= 1024px) {
              font-size: 15px;
            }
            @media (width >= 1232px) {
              font-size: 17.5px;
            }
          }
        }
      }
    }
  }
  .about__page__why {
    display: flex;
    height: fit-content;
    width: 100%;
    align-items: center;
    justify-content: center;
    .about__page__why__section {
      display: flex;
      height: 100%;
      width: 90%;
      max-width: 1400px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 50px;
      .about__page__why__title p {
        display: flex;
        gap: 10px;
        font-family: kalameh-black;
        font-size: 15px;
        text-wrap: nowrap;
        color: #01205D;
        --tw-drop-shadow-alpha: 10%;
        --tw-drop-shadow-size: drop-shadow(0 9px 7px var(--tw-drop-shadow-color, oklab(from rgb(0 0 0 / 0.1) l a b / 10%)));
        --tw-drop-shadow: var(--tw-drop-shadow-size);
        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,);
        @media (width >= 320px) {
          font-size: 20px;
        }
        @media (width >= 768px) {
          font-size: 30px;
        }
        b {
          font-family: kalameh-black;
          font-size: 17.5px;
          color: #005ac8;
          --tw-duration: 200ms;
          transition-duration: 200ms;
          &:hover {
            @media (hover: hover) {
              color: #0073ff;
            }
          }
          @media (width >= 320px) {
            font-size: 22.5px;
          }
          @media (width >= 768px) {
            font-size: 32.5px;
          }
        }
        span {
          display: flex;
          rotate: -10deg;
          font-family: kalameh-black;
          font-size: 20px;
          color: #005ac8;
          @media (width >= 320px) {
            font-size: 25px;
          }
          @media (width >= 768px) {
            font-size: 35px;
          }
        }
      }
      .about__page__why__proof {
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        @media (width >= 768px) {
          flex-direction: row;
        }
        .about__page__quality, .about__page__time, .about__page__global {
          position: relative;
          margin-top: 50px;
          display: flex;
          height: fit-content;
          width: 100%;
          flex-direction: column;
          justify-content: center;
          gap: 10px;
          border-radius: 10px;
          border-style: var(--tw-border-style);
          border-width: 3px;
          border-color: #d9e6ec;
          background-color: #e8f1f2;
          padding: 60px 20px 20px;
          text-align: center;
          font-family: kalameh-medium;
          --tw-shadow: 0 0 10px var(--tw-shadow-color, #2200ff25);
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
          @media (width >= 768px) {
            width: 50%;
          }
          @media (width >= 1232px) {
            width: calc(100% * 1 / 3);
          }
          .about__page__quality__icon {
            position: absolute;
            top: -60px;
            left: 50%;
            height: 115px;
            width: 115px;
            --tw-translate-x: -50%;
            translate: var(--tw-translate-x) var(--tw-translate-y);
            border-radius: calc(infinity * 1px);
            border-style: var(--tw-border-style);
            border-width: 3px;
            border-color: #d9e6ec;
            --tw-gradient-position: 145deg,#d1d9da,#f8ffff;
            background-image: linear-gradient(var(--tw-gradient-stops,145deg,#d1d9da,#f8ffff));
            padding: 15px;
            --tw-shadow: 0 5px 20px var(--tw-shadow-color, #00000020);
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
            svg {
              scale: 0.9;
            }
          }
          .about__page__time__icon {
            position: absolute;
            top: -60px;
            left: 50%;
            height: 115px;
            width: 115px;
            --tw-translate-x: -50%;
            translate: var(--tw-translate-x) var(--tw-translate-y);
            border-radius: calc(infinity * 1px);
            border-style: var(--tw-border-style);
            border-width: 3px;
            border-color: #d9e6ec;
            --tw-gradient-position: 145deg,#d1d9da,#f8ffff;
            background-image: linear-gradient(var(--tw-gradient-stops,145deg,#d1d9da,#f8ffff));
            padding: 15px;
            --tw-shadow: 0 5px 20px var(--tw-shadow-color, #00000020);
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
          }
          .about__page__global__icon {
            position: absolute;
            top: -60px;
            left: 50%;
            height: 115px;
            width: 115px;
            --tw-translate-x: -50%;
            translate: var(--tw-translate-x) var(--tw-translate-y);
            border-radius: calc(infinity * 1px);
            border-style: var(--tw-border-style);
            border-width: 3px;
            border-color: #d9e6ec;
            --tw-gradient-position: 145deg,#d1d9da,#f8ffff;
            background-image: linear-gradient(var(--tw-gradient-stops,145deg,#d1d9da,#f8ffff));
            padding: 15px;
            --tw-shadow: 0 5px 20px var(--tw-shadow-color, #00000020);
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
            svg {
              margin-right: 3.5px;
              scale: 0.9;
            }
          }
          .about__page__quality__topic, .about__page__time__topic, .about__page__global__topic {
            height: 55px;
            border-radius: 10px;
            border-style: var(--tw-border-style);
            border-width: 5px;
            border-color: #0073ff;
            --tw-gradient-position: 145deg,#0058E2,#005ACA;
            background-image: linear-gradient(var(--tw-gradient-stops,145deg,#0058E2,#005ACA));
            padding: 5px;
            font-family: kalameh-bold;
            font-size: 25px;
            color: var(--color-white);
            --tw-inset-shadow: inset 0 0 7.5px var(--tw-inset-shadow-color, #00000066);
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
            -webkit-user-select: none;
            user-select: none;
            @media (width >= 768px) {
              font-size: 15px;
            }
            @media (width >= 768px) {
              --tw-leading: 35px;
              line-height: 35px;
            }
            @media (width >= 896px) {
              font-size: 20px;
            }
            @media (width >= 1024px) {
              font-size: 25px;
            }
          }
          .about__page__global__topic {
            @media (width >= 768px) {
              padding: 7.5px;
            }
            @media (width >= 768px) {
              font-family: kalameh-black;
            }
            @media (width >= 768px) {
              font-size: 12.5px;
            }
            @media (width >= 896px) {
              font-size: 16px;
            }
            @media (width >= 1024px) {
              font-family: kalameh-bold;
            }
            @media (width >= 1024px) {
              font-size: 19px;
            }
            @media (width >= 1232px) {
              font-size: 22.5px;
            }
            @media (width >= 1232px) {
              --tw-leading: 30px;
              line-height: 30px;
            }
          }
          .about__page__quality__proof, .about__page__time__proof, .about__page__global__proof {
            display: flex;
            height: fit-content;
            width: 100%;
          }
        }
      }
    }
  }
  .about__page__timeline {
    margin-top: 50px;
    display: flex;
    height: 200px;
    width: 100%;
    align-items: center;
    justify-content: center;
    background-color: var(--color-sky-500);
    .about__page__timeline__section {
      display: flex;
      height: 100%;
      width: 90%;
      max-width: 1400px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: var(--color-rose-500);
    }
  }
}
.footer__main {
  .footer__top__section {
    display: flex;
    height: fit-content;
    width: 100%;
    align-items: center;
    justify-content: center;
    border-top-style: var(--tw-border-style);
    border-top-width: 4px;
    border-color: #d9e6ec;
    background-color: #E8F1F2;
    padding-inline: 20px;
    padding-bottom: 20px;
    @media (width >= 768px) {
      padding-block: 20px;
    }
    .footer__top {
      display: flex;
      width: 100%;
      flex-direction: column-reverse;
      justify-content: center;
      gap: 25px;
      @media (width >= 768px) {
        max-width: 1440px;
      }
      @media (width >= 768px) {
        flex-direction: row;
      }
      @media (width >= 768px) {
        gap: 15px;
      }
      @media (width >= 768px) {
        padding-inline: 20px;
      }
      @media (width >= 896px) {
        gap: 25px;
      }
      .footer__top__social__nav {
        display: flex;
        flex-direction: column;
        gap: 25px;
        @media (width >= 768px) {
          margin-block: 30px;
        }
        @media (width >= 768px) {
          width: calc(100% / 3);
        }
        @media (width >= 768px) {
          flex-direction: row;
        }
        @media (width >= 768px) {
          gap: 15px;
        }
        .footer__top__social__section {
          display: flex;
          height: 90px;
          width: 100%;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          @media (width >= 768px) {
            height: 100%;
          }
          @media (width >= 768px) {
            width: fit-content;
          }
          @media (width >= 896px) {
            margin-left: 20px;
          }
          .footer__top__social__items {
            display: flex;
            height: 100%;
            width: 100%;
            flex-direction: row;
            justify-content: space-between;
            @media (width >= 768px) {
              width: fit-content;
            }
            @media (width >= 768px) {
              flex-direction: column;
            }
            .footer__top__social__instagram__section {
              position: relative;
              display: flex;
              flex-direction: column;
              gap: 5px;
              .footer__top__social__instagram__visible {
                position: relative;
                display: flex;
                height: 60px;
                width: 60px;
                overflow: hidden;
                border-radius: 15px;
                --tw-gradient-position: 145deg,#ffffff,#d1d9da;
                background-image: linear-gradient(var(--tw-gradient-stops,145deg,#ffffff,#d1d9da));
                --tw-shadow: 3px 3px 10px var(--tw-shadow-color, #aeb5b680), -3px -3px 10px var(--tw-shadow-color, #ffffffbb);
                box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
                @media (width >= 768px) {
                  height: 40px;
                }
                @media (width >= 768px) {
                  width: 40px;
                }
                @media (width >= 896px) {
                  height: 60px;
                }
                @media (width >= 896px) {
                  width: 60px;
                }
                .footer__top__social__instagram__svg {
                  z-index: 50;
                  margin: auto;
                  width: 40px;
                  color: #001f5d;
                  --tw-invert: invert(0%);
                  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,);
                  --tw-duration: 300ms;
                  transition-duration: 300ms;
                  @media (width >= 768px) {
                    width: 25px;
                  }
                  @media (width >= 896px) {
                    width: 40px;
                  }
                }
                .footer__top__social__instagram__hover__bg {
                  position: absolute;
                  right: calc(50% - 50px);
                  bottom: calc(var(--spacing) * 0);
                  height: 100px;
                  width: 100px;
                  --tw-translate-y: 150%;
                  translate: var(--tw-translate-x) var(--tw-translate-y);
                  border-radius: calc(infinity * 1px);
                  --tw-gradient-position: to bottom left;
                  @supports (background-image: linear-gradient(in lab, red, red)) {
                    --tw-gradient-position: to bottom left in oklab;
                  }
                  background-image: linear-gradient(var(--tw-gradient-stops));
                  --tw-gradient-from: #833AB2D9;
                  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
                  --tw-gradient-via: #FD1D1DD9;
                  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
                  --tw-gradient-stops: var(--tw-gradient-via-stops);
                  --tw-gradient-to: #FCB045D9;
                  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
                  --tw-blur: blur(15px);
                  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,);
                  --tw-duration: 600ms;
                  transition-duration: 600ms;
                }
              }
              .footer__top__social__instagram__invisible {
                position: absolute;
                bottom: calc(var(--spacing) * 0);
                display: flex;
                height: 25px;
                width: 85px;
                --tw-translate-x: 100%;
                translate: var(--tw-translate-x) var(--tw-translate-y);
                align-items: center;
                justify-content: center;
                border-radius: calc(infinity * 1px);
                --tw-gradient-position: to bottom left;
                @supports (background-image: linear-gradient(in lab, red, red)) {
                  --tw-gradient-position: to bottom left in oklab;
                }
                background-image: linear-gradient(var(--tw-gradient-stops));
                --tw-gradient-from: #833AB2D9;
                --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
                --tw-gradient-via: #FD1D1DD9;
                --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
                --tw-gradient-stops: var(--tw-gradient-via-stops);
                --tw-gradient-to: #FCB045D9;
                --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
                font-family: kalameh-bold;
                font-size: 13px;
                color: var(--color-white);
                opacity: 0%;
                --tw-duration: 500ms;
                transition-duration: 500ms;
                --tw-ease: var(--ease-in-out);
                transition-timing-function: var(--ease-in-out);
                @media (width >= 768px) {
                  height: 17.5px;
                }
                @media (width >= 768px) {
                  width: 65px;
                }
                @media (width >= 768px) {
                  --tw-translate-y: calc(100% + 10px);
                  translate: var(--tw-translate-x) var(--tw-translate-y);
                }
                @media (width >= 768px) {
                  font-size: 10px;
                }
                @media (width >= 896px) {
                  height: 25px;
                }
                @media (width >= 896px) {
                  width: 85px;
                }
                @media (width >= 896px) {
                  font-size: 13px;
                }
              }
            }
            .footer__top__social__telegram__section {
              position: relative;
              display: flex;
              flex-direction: column;
              gap: 5px;
              .footer__top__social__telegram__visible {
                position: relative;
                display: flex;
                height: 60px;
                width: 60px;
                overflow: hidden;
                border-radius: 15px;
                --tw-gradient-position: 145deg,#ffffff,#d1d9da;
                background-image: linear-gradient(var(--tw-gradient-stops,145deg,#ffffff,#d1d9da));
                --tw-shadow: 3px 3px 10px var(--tw-shadow-color, #aeb5b680), -3px -3px 10px var(--tw-shadow-color, #ffffffbb);
                box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
                @media (width >= 768px) {
                  height: 40px;
                }
                @media (width >= 768px) {
                  width: 40px;
                }
                @media (width >= 896px) {
                  height: 60px;
                }
                @media (width >= 896px) {
                  width: 60px;
                }
                .footer__top__social__telegram__svg {
                  z-index: 50;
                  margin: auto;
                  width: 40px;
                  color: #001f5d;
                  --tw-invert: invert(0%);
                  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,);
                  --tw-duration: 300ms;
                  transition-duration: 300ms;
                  @media (width >= 768px) {
                    width: 25px;
                  }
                  @media (width >= 896px) {
                    width: 40px;
                  }
                }
                .footer__top__social__telegram__hover__bg {
                  position: absolute;
                  right: calc(50% - 50px);
                  bottom: calc(var(--spacing) * 0);
                  height: 100px;
                  width: 100px;
                  --tw-translate-y: 150%;
                  translate: var(--tw-translate-x) var(--tw-translate-y);
                  border-radius: calc(infinity * 1px);
                  background-color: #32a5d8;
                  --tw-blur: blur(15px);
                  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,);
                  --tw-duration: 600ms;
                  transition-duration: 600ms;
                }
              }
              .footer__top__social__telegram__invisible {
                position: absolute;
                bottom: calc(var(--spacing) * 0);
                display: flex;
                height: 25px;
                width: 80px;
                --tw-translate-x: 100%;
                translate: var(--tw-translate-x) var(--tw-translate-y);
                align-items: center;
                justify-content: center;
                border-radius: calc(infinity * 1px);
                background-color: #32a5d8;
                font-family: kalameh-bold;
                font-size: 13px;
                color: var(--color-white);
                opacity: 0%;
                --tw-duration: 500ms;
                transition-duration: 500ms;
                --tw-ease: var(--ease-in-out);
                transition-timing-function: var(--ease-in-out);
                @media (width >= 768px) {
                  height: 17.5px;
                }
                @media (width >= 768px) {
                  width: 60px;
                }
                @media (width >= 768px) {
                  --tw-translate-y: calc(100% + 10px);
                  translate: var(--tw-translate-x) var(--tw-translate-y);
                }
                @media (width >= 768px) {
                  font-size: 10px;
                }
                @media (width >= 896px) {
                  height: 25px;
                }
                @media (width >= 896px) {
                  width: 80px;
                }
                @media (width >= 896px) {
                  font-size: 13px;
                }
              }
            }
            .footer__top__social__aparat__section {
              position: relative;
              display: flex;
              flex-direction: column;
              gap: 5px;
              .footer__top__social__aparat__visible {
                position: relative;
                display: flex;
                height: 60px;
                width: 60px;
                overflow: hidden;
                border-radius: 15px;
                --tw-gradient-position: 145deg,#ffffff,#d1d9da;
                background-image: linear-gradient(var(--tw-gradient-stops,145deg,#ffffff,#d1d9da));
                --tw-shadow: 3px 3px 10px var(--tw-shadow-color, #aeb5b680), -3px -3px 10px var(--tw-shadow-color, #ffffffbb);
                box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
                @media (width >= 768px) {
                  height: 40px;
                }
                @media (width >= 768px) {
                  width: 40px;
                }
                @media (width >= 896px) {
                  height: 60px;
                }
                @media (width >= 896px) {
                  width: 60px;
                }
                .footer__top__social__aparat__svg {
                  z-index: 50;
                  margin: auto;
                  width: 40px;
                  color: #001f5d;
                  --tw-invert: invert(0%);
                  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,);
                  --tw-duration: 300ms;
                  transition-duration: 300ms;
                  @media (width >= 768px) {
                    width: 25px;
                  }
                  @media (width >= 896px) {
                    width: 40px;
                  }
                }
                .footer__top__social__aparat__hover__bg {
                  position: absolute;
                  right: calc(50% - 50px);
                  bottom: calc(var(--spacing) * 0);
                  height: 100px;
                  width: 100px;
                  --tw-translate-y: 150%;
                  translate: var(--tw-translate-x) var(--tw-translate-y);
                  border-radius: calc(infinity * 1px);
                  background-color: #e61358;
                  --tw-blur: blur(15px);
                  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,);
                  --tw-duration: 600ms;
                  transition-duration: 600ms;
                }
              }
              .footer__top__social__aparat__invisible {
                position: absolute;
                bottom: calc(var(--spacing) * 0);
                display: flex;
                height: 25px;
                width: 80px;
                --tw-translate-x: 100%;
                translate: var(--tw-translate-x) var(--tw-translate-y);
                align-items: center;
                justify-content: center;
                border-radius: calc(infinity * 1px);
                background-color: #e61358;
                font-family: kalameh-bold;
                font-size: 13px;
                color: var(--color-white);
                opacity: 0%;
                --tw-duration: 500ms;
                transition-duration: 500ms;
                --tw-ease: var(--ease-in-out);
                transition-timing-function: var(--ease-in-out);
                @media (width >= 768px) {
                  height: 17.5px;
                }
                @media (width >= 768px) {
                  width: 60px;
                }
                @media (width >= 768px) {
                  --tw-translate-y: calc(100% + 10px);
                  translate: var(--tw-translate-x) var(--tw-translate-y);
                }
                @media (width >= 768px) {
                  font-size: 10px;
                }
                @media (width >= 896px) {
                  height: 25px;
                }
                @media (width >= 896px) {
                  width: 80px;
                }
                @media (width >= 896px) {
                  font-size: 13px;
                }
              }
            }
            .footer__top__social__eitaa__section {
              position: relative;
              display: flex;
              flex-direction: column;
              gap: 5px;
              .footer__top__social__eitaa__visible {
                position: relative;
                display: flex;
                height: 60px;
                width: 60px;
                overflow: hidden;
                border-radius: 15px;
                --tw-gradient-position: 145deg,#ffffff,#d1d9da;
                background-image: linear-gradient(var(--tw-gradient-stops,145deg,#ffffff,#d1d9da));
                --tw-shadow: 3px 3px 10px var(--tw-shadow-color, #aeb5b680), -3px -3px 10px var(--tw-shadow-color, #ffffffbb);
                box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
                @media (width >= 768px) {
                  height: 40px;
                }
                @media (width >= 768px) {
                  width: 40px;
                }
                @media (width >= 896px) {
                  height: 60px;
                }
                @media (width >= 896px) {
                  width: 60px;
                }
                .footer__top__social__eitaa__svg {
                  z-index: 50;
                  margin: auto;
                  width: 40px;
                  color: #001f5d;
                  --tw-invert: invert(0%);
                  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,);
                  --tw-duration: 300ms;
                  transition-duration: 300ms;
                  @media (width >= 768px) {
                    width: 25px;
                  }
                  @media (width >= 896px) {
                    width: 40px;
                  }
                }
                .footer__top__social__eitaa__hover__bg {
                  position: absolute;
                  right: calc(50% - 50px);
                  bottom: calc(var(--spacing) * 0);
                  height: 100px;
                  width: 100px;
                  --tw-translate-y: 150%;
                  translate: var(--tw-translate-x) var(--tw-translate-y);
                  border-radius: calc(infinity * 1px);
                  background-color: #f08008;
                  --tw-blur: blur(15px);
                  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,);
                  --tw-duration: 600ms;
                  transition-duration: 600ms;
                }
              }
              .footer__top__social__eitaa__invisible {
                position: absolute;
                bottom: calc(var(--spacing) * 0);
                display: flex;
                height: 25px;
                width: 75px;
                --tw-translate-x: 100%;
                translate: var(--tw-translate-x) var(--tw-translate-y);
                align-items: center;
                justify-content: center;
                border-radius: calc(infinity * 1px);
                background-color: #f08008;
                font-family: kalameh-bold;
                font-size: 13px;
                color: var(--color-white);
                opacity: 0%;
                --tw-duration: 500ms;
                transition-duration: 500ms;
                --tw-ease: var(--ease-in-out);
                transition-timing-function: var(--ease-in-out);
                @media (width >= 768px) {
                  height: 17.5px;
                }
                @media (width >= 768px) {
                  width: 55px;
                }
                @media (width >= 768px) {
                  --tw-translate-y: calc(100% + 10px);
                  translate: var(--tw-translate-x) var(--tw-translate-y);
                }
                @media (width >= 896px) {
                  height: 25px;
                }
                @media (width >= 896px) {
                  width: 75px;
                }
              }
            }
          }
        }
        .footer__top__nav__section {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          gap: 25px;
          @media (width >= 768px) {
            width: fit-content;
          }
          .footer__top__nav__navigation__section {
            margin-bottom: 20px;
            display: flex;
            justify-content: space-around;
            @media (width >= 768px) {
              justify-content: space-between;
            }
            @media (width >= 768px) {
              gap: 5px;
            }
            @media (width >= 896px) {
              justify-content: space-around;
            }
            .footer__top__nav__navigation__right, .footer__top__nav__navigation__left {
              display: flex;
              flex-direction: column;
              gap: 5px;
              @media (width >= 768px) {
                gap: 15px;
              }
              @media (width >= 896px) {
                gap: 20px;
              }
              .footer__top__nav__navigation__title {
                margin-bottom: 7.5px;
                font-family: kalameh-bold;
                font-size: 17.5px;
                @media (width >= 768px) {
                  font-size: 15px;
                }
                @media (width >= 896px) {
                  font-size: 17.5px;
                }
              }
              .footer__top__nav__navigation__item {
                display: flex;
                align-items: center;
                gap: 5px;
                font-family: kalameh-medium;
                font-size: 12.5px;
                text-wrap: nowrap;
                @media (width >= 768px) {
                  font-size: 10px;
                }
                @media (width >= 896px) {
                  font-size: 12.5px;
                }
                @media (width >= 1440px) {
                  font-size: 15px;
                }
                .footer__top__nav__navigation__item__dot {
                  display: flex;
                  height: 10px;
                  width: 10px;
                  border-radius: calc(infinity * 1px);
                  background-color: #001f5d;
                  --tw-duration: 200ms;
                  transition-duration: 200ms;
                  &:is(:where(.group):hover *) {
                    @media (hover: hover) {
                      --tw-translate-x: -2px;
                      translate: var(--tw-translate-x) var(--tw-translate-y);
                    }
                  }
                }
                .footer__top__nav__navigation__item__p {
                  transform: translateZ(0) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
                  --tw-duration: 300ms;
                  transition-duration: 300ms;
                  &:hover {
                    @media (hover: hover) {
                      scale: 1.025;
                    }
                  }
                  &:hover {
                    @media (hover: hover) {
                      color: #005ac8;
                    }
                  }
                  &:active {
                    scale: 0.925;
                  }
                }
              }
            }
          }
          .footer__top__nav__customer__club {
            display: flex;
            width: 100%;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            border-radius: 7.5px;
            --tw-gradient-position: 145deg,#f8ffff,#d1d9da;
            background-image: linear-gradient(var(--tw-gradient-stops,145deg,#f8ffff,#d1d9da));
            padding: 10px;
            --tw-shadow: 10px 10px 15px var(--tw-shadow-color, #ffffffc0), -10px -10px 15px var(--tw-shadow-color, #d1d9dac0);
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
            .footer__top__nav__customer__club__p {
              text-align: center;
              font-family: kalameh-medium;
              font-size: 12.5px;
              @media (width >= 768px) {
                font-size: 11px;
              }
              .footer__top__nav__customer__club__p__b {
                font-size: 17.5px;
                color: #003f8c;
                @media (width >= 768px) {
                  font-size: 15px;
                }
              }
            }
            .footer__top__nav__customer__club__form__section {
              width: 100%;
              .footer__top__nav__customer__club__form {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                gap: 25px;
                @media (width >= 768px) {
                  gap: 10px;
                }
                .footer__top__nav__customer__club__form__submit {
                  display: flex;
                  width: calc(100% * 1 / 4);
                  cursor: pointer;
                  align-items: center;
                  justify-content: center;
                  border-radius: 7.5px;
                  background-color: #005ac8;
                  padding: 5px;
                  font-family: kalameh-bold;
                  color: var(--color-white);
                  --tw-duration: 200ms;
                  transition-duration: 200ms;
                  &:hover {
                    @media (hover: hover) {
                      scale: 1.025;
                    }
                  }
                  &:hover {
                    @media (hover: hover) {
                      background-color: #003f8c;
                    }
                  }
                  &:active {
                    scale: 0.925;
                  }
                  @media (width >= 768px) {
                    font-size: 12.5px;
                  }
                }
                .footer__top__nav__customer__club__form__input {
                  width: calc(100% * 3 / 4);
                  border-radius: 7.5px;
                  border-style: var(--tw-border-style);
                  border-width: 2px;
                  border-color: #005ac8;
                  background-color: var(--color-white);
                  padding: 5px;
                  padding-inline: 10px;
                  text-align: left;
                  font-family: kalameh-medium;
                  font-size: 15px;
                  color: #002c56;
                  --tw-duration: 200ms;
                  transition-duration: 200ms;
                  &::placeholder {
                    text-align: right;
                  }
                  &::placeholder {
                    font-family: kalameh-regular;
                  }
                  &::placeholder {
                    color: #acb6cf;
                  }
                  &:focus {
                    scale: 1.002;
                  }
                  &:focus {
                    border-color: #67acff;
                  }
                  &:focus {
                    --tw-shadow: 0 0 3px var(--tw-shadow-color, #65aaffae);
                    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
                  }
                  &:focus {
                    --tw-outline-style: none;
                    outline-style: none;
                  }
                  @media (width >= 768px) {
                    font-size: 12.5px;
                  }
                  @media (width >= 768px) {
                    &::placeholder {
                      color: #ffffff;
                    }
                  }
                  @media (width >= 896px) {
                    &::placeholder {
                      color: #acb6cf;
                    }
                  }
                }
              }
            }
          }
        }
      }
      .footer__top__about {
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 25px;
        border-radius: 7.5px;
        --tw-gradient-position: 145deg,#d1d9da,#f8ffff;
        background-image: linear-gradient(var(--tw-gradient-stops,145deg,#d1d9da,#f8ffff));
        padding: 25px;
        --tw-shadow: 10px 10px 15px var(--tw-shadow-color, #d1d9dac0), -10px -10px 15px var(--tw-shadow-color, #ffffffc0);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        @media (width >= 768px) {
          margin-block: 30px;
        }
        @media (width >= 768px) {
          width: calc(100% / 3);
        }
        .footer__top__about__topic {
          position: relative;
          left: 15px;
          font-family: kalameh-bold;
          font-size: 20px;
          color: #001f5d;
          @media (width >= 1440px) {
            font-size: 25px;
          }
          .footer__top__about__topic__span {
            position: absolute;
            top: -25%;
            right: calc(100% + 7.5px);
            font-size: 35px;
            color: #005ac8;
            text-shadow: 0px 1px 5px var(--tw-text-shadow-color, #00bbff70);
            @media (width >= 1440px) {
              top: -5px;
            }
          }
        }
        .footer__top__about__text {
          text-align: justify;
          font-family: kalameh-medium;
          font-size: 12px;
          @media (width >= 1440px) {
            font-size: 14px;
          }
        }
        .footer__top__about__mobile__link {
          height: fit-content;
          width: fit-content;
          align-items: center;
          justify-content: center;
          gap: 5px;
          border-radius: 5px;
          background-color: #005ac8;
          padding-inline: 20px;
          padding-block: 7.5px;
          font-family: kalameh-medium;
          color: var(--color-white);
          transition-property: all;
          transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
          transition-duration: var(--tw-duration, var(--default-transition-duration));
          --tw-ease: var(--ease-in-out);
          transition-timing-function: var(--ease-in-out);
          &:hover {
            @media (hover: hover) {
              scale: 1.025;
            }
          }
          &:hover {
            @media (hover: hover) {
              background-color: #003f8c;
            }
          }
          &:active {
            scale: 0.925;
          }
          @media (width >= 768px) {
            display: none;
          }
        }
      }
      .footer__top__logo__map__seq {
        position: relative;
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: center;
        gap: 25px;
        @media (width >= 768px) {
          width: calc(100% / 3);
        }
        @media (width >= 768px) {
          justify-content: space-between;
        }
        @media (width >= 768px) {
          gap: 10px;
        }
        @media (width >= 768px) {
          padding-block: 30px;
        }
        @media (width >= 768px) {
          padding-bottom: 65px;
        }
        @media (width >= 896px) {
          padding: 30px 0 30px;
        }
        .footer__top__logo {
          position: absolute;
          top: -40px;
          right: 5%;
          display: flex;
          height: 75px;
          width: 90%;
          align-items: center;
          justify-content: center;
          border-radius: 10px;
          border-style: var(--tw-border-style);
          border-width: 5px;
          border-color: #0073ff;
          background-color: #005ac8;
          --tw-inset-shadow: inset 0 0 7.5px var(--tw-inset-shadow-color, #00000066);
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
          @media (width >= 768px) {
            top: -62.5px;
          }
          .footer__top__logo__svg {
            width: 75%;
            max-width: 225px;
          }
        }
        .footer__top__map__iframe__main {
          display: flex;
          width: 100%;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 25px;
          .footer__top__map__iframe__section {
            position: relative;
            margin-top: 50px;
            height: 250px;
            width: 100%;
            border-radius: 10px;
            border-style: var(--tw-border-style) !important;
            border-width: 5px !important;
            border-color: #0073ff !important;
            --tw-shadow: 0 0 5px var(--tw-shadow-color, #00000066);
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
            @media (width >= 768px) {
              margin-top: calc(var(--spacing) * 0);
            }
            .footer__top__map__iframe {
              height: 100%;
              width: 100%;
              border-radius: 5px;
            }
            .footer__top__map__iframe__balad__neshan {
              position: absolute;
              bottom: 10.75px;
              left: 59.75px;
              display: flex;
              gap: 7.5px;
              .footer__top__map__iframe__balad {
                display: flex;
                height: 41px;
                width: 41px;
                align-items: center;
                justify-content: space-between;
                gap: 6px;
                overflow: hidden;
                border-radius: 7.5px;
                border-style: var(--tw-border-style);
                border-width: 2px;
                border-color: var(--color-white);
                background-color: var(--color-sky-700);
                padding-right: 6px;
                padding-left: 4px;
                --tw-shadow: 0 0 3px var(--tw-shadow-color, #00000066);
                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;
                --tw-ease: var(--ease-in-out);
                transition-timing-function: var(--ease-in-out);
                .footer__top__map__iframe__balad__svg {
                  height: 30px;
                  min-width: 30px;
                }
                .footer__top__map__iframe__balad__text {
                  font-family: kalameh-bold;
                  font-size: 12px;
                  text-wrap: nowrap;
                  color: var(--color-white);
                  opacity: 0%;
                  transition-property: all;
                  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
                  transition-duration: var(--tw-duration, var(--default-transition-duration));
                  transition-delay: 150ms;
                  --tw-duration: 250ms;
                  transition-duration: 250ms;
                  --tw-ease: var(--ease-in-out);
                  transition-timing-function: var(--ease-in-out);
                }
              }
              .footer__top__map__iframe__neshan {
                display: flex;
                height: 41px;
                width: 41px;
                align-items: center;
                justify-content: space-between;
                gap: 6px;
                overflow: hidden;
                border-radius: 7.5px;
                border-style: var(--tw-border-style);
                border-width: 2px;
                border-color: var(--color-white);
                background-color: var(--color-sky-700);
                padding-right: 6px;
                padding-left: 4px;
                --tw-shadow: 0 0 3px var(--tw-shadow-color, #00000066);
                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;
                --tw-ease: var(--ease-in-out);
                transition-timing-function: var(--ease-in-out);
                .footer__top__map__iframe__neshan__svg {
                  height: 30px;
                  min-width: 30px;
                  border-radius: 5px;
                  background-color: var(--color-white);
                  padding: 2px;
                }
                .footer__top__map__iframe__neshan__text {
                  font-family: kalameh-bold;
                  font-size: 12px;
                  text-wrap: nowrap;
                  color: var(--color-white);
                  opacity: 0%;
                  transition-property: all;
                  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
                  transition-duration: var(--tw-duration, var(--default-transition-duration));
                  transition-delay: 150ms;
                  --tw-duration: 250ms;
                  transition-duration: 250ms;
                  --tw-ease: var(--ease-in-out);
                  transition-timing-function: var(--ease-in-out);
                }
              }
            }
          }
        }
        .footer__top__map__adress {
          width: 90%;
          text-align: center;
          .footer__top__map__adress__topic {
            font-family: kalameh-bold;
            font-size: 18px;
            color: var(--color-black);
          }
          .footer__top__map__adress__text {
            font-family: kalameh-medium;
            font-size: 14px;
            color: var(--color-black);
          }
        }
        .footer__top__map__call {
          display: flex;
          height: fit-content;
          width: fit-content;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          gap: 5px;
          border-radius: 5px;
          background-color: #005ac8;
          padding-inline: 10px;
          padding-top: 7.5px;
          padding-bottom: 5px;
          font-family: kalameh-medium;
          color: var(--color-white);
          transition-property: all;
          transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
          transition-duration: var(--tw-duration, var(--default-transition-duration));
          --tw-ease: var(--ease-in-out);
          transition-timing-function: var(--ease-in-out);
          &:hover {
            @media (hover: hover) {
              scale: 1.025;
            }
          }
          &:hover {
            @media (hover: hover) {
              background-color: #003f8c;
            }
          }
          &:active {
            scale: 0.925;
          }
          .footer__top__map__call__svg {
            margin-bottom: 2px;
            width: 17.5px;
          }
        }
        .footer__top__seq {
          display: flex;
          height: 75px;
          width: 90%;
          align-items: center;
          justify-content: space-between;
          @media (width >= 768px) {
            position: absolute;
          }
          @media (width >= 768px) {
            bottom: -52.5px;
          }
          @media (width >= 768px) {
            height: 65px;
          }
          @media (width >= 896px) {
            bottom: -58px;
          }
          @media (width >= 896px) {
            height: 75px;
          }
          .footer__top__seq__majazi {
            position: relative;
            height: 75px;
            width: 75px;
            perspective: 250px;
            @media (width >= 768px) {
              height: 65px;
            }
            @media (width >= 768px) {
              width: 65px;
            }
            @media (width >= 896px) {
              height: 75px;
            }
            @media (width >= 896px) {
              width: 75px;
            }
            .footer__top__seq__majazi__front {
              display: flex;
              height: 75px;
              width: 75px;
              overflow: hidden;
              border-radius: 7.5px;
              border-style: var(--tw-border-style);
              border-width: 5px;
              border-color: #001f5d;
              background-color: #00bbff;
              --tw-shadow: 0 0 5px var(--tw-shadow-color, #00000066);
              box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
              transition-delay: 50ms;
              --tw-duration: 600ms;
              transition-duration: 600ms;
              backface-visibility: hidden;
              @media (width >= 768px) {
                height: 65px;
              }
              @media (width >= 768px) {
                width: 65px;
              }
              @media (width >= 896px) {
                height: 75px;
              }
              @media (width >= 896px) {
                width: 75px;
              }
              .footer__top__seq__majazi__front__text {
                margin: auto 0;
                display: flex;
                height: fit-content;
                width: fit-content;
                cursor: default;
                text-align: center;
                font-family: kalameh-bold;
                font-size: 11px;
                color: var(--color-white);
                -webkit-user-select: none;
                user-select: none;
                text-shadow: 0 1.5px 7.5px var(--tw-text-shadow-color, #000000E6);
                @media (width >= 768px) {
                  font-size: 10px;
                }
                @media (width >= 896px) {
                  font-size: 11px;
                }
              }
            }
            .footer__top__seq__majazi__back {
              position: absolute;
              top: calc(var(--spacing) * 0);
              display: flex;
              height: 75px;
              width: 75px;
              --tw-rotate-y: rotateY(180deg);
              transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
              cursor: pointer !important;
              align-items: center;
              justify-content: center;
              border-radius: 7.5px;
              border-style: var(--tw-border-style);
              border-width: 5px;
              border-color: #00bafe;
              background-color: var(--color-white);
              --tw-shadow: 0 0 10px var(--tw-shadow-color, #00BAFE80);
              box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
              transition-delay: 50ms;
              --tw-duration: 600ms;
              transition-duration: 600ms;
              backface-visibility: hidden;
              @media (width >= 768px) {
                height: 65px;
              }
              @media (width >= 768px) {
                width: 65px;
              }
              @media (width >= 896px) {
                height: 75px;
              }
              @media (width >= 896px) {
                width: 75px;
              }
              .footer__top__seq__majazi__back__img {
                width: 65px;
                --tw-blur: blur(1.5px);
                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,);
                --tw-saturate: saturate(0%);
                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,);
                @media (width >= 768px) {
                  width: 55px;
                }
                @media (width >= 896px) {
                  width: 65px;
                }
              }
            }
          }
          .footer__top__seq__saman {
            position: relative;
            height: 75px;
            width: 75px;
            perspective: 250px;
            @media (width >= 768px) {
              height: 65px;
            }
            @media (width >= 768px) {
              width: 65px;
            }
            @media (width >= 896px) {
              height: 75px;
            }
            @media (width >= 896px) {
              width: 75px;
            }
            .footer__top__seq__saman__front {
              display: flex;
              height: 75px;
              width: 75px;
              overflow: hidden;
              border-radius: 7.5px;
              border-style: var(--tw-border-style);
              border-width: 5px;
              border-color: #001f5d;
              background-color: #ffb300;
              padding-right: 1.5px;
              --tw-shadow: 0 0 5px var(--tw-shadow-color, #00000066);
              box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
              transition-delay: 50ms;
              --tw-duration: 600ms;
              transition-duration: 600ms;
              backface-visibility: hidden;
              @media (width >= 768px) {
                height: 65px;
              }
              @media (width >= 768px) {
                width: 65px;
              }
              @media (width >= 896px) {
                height: 75px;
              }
              @media (width >= 896px) {
                width: 75px;
              }
              .footer__top__seq__saman__front__text {
                margin: auto 0;
                display: flex;
                height: fit-content;
                width: fit-content;
                cursor: default;
                text-align: center;
                font-family: kalameh-bold;
                font-size: 11px;
                color: var(--color-white);
                -webkit-user-select: none;
                user-select: none;
                text-shadow: 0 1.5px 7.5px var(--tw-text-shadow-color, #000000E6);
                @media (width >= 768px) {
                  font-size: 9.25px;
                }
                @media (width >= 896px) {
                  font-size: 11px;
                }
              }
            }
            .footer__top__seq__saman__back {
              position: absolute;
              top: calc(var(--spacing) * 0);
              display: flex;
              height: 75px;
              width: 75px;
              --tw-rotate-x: rotateX(180deg);
              transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
              cursor: pointer !important;
              align-items: center;
              justify-content: center;
              border-radius: 7.5px;
              border-style: var(--tw-border-style);
              border-width: 5px;
              border-color: #e09d00;
              background-color: var(--color-white);
              --tw-shadow: 0 0 10px var(--tw-shadow-color, #FFB30080);
              box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
              transition-delay: 50ms;
              --tw-duration: 600ms;
              transition-duration: 600ms;
              backface-visibility: hidden;
              @media (width >= 768px) {
                height: 65px;
              }
              @media (width >= 768px) {
                width: 65px;
              }
              @media (width >= 896px) {
                height: 75px;
              }
              @media (width >= 896px) {
                width: 75px;
              }
              .footer__top__seq__saman__back__img {
                width: 65px;
                @media (width >= 768px) {
                  width: 55px;
                }
                @media (width >= 896px) {
                  width: 65px;
                }
              }
            }
          }
          .footer__top__seq__enamad {
            position: relative;
            height: 75px;
            width: 75px;
            perspective: 250px;
            @media (width >= 768px) {
              height: 65px;
            }
            @media (width >= 768px) {
              width: 65px;
            }
            @media (width >= 896px) {
              height: 75px;
            }
            @media (width >= 896px) {
              width: 75px;
            }
            .footer__top__seq__enamad__front {
              display: flex;
              height: 75px;
              width: 75px;
              overflow: hidden;
              border-radius: 7.5px;
              border-style: var(--tw-border-style);
              border-width: 5px;
              border-color: #001f5d;
              background-color: #295697;
              padding-right: 1.5px;
              --tw-shadow: 0 0 5px var(--tw-shadow-color, #00000066);
              box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
              transition-delay: 50ms;
              --tw-duration: 600ms;
              transition-duration: 600ms;
              backface-visibility: hidden;
              @media (width >= 768px) {
                height: 65px;
              }
              @media (width >= 768px) {
                width: 65px;
              }
              @media (width >= 896px) {
                height: 75px;
              }
              @media (width >= 896px) {
                width: 75px;
              }
              .footer__top__seq__enamad__front__text {
                margin: auto 0;
                display: flex;
                height: fit-content;
                width: fit-content;
                cursor: default;
                text-align: center;
                font-family: kalameh-bold;
                font-size: 11px;
                color: var(--color-white);
                -webkit-user-select: none;
                user-select: none;
                text-shadow: 0 1.5px 7.5px var(--tw-text-shadow-color, #000000E6);
                @media (width >= 768px) {
                  font-size: 9.5px;
                }
                @media (width >= 896px) {
                  font-size: 11px;
                }
              }
            }
            .footer__top__seq__enamad__back {
              position: absolute;
              top: calc(var(--spacing) * 0);
              display: flex;
              height: 75px;
              width: 75px;
              --tw-rotate-y: rotateY(-180deg);
              transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
              cursor: pointer !important;
              align-items: center;
              justify-content: center;
              overflow: hidden;
              border-radius: 7.5px;
              border-style: var(--tw-border-style);
              border-width: 5px;
              border-color: #0030A1;
              background-color: var(--color-white);
              padding-top: 7.5px;
              --tw-shadow: 0 0 10px var(--tw-shadow-color, #006EFF80);
              box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
              transition-delay: 50ms;
              --tw-duration: 600ms;
              transition-duration: 600ms;
              backface-visibility: hidden;
              @media (width >= 768px) {
                height: 65px;
              }
              @media (width >= 768px) {
                width: 65px;
              }
              @media (width >= 896px) {
                height: 75px;
              }
              @media (width >= 896px) {
                width: 75px;
              }
              .footer__top__seq__enamad__back__img {
                width: 65px;
                @media (width >= 768px) {
                  width: 55px;
                }
                @media (width >= 896px) {
                  width: 65px;
                }
              }
            }
          }
        }
      }
    }
  }
  .footer__buttom__section {
    display: flex;
    height: fit-content;
    width: 100%;
    align-items: flex-start;
    justify-content: center;
    background-color: #005ac8;
    padding: 10px 20px 130px;
    @media (width >= 768px) {
      padding: 50px 20px;
    }
    .footer__buttom__text {
      width: 100%;
      max-width: 1440px;
      text-align: center;
      font-family: kalameh-medium;
      color: var(--color-white);
      @media (width >= 768px) {
        text-align: start;
      }
      @media (width >= 768px) {
        font-size: 18px;
      }
      .footer__buttom__text__link {
        font-family: kalameh-bold;
        font-size: 20px;
        --tw-duration: 300ms;
        transition-duration: 300ms;
        text-shadow: 0px 2px 5px var(--tw-text-shadow-color, rgba(0,0,0,0.5));
        &:hover {
          @media (hover: hover) {
            color: var(--color-sky-300);
          }
        }
        @media (width >= 768px) {
          font-size: 22px;
        }
      }
    }
  }
}
.header__main {
  z-index: 12000 !important;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  overflow: visible;
  .header__adv {
    z-index: 1001;
    display: none;
    height: 50px;
    width: 100%;
    align-items: center;
    justify-content: center;
    background-color: #005ac8;
    text-align: center;
    @media (width >= 768px) {
      display: flex;
    }
    .header__adv__p {
      padding-top: 6px;
      font-family: kalameh-bold;
      font-size: 20px;
      color: var(--color-white);
    }
  }
  .header__search__section {
    position: sticky;
    top: calc(var(--spacing) * 0);
    z-index: 1202 !important;
    display: flex;
    width: 100%;
    justify-content: center;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 4px;
    border-color: #d9e6ec;
    background-color: #e8f1f2;
    @media (width >= 768px) {
      position: static;
    }
    @media (width >= 768px) {
      --tw-border-style: none;
      border-style: none;
    }
    .header__search {
      display: flex;
      height: 70px;
      width: 100%;
      max-width: 1470px;
      flex-direction: row-reverse;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding-inline: 15px;
      @media (width >= 768px) {
        flex-direction: row;
      }
      .header__search__logo {
        display: none;
        --tw-duration: 200ms;
        transition-duration: 200ms;
        &:hover {
          @media (hover: hover) {
            scale: 1.05;
          }
        }
        &:active {
          scale: 0.95;
        }
        @media (width >= 768px) {
          display: flex;
        }
        .header__search__logo__svg__section {
          width: 225px;
          padding-left: 20px;
        }
      }
      .header__search__form {
        position: relative;
        display: flex;
        height: 100%;
        width: 100%;
        max-width: 750px;
        align-items: center;
        @media (width >= 768px) {
          width: 50%;
        }
        .header__search__form__input {
          height: 65%;
          width: 100%;
          border-radius: 7.5px;
          border-style: var(--tw-border-style);
          border-width: 2px;
          border-color: #005ac8;
          background-color: var(--color-white);
          padding-inline: 10px;
          padding-left: 50px;
          text-align: left;
          font-family: kalameh-medium;
          font-size: 17.5px;
          color: #002c56;
          --tw-duration: 200ms;
          transition-duration: 200ms;
          &::placeholder {
            text-align: right;
          }
          &::placeholder {
            font-family: kalameh-regular;
          }
          &::placeholder {
            color: #acb6cf;
          }
          &:focus {
            scale: 1.002;
          }
          &:focus {
            border-color: #67acff;
          }
          &:focus {
            --tw-shadow: 0 0 3px var(--tw-shadow-color, #65aaffae);
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
          }
          &:focus {
            --tw-outline-style: none;
            outline-style: none;
          }
        }
        .header__search__form__submit {
          position: absolute;
          top: calc(50% - 15px);
          left: 8px;
          display: flex;
          height: 30px;
          width: 30px;
          cursor: pointer;
          align-items: center;
          justify-content: center;
          border-radius: 5px;
          background-color: #005ac8;
          --tw-duration: 200ms;
          transition-duration: 200ms;
          &:hover {
            @media (hover: hover) {
              scale: 1.05;
            }
          }
          &:hover {
            @media (hover: hover) {
              background-color: #003f8c;
            }
          }
          &:active {
            scale: 0.95;
          }
          .header__search__form__submit__svg {
            position: relative;
            width: 25px;
          }
        }
      }
      .header__search__auth__basket__section {
        display: flex;
        height: 100%;
        width: fit-content;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        @media (width >= 768px) {
          width: 225px;
        }
        .header__search__auth__logout {
          display: none;
          height: fit-content;
          width: fit-content;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          opacity: 75%;
          --tw-duration: 200ms;
          transition-duration: 200ms;
          --tw-ease: var(--ease-in-out);
          transition-timing-function: var(--ease-in-out);
          &:hover {
            @media (hover: hover) {
              scale: 1.025;
            }
          }
          &:active {
            scale: 0.925;
          }
          @media (width >= 768px) {
            display: flex;
          }
          .header__search__auth__logout__svg {
            width: 20px;
          }
          .header__search__auth__logout__p {
            font-family: kalameh-black;
            font-size: 9px;
            color: #13293d;
          }
        }
        .header__search__auth__login {
          position: relative;
          display: none;
          height: 45.5px;
          width: 45.5px;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          gap: 5px;
          border-radius: 7.5px;
          background-color: #005ac8;
          padding: 4.5px;
          opacity: 97.5%;
          --tw-duration: 200ms;
          transition-duration: 200ms;
          --tw-ease: var(--ease-in-out);
          transition-timing-function: var(--ease-in-out);
          &:hover {
            @media (hover: hover) {
              scale: 1.025;
            }
          }
          &:hover {
            @media (hover: hover) {
              background-color: #003f8c;
            }
          }
          &:active {
            scale: 0.925;
          }
          @media (width >= 768px) {
            display: flex;
          }
          @media (width >= 768px) {
            width: fit-content;
          }
          @media (width >= 768px) {
            min-width: 119.55px;
          }
          @media (width >= 768px) {
            padding-inline: 10px;
          }
          @media (width >= 768px) {
            padding-block: 4.5px;
          }
          .header__search__auth__login__img {
            width: 30px;
          }
          .header__search__auth__login__separator__line {
            margin-left: 4px;
            display: none;
            height: 25px;
            width: 2px;
            border-radius: calc(infinity * 1px);
            background-color: var(--color-white);
            @media (width >= 768px) {
              display: flex;
            }
          }
          .header__search__auth__login__p__section {
            display: none;
            flex-direction: column;
            gap: 3px;
            @media (width >= 768px) {
              display: flex;
            }
            .header__search__login__p {
              font-family: kalameh-regular;
              font-size: 12px;
              --tw-leading: 15px;
              line-height: 15px;
              color: var(--color-white);
            }
            .header__search__auth__p {
              font-family: kalameh-bold;
              font-size: 12px;
              --tw-leading: 15px;
              line-height: 15px;
              color: var(--color-white);
            }
          }
        }
        .header__search__basket__section {
          position: relative;
          display: none;
          height: 44px;
          width: 44px;
          align-items: center;
          justify-content: center;
          border-radius: 7.5px;
          background-color: #005ac8;
          --tw-duration: 200ms;
          transition-duration: 200ms;
          &:hover {
            @media (hover: hover) {
              scale: 1.025;
            }
          }
          &:hover {
            @media (hover: hover) {
              background-color: #003f8c;
            }
          }
          &:active {
            scale: 0.925;
          }
          @media (width >= 768px) {
            display: flex;
          }
          .header__search__basket__img {
            width: 30px;
          }
          .header__search__basket__counter {
            position: absolute;
            top: -5px;
            right: -5px;
            height: 14.5px;
            width: 14.5px;
            border-radius: calc(infinity * 1px);
            background-color: var(--color-red-600);
            text-align: center;
            font-family: kalameh-bold;
            font-size: 12px;
            color: var(--color-white);
          }
        }
      }
    }
  }
  .header__desktop__nav__section {
    top: calc(var(--spacing) * 0);
    z-index: 1200 !important;
    display: none;
    height: 50px;
    width: 100%;
    justify-content: center;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 4px;
    border-color: #d9e6ec;
    background-color: #e8f1f2;
    @media (width >= 768px) {
      position: sticky !important;
    }
    @media (width >= 768px) {
      display: flex;
    }
    .header__desktop__nav {
      position: relative;
      z-index: 1 !important;
      display: flex;
      width: 100%;
      max-width: 1470px;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding-inline: 15px;
      .header__desktop__nav__navigation {
        display: flex;
        align-items: center;
        gap: 10px;
        .header__desktop__nav__separator {
          height: 25px;
          width: 4px;
          border-radius: calc(infinity * 1px);
          background-color: #005ac8;
          @media (width >= 768px) {
            display: none;
          }
          @media (width >= 896px) {
            display: flex;
          }
        }
        .header__desktop__nav__products {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 5px;
          font-family: kalameh-black;
          font-size: 22px;
          color: #13293d;
          --tw-duration: 200ms;
          transition-duration: 200ms;
          &:hover {
            @media (hover: hover) {
              scale: 1.025;
            }
          }
          &:hover {
            @media (hover: hover) {
              color: #005ac8;
            }
          }
          &:active {
            scale: 0.925;
          }
          @media (width >= 896px) {
            font-size: 20px;
          }
          @media (width >= 1024px) {
            font-family: kalameh-bold;
          }
          @media (width >= 1024px) {
            font-size: 25px;
          }
          .header__desktop__nav__products__svg__section {
            display: none;
            @media (width >= 896px) {
              display: flex;
            }
          }
        }
        .header__desktop__nav__foreign__order {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 5px;
          font-family: kalameh-bold;
          font-size: 13px;
          color: #13293d;
          --tw-duration: 200ms;
          transition-duration: 200ms;
          &:hover {
            @media (hover: hover) {
              scale: 1.025;
            }
          }
          &:hover {
            @media (hover: hover) {
              color: #005ac8;
            }
          }
          &:active {
            scale: 0.925;
          }
          @media (width >= 896px) {
            font-size: 11px;
          }
          @media (width >= 1024px) {
            font-family: kalameh-medium;
          }
          @media (width >= 1024px) {
            font-size: 16px;
          }
          .header__desktop__nav__foreign__order__svg__section {
            display: none;
            @media (width >= 896px) {
              display: flex;
            }
          }
        }
        .header__desktop__nav__pcb {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 5px;
          font-family: kalameh-bold;
          font-size: 13px;
          color: #13293d;
          --tw-duration: 200ms;
          transition-duration: 200ms;
          &:hover {
            @media (hover: hover) {
              scale: 1.025;
            }
          }
          &:hover {
            @media (hover: hover) {
              color: #005ac8;
            }
          }
          &:active {
            scale: 0.925;
          }
          @media (width >= 896px) {
            font-size: 11px;
          }
          @media (width >= 1024px) {
            font-family: kalameh-medium;
          }
          @media (width >= 1024px) {
            font-size: 16px;
          }
          .header__desktop__nav__pcb__svg__section {
            display: none;
            @media (width >= 896px) {
              display: flex;
            }
          }
        }
        .header__desktop__nav__blog {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 5px;
          font-family: kalameh-bold;
          font-size: 13px;
          color: #13293d;
          --tw-duration: 200ms;
          transition-duration: 200ms;
          &:hover {
            @media (hover: hover) {
              scale: 1.025;
            }
          }
          &:hover {
            @media (hover: hover) {
              color: #005ac8;
            }
          }
          &:active {
            scale: 0.925;
          }
          @media (width >= 896px) {
            font-size: 11px;
          }
          @media (width >= 1024px) {
            font-family: kalameh-medium;
          }
          @media (width >= 1024px) {
            font-size: 16px;
          }
          .header__desktop__nav__blog__svg__section {
            display: none;
            @media (width >= 896px) {
              display: flex;
            }
          }
        }
        .header__desktop__nav__contact {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 5px;
          font-family: kalameh-bold;
          font-size: 13px;
          color: #13293d;
          --tw-duration: 200ms;
          transition-duration: 200ms;
          &:hover {
            @media (hover: hover) {
              scale: 1.025;
            }
          }
          &:hover {
            @media (hover: hover) {
              color: #005ac8;
            }
          }
          &:active {
            scale: 0.925;
          }
          @media (width >= 896px) {
            font-size: 11px;
          }
          @media (width >= 1024px) {
            font-family: kalameh-medium;
          }
          @media (width >= 1024px) {
            font-size: 16px;
          }
          .header__desktop__nav__contact__svg__section {
            display: none;
            @media (width >= 896px) {
              display: flex;
            }
          }
        }
        .header__desktop__nav__about {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 5px;
          font-family: kalameh-bold;
          font-size: 13px;
          color: #13293d;
          --tw-duration: 200ms;
          transition-duration: 200ms;
          &:hover {
            @media (hover: hover) {
              scale: 1.025;
            }
          }
          &:hover {
            @media (hover: hover) {
              color: #005ac8;
            }
          }
          &:active {
            scale: 0.925;
          }
          @media (width >= 896px) {
            font-size: 11px;
          }
          @media (width >= 1024px) {
            font-family: kalameh-medium;
          }
          @media (width >= 1024px) {
            font-size: 16px;
          }
          .header__desktop__nav__about__svg__section {
            display: none;
            @media (width >= 896px) {
              display: flex;
            }
          }
        }
      }
      .header__desktop__nav__second__search {
        position: relative;
        display: flex;
        height: 100%;
        width: max-content;
        max-width: 750px;
        align-items: center;
        @media (width >= 768px) {
          width: 40%;
        }
        .header__desktop__nav__second__search__input {
          height: 80%;
          width: 100%;
          border-radius: 7.5px;
          border-style: var(--tw-border-style);
          border-width: 2px;
          border-color: #005ac8;
          background-color: var(--color-white);
          padding-inline: 10px;
          padding-left: 40px;
          text-align: left;
          font-family: kalameh-medium;
          font-size: 17.5px;
          color: #002c56;
          --tw-duration: 200ms;
          transition-duration: 200ms;
          &::placeholder {
            text-align: right;
          }
          &::placeholder {
            font-family: kalameh-regular;
          }
          &::placeholder {
            color: #acb6cf;
          }
          &:focus {
            scale: 1.002;
          }
          &:focus {
            border-color: #67acff;
          }
          &:focus {
            --tw-shadow: 0 0 3px var(--tw-shadow-color, #65aaffae);
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
          }
          &:focus {
            --tw-outline-style: none;
            outline-style: none;
          }
        }
        .header__desktop__nav__second__search__input__submit {
          position: absolute;
          top: calc(50% - 12.5px);
          left: 6px;
          display: flex;
          height: 25px;
          width: 25px;
          cursor: pointer;
          align-items: center;
          justify-content: center;
          border-radius: 5px;
          background-color: #005ac8;
          --tw-duration: 200ms;
          transition-duration: 200ms;
          &:hover {
            @media (hover: hover) {
              scale: 1.05;
            }
          }
          &:hover {
            @media (hover: hover) {
              background-color: #003f8c;
            }
          }
          &:active {
            scale: 0.95;
          }
          .header__desktop__nav__second__search__input__submit__section {
            position: relative;
            width: 25px;
          }
        }
      }
      .header__desktop__mega__menu__section {
        position: absolute;
        top: 45px;
        z-index: 2 !important;
        display: flex;
        height: 430px;
        width: 100%;
        max-width: 1440px;
        justify-content: center;
        padding-top: 15px;
        .header__desktop__mega__menu {
          display: flex;
          height: 100%;
          width: 100%;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          border-radius: 10px;
          border-style: var(--tw-border-style);
          border-width: 4px;
          border-color: #d9e6ec;
          --tw-gradient-position: 145deg,#f8ffff,#d1d9daaf,#f8ffff;
          background-image: linear-gradient(var(--tw-gradient-stops,145deg,#f8ffff,#d1d9daaf,#f8ffff));
          padding: 5px;
          --tw-shadow: 0 7.5px 25px var(--tw-shadow-color, #00000015), inset 0 0 50px var(--tw-shadow-color, #00000030), inset 0 0 5px var(--tw-shadow-color, #00000045);
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
          --tw-backdrop-blur: blur(15px);
          -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
          backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
          .header__desktop__mega__menu__cat1 {
            display: flex;
            height: 100%;
            width: calc(100% * 1.25 / 4);
            flex-direction: column;
            align-items: center;
            gap: 10px;
            overflow-y: auto;
            padding: 10px;
            @media (width >= 896px) {
              width: calc(100% * 1 / 4);
            }
            button {
              display: inline-flex;
              width: 100%;
              cursor: pointer;
              flex-direction: row-reverse;
              align-items: center;
              justify-content: space-between;
              border-radius: 10px;
              border-style: var(--tw-border-style);
              border-width: 4px;
              border-color: #d9e6ec;
              background-color: #ffffff75;
              padding-inline: 15px;
              padding-block: 5.5px;
              font-family: kalameh-bold;
              font-size: 11px;
              --tw-shadow: 0 0 7.5px var(--tw-shadow-color, #00000050);
              box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
              --tw-duration: 150ms;
              transition-duration: 150ms;
              &:hover {
                @media (hover: hover) {
                  scale: 1.02;
                }
              }
              &:hover {
                @media (hover: hover) {
                  border-color: #ffffff;
                }
              }
              &:hover {
                @media (hover: hover) {
                  background-color: #005ac8eb;
                }
              }
              &:hover {
                @media (hover: hover) {
                  font-family: kalameh-bold;
                }
              }
              &:hover {
                @media (hover: hover) {
                  color: var(--color-white) !important;
                }
              }
              &:hover {
                @media (hover: hover) {
                  --tw-shadow: 0 2px 7.5px var(--tw-shadow-color, #000000b2);
                  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
                }
              }
              &:active {
                scale: 1.02;
              }
              &:active {
                border-color: #ffffff;
              }
              &:active {
                background-color: #005ac8eb;
              }
              &:active {
                font-family: kalameh-bold;
              }
              &:active {
                color: var(--color-white) !important;
              }
              &:active {
                --tw-shadow: 0 2px 7.5px var(--tw-shadow-color, #000000b2);
                box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
              }
              @media (width >= 1024px) {
                font-family: kalameh-medium;
              }
              @media (width >= 1024px) {
                font-size: 14px;
              }
              .header__desktop__mega__menu__cat1__svg {
                width: 20px;
                color: #000000c1;
                @media (width >= 1024px) {
                  width: 25px;
                }
              }
            }
            .test {
              display: inline-flex;
              width: 100%;
              scale: 1.02 !important;
              cursor: pointer;
              flex-direction: row-reverse;
              align-items: center;
              justify-content: space-between;
              border-radius: 10px;
              border-style: var(--tw-border-style);
              border-width: 4px;
              border-color: #ffffff !important;
              background-color: #005ac8eb !important;
              padding-inline: 15px;
              padding-block: 5.5px;
              font-family: kalameh-bold !important;
              font-size: 11px;
              color: var(--color-white) !important;
              --tw-shadow: 0 2px 7.5px var(--tw-shadow-color, #000000b2);
              box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
              --tw-duration: 150ms;
              transition-duration: 150ms;
              @media (width >= 1024px) {
                font-size: 14px;
              }
              svg {
                color: var(--color-white);
              }
            }
          }
          .header__desktop__mega__menu__cat1 button:hover {
            .header__desktop__mega__menu__cat1__svg {
              color: var(--color-white) !important;
            }
          }
          .header__desktop__mega__menu__cat1 button:active {
            .header__desktop__mega__menu__cat1__svg {
              color: var(--color-white) !important;
            }
          }
          .header__desktop__mega__menu__cat2-3 {
            display: flex;
            height: 100%;
            width: calc(100% * 2.75 / 4);
            flex-direction: column;
            overflow: auto;
            padding: 10px;
            @media (width >= 896px) {
              width: calc(100% * 2 / 4);
            }
            .header__desktop__mega__menu__cat2-3__resault__section {
              display: flex;
              height: 100%;
              width: 100%;
              flex-direction: column;
              gap: 10px;
              .header__desktop__mega__menu__cat2-3__resault__topic {
                height: 39px;
                min-height: 39px;
                width: 100%;
                @media (width >= 1024px) {
                  height: 44px;
                }
                @media (width >= 1024px) {
                  min-height: 44px;
                }
                .header__desktop__mega__menu__cat2-3__resault__topic__link {
                  margin: 0 auto;
                  display: flex;
                  height: 100%;
                  width: 100%;
                  cursor: pointer;
                  align-items: center;
                  gap: 15px;
                  border-radius: 10px;
                  background-color: #005ac8eb;
                  padding-top: 5px;
                  --tw-shadow: 0 0 7.5px var(--tw-shadow-color, #00000025);
                  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: 150ms;
                  transition-duration: 150ms;
                  &:hover {
                    @media (hover: hover) {
                      scale: 1.01;
                    }
                  }
                  &:hover {
                    @media (hover: hover) {
                      background-color: #003f8c;
                    }
                  }
                  &:hover {
                    @media (hover: hover) {
                      --tw-shadow: 0 2px 7.5px var(--tw-shadow-color, #00000050);
                      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
                    }
                  }
                  &:active {
                    scale: 0.99;
                  }
                  &:active {
                    background-color: #003f8c;
                  }
                  &:active {
                    --tw-shadow: 0 2px 7.5px var(--tw-shadow-color, #00000050);
                    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
                  }
                  p {
                    width: 100%;
                    text-align: center;
                    font-family: kalameh-bold;
                    font-size: 20px;
                    color: var(--color-white);
                    --tw-duration: 150ms;
                    transition-duration: 150ms;
                  }
                }
              }
              .header__desktop__mega__menu__cat2-3__resault__categories {
                display: flex;
                height: 1000px;
                width: 100%;
                gap: 10px;
                .header__desktop__mega__menu__cat2-3__resault__categories__section {
                  display: flex;
                  height: fit-content;
                  width: calc(100% / 3);
                  flex-direction: column;
                  .header__desktop__mega__menu__cat2-3__resault__categories__section__main {
                    display: flex;
                    height: 300px;
                    width: 100%;
                    flex-direction: column;
                    .header__desktop__mega__menu__cat2-3__resault__categories__section__topic {
                      display: flex;
                      height: 44px;
                      min-height: 44px;
                      width: 100%;
                      .header__desktop__mega__menu__cat2-3__resault__categories__section__topic__link {
                        display: flex;
                        align-items: center;
                        gap: 10px;
                        .header__desktop__mega__menu__cat2-3__resault__categories__section__topic__line {
                          display: flex;
                          height: 40%;
                          width: 4px;
                          border-radius: calc(infinity * 1px);
                          background-color: #005ac8;
                        }
                        .header__desktop__mega__menu__cat2-3__resault__categories__section__topic__p {
                          font-family: kalameh-bold;
                          font-size: 13px;
                          @media (width >= 1232px) {
                            font-size: 15px;
                          }
                        }
                      }
                    }
                    .header__desktop__mega__menu__cat2-3__resault__categories__section__sub {
                      display: flex;
                      height: fit-content;
                      width: 100%;
                      flex-direction: column;
                      gap: 10px;
                      padding-right: 15px;
                      .header__desktop__mega__menu__cat2-3__resault__categories__section__sub__link {
                        font-family: kalameh-regular;
                        font-size: 11px;
                        color: #000000b8;
                        --tw-duration: 150ms;
                        transition-duration: 150ms;
                        &:hover {
                          @media (hover: hover) {
                            color: #000000;
                          }
                        }
                        @media (width >= 1232px) {
                          font-size: 13px;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
          .header__desktop__mega__menu__new__products {
            display: none;
            height: 100%;
            width: calc(100% * 1 / 4);
            flex-direction: column;
            gap: 10px;
            padding: 10px;
            @media (width >= 896px) {
              display: flex;
            }
            .header__desktop__mega__menu__new__products__topic {
              display: inline-flex;
              min-height: 39px;
              width: 100%;
              cursor: pointer;
              flex-direction: row-reverse;
              align-items: center;
              justify-content: space-between;
              border-radius: 10px;
              border-style: var(--tw-border-style);
              border-width: 4px;
              border-color: #d9e6ec;
              background-color: #ffffff75;
              padding-inline: 15px;
              padding-block: 5.5px;
              font-family: kalameh-bold;
              --tw-shadow: 0 0 7.5px var(--tw-shadow-color, #00000050);
              box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
              --tw-duration: 150ms;
              transition-duration: 150ms;
              &:hover {
                @media (hover: hover) {
                  scale: 1.02;
                }
              }
              &:hover {
                @media (hover: hover) {
                  border-color: #ffffff;
                }
              }
              &:hover {
                @media (hover: hover) {
                  background-color: #005ac8eb;
                }
              }
              &:hover {
                @media (hover: hover) {
                  color: var(--color-white) !important;
                }
              }
              &:hover {
                @media (hover: hover) {
                  --tw-shadow: 0 2px 7.5px var(--tw-shadow-color, #000000b2);
                  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
                }
              }
              &:active {
                scale: 0.975;
              }
              &:active {
                border-color: #ffffff;
              }
              &:active {
                background-color: #005ac8eb;
              }
              &:active {
                color: var(--color-white) !important;
              }
              &:active {
                --tw-shadow: 0 2px 7.5px var(--tw-shadow-color, #000000b2);
                box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
              }
              @media (width >= 1024px) {
                min-height: 44px;
              }
              p {
                width: 100%;
                text-align: center;
              }
            }
            .header__desktop__mega__menu__new__products__section {
              display: flex;
              height: 100%;
              width: 100%;
              flex-direction: column;
              align-items: center;
              .header__desktop__mega__menu__new__products__section__image__detail__section {
                position: relative;
                display: flex;
                height: 100%;
                width: 100%;
                align-items: flex-start;
                justify-content: center;
                .header__desktop__mega__menu__new__products__image__section {
                  display: flex;
                  height: 42.5%;
                  width: 90%;
                  justify-content: center;
                  overflow: hidden;
                  border-radius: 10px;
                  .header__desktop__mega__menu__new__products__section__img {
                    position: relative;
                    z-index: 2;
                    height: fit-content;
                    scale: 1.4;
                    border-radius: 10px;
                    --tw-duration: 500ms;
                    transition-duration: 500ms;
                    -webkit-user-select: none;
                    user-select: none;
                    @media (width >= 896px) {
                      bottom: -10px;
                    }
                    @media (width >= 1024px) {
                      bottom: 5px;
                    }
                    @media (width >= 1232px) {
                      bottom: 17.5px;
                    }
                    @media (width >= 1440px) {
                      bottom: 25px;
                    }
                  }
                }
                .header__desktop__mega__menu__new__products__section__img__link__section {
                  position: absolute;
                  top: calc(var(--spacing) * 0);
                  z-index: 3;
                  display: flex;
                  height: 42.5%;
                  width: 90%;
                  align-items: center;
                  justify-content: center;
                  border-radius: 10px;
                  background-color: #002d6370;
                  opacity: 0%;
                  --tw-backdrop-blur: blur(2.2px);
                  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
                  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
                  --tw-duration: 300ms;
                  transition-duration: 300ms;
                  &:hover {
                    @media (hover: hover) {
                      opacity: 100%;
                    }
                  }
                  .header__desktop__mega__menu__new__products__section__img__link {
                    border-radius: 10px;
                    border-style: var(--tw-border-style);
                    border-width: 4px;
                    border-color: var(--color-white);
                    background-color: #ffffff35;
                    padding-inline: 10px;
                    padding-block: 5px;
                    font-family: kalameh-bold;
                    color: var(--color-white);
                    --tw-shadow: inset 0 0 5px var(--tw-shadow-color, #00000075);
                    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
                    --tw-duration: 150ms;
                    transition-duration: 150ms;
                    text-shadow: 0 0 5px var(--tw-text-shadow-color, #00000075);
                    &:hover {
                      @media (hover: hover) {
                        scale: 1.05;
                      }
                    }
                    &:active {
                      scale: 0.95;
                    }
                  }
                }
                .header__desktop__mega__menu__new__products__detail__section {
                  position: absolute;
                  bottom: calc(var(--spacing) * 0);
                  z-index: 4;
                  display: flex;
                  height: 55%;
                  width: 100%;
                  align-items: center;
                  overflow: hidden;
                  border-radius: 10px;
                  border-style: var(--tw-border-style);
                  border-width: 4px;
                  border-color: #c8e0eb;
                  background-color: #ffffff75;
                  --tw-shadow: 0 0 10px var(--tw-shadow-color, #00000075);
                  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
                  .header__desktop__mega__menu__new__products__detail__arrow {
                    display: flex;
                    height: 25%;
                    width: 10%;
                    cursor: pointer;
                    align-items: center;
                    justify-content: center;
                    svg {
                      width: 60%;
                      color: #005ac8;
                      --tw-duration: 200ms;
                      transition-duration: 200ms;
                      --tw-ease: var(--ease-in-out);
                      transition-timing-function: var(--ease-in-out);
                    }
                  }
                  .next {
                    rotate: 180deg;
                  }
                  .header__desktop__mega__menu__new__products__detail__arrow:hover svg {
                    scale: 1.15;
                    color: #003f8c;
                  }
                  .header__desktop__mega__menu__new__products__detail__arrow:active svg {
                    scale: 0.85;
                    color: #003f8c;
                  }
                  .header__desktop__mega__menu__new__products__detail__content {
                    display: flex;
                    height: 100%;
                    width: 80%;
                    flex-direction: column;
                    align-items: center;
                    justify-content: space-between;
                    gap: 10px;
                    padding: 10px;
                    .header__desktop__mega__menu__new__products__detail__content__productName {
                      display: flex;
                      height: calc(100% * 1 / 4);
                      width: 100%;
                      align-items: center;
                      border-radius: 7.5px;
                      background-color: #005ac8;
                      color: var(--color-white);
                      p {
                        position: relative;
                        top: 2.75px;
                        height: fit-content;
                        width: 100%;
                        text-align: center;
                        font-family: kalameh-medium;
                        font-size: 15px;
                        -webkit-user-select: none;
                        user-select: none;
                        @media (width >= 1024px) {
                          font-size: 20px;
                        }
                      }
                    }
                    .header__desktop__mega__menu__new__products__detail__content__productPrice {
                      height: calc(100% * 2 / 4);
                      width: 95%;
                      .header__desktop__mega__menu__new__products__detail__content__maxPrice, .header__desktop__mega__menu__new__products__detail__content__basePrice {
                        display: flex;
                        height: calc(1/2 * 100%);
                        width: 100%;
                        .header__desktop__mega__menu__new__products__detail__content__priceTopic__section {
                          display: flex;
                          height: 100%;
                          width: calc(100% * 2 / 6);
                          align-items: center;
                          justify-content: center;
                          gap: 2.5px;
                          .header__desktop__mega__menu__new__products__detail__content__priceTopic {
                            width: calc(100% * 2 / 3);
                            font-family: kalameh-bold;
                            font-size: 12px;
                          }
                          .header__desktop__mega__menu__new__products__detail__content__priceDot {
                            width: calc(100% * 1 / 3);
                            font-family: kalameh-bold;
                          }
                        }
                        .header__desktop__mega__menu__new__products__detail__content__price {
                          display: flex;
                          height: 100%;
                          width: calc(100% * 3 / 6);
                          align-items: center;
                          justify-content: center;
                          font-family: kalameh-medium;
                          font-size: 13px;
                          @media (width >= 1232px) {
                            font-size: 16px;
                          }
                        }
                        .header__desktop__mega__menu__new__products__detail__content__priceUnit__svg {
                          display: flex;
                          height: 100%;
                          width: calc(100% * 1 / 6);
                          justify-content: flex-end;
                          svg {
                            position: relative;
                            width: 20px;
                            scale: 0.8;
                            @media (width >= 896px) {
                              right: 5px;
                            }
                            @media (width >= 1024px) {
                              right: 0px;
                            }
                            @media (width >= 1024px) {
                              scale: 0.9;
                            }
                          }
                        }
                      }
                    }
                    .header__desktop__mega__menu__new__products__detail__content__productQuickAdd {
                      display: flex;
                      height: calc(100% * 1 / 4);
                      width: 100%;
                      gap: 10px;
                      .header__desktop__mega__menu__new__products__detail__content__productQuickAdd__quantity {
                        position: relative;
                        display: flex;
                        height: 100%;
                        width: 100%;
                        align-items: center;
                        justify-content: center;
                        font-family: kalameh-medium;
                        input {
                          height: 100%;
                          width: 100%;
                          border-radius: 7.5px;
                          border-style: var(--tw-border-style);
                          border-width: 2px;
                          border-color: #003f8c;
                          background-color: #e8f1f2;
                          padding: 0 15px;
                          text-align: center;
                          font-family: kalameh-regular;
                          font-size: 14px;
                          color: var(--color-black);
                          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: 200ms;
                          transition-duration: 200ms;
                          --tw-outline-style: none;
                          outline-style: none;
                          &:user-invalid {
                            border-color: var(--color-red-500);
                          }
                          &:focus {
                            border-color: #0073ff;
                          }
                          &:focus {
                            --tw-shadow: 0 0 7.5px var(--tw-shadow-color, #0073ff3d);
                            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
                          }
                          &:user-invalid {
                            &:focus {
                              border-color: var(--color-red-500) !important;
                            }
                          }
                        }
                        span {
                          pointer-events: none;
                          position: absolute;
                          right: 8px;
                          display: flex;
                          --tw-border-style: none;
                          border-style: none;
                          font-family: kalameh-medium;
                          font-size: 12.5px;
                          color: #01004a;
                          --tw-duration: 1000ms;
                          transition-duration: 1000ms;
                          --tw-ease: cubic-bezier(0.05,0.81,0,0.93);
                          transition-timing-function: cubic-bezier(0.05,0.81,0,0.93);
                        }
                      }
                      .header__desktop__mega__menu__new__products__detail__content__productQuickAdd__quantity input:focus ~ span, .header__desktop__mega__menu__new__products__detail__content__productQuickAdd__quantity input:valid ~ span {
                        --tw-translate-y: -19px;
                        translate: var(--tw-translate-x) var(--tw-translate-y);
                        border-radius: 5px;
                        border-style: var(--tw-border-style);
                        border-width: 2px;
                        border-color: #003f8c;
                        background-color: #0073ff;
                        padding: 0 5px;
                        font-size: 11px;
                        color: var(--color-white);
                      }
                      .header__desktop__mega__menu__new__products__detail__content__productQuickAdd__quantity input:user-invalid ~ span {
                        --tw-translate-y: -17.5px;
                        translate: var(--tw-translate-x) var(--tw-translate-y);
                        border-radius: 5px;
                        border-style: var(--tw-border-style);
                        border-width: 2px;
                        border-color: var(--color-red-500);
                        background-color: var(--color-red-500);
                        padding: 0 5px;
                        font-size: 11px;
                        color: var(--color-white);
                      }
                      .header__desktop__mega__menu__new__products__detail__content__productQuickAdd__submit {
                        height: 100%;
                        width: fit-content;
                        cursor: pointer;
                        border-radius: 7.5px;
                        background-color: #005ac8;
                        padding: 5px;
                        text-align: center;
                        --tw-duration: 150ms;
                        transition-duration: 150ms;
                        &:hover {
                          @media (hover: hover) {
                            scale: 1.01;
                          }
                        }
                        &:hover {
                          @media (hover: hover) {
                            background-color: #003f8c;
                          }
                        }
                        &:hover {
                          @media (hover: hover) {
                            --tw-shadow: 0 2px 7.5px var(--tw-shadow-color, #00000050);
                            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
                          }
                        }
                        &:active {
                          scale: 0.99;
                        }
                        &:active {
                          background-color: #003f8c;
                        }
                        &:active {
                          --tw-shadow: 0 2px 7.5px var(--tw-shadow-color, #00000050);
                          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
                        }
                        .header__desktop__mega__menu__new__products__detail__content__productQuickAdd__submit__svg {
                          width: 30px;
                          color: var(--color-white);
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .header__mobile__nav__section {
    position: fixed;
    bottom: 7.5px;
    left: 50%;
    z-index: 1201 !important;
    margin-bottom: 12.5px;
    display: flex;
    height: 80px;
    width: 95%;
    --tw-translate-x: -50%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
    align-items: center;
    justify-content: center;
    border-radius: 7.5px;
    border-style: var(--tw-border-style);
    border-width: 4px;
    border-color: #d9e6ec;
    --tw-gradient-position: 145deg,#f8ffff,#d1d9daaf,#f8ffff;
    background-image: linear-gradient(var(--tw-gradient-stops,145deg,#f8ffff,#d1d9daaf,#f8ffff));
    --tw-shadow: 0 0 30px var(--tw-shadow-color, #00000040), inset 0 0 10px var(--tw-shadow-color, #00000050);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-backdrop-blur: blur(7.5px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    @media (width >= 768px) {
      display: none;
    }
    .header__mobile__nav__navigation {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: space-around;
      gap: 5px;
      .header__mobile__nav__foreign__order {
        position: relative;
        display: flex;
        height: 40px;
        width: 40px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        border-radius: 7.5px;
        padding: 3px;
        opacity: 97.5%;
        --tw-duration: 200ms;
        transition-duration: 200ms;
        --tw-ease: var(--ease-in-out);
        transition-timing-function: var(--ease-in-out);
        .header__mobile__nav__foreign__order__img {
          position: relative;
          top: 3px;
          width: 80%;
        }
        .header__mobile__nav__foreign__order__p {
          height: fit-content;
          width: fit-content;
          font-family: kalameh-bold;
          font-size: 9px;
          text-wrap: nowrap;
          color: #13293d;
        }
      }
      .header__mobile__nav__category {
        position: relative;
        display: flex;
        height: 40px;
        width: 40px;
        cursor: pointer;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        border-radius: 7.5px;
        padding: 3px;
        opacity: 97.5%;
        --tw-duration: 200ms;
        transition-duration: 200ms;
        --tw-ease: var(--ease-in-out);
        transition-timing-function: var(--ease-in-out);
        .header__mobile__nav__category__img {
          position: relative;
          top: 5.5px;
          width: 80%;
        }
        .header__mobile__nav__category__p {
          margin-bottom: 2px;
          height: fit-content;
          width: fit-content;
          font-family: kalameh-bold;
          font-size: 9px;
          color: #13293d;
        }
      }
      .header__mobile__nav__home {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 3px;
        --tw-duration: 200ms;
        transition-duration: 200ms;
        --tw-ease: var(--ease-in-out);
        transition-timing-function: var(--ease-in-out);
        &:hover {
          @media (hover: hover) {
            scale: 1.05;
          }
        }
        &:active {
          scale: 0.95;
        }
        .header__mobile__nav__home__section {
          position: relative;
          height: 55px;
          width: 55px;
          overflow: hidden;
          border-radius: 10px;
          background-color: #005ac8;
          color: var(--color-white);
          --tw-shadow: 0 0 7.5px var(--tw-shadow-color, #65aaffae);
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
          --tw-duration: 200ms;
          transition-duration: 200ms;
          &:hover {
            @media (hover: hover) {
              background-color: #003f8c;
            }
          }
          .header__mobile__nav__home__section__p {
            position: relative;
            bottom: 33px;
            font-family: kalameh-medium;
            font-size: 90px;
          }
        }
      }
      .header__mobile__nav__basket {
        position: relative;
        display: flex;
        height: 40px;
        width: 40px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        border-radius: 7.5px;
        padding: 3px;
        opacity: 97.5%;
        --tw-duration: 200ms;
        transition-duration: 200ms;
        --tw-ease: var(--ease-in-out);
        transition-timing-function: var(--ease-in-out);
        .header__mobile__nav__basket__img {
          position: relative;
          top: 3px;
          width: 80%;
        }
        .header__mobile__nav__basket__p {
          position: relative;
          height: fit-content;
          width: fit-content;
          font-family: kalameh-bold;
          font-size: 9px;
          text-wrap: nowrap;
          color: #13293d;
        }
      }
      .header__mobile__nav__contact {
        position: relative;
        display: flex;
        height: 40px;
        width: 40px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: 7.5px;
        padding: 3px;
        opacity: 97.5%;
        --tw-duration: 200ms;
        transition-duration: 200ms;
        --tw-ease: var(--ease-in-out);
        transition-timing-function: var(--ease-in-out);
        .header__mobile__nav__contact__img {
          position: relative;
          top: 3px;
          width: 80%;
        }
        .header__mobile__nav__contact__p {
          height: fit-content;
          width: fit-content;
          font-family: kalameh-bold;
          font-size: 9px;
          text-wrap: nowrap;
          color: #13293d;
        }
      }
    }
  }
  .header__mobile__mega__menu__and__hamburger__backdrop {
    position: fixed;
    z-index: 1199 !important;
    display: flex;
    height: 100dvh;
    width: 100vw;
    background-color: #000000b0;
    --tw-backdrop-blur: blur(3px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    @media (width >= 768px) {
      display: none !important;
    }
  }
  .header__mobile__mega__menu__section {
    position: fixed;
    bottom: 52%;
    left: 50%;
    z-index: 1200 !important;
    display: flex;
    height: 68%;
    width: 95%;
    --tw-translate-x: -50%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
    --tw-translate-y: 50%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
    flex-direction: column;
    gap: 7.5px;
    overflow: hidden;
    border-radius: 7.5px;
    border-style: var(--tw-border-style);
    border-width: 4px;
    border-color: #d9e6ec;
    --tw-gradient-position: 145deg,#f8ffff,#d1d9dabd,#f8ffff;
    background-image: linear-gradient(var(--tw-gradient-stops,145deg,#f8ffff,#d1d9dabd,#f8ffff));
    padding: 7.5px;
    --tw-shadow: 0 0 50px var(--tw-shadow-color, #00000025), inset 0 0 10px var(--tw-shadow-color, #00000040);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-backdrop-blur: blur(7.5px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    @media (width >= 768px) {
      display: none;
    }
    .header__mobile__mega__menu__title {
      display: flex;
      height: fit-content;
      width: 100%;
      align-items: center;
      justify-content: space-between;
      border-radius: 7.5px;
      background-color: #005ac8;
      padding-inline: 10px;
      padding-block: 5px;
      p {
        font-family: kalameh-bold;
        font-size: 17.5px;
        color: var(--color-white);
        text-shadow: 0 0 5px var(--tw-text-shadow-color, #00000040);
      }
      .header__mobile__mega__menu__title__close__svg {
        width: 22.5px;
        color: var(--color-white);
        --tw-drop-shadow-size: drop-shadow(0 0 5px var(--tw-drop-shadow-color, #00000040));
        --tw-drop-shadow: var(--tw-drop-shadow-size);
        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,);
      }
    }
    .header__mobile__mega__menu__categories {
      display: flex;
      height: 100%;
      width: 100%;
      overflow-x: hidden;
      overflow-y: auto;
      border-radius: 7.5px;
      --tw-shadow: inset 0 0 15px var(--tw-shadow-color, #00000050);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      scrollbar-width: none;
      -ms-overflow-style: none;
      &::-webkit-scrollbar {
        display: none !important;
      }
      .header__mobile__mega__menu__cat1 {
        display: flex;
        width: 25%;
        flex-direction: column;
        gap: 7px;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 7.5px;
        scrollbar-width: none;
        -ms-overflow-style: none;
        &::-webkit-scrollbar {
          display: none !important;
        }
        button {
          display: flex;
          aspect-ratio: 1 / 1;
          width: 100%;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 5px;
          border-radius: 7.5px;
          border-style: var(--tw-border-style);
          border-width: 4px;
          border-color: #d9e6ec;
          background-color: #ffffff75;
          padding: 5px;
          --tw-shadow: 0 0 5px var(--tw-shadow-color, #00000050);
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
          .header__mobile__mega__menu__cat1__svg {
            width: 37.5%;
          }
          p {
            font-family: kalameh-bold;
            font-size: 10px;
          }
        }
        .test {
          border-style: var(--tw-border-style);
          border-width: 4px;
          border-color: #ffffff !important;
          background-color: #005ac8eb !important;
          --tw-shadow: 0 0 7.5px var(--tw-shadow-color, #000000ac);
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
          .header__mobile__mega__menu__cat1__svg {
            color: var(--color-white);
          }
          p {
            color: var(--color-white);
          }
        }
      }
      .header__mobile__mega__menu__cat2_3 {
        display: flex;
        height: 100%;
        width: 75%;
        flex-direction: column;
        gap: 7.5px;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 7.5px;
        scrollbar-width: none;
        -ms-overflow-style: none;
        &::-webkit-scrollbar {
          display: none !important;
        }
        .header__mobile__mega__menu__cat2-3__topic {
          width: 100%;
          border-radius: 7.5px;
          background-color: #005ac8;
          padding-inline: 10px;
          padding-block: 15px;
          --tw-shadow: 0 0 5px var(--tw-shadow-color, #00000060);
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
          p {
            text-align: center;
            font-family: kalameh-black;
            font-size: 14px;
            color: var(--color-white);
          }
        }
        .header__mobile__mega__menu__cat2-3__item {
          .header__mobile__mega__menu__cat2-3__item__section {
            display: flex;
            flex-direction: column;
            gap: 7.5px;
            .header__mobile__mega__menu__cat2-3__item__section__accordion {
              overflow: hidden;
              border-radius: 7.5px;
              border-style: var(--tw-border-style);
              border-width: 4px;
              border-color: #d9e6ec;
              background-color: #ffffff75;
              --tw-shadow: 0 0 5px var(--tw-shadow-color, #00000040);
              box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
              .header__mobile__mega__menu__cat2__item__section__accordion__topic {
                display: flex;
                width: 100%;
                align-items: center;
                justify-content: space-between;
                padding-inline: 10px;
                padding-block: 7.5px;
                .header__mobile__mega__menu__cat2__item__section__accordion__topic__p {
                  font-family: kalameh-bold;
                  font-size: 15px;
                }
                .header__mobile__mega__menu__cat2__item__section__accordion__topic__svg {
                  height: calc(var(--spacing) * 5);
                  width: calc(var(--spacing) * 5);
                  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
                  color: color-mix(in srgb, #000 75%, transparent);
                  @supports (color: color-mix(in lab, red, red)) {
                    color: color-mix(in oklab, var(--color-black) 75%, transparent);
                  }
                  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: 200ms;
                  transition-duration: 200ms;
                }
              }
              .header__mobile__mega__menu__cat2__item__section__accordion__resault__section {
                max-height: calc(var(--spacing) * 0);
                opacity: 0%;
                .header__mobile__mega__menu__cat2__item__section__accordion__resault {
                  display: flex;
                  flex-direction: column;
                  gap: 10px;
                  padding-inline: 10px;
                  padding-block: 10px;
                  .header__mobile__mega__menu__cat2__item__section__accordion__resault__item {
                    border-radius: 0.25rem;
                    padding-inline: 10px;
                    padding-block: 5px;
                    font-family: kalameh-regular;
                    font-size: 14px;
                    color: color-mix(in srgb, #000 75%, transparent);
                    @supports (color: color-mix(in lab, red, red)) {
                      color: color-mix(in oklab, var(--color-black) 75%, transparent);
                    }
                    --tw-duration: 100ms;
                    transition-duration: 100ms;
                    &:hover {
                      @media (hover: hover) {
                        background-color: color-mix(in srgb, oklch(96.7% 0.003 264.542) 50%, transparent);
                        @supports (color: color-mix(in lab, red, red)) {
                          background-color: color-mix(in oklab, var(--color-gray-100) 50%, transparent);
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .header__mobile__hamburger__menu__section {
    position: fixed;
    bottom: 52%;
    left: 50%;
    z-index: 1199 !important;
    display: flex;
    height: 68%;
    width: 95%;
    --tw-translate-x: -50%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
    --tw-translate-y: 50%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    overflow: hidden;
    border-radius: 7.5px;
    border-style: var(--tw-border-style);
    border-width: 4px;
    border-color: #d9e6ec;
    --tw-gradient-position: 145deg,#f8ffff,#d1d9dabd,#f8ffff;
    background-image: linear-gradient(var(--tw-gradient-stops,145deg,#f8ffff,#d1d9dabd,#f8ffff));
    padding: 10px;
    --tw-shadow: 0 0 50px var(--tw-shadow-color, #00000025), inset 0 0 10px var(--tw-shadow-color, #00000040);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-backdrop-blur: blur(7.5px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    @media (width >= 768px) {
      display: none;
    }
    .header__mobile__hamburger__menu__profile__signed__out {
      display: flex;
      height: fit-content;
      width: 100%;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding-inline: 5px;
      padding-block: 5px;
      .header__mobile__hamburger__menu__profile__login {
        display: flex;
        height: calc(100% * 1 / 2);
        min-height: 40px;
        width: 100%;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border-radius: 7.5px;
        border-style: var(--tw-border-style);
        border-width: 4px;
        border-color: #d9e6ec;
        background-color: #ffffff75;
        padding-block: 7.5px;
        font-family: kalameh-medium;
        font-size: 17.5px;
        --tw-shadow: 0 0 5px var(--tw-shadow-color, #00000040);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
      .header__mobile__hamburger__menu__profile__register {
        display: flex;
        height: calc(100% * 1 / 2);
        min-height: 40px;
        width: 100%;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border-radius: 7.5px;
        border-style: var(--tw-border-style);
        border-width: 4px;
        border-color: #005ac8;
        background-color: #005ac8;
        padding-block: 7.5px;
        font-family: kalameh-bold;
        font-size: 20px;
        color: var(--color-white);
        --tw-shadow: 0 0 5px var(--tw-shadow-color, #00000040);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
    .header__mobile__hamburger__menu__profile__signed__in {
      display: flex;
      height: fit-content;
      width: 97.5%;
      align-items: center;
      justify-content: space-between;
      .header__mobile__hamburger__menu__profile__picture {
        display: flex;
        aspect-ratio: 1 / 1;
        width: calc(100% * 1 / 5);
        align-items: center;
        justify-content: center;
        border-radius: calc(infinity * 1px);
        background-color: var(--color-sky-600);
        padding-top: 5px;
        font-family: kalameh-bold;
        font-size: 30px;
        color: var(--color-white);
      }
      .header__mobile__hamburger__menu__profile__name__setting {
        position: relative;
        left: -4px;
        display: flex;
        width: calc(100% * 3 / 5);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        .header__mobile__hamburger__menu__profile__name {
          font-family: kalameh-medium;
          font-size: 16px;
          span {
            font-family: kalameh-bold !important;
            font-size: 18.5px;
          }
        }
        .header__mobile__hamburger__menu__profile__phoneNumber {
          display: flex;
          align-items: center;
          justify-content: center;
          text-align: start;
          font-family: kalameh-regular;
          font-size: 12px;
          color: color-mix(in srgb, #000 60%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            color: color-mix(in oklab, var(--color-black) 60%, transparent);
          }
          .header__mobile__hamburger__menu__profile__phoneNumber__topic {
            font-family: kalameh-bold;
            font-size: 13px;
          }
        }
      }
      .header__mobile__hamburger__menu__profile__menu__section {
        display: flex;
        height: 100%;
        width: calc(100% * 1 / 5);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        .header__mobile__hamburger__menu__profile__setting {
          position: relative;
          left: -4px;
          display: flex;
          aspect-ratio: 1 / 1;
          width: 100%;
          scale: 0.9;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 2.5px;
          border-radius: 7.5px;
          background-color: #005ac8;
          padding-inline: 10px;
          padding-block: 7.5px;
          --tw-shadow: 0 0 10px var(--tw-shadow-color, #00000040);
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
          .header__mobile__hamburger__menu__profile__setting__img {
            width: 35px;
          }
          p {
            display: flex;
            width: 100%;
            align-items: center;
            justify-content: center;
            font-family: kalameh-bold;
            font-size: 10px;
            text-wrap: nowrap;
            color: var(--color-white);
          }
        }
      }
    }
    .signed__out {
      display: none !important;
    }
    .signed__in {
      display: flex !important;
    }
    .header__mobile__hamburger__menu__hr {
      margin-inline: auto;
      margin-block: 5px;
      width: 97.5%;
      color: color-mix(in srgb, #000 30%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-black) 30%, transparent);
      }
    }
    .header__mobile__hamburger__menu__body {
      display: flex;
      height: 100%;
      width: 100%;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      overflow-y: auto;
      padding-inline: 5px;
      padding-block: 5px;
      scrollbar-width: none;
      -ms-overflow-style: none;
      &::-webkit-scrollbar {
        display: none !important;
      }
      a , form {
        display: flex;
        height: calc(100% * 1 / 7);
        min-height: 38px;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        overflow: hidden;
        border-radius: 7.5px;
        border-style: var(--tw-border-style);
        border-width: 4px;
        border-color: #d9e6ec;
        background-color: #ffffff75;
        padding-inline: 7.5px;
        --tw-shadow: 0 0 5px var(--tw-shadow-color, #00000040);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        button {
          display: flex;
          height: 100%;
          width: 100%;
          align-items: center;
          justify-content: space-between;
        }
        .header__mobile__hamburger__menu__item__svg {
          width: 25px;
          color: var(--color-black);
        }
        .header__mobile__hamburger__menu__item__svg__info {
          position: relative;
          left: 7.5px;
          width: 10px;
          color: var(--color-black);
        }
        .header__mobile__hamburger__menu__item__counter {
          display: flex;
          aspect-ratio: 1 / 1;
          height: 25px;
          width: 25px;
          align-items: center;
          justify-content: center;
          border-radius: 5px;
          background-color: var(--color-rose-600);
          padding-top: 3px;
          font-family: kalameh-bold;
          color: var(--color-white);
        }
        p {
          font-family: kalameh-medium;
          font-size: 17.5px;
        }
        .exit__p {
          font-family: kalameh-bold;
          font-size: 14px;
          color: #c70000;
        }
        .exit__svg {
          position: relative;
          bottom: 1px;
          left: 2.5px;
          width: 20px;
          color: #c70000;
        }
      }
      form {
        border-color: color-mix(in srgb, oklch(50.5% 0.213 27.518) 70%, transparent) !important;
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-red-700) 70%, transparent) !important;
        }
      }
      .about__page__hero__logo {
        display: flex;
        width: 100%;
        flex: 1;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border-radius: 7.5px;
        --tw-shadow: 0 0 5px var(--tw-shadow-color, #00000040);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        img {
          width: 100%;
        }
      }
    }
  }
}
.accordion-content {
  transition: max-height 0.3s ease-out, opacity 0.2s ease;
}
.max-height {
  gap: 20px;
}
.auth__signin {
  display: flex;
  height: 100vh;
  width: 100%;
  overflow-y: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  .auth__signin__section {
    display: flex;
    height: 100dvh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background-color: #e8f1f2;
    --tw-shadow: -10px 0 20px var(--tw-shadow-color, #00000080);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-shadow-color: #000;
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, var(--color-black) var(--tw-shadow-alpha), transparent);
    }
    @media (width >= 320px) {
      width: 100%;
    }
    @media (width >= 430px) {
      width: 66.6%;
    }
    @media (width >= 768px) {
      width: 50%;
    }
    @media (width >= 1024px) {
      width: calc(100% / 2);
    }
    .auth__signin__logo {
      margin-inline: auto;
      margin-block: 10px;
      display: flex;
      align-content: center;
      justify-content: center;
    }
    .auth__signin__title {
      text-align: center;
      font-family: kalameh-bold;
      font-size: 30px;
      .auth__signin__title__span {
        color: #13293d;
      }
    }
    .auth__signin__alert {
      display: flex;
      height: 45px;
      width: 90%;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 10px;
      border-radius: 7.5px;
      border-style: var(--tw-border-style);
      border-width: 3px;
      border-color: #ff0000;
      background-color: #fed0d0;
      padding: 5px;
      text-align: center;
      font-size: 20px;
      color: #ff0000;
      @media (width >= 430px) {
        width: 75%;
      }
      @media (width >= 430px) {
        gap: 5px;
      }
      .auth__signin__alert__svg {
        width: 15px;
      }
      .auth__signin__alert__text {
        padding-top: 2px;
        font-family: kalameh-medium;
        font-size: 12.5px;
        @media (width >= 430px) {
          font-size: 15px;
        }
      }
    }
    .auth__signin__form {
      display: flex;
      width: 90%;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      @media (width >= 430px) {
        width: 75%;
      }
      .auth__signin__button__section {
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        @media (width >= 896px) {
          flex-direction: row;
        }
        .auth__signin__button__entry {
          height: 45px;
          width: 100%;
          cursor: pointer;
          border-radius: 7.5px;
          background-color: #005ac8;
          padding: 2px 50px 8px;
          font-family: kalameh-regular;
          font-size: 22px;
          --tw-leading: 30px;
          line-height: 30px;
          color: var(--color-white);
          --tw-duration: 200ms;
          transition-duration: 200ms;
          --tw-ease: var(--ease-in-out);
          transition-timing-function: var(--ease-in-out);
          &:hover {
            @media (hover: hover) {
              scale: 1.025;
            }
          }
          &:hover {
            @media (hover: hover) {
              background-color: #0b4791;
            }
          }
          &:hover {
            @media (hover: hover) {
              --tw-shadow: 0px 0px 10px var(--tw-shadow-color, #0000001);
              box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
            }
          }
          &:active {
            scale: 0.95;
          }
          &:active {
            --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);
          }
        }
        .auth__signin__button__signup {
          height: 45px;
          width: 100%;
          cursor: pointer;
          border-radius: 7.5px;
          border-style: var(--tw-border-style);
          border-width: 3px;
          border-color: #005ac8;
          background-color: #d1e6ff;
          padding: 5px 45px 8px;
          text-align: center;
          font-family: kalameh-medium;
          font-size: 22px;
          --tw-leading: 30px;
          line-height: 30px;
          color: #003e8a;
          --tw-duration: 200ms;
          transition-duration: 200ms;
          --tw-ease: var(--ease-in-out);
          transition-timing-function: var(--ease-in-out);
          &:hover {
            @media (hover: hover) {
              scale: 1.025;
            }
          }
          &:hover {
            @media (hover: hover) {
              background-color: #005ac8;
            }
          }
          &:hover {
            @media (hover: hover) {
              color: var(--color-white);
            }
          }
          &:hover {
            @media (hover: hover) {
              --tw-shadow: 0px 0px 10px var(--tw-shadow-color, #0000001);
              box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
            }
          }
          &:active {
            scale: 0.95;
          }
          &:active {
            border-color: #0b4791;
          }
          &:active {
            background-color: #0b4791;
          }
          &:active {
            --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);
          }
        }
      }
      .auth__signin__otherWay__separator {
        display: flex;
        width: 100%;
        align-items: center;
        .auth__signin__otherWay__line {
          flex: 1;
          border-top-style: var(--tw-border-style);
          border-top-width: 1px;
          border-color: var(--color-gray-300);
        }
        .auth__signin__otherWay__separator__text {
          padding-inline: calc(var(--spacing) * 3);
          font-family: kalameh-medium;
          font-size: 20px;
          color: var(--color-gray-500);
        }
      }
      .auth__signin__otherWay__google__linkedin__git__section {
        display: flex;
        gap: 7.5px;
        .auth__signin__otherWay__linkedin {
          display: flex;
          height: 50px;
          width: 50px;
          align-items: center;
          justify-content: space-between;
          gap: 6px;
          overflow: hidden;
          border-radius: 7.5px;
          border-style: var(--tw-border-style);
          border-width: 2px;
          border-color: var(--color-white);
          background-color: var(--color-sky-700);
          padding-right: 41.5px;
          padding-left: 6px;
          --tw-shadow: 0 0 3px var(--tw-shadow-color, #00000066);
          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;
          --tw-ease: var(--ease-in-out);
          transition-timing-function: var(--ease-in-out);
          .auth__signin__otherWay__linkedin__svg {
            height: 35px;
            min-width: 35px;
            border-radius: 5px;
            background-color: var(--color-white);
            padding: 4px;
            padding-top: 4.5px;
          }
          .auth__signin__otherWay__linkedin__p {
            margin-right: 10px;
            font-family: kalameh-bold;
            font-size: 15px;
            text-wrap: nowrap;
            color: var(--color-white);
            opacity: 0%;
            transition-property: all;
            transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
            transition-duration: var(--tw-duration, var(--default-transition-duration));
            transition-delay: 150ms;
            --tw-duration: 250ms;
            transition-duration: 250ms;
            --tw-ease: var(--ease-in-out);
            transition-timing-function: var(--ease-in-out);
          }
        }
        .auth__signin__otherWay__git {
          display: flex;
          height: 50px;
          width: 50px;
          align-items: center;
          justify-content: space-between;
          gap: 6px;
          overflow: hidden;
          border-radius: 7.5px;
          border-style: var(--tw-border-style);
          border-width: 2px;
          border-color: var(--color-white);
          background-color: var(--color-sky-700);
          padding-right: 41.5px;
          padding-left: 6px;
          --tw-shadow: 0 0 3px var(--tw-shadow-color, #00000066);
          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;
          --tw-ease: var(--ease-in-out);
          transition-timing-function: var(--ease-in-out);
          .auth__signin__otherWay__git__svg {
            height: 35px;
            min-width: 35px;
            border-radius: 5px;
            background-color: var(--color-white);
            padding: 4px;
          }
          .auth__signin__otherWay__git__p {
            margin-right: 10px;
            font-family: kalameh-bold;
            font-size: 15px;
            text-wrap: nowrap;
            color: var(--color-white);
            opacity: 0%;
            transition-property: all;
            transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
            transition-duration: var(--tw-duration, var(--default-transition-duration));
            transition-delay: 150ms;
            --tw-duration: 250ms;
            transition-duration: 250ms;
            --tw-ease: var(--ease-in-out);
            transition-timing-function: var(--ease-in-out);
          }
        }
        .auth__signin__otherWay__google {
          display: flex;
          height: 50px;
          width: 50px;
          align-items: center;
          justify-content: space-between;
          gap: 6px;
          overflow: hidden;
          border-radius: 7.5px;
          border-style: var(--tw-border-style);
          border-width: 2px;
          border-color: var(--color-white);
          background-color: var(--color-sky-700);
          padding-right: 41.5px;
          padding-left: 6px;
          --tw-shadow: 0 0 3px var(--tw-shadow-color, #00000066);
          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;
          --tw-ease: var(--ease-in-out);
          transition-timing-function: var(--ease-in-out);
          .auth__signin__otherWay__google__svg {
            height: 35px;
            min-width: 35px;
            border-radius: 5px;
            background-color: var(--color-white);
            padding: 4px;
          }
          .auth__signin__otherWay__google__p {
            font-family: kalameh-bold;
            font-size: 15px;
            text-wrap: nowrap;
            color: var(--color-white);
            opacity: 0%;
            transition-property: all;
            transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
            transition-duration: var(--tw-duration, var(--default-transition-duration));
            transition-delay: 150ms;
            --tw-duration: 250ms;
            transition-duration: 250ms;
            --tw-ease: var(--ease-in-out);
            transition-timing-function: var(--ease-in-out);
          }
        }
      }
    }
  }
}
.auth__signup__main {
  display: flex;
  height: 100vh;
  width: 100%;
  overflow-y: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  .auth__signup__section {
    display: flex;
    height: 100dvh;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background-color: #e8f1f2;
    --tw-shadow: -10px 0 20px var(--tw-shadow-color, #00000080);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-shadow-color: #000;
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, var(--color-black) var(--tw-shadow-alpha), transparent);
    }
    @media (width >= 1024px) {
      width: 50%;
    }
  }
}
.auth__signup {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  .auth__signup__title {
    text-align: center;
    font-family: kalameh-bold;
    font-size: 30px;
    .auth__signup__title__span {
      color: #13293d;
    }
  }
  .auth__signup__form {
    display: flex;
    width: 90%;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    @media (width >= 1024px) {
      width: 75%;
    }
    .auth__signup__form__submit__section {
      display: flex;
      width: 100%;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      @media (width >= 896px) {
        flex-direction: row;
      }
      .auth__signup__form__submit {
        height: 45px;
        width: 100%;
        cursor: pointer;
        border-radius: 7.5px;
        background-color: #005ac8;
        padding: 5px 50px 8px;
        font-family: kalameh-regular;
        font-size: 22px;
        --tw-leading: 30px;
        line-height: 30px;
        color: var(--color-white);
        --tw-duration: 200ms;
        transition-duration: 200ms;
        --tw-ease: var(--ease-in-out);
        transition-timing-function: var(--ease-in-out);
        -webkit-user-select: none;
        user-select: none;
        &:hover {
          @media (hover: hover) {
            scale: 1.025;
          }
        }
        &:hover {
          @media (hover: hover) {
            background-color: #0b4791;
          }
        }
        &:hover {
          @media (hover: hover) {
            --tw-shadow: 0px 0px 10px var(--tw-shadow-color, #0000001);
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
          }
        }
        &:active {
          scale: 0.95;
        }
        &:active {
          --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);
        }
      }
    }
  }
}
.auth__person__otherway {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  .auth__signin__otherWay__separator {
    display: flex;
    width: 100%;
    align-items: center;
    .auth__signin__otherWay__line {
      flex: 1;
      border-top-style: var(--tw-border-style);
      border-top-width: 1px;
      border-color: var(--color-gray-300);
    }
    .auth__signin__otherWay__separator__text {
      padding-inline: calc(var(--spacing) * 3);
      font-family: kalameh-medium;
      font-size: 20px;
      color: var(--color-gray-500);
    }
  }
  .auth__signin__otherWay__google__linkedin__git__section {
    display: flex;
    gap: 7.5px;
    .auth__signin__otherWay__linkedin {
      display: flex;
      height: 50px;
      width: 50px;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      overflow: hidden;
      border-radius: 7.5px;
      border-style: var(--tw-border-style);
      border-width: 2px;
      border-color: var(--color-white);
      background-color: var(--color-sky-700);
      padding-right: 41.5px;
      padding-left: 6px;
      --tw-shadow: 0 0 3px var(--tw-shadow-color, #00000066);
      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;
      --tw-ease: var(--ease-in-out);
      transition-timing-function: var(--ease-in-out);
      .auth__signin__otherWay__linkedin__svg {
        height: 35px;
        min-width: 35px;
        border-radius: 5px;
        background-color: var(--color-white);
        padding: 4px;
        padding-top: 4.5px;
      }
      .auth__signin__otherWay__linkedin__p {
        margin-right: 10px;
        font-family: kalameh-bold;
        font-size: 15px;
        text-wrap: nowrap;
        color: var(--color-white);
        opacity: 0%;
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        transition-delay: 150ms;
        --tw-duration: 250ms;
        transition-duration: 250ms;
        --tw-ease: var(--ease-in-out);
        transition-timing-function: var(--ease-in-out);
      }
    }
    .auth__signin__otherWay__git {
      display: flex;
      height: 50px;
      width: 50px;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      overflow: hidden;
      border-radius: 7.5px;
      border-style: var(--tw-border-style);
      border-width: 2px;
      border-color: var(--color-white);
      background-color: var(--color-sky-700);
      padding-right: 41.5px;
      padding-left: 6px;
      --tw-shadow: 0 0 3px var(--tw-shadow-color, #00000066);
      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;
      --tw-ease: var(--ease-in-out);
      transition-timing-function: var(--ease-in-out);
      .auth__signin__otherWay__git__svg {
        height: 35px;
        min-width: 35px;
        border-radius: 5px;
        background-color: var(--color-white);
        padding: 4px;
      }
      .auth__signin__otherWay__git__p {
        margin-right: 10px;
        font-family: kalameh-bold;
        font-size: 15px;
        text-wrap: nowrap;
        color: var(--color-white);
        opacity: 0%;
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        transition-delay: 150ms;
        --tw-duration: 250ms;
        transition-duration: 250ms;
        --tw-ease: var(--ease-in-out);
        transition-timing-function: var(--ease-in-out);
      }
    }
    .auth__signin__otherWay__google {
      display: flex;
      height: 50px;
      width: 50px;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      overflow: hidden;
      border-radius: 7.5px;
      border-style: var(--tw-border-style);
      border-width: 2px;
      border-color: var(--color-white);
      background-color: var(--color-sky-700);
      padding-right: 41.5px;
      padding-left: 6px;
      --tw-shadow: 0 0 3px var(--tw-shadow-color, #00000066);
      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;
      --tw-ease: var(--ease-in-out);
      transition-timing-function: var(--ease-in-out);
      .auth__signin__otherWay__google__svg {
        height: 35px;
        min-width: 35px;
        border-radius: 5px;
        background-color: var(--color-white);
        padding: 4px;
      }
      .auth__signin__otherWay__google__p {
        font-family: kalameh-bold;
        font-size: 15px;
        text-wrap: nowrap;
        color: var(--color-white);
        opacity: 0%;
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        transition-delay: 150ms;
        --tw-duration: 250ms;
        transition-duration: 250ms;
        --tw-ease: var(--ease-in-out);
        transition-timing-function: var(--ease-in-out);
      }
    }
  }
}
.filter-switch {
  direction: ltr;
  position: relative;
  display: flex;
  height: 49px;
  width: 275px;
  align-items: center;
  overflow: hidden;
  border-radius: 30px;
  border-style: var(--tw-border-style);
  border-width: 2px;
  border-color: #ffc000;
  font-family: kalameh-bold;
}
.filter-switch input {
  display: none;
}
.filter-switch label {
  position: relative;
  z-index: 1;
  flex: 1;
  cursor: pointer;
  overflow: hidden;
  border-radius: 30px;
  border-color: none;
  text-align: center;
  font-size: 18px;
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  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: 0.5s;
  transition-duration: 0.5s;
}
.filter-switch .background {
  transition: left 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: absolute;
  top: 4px;
  left: 4px;
  height: 38px;
  width: 49%;
  border-radius: 30px;
  background-color: #ffc000;
}
#option2:checked ~ .background {
  left: 50%;
}
#option1:checked + label[for="option1"] {
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: #212121;
}
#option2:checked + label[for="option2"] {
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: #212121;
}
#option1:not(:checked) + label[for="option1"], #option2:not(:checked) + label[for="option2"] {
  color: #a0a0a0;
}
#nav-icon {
  position: relative;
  right: -7.5px;
  margin-inline: auto;
  display: flex;
  height: 45px;
  width: 60px;
  scale: 0.75;
  --tw-rotate-y: rotateY(180deg);
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  cursor: pointer;
  transition-property: transform;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 500ms;
  transition-duration: 500ms;
  --tw-ease: var(--ease-in-out);
  transition-timing-function: var(--ease-in-out);
  @media (width >= 768px) {
    display: none;
  }
}
#nav-icon span {
  position: absolute;
  left: calc(var(--spacing) * 0);
  display: block;
  height: 9px;
  width: 100%;
  border-radius: 9px;
  background-color: #005ac8;
  opacity: 100%;
  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: 200ms;
  transition-duration: 200ms;
  --tw-ease: var(--ease-in-out);
  transition-timing-function: var(--ease-in-out);
}
#nav-icon span:nth-child(1) {
  top: calc(var(--spacing) * 0);
  transform-origin: left;
}
#nav-icon span:nth-child(2) {
  top: 18px;
  transform-origin: left;
}
#nav-icon span:nth-child(3) {
  top: 36px;
  transform-origin: left;
}
#nav-icon.open span:nth-child(1) {
  top: -3px;
  left: 8px;
  rotate: 45deg;
}
#nav-icon.open span:nth-child(2) {
  width: calc(var(--spacing) * 0);
  opacity: 0%;
}
#nav-icon.open span:nth-child(3) {
  top: 39px;
  left: 8px;
  rotate: calc(45deg * -1);
}
.contact__page__main {
  display: flex;
  height: fit-content;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 50px;
  .contact__page__hero {
    display: flex;
    height: fit-content;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    --tw-gradient-position: 145deg,#0055ff,#005ac8;
    background-image: linear-gradient(var(--tw-gradient-stops,145deg,#0055ff,#005ac8));
    padding: 15px;
    .contact__page__hero__topic {
      display: flex;
      height: 60px;
      width: 100%;
      max-width: 1410px;
      align-items: center;
      justify-content: space-between;
      border-radius: 7.5px;
      border-style: var(--tw-border-style);
      border-width: 3px;
      border-color: #d9e6ec;
      background-color: #e8f1f2;
      padding: 10px;
      .contact__page__hero__topic__svg {
        margin-top: 1.75px;
        width: 25px;
        @media (width >= 430px) {
          width: 40px;
        }
      }
      .contact__page__hero__topic__text {
        display: flex;
        --tw-gradient-position: to right in oklab;
        background-image: linear-gradient(var(--tw-gradient-stops));
        --tw-gradient-from: #002e66;
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
        --tw-gradient-to: #0067b1;
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
        background-clip: text;
        text-align: center;
        font-family: kalameh-black;
        font-size: 25px;
        --tw-leading: 45px;
        line-height: 45px;
        color: transparent;
        -webkit-user-select: none;
        user-select: none;
      }
      .contact__page__hero__topic__education {
        width: 25px;
        --tw-duration: 200ms;
        transition-duration: 200ms;
        --tw-ease: var(--ease-in-out);
        transition-timing-function: var(--ease-in-out);
        &:hover {
          @media (hover: hover) {
            scale: 1.025;
          }
        }
        &:active {
          scale: 0.925;
        }
        @media (width >= 430px) {
          width: 35px;
        }
      }
    }
    .contact__page__map {
      margin-top: 10px;
      display: flex;
      height: fit-content;
      width: 100%;
      max-width: 1410px;
      flex-direction: column;
      align-items: flex-end;
      gap: 20px;
      @media (width >= 768px) {
        flex-direction: row;
      }
      .contact__page__map__iframe {
        z-index: 1 !important;
        height: 400px;
        width: 100%;
        overflow: hidden;
        border-radius: 10px;
        border-style: var(--tw-border-style);
        border-width: 3px;
        border-color: #d9e6ec;
        background-color: #e8f1f2;
        --tw-shadow: 0 0 20px var(--tw-shadow-color, #00000070), inset 0 0 7.5px var(--tw-shadow-color, #00000050);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        @media (width >= 768px) {
          width: 50%;
        }
        @media (width >= 1232px) {
          width: calc(100% * 2 / 3);
        }
        .contact__page__map__iframe__section {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 25px;
          .contact__page__map__iframe__main {
            position: relative;
            height: 400px;
            width: 100%;
            --tw-shadow: 0 0 5px var(--tw-shadow-color, #00000066);
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
            .contact__page__map__iframe__iframe {
              height: 100%;
              width: 100%;
            }
            .contact__page__map__iframe__balad__neshan {
              position: absolute;
              bottom: 10.75px;
              left: 59.75px;
              display: flex;
              gap: 7.5px;
              .contact__page__map__iframe__balad {
                display: flex;
                height: 41px;
                width: 41px;
                align-items: center;
                justify-content: space-between;
                gap: 6px;
                overflow: hidden;
                border-radius: 7.5px;
                border-style: var(--tw-border-style);
                border-width: 2px;
                border-color: var(--color-white);
                background-color: var(--color-sky-700);
                padding-right: 6px;
                padding-left: 4px;
                --tw-shadow: 0 0 3px var(--tw-shadow-color, #00000066);
                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;
                --tw-ease: var(--ease-in-out);
                transition-timing-function: var(--ease-in-out);
                .contact__page__map__iframe__balad__svg {
                  height: 30px;
                  min-width: 30px;
                }
                .contact__page__map__iframe__balad__text {
                  font-family: kalameh-bold;
                  font-size: 12px;
                  text-wrap: nowrap;
                  color: var(--color-white);
                  opacity: 0%;
                  transition-property: all;
                  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
                  transition-duration: var(--tw-duration, var(--default-transition-duration));
                  transition-delay: 150ms;
                  --tw-duration: 250ms;
                  transition-duration: 250ms;
                  --tw-ease: var(--ease-in-out);
                  transition-timing-function: var(--ease-in-out);
                }
              }
              .contact__page__map__iframe__neshan {
                display: flex;
                height: 41px;
                width: 41px;
                align-items: center;
                justify-content: space-between;
                gap: 6px;
                overflow: hidden;
                border-radius: 7.5px;
                border-style: var(--tw-border-style);
                border-width: 2px;
                border-color: var(--color-white);
                background-color: var(--color-sky-700);
                padding-right: 6px;
                padding-left: 4px;
                --tw-shadow: 0 0 3px var(--tw-shadow-color, #00000066);
                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;
                --tw-ease: var(--ease-in-out);
                transition-timing-function: var(--ease-in-out);
                .contact__page__map__iframe__neshan__svg {
                  height: 30px;
                  min-width: 30px;
                  border-radius: 5px;
                  background-color: var(--color-white);
                  padding: 2px;
                }
                .contact__page__map__iframe__neshan__p {
                  font-family: kalameh-bold;
                  font-size: 12px;
                  text-wrap: nowrap;
                  color: var(--color-white);
                  opacity: 0%;
                  transition-property: all;
                  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
                  transition-duration: var(--tw-duration, var(--default-transition-duration));
                  transition-delay: 150ms;
                  --tw-duration: 250ms;
                  transition-duration: 250ms;
                  --tw-ease: var(--ease-in-out);
                  transition-timing-function: var(--ease-in-out);
                }
              }
            }
          }
        }
      }
      .contact__page__map__adress {
        position: relative;
        z-index: 2 !important;
        margin-top: 50px;
        display: flex;
        height: 350px;
        width: 100%;
        flex-direction: column;
        justify-content: center;
        gap: 40px;
        border-radius: 10px;
        border-style: var(--tw-border-style);
        border-width: 3px;
        border-color: #d9e6ec;
        background-color: #e8f1f2;
        padding: 60px 20px 20px;
        text-align: center;
        font-family: kalameh-medium;
        --tw-shadow: 0 0 20px var(--tw-shadow-color, #00000070);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        @media (width >= 768px) {
          width: 50%;
        }
        @media (width >= 1232px) {
          width: calc(100% * 1 / 3);
        }
        .contact__page__map__adress__icon {
          position: absolute;
          top: -60px;
          left: 50%;
          height: 115px;
          width: 115px;
          --tw-translate-x: -50%;
          translate: var(--tw-translate-x) var(--tw-translate-y);
          border-radius: calc(infinity * 1px);
          border-style: var(--tw-border-style);
          border-width: 3px;
          border-color: #d9e6ec;
          --tw-gradient-position: 145deg,#d1d9da,#f8ffff;
          background-image: linear-gradient(var(--tw-gradient-stops,145deg,#d1d9da,#f8ffff));
          padding: 15px;
          --tw-shadow: 0 5px 20px var(--tw-shadow-color, #00000020);
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
        .contact__page__map__adress__topic {
          margin-top: 20px;
          border-radius: 10px;
          border-style: var(--tw-border-style);
          border-width: 5px;
          border-color: #0073ff;
          --tw-gradient-position: 145deg,#0058E2,#005ACA;
          background-image: linear-gradient(var(--tw-gradient-stops,145deg,#0058E2,#005ACA));
          padding: 10px;
          font-family: kalameh-bold;
          font-size: 25px;
          color: var(--color-white);
          --tw-inset-shadow: inset 0 0 7.5px var(--tw-inset-shadow-color, #00000066);
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
          -webkit-user-select: none;
          user-select: none;
        }
        .contact__page__map__adress__text {
          height: 70%;
          font-size: 20px;
          --tw-leading: 35px;
          line-height: 35px;
          span {
            margin-inline: 7.5px;
            display: inline-flex;
            height: 25px;
            width: 3px;
            --tw-translate-y: 5px;
            translate: var(--tw-translate-x) var(--tw-translate-y);
            rotate: 30deg;
            align-items: center;
            justify-content: center;
            border-radius: calc(infinity * 1px);
            background-color: #005ac8;
          }
        }
      }
    }
  }
  .contact__page__call__time__url {
    margin-top: 10px;
    display: flex;
    height: fit-content;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 15px;
    .contact__page__call__time__url__section {
      display: flex;
      width: 100%;
      max-width: 1410px;
      flex-direction: column;
      align-items: flex-end;
      gap: 20px;
      @media (width >= 768px) {
        flex-direction: row;
      }
      .contact__page__call, .contact__page__time, .contact__page__url {
        position: relative;
        margin-top: 50px;
        display: flex;
        height: 350px;
        width: 100%;
        flex-direction: column;
        justify-content: center;
        gap: 10px;
        border-radius: 10px;
        border-style: var(--tw-border-style);
        border-width: 3px;
        border-color: #d9e6ec;
        background-color: #e8f1f2;
        padding: 60px 20px 20px;
        text-align: center;
        font-family: kalameh-medium;
        --tw-shadow: 0 0 10px var(--tw-shadow-color, #2200ff25);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        @media (width >= 768px) {
          width: 50%;
        }
        @media (width >= 1232px) {
          width: calc(100% * 1 / 3);
        }
        .contact__page__call__icon {
          position: absolute;
          top: -60px;
          left: 50%;
          height: 115px;
          width: 115px;
          --tw-translate-x: -50%;
          translate: var(--tw-translate-x) var(--tw-translate-y);
          border-radius: calc(infinity * 1px);
          border-style: var(--tw-border-style);
          border-width: 3px;
          border-color: #d9e6ec;
          --tw-gradient-position: 145deg,#d1d9da,#f8ffff;
          background-image: linear-gradient(var(--tw-gradient-stops,145deg,#d1d9da,#f8ffff));
          padding: 15px;
          --tw-shadow: 0 5px 20px var(--tw-shadow-color, #00000020);
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
          svg {
            position: relative;
            bottom: 4px;
            scale: 0.9;
          }
        }
        .contact__page__time__icon {
          position: absolute;
          top: -60px;
          left: 50%;
          height: 115px;
          width: 115px;
          --tw-translate-x: -50%;
          translate: var(--tw-translate-x) var(--tw-translate-y);
          border-radius: calc(infinity * 1px);
          border-style: var(--tw-border-style);
          border-width: 3px;
          border-color: #d9e6ec;
          --tw-gradient-position: 145deg,#d1d9da,#f8ffff;
          background-image: linear-gradient(var(--tw-gradient-stops,145deg,#d1d9da,#f8ffff));
          padding: 15px;
          --tw-shadow: 0 5px 20px var(--tw-shadow-color, #00000020);
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
          svg {
            scale: 0.95;
            padding-top: 5px;
            padding-left: 7.5px;
          }
        }
        .contact__page__url__icon {
          position: absolute;
          top: -60px;
          left: 50%;
          height: 115px;
          width: 115px;
          --tw-translate-x: -50%;
          translate: var(--tw-translate-x) var(--tw-translate-y);
          border-radius: calc(infinity * 1px);
          border-style: var(--tw-border-style);
          border-width: 3px;
          border-color: #d9e6ec;
          --tw-gradient-position: 145deg,#d1d9da,#f8ffff;
          background-image: linear-gradient(var(--tw-gradient-stops,145deg,#d1d9da,#f8ffff));
          padding: 15px;
          --tw-shadow: 0 5px 20px var(--tw-shadow-color, #00000020);
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
          svg {
            scale: 0.95;
          }
        }
        .contact__page__call__topic, .contact__page__time__topic, .contact__page__url__topic {
          border-radius: 10px;
          border-style: var(--tw-border-style);
          border-width: 5px;
          border-color: #0073ff;
          --tw-gradient-position: 145deg,#0058E2,#005ACA;
          background-image: linear-gradient(var(--tw-gradient-stops,145deg,#0058E2,#005ACA));
          padding: 5px;
          font-family: kalameh-bold;
          font-size: 25px;
          color: var(--color-white);
          --tw-inset-shadow: inset 0 0 7.5px var(--tw-inset-shadow-color, #00000066);
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
          -webkit-user-select: none;
          user-select: none;
          @media (width >= 768px) {
            font-size: 15px;
          }
          @media (width >= 896px) {
            font-size: 20px;
          }
          @media (width >= 1024px) {
            font-size: 25px;
          }
        }
        .contact__page__call__ways, .contact__page__url__ways, .contact__page__time__ways {
          display: flex;
          height: 70%;
          width: 100%;
          flex-direction: column;
          justify-content: space-between;
          a {
            display: flex;
            height: 40px;
            width: 100%;
            cursor: pointer;
            align-items: center;
            justify-content: center;
            gap: 15px;
            border-radius: 7.5px;
            border-style: var(--tw-border-style);
            border-width: 3px;
            border-color: #005ac8;
            background-color: #d1e6ff;
            text-align: center;
            font-family: kalameh-medium;
            font-size: 17.5px;
            --tw-leading: 30px;
            line-height: 30px;
            color: #003e8a;
            --tw-duration: 200ms;
            transition-duration: 200ms;
            --tw-ease: var(--ease-in-out);
            transition-timing-function: var(--ease-in-out);
            &:hover {
              @media (hover: hover) {
                scale: 1.025;
              }
            }
            &:hover {
              @media (hover: hover) {
                background-color: #005ac8;
              }
            }
            &:hover {
              @media (hover: hover) {
                color: var(--color-white);
              }
            }
            &:hover {
              @media (hover: hover) {
                --tw-shadow: 0px 0px 10px var(--tw-shadow-color, #0000001);
                box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
              }
            }
            &:active {
              scale: 0.95;
            }
            &:active {
              border-color: #0b4791;
            }
            &:active {
              background-color: #0b4791;
            }
            &:active {
              --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);
            }
            .contact__page__phone__icon, .contact__page__telegram__icon, .contact__page__mail__icon, .contact__page__eitaa__icon, .contact__page__skytechelec__icon, .contact__page__skytech__icon, .contact__page__skyinfo__icon, .contact__page__stjpco__icon {
              width: 25px;
            }
            .contact__page__skytechelec__icon, .contact__page__skytech__icon, .contact__page__skyinfo__icon, .contact__page__stjpco__icon {
              border-radius: 5px;
              background-color: var(--color-white);
            }
            .contact__page__skytechelec__icon {
              color: #005ac7;
            }
            .contact__page__skytech__icon {
              color: #cb1d13;
            }
            .contact__page__skyinfo__icon {
              color: #940087;
            }
            .contact__page__stjpco__icon {
              color: #145899;
            }
          }
          .contact__page__skytechelec {
            gap: 40px !important;
          }
          .contact__page__skytech {
            gap: 20px !important;
          }
          .contact__page__skyinfo, .contact__page__stjpco {
            gap: 25px !important;
          }
          .contact__page__skytechelec:hover .contact__page__skytechelec__icon {
            background-color: transparent !important;
            color: var(--color-white) !important;
          }
          .contact__page__skytech:hover .contact__page__skytech__icon {
            background-color: transparent !important;
            color: var(--color-white) !important;
          }
          .contact__page__skyinfo:hover .contact__page__skyinfo__icon {
            background-color: transparent !important;
            color: var(--color-white) !important;
          }
          .contact__page__stjpco:hover .contact__page__stjpco__icon {
            background-color: transparent !important;
            color: var(--color-white) !important;
          }
          .contact__page__time__ways__duration {
            display: flex;
            flex-direction: column;
            gap: 5px;
            .duration__topic {
              font-family: kalameh-bold;
              font-size: 20px;
              color: #01205d;
              @media (width >= 768px) {
                font-size: 17.5px;
              }
              @media (width >= 896px) {
                font-size: 20px;
              }
            }
            .duration__time {
              font-size: 17.5px;
              @media (width >= 768px) {
                font-size: 15px;
              }
              @media (width >= 896px) {
                font-size: 17.5px;
              }
            }
          }
          .contact__page__time__ways__off {
            height: fit-content;
            border-radius: 7.5px;
            background-color: #005ac8;
            padding: 10px;
            font-family: kalameh-bold;
            font-size: 13.5px;
            color: var(--color-white);
          }
          hr {
            margin: 0 auto;
            width: 55%;
          }
        }
      }
    }
  }
  .contact__page__massage {
    margin-top: 10px;
    display: flex;
    height: fit-content;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 15px;
    .contact__page__massage__section {
      display: flex;
      width: 100%;
      max-width: 1410px;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      border-radius: 10px;
      --tw-gradient-position: 145deg,#0055ff,#005ac8;
      background-image: linear-gradient(var(--tw-gradient-stops,145deg,#0055ff,#005ac8));
      padding: 20px;
      --tw-shadow: 0 0 10px var(--tw-shadow-color, #2200ff30);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      @media (width >= 768px) {
        flex-direction: row;
      }
      .contact__page__massage__description {
        display: flex;
        height: 100%;
        width: 100%;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding: 20px;
        text-align: center;
        @media (width >= 768px) {
          width: 50%;
        }
        .contact__page__massage__description__title {
          font-family: kalameh-bold;
          font-size: 30px;
          color: var(--color-white);
        }
        .contact__page__massage__description__detail {
          font-family: kalameh-regular;
          font-size: 20px;
          color: var(--color-white);
        }
      }
      .contact__page__massage__form {
        width: 100%;
        border-radius: 7.5px;
        border-style: var(--tw-border-style);
        border-width: 3px;
        border-color: #d9e6ec;
        background-color: #e8f1f2;
        padding: 15px;
        --tw-shadow: 0 0 10px var(--tw-shadow-color, #00000050);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        @media (width >= 768px) {
          width: 50%;
        }
        .contact__page__massage__form__section {
          display: flex;
          flex-direction: column;
          .contact__page__massage__form__mail__topic, .contact__page__massage__form__textarea, .contact__page__massage__form__submit {
            margin-top: 15px;
          }
          .contact__page__massage__form__textarea {
            position: relative;
            display: flex;
            height: 100%;
            min-height: 150px;
            width: 100%;
            align-items: center;
            justify-content: center;
            font-family: kalameh-medium;
            textarea {
              max-height: 300px;
              min-height: 150px;
              width: 100%;
              border-radius: 5px;
              border-style: var(--tw-border-style);
              border-width: 2px;
              border-color: #003f8c;
              background-color: var(--color-white);
              padding: 15px;
              font-family: kalameh-regular;
              font-size: 0.95em;
              color: var(--color-black);
              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: 200ms;
              transition-duration: 200ms;
              --tw-outline-style: none;
              outline-style: none;
              &:focus {
                border-style: var(--tw-border-style);
                border-width: 2px;
                border-color: #0073ff;
                --tw-shadow: 0 0 7.5px var(--tw-shadow-color, #0073ff3d);
                box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
              }
            }
            span {
              pointer-events: none;
              position: absolute;
              top: calc(var(--spacing) * 0);
              right: 10px;
              display: flex;
              flex-direction: row;
              gap: 5px;
              --tw-border-style: none;
              border-style: none;
              padding: 15px 20px;
              font-size: 14px;
              color: #01004a;
              --tw-duration: 1000ms;
              transition-duration: 1000ms;
              --tw-ease: cubic-bezier(0.05,0.81,0,0.93);
              transition-timing-function: cubic-bezier(0.05,0.81,0,0.93);
            }
            .required__field {
              font-size: 11px;
              color: var(--color-red-500);
            }
          }
          .contact__page__massage__form__textarea textarea:not(:placeholder-shown) ~ span, .contact__page__massage__form__textarea textarea:focus ~ span {
            --tw-translate-x: -14px;
            translate: var(--tw-translate-x) var(--tw-translate-y);
            --tw-translate-y: -9px;
            translate: var(--tw-translate-x) var(--tw-translate-y);
            border-radius: 5px;
            border-style: var(--tw-border-style);
            border-width: 2px;
            border-color: #003f8c;
            background-color: #0073ff;
            padding: 1px 5px;
            font-size: 0.75em;
            color: var(--color-white);
            .required__field {
              display: none;
              color: var(--color-white) !important;
            }
          }
          .contact__page__massage__form__name__phone, .contact__page__massage__form__mail__topic {
            display: flex;
            width: 100%;
            flex-direction: column;
            justify-content: space-between;
            gap: 15px;
            @media (width >= 1024px) {
              height: 50px;
            }
            @media (width >= 1024px) {
              flex-direction: row;
            }
            .contact__page__massage__form__name, .contact__page__massage__form__phone, .contact__page__massage__form__mail, .contact__page__massage__form__topic {
              direction: ltr;
              position: relative;
              display: flex;
              height: fit-content;
              width: 100%;
              align-items: center;
              justify-content: center;
              font-family: kalameh-medium;
              @media (width >= 1024px) {
                height: 100%;
              }
              @media (width >= 1024px) {
                width: 50%;
              }
              input {
                height: 40px;
                width: 100%;
                border-radius: 7.5px;
                border-style: var(--tw-border-style);
                border-width: 2px;
                border-color: #003f8c;
                background-color: var(--color-white);
                padding: 0 15px;
                text-align: center;
                font-family: kalameh-regular;
                font-size: 1em;
                color: var(--color-black);
                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: 200ms;
                transition-duration: 200ms;
                --tw-outline-style: none;
                outline-style: none;
                @media (width >= 1024px) {
                  height: 100%;
                }
                &:focus {
                  border-style: var(--tw-border-style);
                  border-width: 2px;
                  border-color: #0073ff;
                  --tw-shadow: 0 0 7.5px var(--tw-shadow-color, #0073ff3d);
                  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
                }
              }
              span {
                pointer-events: none;
                position: absolute;
                right: 10px;
                display: flex;
                flex-direction: row-reverse;
                gap: 5px;
                --tw-border-style: none;
                border-style: none;
                padding: 15px 20px;
                font-size: 14px;
                color: #01004a;
                --tw-duration: 1000ms;
                transition-duration: 1000ms;
                --tw-ease: cubic-bezier(0.05,0.81,0,0.93);
                transition-timing-function: cubic-bezier(0.05,0.81,0,0.93);
              }
              .required__field {
                font-size: 11px;
                color: var(--color-red-500);
              }
            }
            .contact__page__massage__form__name input:valid ~ span, .contact__page__massage__form__name input:focus ~ span, .contact__page__massage__form__phone input:valid ~ span, .contact__page__massage__form__phone input:focus ~ span, .contact__page__massage__form__mail input:not(:placeholder-shown) ~ span, .contact__page__massage__form__mail input:focus ~ span, .contact__page__massage__form__topic input:not(:placeholder-shown) ~ span, .contact__page__massage__form__topic input:focus ~ span {
              --tw-translate-x: -14px;
              translate: var(--tw-translate-x) var(--tw-translate-y);
              --tw-translate-y: -20px;
              translate: var(--tw-translate-x) var(--tw-translate-y);
              border-radius: 5px;
              border-style: var(--tw-border-style);
              border-width: 2px;
              border-color: #003f8c;
              background-color: #0073ff;
              padding: 1px 5px;
              font-size: 0.75em;
              color: var(--color-white);
              @media (width >= 1024px) {
                --tw-translate-y: -25px;
                translate: var(--tw-translate-x) var(--tw-translate-y);
              }
              .required__field {
                display: none;
                color: var(--color-white) !important;
              }
            }
          }
          .contact__page__massage__form__submit {
            height: 50px;
            width: 100%;
            cursor: pointer;
            border-radius: 7.5px;
            background-color: #005ac8;
            font-family: kalameh-bold;
            font-size: 20px;
            color: var(--color-white);
            --tw-duration: 200ms;
            transition-duration: 200ms;
            &:hover {
              @media (hover: hover) {
                scale: 1.015;
              }
            }
            &:hover {
              @media (hover: hover) {
                --tw-shadow: 0px 0px 10px var(--tw-shadow-color, #00000025);
                box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
              }
            }
            &:active {
              scale: 0.975;
            }
          }
        }
      }
    }
  }
}
.home__back__btn {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  height: fit-content;
  width: fit-content;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: kalameh-bold;
  color: #2b2b2b9e;
  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: 200ms;
  transition-duration: 200ms;
  &:hover {
    @media (hover: hover) {
      scale: 1.1;
    }
  }
  &:hover {
    @media (hover: hover) {
      color: #005ac8;
    }
  }
  &:active {
    scale: 0.9;
  }
  .home__back__btn__arrow {
    width: 15px;
  }
}
.forgot__remember {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  .remember__me {
    display: flex;
    width: fit-content;
    gap: 10px;
    font-family: kalameh-regular;
    font-size: 14px;
    -webkit-user-select: none;
    user-select: none;
    .remember__me__check {
      cursor: pointer;
    }
  }
  .forgot {
    display: flex;
    width: fit-content;
    cursor: pointer;
    gap: 10px;
    font-family: kalameh-bold;
    font-size: 17.5px;
    color: #005ac8;
    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;
    &:hover {
      @media (hover: hover) {
        scale: 1.025;
      }
    }
    &:hover {
      @media (hover: hover) {
        color: #0b4791;
      }
    }
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0px 0px 10px var(--tw-shadow-color, #0000001);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
    &:active {
      scale: 0.95;
    }
    &:active {
      --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);
    }
  }
}
.auth__logo {
  width: 75px;
  border-radius: 15px;
  background-color: var(--color-white);
}
.auth__mail__input, .auth__pass__input {
  direction: ltr;
  position: relative;
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  font-family: kalameh-medium;
}
.auth__pass__input {
  position: relative;
  .password__toggle {
    position: absolute;
    left: 15px;
    width: 30px;
    cursor: pointer;
    opacity: 80%;
    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: 200ms;
    transition-duration: 200ms;
    &:hover {
      @media (hover: hover) {
        scale: 1.025;
      }
    }
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0px 0px 10px var(--tw-shadow-color, #0000001);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
    &:active {
      scale: 0.95;
    }
    &:active {
      --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);
    }
  }
}
.auth__mail__input input, .auth__pass__input input {
  height: 45px;
  width: 100%;
  border-radius: 5px;
  border-style: var(--tw-border-style);
  border-width: 2px;
  background-color: var(--color-white);
  padding: 3px 15px;
  text-align: center;
  font-family: kalameh-regular;
  font-size: 1em;
  color: var(--color-black);
  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: 200ms;
  transition-duration: 200ms;
  --tw-outline-style: none;
  outline-style: none;
  &:user-invalid {
    border-color: var(--color-red-500);
  }
  &:user-invalid {
    &:focus {
      border-color: var(--color-red-500) !important;
    }
  }
  &:empty {
    &:focus {
      border-color: #0073ff;
    }
  }
  &:focus {
    border-style: var(--tw-border-style);
    border-width: 2px;
    background-color: var(--color-white) !important;
    --tw-shadow: 0 0 7.5px var(--tw-shadow-color, #0073ff3d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
}
.auth__mail__input span, .auth__pass__input span {
  pointer-events: none;
  position: absolute;
  right: calc(var(--spacing) * 0);
  --tw-border-style: none;
  border-style: none;
  padding: 15px 20px;
  font-size: 1em;
  color: #01004a;
  --tw-duration: 1000ms;
  transition-duration: 1000ms;
  --tw-ease: cubic-bezier(0.05,0.81,0,0.93);
  transition-timing-function: cubic-bezier(0.05,0.81,0,0.93);
}
.auth__mail__input input:focus ~ span, .auth__mail__input input:valid ~ span, .auth__pass__input input:focus ~ span, .auth__pass__input input:valid ~ span {
  --tw-translate-x: -15.5px;
  translate: var(--tw-translate-x) var(--tw-translate-y);
  --tw-translate-y: -22.5px;
  translate: var(--tw-translate-x) var(--tw-translate-y);
  border-radius: 5px;
  border-style: var(--tw-border-style);
  border-width: 2px;
  border-color: #003f8c;
  background-color: #0073ff;
  padding: 0 5px;
  font-size: 0.8em;
  color: var(--color-white);
  .required__field {
    display: none;
    color: var(--color-white) !important;
  }
}
.auth__mail__input input:user-invalid ~ span, .auth__pass__input input:user-invalid ~ span {
  --tw-translate-x: -15.5px;
  translate: var(--tw-translate-x) var(--tw-translate-y);
  --tw-translate-y: -22.5px;
  translate: var(--tw-translate-x) var(--tw-translate-y);
  border-radius: 5px;
  border-style: var(--tw-border-style);
  border-width: 2px;
  border-color: var(--color-red-500);
  background-color: var(--color-red-500);
  padding: 0 5px;
  font-size: 0.8em;
  color: var(--color-white);
  .required__field {
    display: none;
    color: var(--color-white) !important;
  }
}
.auth__mail__input span, .auth__pass__input span {
  display: flex;
  flex-direction: row-reverse;
  gap: 5px;
  .required__field {
    font-size: 15px;
    color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 75%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-red-500) 75%, transparent);
    }
  }
}
.person__auth {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 20px;
}
.company__auth {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 20px;
  .company__auth__name__code {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 20px;
    @media (width >= 430px) {
      flex-direction: row;
    }
  }
  .company__auth__name__phone {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 20px;
    @media (width >= 430px) {
      flex-direction: row;
    }
  }
  .company__auth__name__mail {
    display: flex;
    width: 100%;
    gap: 20px;
  }
}
.auth__mail__input, .auth__pass__input, .auth__pass__input__confirm, .auth__name__input, .auth__tell__input {
  direction: ltr;
  position: relative;
  display: flex;
  height: fit-content;
  width: 100%;
  align-items: center;
  justify-content: center;
  font-family: kalameh-medium;
  .auth__pass__input__auto {
    position: absolute;
    left: 15px;
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: 10px;
    font-family: kalameh-bold;
    font-size: 13px;
    color: #2b2b2b;
    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: 200ms;
    transition-duration: 200ms;
    &:hover {
      @media (hover: hover) {
        scale: 1.05;
      }
    }
    &:hover {
      @media (hover: hover) {
        color: #005ac8;
      }
    }
    &:active {
      scale: 0.95;
    }
  }
  .auth__pass__input__auto__separator {
    position: absolute;
    left: 100px;
    display: block;
    height: 25px;
    width: 2px;
    border-radius: calc(infinity * 1px);
    background-color: color-mix(in srgb, oklch(50% 0.134 242.749) 75%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-sky-700) 75%, transparent);
    }
  }
}
.auth__pass__input__confirm {
  position: relative;
  .password__toggle {
    position: absolute;
    left: 15px;
    width: 30px;
    cursor: pointer;
    opacity: 80%;
    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: 200ms;
    transition-duration: 200ms;
    &:hover {
      @media (hover: hover) {
        scale: 1.025;
      }
    }
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0px 0px 10px var(--tw-shadow-color, #0000001);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
    &:active {
      scale: 0.95;
    }
    &:active {
      --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);
    }
  }
}
.auth__mail__input input, .auth__pass__input input, .auth__pass__input__confirm input, .auth__name__input input, .auth__tell__input input {
  height: 40px;
  width: 100%;
  border-radius: 5px;
  border-style: var(--tw-border-style);
  border-width: 2px;
  background-color: var(--color-white);
  padding: 3px 15px;
  text-align: center;
  font-family: kalameh-regular;
  font-size: 1em;
  color: var(--color-black);
  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: 200ms;
  transition-duration: 200ms;
  --tw-outline-style: none;
  outline-style: none;
  &:user-invalid {
    border-color: var(--color-red-500);
  }
  &:user-invalid {
    &:focus {
      border-color: var(--color-red-500) !important;
    }
  }
  &:empty {
    &:focus {
      border-color: #0073ff;
    }
  }
  &:focus {
    border-style: var(--tw-border-style);
    border-width: 2px;
    background-color: var(--color-white) !important;
    --tw-shadow: 0 0 7.5px var(--tw-shadow-color, #0073ff3d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
}
.auth__mail__input span, .auth__pass__input span, .auth__pass__input__confirm span, .auth__name__input span, .auth__tell__input span {
  pointer-events: none;
  position: absolute;
  right: calc(var(--spacing) * 0);
  --tw-border-style: none;
  border-style: none;
  padding: 15px 20px;
  font-size: 1em;
  color: #01004a;
  --tw-duration: 1000ms;
  transition-duration: 1000ms;
  --tw-ease: cubic-bezier(0.05,0.81,0,0.93);
  transition-timing-function: cubic-bezier(0.05,0.81,0,0.93);
}
.auth__mail__input input:focus ~ span, .auth__mail__input input:valid ~ span, .auth__pass__input input:focus ~ span, .auth__pass__input input:valid ~ span, .auth__name__input input:focus ~ span, .auth__name__input input:valid ~ span, .auth__tell__input input:focus ~ span, .auth__tell__input input:valid ~ span, .auth__pass__input__confirm input:focus ~ span, .auth__pass__input__confirm input:valid ~ span {
  --tw-translate-x: -15.5px;
  translate: var(--tw-translate-x) var(--tw-translate-y);
  --tw-translate-y: -22.5px;
  translate: var(--tw-translate-x) var(--tw-translate-y);
  border-radius: 5px;
  border-style: var(--tw-border-style);
  border-width: 2px;
  border-color: #003f8c;
  background-color: #0073ff;
  padding: 0 5px;
  font-size: 0.8em;
  color: var(--color-white);
  .required__field {
    display: none;
    color: var(--color-white) !important;
  }
}
.auth__mail__input input:user-invalid ~ span, .auth__pass__input input:user-invalid ~ span, .auth__name__input input:user-invalid ~ span, .auth__tell__input input:user-invalid ~ span, .auth__pass__input__confirm input:user-invalid ~ span {
  --tw-translate-x: -15.5px;
  translate: var(--tw-translate-x) var(--tw-translate-y);
  --tw-translate-y: -22.5px;
  translate: var(--tw-translate-x) var(--tw-translate-y);
  border-radius: 5px;
  border-style: var(--tw-border-style);
  border-width: 2px;
  border-color: var(--color-red-500);
  background-color: var(--color-red-500);
  padding: 0 5px;
  font-size: 0.8em;
  color: var(--color-white);
  .required__field {
    display: none;
    color: var(--color-white) !important;
  }
}
.auth__mail__input span, .auth__pass__input span, .auth__pass__input__confirm span, .auth__name__input span, .auth__tell__input span {
  display: flex;
  flex-direction: row-reverse;
  gap: 5px;
  .required__field {
    font-size: 15px;
    color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 75%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-red-500) 75%, transparent);
    }
  }
}
.foreign__order__main {
  display: flex;
  height: fit-content;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  background-image: url('./images/global-semi.webp');
  background-size: cover;
  padding: 15px;
  padding-top: 20px;
  .foreign__order__topic {
    display: flex;
    height: 60px;
    width: 100%;
    max-width: 1400px;
    align-items: center;
    justify-content: space-between;
    border-radius: 7.5px;
    border-style: var(--tw-border-style);
    border-width: 3px;
    border-color: #d9e6ec;
    background-color: #e8f1f2;
    padding: 10px;
    .foreign__order__topic__svg {
      margin-top: 1.75px;
      width: 25px;
      @media (width >= 430px) {
        width: 40px;
      }
    }
    .foreign__order__topic__title {
      display: flex;
      --tw-gradient-position: to right in oklab;
      background-image: linear-gradient(var(--tw-gradient-stops));
      --tw-gradient-from: #002e66;
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      --tw-gradient-to: #0067b1;
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      background-clip: text;
      text-align: center;
      font-family: kalameh-black;
      font-size: 15px;
      --tw-leading: 45px;
      line-height: 45px;
      color: transparent;
      -webkit-user-select: none;
      user-select: none;
      @media (width >= 430px) {
        font-size: 22.5px;
      }
    }
    .foreign__order__topic__education {
      width: 25px;
      --tw-duration: 200ms;
      transition-duration: 200ms;
      --tw-ease: var(--ease-in-out);
      transition-timing-function: var(--ease-in-out);
      &:hover {
        @media (hover: hover) {
          scale: 1.025;
        }
      }
      &:active {
        scale: 0.925;
      }
      @media (width >= 430px) {
        width: 35px;
      }
    }
  }
  .foreign__order__education {
    position: relative;
    margin: 0 auto;
    display: flex;
    height: 250px;
    width: 100%;
    max-width: 1400px;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    border-radius: 7.5px;
    border-style: var(--tw-border-style);
    border-width: 3px;
    border-color: #d9e6ec;
    background-color: #E8F1F2;
    padding: 0 10px;
    .swiper__slide__start__gradient {
      position: absolute;
      right: 10px;
      z-index: 2;
      height: 100%;
      width: 40px;
      --tw-gradient-position: to left in oklab;
      background-image: linear-gradient(var(--tw-gradient-stops));
      --tw-gradient-from: #e8f1f2;
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      --tw-gradient-via: #e8f1f280;
      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
      --tw-gradient-stops: var(--tw-gradient-via-stops);
      --tw-gradient-to: #e8f1f200;
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
    .swiper__slide__end__gradient {
      position: absolute;
      left: 10px;
      z-index: 1;
      height: 100%;
      width: 50px;
      --tw-gradient-position: to left in oklab;
      background-image: linear-gradient(var(--tw-gradient-stops));
      --tw-gradient-from: #e8f1f200;
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      --tw-gradient-via: #e8f1f280;
      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
      --tw-gradient-stops: var(--tw-gradient-via-stops);
      --tw-gradient-to: #e8f1f2;
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
    .swiper {
      margin-right: auto;
      margin-left: auto;
      height: 100%;
      width: 100%;
      justify-content: center;
    }
    .swiper-slide {
      display: flex;
      height: 90%;
      width: 210px !important;
      align-items: center;
      justify-content: center;
      text-align: center;
      .swiper__slide__right {
        display: flex;
        height: 100%;
        width: 80%;
        flex-direction: column;
        .text {
          font-size: 13.1px;
        }
        .swiper__slide__right__topic {
          display: flex;
          height: 20%;
          width: 100%;
          flex-direction: row;
          gap: 4px;
          font-family: kalameh-bold;
          .swiper__slide__right__topic__icon {
            display: flex;
            height: 100%;
            width: 44.13px;
            align-items: center;
            justify-content: center;
            border-radius: 5px;
            background-color: #003f8c;
            padding-top: 5px;
            font-size: 20px;
            color: var(--color-white);
          }
          .swiper__slide__right__topic__p {
            display: flex;
            align-items: center;
            padding-right: 5px;
            --tw-leading: 17.5px;
            line-height: 17.5px;
            text-wrap: nowrap;
          }
          .item1 {
            font-size: 20px !important;
          }
          .item2 {
            font-size: 16px !important;
          }
          .item3 {
            font-size: 14px !important;
          }
          .item4 {
            font-size: 19px !important;
          }
        }
        .swiper__slide__right__p {
          margin: 15px 0px;
          display: flex;
          height: 80%;
          max-height: 170px;
          width: 100%;
          max-width: 180px;
          flex-direction: column;
          justify-content: center;
          gap: 5px;
          border-radius: 7.5px;
          --tw-gradient-position: to bottom right in oklab;
          background-image: linear-gradient(var(--tw-gradient-stops));
          --tw-gradient-from: #d1d9da8c;
          --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
          --tw-gradient-to: #f8ffff;
          --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
          padding: 15px 20px;
          text-align: justify;
          font-family: kalameh-bold;
          font-size: 13.15px;
          color: var(--color-black);
          --tw-shadow: 5px 5px 10px var(--tw-shadow-color, #d1d9daa4), -5px -5px 10px var(--tw-shadow-color, #ffffff9b);
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
          --tw-duration: 350ms;
          transition-duration: 350ms;
          --tw-ease: var(--ease-in-out);
          transition-timing-function: var(--ease-in-out);
          .swiper__slide__right__p__link1,.swiper__slide__right__p__link2,.swiper__slide__right__p__link3 {
            cursor: pointer;
            --tw-border-style: none;
            border-style: none;
            font-family: kalameh-regular;
          }
          .swiper__slide__right__p__link1 {
            margin: 0 auto;
            margin-top: 10px;
            display: flex;
            height: 27.5px;
            width: 100%;
            align-items: center;
            justify-content: center;
            border-radius: 7.5px;
            background-color: #005ac8;
            color: white;
            --tw-shadow: 3px 3px 10px var(--tw-shadow-color, #aeb5b680), -3px -3px 10px var(--tw-shadow-color, #ffffffbb);
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
            --tw-duration: 0.2s;
            transition-duration: 0.2s;
            --tw-ease: var(--ease-in-out);
            transition-timing-function: var(--ease-in-out);
            &:hover {
              @media (hover: hover) {
                background-color: #003f8c;
              }
            }
            &:active {
              scale: 0.97;
            }
          }
          .swiper__slide__right__p__link2 {
            display: flex;
            height: 27.5px;
            width: 100%;
            align-items: center;
            justify-content: center;
            border-radius: 7.5px;
            background-color: #005ac8;
            font-size: 12.2px;
            color: white;
            --tw-shadow: 3px 3px 10px var(--tw-shadow-color, #aeb5b680), -3px -3px 10px var(--tw-shadow-color, #ffffffbb);
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
            --tw-duration: 0.2s;
            transition-duration: 0.2s;
            --tw-ease: var(--ease-in-out);
            transition-timing-function: var(--ease-in-out);
            &:hover {
              @media (hover: hover) {
                background-color: #003f8c;
              }
            }
            &:active {
              scale: 0.97;
            }
          }
          .swiper__slide__right__p__link3 {
            display: flex;
            height: 27.5px;
            width: 100%;
            align-items: center;
            justify-content: center;
            border-radius: 7.5px;
            background-color: #005ac8;
            color: white;
            --tw-shadow: 3px 3px 10px var(--tw-shadow-color, #aeb5b680), -3px -3px 10px var(--tw-shadow-color, #ffffffbb);
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
            --tw-duration: 0.2s;
            transition-duration: 0.2s;
            --tw-ease: var(--ease-in-out);
            transition-timing-function: var(--ease-in-out);
            &:hover {
              @media (hover: hover) {
                background-color: #003f8c;
              }
            }
            &:active {
              scale: 0.97;
            }
          }
        }
        &:hover {
          .swiper__slide__right__p {
            transform: scale(1.05);
          }
        }
      }
      .rev {
        flex-direction: column-reverse;
      }
      .swiper__slide__left {
        display: flex;
        height: 100%;
        width: 20%;
        align-items: center;
        justify-content: center;
        .swiper__slide__left__svg {
          --tw-scale-x: 80%;
          --tw-scale-y: 80%;
          --tw-scale-z: 80%;
          scale: var(--tw-scale-x) var(--tw-scale-y);
        }
      }
      .guide__rev {
        --tw-rotate-x: rotateX(180deg);
        transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
      }
    }
    .swiper-slide-next {
      border-radius: 0 10px 10px 0;
    }
    .swiper__slide__end {
      justify-content: flex-start;
      border-radius: 10px 0 0 10px;
      .swiper__slide__right {
        width: 177.85px;
      }
    }
    .swiper-wrapper {
      cursor: auto;
      align-items: center;
      justify-content: center;
      -webkit-user-select: none;
      user-select: none;
    }
    .education__topic {
      margin: 0 25px;
      width: 100px !important;
      scale: 0.975;
      border-radius: 10px;
      --tw-gradient-position: to bottom right in oklab;
      background-image: linear-gradient(var(--tw-gradient-stops));
      background-image: none !important;
      --tw-gradient-from: #d1d9da8c;
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      --tw-gradient-to: #f8ffff;
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      padding: 5px;
      font-family: kalameh-bold;
      font-size: 14px;
      --tw-shadow: 5px 5px 10px var(--tw-shadow-color, #d1d9daa4), -5px -5px 10px var(--tw-shadow-color, #ffffff9b);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      .swiper__slide__topic__right {
        display: flex;
        flex-direction: column;
        gap: 15px;
        .swiper__slide__topic__img {
          margin: 0 auto;
          width: 60px;
        }
      }
    }
  }
  .foreign__order__request {
    margin: 0 auto;
    display: flex;
    height: 100%;
    width: 100% !important;
    max-width: 1350px;
    flex-direction: row-reverse;
    justify-content: space-between;
    gap: 20px;
    .foreign__order__request__file {
      display: flex;
      height: 550px;
      width: 33.33333333333333%;
      flex-direction: column;
      justify-content: space-between;
      --tw-drop-shadow-size: drop-shadow(0 0 5px var(--tw-drop-shadow-color, #2200ff26));
      --tw-drop-shadow: var(--tw-drop-shadow-size);
      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,);
      -webkit-user-select: none;
      user-select: none;
      .foreign__order__request__file__header {
        display: flex;
        height: 50px;
        width: 100%;
        justify-content: space-between;
        border-radius: 7.5px;
        border-style: var(--tw-border-style);
        border-width: 2.5px;
        border-color: #d9e6ec;
        background-color: #e8f1f2;
        .foreign__order__request__file__header__h5 {
          margin-right: 10px;
          display: flex;
          align-items: center;
          font-family: kalameh-bold;
          font-size: 17.5px;
          color: #01004a;
        }
        .foreign__order__title__info {
          margin-bottom: 1.5px;
          display: flex;
          width: 44px;
          scale: 0.6;
          align-items: center;
          justify-content: center;
        }
      }
      .foreign__order__request__file__input {
        margin: 0 auto;
        display: flex;
        height: 82%;
        width: 95%;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        border-right-style: var(--tw-border-style);
        border-right-width: 2.5px;
        border-left-style: var(--tw-border-style);
        border-left-width: 2.5px;
        border-right-color: #d9e6ec;
        border-left-color: #d9e6ec;
        background-color: var(--color-white);
        font-family: kalameh-medium;
        color: var(--color-white);
        .container {
          display: flex;
          height: 75%;
          width: 100%;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          gap: 10px;
          border-radius: 10px;
          padding: 20px 10px 10px 10px;
        }
        .header {
          position: relative;
          display: flex;
          width: 100%;
          flex: 1;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          border-radius: 10px;
        }
        .header svg {
          position: absolute;
          left: -50%;
          z-index: 1;
          scale: 0.3;
          rotate: 40deg;
          opacity: 15%;
          --tw-saturate: saturate(0%);
          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,);
          --tw-duration: 300ms;
          transition-duration: 300ms;
          --tw-ease: var(--ease-in-out);
          transition-timing-function: var(--ease-in-out);
          -webkit-user-select: none;
          user-select: none;
        }
        #drop-area.dragover svg {
          scale: 0.45;
          rotate: 20deg;
          opacity: 65%;
          --tw-saturate: saturate(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,);
        }
        .header p {
          z-index: 2;
          text-align: center;
          color: #01004a;
          --tw-duration: 300ms;
          transition-duration: 300ms;
        }
        .header p.dragover {
          font-size: 20px;
          color: #01004a;
          text-shadow: 0 0 5px var(--tw-text-shadow-color, white);
        }
        .footer {
          position: relative;
          display: flex;
          height: 40px;
          width: 100%;
          align-items: center;
          justify-content: flex-end;
          border-radius: 5px;
          --tw-border-style: none;
          border-style: none;
          background-color: #e8f1f2;
          padding: 0 3px;
          color: var(--color-black);
          p {
            position: absolute;
          }
        }
        .footer p {
          flex: 1;
          text-align: center;
          color: #01004a;
        }
        .sample__xls__download {
          display: flex;
          height: 40px;
          width: 100%;
          align-items: center;
          justify-content: space-between;
          border-radius: 5px;
          background-color: #e8f1f2;
          padding: 0 3px;
          .excel {
            height: 35px;
            width: 35px;
          }
          p {
            right: calc(50% - 75px);
            color: #01004a;
          }
          .img__background {
            right: 3px;
            height: 35px;
            width: 35px;
            scale: 0.9;
            cursor: pointer;
            align-items: center;
            justify-content: center;
            border-radius: 7.5px;
            border-style: var(--tw-border-style);
            border-width: 1px;
            border-color: #d9e6ec;
            --tw-gradient-position: to bottom right in oklab;
            background-image: linear-gradient(var(--tw-gradient-stops));
            --tw-gradient-from: #005ac8;
            --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
            --tw-gradient-to: #003f8c;
            --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
            --tw-shadow: 1px 1px 7.5px var(--tw-shadow-color, #d1d9dac0), -1px -1px 7.5px var(--tw-shadow-color, #ffffffc0);
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
            --tw-duration: 300ms;
            transition-duration: 300ms;
            .download {
              margin-top: 1.5px;
              scale: 0.8;
            }
            &:hover {
              border-radius: 50%;
            }
            &:active {
              --tw-gradient-position: to bottom right in oklab;
              background-image: linear-gradient(var(--tw-gradient-stops));
              --tw-gradient-from: #003f8c;
              --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
              --tw-gradient-to: #005ac8;
              --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
            }
          }
        }
        #file {
          display: none;
        }
        #drop-area {
          cursor: pointer;
          border-style: var(--tw-border-style);
          border-width: 2.5px;
          --tw-border-style: dashed;
          border-style: dashed;
          border-color: #ccc;
          padding: 20px;
          text-align: center;
          --tw-duration: 300ms;
          transition-duration: 300ms;
        }
        #drop-area.dragover {
          border-color: #005ac8;
          background-color: #e8f1f2;
          .header p {
            color: var(--color-white) !important;
          }
        }
        .footer {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
        }
        #remove-file, #browse-file {
          display: flex;
          cursor: pointer;
          align-items: center;
          justify-content: center;
          --tw-border-style: none;
          border-style: none;
          background-image: none;
          padding: calc(var(--spacing) * 0);
        }
        #browse-file .img__background {
          position: absolute;
          right: 3px;
          display: flex;
          height: 35px;
          width: 35px;
          scale: 0.9;
          align-items: center;
          justify-content: center;
          border-radius: 7.5px;
          border-style: var(--tw-border-style);
          border-width: 1px;
          border-color: #d9e6ec;
          --tw-gradient-position: to bottom right in oklab;
          background-image: linear-gradient(var(--tw-gradient-stops));
          --tw-gradient-from: #005ac8;
          --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
          --tw-gradient-to: #003f8c;
          --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
          padding: 6px;
          --tw-shadow: 1px 1px 7.5px var(--tw-shadow-color, #d1d9dac0), -1px -1px 7.5px var(--tw-shadow-color, #ffffffc0);
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
          --tw-duration: 300ms;
          transition-duration: 300ms;
          &:hover {
            border-radius: 50%;
          }
          &:active {
            --tw-gradient-position: to bottom right in oklab;
            background-image: linear-gradient(var(--tw-gradient-stops));
            --tw-gradient-from: #003f8c;
            --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
            --tw-gradient-to: #005ac8;
            --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
          }
        }
        #remove-file .img__background {
          position: absolute;
          top: 2.5px;
          left: 3px;
          display: flex;
          height: 35px;
          width: 35px;
          scale: 0.9;
          align-items: center;
          justify-content: center;
          border-radius: 7.5px;
          border-style: var(--tw-border-style);
          border-width: 1px;
          border-color: #d9e6ec;
          --tw-gradient-position: to bottom right in oklab;
          background-image: linear-gradient(var(--tw-gradient-stops));
          --tw-gradient-from: #ff0000;
          --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
          --tw-gradient-to: #8c0000;
          --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
          --tw-shadow: 1px 1px 7.5px var(--tw-shadow-color, #d1d9dac0), -1px -1px 7.5px var(--tw-shadow-color, #ffffffc0);
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
          --tw-duration: 300ms;
          transition-duration: 300ms;
          &:hover {
            border-radius: 50%;
          }
          &:active {
            --tw-gradient-position: to bottom right in oklab;
            background-image: linear-gradient(var(--tw-gradient-stops));
            --tw-gradient-from: #ff0000;
            --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
            --tw-gradient-to: #8c0000;
            --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
          }
        }
        #remove-file svg {
          margin: 0 auto;
          height: 22.5px;
        }
        #browse-file svg {
          height: 22.5px;
        }
        .foreign__order__request__file__footer__attention {
          margin-bottom: 20px;
          display: flex;
          height: 25%;
          min-height: 25%;
          width: 94.5%;
          min-width: 94.5%;
          align-items: center;
          justify-content: space-between;
          gap: 10px;
          border-radius: 5px;
          background-color: #E8F1F2;
          .attention__img {
            margin-right: 20px;
            margin-bottom: 3px;
            height: 80%;
          }
          .attention__p {
            position: relative;
            margin-left: 25px;
            display: flex;
            height: 100%;
            width: 75%;
            scale: 0.95;
            flex-direction: column;
            justify-content: center;
            text-align: justify;
            font-size: 13px;
            .attention__txt {
              color: var(--color-black);
              opacity: 85%;
            }
            b {
              font-family: kalameh-bold;
              color: #01004a;
            }
            .attention__p__topic {
              position: relative;
              left: 3px;
              text-align: center;
              font-family: kalameh-black;
              font-size: 13px;
              color: #01004a;
              b {
                font-family: kalameh-black;
                font-size: 17px;
                color: #0050b2;
              }
              .question {
                margin-right: 7.5px;
                display: inline-flex;
                scale: 1.5;
                rotate: 10deg;
                --tw-rotate-y: rotateY(180deg);
                transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
                .item__i {
                  color: crimson;
                }
                .item__q {
                  color: #0050b2;
                }
              }
            }
          }
        }
      }
      .foreign__order__request__file__footer {
        display: flex;
        height: 50px;
        min-height: 50px;
        width: 100%;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        overflow: hidden;
        border-radius: 7.5px;
        border-style: var(--tw-border-style);
        border-width: 2px;
        border-color: #d9e6ec;
        background-color: #e8f1f2;
        #submit-file {
          margin-right: 6px;
          height: 75%;
          cursor: not-allowed;
          border-radius: 5px;
          --tw-border-style: none;
          border-style: none;
          background-color: #a3a3a3;
          padding: 10px 20px;
          font-family: kalameh-medium;
          --tw-leading: 6px;
          line-height: 6px;
          text-wrap: nowrap;
          color: #fff;
          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);
        }
        #submit-file.active {
          cursor: pointer;
          background-color: #005ac8;
          &:hover {
            background-color: #003f8c;
          }
          &:active {
            scale: 0.97;
          }
        }
      }
    }
    .foreign__order__request__form {
      display: flex;
      height: 550px;
      width: 66.67%;
      flex-direction: column;
      justify-content: space-between;
      --tw-drop-shadow-size: drop-shadow(0 0 5px var(--tw-drop-shadow-color, #2200ff26));
      --tw-drop-shadow: var(--tw-drop-shadow-size);
      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,);
      .foreign__order__request__form__header {
        display: flex;
        height: 50px;
        width: 100%;
        justify-content: space-between;
        border-radius: 7.5px;
        border-style: var(--tw-border-style);
        border-width: 2.5px;
        border-color: #d9e6ec;
        background-color: #e8f1f2;
        h5 {
          all: unset;
          margin-right: 10px;
          display: flex;
          align-items: center;
          font-family: kalameh-bold;
          font-size: 17.5px;
          color: #01004a;
        }
        .foreign__order__title__info {
          margin-bottom: 1.5px;
          display: flex;
          width: 44px;
          scale: 0.6;
          align-content: center;
          justify-content: center;
        }
      }
      .foreign__order__request__form__input {
        margin: 0 auto;
        display: flex;
        height: 82%;
        width: 97.5%;
        flex-direction: column;
        justify-content: center;
        border-right-style: var(--tw-border-style);
        border-right-width: 2.5px;
        border-left-style: var(--tw-border-style);
        border-left-width: 2.5px;
        border-right-color: #d9e6ec;
        border-left-color: #d9e6ec;
        background-color: var(--color-white);
        .foreign__order__request__form__input__item {
          margin-top: 16px;
          display: flex;
          height: 50px;
          width: 100%;
          .product__name, .package__name, .quality__id, .manufacturer__name, .quantity__number, .image__upload {
            direction: ltr;
            position: relative;
            display: flex;
            height: 100%;
            width: 50%;
            align-items: center;
            justify-content: center;
            font-family: kalameh-medium;
          }
          .quality__id {
            .default {
              padding: 15px 20px;
              font-size: 1em;
              color: #01004a;
              --tw-duration: 1000ms;
              transition-duration: 1000ms;
              --tw-ease: cubic-bezier(0.05,0.81,0,0.93);
              transition-timing-function: cubic-bezier(0.05,0.81,0,0.93);
            }
            .active {
              --tw-translate-x: -14px;
              translate: var(--tw-translate-x) var(--tw-translate-y);
              --tw-translate-y: -20px;
              translate: var(--tw-translate-x) var(--tw-translate-y);
              border-radius: 5px;
              border-style: var(--tw-border-style);
              border-width: 2px;
              border-color: #003f8c;
              background-color: #0073ff;
              padding: 0 5px;
              font-size: 0.8em;
              color: var(--color-white);
            }
          }
          .quality__id select {
            cursor: pointer;
            color: var(--color-black);
          }
          .url__input {
            direction: ltr;
            position: relative;
            display: flex;
            height: 100%;
            width: 100%;
            align-items: center;
            justify-content: center;
            font-family: kalameh-medium;
          }
          .product__name input, .package__name input, .quality__id select, .manufacturer__name input, .quantity__number input, .image__upload label {
            height: 80%;
            width: 92.5%;
            border-radius: 5px;
            border-style: var(--tw-border-style);
            border-width: 2px;
            border-color: #003f8c;
            background-color: #e8f1f2;
            padding: 0 15px;
            font-family: kalameh-regular;
            font-size: 1em;
            color: var(--color-black);
            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: 200ms;
            transition-duration: 200ms;
            --tw-outline-style: none;
            outline-style: none;
            &:focus {
              border-style: var(--tw-border-style);
              border-width: 2px;
              border-color: #0073ff;
              --tw-shadow: 0 0 7.5px var(--tw-shadow-color, #0073ff3d);
              box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
            }
          }
          .quantity__number input {
            padding-right: 0;
          }
          .image__upload input[type="file"] {
            display: none;
          }
          .image__upload label {
            display: inline-block;
            cursor: pointer;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            p {
              margin-top: 7.5px;
              color: #6b6b6b;
            }
          }
          .url__input input {
            height: 80%;
            width: 96.25%;
            border-radius: 5px;
            border-style: var(--tw-border-style);
            border-width: 2px;
            border-color: #003f8c;
            background-color: #e8f1f2;
            padding-right: 15px;
            padding-left: 15px;
            font-size: 1em;
            color: var(--color-black);
            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: 200ms;
            transition-duration: 200ms;
            --tw-outline-style: none;
            outline-style: none;
            &::-webkit-inner-spin-button {
              margin-right: 2px !important;
            }
            &:focus {
              border-style: var(--tw-border-style);
              border-width: 2px;
              border-color: #0073ff;
              --tw-shadow: 0 0 7.5px var(--tw-shadow-color, #0073ff3d);
              box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
            }
            &::placeholder {
              font-family: kalameh-regular;
            }
          }
          .product__name span, .package__name span, .quality__id span, .manufacturer__name span, .quantity__number span, .image__upload span, .url__input span {
            pointer-events: none;
            position: absolute;
            right: 20px;
            --tw-border-style: none;
            border-style: none;
            padding: 15px 20px;
            font-size: 1em;
            color: #01004a;
            --tw-duration: 1000ms;
            transition-duration: 1000ms;
            --tw-ease: cubic-bezier(0.05,0.81,0,0.93);
            transition-timing-function: cubic-bezier(0.05,0.81,0,0.93);
          }
          .product__name input:focus ~ span, .product__name input:valid ~ span, .package__name input:focus ~ span, .package__name input:not(:placeholder-shown) ~ span, .manufacturer__name input:focus ~ span, .manufacturer__name input:not(:placeholder-shown) ~ span, .quantity__number input:focus ~ span, .quantity__number input:valid ~ span, .quality__id select:focus ~ span, .quality__id select:valid ~ span, .url__input input:focus ~ span, .url__input input:not(:placeholder-shown) ~ span {
            --tw-translate-x: -14px;
            translate: var(--tw-translate-x) var(--tw-translate-y);
            --tw-translate-y: -20px;
            translate: var(--tw-translate-x) var(--tw-translate-y);
            border-radius: 5px;
            border-style: var(--tw-border-style);
            border-width: 2px;
            border-color: #003f8c;
            background-color: #0073ff;
            padding: 0 5px;
            font-size: 0.8em;
            color: var(--color-white);
            .required__field {
              display: none;
              color: var(--color-white) !important;
            }
          }
        }
        .product__name span {
          display: flex;
          flex-direction: row-reverse;
          gap: 5px;
          .required__field {
            font-size: 11px;
            color: var(--color-red-500);
          }
        }
        .quality__id span {
          display: flex;
          flex-direction: row-reverse;
          gap: 5px;
          .required__field {
            font-size: 11px;
            color: red;
          }
        }
        .quantity__number span {
          display: flex;
          flex-direction: row-reverse;
          gap: 5px;
          .required__field {
            font-size: 11px;
            color: var(--color-red-500);
          }
        }
        .item__1 {
          margin-top: 15px !important;
        }
        .image__upload span.default {
          padding: 15px 20px;
          font-size: 1em;
          color: #01004a;
          --tw-duration: 1000ms;
          transition-duration: 1000ms;
          --tw-ease: cubic-bezier(0.05,0.81,0,0.93);
          transition-timing-function: cubic-bezier(0.05,0.81,0,0.93);
        }
        .image__upload span.active {
          --tw-translate-x: -14px;
          translate: var(--tw-translate-x) var(--tw-translate-y);
          --tw-translate-y: -20px;
          translate: var(--tw-translate-x) var(--tw-translate-y);
          border-radius: 5px;
          border-style: var(--tw-border-style);
          border-width: 2px;
          border-color: #003f8c;
          background-color: #0073ff;
          padding: 0 5px;
          font-size: 0.8em;
          color: var(--color-white);
        }
        .description {
          margin-top: 20px;
          margin-bottom: 20px;
          height: fit-content;
          .textarea__container {
            position: relative;
            display: flex;
            height: fit-content;
            width: 100%;
            align-items: center;
            justify-content: center;
            font-family: kalameh-medium;
          }
          .textarea__container textarea {
            direction: rtl;
            height: 150px !important;
            width: 96.25% !important;
            resize: none;
            border-radius: 5px;
            border-style: var(--tw-border-style);
            border-width: 2px;
            border-color: #003f8c;
            background-color: #e8f1f2;
            padding: 15px;
            font-family: kalameh-regular;
            font-size: 0.95em;
            color: var(--color-black);
            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: 200ms;
            transition-duration: 200ms;
            --tw-outline-style: none;
            outline-style: none;
            &:focus {
              border-style: var(--tw-border-style);
              border-width: 2px;
              border-color: #0073ff;
            }
          }
          .textarea__container span {
            pointer-events: none;
            position: absolute;
            top: calc(var(--spacing) * 0);
            right: 20px;
            padding: 15px 20px;
            font-size: 1em;
            color: #01004a;
            --tw-duration: 1000ms;
            transition-duration: 1000ms;
            --tw-ease: cubic-bezier(0.05,0.81,0,0.93);
            transition-timing-function: cubic-bezier(0.05,0.81,0,0.93);
          }
          .textarea__container textarea:focus ~ span, .textarea__container textarea:not(:placeholder-shown) ~ span {
            --tw-translate-x: -14px;
            translate: var(--tw-translate-x) var(--tw-translate-y);
            --tw-translate-y: -10px;
            translate: var(--tw-translate-x) var(--tw-translate-y);
            border-radius: 5px;
            background-color: #0073ff;
            padding: 0 5px;
            color: var(--color-white);
          }
        }
      }
      .foreign__order__request__form__footer {
        display: flex;
        height: 50px;
        width: 100%;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        overflow: hidden;
        border-radius: 7.5px;
        border-style: var(--tw-border-style);
        border-width: 2.5px;
        border-color: #d9e6ec;
        background-color: #e8f1f2;
        #submit-form {
          margin-right: 6px;
          height: 75%;
          cursor: not-allowed;
          border-radius: 5px;
          --tw-border-style: none;
          border-style: none;
          background-color: #a3a3a3;
          padding: 10px 20px;
          font-family: kalameh-medium;
          --tw-leading: 6px;
          line-height: 6px;
          text-wrap: nowrap;
          color: var(--color-white);
          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;
        }
        #submit-form.active {
          cursor: pointer;
          background-color: #005ac8;
          &:hover {
            background-color: #003f8c;
          }
          &:active {
            scale: 0.97;
          }
        }
      }
    }
  }
  .foreign__order__request__final {
    margin: 0 auto 50px;
    display: flex;
    height: fit-content;
    width: 100%;
    max-width: 1400px;
    flex-direction: column;
    justify-content: space-between;
    --tw-drop-shadow-size: drop-shadow(0 0 5px var(--tw-drop-shadow-color, #2200ff26));
    --tw-drop-shadow: var(--tw-drop-shadow-size);
    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,);
    .foreign__order__request__final__header {
      display: flex;
      height: 50px;
      width: 100%;
      align-items: center;
      justify-content: space-between;
      border-radius: 7.5px;
      border-style: var(--tw-border-style);
      border-width: 2.5px;
      border-color: #d9e6ec;
      background-color: #e8f1f2;
      .foreign__order__request__final__header__title {
        margin-right: 15px;
        display: flex;
        align-items: center;
        font-family: kalameh-bold;
        font-size: 20px;
        color: #01004a;
      }
      .foreign__order__request__final__header__action {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        gap: 5px;
        .foreign__order__title__info {
          margin-bottom: 1.5px;
          display: flex;
          width: 44px;
          scale: 0.6;
          align-content: center;
          justify-content: center;
        }
        .seprator {
          display: none;
          height: 30px;
          width: 4px;
          border-radius: 20%;
          background-color: #005ac8;
          --tw-inset-shadow: inset 0 0 5px var(--tw-inset-shadow-color, #2b2b2b35);
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
        .group__action {
          display: none;
          align-items: center;
          .group__action__p {
            margin-left: 10px;
            font-family: kalameh-medium;
            color: #01004a;
          }
          .group__action__container {
            display: flex;
            max-height: 25px;
            max-width: 25px;
            align-content: center;
            justify-content: center;
            &:hover {
              border-radius: 50%;
            }
            &:active {
              --tw-gradient-position: to bottom right in oklab;
              background-image: linear-gradient(var(--tw-gradient-stops));
              --tw-gradient-from: #003f8c;
              --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
              --tw-gradient-to: #005ac8;
              --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
            }
            .group__action__img {
              height: 25px;
              width: 25px;
            }
          }
        }
      }
    }
    .final__input__container {
      position: relative;
      margin: 0 auto;
      max-height: 590px;
      min-height: 250px;
      width: 98%;
      overflow: auto;
      border-right-style: var(--tw-border-style);
      border-right-width: 2.5px;
      border-left-style: var(--tw-border-style);
      border-left-width: 2.5px;
      border-right-color: #d9e6ec;
      border-left-color: #d9e6ec;
      background-color: var(--color-white);
      padding: 5px;
      -ms-overflow-style: none;
      scrollbar-width: none;
      &::-webkit-scrollbar {
        display: none;
      }
      .table-header {
        position: sticky;
        top: calc(var(--spacing) * 0);
        z-index: 1;
        display: flex;
        height: 50px;
        width: 100%;
        min-width: 1250px;
        align-items: center;
        border-radius: 7.5px 7.5px 0 0;
        background-color: #003f8c;
        font-family: kalameh-bold;
        color: var(--color-white);
        .row {
          display: flex;
          height: 35px;
          flex-direction: row;
          font-family: kalameh-medium;
          &:nth-of-type(2n+1) {
            background-color: #005bcb18;
          }
        }
        .cell-1 , .cell-2 , .cell-3, .cell-4 , .cell-5 , .cell-6, .cell-7 , .cell-8 , .cell-9, .cell-10 , .cell-11 {
          overflow: hidden;
          padding: 5px;
          text-align: center;
          .cell[title] {
            position: relative;
          }
          .cell[title]:hover::after {
            position: absolute;
            top: 100%;
            left: 50%;
            z-index: 10;
            --tw-translate-x: -50%;
            translate: var(--tw-translate-x) var(--tw-translate-y);
            border-radius: 3px;
            background-color: #333;
            padding: 5px;
            white-space: nowrap;
            color: var(--color-white);
            &::before {
              content: var(--tw-content);
              --tw-content: attr(title);
              content: var(--tw-content);
            }
          }
        }
        .cell-1 {
          flex: 0.5;
          border-bottom-style: var(--tw-border-style);
          border-bottom-width: 2px;
          border-left-style: var(--tw-border-style);
          border-left-width: 2px;
          border-bottom-color: #003f8c;
          border-left-color: #003f8c;
        }
        .cell-2 {
          flex: 3;
          border-bottom-style: var(--tw-border-style);
          border-bottom-width: 2px;
          border-left-style: var(--tw-border-style);
          border-left-width: 2px;
          border-bottom-color: #003f8c;
          border-left-color: #003f8c;
        }
        .cell-3 {
          flex: 0.5;
          border-bottom-style: var(--tw-border-style);
          border-bottom-width: 2px;
          border-left-style: var(--tw-border-style);
          border-left-width: 2px;
          border-bottom-color: #003f8c;
          border-left-color: #003f8c;
        }
        .cell-4 {
          flex: 2;
          border-bottom-style: var(--tw-border-style);
          border-bottom-width: 2px;
          border-left-style: var(--tw-border-style);
          border-left-width: 2px;
          border-bottom-color: #003f8c;
          border-left-color: #003f8c;
        }
        .cell-5 {
          flex: 1.5;
          border-bottom-style: var(--tw-border-style);
          border-bottom-width: 2px;
          border-left-style: var(--tw-border-style);
          border-left-width: 2px;
          border-bottom-color: #003f8c;
          border-left-color: #003f8c;
        }
        .cell-6 {
          flex: 2;
          border-bottom-style: var(--tw-border-style);
          border-bottom-width: 2px;
          border-left-style: var(--tw-border-style);
          border-left-width: 2px;
          border-bottom-color: #003f8c;
          border-left-color: #003f8c;
        }
        .cell-7 {
          flex: 0.5;
          border-bottom-style: var(--tw-border-style);
          border-bottom-width: 2px;
          border-left-style: var(--tw-border-style);
          border-left-width: 2px;
          border-bottom-color: #003f8c;
          border-left-color: #003f8c;
        }
        .cell-8 {
          flex: 0.5;
          border-bottom-style: var(--tw-border-style);
          border-bottom-width: 2px;
          border-left-style: var(--tw-border-style);
          border-left-width: 2px;
          border-bottom-color: #003f8c;
          border-left-color: #003f8c;
          font-size: 12px;
        }
        .cell-9 {
          flex: 0.5;
          border-bottom-style: var(--tw-border-style);
          border-bottom-width: 2px;
          border-left-style: var(--tw-border-style);
          border-left-width: 2px;
          border-bottom-color: #003f8c;
          border-left-color: #003f8c;
        }
        .cell-10 {
          flex: 0.75;
          border-bottom-style: var(--tw-border-style);
          border-bottom-width: 2px;
          border-bottom-color: #003f8c;
        }
        .cell-11 {
          flex: 0.5;
          border-right-style: var(--tw-border-style);
          border-right-width: 2px;
          border-bottom-style: var(--tw-border-style);
          border-bottom-width: 2px;
          border-right-color: #003f8c;
          border-bottom-color: #003f8c;
        }
      }
      .final__input__container__empty {
        position: absolute;
        top: calc(var(--spacing) * 0);
        left: calc(var(--spacing) * 0);
        z-index: 10;
        margin: 0 auto;
        display: flex;
        height: 100%;
        width: 100%;
        align-items: center;
        justify-content: center;
        --tw-gradient-position: to right in oklab;
        background-image: linear-gradient(var(--tw-gradient-stops));
        --tw-gradient-from: #003f8c;
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
        --tw-gradient-via: #005ac866;
        --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops);
        --tw-gradient-to: #003f8c;
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
        font-family: kalameh-bold;
        font-size: 30px;
        color: var(--color-white);
        --tw-inset-shadow: inset 0 0 50px var(--tw-inset-shadow-color, #01004a);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-backdrop-blur: blur(7.5px);
        -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
        backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
        text-shadow: 0 0 25px var(--tw-text-shadow-color, #00214a);
      }
      .foreign__order__request__final__input {
        position: relative;
        height: fit-content;
        max-height: 400px;
        min-height: 150px;
        width: 100%;
        min-width: 1250px;
        border-style: var(--tw-border-style);
        border-width: 2px;
        border-color: #003f8c;
        background-color: var(--color-white);
        button {
          cursor: pointer;
          --tw-border-style: none;
          border-style: none;
          background-image: none;
        }
        &:last-child {
          border-radius: 0 0 7.5px 7.5px;
        }
        .excel-rows-container {
          position: relative;
          border-bottom-style: var(--tw-border-style);
          border-bottom-width: 10px;
          border-bottom-color: #4397ff;
          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;
          .row {
            height: fit-content;
            max-height: 35px;
            &:nth-of-type(n+2) {
              content-visibility: hidden;
              background-color: #0073ff46;
              &:nth-last-of-type(2n+1) {
                background-color: #0073ff19;
              }
            }
            &:nth-of-type(1) {
              position: sticky;
              top: calc(var(--spacing) * 0);
              cursor: cell;
              background-color: #4397ff;
              color: var(--color-white);
              -webkit-user-select: none;
              user-select: none;
              .cell-1 {
                flex: 0.5;
                justify-content: center;
                border-top-style: var(--tw-border-style);
                border-top-width: 2px;
                border-top-color: #003f8c;
                border-left-color: unset;
                .excel {
                  height: 22px;
                  width: 25.6px;
                  scale: 1.1;
                }
              }
              .cell-2 {
                display: flex;
                flex: 3;
                flex-direction: row;
                justify-content: center;
                border-top-style: var(--tw-border-style);
                border-top-width: 2px;
                border-top-color: #003f8c;
                border-left-color: unset;
              }
              .cell-3 {
                display: flex;
                flex: 6.43;
                justify-content: center;
                gap: 30px;
                border-top-style: var(--tw-border-style);
                border-top-width: 2px;
                border-top-color: #003f8c;
              }
              .cell-4 {
                display: flex;
                flex: 1.77;
                cursor: auto;
                justify-content: center;
                border-top-style: var(--tw-border-style);
                border-top-width: 2px;
                border-top-color: #003f8c;
                .extra-row__excel__extend {
                  display: flex;
                  cursor: pointer;
                  align-items: center;
                  gap: 5px;
                  border-radius: 5px;
                  --tw-border-style: none;
                  border-style: none;
                  background-color: #005ac8;
                  padding: 2px 5px;
                  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: 200ms;
                  transition-duration: 200ms;
                  --tw-ease: var(--ease-in-out);
                  transition-timing-function: var(--ease-in-out);
                  .extra-row__excel__extend__img {
                    scale: 0.75;
                  }
                  .extra-row__excel__extend__p {
                    font-family: kalameh-regular;
                    color: var(--color-white);
                  }
                  &:hover {
                    scale: 1.05;
                    background-color: #003f8c;
                  }
                  &:active {
                    scale: 0.95;
                  }
                }
              }
              .cell-10 {
                flex: 0.75;
                cursor: auto;
                border-top-style: var(--tw-border-style);
                border-top-width: 2px;
                border-top-color: #003f8c;
              }
              .cell-11 {
                flex: 0.5;
                border-top-style: var(--tw-border-style);
                border-top-width: 2px;
                border-top-color: #003f8c;
              }
            }
          }
        }
        .row {
          display: flex;
          height: 35px;
          flex-direction: row;
          font-family: kalameh-medium;
          &:nth-of-type(2n+1) {
            background-color: #005bcb18;
          }
        }
        .cell-1 , .cell-2 , .cell-3, .cell-4 , .cell-5 , .cell-6, .cell-7 , .cell-8 , .cell-9, .cell-10 , .cell-11 {
          overflow: hidden;
          padding: 5px;
          text-align: center;
          .cell[title] {
            position: relative;
          }
          .cell[title]:hover::after {
            position: absolute;
            top: 100%;
            left: 50%;
            z-index: 10;
            --tw-translate-x: -50%;
            translate: var(--tw-translate-x) var(--tw-translate-y);
            border-radius: 3px;
            background-color: #333;
            padding: 5px;
            white-space: nowrap;
            color: var(--color-white);
            &::before {
              content: var(--tw-content);
              --tw-content: attr(title);
              content: var(--tw-content);
            }
          }
        }
        .cell-1 {
          flex: 0.5;
          border-bottom-style: var(--tw-border-style);
          border-bottom-width: 2px;
          border-left-style: var(--tw-border-style);
          border-left-width: 2px;
          border-bottom-color: #003f8c;
          border-left-color: #003f8c;
        }
        .cell-2 {
          flex: 3;
          border-bottom-style: var(--tw-border-style);
          border-bottom-width: 2px;
          border-left-style: var(--tw-border-style);
          border-left-width: 2px;
          border-bottom-color: #003f8c;
          border-left-color: #003f8c;
        }
        .cell-3 {
          flex: 0.5;
          border-bottom-style: var(--tw-border-style);
          border-bottom-width: 2px;
          border-left-style: var(--tw-border-style);
          border-left-width: 2px;
          border-bottom-color: #003f8c;
          border-left-color: #003f8c;
          font-family: kalameh-bold;
          font-size: 12px;
          --tw-leading: 25px;
          line-height: 25px;
        }
        .cell-4 {
          flex: 2;
          border-bottom-style: var(--tw-border-style);
          border-bottom-width: 2px;
          border-left-style: var(--tw-border-style);
          border-left-width: 2px;
          border-bottom-color: #003f8c;
          border-left-color: #003f8c;
        }
        .cell-5 {
          flex: 1.5;
          border-bottom-style: var(--tw-border-style);
          border-bottom-width: 2px;
          border-left-style: var(--tw-border-style);
          border-left-width: 2px;
          border-bottom-color: #003f8c;
          border-left-color: #003f8c;
        }
        .cell-6 {
          flex: 2;
          border-bottom-style: var(--tw-border-style);
          border-bottom-width: 2px;
          border-left-style: var(--tw-border-style);
          border-left-width: 2px;
          border-bottom-color: #003f8c;
          border-left-color: #003f8c;
        }
        .cell-7 {
          flex: 0.5;
          border-bottom-style: var(--tw-border-style);
          border-bottom-width: 2px;
          border-left-style: var(--tw-border-style);
          border-left-width: 2px;
          border-bottom-color: #003f8c;
          border-left-color: #003f8c;
          font-size: 13px;
        }
        .cell-8 {
          flex: 0.5;
          border-bottom-style: var(--tw-border-style);
          border-bottom-width: 2px;
          border-left-style: var(--tw-border-style);
          border-left-width: 2px;
          border-bottom-color: #003f8c;
          border-left-color: #003f8c;
          font-size: 13px;
        }
        .cell-9 {
          flex: 0.5;
          border-bottom-style: var(--tw-border-style);
          border-bottom-width: 2px;
          border-left-style: var(--tw-border-style);
          border-left-width: 2px;
          border-bottom-color: #003f8c;
          border-left-color: #003f8c;
          font-size: 13px;
        }
        .cell-10 {
          flex: 0.75;
          border-bottom-style: var(--tw-border-style);
          border-bottom-width: 2px;
          border-bottom-color: #003f8c;
        }
        .cell-11 {
          flex: 0.5;
          border-right-style: var(--tw-border-style);
          border-right-width: 2px;
          border-bottom-style: var(--tw-border-style);
          border-bottom-width: 2px;
          border-right-color: #003f8c;
          border-bottom-color: #003f8c;
        }
      }
    }
    .foreign__order__request__final__footer {
      height: 50px;
      width: 100%;
      align-items: center;
      justify-content: center;
      border-radius: 7.5px;
      border-style: var(--tw-border-style);
      border-width: 2.5px;
      border-color: #d9e6ec;
      background-color: #e8f1f2;
      padding-top: 5.5px;
      .pagination__container {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        padding-inline: 7.5px;
        .pagination__button {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          border-radius: var(--radius-md);
          border-style: var(--tw-border-style);
          border-width: 1px;
          border-color: var(--color-gray-300);
          padding-inline: calc(var(--spacing) * 3);
          padding-block: calc(var(--spacing) * 1);
          font-family: kalameh-medium;
          color: var(--color-gray-700);
          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));
          &:hover {
            @media (hover: hover) {
              background-color: var(--color-gray-50);
            }
          }
        }
        .pagination__page__numbers {
          border-radius: var(--radius-md);
          border-style: var(--tw-border-style);
          border-width: 1px;
          border-color: var(--color-gray-300);
          background-color: var(--color-blue-500);
          padding-inline: calc(var(--spacing) * 3);
          padding-block: calc(var(--spacing) * 1);
          --tw-font-weight: var(--font-weight-medium);
          font-weight: var(--font-weight-medium);
          color: var(--color-white);
        }
        .pagination__page__numbers__deactive {
          border-radius: var(--radius-md);
          border-style: var(--tw-border-style);
          border-width: 1px;
          border-color: var(--color-gray-300);
          padding-inline: calc(var(--spacing) * 3);
          padding-block: calc(var(--spacing) * 1);
          color: var(--color-gray-700);
          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));
          &:hover {
            @media (hover: hover) {
              background-color: var(--color-gray-50);
            }
          }
        }
      }
    }
  }
}
.popup {
  position: fixed;
  top: calc(var(--spacing) * 0);
  left: calc(var(--spacing) * 0);
  z-index: 1000;
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  background-color: #00000080;
  font-family: kalameh-regular;
  --tw-backdrop-blur: blur(3px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}
.popup.hidden {
  display: none;
}
.popup-content {
  position: relative;
  display: flex;
  height: fit-content;
  max-height: 500px;
  max-width: 500px;
  min-width: 500px;
  justify-content: center;
  border-radius: 17.5px;
  background-color: e8f1f2;
  padding: 40px 20px;
}
.popup-close {
  position: absolute;
  top: 10px;
  right: 9px;
  display: flex;
  height: 25px;
  width: 25px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  --tw-border-style: none;
  border-style: none;
  background-color: #005ac8;
  background-image: none;
  font-size: 24px;
  color: var(--color-white);
  --tw-shadow: 0 0 5px var(--tw-shadow-color, #00000033);
  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: 200ms;
  transition-duration: 200ms;
  &:hover {
    scale: 1.1;
  }
  &:active {
    scale: 0.9;
  }
}
#popup-body {
  margin: auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    margin: 0 auto;
    display: flex;
    max-height: 400px;
    width: 90%;
    min-width: 400px;
    overflow: auto;
    border-radius: 15px;
    border-style: var(--tw-border-style);
    border-width: 7.5px;
    border-color: #005ac8;
    background-color: var(--color-white);
    object-fit: contain;
    --tw-shadow: 0 0 10px var(--tw-shadow-color, #00000033);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  p {
    margin: 0 auto;
    max-height: 400px;
    min-height: 200px;
    width: 90%;
    min-width: 400px;
    overflow: auto;
    border-radius: 15px;
    border-style: var(--tw-border-style);
    border-width: 7.5px;
    border-color: #005ac8;
    background-color: var(--color-white);
    padding: 20px;
    text-align: right;
  }
}
body.popup-open {
  margin-right: 15px;
  overflow: hidden;
}
.blink {
  animation: blinkAnimation 2.5s ease-in-out;
}
.cell-5:empty::after {
  content: "فاقد انتخاب";
  font-family: kalameh-bold;
  font-size: 13.5px;
  color: var(--color-red-500);
}
.cell-6:empty::after {
  content: "فاقد انتخاب";
  font-family: kalameh-bold;
  font-size: 13.5px;
  color: var(--color-red-500);
}
.cell-10 {
  .edit-btn,.delete-btn {
    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: 200ms;
    transition-duration: 200ms;
    &:hover {
      @media (hover: hover) {
        scale: 1.1;
      }
    }
    &:active {
      scale: 0.9;
    }
  }
}
@keyframes blinkAnimation {
  0% {
    background-color: #E8F1F2;
    border: 2.5px solid #D9E6EC;
  }
  25% {
    background-color: #81baff;
    border: 2.5px solid #005ac8;
  }
  50% {
    background-color: #E8F1F2;
    border: 2.5px solid #D9E6EC;
  }
  75% {
    background-color: #81baff;
    border: 2.5px solid #005ac8;
  }
  100% {
    background-color: #E8F1F2;
    border: 2.5px solid #D9E6EC;
  }
}
.blink-edit {
  animation: blink-editAnimation 2.5s ease-in-out;
}
@keyframes blink-editAnimation {
  0% {
    background-color: #E8F1F2;
    border: 2.5px solid #D9E6EC;
  }
  25% {
    background-color: #ffa264;
    border: 2.5px solid #c87100;
  }
  50% {
    background-color: #E8F1F2;
    border: 2.5px solid #D9E6EC;
  }
  75% {
    background-color: #ffa264;
    border: 2.5px solid #c87100;
  }
  100% {
    background-color: #E8F1F2;
    border: 2.5px solid #D9E6EC;
  }
}
@media (max-width:350px) {
  .foreign__order__request__file__footer__attention {
    .attention__p {
      margin-left: 10px !important;
    }
    .attention__img {
      height: 60% !important;
    }
  }
  .foreign__order__request__final__footer {
    padding-top: 6.5px !important;
    .pagination__container {
      .pagination__button {
        padding-block: 7px !important;
        .pagination__button__previous__text {
          display: flex !important;
          font-family: kalameh-bold;
          font-size: 10px;
        }
      }
      .pagination__page__numbers__div {
        display: none !important;
      }
    }
  }
}
@media (max-width:400px) {
  .foreign__order__request__file__footer__attention {
    .attention__img {
      margin-right: 5px !important;
      scale: 0.8;
    }
    .attention__p {
      .attention__p__topic {
        width: 100% !important;
        font-size: 9px !important;
        b {
          font-size: 12px !important;
        }
      }
      .attention__txt {
        font-size: 9px !important;
      }
    }
  }
}
@media (max-width:620px) {
  .foreign__order__request__final__footer {
    padding-top: 6.5px !important;
    .pagination__container {
      .pagination__button {
        padding-block: 7px !important;
        .pagination__button__previous__text {
          display: none;
        }
      }
      .pagination__page__numbers__div {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2px;
        .pagination__page__numbers__deactive {
          padding: 3px 7px !important;
          font-size: 11px;
        }
        .pagination__page__numbers {
          padding: 3px 7px !important;
          font-size: 11px;
        }
      }
    }
  }
}
@media (max-width:800px) {
  body.popup-open {
    margin-right: 0px !important;
  }
  .popup-content {
    margin: 0 20px;
    min-width: 90% !important;
  }
  #popup-body {
    img {
      min-width: 75% !important;
    }
    p {
      max-width: 300px !important;
      min-width: 250px !important;
    }
  }
  .foreign__order__education {
    height: 200px !important;
    width: 100% !important;
    .swiper-wrapper {
      scale: 0.8;
      .swiper-slide {
        .swiper__slide__right {
          .text {
            font-size: 12px !important;
            p {
              --tw-leading: 15px;
              line-height: 15px;
            }
          }
          .third {
            word-spacing: 2.5px;
            font-size: 12.05px !important;
            --tw-leading: 15px;
            line-height: 15px;
          }
        }
        .swiper__slide__left {
          svg {
            width: 32px !important;
          }
        }
      }
    }
    .education__topic {
      margin: 0 -17.5px 0 20px !important;
      height: 215px !important;
    }
    .swiper__slide__start__gradient {
      width: 20px !important;
    }
    .swiper__slide__end__gradient {
      width: 30px !important;
    }
    .swiper__slide__right__p {
      font-size: 12px !important;
    }
  }
  .foreign__order__request__final {
    width: 100% !important;
    .group__action__p {
      display: none !important;
    }
    .foreign__order__request__final__header__title__img {
      display: none !important;
    }
    .foreign__order__request__final__header__title__h {
      margin-right: 10px;
      font-size: 15px;
    }
    .final__input__container__empty {
      font-size: 20px !important;
    }
  }
  .foreign__order__title {
    height: 40px !important;
    width: 93% !important;
    padding: 5px !important;
    .foreign__order__title__h4 {
      align-items: center;
      font-family: kalameh-black;
      font-size: 15px !important;
    }
    .foreign__order__title__icon {
      width: 35px !important;
    }
    .foreign__order__title__info {
      width: 35px !important;
    }
  }
  .foreign__order__request {
    width: 100% !important;
    flex-direction: column-reverse !important;
    gap: 20px !important;
    .foreign__order__request__file {
      width: 100% !important;
    }
    .foreign__order__request__form {
      width: 100% !important;
      .foreign__order__request__form__header {
        height: 50px !important;
      }
      .foreign__order__request__form__input {
        height: 100% !important;
        width: 96% !important;
        .foreign__order__request__form__input__item {
          .product__name, .package__name, .quality__id, .manufacturer__name, .quantity__number, .image__upload {
            height: 100% !important;
            input {
              height: 31.89px !important;
            }
            select {
              height: 31.89px !important;
            }
            label {
              height: 31.89px !important;
            }
          }
          .url__input__container {
            height: fit-content !important;
            max-height: 39.38px !important;
          }
          .quality__id {
            font-size: 10px !important;
          }
          .product__name span, .package__name span, .quality__id span, .manufacturer__name span, .quantity__number span, .image__upload span {
            right: 4% !important;
            font-size: 11.5px !important;
          }
          .url__input {
            span {
              right: 2% !important;
              font-size: 11.5px !important;
            }
            input {
              height: 31.89px !important;
              &::placeholder {
                font-size: 10px;
              }
            }
          }
          .textarea__container {
            span {
              right: 4% !important;
            }
          }
        }
      }
      .foreign__order__request__form__footer {
        height: 60px !important;
      }
    }
    .foreign__order__request__file__input {
      .container {
        .footer {
          height: 40px !important;
        }
      }
    }
  }
}
@media (max-width:1400px) {
  .swiper-wrapper {
    cursor: grab !important;
    justify-content: flex-start !important;
    &:active {
      cursor: grabbing !important;
    }
  }
  .foreign__order__request__form {
    .foreign__order__request__form__input {
      .foreign__order__request__form__input__item {
        .product__name, .package__name, .quality__id, .manufacturer__name, .quantity__number, .image__upload {
          margin-bottom: 5px;
          font-family: kalameh-bold !important;
          font-size: 12.5px;
        }
        .url__input {
          font-family: kalameh-bold !important;
          font-size: 12.5px;
        }
        .image__upload label {
          p {
            margin-top: 10px !important;
          }
        }
        .product__name input:focus ~ span, .product__name input:valid ~ span, .package__name input:focus ~ span, .package__name input:not(:placeholder-shown) ~ span, .manufacturer__name input:focus ~ span, .manufacturer__name input:not(:placeholder-shown) ~ span, .quantity__number input:focus ~ span, .quantity__number input:valid ~ span, .quality__id select:focus ~ span, .quality__id select:valid ~ span, .image__upload span.active, .url__input input:focus ~ span, .url__input input:not(:placeholder-shown) ~ span {
          font-size: 10px !important;
        }
      }
    }
  }
}
@media (max-width:1200px) {
  .foreign__order__request__file {
    width: 50% !important;
  }
  .foreign__order__request__form {
    width: 50% !important;
    .foreign__order__request__form__input {
      .foreign__order__request__form__input__item {
        margin-top: 0px !important;
        height: 50% !important;
        flex-direction: column;
        .product__name, .package__name, .quality__id, .manufacturer__name, .quantity__number, .image__upload {
          width: 100% !important;
        }
        .url__input {
          margin: 0 auto;
          height: 39.39px !important;
          width: 96.5% !important;
          span {
            right: 11px !important;
          }
        }
        .image__upload label {
          p {
            margin-top: 5px !important;
          }
        }
      }
      #description {
        margin: 0 auto;
        height: 100px !important;
        width: 93% !important;
      }
      .url__input__container {
        margin-bottom: 7px;
        height: fit-content !important;
      }
      .textarea__container span {
        font-family: kalameh-bold;
        font-size: 12.5px !important;
      }
      .product__name input:focus ~ span, .product__name input:valid ~ span, .package__name input:focus ~ span, .package__name input:not(:placeholder-shown) ~ span, .manufacturer__name input:focus ~ span, .manufacturer__name input:not(:placeholder-shown) ~ span, .quantity__number input:focus ~ span, .quantity__number input:valid ~ span, .quality__id select:focus ~ span, .quality__id select:valid ~ span {
        --tw-translate-x: -14px !important;
        translate: var(--tw-translate-x) var(--tw-translate-y) !important;
        --tw-translate-y: -16px !important;
        translate: var(--tw-translate-x) var(--tw-translate-y) !important;
      }
      .image__upload span.active {
        --tw-translate-x: -14px !important;
        translate: var(--tw-translate-x) var(--tw-translate-y) !important;
        --tw-translate-y: -16px !important;
        translate: var(--tw-translate-x) var(--tw-translate-y) !important;
      }
      .textarea__container textarea:focus ~ span, .textarea__container textarea:not(:placeholder-shown) ~ span {
        --tw-translate-x: -14px !important;
        translate: var(--tw-translate-x) var(--tw-translate-y) !important;
        --tw-translate-y: -7.5px !important;
        translate: var(--tw-translate-x) var(--tw-translate-y) !important;
        font-size: 0.6em !important;
      }
      .url__input input:focus ~ span, .url__input input:not(:placeholder-shown) ~ span {
        --tw-translate-x: -16px !important;
        translate: var(--tw-translate-x) var(--tw-translate-y) !important;
        --tw-translate-y: -16px !important;
        translate: var(--tw-translate-x) var(--tw-translate-y) !important;
      }
    }
  }
}
@media (max-width:1550px) {
  .attention__p__topic {
    font-size: 12px !important;
  }
  .attention__txt {
    font-size: 12px;
  }
}
@media (max-width:1500px) {
  .attention__p__topic {
    font-size: 11px !important;
  }
}
@media (max-width:1450px) {
  .attention__p__topic {
    font-size: 10px !important;
  }
  .attention__txt {
    font-size: 10px !important;
  }
}
@media (max-width:1450px) and (min-width:800px) {
  .quality__id select {
    font-size: 10px !important;
  }
  .url__input input {
    &::placeholder {
      font-size: 10px !important;
    }
  }
  .attention__p {
    margin-left: 10px !important;
    .attention__p__topic {
      font-family: kalameh-black !important;
      font-size: 8px !important;
      b {
        font-size: 15px !important;
      }
    }
    .attention__txt {
      font-size: 9px;
    }
  }
  .attention__img {
    margin-right: 5px !important;
    scale: 0.8 !important;
  }
}
@media (min-width:1024px) {
  .custome__background__position__y {
    background-position-y: -50px !important;
  }
}
.custome__background__position__y {
  background-position-x: -60px;
  @media (width >= 430px) {
    background-position: -155px;
  }
  @media (width >= 768px) {
    background-position: -55px;
  }
}
.rtl {
  direction: rtl;
}
.ltr {
  direction: ltr;
}
.bg__img {
  background-image: url(./images/Registration_Background.webp);
}
.group-item-majazi:hover {
  .rotate-item-180-y {
    transform: rotateY(-180deg) !important;
  }
  .rotate-item-0-y {
    transform: rotateY(0deg) !important;
  }
}
.group-item-saman:hover {
  .rotate-item-180-x {
    transform: rotateX(-180deg) !important;
  }
  .rotate-item-0-x {
    transform: rotateX(0deg) !important;
  }
}
.group-item-enamad:hover {
  .rotate-item-180-y-plus {
    transform: rotateY(180deg) !important;
  }
  .rotate-item-0 {
    transform: rotateY(0deg) !important;
  }
}
.group-instagram:hover {
  .text-white-hover {
    color: white !important;
  }
  .translate-y-17-hover {
    transform: translateY(-125%) !important;
  }
  .title-change {
    opacity: 100% !important;
    transform: translateX(-100%) translateX(12px) !important;
  }
}
.group-telegram:hover {
  .text-white-hover {
    color: white !important;
  }
  .translate-y-17-hover {
    transform: translateY(-125%) !important;
  }
  .title-change {
    opacity: 100% !important;
    transform: translateX(-100%) translateX(10px) !important;
  }
}
.group-aparat:hover {
  .text-white-hover {
    color: white !important;
  }
  .translate-y-17-hover {
    transform: translateY(-125%) !important;
  }
  .title-change {
    opacity: 100% !important;
    transform: translateX(-100%) translateX(10px) !important;
  }
}
.group-eitaa:hover {
  .text-white-hover {
    color: white !important;
  }
  .translate-y-17-hover {
    transform: translateY(-125%) !important;
  }
  .title-change {
    opacity: 100% !important;
    transform: translateX(-100%) translateX(7.5px) !important;
  }
}
.group-balad:hover {
  width: 125px !important;
  .balad-opacity {
    opacity: 100% !important;
  }
}
.group-neshan:hover {
  width: 130px !important;
  .neshan-opacity {
    opacity: 100% !important;
  }
}
.group-google:hover {
  width: 110px !important;
  .balad-opacity {
    opacity: 100% !important;
  }
}
.group-git:hover {
  width: 107px !important;
  .balad-opacity {
    opacity: 100% !important;
  }
}
.group-linkedin:hover {
  width: 116px !important;
  .balad-opacity {
    opacity: 100% !important;
  }
}
.sticky-header {
  position: sticky;
  top: 0;
}
.desctop__exit {
  display: none !important;
  @media (width >= 768px) {
    display: block !important;
  }
}
header {
  all: unset !important;
  z-index: 1500;
}
html,body {
  direction: rtl;
  scroll-behavior: smooth;
}
a {
  user-select: none !important;
  text-decoration: none;
}
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
@font-face {
  font-family: Kalameh-Bold;
  src: url(./font/Kalame/Kalameh-Bold.7dedd20.eot);
  src: url(./font/Kalame/Kalameh-Bold.4f51340.ttf);
  src: url(./font/Kalame/Kalameh-Bold.337ad92.woff);
  src: url(./font/Kalame/Kalameh-Bold.cc91ac9.woff2);
}
@font-face {
  font-family: Kalameh-Black;
  src: url(./font/Kalame/Kalameh-Black.2d9028b.ttf);
  src: url(./font/Kalame/Kalameh-Black.5ddc2c3.eot);
  src: url(./font/Kalame/Kalameh-Black.576fc67.woff);
  src: url(./font/Kalame/Kalameh-Black.146553b.woff2);
}
@font-face {
  font-family: Kalameh-ExtraLight;
  src: url(./font/Kalame/Kalameh-ExtraLight.2047f8f.eot);
  src: url(./font/Kalame/Kalameh-ExtraLight.9459239.ttf);
  src: url(./font/Kalame/Kalameh-ExtraLight.bda2cdd.woff);
  src: url(./font/Kalame/Kalameh-ExtraLight.a1ca362.woff2);
}
@font-face {
  font-family: Kalameh-Light;
  src: url(./font/Kalame/Kalameh-Light.d0b378a.eot);
  src: url(./font/Kalame/Kalameh-Light.d6b3928.ttf);
  src: url(./font/Kalame/Kalameh-Light.6e146d5.woff);
  src: url(./font/Kalame/Kalameh-Light.b773d9e.woff2);
}
@font-face {
  font-family: Kalameh-Medium;
  src: url(./font/Kalame/Kalameh-Medium.e201a39.eot);
  src: url(./font/Kalame/Kalameh-Medium.4cd761a.ttf);
  src: url(./font/Kalame/Kalameh-Medium.b309fcf.woff);
  src: url(./font/Kalame/Kalameh-Medium.bc89e61.woff2);
}
@font-face {
  font-family: Kalameh-Regular;
  src: url(./font/Kalame/Kalameh-Regular.25a8bec.eot);
  src: url(./font/Kalame/Kalameh-Regular.fe9383d.ttf);
  src: url(./font/Kalame/Kalameh-Regular.42b8a54.woff);
  src: url(./font/Kalame/Kalameh-Regular.a038ae9.woff2);
}
@font-face {
  font-family: Kalameh-Thin;
  src: url(./font/Kalame/Kalameh-Thin.1f7c4af.eot);
  src: url(./font/Kalame/Kalameh-Thin.1f7c4af.ttf);
  src: url(./font/Kalame/Kalameh-Thin.9ce1cb0.woff);
  src: url(./font/Kalame/Kalameh-Thin.77cd67c.woff2);
}
@layer base {
  :where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme=light] {
    color-scheme: light;
    --color-base-100: oklch(100% 0 0);
    --color-base-200: oklch(98% 0 0);
    --color-base-300: oklch(95% 0 0);
    --color-base-content: oklch(21% 0.006 285.885);
    --color-primary: oklch(45% 0.24 277.023);
    --color-primary-content: oklch(93% 0.034 272.788);
    --color-secondary: oklch(65% 0.241 354.308);
    --color-secondary-content: oklch(94% 0.028 342.258);
    --color-accent: oklch(77% 0.152 181.912);
    --color-accent-content: oklch(38% 0.063 188.416);
    --color-neutral: oklch(14% 0.005 285.823);
    --color-neutral-content: oklch(92% 0.004 286.32);
    --color-info: oklch(74% 0.16 232.661);
    --color-info-content: oklch(29% 0.066 243.157);
    --color-success: oklch(76% 0.177 163.223);
    --color-success-content: oklch(37% 0.077 168.94);
    --color-warning: oklch(82% 0.189 84.429);
    --color-warning-content: oklch(41% 0.112 45.904);
    --color-error: oklch(71% 0.194 13.428);
    --color-error-content: oklch(27% 0.105 12.094);
    --radius-selector: 0.5rem;
    --radius-field: 0.25rem;
    --radius-box: 0.5rem;
    --size-selector: 0.25rem;
    --size-field: 0.25rem;
    --border: 1px;
    --depth: 1;
    --noise: 0;
  }
}
@layer base {
  @property --radialprogress {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 0%;
  }
}
@layer base {
  :root {
    scrollbar-color: currentColor #0000;
    @supports (color: color-mix(in lab, red, red)) {
      scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) #0000;
    }
  }
}
@layer base {
  :root:has( .modal-open, .modal[open], .modal:target, .modal-toggle:checked, .drawer:not([class*="drawer-open"]) > .drawer-toggle:checked ) {
    overflow: hidden;
  }
}
@layer base {
  :root, [data-theme] {
    background-color: var(--root-bg, var(--color-base-100));
    color: var(--color-base-content);
  }
}
@layer base {
  :root {
    --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E");
  }
  .chat {
    --mask-chat: url("data:image/svg+xml,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 11.5004C0 13.0004 2 13.0004 2 13.0004H12H13V0.00036329L12.5 0C12.5 0 11.977 2.09572 11.8581 2.50033C11.6075 3.35237 10.9149 4.22374 9 5.50036C6 7.50036 0 10.0004 0 11.5004Z'/%3e%3c/svg%3e");
  }
}
@layer base {
  :where( :root:has( .modal-open, .modal[open], .modal:target, .modal-toggle:checked, .drawer:not(.drawer-open) > .drawer-toggle:checked ) ) {
    scrollbar-gutter: stable;
    background-image: linear-gradient(var(--color-base-100), var(--color-base-100));
    --root-bg: var(--color-base-100);
    @supports (color: color-mix(in lab, red, red)) {
      --root-bg: color-mix(in srgb, var(--color-base-100), oklch(0% 0 0) 40%);
    }
  }
  :where(.modal[open], .modal-open, .modal-toggle:checked + .modal):not(.modal-start, .modal-end) {
    scrollbar-gutter: stable;
  }
}
@keyframes skeleton {
  0% {
    background-position: 150%;
  }
  100% {
    background-position: -50%;
  }
}
@keyframes progress {
  50% {
    background-position-x: -115%;
  }
}
@keyframes radio {
  0% {
    padding: 5px;
  }
  50% {
    padding: 3px;
  }
}
@keyframes dropdown {
  0% {
    opacity: 0;
  }
}
@keyframes rating {
  0%, 40% {
    scale: 1.1;
    filter: brightness(1.05) contrast(1.05);
  }
}
@keyframes toast {
  0% {
    scale: 0.9;
    opacity: 0;
  }
  100% {
    scale: 1;
    opacity: 1;
  }
}
@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-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-gradient-position {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}
@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-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-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@property --tw-text-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-text-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-content {
  syntax: "*";
  initial-value: "";
  inherits: false;
}
@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
@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-x-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --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-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-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-text-shadow-color: initial;
      --tw-text-shadow-alpha: 100%;
      --tw-tracking: initial;
      --tw-content: "";
    }
  }
}