@layer base {

    html,
    body {
        margin: 0;
        padding: 0;
        background-color: #0d0d0d;
        color: #e5e2e1;
        font-family: 'Plus Jakarta Sans', sans-serif;
        scroll-behavior: smooth;
    }

    body {
        overscroll-behavior: none;
    }
}

::-webkit-scrollbar {
    display: none;
}

::selection {
    background-color: #FFC880 !important;
    /* Your custom highlight background */
    color: #181313 !important;
    /* Text color when highlighted */
}

/* Hides anything outside the main container */
.marquee-container {
    overflow: hidden;
    width: 100%;
    padding: 2rem 0;
    /* Optional top/bottom spacing */
}

/* The track holding both groups */
.marquee-track {
    display: flex;
    width: max-content;
    /* Adjust the '20s' to make it faster or slower */
    animation: scroll-marquee 20s linear infinite;
}

/* Pause the marquee when the user hovers over it (Optional but good for UX) */
.marquee-track:hover {
    animation-play-state: paused;
}

/* The groups holding the videos */
.marquee-group {
    display: flex;
    gap: 1.5rem;
    /* Space between videos */
    padding-right: 1.5rem;
    /* Must match the gap size for a perfect seam! */
}

/* Sizing for individual videos */
.video-wrapper {
    width: 300px;
    /* Set a fixed width or use aspect-ratio */
    flex-shrink: 0;
    border-radius: 8px;
    /* Clean, rounded edges */
    overflow: hidden;
}

.video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensures videos fill the wrapper nicely */
    display: block;
}

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

.group:hover .animate-marquee-left {
    animation-play-state: paused;
}

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

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

/* Pause marquee animation on hover */
.group:hover .animate-marquee-left,
.group:hover .animate-marquee-right {
    animation-play-state: paused;
}

/* Header Slide Down Entrance */
@keyframes headerSlideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-header-slide-down {
  animation: headerSlideDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Nav Link Hover Underline Slide Effect */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: #FFC880; /* Primary Green */
  border-radius: 2px;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-link:hover::after {
  width: 100%;
}




/* Pulsing Ambient Glow for WhatsApp CTA */
@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 12px #41e57540;
  }
  50% {
    box-shadow: 0 0 22px #41e5758c;
  }
}

.animate-glow-pulse {
  animation: glowPulse 3s infinite ease-in-out;
}

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

    100% {
        transform: translateX(-50%);
    }
}

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

    100% {
        transform: translateX(0);
    }
}

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

    100% {
        transform: translateX(-50%);
    }
}

/* The Infinite Loop Animation */
@keyframes scroll-marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}