@import url("https://db.onlinewebfonts.com/c/c674327583edf122ed9b87155795fb72?family=MarcoPolo+W00");
@import url("https://fonts.cdnfonts.com/css/bogart");
@import url("https://fonts.cdnfonts.com/css/hasiant");

@import "tailwindcss";
@plugin "@iconify/tailwind4";

@theme {
  --font-macropolo: "MarcoPolo W00";
  --font-bogart: "Bogart", sans-serif;
  --font-hasiant: "Hasiant", sans-serif;

  /*start Define custome color theme*/
  --color-gray-100: #f3efe8;
  --color-gray-950: #0d0d0d;

  --color-teal-50: oklch(91.77% 0.1315 195.11);
  --color-teal-300: #299a9e;
  --color-teal-600: oklch(44.06% 0.0723 204.05);

  --color-amber-300: #fb991e;
  --color-amber-600: oklch(76.14% 0.1504 43.99);

  --color-azure-blue: oklch(55.31% 0.121 247.37);
  --color-vivid-voilet: oklch(44.77% 0.1995 294.04);
  --color-rust-red: oklch(53.92% 0.1509 34.1);

  --color-blue-50: oklch(95.91% 0.0069 174.38);
  --color-blue-200: oklch(78.32% 0.0678 220.75);
  --color-blue-400: oklch(59.41% 0.0905 219.07);
  --color-blue-600: oklch(0.5635 0.2408 260.82);

  --color-pink-500: oklch(61.63% 0.1583 348.39);

  /*end Define custome color theme*/
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #f2f2f2 inset !important;
  -webkit-text-fill-color: --color-base !important;
}

/* html {
  scroll-behavior: smooth;
} */
.scroll-touch {
  -webkit-overflow-scrolling: touch;
}
.scroll-snap-y {
  scroll-snap-type: y mandatory;
}

.scroll-snap-x {
  scroll-snap-type: x mandatory;
}
/*============== start code for header ===================== */

.header-hide {
  opacity: 0;
  @apply duration-500;
}
.header-visible {
  opacity: 1;
  @apply bg-white duration-800;
}

/* clears the ‘X’ from Internet Explorer */
input[type="search"]::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}
input[type="search"]::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}
/* clears the ‘X’ from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

/* Hide scrollbar for all browsers */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* ===================== end code for header ===================== */

h1,
.heading-title {
  @apply font-macropolo text-3xl font-normal tracking-wide uppercase md:text-5xl/10;
}

h1.med,
.heading-title.med {
  @apply font-macropolo text-2xl/6 font-normal tracking-wide uppercase md:text-3xl;
}

h1.productTitle {
  @apply font-bogart text-xl capitalize;
}
.largeTitle {
  @apply font-macropolo text-4xl/8 font-medium -tracking-wide uppercase md:text-6xl/14;
}

h2 {
  @apply font-bogart text-2xl/6 md:text-3xl;
}
h2.vision {
  @apply font-bogart text-lg/4.5 font-light -tracking-wider md:text-3xl;
}
h2.macropolo {
  @apply font-macropolo text-3xl uppercase md:text-4xl;
}
h3 {
  @apply font-bogart text-xl/5 -tracking-wide md:text-3xl/8;
}
h3.med {
  @apply font-bogart text-xl/5 tracking-wide md:text-xl/6;
}
h4,
.headingh4 {
  @apply font-bogart text-xl/5 md:text-2xl;
}
h4.med,
.headingh4med {
  @apply font-bogart text-base/4;
}

p.label {
  @apply text-xs font-medium;
}
.storyHeading {
  @apply font-bogart text-lg/4 font-normal -tracking-wider md:text-2xl/6;
}

.storyTitle {
  @apply font-bogart text-2xl/6 font-normal -tracking-wider md:text-4xl/8;
}
.storySubTitle {
  @apply text-gray-950/75;
}
address {
  @apply not-italic;
}

button {
  cursor: pointer;
}
.staticPages ul li,
.staticPages p,
.staticPages address {
  @apply text-xs md:text-sm;
}

.btn-outline {
  @apply relative border border-gray-950 px-4 py-3 text-sm/5 font-medium tracking-widest text-gray-950 uppercase transition-all duration-300 hover:bg-gray-950 hover:text-white;
}
.btn-outline i {
  @apply relative top-0.5;
}
.btn-outline.white {
  @apply border-white text-white hover:bg-white hover:text-gray-950;
}
.btn-solid.gray {
  @apply bg-gray-950 p-4 text-sm/5 font-medium tracking-widest text-white uppercase;
}
.btn-link {
  @apply inline-flex py-2 text-sm/5 capitalize underline decoration-1 underline-offset-4 transition-all duration-200 hover:decoration-2 hover:underline-offset-6;
}
.btn-wrap {
  @apply relative w-full pb-1.5;
}
.btn-text-link {
  @apply inline-flex py-2 text-xs underline underline-offset-4 hover:decoration-amber-600;
}

.btn-wrap span {
  content: "";
  left: -6px;
  bottom: 0;
  height: 40px;
  @apply absolute w-full bg-amber-600;
}
.btn-wrap.teal .btn-hero {
  @apply text-white hover:text-teal-300;
}
.btn-wrap.teal span {
  @apply absolute w-full bg-teal-300;
}
.btn-hero {
  @apply relative z-3 w-full cursor-pointer bg-gray-950 p-3 font-medium text-white uppercase duration-400 hover:text-amber-600;
}
.btn-icon-link {
  @apply inline-flex gap-1 border-b py-1 pt-2 align-middle text-xs;
}
.btn-icon-link i {
  @apply mt-0.5;
}
.btn-icon-link:hover {
  @apply hover:border-amber-600;
}
.btn-icon-link:hover i {
  @apply text-amber-600;
}

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

  .heading {
    font-family: var(--font-macropolo);
  }
  .bgnoise {
    background:
      radial-gradient(
        circle at 400% 400%,
        rgba(255, 255, 255, 0.8),
        rgba(255, 255, 255, 0.8)
      ),
      url("data:image/svg+xml,%3Csvg viewBox='0 0 700 700' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    backdrop-filter: contrast(100%) brightness(100%) invert(100%);
  }

  .hairline {
    mask-image: url("../public/images/hairlines-wider.svg");
    background-repeat: repeat;
    mask-size: 6px;
  }
  .hairline-12 {
    mask-image: url("../public/images/hairlines-wider.svg");
    background-repeat: repeat;
    mask-size: 12px;
  }

  .hairline-thred-color {
    mask-image: url("../public/images/hairlines-wider.svg");
    background-repeat: no-repeat;
    mask-size: 100%;
  }

  input {
    @apply appearance-none focus:ring-0 focus:outline-none;
  }
  select {
    @apply col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-1.5 pr-8 pl-3 text-base text-gray-900 outline-gray-300 outline-none focus:outline-0 md:text-sm;
  }

  .wrapper {
    @apply mx-auto w-[90%];
  }
  .storyWrapper {
    @apply mx-auto w-[90%] md:w-[80%];
  }

  .footer-link {
    @apply flex flex-col gap-1;
  }
  .footer-link li {
    @apply flex;
  }
  .footer-link a {
    @apply inline-flex py-1;
  }
  .footer-link a:not(:first-child) {
    @apply relative pl-5 text-sm font-medium;
  }
  .footer-link a:not(:first-child):before {
    content: "";
    @apply absolute top-1.75 left-0 h-1.5 w-1.5 rounded-full bg-white;
  }
  .footer-link a:hover {
    @apply underline underline-offset-5;
  }
  footer a {
    @apply text-white hover:underline hover:underline-offset-4;
  }

  .modal-backdrop {
    @apply fixed top-0 left-0 z-40 flex h-screen w-screen items-center justify-center bg-gray-500/75 backdrop-blur-sm backdrop-opacity-75 backdrop-filter;
  }
  .modal-wrap {
    @apply relative z-50 w-md min-w-75 rounded-md bg-white p-5 shadow-2xl;
  }

  .img-responsive {
    width: 100%;
    height: auto;
    max-width: 100%;
    min-width: 100%;
  }
  .is-sticky {
    @apply bg-cyan-500;
  }

  .amim-chakra {
    animation: chakraim 60s infinite linear;
    background-image: url("../public/images/chakra.webp");
    background-size: cover;
    @apply h-95 w-95 md:h-180 md:w-180;
  }
  @-webkit-keyframes chakraim {
    from {
      -webkit-transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(359deg);
    }
  }

  .btn-dual-style {
    @apply relative flex h-12 w-full cursor-pointer flex-col hover:opacity-90;
  }
  .btn-dual-style span {
    mask-image: url("../public/images/hairlines-wider.svg");
    background-repeat: repeat;
    mask-size: 6px;
    @apply absolute -bottom-1.5 -left-1.5 z-2 h-10.5 w-full;
  }
  .btn-dual-style span.amber {
    @apply bg-amber-600;
  }
  .btn-dual-style span.gray {
    @apply bg-gray-950;
  }
  .btn-dual-style span.teal {
    @apply bg-teal-300;
  }
  .btn-dual-style span.white {
    @apply bg-white;
  }
  .btn-dual-style span.blue {
    @apply bg-blue-600;
  }

  .btn-dual-style button,
  .btn-dual-style a {
    @apply relative z-20 flex h-12.5 w-full items-center justify-center bg-gray-950 font-medium tracking-wider text-white uppercase;
  }

  .hover-amber:hover button,
  .hover-amber:hover a {
    @apply hover:text-amber-600;
  }

  .hover-gray:hover button,
  .hover-gray:hover a {
    @apply hover:text-gray-300;
  }

  .hover-teal:hover button,
  .hover-teal:hover a {
    @apply hover:text-teal-300;
  }

  .moq-blog-wrap {
    background-size: 100% 100%;
    background-position:
      0px 0px,
      0px 0px,
      0px 0px,
      0px 0px,
      0px 0px,
      0px 0px,
      0px 0px,
      0px 0px,
      0px 0px,
      0px 0px,
      0px 0px;
    background-image:
      radial-gradient(
        18% 28% at 24% 50%,
        var(--color-gray-100) 5%,
        #073aff00 100%
      ),
      radial-gradient(
        18% 28% at 18% 71%,
        var(--color-white) 5%,
        #073aff00 100%
      ),
      radial-gradient(
        70% 53% at 36% 76%,
        var(--color-amber-300) 50%,
        #073aff00 100%
      ),
      radial-gradient(
        42% 53% at 45% 94%,
        var(--color-white) 10%,
        #073aff00 100%
      ),
      radial-gradient(
        42% 53% at 34% 72%,
        var(--color-white) 10%,
        #073aff00 100%
      ),
      radial-gradient(
        18% 28% at 35% 87%,
        var(--color-gray-100) 20%,
        #073aff00 100%
      ),
      radial-gradient(
        31% 43% at 7% 98%,
        var(--color-amber-600) 50%,
        #073aff00 100%
      ),
      radial-gradient(
        21% 37% at 72% 23%,
        var(--color-gray-100) 10%,
        #073aff00 100%
      ),
      radial-gradient(
        35% 56% at 91% 74%,
        var(--color-amber-300) 80%,
        #073aff00 100%
      ),
      radial-gradient(
        74% 86% at 37% 38%,
        var(--color-gray-100) 20%,
        var(--color-white) 100%
      ),
      linear-gradient(
        135deg,
        var(--color-gray-100) 0%,
        var(--color-amber-600) 100%
      );
  }

  .mob-noise {
    background-image: url("../public/images/bg-noise.svg");
  }
  .mob-noise-none {
    background-image: none !important;
    opacity: 0;
  }

  .icon-fabric-color {
    mask-image: url("../public/custom_product/icon-color-flower.svg");
    mask-size: 100%;
    mask-repeat: no-repeat;
  }

  .blog-wrap {
    @apply p-2;
  }
  .blog-home .blog-item {
    @apply relative top-0 flex flex-col gap-4 border border-dashed border-gray-950 p-4 transition-all duration-300 hover:-top-4 hover:border-white md:p-8;
  }
  .blog-home .title {
    @apply font-bogart text-sm font-medium md:text-2xl/6;
  }
  .blog-home .bg-hair {
    background-image: url("../public/icons/hairlines-wider.svg");
    background-size: 8px;
  }
  .bg-hair {
    background-image: url("../public/icons/hairlines-wider.svg");
    background-size: 8px;
  }
  .swiper {
    z-index: 0 !important;
  }
  .btn-swiper-control {
    @apply hidden h-10 w-16 items-center justify-center gap-4 border border-gray-950 duration-300 hover:border-white sm:flex;
  }
  .bg-home-lotus {
    mask-image: url("../public/images/lotus-hairline.webp");
    mask-size: 100%;
    @apply absolute bottom-0 left-0 h-full w-full bg-amber-600;
  }
  .tb-text {
    writing-mode: tb;
  }
  .swiper {
    width: 100%;
    max-width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .moq-img-swiper .swiper-pagination-bullet,
  .product-img-swiper .swiper-pagination-bullet,
  .byb-img-swiper .swiper-pagination-bullet,
  .product-img-swiper .swiper-pagination-bullet {
    width: 12px !important;
    height: 12px !important;
    background-color: var(--color-base);
    border: 2px solid var(--color-white);
    opacity: 0.5;
    box-shadow: 1px 1px 2px var(--color-base);
  }
  .moq-img-swiper .swiper-pagination-bullet-active,
  .product-img-swiper .swiper-pagination-bullet-active,
  .byb-img-swiper .swiper-pagination-bullet-active,
  .bullet-white .swiper-pagination-bullet-active,
  .product-img-swiper .swiper-pagination-bullet-active {
    background-color: var(--color-white) !important;
    opacity: 1;
  }

  .product-img-swiper .swiper-button-next,
  .product-img-swiper .swiper-button-prev {
    width: 2.5rem !important;
    height: 2.5rem !important;
    color: var(--color-white) !important;
    background-color: var(--color-base) !important;
  }
  .product-img-swiper .swiper-button-next:after,
  .product-img-swiper .swiper-button-prev:after {
    font-size: 1.5rem !important;
  }

  .bg-fabric-flower {
    background-image: url("../public/icons/icon-fabric-flower.webp");
    background-size: 100%;
    @apply inline-flex h-8 w-8;
  }
  .video-responsive {
    min-width: 100%;
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  .swiper-video {
    transform: none !important;
  }
  video::-webkit-media-controls-fullscreen-button {
    display: none !important;
  }

  /* Hide the "more options" / 3 dots button */
  video::-webkit-media-controls-overflow-button {
    display: none !important;
  }

  /* Optional: hide picture-in-picture button too */
  video::-webkit-media-controls-picture-in-picture-button {
    display: none !important;
  }
  .thread-button-whole {
    mask-image: url("../public/icons/icon-btn-thread-hole.svg");
    mask-size: 100%;
    @apply mx-8 inline-flex h-6 w-6 justify-center align-middle;
  }
  .icon-thread-eye {
    mask-image: url("../public/icons/icon-thread-eye.svg");
    mask-size: 100%;
  }
  .icon-thread-mashroom {
    mask-image: url("../public/icons/icon-thread-mashroom.svg");
    mask-size: 100%;
  }
  .icon-bud-flower-thread {
    mask-image: url("../public/icons/icon-bud-flower-thread.svg");
    mask-size: 100%;
  }
  .icon-vision-eye {
    mask-image: url("../public/icons/icon-vision-eye.svg");
    mask-size: 100%;
  }

  .icon-begin-crafting {
    mask-image: url("../public/icons/icon-begin-crafting.svg");
    mask-size: 100%;
  }

  .icon-bright-idea {
    mask-image: url("../public/icons/icon-bright-idea.svg");
    mask-size: 100%;
  }

  .icon-big-open-flower {
    mask-image: url("../public/icons/icon-big-open-flower.png");
    mask-size: 100%;
  }

  .icon-cc-fabric-flower {
    mask-image: url("../public/custom_product/icon-color-flower.svg");
    mask-size: 100%;
    mask-repeat: no-repeat;
  }

  .marquee-text {
    float: left;
  }
  .marquee-text span {
    animation: marquee-animation 10s infinite linear;
    position: relative;
  }

  @keyframes marquee-animation {
    from {
      left: 0;
    }
    to {
      left: -100%;
    }
  }
  .swiper-wrapper {
    transition-timing-function: linear;
  }

  .btn-style-gray {
    @apply border-gray-950 text-gray-950 hover:bg-gray-950 hover:text-white;
  }
  .btn-style-white {
    @apply border-white text-white hover:bg-white hover:text-gray-950;
  }
  .btn-style-silver {
    @apply border-gray-950/50 bg-gray-200 text-gray-950 hover:bg-gray-950 hover:text-white;
  }

  .cc-products-thumb .swiper-slide {
    @apply pb-10;
  }

  .cc-products-thumb .swiper-pagination-bullet-active,
  .bullet-gray .swiper-pagination-bullet-active {
    background-color: var(--color-white) !important;
    opacity: 1 !important;
  }
  .list-chips {
    @apply flex flex-wrap justify-center gap-2;
  }
  .list-chips li {
    @apply inline-flex border border-dashed border-gray-950 px-6 py-2 text-sm font-medium text-gray-950 duration-300 hover:bg-gray-950 hover:text-white md:text-base;
  }
  .list-chips.teal li {
    @apply border-teal-300 bg-gray-200/50 text-gray-950 hover:bg-gray-950 hover:text-teal-300;
  }

  .range-slider {
    @apply h-1 w-full cursor-pointer appearance-none rounded-2xl bg-transparent;
  }
  .range-slider::-webkit-slider-thumb {
    @apply h-10 w-10 appearance-none rounded-full border-8 border-gray-100 bg-radial from-blue-300 from-20% to-teal-600 shadow-2xl;
  }

  .table-size-chart {
    @apply w-full table-auto border-collapse border-gray-300;
  }

  .table-size-chart th,
  .table-size-chart tr > td:first-child {
    @apply font-bogart border border-gray-300 bg-gray-200/50 p-2 text-sm font-normal capitalize md:p-3 md:text-lg;
  }

  .table-size-chart tr > th:first-child,
  .table-size-chart tr > td:first-child {
    @apply text-left text-wrap break-all md:pl-5;
  }
  .table-size-chart td {
    @apply border border-gray-200 text-center text-xs md:text-base;
  }
  .table-size-chart th,
  .table-size-chart td {
    @apply min-w-20;
  }
  .table-size-chart tr:nth-child(2n + 1) {
    @apply bg-white/50;
  }
  .table-size-chart caption {
    @apply font-bogart bg-gray-950/50 px-2 py-2 text-left text-xl text-white capitalize;
  }

  .single-blog-post h1.blog-heading {
    @apply font-bogart text-2xl font-normal capitalize;
  }
  .blog-single-post-content {
    @apply font-bogart text-lg/8 font-light;
  }

  .blog-single-post-content p {
    @apply mb-5 tracking-wide;
  }

  .project-bg-grad {
    background-size: 100% 100%;
    background-position:
      0px 0px,
      0px 0px,
      0px 0px,
      0px 0px,
      0px 0px,
      0px 0px,
      0px 0px,
      0px 0px,
      0px 0px,
      0px 0px,
      0px 0px;
    background-image:
      radial-gradient(18% 28% at 24% 50%, #cefaffff 7%, #073aff00 100%),
      radial-gradient(
        18% 28% at 18% 71%,
        var(--color-blue-100) 6%,
        #073aff00 100%
      ),
      radial-gradient(
        70% 53% at 36% 76%,
        var(--color-teal-50) 0%,
        #073aff00 100%
      ),
      radial-gradient(42% 53% at 15% 94%, #ffffffff 7%, #073aff00 100%),
      radial-gradient(42% 53% at 34% 72%, #ffffffff 7%, #073aff00 100%),
      radial-gradient(18% 28% at 35% 87%, #ffffffff 7%, #073aff00 100%),
      radial-gradient(31% 43% at 7% 98%, #ffffffff 24%, #073aff00 100%),
      radial-gradient(
        21% 37% at 72% 23%,
        var(--color-azure-blue) 10%,
        #073aff00 100%
      ),
      radial-gradient(
        35% 56% at 91% 74%,
        var(--color-vivid-voilet) 9%,
        #073aff00 100%
      ),
      radial-gradient(
        74% 86% at 67% 38%,
        var(--color-blue-300) 24%,
        #073aff00 100%
      ),
      linear-gradient(
        125deg,
        var(--color-blue-50) 1%,
        var(--color-rust-red) 100%
      );
  }

  .spinner-anim {
    animation: spin 80s linear infinite;
  }
  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  .chip-list {
    @apply flex w-full;
  }
  .chip-list li {
    @apply m-1 inline-flex bg-white/50 px-2 py-1 text-xs text-gray-950;
  }

  .size-fit {
    @apply bg-white;
  }
  .size-fit tr {
    @apply border border-gray-200;
  }
  .size-fit tr th {
    @apply border border-gray-200 text-center;
  }
  .size-fit tr th {
    @apply h-12 w-20 pt-2;
  }
  .size-fit td {
    @apply border border-solid border-gray-200 bg-gray-100/50 px-2 py-2 text-center text-sm hover:bg-blue-100;
  }
  .size-fit td:first-child {
    @apply sticky left-0 border-2 bg-gray-100 text-black;
  }
  .size-fit th,
  .size-fit td:first-child {
    @apply font-bogart z-10 bg-gray-100 px-2 pl-5 text-left text-base/5 font-normal;
  }
  .size-fit tr:nth-child(2n + 1) {
    @apply bg-white/80;
  }
  .size-fit th:first-child,
  .size-fit td:first-child {
    @apply sticky -left-1 z-30 w-30 text-left;
  }
  .fabric-zz-mask {
    --s: 0.4rem;
    width: round(var(--w), 4 * var(--s));
    aspect-ratio: 1;
    --_m: #0000 0 calc(2 * atan(0.5)), #000 0 50%;
    mask: repeating-conic-gradient(from atan(-0.5) at var(--s), var(--_m))
      calc(-1 * var(--s)) calc(2 * var(--s)) / 100% calc(4 * var(--s));
  }

  .technique-animbox:hover .description-box {
    animation: animB2T 0.5s ease-out forwards;
  }

  @keyframes animB2T {
    from {
      bottom: -100%;
    }
    to {
      bottom: 0;
    }
  }

  .gridItems {
    @apply flex flex-wrap justify-center gap-1 pb-4 md:gap-5 md:pb-8;
  }
  .gridItems > div,
  .gridItems > label,
  .gridItems > button {
    flex: 1 1 200px;
    max-width: 200px;
  }
  .gridItems.col4 > div,
  .gridItems.col4 > label,
  .gridItems.col4 > button {
    flex: 1 1 260px;
    max-width: 260px;
  }
  .gridItems.col6 > div,
  .gridItems.col6 > label,
  .gridItems.col6 > button {
    flex: 1 1 180px;
    max-width: 180px;
  }
  .gridItems.col8 > div,
  .gridItems.col8 > label,
  .gridItems.col8 > button {
    flex: 1 1 100px;
    max-width: 100px;
  }
  .gridItems.col10 > div,
  .gridItems.col10 > label,
  .gridItems.col10 > button {
    flex: 1 1 96px;
    max-width: 96px;
  }
  .gridItems.bottomAlign {
    @apply items-end align-bottom;
  }
  @media (max-width: 600px) {
    .gridItems {
      @apply grid grid-cols-3;
    }
    .gridItems.col8 {
      @apply grid grid-cols-3;
    }
  }

  .cc-vision-wrap {
    @apply relative h-[45vh] min-h-[45vh] w-full pb-4 md:h-[64vh];
  }

  .cc-vision-wrap.fullHeight {
    @apply relative h-full w-full pb-0;
  }
  .ccvision-scrollcontent {
    @apply mt-1 flex h-[43vh] max-h-[43vh] min-h-[43vh] w-full flex-col overflow-hidden overflow-y-auto md:h-[58vh] md:max-h-[58vh] md:min-h-[58vh];
  }
  .ccvision-scrollcontent.noBottomBtn {
    @apply h-[64vh] max-h-[64vh] min-h-[64vh] md:h-[66vh] md:max-h-[66vh] md:min-h-[66vh];
  }
  .ccBottomBtnWrap {
    @apply mx-auto flex w-full flex-col items-center justify-center md:w-[30%];
  }
  .ccVisionBottomBtnWrap {
    @apply mx-auto flex w-full flex-row items-center justify-center gap-2 align-middle md:w-1/2 md:gap-4;
  }

  .fabricRangeSlider input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
  }

  /* Thumb */
  .fabricRangeSlider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--thumb-color, #000);
    @apply h-12 w-4 cursor-pointer rounded-[5px] border-2 border-gray-950 md:h-18 md:w-6 md:rounded-lg;
  }

  .fabricRangeSlider input[type="range"]::-moz-range-thumb {
    @apply h-12 w-4 cursor-pointer rounded-[5px] border-2 border-gray-950 md:h-18 md:w-6 md:rounded-lg;
  }

  .vBSilhouette:first-child {
    @apply top-0 left-[4%] -rotate-6;
  }
  .vBSilhouette:last-child {
    @apply right-[4%] bottom-0 rotate-6;
  }

  @keyframes marquee {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }

  .animate-marquee {
    animation: marquee 30s linear infinite;
  }

  .scroll-smooth-x {
    scroll-behavior: smooth;
  }

  /* thin scrollbar (supported in modern browsers) */
  .page-scrollbar::-webkit-scrollbar {
    height: 6px;
  }
  .page-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 9999px;
  }
  .page-scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }

  /* keep your existing @apply styles */
  .closeable-chip {
    @apply inline-flex shrink-0 items-center border border-dashed border-gray-950/50 bg-gray-100 py-0.5 pr-1 pl-3 text-xs;
  }
  .chip-label {
    @apply max-w-48 truncate text-xs;
  }

  .close-icon {
    @apply flex items-center justify-center p-1 text-xs transition;
  }
}