/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap');
@layer properties;
.collapse {
  visibility: collapse;
}
.invisible {
  visibility: hidden;
}
.visible {
  visibility: visible;
}
.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;
}
.absolute {
  position: absolute;
}
.fixed {
  position: fixed;
}
.relative {
  position: relative;
}
.static {
  position: static;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: calc(var(--spacing, 0.25rem) * 0);
}
.inset-2 {
  inset: calc(var(--spacing, 0.25rem) * 2);
}
.inset-3 {
  inset: calc(var(--spacing, 0.25rem) * 3);
}
.start-0 {
  inset-inline-start: calc(var(--spacing, 0.25rem) * 0);
}
.start-50 {
  inset-inline-start: calc(var(--spacing, 0.25rem) * 50);
}
.start-100 {
  inset-inline-start: calc(var(--spacing, 0.25rem) * 100);
}
.end-0 {
  inset-inline-end: calc(var(--spacing, 0.25rem) * 0);
}
.end-50 {
  inset-inline-end: calc(var(--spacing, 0.25rem) * 50);
}
.end-100 {
  inset-inline-end: calc(var(--spacing, 0.25rem) * 100);
}
.top-0 {
  top: calc(var(--spacing, 0.25rem) * 0);
}
.top-1 {
  top: calc(var(--spacing, 0.25rem) * 1);
}
.top-1\/2 {
  top: calc(1/2 * 100%);
}
.top-2 {
  top: calc(var(--spacing, 0.25rem) * 2);
}
.top-50 {
  top: calc(var(--spacing, 0.25rem) * 50);
}
.top-100 {
  top: calc(var(--spacing, 0.25rem) * 100);
}
.right-0 {
  right: calc(var(--spacing, 0.25rem) * 0);
}
.bottom-0 {
  bottom: calc(var(--spacing, 0.25rem) * 0);
}
.bottom-1 {
  bottom: calc(var(--spacing, 0.25rem) * 1);
}
.bottom-2 {
  bottom: calc(var(--spacing, 0.25rem) * 2);
}
.bottom-50 {
  bottom: calc(var(--spacing, 0.25rem) * 50);
}
.bottom-100 {
  bottom: calc(var(--spacing, 0.25rem) * 100);
}
.left-0 {
  left: calc(var(--spacing, 0.25rem) * 0);
}
.isolate {
  isolation: isolate;
}
.z-0 {
  z-index: 0;
}
.z-1 {
  z-index: 1;
}
.z-2 {
  z-index: 2;
}
.z-3 {
  z-index: 3;
}
.z-10 {
  z-index: 10;
}
.z-30 {
  z-index: 30;
}
.z-50 {
  z-index: 50;
}
.order-0 {
  order: 0;
}
.order-1 {
  order: 1;
}
.order-2 {
  order: 2;
}
.order-3 {
  order: 3;
}
.order-4 {
  order: 4;
}
.order-5 {
  order: 5;
}
.order-6 {
  order: 6;
}
.order-7 {
  order: 7;
}
.order-8 {
  order: 8;
}
.order-9 {
  order: 9;
}
.order-10 {
  order: 10;
}
.order-11 {
  order: 11;
}
.order-12 {
  order: 12;
}
.order-first {
  order: -9999;
}
.order-last {
  order: 9999;
}
.col-1 {
  grid-column: 1;
}
.col-2 {
  grid-column: 2;
}
.col-3 {
  grid-column: 3;
}
.col-4 {
  grid-column: 4;
}
.col-5 {
  grid-column: 5;
}
.col-6 {
  grid-column: 6;
}
.col-7 {
  grid-column: 7;
}
.col-8 {
  grid-column: 8;
}
.col-9 {
  grid-column: 9;
}
.col-10 {
  grid-column: 10;
}
.col-11 {
  grid-column: 11;
}
.col-12 {
  grid-column: 12;
}
.col-auto {
  grid-column: auto;
}
.float-end {
  float: inline-end;
}
.float-left {
  float: left;
}
.float-none {
  float: none;
}
.float-right {
  float: right;
}
.float-start {
  float: inline-start;
}
.container {
  width: 100%;
  @media (width >= 40rem) {
    max-width: 40rem;
  }
  @media (width >= 48rem) {
    max-width: 48rem;
  }
  @media (width >= 64rem) {
    max-width: 64rem;
  }
  @media (width >= 80rem) {
    max-width: 80rem;
  }
  @media (width >= 96rem) {
    max-width: 96rem;
  }
}
.m-0 {
  margin: calc(var(--spacing, 0.25rem) * 0);
}
.m-1 {
  margin: calc(var(--spacing, 0.25rem) * 1);
}
.m-2 {
  margin: calc(var(--spacing, 0.25rem) * 2);
}
.m-3 {
  margin: calc(var(--spacing, 0.25rem) * 3);
}
.m-4 {
  margin: calc(var(--spacing, 0.25rem) * 4);
}
.m-5 {
  margin: calc(var(--spacing, 0.25rem) * 5);
}
.m-auto {
  margin: auto;
}
.-mx-2 {
  margin-inline: calc(var(--spacing, 0.25rem) * -2);
}
.mx-0 {
  margin-inline: calc(var(--spacing, 0.25rem) * 0);
}
.mx-1 {
  margin-inline: calc(var(--spacing, 0.25rem) * 1);
}
.mx-2 {
  margin-inline: calc(var(--spacing, 0.25rem) * 2);
}
.mx-3 {
  margin-inline: calc(var(--spacing, 0.25rem) * 3);
}
.mx-4 {
  margin-inline: calc(var(--spacing, 0.25rem) * 4);
}
.mx-5 {
  margin-inline: calc(var(--spacing, 0.25rem) * 5);
}
.mx-auto {
  margin-inline: auto;
}
.my-0 {
  margin-block: calc(var(--spacing, 0.25rem) * 0);
}
.my-1 {
  margin-block: calc(var(--spacing, 0.25rem) * 1);
}
.my-2 {
  margin-block: calc(var(--spacing, 0.25rem) * 2);
}
.my-3 {
  margin-block: calc(var(--spacing, 0.25rem) * 3);
}
.my-4 {
  margin-block: calc(var(--spacing, 0.25rem) * 4);
}
.my-5 {
  margin-block: calc(var(--spacing, 0.25rem) * 5);
}
.my-auto {
  margin-block: auto;
}
.ms-0 {
  margin-inline-start: calc(var(--spacing, 0.25rem) * 0);
}
.ms-1 {
  margin-inline-start: calc(var(--spacing, 0.25rem) * 1);
}
.ms-2 {
  margin-inline-start: calc(var(--spacing, 0.25rem) * 2);
}
.ms-3 {
  margin-inline-start: calc(var(--spacing, 0.25rem) * 3);
}
.ms-4 {
  margin-inline-start: calc(var(--spacing, 0.25rem) * 4);
}
.ms-5 {
  margin-inline-start: calc(var(--spacing, 0.25rem) * 5);
}
.ms-auto {
  margin-inline-start: auto;
}
.me-0 {
  margin-inline-end: calc(var(--spacing, 0.25rem) * 0);
}
.me-1 {
  margin-inline-end: calc(var(--spacing, 0.25rem) * 1);
}
.me-2 {
  margin-inline-end: calc(var(--spacing, 0.25rem) * 2);
}
.me-3 {
  margin-inline-end: calc(var(--spacing, 0.25rem) * 3);
}
.me-4 {
  margin-inline-end: calc(var(--spacing, 0.25rem) * 4);
}
.me-5 {
  margin-inline-end: calc(var(--spacing, 0.25rem) * 5);
}
.me-auto {
  margin-inline-end: auto;
}
.mt-0 {
  margin-top: calc(var(--spacing, 0.25rem) * 0);
}
.mt-1 {
  margin-top: calc(var(--spacing, 0.25rem) * 1);
}
.mt-2 {
  margin-top: calc(var(--spacing, 0.25rem) * 2);
}
.mt-3 {
  margin-top: calc(var(--spacing, 0.25rem) * 3);
}
.mt-4 {
  margin-top: calc(var(--spacing, 0.25rem) * 4);
}
.mt-5 {
  margin-top: calc(var(--spacing, 0.25rem) * 5);
}
.mt-6 {
  margin-top: calc(var(--spacing, 0.25rem) * 6);
}
.mt-8 {
  margin-top: calc(var(--spacing, 0.25rem) * 8);
}
.mt-10 {
  margin-top: calc(var(--spacing, 0.25rem) * 10);
}
.mt-12 {
  margin-top: calc(var(--spacing, 0.25rem) * 12);
}
.mt-30 {
  margin-top: calc(var(--spacing, 0.25rem) * 30);
}
.mt-40 {
  margin-top: calc(var(--spacing, 0.25rem) * 40);
}
.mt-auto {
  margin-top: auto;
}
.mr-1 {
  margin-right: calc(var(--spacing, 0.25rem) * 1);
}
.mr-2 {
  margin-right: calc(var(--spacing, 0.25rem) * 2);
}
.mr-4 {
  margin-right: calc(var(--spacing, 0.25rem) * 4);
}
.mr-5 {
  margin-right: calc(var(--spacing, 0.25rem) * 5);
}
.mb-0 {
  margin-bottom: calc(var(--spacing, 0.25rem) * 0);
}
.mb-1 {
  margin-bottom: calc(var(--spacing, 0.25rem) * 1);
}
.mb-2 {
  margin-bottom: calc(var(--spacing, 0.25rem) * 2);
}
.mb-3 {
  margin-bottom: calc(var(--spacing, 0.25rem) * 3);
}
.mb-4 {
  margin-bottom: calc(var(--spacing, 0.25rem) * 4);
}
.mb-5 {
  margin-bottom: calc(var(--spacing, 0.25rem) * 5);
}
.mb-6 {
  margin-bottom: calc(var(--spacing, 0.25rem) * 6);
}
.mb-8 {
  margin-bottom: calc(var(--spacing, 0.25rem) * 8);
}
.mb-10 {
  margin-bottom: calc(var(--spacing, 0.25rem) * 10);
}
.mb-12 {
  margin-bottom: calc(var(--spacing, 0.25rem) * 12);
}
.mb-20 {
  margin-bottom: calc(var(--spacing, 0.25rem) * 20);
}
.mb-30 {
  margin-bottom: calc(var(--spacing, 0.25rem) * 30);
}
.mb-40 {
  margin-bottom: calc(var(--spacing, 0.25rem) * 40);
}
.mb-50 {
  margin-bottom: calc(var(--spacing, 0.25rem) * 50);
}
.mb-55 {
  margin-bottom: calc(var(--spacing, 0.25rem) * 55);
}
.mb-60 {
  margin-bottom: calc(var(--spacing, 0.25rem) * 60);
}
.mb-65 {
  margin-bottom: calc(var(--spacing, 0.25rem) * 65);
}
.mb-auto {
  margin-bottom: auto;
}
.-ml-1 {
  margin-left: calc(var(--spacing, 0.25rem) * -1);
}
.ml-2 {
  margin-left: calc(var(--spacing, 0.25rem) * 2);
}
.ml-auto {
  margin-left: auto;
}
.\!hidden {
  display: none !important;
}
.\!inline {
  display: inline !important;
}
.block {
  display: block;
}
.contents {
  display: contents;
}
.flex {
  display: flex;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.inline {
  display: inline;
}
.inline-block {
  display: inline-block;
}
.inline-flex {
  display: inline-flex;
}
.inline-grid {
  display: inline-grid;
}
.table {
  display: table;
}
.table-caption {
  display: table-caption;
}
.table-cell {
  display: table-cell;
}
.table-row {
  display: table-row;
}
.h-3 {
  height: calc(var(--spacing, 0.25rem) * 3);
}
.h-5 {
  height: calc(var(--spacing, 0.25rem) * 5);
}
.h-6 {
  height: calc(var(--spacing, 0.25rem) * 6);
}
.h-14 {
  height: calc(var(--spacing, 0.25rem) * 14);
}
.h-16 {
  height: calc(var(--spacing, 0.25rem) * 16);
}
.h-22 {
  height: calc(var(--spacing, 0.25rem) * 22);
}
.h-25 {
  height: calc(var(--spacing, 0.25rem) * 25);
}
.h-40 {
  height: calc(var(--spacing, 0.25rem) * 40);
}
.h-50 {
  height: calc(var(--spacing, 0.25rem) * 50);
}
.h-75 {
  height: calc(var(--spacing, 0.25rem) * 75);
}
.h-100 {
  height: calc(var(--spacing, 0.25rem) * 100);
}
.h-auto {
  height: auto;
}
.h-full {
  height: 100%;
}
.max-h-72 {
  max-height: calc(var(--spacing, 0.25rem) * 72);
}
.max-h-96 {
  max-height: calc(var(--spacing, 0.25rem) * 96);
}
.min-h-screen {
  min-height: 100vh;
}
.w-3 {
  width: calc(var(--spacing, 0.25rem) * 3);
}
.w-5 {
  width: calc(var(--spacing, 0.25rem) * 5);
}
.w-6 {
  width: calc(var(--spacing, 0.25rem) * 6);
}
.w-16 {
  width: calc(var(--spacing, 0.25rem) * 16);
}
.w-25 {
  width: calc(var(--spacing, 0.25rem) * 25);
}
.w-32 {
  width: calc(var(--spacing, 0.25rem) * 32);
}
.w-50 {
  width: calc(var(--spacing, 0.25rem) * 50);
}
.w-75 {
  width: calc(var(--spacing, 0.25rem) * 75);
}
.w-100 {
  width: calc(var(--spacing, 0.25rem) * 100);
}
.w-auto {
  width: auto;
}
.w-full {
  width: 100%;
}
.max-w-2xl {
  max-width: var(--container-2xl, 42rem);
}
.max-w-3xl {
  max-width: var(--container-3xl, 48rem);
}
.max-w-xl {
  max-width: var(--container-xl, 36rem);
}
.max-w-xs {
  max-width: var(--container-xs, 20rem);
}
.flex-shrink {
  flex-shrink: 1;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.flex-shrink-1 {
  flex-shrink: 1;
}
.shrink {
  flex-shrink: 1;
}
.flex-grow {
  flex-grow: 1;
}
.flex-grow-0 {
  flex-grow: 0;
}
.flex-grow-1 {
  flex-grow: 1;
}
.grow {
  flex-grow: 1;
}
.caption-top {
  caption-side: top;
}
.border-collapse {
  border-collapse: collapse;
}
.-translate-y-1\/2 {
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.transform {
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}
.cursor-pointer {
  cursor: pointer;
}
.cursor-text {
  cursor: text;
}
.resize {
  resize: both;
}
.list-disc {
  list-style-type: disc;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.flex-col {
  flex-direction: column;
}
.flex-row {
  flex-direction: row;
}
.flex-row-reverse {
  flex-direction: row-reverse;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}
.items-center {
  align-items: center;
}
.items-start {
  align-items: flex-start;
}
.justify-between {
  justify-content: space-between;
}
.justify-center {
  justify-content: center;
}
.gap-0 {
  gap: calc(var(--spacing, 0.25rem) * 0);
}
.gap-1 {
  gap: calc(var(--spacing, 0.25rem) * 1);
}
.gap-2 {
  gap: calc(var(--spacing, 0.25rem) * 2);
}
.gap-3 {
  gap: calc(var(--spacing, 0.25rem) * 3);
}
.gap-4 {
  gap: calc(var(--spacing, 0.25rem) * 4);
}
.gap-5 {
  gap: calc(var(--spacing, 0.25rem) * 5);
}
.gap-8 {
  gap: calc(var(--spacing, 0.25rem) * 8);
}
.space-y-2 {
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing, 0.25rem) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing, 0.25rem) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }
}
.space-x-2 {
  :where(& > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing, 0.25rem) * 2) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing, 0.25rem) * 2) * calc(1 - var(--tw-space-x-reverse)));
  }
}
.space-x-4 {
  :where(& > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing, 0.25rem) * 4) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing, 0.25rem) * 4) * calc(1 - var(--tw-space-x-reverse)));
  }
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-scroll {
  overflow: scroll;
}
.overflow-visible {
  overflow: visible;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.overflow-x-scroll {
  overflow-x: scroll;
}
.overflow-x-visible {
  overflow-x: visible;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-y-hidden {
  overflow-y: hidden;
}
.overflow-y-scroll {
  overflow-y: scroll;
}
.overflow-y-visible {
  overflow-y: visible;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-full {
  border-radius: calc(infinity * 1px);
}
.rounded-lg {
  border-radius: var(--radius-lg, 0.5rem);
}
.border {
  border-style: var(--tw-border-style);
  border-width: 1px;
}
.border-0 {
  border-style: var(--tw-border-style);
  border-width: 0px;
}
.border-1 {
  border-style: var(--tw-border-style);
  border-width: 1px;
}
.border-2 {
  border-style: var(--tw-border-style);
  border-width: 2px;
}
.border-3 {
  border-style: var(--tw-border-style);
  border-width: 3px;
}
.border-4 {
  border-style: var(--tw-border-style);
  border-width: 4px;
}
.border-5 {
  border-style: var(--tw-border-style);
  border-width: 5px;
}
.border-t {
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
}
.border-b {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
}
.border-black {
  border-color: var(--color-black, #000);
}
.border-blue-200 {
  border-color: var(--color-blue-200, oklch(88.2% 0.059 254.128));
}
.border-gray-300 {
  border-color: var(--color-gray-300, oklch(87.2% 0.01 258.338));
}
.border-gray-400 {
  border-color: var(--color-gray-400, oklch(70.7% 0.022 261.325));
}
.border-gray-600 {
  border-color: var(--color-gray-600, oklch(44.6% 0.03 256.802));
}
.border-white {
  border-color: var(--color-white, #fff);
}
.bg-black {
  background-color: var(--color-black, #000);
}
.bg-black\/30 {
  background-color: color-mix(in srgb, #000 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-black, #000) 30%, transparent);
  }
}
.bg-blue-500 {
  background-color: var(--color-blue-500, oklch(62.3% 0.214 259.815));
}
.bg-blue-600 {
  background-color: var(--color-blue-600, oklch(54.6% 0.245 262.881));
}
.bg-gray-50 {
  background-color: var(--color-gray-50, oklch(98.5% 0.002 247.839));
}
.bg-gray-100 {
  background-color: var(--color-gray-100, oklch(96.7% 0.003 264.542));
}
.bg-gray-300 {
  background-color: var(--color-gray-300, oklch(87.2% 0.01 258.338));
}
.bg-gray-800 {
  background-color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
}
.bg-green-500 {
  background-color: var(--color-green-500, oklch(72.3% 0.219 149.579));
}
.bg-green-600 {
  background-color: var(--color-green-600, oklch(62.7% 0.194 149.214));
}
.bg-sky-50 {
  background-color: var(--color-sky-50, oklch(97.7% 0.013 236.62));
}
.bg-sky-500 {
  background-color: var(--color-sky-500, oklch(68.5% 0.169 237.323));
}
.bg-sky-700 {
  background-color: var(--color-sky-700, oklch(50% 0.134 242.749));
}
.bg-transparent {
  background-color: transparent;
}
.bg-white {
  background-color: var(--color-white, #fff);
}
.bg-cover {
  background-size: cover;
}
.bg-center {
  background-position: center;
}
.bg-right {
  background-position: right;
}
.bg-top {
  background-position: top;
}
.bg-no-repeat {
  background-repeat: no-repeat;
}
.fill-current {
  fill: currentcolor;
}
.fill-white {
  fill: var(--color-white, #fff);
}
.object-contain {
  object-fit: contain;
}
.object-cover {
  object-fit: cover;
}
.p-0 {
  padding: calc(var(--spacing, 0.25rem) * 0);
}
.p-1 {
  padding: calc(var(--spacing, 0.25rem) * 1);
}
.p-2 {
  padding: calc(var(--spacing, 0.25rem) * 2);
}
.p-3 {
  padding: calc(var(--spacing, 0.25rem) * 3);
}
.p-4 {
  padding: calc(var(--spacing, 0.25rem) * 4);
}
.p-5 {
  padding: calc(var(--spacing, 0.25rem) * 5);
}
.p-6 {
  padding: calc(var(--spacing, 0.25rem) * 6);
}
.px-0 {
  padding-inline: calc(var(--spacing, 0.25rem) * 0);
}
.px-1 {
  padding-inline: calc(var(--spacing, 0.25rem) * 1);
}
.px-2 {
  padding-inline: calc(var(--spacing, 0.25rem) * 2);
}
.px-3 {
  padding-inline: calc(var(--spacing, 0.25rem) * 3);
}
.px-4 {
  padding-inline: calc(var(--spacing, 0.25rem) * 4);
}
.px-5 {
  padding-inline: calc(var(--spacing, 0.25rem) * 5);
}
.px-6 {
  padding-inline: calc(var(--spacing, 0.25rem) * 6);
}
.py-0 {
  padding-block: calc(var(--spacing, 0.25rem) * 0);
}
.py-1 {
  padding-block: calc(var(--spacing, 0.25rem) * 1);
}
.py-2 {
  padding-block: calc(var(--spacing, 0.25rem) * 2);
}
.py-3 {
  padding-block: calc(var(--spacing, 0.25rem) * 3);
}
.py-4 {
  padding-block: calc(var(--spacing, 0.25rem) * 4);
}
.py-5 {
  padding-block: calc(var(--spacing, 0.25rem) * 5);
}
.py-6 {
  padding-block: calc(var(--spacing, 0.25rem) * 6);
}
.py-8 {
  padding-block: calc(var(--spacing, 0.25rem) * 8);
}
.py-12 {
  padding-block: calc(var(--spacing, 0.25rem) * 12);
}
.py-16 {
  padding-block: calc(var(--spacing, 0.25rem) * 16);
}
.py-20 {
  padding-block: calc(var(--spacing, 0.25rem) * 20);
}
.ps-0 {
  padding-inline-start: calc(var(--spacing, 0.25rem) * 0);
}
.ps-1 {
  padding-inline-start: calc(var(--spacing, 0.25rem) * 1);
}
.ps-2 {
  padding-inline-start: calc(var(--spacing, 0.25rem) * 2);
}
.ps-3 {
  padding-inline-start: calc(var(--spacing, 0.25rem) * 3);
}
.ps-4 {
  padding-inline-start: calc(var(--spacing, 0.25rem) * 4);
}
.ps-5 {
  padding-inline-start: calc(var(--spacing, 0.25rem) * 5);
}
.pe-0 {
  padding-inline-end: calc(var(--spacing, 0.25rem) * 0);
}
.pe-1 {
  padding-inline-end: calc(var(--spacing, 0.25rem) * 1);
}
.pe-2 {
  padding-inline-end: calc(var(--spacing, 0.25rem) * 2);
}
.pe-3 {
  padding-inline-end: calc(var(--spacing, 0.25rem) * 3);
}
.pe-4 {
  padding-inline-end: calc(var(--spacing, 0.25rem) * 4);
}
.pe-5 {
  padding-inline-end: calc(var(--spacing, 0.25rem) * 5);
}
.pt-0 {
  padding-top: calc(var(--spacing, 0.25rem) * 0);
}
.pt-1 {
  padding-top: calc(var(--spacing, 0.25rem) * 1);
}
.pt-2 {
  padding-top: calc(var(--spacing, 0.25rem) * 2);
}
.pt-3 {
  padding-top: calc(var(--spacing, 0.25rem) * 3);
}
.pt-4 {
  padding-top: calc(var(--spacing, 0.25rem) * 4);
}
.pt-5 {
  padding-top: calc(var(--spacing, 0.25rem) * 5);
}
.pt-12 {
  padding-top: calc(var(--spacing, 0.25rem) * 12);
}
.pt-120 {
  padding-top: calc(var(--spacing, 0.25rem) * 120);
}
.pr-4 {
  padding-right: calc(var(--spacing, 0.25rem) * 4);
}
.pb-0 {
  padding-bottom: calc(var(--spacing, 0.25rem) * 0);
}
.pb-1 {
  padding-bottom: calc(var(--spacing, 0.25rem) * 1);
}
.pb-2 {
  padding-bottom: calc(var(--spacing, 0.25rem) * 2);
}
.pb-3 {
  padding-bottom: calc(var(--spacing, 0.25rem) * 3);
}
.pb-4 {
  padding-bottom: calc(var(--spacing, 0.25rem) * 4);
}
.pb-5 {
  padding-bottom: calc(var(--spacing, 0.25rem) * 5);
}
.pb-8 {
  padding-bottom: calc(var(--spacing, 0.25rem) * 8);
}
.pb-12 {
  padding-bottom: calc(var(--spacing, 0.25rem) * 12);
}
.pl-3 {
  padding-left: calc(var(--spacing, 0.25rem) * 3);
}
.pl-5 {
  padding-left: calc(var(--spacing, 0.25rem) * 5);
}
.pl-6 {
  padding-left: calc(var(--spacing, 0.25rem) * 6);
}
.text-center {
  text-align: center;
}
.text-end {
  text-align: end;
}
.text-justify {
  text-align: justify;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-start {
  text-align: start;
}
.align-baseline {
  vertical-align: baseline;
}
.align-bottom {
  vertical-align: bottom;
}
.align-middle {
  vertical-align: middle;
}
.align-text-bottom {
  vertical-align: text-bottom;
}
.align-text-top {
  vertical-align: text-top;
}
.align-top {
  vertical-align: top;
}
.text-2xl {
  font-size: var(--text-2xl, 1.5rem);
  line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
}
.text-3xl {
  font-size: var(--text-3xl, 1.875rem);
  line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
}
.text-base {
  font-size: var(--text-base, 1rem);
  line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
}
.text-lg {
  font-size: var(--text-lg, 1.125rem);
  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
}
.text-sm {
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
}
.text-xl {
  font-size: var(--text-xl, 1.25rem);
  line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
}
.text-xs {
  font-size: var(--text-xs, 0.75rem);
  line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
}
.leading-normal {
  --tw-leading: var(--leading-normal, 1.5);
  line-height: var(--leading-normal, 1.5);
}
.leading-relaxed {
  --tw-leading: var(--leading-relaxed, 1.625);
  line-height: var(--leading-relaxed, 1.625);
}
.font-bold {
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
}
.font-medium {
  --tw-font-weight: var(--font-weight-medium, 500);
  font-weight: var(--font-weight-medium, 500);
}
.font-semibold {
  --tw-font-weight: var(--font-weight-semibold, 600);
  font-weight: var(--font-weight-semibold, 600);
}
.tracking-normal {
  --tw-tracking: var(--tracking-normal, 0em);
  letter-spacing: var(--tracking-normal, 0em);
}
.tracking-wide {
  --tw-tracking: var(--tracking-wide, 0.025em);
  letter-spacing: var(--tracking-wide, 0.025em);
}
.text-nowrap {
  text-wrap: nowrap;
}
.text-wrap {
  text-wrap: wrap;
}
.text-black {
  color: var(--color-black, #000);
}
.text-blue-500 {
  color: var(--color-blue-500, oklch(62.3% 0.214 259.815));
}
.text-blue-700 {
  color: var(--color-blue-700, oklch(48.8% 0.243 264.376));
}
.text-gray-500 {
  color: var(--color-gray-500, oklch(55.1% 0.027 264.364));
}
.text-gray-600 {
  color: var(--color-gray-600, oklch(44.6% 0.03 256.802));
}
.text-gray-700 {
  color: var(--color-gray-700, oklch(37.3% 0.034 259.733));
}
.text-gray-800 {
  color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
}
.text-gray-900 {
  color: var(--color-gray-900, oklch(21% 0.034 264.665));
}
.text-green-600 {
  color: var(--color-green-600, oklch(62.7% 0.194 149.214));
}
.text-green-700 {
  color: var(--color-green-700, oklch(52.7% 0.154 150.069));
}
.text-red-600 {
  color: var(--color-red-600, oklch(57.7% 0.245 27.325));
}
.text-sky-700 {
  color: var(--color-sky-700, oklch(50% 0.134 242.749));
}
.text-white {
  color: var(--color-white, #fff);
}
.capitalize {
  text-transform: capitalize;
}
.lowercase {
  text-transform: lowercase;
}
.uppercase {
  text-transform: uppercase;
}
.italic {
  font-style: italic;
}
.ordinal {
  --tw-ordinal: ordinal;
  font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
}
.line-through {
  text-decoration-line: line-through;
}
.no-underline {
  text-decoration-line: none;
}
.underline {
  text-decoration-line: underline;
}
.opacity-0 {
  opacity: 0%;
}
.opacity-25 {
  opacity: 25%;
}
.opacity-50 {
  opacity: 50%;
}
.opacity-75 {
  opacity: 75%;
}
.opacity-100 {
  opacity: 100%;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-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-none {
  --tw-shadow: 0 0 #0000;
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.outline {
  outline-style: var(--tw-outline-style);
  outline-width: 1px;
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.drop-shadow-lg {
  --tw-drop-shadow-size: drop-shadow(0 4px 4px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15)));
  --tw-drop-shadow: drop-shadow(var(--drop-shadow-lg, 0 4px 4px rgb(0 0 0 / 0.15)));
  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,);
}
.drop-shadow-md {
  --tw-drop-shadow-size: drop-shadow(0 3px 3px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.12)));
  --tw-drop-shadow: drop-shadow(var(--drop-shadow-md, 0 3px 3px rgb(0 0 0 / 0.12)));
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.\!filter {
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,) !important;
}
.filter {
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.filter\! {
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,) !important;
}
.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, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
}
.transition-all {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
}
.transition-colors {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
}
.transition-transform {
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
}
.duration-300 {
  --tw-duration: 300ms;
  transition-duration: 300ms;
}
.duration-500 {
  --tw-duration: 500ms;
  transition-duration: 500ms;
}
.ease-in-out {
  --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
  transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
}
.ease-out {
  --tw-ease: var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
  transition-timing-function: var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
}
.backface-hidden {
  backface-visibility: hidden;
}
.group-hover\:fill-sky-200 {
  &:is(:where(.group):hover *) {
    @media (hover: hover) {
      fill: var(--color-sky-200, oklch(90.1% 0.058 230.902));
    }
  }
}
.hover\:grow {
  &:hover {
    @media (hover: hover) {
      flex-grow: 1;
    }
  }
}
.hover\:border-black {
  &:hover {
    @media (hover: hover) {
      border-color: var(--color-black, #000);
    }
  }
}
.hover\:bg-blue-100 {
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-blue-100, oklch(93.2% 0.032 255.585));
    }
  }
}
.hover\:bg-blue-700 {
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-blue-700, oklch(48.8% 0.243 264.376));
    }
  }
}
.hover\:bg-gray-100 {
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-100, oklch(96.7% 0.003 264.542));
    }
  }
}
.hover\:bg-green-600 {
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-green-600, oklch(62.7% 0.194 149.214));
    }
  }
}
.hover\:bg-green-700 {
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-green-700, oklch(52.7% 0.154 150.069));
    }
  }
}
.hover\:bg-slate-100 {
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-slate-100, oklch(96.8% 0.007 247.896));
    }
  }
}
.hover\:text-black {
  &:hover {
    @media (hover: hover) {
      color: var(--color-black, #000);
    }
  }
}
.hover\:text-blue-400 {
  &:hover {
    @media (hover: hover) {
      color: var(--color-blue-400, oklch(70.7% 0.165 254.624));
    }
  }
}
.hover\:text-blue-600 {
  &:hover {
    @media (hover: hover) {
      color: var(--color-blue-600, oklch(54.6% 0.245 262.881));
    }
  }
}
.hover\:text-green-500 {
  &:hover {
    @media (hover: hover) {
      color: var(--color-green-500, oklch(72.3% 0.219 149.579));
    }
  }
}
.hover\:no-underline {
  &:hover {
    @media (hover: hover) {
      text-decoration-line: none;
    }
  }
}
.hover\:underline {
  &:hover {
    @media (hover: hover) {
      text-decoration-line: underline;
    }
  }
}
.hover\:shadow-lg {
  &:hover {
    @media (hover: hover) {
      --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);
    }
  }
}
.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, oklch(70.7% 0.165 254.624));
  }
}
.focus\:ring-green-400 {
  &:focus {
    --tw-ring-color: var(--color-green-400, oklch(79.2% 0.209 151.711));
  }
}
.focus\:outline-none {
  &:focus {
    --tw-outline-style: none;
    outline-style: none;
  }
}
.sm\:w-40 {
  @media (width >= 40rem) {
    width: calc(var(--spacing, 0.25rem) * 40);
  }
}
.md\:order-1 {
  @media (width >= 48rem) {
    order: 1;
  }
}
.md\:order-2 {
  @media (width >= 48rem) {
    order: 2;
  }
}
.md\:order-3 {
  @media (width >= 48rem) {
    order: 3;
  }
}
.md\:mb-0 {
  @media (width >= 48rem) {
    margin-bottom: calc(var(--spacing, 0.25rem) * 0);
  }
}
.md\:flex {
  @media (width >= 48rem) {
    display: flex;
  }
}
.md\:hidden {
  @media (width >= 48rem) {
    display: none;
  }
}
.md\:inline {
  @media (width >= 48rem) {
    display: inline;
  }
}
.md\:w-1\/2 {
  @media (width >= 48rem) {
    width: calc(1/2 * 100%);
  }
}
.md\:w-1\/3 {
  @media (width >= 48rem) {
    width: calc(1/3 * 100%);
  }
}
.md\:w-1\/4 {
  @media (width >= 48rem) {
    width: calc(1/4 * 100%);
  }
}
.md\:w-auto {
  @media (width >= 48rem) {
    width: auto;
  }
}
.md\:grid-cols-2 {
  @media (width >= 48rem) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.md\:grid-cols-4 {
  @media (width >= 48rem) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.md\:flex-row {
  @media (width >= 48rem) {
    flex-direction: row;
  }
}
.md\:items-center {
  @media (width >= 48rem) {
    align-items: center;
  }
}
.md\:pt-0 {
  @media (width >= 48rem) {
    padding-top: calc(var(--spacing, 0.25rem) * 0);
  }
}
.md\:text-3xl {
  @media (width >= 48rem) {
    font-size: var(--text-3xl, 1.875rem);
    line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
  }
}
.md\:text-4xl {
  @media (width >= 48rem) {
    font-size: var(--text-4xl, 2.25rem);
    line-height: var(--tw-leading, var(--text-4xl--line-height, calc(2.5 / 2.25)));
  }
}
.lg\:w-1\/2 {
  @media (width >= 64rem) {
    width: calc(1/2 * 100%);
  }
}
.lg\:w-1\/3 {
  @media (width >= 64rem) {
    width: calc(1/3 * 100%);
  }
}
.xl\:w-1\/4 {
  @media (width >= 80rem) {
    width: calc(1/4 * 100%);
  }
}
.dark\:fill-gray-200 {
  @media (prefers-color-scheme: dark) {
    fill: var(--color-gray-200, oklch(92.8% 0.006 264.531));
  }
}
.\[role\=\"menuitem\"\]\:visible {
  &:is(role="menuitem") {
    visibility: visible;
  }
}
:root {
  --color-primary: #0ea5e9;
  --color-secondary: #f0f9ff;
  --color-accent: #2563eb;
  --color-background: #f8fafc;
  --color-text: #1e293b;
  --font-poppins: "Poppins", sans-serif;
  --font-size-base: 16px;
}
* {
  margin: calc(var(--spacing, 0.25rem) * 0);
  box-sizing: border-box;
  padding: calc(var(--spacing, 0.25rem) * 0);
}
body {
  background-color: var(--color-slate-50, oklch(98.4% 0.003 247.858));
  font-family: var(--font-poppins);
  font-size: var(--text-base, 1rem);
  line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
  --tw-leading: var(--leading-relaxed, 1.625);
  line-height: var(--leading-relaxed, 1.625);
  color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
  color: var(--color-slate-800, oklch(27.9% 0.041 260.031));
}
header {
  position: sticky;
  top: calc(var(--spacing, 0.25rem) * 0);
  z-index: 50;
  width: 100%;
  background-color: var(--color-sky-200, oklch(90.1% 0.058 230.902));
}
h1 {
  margin-bottom: calc(var(--spacing, 0.25rem) * 4);
  font-size: var(--text-4xl, 2.25rem);
  line-height: var(--tw-leading, var(--text-4xl--line-height, calc(2.5 / 2.25)));
  --tw-leading: var(--leading-tight, 1.25);
  line-height: var(--leading-tight, 1.25);
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-slate-800, oklch(27.9% 0.041 260.031));
}
h2 {
  margin-bottom: calc(var(--spacing, 0.25rem) * 3);
  font-size: var(--text-3xl, 1.875rem);
  line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
  --tw-leading: var(--leading-snug, 1.375);
  line-height: var(--leading-snug, 1.375);
  --tw-font-weight: var(--font-weight-semibold, 600);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-slate-800, oklch(27.9% 0.041 260.031));
}
h3 {
  margin-bottom: calc(var(--spacing, 0.25rem) * 2);
  font-size: var(--text-2xl, 1.5rem);
  line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
  --tw-leading: var(--leading-snug, 1.375);
  line-height: var(--leading-snug, 1.375);
  --tw-font-weight: var(--font-weight-semibold, 600);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-slate-700, oklch(37.2% 0.044 257.287));
}
h4 {
  margin-bottom: calc(var(--spacing, 0.25rem) * 2);
  font-size: var(--text-xl, 1.25rem);
  line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
  --tw-leading: var(--leading-snug, 1.375);
  line-height: var(--leading-snug, 1.375);
  --tw-font-weight: var(--font-weight-medium, 500);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-slate-700, oklch(37.2% 0.044 257.287));
}
p {
  margin-bottom: calc(var(--spacing, 0.25rem) * 4);
  font-size: var(--text-base, 1rem);
  line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
  --tw-leading: var(--leading-relaxed, 1.625);
  line-height: var(--leading-relaxed, 1.625);
  color: var(--color-slate-600, oklch(44.6% 0.043 257.281));
}
h1, h2, h3, h4, h5, h6, p {
  font-family: var(--font-poppins);
}
nav a {
  color: var(--color-white, #fff);
}
a {
  text-decoration-line: none;
}
a:hover {
  text-decoration-line: underline;
}
.container {
  margin-inline: auto;
  width: 100%;
  max-width: var(--breakpoint-xl, 80rem);
  padding-inline: calc(var(--spacing, 0.25rem) * 4);
}
.text-center {
  text-align: center;
}
.text-white {
  color: var(--color-white, #fff);
}
.bg-primary {
  background-color: var(--color-sky-400, oklch(74.6% 0.16 232.661));
}
.bg-secondary {
  background-color: var(--color-sky-100, oklch(95.1% 0.026 236.824));
}
.shadow {
  --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);
}
.rounded {
  border-radius: var(--radius-md, 0.375rem);
}
#hero {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-inline: calc(var(--spacing, 0.25rem) * 5);
  padding-block: calc(var(--spacing, 0.25rem) * 20);
  text-align: center;
}
section {
  width: 100%;
}
.konten-keunggulan {
  margin-inline: auto;
  width: 80vw;
  border-radius: var(--radius-lg, 0.5rem);
  background-color: var(--color-sky-100, oklch(95.1% 0.026 236.824));
  padding: calc(var(--spacing, 0.25rem) * 5);
  --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);
}
.item-fitur {
  margin-bottom: calc(var(--spacing, 0.25rem) * 6);
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacing, 0.25rem) * 4);
  border-radius: var(--radius-lg, 0.5rem);
  background-color: var(--color-white, #fff);
  padding: calc(var(--spacing, 0.25rem) * 5);
  --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);
}
button {
  cursor: pointer;
  border-radius: var(--radius-md, 0.375rem);
  --tw-border-style: none;
  border-style: none;
  background-color: var(--color-amber-600, oklch(66.6% 0.179 58.318));
  padding-inline: calc(var(--spacing, 0.25rem) * 4);
  padding-block: calc(var(--spacing, 0.25rem) * 2);
  font-size: var(--text-base, 1rem);
  line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
  color: var(--color-white, #fff);
  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, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 300ms;
  transition-duration: 300ms;
}
button:hover {
  background-color: var(--color-amber-800, oklch(47.3% 0.137 46.201));
}
svg {
  margin-top: calc(var(--spacing, 0.25rem) * 1);
  height: calc(var(--spacing, 0.25rem) * 8);
  width: calc(var(--spacing, 0.25rem) * 8);
  color: var(--color-sky-600, oklch(58.8% 0.158 241.966));
}
#filter-produk {
  margin-bottom: calc(var(--spacing, 0.25rem) * 6);
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
}
.filter-item {
  margin-bottom: calc(var(--spacing, 0.25rem) * 4);
  width: 100%;
  padding-right: calc(var(--spacing, 0.25rem) * 4);
  @media (width >= 48rem) {
    margin-bottom: calc(var(--spacing, 0.25rem) * 0);
  }
  @media (width >= 48rem) {
    width: calc(1/4 * 100%);
  }
}
.filter-label {
  margin-bottom: calc(var(--spacing, 0.25rem) * 2);
  display: block;
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-gray-700, oklch(37.3% 0.034 259.733));
}
.filter-select {
  display: block;
  width: 100%;
  border-radius: 0.25rem;
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-300, oklch(87.2% 0.01 258.338));
  padding-inline: calc(var(--spacing, 0.25rem) * 3);
  padding-block: calc(var(--spacing, 0.25rem) * 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 {
    --tw-ring-color: var(--color-blue-400, oklch(70.7% 0.165 254.624));
  }
  &:focus {
    --tw-outline-style: none;
    outline-style: none;
  }
}
#daftar-produk {
  margin-bottom: calc(var(--spacing, 0.25rem) * 12);
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: calc(var(--spacing, 0.25rem) * 8);
  @media (width >= 40rem) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  @media (width >= 48rem) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.produk-wrapper {
  overflow: hidden;
  border-radius: var(--radius-lg, 0.5rem);
  background-color: var(--color-gray-100, oklch(96.7% 0.003 264.542));
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  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, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  &:hover {
    @media (hover: hover) {
      --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);
    }
  }
}
.produk-item {
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
}
.produk-img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.produk-detail {
  padding: calc(var(--spacing, 0.25rem) * 4);
}
.produk-name {
  margin-bottom: calc(var(--spacing, 0.25rem) * 2);
  text-align: left;
  font-size: var(--text-lg, 1.125rem);
  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  --tw-font-weight: var(--font-weight-semibold, 600);
  font-weight: var(--font-weight-semibold, 600);
}
.produk-btn-wrapper {
  display: flex;
  justify-content: center;
}
.loadmore-wrapper {
  margin-top: calc(var(--spacing, 0.25rem) * 6);
  display: flex;
  width: 100%;
  justify-content: center;
}
@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-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-space-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-ordinal {
  syntax: "*";
  inherits: false;
}
@property --tw-slashed-zero {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-figure {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@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-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-space-x-reverse: 0;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-duration: initial;
      --tw-ease: initial;
    }
  }
}