* {
        font-family: 'Poppins', sans-serif;
    }

    /* ====== White Scrollbar ====== */
    ::-webkit-scrollbar {
        width: 10px;
    }

    ::-webkit-scrollbar-track {
        background: white;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #e5e7eb;
        border-radius: 9999px;
        border: 2px solid white;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: #d1d5db;
    }

    html {
        scrollbar-color: #e5e7eb white;
        scrollbar-width: thin;
        scroll-behavior: smooth;
    }


    /* Smooth fade-up animation */
    @keyframes fadeUp {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }

        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }



    .animate-fadeUp {
        opacity: 0;
        animation: fadeUp 1s ease forwards;
    }

    .shimmer {
        background: linear-gradient(90deg, #ff4d4d, #1e90ff, #ff4d4d);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-size: 300%;
        animation: shimmerMove 3s infinite linear;
    }

    @keyframes shimmerMove {
        0% {
            background-position: 0% 50%;
        }

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

    /* ===== Product Cards ===== */
    .product-card {
        background: white;
        border-radius: 1rem;
        padding: 2rem 1rem;
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        /* faster hover */
        opacity: 0;
        transform: translateY(30px);
        animation: fadeInUp 0.8s ease forwards;
        animation-delay: var(--d);
    }

    .product-card.reveal {
        opacity: 1;
        transform: translateY(0);
        transition-delay: var(--d, 0s);
    }

    .icon-circle {
        width: 60px;
        height: 60px;
        margin: 0 auto 15px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    @keyframes gradientShift {
        0% {
            background-position: 0% 50%;
        }

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

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

    .card-title {
        font-weight: 600;
        color: #1f2937;
        margin: 0;
    }

    /* Separate hover transition speed */
    .product-card:hover {
        transform: translateY(-10px) scale(1.03);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }

    .product-card:hover .icon-circle {
        transform: translateY(-6px) scale(1.04);
    }

    @media (max-width:640px) {
        .icon-circle {
            width: 56px;
            height: 56px;
        }

        .product-card {
            padding: 1rem;
            border-radius: 12px;
        }
    }

    /* ===== Go To Top Button ===== */
    #goTopBtn {
        position: fixed;
        bottom: 30px;
        right: 30px;
        width: 50px;
        height: 50px;
        background: white;
        border: 2px solid #1f2937;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s ease;
        z-index: 50;
    }

    #goTopBtn svg {
        stroke: #1f2937;
        width: 24px;
        height: 24px;
        transition: transform 0.3s ease;
    }

    #goTopBtn:hover {
        background: #1f2937;
    }

    #goTopBtn:hover svg {
        stroke: white;
        transform: translateY(-3px);
    }

    #goTopBtn.show {
        opacity: 1;
        visibility: visible;
        bottom: 40px;
    }


    /* ===== Modern marquee slider + lightbox styles ===== */

    /* wrapper */
    .modern-slider-wrap {
        --marquee-speed: 28s;
        position: relative;
    }

    /* slider strip — using CSS animation for continuous leftward motion */
/* ensure JS has full control and there are no gaps between tiles */
.modern-slider {
  animation: none !important;
  display: flex !important;
  gap: 0 !important;            /* important: no CSS gap so widths are continuous */
  align-items: center;
  white-space: nowrap;
  will-change: transform;
}
.modern-slider .modern-tile { margin-right: 12px; } /* optional spacing handled as margin */

    /* tile style */
    .modern-tile {
        border: none;
        background: white;
        display: inline-block;
        padding: 0;
        margin: 0;
        border-radius: 14px;
        overflow: visible;
        box-shadow: 0 12px 30px rgba(2, 6, 23, 0.06);
        transition: transform .32s cubic-bezier(.2, .9, .25, 1), box-shadow .32s;
        cursor: pointer;
        width: 220px;
        height: 140px;
        flex: 0 0 220px;
        position: relative;
    }

    /* tile image */
    .modern-tile img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 14px;
        display: block;
        pointer-events: none;
    }

    /* hover / focus micro-interaction */
    .modern-tile:hover,
    .modern-tile:focus {
        transform: translateY(-8px) scale(1.03);
        box-shadow: 0 32px 70px rgba(2, 6, 23, 0.12);
        z-index: 10;
        outline: none;
    }

    /* pause animation on hover of wrapper or when focusing any tile */
    .modern-slider-wrap:hover .modern-slider,
    .modern-slider-wrap:focus-within .modern-slider,
    .modern-tile:focus~.modern-slider {
        animation-play-state: paused;
    }

    /* make the duplicated half invisible to screen readers */
    .modern-slider [aria-hidden="true"] {
        visibility: hidden;
        pointer-events: none;
    }

    /* responsive sizes */
    @media (max-width: 1024px) {
        .modern-tile {
            width: 180px;
            height: 120px;
            flex: 0 0 180px;
        }

        .modern-slider {
            gap: 14px;
        }

        .modern-slider-wrap {
            --marquee-speed: 22s;
        }
    }

    @media (max-width: 640px) {
        .modern-tile {
            width: 140px;
            height: 96px;
            flex: 0 0 140px;
            border-radius: 10px;
        }

        .modern-slider {
            gap: 12px;
        }

        .modern-slider-wrap {
            --marquee-speed: 16s;
        }
    }

    /* Lightbox */
    .slider-lightbox {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 28px;
    }

    .slider-lightbox.hidden {
        display: none;
    }

    .lightbox-backdrop {
        transition: opacity .3s ease;
    }

    .lightbox-inner img {
        display: block;
        max-height: 80vh;
        width: 100%;
        object-fit: contain;
    }

    /* Close button */
    .lightbox-close {
        font-size: 18px;
        line-height: 1;
        border: 0;
    }

    /* blurred page background while modal open (fallback if backdrop-filter not supported) */
    body.lightbox-open {
        overflow: hidden;
    }

    /* prefer reduced motion: stop marquee */
    @media (prefers-reduced-motion: reduce) {
        .modern-slider {
            animation: none;
            transform: none;
        }

        .modern-tile {
            transition: none;
        }
    }

    /* color cycle between your shimmer colors */
@keyframes iconColorShift {
  0%   { fill: #ff4d4d; }   /* red */
  50%  { fill: #1e90ff; }   /* blue */
  100% { fill: #ff4d4d; }   /* red */
}

/* float motion */
@keyframes iconFloat {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

/* base icon style */
.metric-icon {
  width: 2.5rem;      /* h-10 */
  height: 2.5rem;     /* w-10 */
  display: inline-block;
  will-change: transform, opacity, fill;
  transform-origin: center;
  animation: iconFloat 3.6s ease-in-out infinite;
  transition: transform .22s ease, filter .22s ease;
}

/* animate the path fill color */
.metric-icon path {
  animation: iconColorShift 3s linear infinite;
  transition: fill .22s linear;
}

/* hover/focus micro-interaction */
.metric-icon-wrap:hover .metric-icon,
.metric-icon-wrap:focus-within .metric-icon {
  transform: translateY(-8px) scale(1.06);
  filter: drop-shadow(0 6px 14px rgba(30,144,255,0.12));
}

/* small stagger so each icon feels slightly offset */
.metric-card:nth-child(1) .metric-icon { animation-delay: 0s; }
.metric-card:nth-child(2) .metric-icon { animation-delay: 0.12s; }
.metric-card:nth-child(3) .metric-icon { animation-delay: 0.24s; }

/* Metrics: initial (off-screen) state */
.metric-card {
  opacity: 0;
  transform: translateY(18px) scale(0.995);
  transition:
    opacity 560ms cubic-bezier(.2,.9,.25,1) var(--delay,0s),
    transform 560ms cubic-bezier(.2,.9,.25,1) var(--delay,0s);
  will-change: opacity, transform;
}

/* Visible state when in-view */
.metric-card.reveal {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Optional: make the icon micro-interact nicely during reveal */
.metric-card .metric-icon {
  transform-origin: center;
  transition: transform 420ms cubic-bezier(.2,.9,.25,1) var(--delay,0s), filter .28s;
  /* slightly scale up when revealed */
}
.metric-card.reveal .metric-icon {
  transform: translateY(0) scale(1.02);
}

/* If you want an exit subtle fade (slightly slower) */
.metric-card.removing {
  transition-duration: 420ms;
  opacity: 0;
  transform: translateY(10px) scale(.995);
}

/* accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .metric-card,
  .metric-card .metric-icon {
    transition: none !important;
    animation: none !important;
  }
}