*,
:before,
:after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e6e8ec;
}

:before,
:after {
  --tw-content: "";
}

html,
:host {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  font-family: Manrope, sans-serif, ui-sans-serif, system-ui, sans-serif,
    apple color emoji, segoe ui emoji, Segoe UI Symbol, noto color emoji;
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  line-height: inherit;
  position: relative;
  overflow: hidden;
}

.custom-select-container {
  position: relative;
  width: 100%;
  cursor: pointer;
}

.selected-option {
  padding: 10px;
  border: 1px solid rgb(34 197 94 / var(--tw-text-opacity));
  border-radius: 8px;
  background-color: #2b2b2b;
  font-size: 1rem;
}

.custom-options {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #2b2b2b;
  border: 1px solid rgb(34 197 94 / var(--tw-text-opacity));
  border-radius: 8px;
  z-index: 10;
  list-style-type: none;
  padding: 0;
  margin: 0;
  max-height: 200px;
  overflow-y: auto;
}

.custom-option {
  padding: 10px;
  transition: background-color 0.2s;
}

.custom-option:hover {
  background-color: rgb(34 197 94 / var(--tw-text-opacity));
}

:root {
  /* Base Colors */
  --base-background: 223 19.98% 7.01%;
  --base-foreground: 0 0% 97.95%;

  /* Card Panel Colors */
  --panel: 220 19.85% 8.99%;
  --panel-foreground: 225 10.92% 92.87%;
  --panel-surface: 225 13.92% 11.05%;
  --panel-surface-foreground: 225 10.92% 92.87%;
  --panel-alt: 225 16.93% 8.98%;
  --panel-alt-foreground: 225 10.92% 92.87%;

  /* Pop-up Colors */
  --overlay: 218 13.91% 11.03%;
  --overlay-foreground: 0 0% 97.95%;

  /* Primary Colors */
  --main-color: 122.01 82.96% 29.98%;
  --main-color-hover: 114.98 99.89% 32.91%;
  --main-color-foreground: 0 0% 97.95%;
  --main-ring: 213.08 93.92% 67.87% / 30.05%;
  --main-light: 115.01 99.95% 33.02% / 0.098%;
  --main-light-hover: 115.01 99.95% 33.02% / 0.198%;
  --main-light-foreground: 115.01 99.95% 43.01%;

  /* Secondary Colors */
  --subtle: 220.01 10.05% 17.02%;
  --subtle-hover: 220.02 9.96% 23.03%;
  --subtle-foreground: 0 0% 97.95%;
  --subtle-ring: 217.85 10.59% 64.85% / 20.05%;
  --subtle-light: 217.85 10.59% 64.85% / 9.98%;
  --subtle-light-hover: 217.85 10.59% 64.85% / 19.91%;
  --subtle-light-foreground: 0 0% 91.98%;

  /* Dangerous/Pronicious */
  --alert: 359.98 83.96% 59.95%;
  --alert-hover: 0.02 91.02% 70.92%;
  --alert-foreground: 0 0% 97.95%;
  --alert-ring: 0 90.55% 70.75% / 19.98%;
  --alert-light: 0 90.55% 70.75% / 9.99%;
  --alert-light-hover: 0 90.55% 70.75% / 19.91%;
  --alert-light-foreground: 0 92.45% 65.65%;

  /* Succession */
  --approval: 141.97 75.95% 35.98%;
  --approval-hover: 141.89 69.89% 44.93%;
  --approval-foreground: 0 0% 97.95%;
  --approval-ring: 141.92 70.55% 45.27% / 19.91%;
  --approval-light: 141.91 69.13% 58.02% / 9.96%;
  --approval-light-hover: 141.91 69.13% 58.02% / 19.92%;
  --approval-light-foreground: 141.91 69.13% 58.02%;

  /* Warning/Cautious */
  --caution: 47.88 95.78% 53.05%;
  --caution-hover: 47.98 94.89% 58.95%;
  --caution-text: 26.01 83.25% 14.05%;
  --caution-ring: 47.92 95.79% 53.12% / 19.92%;
  --caution-light: 47.92 95.79% 53.12% / 9.96%;
  --caution-light-hover: 47.92 95.79% 53.12% / 19.98%;
  --caution-light-text: 45.35 93.35% 47.42%;

  /* Informative */
  --data: 242.95 74.92% 58.98%;
  --data-hover: 239.02 84.92% 66.95%;
  --data-text: 240 80% 75%;
  --data-ring: 234.42 89.45% 73.89% / 29.99%;
  --data-light: 234.42 89.45% 73.89% / 9.99%;
  --data-light-hover: 234.42 89.45% 73.89% / 19.92%;
  --data-light-text: 234.42 89.45% 73.89%;

  /* Others */
  --faded: 217.63 14.89% 10.72%;
  --faded-foreground: 239.83 5.46% 63.99%;
  --highlight: 220.64 9.19% 16.98%;
  --highlight-foreground: 0 0% 97.78%;
  --shaky: 0 62.32% 29.96%;
  --shaky-foreground: 0 0% 97.78%;
  --border-default: 212.53 12.78% 14.23%;
  --input-default: 219.63 9.85% 17.48%;
  --area: 224 18.01% 8.38%;
  --area-hover: 222 7.84% 17.45%;
  --area-ring: 222 7.84% 17.45%;
  --area-ring-hover: 221 5.86% 30.55%;
  --area-foreground: 0 0% 97.78%;
  --radio-default: 226.45 7.83% 22.34%;
  --radio-hover: 226 6.55% 26.73%;
  --radio-foreground: 0 0% 97.78%;
  --ring-default: 219.43 9.67% 16.13%;
  --radius-default: 0.478rem;
  --toggle-item: 222.03 10.98% 11.66%;
  --toggle-item-active: 222.03 9.47% 13.69%;
  --toggle-item-ring: 222.03 9.98% 13.13%;
  --toggle-item-ring-active: 224.05 6.34% 21.71%;
}

/* Disabled to avoid it from disrupting the theme
  * {
    border-color: hsl(var(--border-default));
  }
  body {
    background-color: hsl(var(--base-background));
    color: hsl(var(--base-foreground));
  }
*/

*,
:before,
:after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style: ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style: ;
}

/* Custom Scrollbar Styles for the Entire Website */
::-webkit-scrollbar {
  width: 8px;
  /* Adjust the width as per your preference */
}

::-webkit-scrollbar-track {
  background: #1a1a1a;
  /* Dark color to blend with the background */
}

::-webkit-scrollbar-thumb {
  background-color: #00b050;
  /* Green color matching your theme */
  border-radius: 0px;
  /* Rounded scrollbar thumb */
  border: 2px solid #1a1a1a;
  /* Add some space around the scrollbar thumb */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #009e45;
  /* A slightly lighter green for hover effect */
}

/* Disabled to avoid it from disrupting other frameworks
  .container {
    width: 100%;
  }
  @media (min-width: 640px) {
    .container {
      max-width: 640px;
    }
  }
  @media (min-width: 768px) {
    .container {
      max-width: 768px;
    }
  }
  @media (min-width: 1024px) {
    .container {
      max-width: 1024px;
    }
  }
  @media (min-width: 1280px) {
    .container {
      max-width: 1280px;
    }
  }
  @media (min-width: 1536px) {
    .container {
      max-width: 1536px;
    }
  }
*/

.bg-gray-300\/5 {
  background-color: rgba(209, 213, 219, 0.05);
}

.marker\:green::marker {
  color: hsl(var(--main-color));
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.header-sub-bar {
  background-color: hsl(var(--base-background) / 0.7);
  width: 100%;
}

.header-sub-bar-category-bottom-blur {
  background: linear-gradient(
    197deg,
    hsl(123.4 83.7% 36%) 6.69%,
    hsl(122.5 84% 35.67% / 0.86) 48.74%,
    hsl(121.93 82.66% 34.35% / 0.694) 92.18%
  );
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
    var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
    var(--tw-sepia) var(--tw-drop-shadow);
  opacity: 0.25;
  --tw-translate-x: -51%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  width: 3.655rem;
  height: 1.547rem;
  left: 51%;
  bottom: -0.92rem;
  position: absolute;
}

.header-sub-bar-category-bottom-line {
  background: linear-gradient(
    110deg,
    hsl(121.33 83.47% 37.05%) 28.03%,
    hsl(122 83% 35% / 0.8) 92.12%
  );
  border-radius: 9999px;
  --tw-translate-x: -49%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  width: 31px;
  height: 0.125rem;
  left: 49%;
  bottom: 0;
  position: absolute;
}

.mobile-service-category-sub-bar-blur {
  background: linear-gradient(
    197deg,
    hsl(123.4 83.7% 36%) 6.69%,
    hsl(122.5 84% 35.67% / 0.86) 48.74%,
    hsl(121.93 82.66% 34.35% / 0.694) 92.18%
  );
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
    var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
    var(--tw-sepia) var(--tw-drop-shadow);
  opacity: 0.25;
  --tw-translate-x: -51%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  width: 4.9765rem;
  height: 1.547rem;
  left: 51%;
  top: -0.92rem;
  position: absolute;
}

.mobile-service-category-sub-bar-line {
  background: linear-gradient(
    110deg,
    hsl(121.33 83.47% 37.05%) 28.03%,
    hsl(122 83% 35% / 0.8) 92.12%
  );
  border-radius: 9999px;
  --tw-translate-x: -49%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  width: 63px;
  height: 0.125rem;
  left: 49%;
  top: 0;
  position: absolute;
}

.font-display {
  font-family: Red Hat Display, sans-serif, ui-sans-serif, system-ui, sans-serif,
    apple color emoji, segoe ui emoji, Segoe UI Symbol, noto color emoji;
}

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    Liberation Mono, Courier New, monospace;
}

.font-sans {
  font-family: Manrope, sans-serif, ui-sans-serif, system-ui, sans-serif,
    apple color emoji, segoe ui emoji, Segoe UI Symbol, noto color emoji;
}

.button-sm-faded-text-style {
  color: hsl(var(--subtle-light-foreground));
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.15s;
}

.button-bright-secondary-bg {
  background-color: hsl(var(--subtle-light));
}

.button-bright-secondary-bg:hover {
  background-color: hsl(var(--subtle-light-hover));
}

.button-click-animation-y {
  --tw-translate-y: 1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.swiper-button-prev::after {
  font-size: 0.875rem;
  line-height: 1;
}

.swiper-button-next::after {
  font-size: 0.875rem;
  line-height: 1;
}

.service-types-button {
  display: flex;
  align-items: center;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  font-size: 0.925rem;
  line-height: 1.3rem;
  font-weight: 500;
  border-radius: 0.5rem;
  color: hsl(238.9, 4.68%, 63.7%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  background-color: transparent;
  transition: all 0.3s ease-in-out, filter 0.2s ease-in;
  filter: brightness(1);
}

@media (hover: hover) {
  .service-types-button:hover {
    --tw-gradient-to: hsl(122 83% 37% / 0.1) var(--tw-gradient-from-position);
    --tw-gradient-from: hsl(122 83% 37% / 0) var(--tw-gradient-to-position);
    background-image: linear-gradient(
      to right,
      var(--tw-gradient-from),
      var(--tw-gradient-to)
    );
    background-color: hsl(216.97 10.44% 63.48% / 10%);
    color: hsl(0 0 96.8%) !important;
    transition: all 0.3s ease-in-out, filter 0.2s ease-in;
    background-position: 100% 50%;
    filter: brightness(1.1);
  }
}

@media (max-width: 600px) {
  .service-types-button:hover {
    --tw-gradient-to: hsl(122 83% 37% / 0.1) var(--tw-gradient-from-position);
    --tw-gradient-from: hsl(122 83% 37% / 0) var(--tw-gradient-to-position);
    background-image: linear-gradient(
      to right,
      var(--tw-gradient-from),
      var(--tw-gradient-to)
    );
    background-color: hsl(216.97 10.44% 63.48% / 10%);
    color: hsl(0 0 96.8%) !important;
    transition: all 0.3s ease-in-out, filter 0.2s ease-in;
    background-position: 100% 50%;
    filter: brightness(1.1);
  }
}

.service-types-button:active {
  --tw-gradient-to: hsl(122 83% 37% / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-from: hsl(122 83% 37% / 0) var(--tw-gradient-to-position);
  background-image: linear-gradient(
    to right,
    var(--tw-gradient-from),
    var(--tw-gradient-to)
  );
  background-color: hsl(216.97 10.44% 63.48% / 10%);
  color: hsl(0 0 96.8%) !important;
  transition: all 0.3s ease-in-out, filter 0.2s ease-in;
  background-position: 100% 50%;
  filter: brightness(1.1);
}

.active-service-type-button {
  --tw-gradient-to: hsl(122 83% 37% / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-from: hsl(122 83% 37% / 0) var(--tw-gradient-to-position);
  background-image: linear-gradient(
    to right,
    var(--tw-gradient-from),
    var(--tw-gradient-to)
  );
  background-color: hsl(216.97 10.44% 63.48% / 10%);
  color: hsl(0 0 96.8%) !important;
  background-position: 100% 50%;
  filter: brightness(1.1);
}

.game-services-mobile-swiper-left-button {
  --tw-gradient-to: hsl(122 83% 37% / 0.13) var(--tw-gradient-from-position);
  --tw-gradient-from: hsl(122 83% 37% / 0.18) var(--tw-gradient-to-position);
  background-image: linear-gradient(
    to right,
    var(--tw-gradient-from),
    var(--tw-gradient-to)
  ) !important;
  background-position: 100% 50% !important;
  filter: brightness(1) !important;
  clip-path: polygon(100% 0, 20% 0, 0 50%, 20% 100%, 100% 100%) !important;
}

.game-services-mobile-swiper-right-button {
  --tw-gradient-to: hsl(122 83% 37% / 0.13) var(--tw-gradient-from-position);
  --tw-gradient-from: hsl(122 83% 37% / 0.18) var(--tw-gradient-to-position);
  background-image: linear-gradient(
    to right,
    var(--tw-gradient-from),
    var(--tw-gradient-to)
  ) !important;
  background-position: 100% 50% !important;
  filter: brightness(1) !important;
  clip-path: polygon(0 0, 80% 0, 100% 50%, 80% 100%, 0 100%) !important;
}

@media (max-width: 600px) {
  .swiper-button-prev {
    margin-left: 0 !important;
  }
}

.swiper-arrow {
  color: hsl(var(--base-foreground));
  background: transparent;
  margin-left: 2rem;
  display: inline-flex;
  position: relative;
  transition: all 0.1s ease-in-out;
}

.swiper-arrow:active {
  --tw-translate-y: 1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.left-arrow-gradient {
  background-size: 200% 100%;
  background-position: 0% 50%;
  transition: background-position 0.3s ease-in-out, filter 0.3s ease-in-out;
  filter: brightness(1);
  clip-path: polygon(100% 0, 20% 0, 0 50%, 20% 100%, 100% 100%);
}

.left-arrow-gradient:hover {
  --tw-gradient-to: hsl(122 83% 37% / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-from: hsl(122 83% 37% / 0) var(--tw-gradient-to-position);
  background-image: linear-gradient(
    to right,
    var(--tw-gradient-from),
    var(--tw-gradient-to)
  );
  transition: all 0.3s ease-in-out;
  transition: background-position 0.3s ease-in-out, filter 0.3s ease-in-out;
  background-position: 100% 50%;
  filter: brightness(1.1);
  clip-path: polygon(100% 0, 20% 0, 0 50%, 20% 100%, 100% 100%);
}

.left-arrow-gradient:focus {
  --tw-gradient-to: hsl(122 83% 37% / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-from: hsl(122 83% 37% / 0) var(--tw-gradient-to-position);
  background-image: linear-gradient(
    to right,
    var(--tw-gradient-from),
    var(--tw-gradient-to)
  );
  transition: all 0.3s ease-in-out;
  transition: background-position 0.3s ease-in-out, filter 0.3s ease-in-out;
  background-position: 100% 50%;
  filter: brightness(1.1);
  clip-path: polygon(100% 0, 20% 0, 0 50%, 20% 100%, 100% 100%);
}

.right-arrow-gradient {
  background-size: 200% 100%;
  background-position: 0% 50%;
  transition: background-position 0.3s ease-in-out, filter 0.3s ease-in-out;
  filter: brightness(1);
  clip-path: polygon(0 0, 80% 0, 100% 50%, 80% 100%, 0 100%);
}

.right-arrow-gradient:hover {
  --tw-gradient-to: hsl(122 83% 37% / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-from: hsl(122 83% 37% / 0) var(--tw-gradient-to-position);
  background-image: linear-gradient(
    to right,
    var(--tw-gradient-from),
    var(--tw-gradient-to)
  );
  transition: all 0.3s ease-in-out;
  transition: background-position 0.3s ease-in-out, filter 0.3s ease-in-out;
  background-position: 100% 50%;
  filter: brightness(1.1);
  clip-path: polygon(0 0, 80% 0, 100% 50%, 80% 100%, 0 100%);
}

.right-arrow-gradient:focus {
  --tw-gradient-to: hsl(122 83% 37% / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-from: hsl(122 83% 37% / 0) var(--tw-gradient-to-position);
  background-image: linear-gradient(
    to right,
    var(--tw-gradient-from),
    var(--tw-gradient-to)
  );
  transition: all 0.3s ease-in-out;
  transition: background-position 0.3s ease-in-out, filter 0.3s ease-in-out;
  background-position: 100% 50%;
  filter: brightness(1.1);
  clip-path: polygon(0 0, 80% 0, 100% 50%, 80% 100%, 0 100%);
}

.button-blur-animated-md-green {
  display: inline-flex;
  position: relative;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.25rem;
  background: transparent;
  color: hsl(var(--main-light-foreground));
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 0.5rem;
  background-size: 200% 100%;
  background-position: 0% 50%;
  transition: background-position 0.3s ease-in-out, filter 0.3s ease-in-out;
  filter: brightness(1);
}

.button-blur-animated-md-green:hover {
  --tw-gradient-to: hsl(122 83% 37% / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-from: hsl(122 83% 37% / 0) var(--tw-gradient-to-position);
  background-image: linear-gradient(
    to right,
    var(--tw-gradient-from),
    var(--tw-gradient-to)
  );
  transition: all 0.3s ease-in-out;
  transition: background-position 0.3s ease-in-out, filter 0.3s ease-in-out;
  background-position: 100% 50%;
  filter: brightness(1.1);
}

.button-blur-animated-md-green:active {
  --tw-translate-y: 1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.game-services-mobile-swiper-left-button:hover {
  --tw-gradient-to: hsl(122 83% 37% / 0.25) var(--tw-gradient-from-position) !important;
  --tw-gradient-from: hsl(122 83% 37% / 0.3) var(--tw-gradient-to-position) !important;
  background-image: linear-gradient(
    to right,
    var(--tw-gradient-from),
    var(--tw-gradient-to)
  ) !important;
  background-position: 100% 50% !important;
  filter: brightness(1) !important;
  clip-path: polygon(100% 0, 20% 0, 0 50%, 20% 100%, 100% 100%) !important;
}

.game-services-mobile-swiper-left-button:focus {
  --tw-gradient-to: hsl(122 83% 37% / 0.25) var(--tw-gradient-from-position) !important;
  --tw-gradient-from: hsl(122 83% 37% / 0.3) var(--tw-gradient-to-position) !important;
  background-image: linear-gradient(
    to right,
    var(--tw-gradient-from),
    var(--tw-gradient-to)
  ) !important;
  background-position: 100% 50% !important;
  filter: brightness(1) !important;
  clip-path: polygon(100% 0, 20% 0, 0 50%, 20% 100%, 100% 100%) !important;
}

.game-services-mobile-swiper-right-button:hover {
  --tw-gradient-to: hsl(122 83% 37% / 0.25) var(--tw-gradient-from-position) !important;
  --tw-gradient-from: hsl(122 83% 37% / 0.3) var(--tw-gradient-to-position) !important;
  background-image: linear-gradient(
    to right,
    var(--tw-gradient-from),
    var(--tw-gradient-to)
  ) !important;
  background-position: 100% 50% !important;
  filter: brightness(1) !important;
  clip-path: polygon(0 0, 80% 0, 100% 50%, 80% 100%, 0 100%) !important;
}

.game-services-mobile-swiper-right-button:focus {
  --tw-gradient-to: hsl(122 83% 37% / 0.25) var(--tw-gradient-from-position) !important;
  --tw-gradient-from: hsl(122 83% 37% / 0.3) var(--tw-gradient-to-position) !important;
  background-image: linear-gradient(
    to right,
    var(--tw-gradient-from),
    var(--tw-gradient-to)
  ) !important;
  background-position: 100% 50% !important;
  filter: brightness(1) !important;
  clip-path: polygon(0 0, 80% 0, 100% 50%, 80% 100%, 0 100%) !important;
}

.background-banner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 68vh;
  /* Adjust the height */
  z-index: -20;
  /* Ensure the banner is behind the content */
  overflow: hidden;
}

.background-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Cover the entire parent */
  background-image: linear-gradient(
    to top,
    hsl(221.96 19.87% 6.63%),
    hsl(221.96 19.87% 6.63% / 0.9)
  );
  backdrop-filter: blur(4px);
  /* Adds the blur effect */
  -webkit-backdrop-filter: blur(4px);
  /* Safari support */
  z-index: 1;
  /* Ensure it appears above the image */
}

.background-banner-opacity-75::before {
  background-image: linear-gradient(
    to top,
    hsl(221.96 19.87% 6.63%),
    hsl(221.96 19.87% 6.63% / 0.75)
  );
}

.background-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ensure the image covers the area */
  object-position: center;
  /* Adjust image alignment */
  z-index: 0;
  /* Ensure the image is below the gradient and blur */
  position: absolute;
}

@media (min-width: 1024px) {
  .background-banner {
    height: 70vh;
    /* Adjust for larger screens */
    padding-top: 8rem;
  }
}

.text-sm-faded {
  line-height: 1.5rem;
  font-weight: 500;
  font-size: 0.875rem;
  color: hsl(var(--faded-foreground));
}

.text-basic {
  font-size: 1rem;
  line-height: 1.5rem;
  color: hsl(var(--base-foreground) / 0.9);
}

.text-basic-faded-extra {
  font-size: 1rem;
  line-height: 1.5rem;
  color: hsl(var(--faded-foreground) / 0.5);
}

.text-faded {
  font-size: 1rem;
  line-height: 1.5rem;
  color: hsl(var(--faded-foreground));
}

.text-color-faded {
  color: hsl(239.73 4.91% 63.87%);
}

.text-color-faded-on-hover:hover {
  color: hsl(0 0% 97.83%);
}

.text-strong-lg {
  color: hsl(var(--base-foreground));
  font-size: 1.25rem;
  line-height: 1.75rem;
  letter-spacing: -0.025em;
  font-weight: 700;
  font-family: Red Hat Display, sans-serif, ui-sans-serif, system-ui, sans-serif,
    apple color emoji, segoe ui emoji, Segoe UI Symbol, noto color emoji;
}

@media (min-width: 600px) {
  .text-strong-lg {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
  }
}

@media (max-width: 600px) {
  .text-mobile-sm {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
  }

  .text-mobile-xl {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
  }
}

.text-heading-strong {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  color: hsl(var(--base-foreground));
}

.text-heading-strong-sm {
  color: hsl(var(--base-foreground));
  font-size: 1.25rem;
  line-height: 1.75rem;
  letter-spacing: 0;
  font-weight: 300;
  font-family: Red Hat Display, sans-serif, ui-sans-serif, system-ui, sans-serif,
    apple color emoji, segoe ui emoji, Segoe UI Symbol, noto color emoji;
}

.text-heading-strong-sm-bold-tight-mobile-xs {
  color: hsl(var(--base-foreground));
  font-size: 1.239967rem;
  line-height: 1.7494rem;
  letter-spacing: -0.025em;
  font-weight: 700;
  font-family: Red Hat Display, sans-serif, ui-sans-serif, system-ui, sans-serif,
    apple color emoji, segoe ui emoji, Segoe UI Symbol, noto color emoji;
}

@media (max-width: 600px) {
  .text-heading-strong-sm-bold-tight-mobile-xs {
    font-size: 1.12497rem;
    line-height: 1.7393rem;
  }
}

.text-heading-strong-xl-bold-tight-mobile-lg {
  color: hsl(var(--base-foreground));
  font-size: 2.2434rem;
  line-height: 2.534rem;
  letter-spacing: -0.025em;
  font-weight: 700;
  font-family: Red Hat Display, sans-serif, ui-sans-serif, system-ui, sans-serif,
    apple color emoji, segoe ui emoji, Segoe UI Symbol, noto color emoji;
}

@media (max-width: 600px) {
  .text-heading-strong-xl-bold-tight-mobile-lg {
    font-size: 1.892rem;
    line-height: 2.2542rem;
  }
}

.text-heading-strong-xl-bold-tight {
  color: hsl(var(--base-foreground));
  font-size: 2.2523rem;
  line-height: 2.543rem;
  letter-spacing: -0.025em;
  font-weight: 700;
  font-family: Red Hat Display, sans-serif, ui-sans-serif, system-ui, sans-serif,
    apple color emoji, segoe ui emoji, Segoe UI Symbol, noto color emoji;
}

.text-base-faded {
  color: hsl(var(--faded-foreground));
  font-size: 1.003rem;
  line-height: 1.767rem;
}

.text-base-green-half-weighted {
  --tw-text-opacity: 1;
  color: rgb(35 196 95 / var(--tw-text-opacity));
  line-height: 1.73rem;
  font-weight: 600;
  font-size: 1.002rem;
}

.text-heading-strong-lg {
  color: hsl(var(--base-foreground));
  letter-spacing: -0.025em;
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-family: Red Hat Display, sans-serif, ui-sans-serif, system-ui, sans-serif,
    apple color emoji, segoe ui emoji, Segoe UI Symbol, noto color emoji;
}

.text-heading-strong-lg-font-600-relaxed-mobile-optimized {
  color: hsl(var(--base-foreground));
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 2rem;
  font-family: Red Hat Display, sans-serif, ui-sans-serif, system-ui, sans-serif,
    apple color emoji, segoe ui emoji, Segoe UI Symbol, noto color emoji;
}

@media (max-width: 600px) {
  .text-heading-strong-lg-font-600-relaxed-mobile-optimized {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

.text-accent {
  color: hsl(var(--highlight));
}

.text-accent-foreground {
  color: hsl(var(--highlight-foreground));
}

.text-card-alt-foreground {
  color: hsl(var(--panel-alt-foreground));
}

.text-card-foreground {
  color: hsl(var(--panel-foreground));
}

.text-card-surface-foreground {
  color: hsl(var(--panel-surface-foreground));
}

.text-current {
  color: currentColor;
}

.text-danger {
  color: hsl(var(--alert));
}

.text-danger-foreground {
  color: hsl(var(--alert-foreground));
}

.text-danger-light-foreground {
  color: hsl(var(--alert-light-foreground));
}

.text-destructive-foreground {
  color: hsl(var(--shaky-foreground));
}

.text-field-foreground {
  color: hsl(var(--area-foreground));
}

.text-foreground {
  color: hsl(var(--base-foreground));
}

.text-foreground\/70 {
  color: hsl(var(--base-foreground) / 0.7);
}

.text-foreground\/75 {
  color: hsl(var(--base-foreground) / 0.75);
}

.text-foreground\/80 {
  color: hsl(var(--base-foreground) / 0.8);
}

.text-foreground\/90 {
  color: hsl(var(--base-foreground) / 0.9);
}

.text-sur {
  color: hsl(var(--base-foreground));
}

.text-foreground\/70 {
  color: hsl(var(--base-foreground) / 0.7);
}

.text-foreground\/75 {
  color: hsl(var(--base-foreground) / 0.75);
}

.text-foreground\/80 {
  color: hsl(var(--base-foreground) / 0.8);
}

.text-foreground\/90 {
  color: hsl(var(--base-foreground) / 0.9);
}

.text-info-foreground {
  color: hsl(var(--data-text));
}

.text-info-light-foreground {
  color: hsl(var(--data-light-foreground));
}

.text-inherit {
  color: inherit;
}

.text-muted {
  color: hsl(var(--faded));
}

.text-muted-foreground {
  color: hsl(var(--faded-foreground));
}

.text-muted-foreground\/20 {
  color: hsl(var(--faded-foreground) / 0.2);
}

.text-muted-foreground\/50 {
  color: hsl(var(--faded-foreground) / 0.5);
}

.text-muted-foreground\/70 {
  color: hsl(var(--faded-foreground) / 0.7);
}

.text-neutral-200 {
  --tw-text-opacity: 1;
  color: rgb(229 229 229 / var(--tw-text-opacity));
}

.text-neutral-400 {
  --tw-text-opacity: 1;
  color: rgb(163 163 163 / var(--tw-text-opacity));
}

.text-neutral-500 {
  --tw-text-opacity: 1;
  color: rgb(115 115 115 / var(--tw-text-opacity));
}

.text-neutral-600 {
  --tw-text-opacity: 1;
  color: rgb(82 82 82 / var(--tw-text-opacity));
}

.text-neutral-700 {
  --tw-text-opacity: 1;
  color: rgb(64 64 64 / var(--tw-text-opacity));
}

.text-neutral-800 {
  --tw-text-opacity: 1;
  color: rgb(38 38 38 / var(--tw-text-opacity));
}

.text-neutral-900 {
  --tw-text-opacity: 1;
  color: rgb(23 23 23 / var(--tw-text-opacity));
}

.text-popover-foreground {
  color: hsl(var(--overlay-foreground));
}

.text-primary {
  color: hsl(var(--main-color));
}

.text-primary-foreground {
  color: hsl(var(--main-foreground));
}

.text-primary-foreground\/90 {
  color: hsl(var(--main-foreground) / 0.9);
}

.text-primary-light-foreground {
  color: hsl(var(--main-light-foreground));
}

.text-primary-light-foreground\/75 {
  color: hsl(var(--main-light-foreground) / 0.75);
}

.text-radio-foreground {
  color: hsl(var(--radio-foreground));
}

.text-secondary-foreground {
  color: hsl(var(--subtle-foreground));
}

.text-secondary-light-foreground {
  color: hsl(var(--subtle-light-foreground));
}

.text-secondary-light-foreground\/75 {
  color: hsl(var(--subtle-light-foreground) / 0.75);
}

.text-success {
  color: hsl(var(--approval));
}

.text-success-foreground {
  color: hsl(var(--approval-foreground));
}

.text-success-light-foreground {
  color: hsl(var(--approval-light-foreground));
}

.text-success-light-foreground\/90 {
  color: hsl(var(--approval-light-foreground) / 0.9);
}

.text-teal-600 {
  --tw-text-opacity: 1;
  color: rgb(13 148 136 / var(--tw-text-opacity));
}

.text-transparent {
  color: transparent;
}

.text-violet-500 {
  --tw-text-opacity: 1;
  color: rgb(139 92 246 / var(--tw-text-opacity));
}

.text-warning {
  color: hsl(var(--caution));
}

.text-warning-foreground {
  color: hsl(var(--caution-foreground));
}

.text-warning-light-foreground {
  color: hsl(var(--caution-light-foreground));
}

.text-warning-light-foreground\/50 {
  color: hsl(var(--caution-light-foreground) / 0.5);
}

.\!ring-danger-ring {
  --tw-ring-color: hsl(var(--alert-ring)) !important;
}

.\!ring-destructive {
  --tw-ring-color: hsl(var(--shaky)) !important;
}

.ring-accent {
  --tw-ring-color: hsl(var(--highlight));
}

.ring-background {
  --tw-ring-color: hsl(var(--base-background));
}

.ring-black {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
}

.ring-blue-300 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
}

.ring-blue-500\/30 {
  --tw-ring-color: rgb(59 130 246 / 0.3);
}

.ring-border {
  --tw-ring-color: hsl(var(--border-default));
}

.ring-border\/10 {
  --tw-ring-color: hsl(var(--border-default) / 0.1);
}

.ring-border\/50 {
  --tw-ring-color: hsl(var(--border-default) / 0.5);
}

.ring-card {
  --tw-ring-color: hsl(var(--panel));
}

.ring-card-alt {
  --tw-ring-color: hsl(var(--panel-alt));
}

.ring-danger {
  --tw-ring-color: hsl(var(--alert));
}

.ring-danger-ring {
  --tw-ring-color: hsl(var(--alert-ring));
}

.ring-danger\/50 {
  --tw-ring-color: hsl(var(--alert) / 0.5);
}

.ring-field {
  --tw-ring-color: hsl(var(--area));
}

.ring-field-ring {
  --tw-ring-color: hsl(var(--area-ring));
}

.ring-field-ring-hover {
  --tw-ring-color: hsl(var(--area-ring-hover));
}

.ring-field-ring-hover\/60 {
  --tw-ring-color: hsl(var(--area-ring-hover) / 0.6);
}

.ring-field-ring\/30 {
  --tw-ring-color: hsl(var(--area-ring) / 0.3);
}

.ring-field-ring\/50 {
  --tw-ring-color: hsl(var(--area-ring) / 0.5);
}

.ring-foreground\/20 {
  --tw-ring-color: hsl(var(--base-foreground) / 0.2);
}

.ring-gray-300 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
}

.ring-gray-500\/10 {
  --tw-ring-color: rgb(107 114 128 / 0.1);
}

.ring-gray-500\/30 {
  --tw-ring-color: rgb(107 114 128 / 0.3);
}

.ring-gray-900\/5 {
  --tw-ring-color: rgb(17 24 39 / 0.05);
}

.ring-green-300 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(134 239 172 / var(--tw-ring-opacity));
}

.ring-info-ring {
  --tw-ring-color: hsl(var(--data-ring));
}

.ring-input {
  --tw-ring-color: hsl(var(--input-default));
}

.ring-neutral-300 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(212 212 212 / var(--tw-ring-opacity));
}

.ring-neutral-900\/5 {
  --tw-ring-color: rgb(23 23 23 / 0.05);
}

.ring-night-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(192 199 207 / var(--tw-ring-opacity));
}

.ring-orange-400 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(251 146 60 / var(--tw-ring-opacity));
}

.ring-primary {
  --tw-ring-color: hsl(var(--main-color));
}

.ring-primary-ring {
  --tw-ring-color: hsl(var(--main-ring));
}

.ring-primary\/75 {
  --tw-ring-color: hsl(var(--main-color) / 0.75);
}

.ring-red-300 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity));
}

.ring-red-600 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(220 38 38 / var(--tw-ring-opacity));
}

.ring-secondary {
  --tw-ring-color: hsl(var(--subtle));
}

.ring-secondary-ring {
  --tw-ring-color: hsl(var(--subtle-ring));
}

.ring-sky-500\/50 {
  --tw-ring-color: rgb(14 165 233 / 0.5);
}

.ring-success {
  --tw-ring-color: hsl(var(--approval));
}

.ring-success\/70 {
  --tw-ring-color: hsla(var(--approval) / 0.7);
}

.ring-success-ring {
  --tw-ring-color: hsl(var(--approval-ring));
}

.ring-tab-ring {
  --tw-ring-color: hsl(var(--toggle-item-ring));
}

.ring-tab-ring-active {
  --tw-ring-color: hsl(var(--toggle-item-ring-active));
}

.ring-violet-500\/50 {
  --tw-ring-color: rgb(139 92 246 / 0.5);
}

.ring-warning-ring {
  --tw-ring-color: hsl(var(--caution-ring));
}

.ring-white {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
}

.ring-white\/10 {
  --tw-ring-color: rgb(255 255 255 / 0.1);
}

.ring-yellow-300 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(253 224 71 / var(--tw-ring-opacity));
}

.ring-yellow-500\/30 {
  --tw-ring-color: rgb(234 179 8 / 0.3);
}

.ring-yellow-500\/50 {
  --tw-ring-color: rgb(234 179 8 / 0.5);
}

.ring-opacity-5 {
  --tw-ring-opacity: 0.05;
}

.ring-opacity-50 {
  --tw-ring-opacity: 0.5;
}

.ring-offset-background {
  --tw-ring-offset-color: hsl(var(--base-background));
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggqxSvfedN62Zw.woff2)
    format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
    U+FE2E-FE2F;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggOxSvfedN62Zw.woff2)
    format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggSxSvfedN62Zw.woff2)
    format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
    U+03A3-03FF;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggixSvfedN62Zw.woff2)
    format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggmxSvfedN62Zw.woff2)
    format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggexSvfedN4.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggqxSvfedN62Zw.woff2)
    format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
    U+FE2E-FE2F;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggOxSvfedN62Zw.woff2)
    format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggSxSvfedN62Zw.woff2)
    format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
    U+03A3-03FF;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggixSvfedN62Zw.woff2)
    format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggmxSvfedN62Zw.woff2)
    format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggexSvfedN4.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggqxSvfedN62Zw.woff2)
    format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
    U+FE2E-FE2F;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggOxSvfedN62Zw.woff2)
    format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggSxSvfedN62Zw.woff2)
    format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
    U+03A3-03FF;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggixSvfedN62Zw.woff2)
    format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggmxSvfedN62Zw.woff2)
    format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggexSvfedN4.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggqxSvfedN62Zw.woff2)
    format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
    U+FE2E-FE2F;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggOxSvfedN62Zw.woff2)
    format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggSxSvfedN62Zw.woff2)
    format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
    U+03A3-03FF;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggixSvfedN62Zw.woff2)
    format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggmxSvfedN62Zw.woff2)
    format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggexSvfedN4.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Red Hat Display;
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/redhatdisplay/v19/8vIh7wUr0m80wwYf0QCXZzYzUoTg-CSvZX4Vlf1fe6TVfQwD9F-YsXnZG0mHlPI.woff2)
    format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Red Hat Display;
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/redhatdisplay/v19/8vIh7wUr0m80wwYf0QCXZzYzUoTg-CSvZX4Vlf1fe6TVfQwD-l-YsXnZG0mH.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Red Hat Display;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/redhatdisplay/v19/8vIQ7wUr0m80wwYf0QCXZzYzUoTg8z6hR4jNCH5Z.woff2)
    format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Red Hat Display;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/redhatdisplay/v19/8vIQ7wUr0m80wwYf0QCXZzYzUoTg_T6hR4jNCA.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Red Hat Display;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/redhatdisplay/v19/8vIQ7wUr0m80wwYf0QCXZzYzUoTg8z6hR4jNCH5Z.woff2)
    format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Red Hat Display;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/redhatdisplay/v19/8vIQ7wUr0m80wwYf0QCXZzYzUoTg_T6hR4jNCA.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Red Hat Display;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/redhatdisplay/v19/8vIQ7wUr0m80wwYf0QCXZzYzUoTg8z6hR4jNCH5Z.woff2)
    format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Red Hat Display;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/redhatdisplay/v19/8vIQ7wUr0m80wwYf0QCXZzYzUoTg_T6hR4jNCA.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Red Hat Display;
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/redhatdisplay/v19/8vIQ7wUr0m80wwYf0QCXZzYzUoTg8z6hR4jNCH5Z.woff2)
    format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Red Hat Display;
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/redhatdisplay/v19/8vIQ7wUr0m80wwYf0QCXZzYzUoTg_T6hR4jNCA.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.text-pretty {
  text-wrap: pretty;
}

.tippy-box[data-animation="fade"][data-state="hidden"] {
  opacity: 0;
}

[data-tippy-root] {
  max-width: calc(100vw - 10px);
}

.tippy-box {
  position: relative;
  background-color: hsl(var(--overlay) / 0.9);
  /* Slightly increase opacity for better contrast */
  color: hsl(var(--overlay-foreground) / 0.95);
  /* Adjust foreground color opacity for readability */
  border-radius: calc(var(--radius-default) - 1px);
  /* Reduce border radius slightly for sharper corners */
  font-size: 13px;
  /* Slightly smaller text for compact tooltips */
  line-height: 1.5;
  /* Increase line height for better spacing */
  white-space: normal;
  outline: 0;
  transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;
  /* Add consistent easing and timing */
  border-width: 1px;
  border-color: hsl(var(--border-default) / 0.8);
  /* Add slight transparency to the border */
  --tw-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.15);
  /* Enhance shadow for a more modern look */
  --tw-shadow-colored: 0 2px 4px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  backdrop-filter: blur(6px);
  /* Add subtle blur for depth */
}

.tippy-content {
  position: relative;
  padding: 8px 12px;
  /* Increase padding for a more spacious look */
  z-index: 1;
  text-align: center;
  /* Center-align text for better balance */
  word-wrap: break-word;
  /* Ensure long words wrap properly */
  max-width: 280px;
  /* Add a maximum width to avoid oversized tooltips */
}

.tippy-box[data-animation="shift-away-subtle"][data-state="hidden"] {
  opacity: 0;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  /* Smooth fading and movement */
}

.tippy-box[data-animation="shift-away-subtle"][data-state="hidden"][data-placement^="top"] {
  transform: translateY(8px);
  /* Increased translation for better animation visibility */
}

.tippy-box[data-animation="shift-away-subtle"][data-state="hidden"][data-placement^="bottom"] {
  transform: translateY(-8px);
}

.tippy-box[data-animation="shift-away-subtle"][data-state="hidden"][data-placement^="left"] {
  transform: translateX(8px);
  /* Changed to `translateX` for horizontal placement */
}

.tippy-box[data-animation="shift-away-subtle"][data-state="hidden"][data-placement^="right"] {
  transform: translateX(-8px);
}

.tippy-box[data-animation="shift-away"][data-state="hidden"] {
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* Add cubic bezier for smoother motion */
}

.tippy-box[data-animation="shift-away"][data-state="hidden"][data-placement^="top"] {
  transform: translateY(10px);
  /* Slightly more pronounced for "shift-away" */
}

.tippy-box[data-animation="shift-away"][data-state="hidden"][data-placement^="bottom"] {
  transform: translateY(-10px);
}

.tippy-box[data-animation="shift-away"][data-state="hidden"][data-placement^="left"] {
  transform: translateX(10px);
}

.tippy-box[data-animation="shift-away"][data-state="hidden"][data-placement^="right"] {
  transform: translateX(-10px);
}

.hover\:-translate-y-2:hover {
  --tw-translate-y: -0.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:translate-y-\[4px\]:hover {
  --tw-translate-y: 4px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-105:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\!border-border {
  border-color: hsl(var(--border-default)) !important;
}

.border-subtle-60 {
  border-color: hsl(var(--border-default) / 0.48) !important;
}

.border-field-ring-hover {
  border-color: hsl(var(--area-ring-hover));
}

.\!border-field-ring-hover {
  border-color: hsl(var(--area-ring-hover)) !important;
}

.\!border-input {
  border-color: hsl(var(--input-default)) !important;
}

.border-border {
  border-color: hsl(var(--border-default));
}

.border-border\/40 {
  border-color: hsl(var(--border-default) / 0.4);
}

.border-border\/50 {
  border-color: hsl(var(--border-default) / 0.5);
}

.border-card {
  border-color: hsl(var(--panel));
}

.border-danger-ring {
  border-color: hsl(var(--alert-ring));
}

.border-field {
  border-color: hsl(var(--area));
}

.border-field-ring {
  border-color: hsl(var(--area-ring));
}

.border-foreground {
  border-color: hsl(var(--base-foreground));
}

.border-foreground\/50 {
  border-color: hsl(var(--base-foreground) / 0.5);
}

.border-info-ring {
  border-color: hsl(var(--data-ring));
}

.border-input {
  border-color: hsl(var(--input-default));
}

.border-muted-foreground\/10 {
  border-color: hsl(var(--faded-foreground) / 0.1);
}

.border-muted-foreground\/20 {
  border-color: hsl(var(--faded-foreground) / 0.2);
}

.border-primary {
  border-color: hsl(var(--main-color));
}

.border-primary-light {
  border-color: hsl(var(--main-light));
}

.border-primary-ring {
  border-color: hsl(var(--main-ring));
}

.border-ring {
  border-color: hsl(var(--ring-default));
}

.border-secondary {
  border-color: hsl(var(--subtle));
}

.border-secondary-light {
  border-color: hsl(var(--subtle-light));
}

.border-secondary-ring {
  border-color: hsl(var(--subtle-ring));
}

.border-sky-500\/50 {
  border-color: #0ea5e980;
}

.border-slate-300 {
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity));
}

.border-success-ring {
  border-color: hsl(var(--approval-ring));
}

.border-warning-ring {
  border-color: hsl(var(--caution-ring));
}

.border-white\/10 {
  border-color: #ffffff1a;
}

.border-l-transparent {
  border-left-color: transparent;
}

.border-t-transparent {
  border-top-color: transparent;
}

.border-opacity-10 {
  --tw-border-opacity: 0.1;
}

.border-opacity-50 {
  --tw-border-opacity: 0.5;
}

.\!bg-accent {
  background-color: hsl(var(--highlight)) !important;
}

.\!bg-background {
  background-color: hsl(var(--base-background)) !important;
}

.\!bg-card-alt {
  background-color: hsl(var(--panel-alt)) !important;
}

.\!bg-field {
  background-color: hsl(var(--area)) !important;
}

.\!bg-primary-light {
  background-color: hsl(var(--main-light)) !important;
}

.\!bg-primary-light-hover {
  background-color: hsl(var(--main-light-hover)) !important;
}

.\!bg-primary\/50 {
  background-color: hsl(var(--main-color) / 0.5) !important;
}

.\!bg-transparent {
  background-color: transparent !important;
}

.bg-accent {
  background-color: hsl(var(--highlight));
}

.bg-accent\/25 {
  background-color: hsl(var(--highlight) / 0.25);
}

.bg-accent\/50 {
  background-color: hsl(var(--highlight) / 0.5);
}

.bg-background {
  background-color: hsl(var(--base-background));
}

.bg-background\/50 {
  background-color: hsl(var(--base-background) / 0.5);
}

.bg-background\/75 {
  background-color: hsl(var(--base-background) / 0.75);
}

.bg-background\/80 {
  background-color: hsl(var(--base-background) / 0.8);
}

.bg-background\/90 {
  background-color: hsl(var(--base-background) / 0.9);
}

.bg-background\/95 {
  background-color: hsl(var(--base-background) / 0.95);
}

.bg-black\/10 {
  background-color: #0000001a;
}

.bg-black\/20 {
  background-color: #0003;
}

.bg-black\/30 {
  background-color: #0000004d;
}

.bg-black\/50 {
  background-color: #00000080;
}

.bg-black\/80 {
  background-color: #000c;
}

.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity));
}

.bg-body {
  --tw-bg-opacity: 1;
  background-color: rgb(252 252 252 / var(--tw-bg-opacity));
}

.bg-border {
  background-color: hsl(var(--border-default));
}

.bg-border\/50 {
  background-color: hsl(var(--border-default) / 0.5);
}

.bg-card {
  background-color: hsl(var(--panel));
}

.bg-card-alt {
  background-color: hsl(var(--panel-alt));
}

.bg-card-alt\/75 {
  background-color: hsl(var(--panel-alt) / 0.75);
}

.bg-card-alt\/90 {
  background-color: hsl(var(--panel-alt) / 0.9);
}

.bg-card-surface {
  background-color: hsl(var(--panel-surface));
}

.bg-card-surface\/75 {
  background-color: hsl(var(--panel-surface) / 0.75);
}

.bg-card-surface\/90 {
  background-color: hsl(var(--panel-surface) / 0.9);
}

.bg-card\/20 {
  background-color: hsl(var(--panel) / 0.2);
}

.bg-card\/75 {
  background-color: hsl(var(--panel) / 0.75);
}

.bg-danger {
  background-color: hsl(var(--alert));
}

.bg-danger-light {
  background-color: hsl(var(--alert-light));
}

.bg-danger-light-hover {
  background-color: hsl(var(--alert-light-hover));
}

.bg-destructive {
  background-color: hsl(var(--shaky));
}

.bg-field {
  background-color: hsl(var(--area));
}

.bg-field-hover {
  background-color: hsl(var(--area-hover));
}

.bg-info {
  background-color: hsl(var(--data));
}

.bg-info-light {
  background-color: hsl(var(--data-light));
}

.bg-info-ring {
  background-color: hsl(var(--data-ring));
}

.bg-muted {
  background-color: hsl(var(--faded));
}

.bg-muted-foreground {
  background-color: hsl(var(--faded-foreground));
}

.bg-muted\/0 {
  background-color: hsl(var(--faded) / 0);
}

.bg-muted\/20 {
  background-color: hsl(var(--faded) / 0.2);
}

.bg-muted\/50 {
  background-color: hsl(var(--faded) / 0.5);
}

.bg-muted\/80 {
  background-color: hsl(var(--faded) / 0.8);
}

.bg-neutral-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity));
}

.bg-neutral-100\/10 {
  background-color: #f5f5f51a;
}

.bg-neutral-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
}

.bg-neutral-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(82 82 82 / var(--tw-bg-opacity));
}

.bg-night-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(116 126 141 / var(--tw-bg-opacity));
}

.bg-night-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(246 246 247 / var(--tw-bg-opacity));
}

.bg-night-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(50 53 61 / var(--tw-bg-opacity));
}

.bg-night-background {
  --tw-bg-opacity: 1;
  background-color: rgb(15 16 21 / var(--tw-bg-opacity));
}

.bg-night-border {
  --tw-bg-opacity: 1;
  background-color: rgb(37 38 43 / var(--tw-bg-opacity));
}

.bg-night-card,
.bg-night-surface {
  --tw-bg-opacity: 1;
  background-color: rgb(25 26 31 / var(--tw-bg-opacity));
}

.bg-orange-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 146 60 / var(--tw-bg-opacity));
}

.bg-orange-400\/10 {
  background-color: #fb923c1a;
}

.bg-popover {
  background-color: hsl(var(--overlay));
}

.bg-primary {
  background-color: hsl(var(--main-color));
}

.bg-primary-foreground {
  background-color: hsl(var(--main-foreground));
}

.bg-primary-light {
  background-color: hsl(var(--main-light));
}

.bg-primary-light-hover {
  background-color: hsl(var(--main-light-hover));
}

.bg-primary-ring {
  background-color: hsl(var(--main-ring));
}

.bg-purple-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / var(--tw-bg-opacity));
}

.bg-purple-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(168 85 247 / var(--tw-bg-opacity));
}

.bg-radio {
  background-color: hsl(var(--radio-default));
}

.bg-radio-hover {
  background-color: hsl(var(--radio-hover));
}

.bg-radio\/20 {
  background-color: hsl(var(--radio-default) / 0.2);
}

.bg-radio\/50 {
  background-color: hsl(var(--radio-default) / 0.5);
}

.bg-radio\/75 {
  background-color: hsl(var(--radio-default) / 0.75);
}

.bg-red-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 113 113 / var(--tw-bg-opacity));
}

.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
}

.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}

.bg-secondary {
  background-color: hsl(var(--subtle));
}

.bg-secondary-hover {
  background-color: hsl(var(--subtle-hover));
}

.bg-secondary-light\/50 {
  background-color: hsl(var(--subtle-light-base) / 0.05);
}

.bg-secondary-light\/50-hover {
  background-color: hsl(var(--subtle-light-base) / 0.1);
}

.bg-secondary-light {
  background-color: hsl(var(--subtle-light));
}

.bg-secondary-light-hover {
  background-color: hsl(var(--subtle-light-hover));
}

.bg-secondary-ring {
  background-color: hsl(var(--subtle-ring));
}

.bg-secondary\/75 {
  background-color: hsl(var(--subtle) / 0.75);
}

.bg-slate-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity));
}

.bg-success {
  background-color: hsl(var(--approval));
}

.bg-success-light {
  background-color: hsl(var(--approval-light));
}

.bg-success-light-hover {
  background-color: hsl(var(--approval-light-hover));
}

.bg-success-ring {
  background-color: hsl(var(--approval-ring));
}

.bg-tab {
  background-color: hsl(var(--toggle-item));
}

.bg-tab-active {
  background-color: hsl(var(--toggle-item-active));
}

.bg-transparent {
  background-color: transparent;
}

.bg-violet-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(139 92 246 / var(--tw-bg-opacity));
}

.bg-warning {
  background-color: hsl(var(--caution));
}

.bg-warning-light {
  background-color: hsl(var(--caution-light));
}

.bg-warning-light-hover {
  background-color: hsl(var(--caution-light-hover));
}

.bg-warning-ring {
  background-color: hsl(var(--caution-ring));
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.bg-white\/10 {
  background-color: #ffffff1a;
}

.bg-white\/5 {
  background-color: #ffffff0d;
}

.bg-white\/75 {
  background-color: #ffffffbf;
}

.hover\:border-field-ring-hover\/75:hover {
  border-color: hsl(var(--area-ring-hover) / 0.75);
}

.hover\:border-border:hover {
  border-color: hsl(var(--border-default));
}

.hover\:border-green-400:hover {
  border-color: hsl(var(--main-color));
}

.hover\:border-green-500\/70:hover {
  --tw-border-opacity: 0.7;
  border-color: rgb(34 197 94 / var(--tw-border-opacity));
}

.hover\:outline-green-500\/70:hover {
  --tw-border-opacity: 0.5;
  outline: 2px solid rgb(34 197 94 / var(--tw-border-opacity));
}

.hover\:bg-border\/50:hover {
  background-color: hsl(var(--border-default) / 0.5);
}

.hover\:bg-accent:hover {
  background-color: hsl(var(--highlight));
}

.hover\:bg-accent\/20:hover {
  background-color: hsl(var(--highlight) / 0.2);
}

.hover\:bg-accent\/25:hover {
  background-color: hsl(var(--highlight) / 0.25);
}

.hover\:bg-accent\/30:hover {
  background-color: hsl(var(--highlight) / 0.3);
}

.hover\:bg-accent\/50:hover {
  background-color: hsl(var(--highlight) / 0.5);
}

.hover\:bg-accent\/60:hover {
  background-color: hsl(var(--highlight) / 0.6);
}

.hover\:bg-accent\/70:hover {
  background-color: hsl(var(--highlight) / 0.7);
}

.hover\:bg-accent\/80:hover {
  background-color: hsl(var(--highlight) / 0.8);
}

.hover\:bg-blue-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}

.hover\:bg-blue-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}

.hover\:bg-blue-600\/20:hover {
  background-color: #2563eb33;
}

.hover\:bg-blue-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
}

.hover\:bg-card:hover {
  background-color: hsl(var(--panel));
}

.hover\:bg-card\/50:hover {
  background-color: hsl(var(--panel) / 0.5);
}

.hover\:bg-danger-hover:hover {
  background-color: hsl(var(--alert-hover));
}

.hover\:bg-danger-light:hover {
  background-color: hsl(var(--alert-light));
}

.hover\:bg-danger-light-hover:hover {
  background-color: hsl(var(--alert-light-hover));
}

.hover\:bg-destructive\/80:hover {
  background-color: hsl(var(--shaky) / 0.8);
}

.hover\:bg-destructive\/90:hover {
  background-color: hsl(var(--shaky) / 0.9);
}

.hover\:bg-field-hover:hover {
  background-color: hsl(var(--area-hover));
}

.hover\:bg-gray-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}

.hover\:bg-gray-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

.hover\:bg-green-600\/20:hover {
  background-color: #16a34a33;
}

.hover\:bg-green-600:hover {
  background-color: #16a34a;
}

.hover\:bg-green-500:hover {
  background-color: rgb(34 197 94 / 1);
}

.hover\:bg-green-500\/80:hover {
  background-color: rgb(34 197 94 / 0.8);
}

.hover\:bg-primary:hover {
  background-color: hsl(var(--main-color));
}

.hover\:bg-primary-hover:hover {
  background-color: hsl(var(--main-hover));
}

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

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

.hover\:bg-primary-ring:hover {
  background-color: hsl(var(--main-ring));
}

.hover\:bg-primary\/80:hover {
  background-color: hsl(var(--main-color) / 0.8);
}

.hover\:bg-primary\/90:hover {
  background-color: hsl(var(--main-color) / 0.9);
}

.hover\:bg-secondary:hover {
  background-color: hsl(var(--subtle));
}

.hover\:bg-secondary-hover:hover {
  background-color: hsl(var(--subtle-hover));
}

.hover\:bg-secondary-light\/50-hover:hover {
  background-color: hsl(var(--subtle-light-base) / 0.1);
}

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

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

.hover\:bg-secondary\/80:hover {
  background-color: hsl(var(--subtle) / 0.8);
}

.hover\:bg-tab-active:hover {
  background-color: hsl(var(--toggle-item-active));
}

/* Hover Effect for Non-Current Buttons */
.non-current-button {
  background-size: 200% 100%;
  /* Double the size for the animation */
  background-position: 0% 50%;
  /* Starting position */
  transition: background-position 0.3s ease-in-out, filter 0.3s ease-in-out;
  filter: brightness(1);
}

.non-current-button:hover {
  --tw-gradient-to: hsl(122 83% 37% / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-from: hsl(122 83% 37% / 0) var(--tw-gradient-to-position);
  background-image: linear-gradient(
    to right,
    var(--tw-gradient-from),
    var(--tw-gradient-to)
  );
  color: hsl(var(--base-foreground)) !important;
  transition: all 0.3s ease-in-out;
  transition: background-position 0.3s ease-in-out, filter 0.3s ease-in-out;
  background-position: 100% 50%;
  /* Shift the gradient position */
  filter: brightness(1.1);
}

.non-current-button:hover i {
  color: hsl(var(--base-foreground)) !important;
  transition: all 0.3s ease-in-out;
}

.header-sub-bar-discord-icon {
  background-size: 200% 100%;
  /* Allows the gradient to animate */
  background-position: 0% 50%;
  /* Start position */
  --tw-gradient-from: #5865f2;
  /* Discord's primary blue */
  --tw-gradient-to: #404eed;
  /* Slightly darker blue for contrast */
  background-image: linear-gradient(
    to right,
    var(--tw-gradient-from),
    var(--tw-gradient-to)
  );
  transition: background-position 0.3s ease-in-out, filter 0.3s ease-in-out;
  filter: brightness(1);
  /* Default brightness */
  border-radius: 8px;
  /* Rounded corners for a button-like look */
  padding: 0.5rem 1.5rem;
  /* Padding for spacing inside */
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  color: hsl(var(--subtle-light-foreground));
  text-align: center;
  /* Center the text */
  cursor: pointer;
  /* Pointer cursor on hover */
}

.header-sub-bar-discord-icon:hover {
  --tw-gradient-to: hsla(216, 95%, 60%, 1) var(--tw-gradient-from-position);
  --tw-gradient-from: hsla(219, 40%, 41%, 1) var(--tw-gradient-to-position);
  background-image: linear-gradient(
    to right,
    var(--tw-gradient-from),
    var(--tw-gradient-to)
  );
  color: hsl(var(--base-foreground)) !important;
  transition: all 0.3s ease-in-out;
  transition: background-position 0.3s ease-in-out, filter 0.3s ease-in-out;
  background-position: 100% 50%;
  /* Shift the gradient position */
  filter: brightness(1.1);
}

/* Active Button Gradient Animation */
@keyframes gradient-flow {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.active-gradient {
  --tw-gradient-to: hsl(122 83% 37% / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-from: hsl(122 83% 37% / 0) var(--tw-gradient-to-position);
  background: linear-gradient(
    90deg,
    var(--tw-gradient-from),
    var(--tw-gradient-to),
    var(--tw-gradient-from)
  );
  background-size: 200% 200%;
  animation: gradient-flow 3s ease infinite;
  color: hsl(var(--base-foreground)) !important;
  border-radius: 0.5rem;
  /* Optional: To match button style */
  transition: all 0.3s ease-in-out;
}

.active-gradient i {
  color: hsl(var(--base-foreground)) !important;
}

.active-gradient:hover {
  --tw-gradient-to: hsl(122 83% 37% / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-from: hsl(122 83% 37% / 0) var(--tw-gradient-to-position);
  background: linear-gradient(
    90deg,
    var(--tw-gradient-to),
    var(--tw-gradient-to),
    var(--tw-gradient-from)
  );
  animation: none;
}

.active-gradient:hover i {
  color: hsl(var(--base-foreground)) !important;
}

.active-gradient:hover {
  filter: brightness(1.1);
  /* Slight brightening on hover */
}

.background-bright-lg {
  background-color: hsl(146.08deg 20.92% 54.39% / 9.21%);
}

.background-bright-lg:hover {
  background-color: hsl(218.63 10.41% 63.86% / 19.43%);
}

.text-bright-sm {
  color: hsl(0 0% 92%);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
}

.game-selector-button {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding-top: 0.52rem;
  padding-bottom: 0.52rem;
  padding-left: 1.05rem;
  padding-right: 1.05rem;
  border-radius: 9999px;
  border-width: 1px;
  border-color: #eeeeee1a;
  height: 3rem;
}

.game-selector-button:active {
  --tw-translate-y: 1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.games-menu-item-anchor {
  padding-top: 0.601rem;
  padding-bottom: 0.601rem;
  padding-left: 0.497rem;
  padding-right: 0.497rem;
  border-radius: calc(0.493rem - 2px);
  align-items: center;
  cursor: default;
  display: flex;
}

.games-menu-item-anchor img {
  width: 1.49rem;
  height: 1.49rem;
}

.games-menu-item-anchor span {
  color: hsl(0 0% 93.053%);
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.3rem;
}

.games-menu-item-anchor:hover {
  background-color: hsl(219.87 9.73% 16.42%);
}

.game-item {
  padding-bottom: 0.25rem;
}

.games-menu-animation[data-state="open"] {
  animation-name: enter;
  animation-duration: 0.15s;
  --tw-enter-scale: 0.92;
  --tw-enter-opacity: 0.85;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.games-menu-animation[data-state="closed"] {
  animation-name: exit;
  animation-duration: 0.15s;
  --tw-exit-opacity: 0.85;
  --tw-exit-scale: 0.92;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.fill-accent\/20 {
  fill: hsl(var(--highlight) / 0.2);
}

.fill-current {
  fill: currentColor;
}

.fill-foreground {
  fill: hsl(var(--base-foreground));
}

.fill-muted-foreground {
  fill: hsl(var(--faded-foreground));
}

.fill-muted-foreground\/50 {
  fill: hsl(var(--faded-foreground) / 0.5);
}

.fill-primary {
  fill: hsl(var(--main-color));
}

.fill-success-light-foreground {
  fill: hsl(var(--approval-light-foreground));
}

.fill-white {
  fill: #fff;
}

.fill-white\/10 {
  fill: #ffffff1a;
}

.fill-white\/50 {
  fill: #ffffff80;
}

.hover\:fill-accent\/20:hover {
  fill: hsl(var(--highlight) / 0.2);
}

.hover\:text-accent-foreground:hover {
  color: hsl(var(--highlight-foreground));
}

.hover\:text-card-alt-foreground:hover {
  color: hsl(var(--panel-alt-foreground));
}

.hover\:text-foreground:hover {
  color: hsl(var(--base-foreground));
}

.hover\:text-foreground\/50:hover {
  color: hsl(var(--base-foreground) / 0.5);
}

.hover\:text-foreground\/80:hover {
  color: hsl(var(--base-foreground) / 0.8);
}

.hover\:text-gray-400:hover {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity));
}

.hover\:text-gray-500:hover {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity));
}

.hover\:text-green-500:hover {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity));
}

.hover\:text-muted-foreground:hover {
  color: hsl(var(--faded-foreground));
}

.hover\:text-neutral-700:hover {
  --tw-text-opacity: 1;
  color: rgb(64 64 64 / var(--tw-text-opacity));
}

.hover\:text-neutral-800:hover {
  --tw-text-opacity: 1;
  color: rgb(38 38 38 / var(--tw-text-opacity));
}

.hover\:text-primary-foreground:hover {
  color: hsl(var(--main-foreground));
}

.hover\:ring-border:hover {
  --tw-ring-color: hsl(var(--border-default));
}

.hover\:ring-field-ring-hover:hover {
  --tw-ring-color: hsl(var(--area-ring-hover));
}

.hover\:ring-secondary-ring:hover {
  --tw-ring-color: hsl(var(--subtle-ring));
}

.hover\:ring-tab-ring-active:hover {
  --tw-ring-color: hsl(var(--toggle-item-ring-active));
}

.hover\:ring-offset-4:hover {
  --tw-ring-offset-width: 4px;
}

.hover\:ring-offset-card:hover {
  --tw-ring-offset-color: hsl(var(--panel));
}

@media (min-width: 640px) {
  .sm\:ring-border {
    --tw-ring-color: hsl(var(--border-default));
  }
}

.focus-within\:border-field-ring-hover\/75:focus-within {
  border-color: hsl(var(--area-ring-hover) / 0.75);
}

.focus\:border-field-ring-hover:focus {
  border-color: hsl(var(--area-ring-hover));
}

.focus\:bg-accent:focus {
  background-color: hsl(var(--highlight));
}

.focus\:bg-accent\/50:focus {
  background-color: hsl(var(--highlight) / 0.5);
}

.focus\:bg-danger-light:focus {
  background-color: hsl(var(--alert-light));
}

.focus\:bg-primary:focus {
  background-color: hsl(var(--main-color));
}

.focus\:bg-success-light:focus {
  background-color: hsl(var(--approval-light));
}

.focus\:bg-warning-light:focus {
  background-color: hsl(var(--caution-light));
}

.focus\:text-accent-foreground:focus {
  color: hsl(var(--highlight-foreground));
}

.focus\:text-foreground:focus {
  color: hsl(var(--base-foreground));
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:outline:focus {
  outline-style: solid;
}

.focus\:outline-offset-2:focus {
  outline-offset: 2px;
}

.focus\:outline-primary:focus {
  outline-color: hsl(var(--main-color));
}

.focus\:outline-ring-default:focus {
  outline-color: hsl(var(--ring-default));
}

.focus\:outline-primary-ring:focus {
  outline-color: hsl(var(--main-ring));
}

.focus\:outline-primary\/20:focus {
  outline-color: hsl(var(--main-color) / 0.2);
}

.focus\:outline-secondary:focus {
  outline-color: hsl(var(--subtle));
}

.focus\:outline-green:focus {
  --tw-text-opacity: 1;
  outline-color: rgb(34 197 94 / var(--tw-text-opacity));
}

.focus\:outline-green-500:focus {
  --tw-text-opacity: 1;
  outline-color: rgb(34 197 94 / var(--tw-text-opacity));
}

.focus\:ring-border:focus {
  --tw-ring-color: hsl(var(--border-default));
}

.focus\:ring-field-ring-hover:focus {
  --tw-ring-color: hsl(var(--area-ring-hover));
}

.focus\:ring-primary:focus {
  --tw-ring-color: hsl(var(--main-color));
}

.focus\:ring-primary-ring:focus {
  --tw-ring-color: hsl(var(--main-ring));
}

.focus\:ring-ring:focus {
  --tw-ring-color: hsl(var(--ring-default));
}

.focus\:ring-white\/10:focus {
  --tw-ring-color: rgb(255 255 255 / 0.1);
}

.focus-visible\:outline-primary:focus-visible {
  outline-color: hsl(var(--main-color));
}

.group:hover .group-hover\:rounded-md {
  border-radius: calc(var(--radius-default) - 2px);
}

.group:hover .group-hover\:border-field-ring-hover {
  border-color: hsl(var(--area-ring-hover));
}

.group:hover .group-hover\:border-white\/20 {
  border-color: #fff3;
}

.group:hover .group-hover\:bg-accent {
  background-color: hsl(var(--highlight));
}

.group:hover .group-hover\:bg-muted {
  background-color: hsl(var(--faded));
}

.group:hover .group-hover\:text-card-alt-foreground {
  color: hsl(var(--panel-alt-foreground));
}

.group:hover .group-hover\:text-foreground {
  color: hsl(var(--base-foreground));
}

.group:hover .group-hover\:text-foreground\/90 {
  color: hsl(var(--base-foreground) / 0.9);
}

.group:hover .group-hover\:text-muted-foreground {
  color: hsl(var(--faded-foreground));
}

.group:hover .group-hover\:text-primary-foreground {
  color: hsl(var(--main-foreground));
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

.group:hover .group-hover\:opacity-75 {
  opacity: 0.75;
}

.group:hover .group-hover\:ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
    var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
    calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
    var(--tw-shadow, 0 0 #0000);
}

.group:hover .group-hover\:ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
    var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
    calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
    var(--tw-shadow, 0 0 #0000);
}

.group:hover .group-hover\:ring-accent {
  --tw-ring-color: hsl(var(--highlight));
}

.group:hover .group-hover\:ring-border {
  --tw-ring-color: hsl(var(--border-default));
}

.group:hover .group-hover\:ring-field-ring-hover {
  --tw-ring-color: hsl(var(--area-ring-hover));
}

.group:hover .group-hover\:ring-primary-ring {
  --tw-ring-color: hsl(var(--main-ring));
}

.group:active .group-active\:text-foreground {
  color: hsl(var(--base-foreground));
}

.trustpilot-badge-bg {
  background: radial-gradient(
      44.63% 57.68% at 49.83% 99.72%,
      #01b77b4e,
      #01b77b01
    ),
    #151926 !important;
}

.backdrop-glass-10 {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/*File input box style for /dashboard/sell/ and /employee-dashboard/sell/ */

/* General styles for the file upload section */
/* File upload section grid layout */
.file-upload-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding: 1rem 0;
}

/* File box styles */
.file-box {
  position: relative;
  width: 100%;
  height: 150px;
  border: 2px dashed var(--border-color, #4a5568);
  border-radius: 12px;
  background-color: var(--bg-field, #1a202c);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

/* File box hover effect */
.file-box:hover {
  border-color: var(--hover-border-color, #22c55e);
}

/* Plus sign styles */
.file-box-plus {
  font-size: 2.5rem;
  color: var(--text-foreground, #9ca3af);
  font-weight: bold;
  transition: color 0.3s ease;
}

/* File box uploaded state */
.file-box.file-uploaded {
  border-color: var(--selected-border-color, #22c55e);
  background-color: rgba(34, 197, 94, 0.1);
}

/* File name display under the box */
.file-name {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  font-size: 0.875rem;
  color: var(--text-foreground, #9ca3af);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hide the default file input element */
.file-input {
  display: none;
}

/* Visual indicator when a file is dragged over the box */
.file-box.dragover {
  border-color: var(--hover-border-color, #22c55e);
  background-color: rgba(34, 197, 94, 0.1);
}

/* Remove button styles */
.remove-button {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.remove-button:hover {
  opacity: 1;
}

/* File box styles for uploaded state */
.file-box.file-uploaded {
  border-color: var(--selected-border-color, #22c55e);
  background-color: rgba(34, 197, 94, 0.1);
}

/* Image preview */
.file-preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

/*File input box style for /dashboard/sell/ and /employee-dashboard/sell/ */

/*Custom Made Gradient Colors*/
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.from-green-400 {
  --tw-gradient-from: #34d399;
  /* This is Tailwind's green-400 color */
  --tw-gradient-stops: var(--tw-gradient-from),
    var(--tw-gradient-to, rgba(52, 211, 153, 0));
}

.via-blue-500 {
  --tw-gradient-stops: var(--tw-gradient-from), #3b82f6,
    var(--tw-gradient-to, rgba(59, 130, 246, 0));
  /* Tailwind's blue-500 color */
}

.to-purple-500 {
  --tw-gradient-to: #8b5cf6;
  /* This is Tailwind's purple-500 color */
}

/*Softer Gradient*/
.from-gray-400 {
  --tw-gradient-from: #9ca3af;
  /* Tailwind's gray-400 color */
  --tw-gradient-stops: var(--tw-gradient-from),
    var(--tw-gradient-to, rgba(156, 163, 175, 0));
}

.via-gray-600 {
  --tw-gradient-stops: var(--tw-gradient-from), #4b5563,
    var(--tw-gradient-to, rgba(75, 85, 99, 0));
  /* Tailwind's gray-600 color */
}

.to-gray-800 {
  --tw-gradient-to: #1f2937;
  /* Tailwind's gray-800 color */
}

/*Vibrant Gradient*/
.from-pink-500 {
  --tw-gradient-from: #ec4899;
  /* Tailwind's pink-500 color */
  --tw-gradient-stops: var(--tw-gradient-from),
    var(--tw-gradient-to, rgba(236, 72, 153, 0));
}

.via-red-500 {
  --tw-gradient-stops: var(--tw-gradient-from), #ef4444,
    var(--tw-gradient-to, rgba(239, 68, 68, 0));
  /* Tailwind's red-500 color */
}

.to-yellow-500 {
  --tw-gradient-to: #f59e0b;
  /* Tailwind's yellow-500 color */
}

/*Green Gradient*/
.from-green-400 {
  --tw-gradient-from: #4ade80;
  /* Tailwind's green-400 color */
  --tw-gradient-stops: var(--tw-gradient-from),
    var(--tw-gradient-to, rgba(74, 222, 128, 0));
}

.to-green-600 {
  --tw-gradient-to: #16a34a;
  /* Tailwind's green-600 color */
}

/* Gradient Colors */
.via-blue-500 {
  --tw-gradient-stops: var(--tw-gradient-from), #3b82f6,
    var(--tw-gradient-to, rgba(59, 130, 246, 0));
  /* Tailwind's blue-500 color */
}

.to-purple-600 {
  --tw-gradient-to: #a855f7;
  /* Tailwind's purple-600 color */
}

/*Custom Made Gradient Colors*/

.icon-gradient {
  width: 1em;
  height: 1em;
  background: linear-gradient(to right, #4ade80, #3b82f6, #a855f7);
  /* From green to blue to purple */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1rem;
  /* Adjust the icon size */
  transition: background 0.3s ease-in-out;
}

/* Core Styles */
.range-highlight {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
}

.thumb-left,
.thumb-right {
  position: absolute;
  top: -8px;
  width: 16px;
  height: 16px;
  z-index: 2;
  border: 2px solid #ffffff;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
  transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.thumb-left:hover,
.thumb-right:hover {
  background-color: #16a34a;
  transform: scale(1.1);
}

input[type="number"] {
  appearance: none;
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.custom-radio {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-color, #d1d5db);
  /* Default border color */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  transition: all 0.2s ease-in-out;
}

.custom-radio span {
  width: 8px;
  height: 8px;
  background-color: var(--accent-color, #34d399);
  /* Accent color */
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.2s ease-in-out;
}

/* When the option is hovered, style the radio button */
.group:hover .custom-radio {
  border-color: var(--accent-color, #34d399);
  /* Change border color on hover */
}

.group:hover .custom-radio span {
  transform: scale(1);
  /* Make the inner circle visible on hover */
}

[data-action="singleSelect"].selected {
  background-color: hsl(var(--area-hover));
  border-color: hsl(var(--border-default) / 0.5);
  border-bottom-width: 1px;
  color: hsl(var(--base-foreground) / 0.9);
  font-size: 1rem;
  line-height: 1.5rem;
}

/* When the option is selected */
[data-action="singleSelect"].selected .custom-radio {
  border-color: var(--accent-color, #34d399);
}

[data-action="singleSelect"].selected .custom-radio span {
  transform: scale(1);
}

.placeholder-gray {
  &::placeholder {
    color: #9ca3af; /* Tailwind's default gray-400 */
  }
}

.placeholder-dark {
  &::placeholder {
    color: #6b7280; /* Tailwind's default gray-500 */
  }
}

.placeholder-primary {
  &::placeholder {
    color: #3b82f6; /* Tailwind's default blue-500 */
  }
}

.placeholder-hover {
  &:hover::placeholder {
    color: #f59e0b; /* Tailwind's default amber-500 */
  }
}

.placeholder-focus {
  &:focus::placeholder {
    color: #10b981; /* Tailwind's default green-500 */
  }
}

/* Offer details page, gallery smooth transition css */

/* MAIN IMAGES TRACK */
.gallery-main-track img {
  flex: 0 0 100%; /* Each image takes full width of the .gallery-main-wrapper */
  object-fit: cover;
}

.gallery-main-track {
  /* Already has transition from HTML: 'transition-transform duration-500 ease-in-out' */
  display: flex; /* Row of images */
}

/* THUMBNAILS TRACK */
.gallery-thumbs-track {
  /* transition: transform 0.5s ease-in-out; (already set from the HTML class) */
}

.gallery-thumbs-track img {
  width: 100%;
  height: 100px; /* or sm:h-1/4 if you prefer dynamic sizing */
  object-fit: cover;
  margin-bottom: 8px; /* gap, or use Tailwind classes */
}

.gallery-thumb {
  transition: opacity 0.4s ease-in-out;
  opacity: 1;
}
.gallery-thumb.fade-out {
  opacity: 0;
}

/* If you want 4 visible at a time, ensure the parent has a fixed height, e.g. 'h-96' */

/* Offer details page, gallery smooth transition css */

.rainbow-spinner {
  width: 20px;
  height: 20px;
  border: 3px solid transparent;
  border-top: 3px solid #f87171; /* red */
  border-right: 3px solid #facc15; /* yellow */
  border-bottom: 3px solid #4ade80; /* green */
  border-left: 3px solid #60a5fa; /* blue */
  border-radius: 50%;
  animation: spinRainbow 1s linear infinite;
  display: inline-block;
}

@keyframes spinRainbow {
  0% {
    transform: rotate(0deg);
    filter: hue-rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
    filter: hue-rotate(360deg);
  }
}