:root {
  --color-copper: #c87d46;
  --color-gold-soft: #f4dcb9;
  --color-gold: #c69c55;
}

body, html {
  margin: 0;
  padding: 0;
  overflow-x: hidden; scroll-behavior: smooth;
  scroll-padding-top: 100px; /* আপনার নেভবারের উচ্চতা অনুযায়ী এটি ১০০ পিক্সেল বা একটু কম-বেশি করতে পারেন */
}


#particleCanvas {
  mix-blend-mode: screen;
}

/*==========================================
/* Smooth Scrolling Start */
/*==========================================

/* Lenis Recommended CSS */
html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/*==========================================
/* Smooth Scrolling End */
/*========================================== */

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

.animate-marquee {
    display: flex;
    width: max-content;
    animation: marqueeScroll 25s linear infinite;
}

/* মাউস হোভার করলে অ্যানিমেশন থেমে যাবে */
.animate-marquee:hover {
    animation-play-state: paused;
}

.bg-blur{
  background: rgba(186, 186, 186, 0.1);
  backdrop-filter: blur(8px);
  position: relative;
}

.bg-blur::after{
  content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    background: linear-gradient(100deg, color-mix(in oklab, var(--color-copper) 80%, black), var(--color-gold-soft) 42%, var(--color-gold) 62%, color-mix(in oklab, var(--color-copper) 70%, black)) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* counter section border Start*/

.rounded-gradient-border {
    border-radius: 9999px; /* ক্যাপসুল বা রাউন্ড শেপ করার জন্য */
    position: relative;
    background: rgba(186, 186, 186, 0.1);
    backdrop-filter: blur(8px);
}

.rounded-gradient-border::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    background: linear-gradient(100deg, color-mix(in oklab, var(--color-copper) 80%, black), var(--color-gold-soft) 42%, var(--color-gold) 62%, color-mix(in oklab, var(--color-copper) 70%, black)) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* counter border End*/


/* Song border STart*/

.song-gradient-border {
    border-radius: 30px; /* ক্যাপসুল বা রাউন্ড শেপ করার জন্য */
    position: relative;
    background: rgba(186, 186, 186, 0.1);
    backdrop-filter: blur(8px);
}

.song-gradient-border::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    background: linear-gradient(100deg, color-mix(in oklab, var(--color-copper) 80%, black), var(--color-gold-soft) 42%, var(--color-gold) 62%, color-mix(in oklab, var(--color-copper) 70%, black)) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Song border End*/


/* bg element start */

@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-spin-slow {
    animation: spin-slow 25s linear infinite;
}


/* fortm css start */