/* =========================================================
   AUTO-GENERATED from HTML-Template2/assets/main.css
   Only rules for classes used by the showcase section, scoped
   under .showcase-section so global site styles stay untouched.
   ========================================================= */

.showcase-section {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --color-black: #000;
  --color-white: #fff;
  --spacing: .25rem;
  --container-xl: 36rem;
  --container-2xl: 42rem;
  --text-base: 1rem;
  --text-base--line-height: calc(1.5 / 1);
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.75 / 1.125);
  --text-xl: 1.25rem;
  --text-xl--line-height: calc(1.75 / 1.25);
  --text-4xl: 2.25rem;
  --text-4xl--line-height: calc(2.5 / 2.25);
  --text-5xl: 3rem;
  --text-5xl--line-height: 1;
  --text-6xl: 3.75rem;
  --text-6xl--line-height: 1;
  --text-7xl: 4.5rem;
  --text-7xl--line-height: 1;
  --text-8xl: 6rem;
  --text-8xl--line-height: 1;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --radius-sm: .25rem;
  --radius-md: .375rem;
  --radius-lg: .5rem;
  --radius-xl: .75rem;
  --radius-2xl: 1rem;
  --radius-4xl: 2rem;
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --blur-sm: 8px;
  --default-transition-duration: .15s;
  --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  --default-font-family: var(--font-sans);
  --default-mono-font-family: var(--font-mono);
  --font-inter-tight: "Inter Tight", sans-serif;
  --color-primary-50: #e9edf4;
  --color-primary-500: #3c4f80;
  --color-primary-600: #31426c;
  --color-secondary: #1a1a1c;
  --color-accent: #fcfcfc;
  --color-background-1: #fcfcfd;
  --color-background-2: #f9fafb;
  --color-background-3: #f4f5f8;
  --color-background-4: #f0f2f6;
  --color-background-5: #13171e;
  --color-background-8: #070b10;
  --color-background-11: #b5b5b9;
  --color-background-12: #eaeceb;
  --color-background-13: #f2f5fa;
  --color-background-14: #0d0d12;
  --color-stroke-1: #dfe4eb;
  --color-stroke-2: #e3e7ed;
  --color-stroke-3: #d7dde5;
  --color-stroke-4: #eceff4;
  --color-stroke-9: var(--color-background-8);
  --color-stroke-11: #7c8ea5;
  --color-ns-yellow: #f5cd55;
  --color-ns-green: #c6f56f;
  --color-ns-red: #ffb9a2;
  --color-ns-cyan: #83e7ee;
  --text-heading-1: 4.25rem;
  --text-heading-1--line-height: 110%;
  --text-heading-2: 3.25rem;
  --text-heading-2--line-height: 120%;
  --text-heading-3: 2.5rem;
  --text-heading-3--line-height: 120%;
  --text-heading-4: 2rem;
  --text-heading-4--line-height: 130%;
  --text-heading-5: 1.5rem;
  --text-heading-5--line-height: 140%;
  --text-heading-6: 1.25rem;
  --text-heading-6--line-height: 140%;
  --text-tagline-1: 1rem;
  --text-tagline-1--line-height: 150%;
  --text-tagline-2: .875rem;
  --text-tagline-2--line-height: 150%;
  --text-tagline-3: .75rem;
  --text-tagline-3--line-height: 150%;
  --text-tagline-new: 1.125rem;
  --text-tagline-new--line-height: 150%;
  --ease-bouncy: cubic-bezier(.34, 1.42, .64, 1);
  --stack-cards-gap: 2rem;
}

.showcase-section h1,
.showcase-section h2,
.showcase-section h3,
.showcase-section h4,
.showcase-section h5,
.showcase-section h6 {
  font-size: inherit;
  font-weight: inherit;

}

.showcase-section h1,
.showcase-section h2,
.showcase-section h3,
.showcase-section h4,
.showcase-section h5,
.showcase-section h6 {
  font-family: var(--font-inter-tight);
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
  color: var(--color-black);

}

.showcase-section .showcase-heading {
  font-size: calc(var(--text-heading-4) * 0.82);
  line-height: var(--tw-leading, var(--text-heading-4--line-height));
  font-weight: 600;
}

@media (min-width: 40rem) {
  .showcase-section .showcase-heading {
    font-size: calc(var(--text-heading-3) * 0.82);
    line-height: var(--tw-leading, var(--text-heading-3--line-height));
  }
}

@media (min-width: 48rem) {
  .showcase-section .showcase-heading {
    font-size: calc(var(--text-heading-2) * 0.82);
    line-height: var(--tw-leading, var(--text-heading-2--line-height));
  }
}

@media (min-width: 80rem) {
  .showcase-section .showcase-heading {
    font-size: calc(var(--text-heading-1) * 0.82);
    line-height: var(--tw-leading, var(--text-heading-1--line-height));
  }
}

.showcase-section .showcase-intro {
  min-height: 0;
}

.showcase-section h2 {
  font-size: var(--text-heading-5);
  line-height: var(--tw-leading, var(--text-heading-5--line-height));

}

@media (min-width: 40rem) {
  .showcase-section h2 {
    font-size: var(--text-heading-4);
    line-height: var(--tw-leading, var(--text-heading-4--line-height));

  }
}

@media (min-width: 48rem) {
  .showcase-section h2 {
    font-size: var(--text-heading-3);
    line-height: var(--tw-leading, var(--text-heading-3--line-height));

  }
}

@media (min-width: 80rem) {
  .showcase-section h2 {
    font-size: var(--text-heading-2);
    line-height: var(--tw-leading, var(--text-heading-2--line-height));

  }
}

.showcase-section h3 {
  font-size: var(--text-heading-5);
  line-height: var(--tw-leading, var(--text-heading-5--line-height));

}

@media (min-width: 48rem) {
  .showcase-section h3 {
    font-size: var(--text-heading-4);
    line-height: var(--tw-leading, var(--text-heading-4--line-height));

  }
}

@media (min-width: 80rem) {
  .showcase-section h3 {
    font-size: var(--text-heading-3);
    line-height: var(--tw-leading, var(--text-heading-3--line-height));

  }
}

.showcase-section h4 {
  font-size: var(--text-heading-4);
  line-height: var(--tw-leading, var(--text-heading-4--line-height));

}

.showcase-section h5 {
  font-size: var(--text-heading-5);
  line-height: var(--tw-leading, var(--text-heading-5--line-height));

}

.showcase-section h6 {
  font-size: var(--text-heading-6);
  line-height: var(--tw-leading, var(--text-heading-6--line-height));

}

.showcase-section p {
  font-size: var(--text-tagline-2);
  line-height: var(--tw-leading, var(--text-tagline-2--line-height));
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
  color: #0d0d1299;

}

@supports (color: color-mix(in lab, red, red)) {
  .showcase-section p {
    color: color-mix(in oklab, var(--color-background-14) 60%, transparent);

  }
}

@media (min-width: 40rem) {
  .showcase-section p {
    font-size: var(--text-tagline-1);
    line-height: var(--tw-leading, var(--text-tagline-1--line-height));

  }
}

.showcase-section .pointer-events-none {
  pointer-events: none;

}

.showcase-section .absolute {
  position: absolute;

}

.showcase-section .relative {
  position: relative;

}

.showcase-section .inset-0 {
  inset: 0;

}

.showcase-section .top-0 {
  top: 0;

}

.showcase-section .top-1\/2 {
  top: 50%;

}

.showcase-section .top-\[145\%\] {
  top: 145%;

}

.showcase-section .top-full {
  top: 100%;

}

.showcase-section .right-0 {
  right: 0;

}

.showcase-section .bottom-0 {
  bottom: 0;

}

.showcase-section .left-0 {
  left: 0;

}

.showcase-section .left-1\/2 {
  left: 50%;

}

.showcase-section .z-10 {
  z-index: 10;

}

.showcase-section .main-container {
  max-width: 1290px;
  padding-inline: calc(var(--spacing) * 5);
  margin-inline: auto;

}

@media (min-width: 1440px) {
  .showcase-section .main-container {
    padding-inline: 0;

  }
}

.showcase-section .-mt-25 {
  margin-top: calc(var(--spacing) * -25);

}

.showcase-section .ml-10 {
  margin-left: calc(var(--spacing) * 10);

}

.showcase-section .block {
  display: block;

}

.showcase-section .flex {
  display: flex;

}

.showcase-section .hidden {
  display: none;

}

.showcase-section .inline-block {
  display: inline-block;

}

.showcase-section .inline-flex {
  display: inline-flex;

}

.showcase-section .size-6 {
  width: calc(var(--spacing) * 6);
  height: calc(var(--spacing) * 6);

}

.showcase-section .size-11 {
  width: calc(var(--spacing) * 11);
  height: calc(var(--spacing) * 11);

}

.showcase-section .size-14 {
  width: calc(var(--spacing) * 14);
  height: calc(var(--spacing) * 14);

}

.showcase-section .size-40 {
  width: calc(var(--spacing) * 40);
  height: calc(var(--spacing) * 40);

}

.showcase-section .size-full {
  width: 100%;
  height: 100%;

}

.showcase-section .h-8 {
  height: calc(var(--spacing) * 8);

}

.showcase-section .h-10 {
  height: calc(var(--spacing) * 10);

}

.showcase-section .h-16 {
  height: calc(var(--spacing) * 16);

}

.showcase-section .h-24 {
  height: calc(var(--spacing) * 24);

}

.showcase-section .h-81\.25 {
  height: calc(var(--spacing) * 81.25);

}

.showcase-section .h-\[76vh\] {
  height: 76vh;

}

.showcase-section .h-\[300vw\] {
  height: 300vw;

}

.showcase-section .h-full {
  height: 100%;

}

.showcase-section .h-px {
  height: 1px;

}

.showcase-section .max-h-500 {
  max-height: calc(var(--spacing) * 500);

}

.showcase-section .w-10 {
  width: calc(var(--spacing) * 10);

}

.showcase-section .w-13\.5 {
  width: calc(var(--spacing) * 13.5);

}

.showcase-section .w-25 {
  width: calc(var(--spacing) * 25);

}

.showcase-section .w-88\.5 {
  width: calc(var(--spacing) * 88.5);

}

.showcase-section .w-\[80\%\] {
  width: 80%;

}

.showcase-section .w-\[300vw\] {
  width: 300vw;

}

.showcase-section .w-full {
  width: 100%;

}

.showcase-section .w-max {
  width: max-content;

}

.showcase-section .max-w-41\.75 {
  max-width: calc(var(--spacing) * 41.75);

}

.showcase-section .max-w-45 {
  max-width: calc(var(--spacing) * 45);

}

.showcase-section .max-w-500 {
  max-width: calc(var(--spacing) * 500);

}

.showcase-section .shrink-0 {
  flex-shrink: 0;

}

.showcase-section .-translate-x-1\/2 {
  --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);

}

.showcase-section .-translate-y-1\/2 {
  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);

}

.showcase-section .cursor-pointer {
  cursor: pointer;

}

.showcase-section .flex-col {
  flex-direction: column;

}

.showcase-section .items-center {
  align-items: center;

}

.showcase-section .items-start {
  align-items: flex-start;

}

.showcase-section .justify-between {
  justify-content: space-between;

}

.showcase-section .justify-center {
  justify-content: center;

}

.showcase-section :where(.space-y-1 > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
  margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));

}

.showcase-section :where(.space-y-4 > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));

}

.showcase-section :where(.space-y-8 > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));

}

.showcase-section .gap-x-3 {
  column-gap: calc(var(--spacing) * 3);

}

.showcase-section .gap-x-4 {
  column-gap: calc(var(--spacing) * 4);

}

.showcase-section .gap-x-8 {
  column-gap: calc(var(--spacing) * 8);

}

.showcase-section .gap-x-16 {
  column-gap: calc(var(--spacing) * 16);

}

.showcase-section .gap-x-20 {
  column-gap: calc(var(--spacing) * 20);

}

.showcase-section :where(.-space-x-6 > :not(:last-child)) {
  --tw-space-x-reverse: 0;
  margin-inline-start: calc(calc(var(--spacing) * -6) * var(--tw-space-x-reverse));
  margin-inline-end: calc(calc(var(--spacing) * -6) * calc(1 - var(--tw-space-x-reverse)));

}

.showcase-section .gap-y-4 {
  row-gap: calc(var(--spacing) * 4);

}

.showcase-section .gap-y-8 {
  row-gap: calc(var(--spacing) * 8);

}

.showcase-section .gap-y-10 {
  row-gap: calc(var(--spacing) * 10);

}

.showcase-section .gap-y-15 {
  row-gap: calc(var(--spacing) * 15);

}

.showcase-section .overflow-hidden {
  overflow: hidden;

}

.showcase-section .rounded-full {
  border-radius: 3.40282e38px;

}

.showcase-section .rounded-md {
  border-radius: var(--radius-md);

}

.showcase-section .border {
  border-style: var(--tw-border-style);
  border-width: 1px;

}

.showcase-section .border-stroke-1 {
  border-color: var(--color-stroke-1);

}

.showcase-section .bg-accent\/60 {
  background-color: #fcfcfc99;

}

@supports (color: color-mix(in lab, red, red)) {
  .showcase-section .bg-accent\/60 {
    background-color: color-mix(in oklab, var(--color-accent) 60%, transparent);

  }
}

.showcase-section .bg-primary-500 {
  background-color: var(--color-primary-500);

}

.showcase-section .bg-stroke-3 {
  background-color: var(--color-stroke-3);

}

.showcase-section .bg-white {
  background-color: var(--color-white);

}

.showcase-section .bg-linear-to-b {
  --tw-gradient-position: to bottom;

}

@supports (background-image: linear-gradient(in lab, red, red)) {
  .showcase-section .bg-linear-to-b {
    --tw-gradient-position: to bottom in oklab;

  }
}

.showcase-section .bg-linear-to-b {
  background-image: linear-gradient(var(--tw-gradient-stops));

}

.showcase-section .bg-linear-to-l {
  --tw-gradient-position: to left;

}

@supports (background-image: linear-gradient(in lab, red, red)) {
  .showcase-section .bg-linear-to-l {
    --tw-gradient-position: to left in oklab;

  }
}

.showcase-section .bg-linear-to-l {
  background-image: linear-gradient(var(--tw-gradient-stops));

}

.showcase-section .bg-linear-to-r {
  --tw-gradient-position: to right;

}

@supports (background-image: linear-gradient(in lab, red, red)) {
  .showcase-section .bg-linear-to-r {
    --tw-gradient-position: to right in oklab;

  }
}

.showcase-section .bg-linear-to-r {
  background-image: linear-gradient(var(--tw-gradient-stops));

}

.showcase-section .bg-linear-to-t {
  --tw-gradient-position: to top;

}

@supports (background-image: linear-gradient(in lab, red, red)) {
  .showcase-section .bg-linear-to-t {
    --tw-gradient-position: to top in oklab;

  }
}

.showcase-section .bg-linear-to-t {
  background-image: linear-gradient(var(--tw-gradient-stops));

}

.showcase-section .from-background-13 {
  --tw-gradient-from: var(--color-background-13);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));

}

.showcase-section .from-white {
  --tw-gradient-from: var(--color-white);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));

}

.showcase-section .to-background-4 {
  --tw-gradient-to: var(--color-background-4);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));

}

.showcase-section .to-transparent {
  --tw-gradient-to: transparent;
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));

}

.showcase-section .stroke-black {
  stroke: var(--color-black);

}

.showcase-section .object-contain {
  object-fit: contain;

}

.showcase-section .object-cover {
  object-fit: cover;

}

.showcase-section .p-1\.5 {
  padding: calc(var(--spacing) * 1.5);

}

.showcase-section .p-4 {
  padding: calc(var(--spacing) * 4);

}

.showcase-section .p-6 {
  padding: calc(var(--spacing) * 6);

}

.showcase-section .py-1\.5 {
  padding-block: calc(var(--spacing) * 1.5);

}

.showcase-section .pt-30 {
  padding-top: calc(var(--spacing) * 30);

}

.showcase-section .pr-\[6px\] {
  padding-right: 6px;

}

.showcase-section .pb-8 {
  padding-bottom: calc(var(--spacing) * 8);

}

.showcase-section .pb-14 {
  padding-bottom: calc(var(--spacing) * 14);

}

.showcase-section .pl-6 {
  padding-left: calc(var(--spacing) * 6);

}

.showcase-section .text-center {
  text-align: center;

}

.showcase-section .font-inter-tight {
  font-family: var(--font-inter-tight);

}

.showcase-section .text-heading-4 {
  font-size: var(--text-heading-4);
  line-height: var(--tw-leading, var(--text-heading-4--line-height));

}

.showcase-section .text-heading-5 {
  font-size: var(--text-heading-5);
  line-height: var(--tw-leading, var(--text-heading-5--line-height));

}

.showcase-section .text-tagline-1 {
  font-size: var(--text-tagline-1);
  line-height: var(--tw-leading, var(--text-tagline-1--line-height));

}

.showcase-section .text-tagline-3 {
  font-size: var(--text-tagline-3);
  line-height: var(--tw-leading, var(--text-tagline-3--line-height));

}

.showcase-section .text-\[44px\] {
  font-size: 44px;

}

.showcase-section .leading-none {
  --tw-leading: 1;
  line-height: 1;

}

.showcase-section .font-medium {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);

}

.showcase-section .text-nowrap {
  text-wrap: nowrap;

}

.showcase-section .text-accent {
  color: var(--color-accent);

}

.showcase-section .text-black {
  color: var(--color-black);

}

.showcase-section .text-secondary {
  color: var(--color-secondary);

}

.showcase-section .uppercase {
  text-transform: uppercase;

}

.showcase-section .shadow-\[0_8px_12px_0_rgba\(0\,0\,0\,0\.16\)\] {
  --tw-shadow: 0 8px 12px 0 var(--tw-shadow-color, #00000029);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);

}

.showcase-section .ring-2 {
  --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);

}

.showcase-section .ring-white {
  --tw-ring-color: var(--color-white);

}

.showcase-section .transition-transform {
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));

}

.showcase-section .duration-400 {
  --tw-duration: .4s;
  transition-duration: .4s;

}

.showcase-section .ease-bouncy {
  --tw-ease: var(--ease-bouncy);
  transition-timing-function: var(--ease-bouncy);

}

.showcase-section .will-change-transform {
  will-change: transform;

}

@media (hover: hover) {
  .showcase-section .group-hover\:rotate-45:is(:where(.group):hover *) {
    rotate: 45deg;

  }
}

.showcase-section .active\:scale-\[0\.98\]:active {
  scale: .98;

}

@media not all and (min-width: 376px) {
  .showcase-section .max-\[376px\]\:h-\[70vh\] {
    height: 70vh;

  }
}

@media not all and (min-width: 48rem) {
  .showcase-section .max-md\:justify-between {
    justify-content: space-between;

  }
}

@media not all and (min-width: 48rem) {
  .showcase-section .max-md\:gap-x-5 {
    column-gap: calc(var(--spacing) * 5);

  }
}

@media (min-width: 40rem) {
  .showcase-section .sm\:w-24 {
    width: calc(var(--spacing) * 24);

  }
}

@media (min-width: 48rem) {
  .showcase-section .md\:block {
    display: block;

  }
}

@media (min-width: 48rem) {
  .showcase-section .md\:hidden {
    display: none;

  }
}

@media (min-width: 48rem) {
  .showcase-section .md\:h-\[102vh\] {
    height: 102vh;

  }
}

@media (min-width: 48rem) {
  .showcase-section .md\:w-auto {
    width: auto;

  }
}

@media (min-width: 48rem) {
  .showcase-section .md\:flex-row {
    flex-direction: row;

  }
}

@media (min-width: 48rem) {
  .showcase-section .md\:gap-y-0 {
    row-gap: 0;

  }
}

@media (min-width: 48rem) {
  .showcase-section .md\:gap-y-10 {
    row-gap: calc(var(--spacing) * 10);

  }
}

@media (min-width: 48rem) {
  .showcase-section .md\:pt-35 {
    padding-top: calc(var(--spacing) * 35);

  }
}

@media (min-width: 48rem) {
  .showcase-section .md\:pb-0 {
    padding-bottom: 0;

  }
}

@media (min-width: 48rem) {
  .showcase-section .md\:text-left {
    text-align: left;

  }
}

@media (min-width: 64rem) {
  .showcase-section .lg\:block {
    display: block;

  }
}

@media (min-width: 64rem) {
  .showcase-section .lg\:h-96 {
    height: calc(var(--spacing) * 96);

  }
}

@media (min-width: 64rem) {
  .showcase-section .lg\:w-\[30\%\] {
    width: 30%;

  }
}

@media (min-width: 64rem) {
  .showcase-section .lg\:w-\[70\%\] {
    width: 70%;

  }
}

@media (min-width: 64rem) {
  .showcase-section .lg\:w-full {
    width: 100%;

  }
}

@media (min-width: 64rem) {
  .showcase-section .lg\:max-w-39 {
    max-width: calc(var(--spacing) * 39);

  }
}

@media (min-width: 64rem) {
  .showcase-section .lg\:flex-col {
    flex-direction: column;

  }
}

@media (min-width: 64rem) {
  .showcase-section .lg\:flex-row {
    flex-direction: row;

  }
}

@media (min-width: 64rem) {
  .showcase-section .lg\:items-start {
    align-items: flex-start;

  }
}

@media (min-width: 64rem) {
  .showcase-section .lg\:justify-between {
    justify-content: space-between;

  }
}

@media (min-width: 64rem) {
  .showcase-section .lg\:justify-start {
    justify-content: flex-start;

  }
}

@media (min-width: 64rem) {
  .showcase-section .lg\:gap-y-0 {
    row-gap: 0;

  }
}

@media (min-width: 64rem) {
  .showcase-section .lg\:gap-y-4 {
    row-gap: calc(var(--spacing) * 4);

  }
}

@media (min-width: 64rem) {
  .showcase-section .lg\:pt-48 {
    padding-top: calc(var(--spacing) * 48);

  }
}

@media (min-width: 64rem) {
  .showcase-section .lg\:pb-8 {
    padding-bottom: calc(var(--spacing) * 8);

  }
}

@media (min-width: 80rem) {
  .showcase-section .xl\:-mt-40 {
    margin-top: calc(var(--spacing) * -40);

  }
}

@media (min-width: 80rem) {
  .showcase-section .xl\:h-102\.25 {
    height: calc(var(--spacing) * 102.25);

  }
}

@media (min-width: 80rem) {
  .showcase-section .xl\:gap-x-28 {
    column-gap: calc(var(--spacing) * 28);

  }
}

.showcase-section .ns-shape-1:before {
  content: "";
}

.showcase-section .ns-shape-8:before {
  content: "";
}

.showcase-section .ns-shape-12:before {
  content: "";
}

.showcase-section .ns-shape-18:before {
  content: "";
}

.showcase-section .ns-shape-24:before {
  content: "";
}

.showcase-section .ns-shape-28:before {
  content: "";
}

.showcase-section .ns-shape-36:before {
  content: "";
}

.showcase-section .ns-shape-42:before {
  content: "";
}

.showcase-section .ns-shape-48:before {
  content: "";
}

.showcase-section .ns-shape-56:before {
  content: "";
}

.showcase-section .ns-shape-60:before {
  content: "";
}

.showcase-section .ns-shape-70:before {
  content: "";
}

.showcase-section .ns-shape-72:before {
  content: "";
}

.showcase-section .ns-shape-84:before {
  content: "";
}

/* =========================================================
   Behnagroup adaptations (font, background, RTL text flow).
   The rotating wheel geometry is intentionally NOT mirrored.
   ========================================================= */
.showcase-section {
  --font-inter-tight: "YekanBakh", sans-serif;
  --font-sans: "YekanBakh", sans-serif;
  background-color: var(--color-background-13);
  font-family: "YekanBakh", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow-x: clip;
}

/* T2: "py-1.5 pr-[6px] pl-6" -> logical padding so the icon stays on the end side */
.showcase-section .btn-pad {
  padding-block: calc(var(--spacing) * 1.5);
  padding-inline-start: calc(var(--spacing) * 6);
  padding-inline-end: 6px;
}

/* Arrow icons: mirror the diagonal for RTL */
[dir="rtl"] .showcase-section .group:hover .group-hover\:rotate-45 {
  rotate: -45deg;
}

@media (min-width: 48rem) {
  /* T2: md:text-left  (start-aligned text) */
  [dir="rtl"] .showcase-section .md\:text-left {
    text-align: right;
  }
}

.showcase-section .btn-mark {
  background-color: var(--color-brand-yellow, #f0bb1e);
  background-image: none;
}

.showcase-section .bg-primary-500 {
  background-color: var(--color-primary-500);
  background-image:
    radial-gradient(78% 52% at 100% 0%, rgba(240, 187, 30, 0.34), transparent 62%),
    linear-gradient(145deg, #3c4f80 0%, #31426c 55%, #1f2a46 100%);
}

.showcase-section .btn-mark img {
  width: 1.65rem;
  height: 1.65rem;
  object-fit: contain;
}