/* ===================================================================
   GLOBAL STYLES & BACKGROUND EFFECTS
=================================================================== */
body::before {
  content: "";
  position: fixed;
  top: -10%;
  left: -20%;
  width: 50vw;
  height: 50vw;
  background: radial-gradient(
    circle,
    theme("colors.primary/15%"),
    transparent 70%
  );
  filter: blur(120px);
  z-index: -1;
  animation: pulse-slow 15s infinite alternate;
}
body::after {
  content: "";
  position: fixed;
  bottom: -10%;
  right: -20%;
  width: 50vw;
  height: 50vw;
  background: radial-gradient(
    circle,
    theme("colors.primary/15%"),
    transparent 70%
  );
  filter: blur(120px);
  z-index: -1;
  animation: pulse-slow 20s infinite alternate;
}
@keyframes pulse-slow {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}

/* ===================================================================
   THEME TOGGLE (Dark/Light Mode)
=================================================================== */
.sun-icon {
  display: block;
}
.moon-icon {
  display: none;
}
.dark .sun-icon {
  display: none;
}
.dark .moon-icon {
  display: block;
}

/* ===================================================================
   HEADER & NAVIGATION
=================================================================== */
/* --- Header Scroll Sizing --- */
header nav {
  transition: padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out;
}
.dip-down-logo {
  transition: width 0.3s ease-in-out;
}
header nav.is-scrolled {
  padding-top: 0.25rem; /* p-1 */
  padding-bottom: 0.25rem; /* p-1 */
}
header nav.is-scrolled .dip-down-logo {
  width: 4rem; /* w-16 */
}

/* ===================================================================
   HERO SECTION
=================================================================== */
#hero {
  /* Subtle dot pattern for light mode */
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4"><path fill="%23e2e8f0" d="M1 3h1v1H1V3zm2-2h1v1H3V1z"></path></svg>');
}
.dark #hero {
  /* Subtle dot pattern for dark mode */
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4"><path fill="%23334155" d="M1 3h1v1H1V3zm2-2h1v1H3V1z"></path></svg>');
}

/* --- Hero Slider Styles --- */
.hero-slider .swiper-pagination-bullet {
  background-color: #ffffff;
  opacity: 0.7;
  transition: all 0.3s ease;
}
.hero-slider .swiper-pagination-bullet-active {
  background-color: theme("colors.primary");
  opacity: 1;
  transform: scale(1.2);
}
.hero-slider .swiper-button-next,
.hero-slider .swiper-button-prev {
  color: theme("colors.primary");
  background-color: rgba(255, 255, 255, 0.8);
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.hero-slider .swiper-button-next:hover,
.hero-slider .swiper-button-prev:hover {
  background-color: rgba(255, 255, 255, 1);
  transform: scale(1.05);
}
.hero-slider .swiper-button-next::after,
.hero-slider .swiper-button-prev::after {
  font-size: 1.25rem; /* 20px */
  font-weight: bold;
}

/* --- Hero Logo Scroller --- */
.logo-scroller {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
}
.logo-track {
  display: flex;
  animation: scroll-logos 60s linear infinite;
  will-change: transform;
}
.logo-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  justify-content: space-between;
  min-width: 100%;
}
.logo-item {
  height: 2rem; /* h-8 */
  width: auto;
  padding: 0 1.5rem;
  transition: all 0.3s ease-in-out;
  filter: grayscale(100%) opacity(60%);
}
.logo-item:hover {
  filter: grayscale(0) opacity(100%);
  transform: scale(1.1);
}
@keyframes scroll-logos {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.logo-scroller:hover .logo-track {
  animation-play-state: paused;
}

/* ===================================================================
   SVG WAVE STYLES (Used across sections)
=================================================================== */
/* --- Top Wave --- */
.top-wave-path-3 {
  fill: #f9fafb; /* lightSurface */
}
.dark .top-wave-path-3 {
  fill: #1f2937; /* darkSurface */
}
.top-wave-path-2 {
  fill: #e2e8f0;
}
.dark .top-wave-path-2 {
  fill: #1e293b;
}
.top-wave-path-1 {
  fill: #cbd5e1;
}
.dark .top-wave-path-1 {
  fill: #334155;
}
/* --- Bottom Wave --- */
.wave-path-3 {
  fill: #ffffff; /* lightBg */
}
.dark .wave-path-3 {
  fill: #111827; /* darkBg */
}
.wave-path-2 {
  fill: #e2e8f0;
}
.dark .wave-path-2 {
  fill: #1e293b;
}
.wave-path-1 {
  fill: #cbd5e1;
}
.dark .wave-path-1 {
  fill: #334155;
}

/* ===================================================================
    BUSINESS SECTION (Animated Cards)
=================================================================== */

/* --- Animated border (Outer frame) --- */
.animated-border-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1rem; /* rounded-2xl */
  padding: 3px; /* p-[3px] */
  background: linear-gradient(
    to right,
    var(--card-border-start-color, #f87171),
    var(--card-border-end-color, #ef4444)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: all 0.3s ease-in-out;
}
.animated-border-card:hover::before {
  transform: rotate(5deg) scale(1.02);
}

/* --- Wavy background (Inner content) --- */
.animated-border-card .inner-card-bg {
  /* এটি খালি থাকবে, নতুন আরজিবি অ্যানিমেশন এটি কন্ট্রোল করবে */
}
.dark .animated-border-card .inner-card-bg {
   /* এটি খালি থাকবে */
}


/* ===================================================================
    NEW RGB WAVE ANIMATION
=================================================================== */

/* 1. নতুন Keyframe (উপর থেকে নিচে নামার অ্যানিমেশন) */
@keyframes rgb-wave {
  from {
    background-position: 50% 0%;
  }
  to {
    background-position: 50% 400%; /* ৪টি কালারের চক্র পূরণ করবে */
  }
}

/* 2. সব কার্ডের জন্য কমন অ্যানিমেশন প্রপার্টি */
.inner-card-bg[class*="rgb-wave-"] {
  background-size: 100% 500%; /* ৫টি কালার স্টপ (লুপের জন্য) */
  animation: rgb-wave 12s linear infinite; /* অ্যানিমেশনের গতি (১২ সেকেন্ড) */
}

/* 3. প্রতিটি কার্ডের জন্য আলাদা কালার-গ্রেডিয়েন্ট */

/* কার্ড 0: শুরু হবে গোলাপী দিয়ে */
.rgb-wave-0 {
  background-image: linear-gradient(to bottom, 
    #f472b6, /* Pink */
    #60a5fa, /* Blue */
    #4ade80, /* Green */
    #fca5a5, /* Red */
    #f472b6  /* Pink (পুনরায় লুপের জন্য) */
  );
}

/* কার্ড 1: শুরু হবে নীল দিয়ে */
.rgb-wave-1 {
  background-image: linear-gradient(to bottom, 
    #60a5fa, /* Blue */
    #4ade80, /* Green */
    #fca5a5, /* Red */
    #f472b6, /* Pink */
    #60a5fa  /* Blue (পুনরায় লুপের জন্য) */
  );
}

/* কার্ড 2: শুরু হবে সবুজ দিয়ে */
.rgb-wave-2 {
  background-image: linear-gradient(to bottom, 
    #4ade80, /* Green */
    #fca5a5, /* Red */
    #f472b6, /* Pink */
    #60a5fa, /* Blue */
    #4ade80  /* Green (পুনরায় লুপের জন্য) */
  );
}

/* কার্ড 3: শুরু হবে লাল দিয়ে */
.rgb-wave-3 {
  background-image: linear-gradient(to bottom, 
    #fca5a5, /* Red */
    #f472b6, /* Pink */
    #60a5fa, /* Blue */
    #4ade80, /* Green */
    #fca5a5  /* Red (পুনরায় লুপের জন্য) */
  );
}

/* ===================================================================
   ABOUT SECTION
=================================================================== */
@keyframes spin-slow-custom {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}
.animate-spin-slow-custom {
  animation: spin-slow-custom 15s linear infinite;
}
.premium-text-glow-strong {
  text-shadow: 0 4px 30px rgba(239, 68, 68, 0.25);
}
.dark .premium-text-glow-strong {
  text-shadow: 0 4px 35px rgba(239, 68, 68, 0.35);
}

/* ===================================================================
   WHY CHOOSE US (Comparison Card)
=================================================================== */
.comparison-card {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* gap-3 */
  padding: 1rem; /* p-4 */
  border-radius: 0.75rem; /* rounded-lg */
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.comparison-card:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

/* ===================================================================
   GALLERY SECTION (Scroller & Filter)
=================================================================== */
/* --- Infinite Scroller --- */
.gallery-scroller {
  max-width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 5%,
    black 95%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    black 5%,
    black 95%,
    transparent
  );
}
.gallery-track {
  display: flex;
  width: fit-content;
  animation: scroll-gallery 35s linear infinite;
  will-change: transform;
}
.gallery-scroller-item {
  flex-shrink: 0;
}
@keyframes scroll-gallery {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.gallery-scroller:hover .gallery-track {
  animation-play-state: paused;
}

/* --- Gallery Item (shared styles) --- */
.gallery-item {
  position: relative;
  cursor: pointer;
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}
.gallery-image {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease-in-out;
}
.group:hover .gallery-image {
  transform: scale(1.05);
}
.gallery-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.group:hover .gallery-overlay {
  opacity: 1;
}

/* --- Lightbox --- */
#lightbox.hidden {
  display: none;
}
#lightbox {
  display: flex;
}

/* --- Filter Buttons (Mixtape) --- */
.mixtape-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px; /* rounded-full */
  text-align: center;
  padding: 0.5rem 1.25rem; /* py-2 px-5 */
  font-weight: 700; /* font-bold */
  font-size: 0.875rem; /* text-sm */
  margin: 0.25rem 0.5rem; /* my-1 mx-2 */
  transition: all 0.3s ease-in-out;
  border: 1px solid theme("colors.slate.300");
  background-color: theme("colors.lightBg");
  color: theme("colors.lightText");
  cursor: pointer;
}
.dark .mixtape-btn {
  border-color: theme("colors.slate.700");
  background-color: theme("colors.darkBg");
  color: theme("colors.darkText");
}
.mixtape-btn:hover {
  border-color: theme("colors.primary/50%");
  background-color: theme("colors.primary/10%");
  color: theme("colors.primary");
}
.active-mixtape-btn {
  background: linear-gradient(to right, #ef4444, #dc2626) !important;
  color: white !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 5px rgba(239, 68, 68, 0.7),
    0 0 20px rgba(239, 68, 68, 0.3) !important;
  border-color: #ef4444 !important;
  transform: scale(1.05);
  transition: all 0.3s ease-in-out;
}

/* --- Filter Transition Effect --- */
.blog-item.filtered-hidden,
.gallery-item.filtered-hidden {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
}

/* ===================================================================
   TESTIMONIALS SECTION (Scroller)
=================================================================== */
.testimonial-scroller {
  max-width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
}
.testimonial-track {
  display: flex;
  width: calc(100% * 6); /* 6 items (3 originals + 3 duplicates) */
  animation: scroll-testimonials 60s linear infinite;
}
.testimonial-card-wrapper {
  flex-shrink: 0;
  width: calc(100% / 6); /* 1/6th of track width = 100vw */
  padding: 0 1rem;
}
/* Tablet: 2 cards visible */
@media (min-width: 768px) {
  .testimonial-track {
    width: calc(50% * 6); /* 300% total */
  }
  .testimonial-card-wrapper {
    width: calc(100% / 6); /* 1/6th of track width = 50vw */
  }
}
/* Desktop: 3 cards visible */
@media (min-width: 1024px) {
  .testimonial-track {
    width: calc(33.333% * 6); /* 200% total */
  }
  .testimonial-card-wrapper {
    width: calc(100% / 6); /* 1/6th of track width = 33.33vw */
  }
}
@keyframes scroll-testimonials {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%); /* Scroll halfway (to the start of duplicates) */
  }
}
.testimonial-scroller:hover .testimonial-track {
  animation-play-state: paused;
}

/* --- Testimonial Card Styling --- */
.testimonial-card-content {
  position: relative;
  margin-top: 3rem;
  background-color: var(--lightBg, #ffffff);
  border-radius: 1rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  transition: transform 0.3s ease-in-out;
  height: 100%;
}
.dark .testimonial-card-content {
  background-color: var(--darkBg, #111827);
}
.testimonial-card-wrapper:hover .testimonial-card-content {
  transform: translateY(-0.5rem);
}
.testimonial-avatar {
  position: absolute;
  top: -3rem;
  left: 50%;
  transform: translateX(-50%);
  width: 6rem;
  height: 6rem;
  border-radius: 9999px;
  border: 4px solid var(--lightSurface, #f9fafb);
  object-fit: cover;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}
.dark .testimonial-avatar {
  border-color: var(--darkSurface, #1f2937);
}
.star-rating {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 1rem;
  color: #fbbf24;
}
.star-rating svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

/* ===================================================================
   CALL TO ACTION (CTA) SECTION
=================================================================== */
/* --- Aurora Background --- */
.aurora-orb {
  position: absolute;
  border-radius: 9999px;
  filter: blur(80px);
}
.aurora-1 {
  width: 300px;
  height: 300px;
  background-color: rgba(239, 68, 68, 0.2); /* primary/20 */
  top: -20%;
  left: -20%;
  animation: drift 15s infinite alternate ease-in-out;
}
.aurora-2 {
  width: 250px;
  height: 250px;
  background-color: rgba(239, 68, 68, 0.15); /* primary/15 */
  top: 20%;
  right: -15%;
  animation: drift 18s infinite alternate ease-in-out -6s;
}
.aurora-3 {
  width: 280px;
  height: 280px;
  background-color: rgba(220, 38, 38, 0.15); /* red-600/15 */
  bottom: -25%;
  left: 10%;
  animation: drift 20s infinite alternate ease-in-out -10s;
}
.aurora-4 {
  width: 200px;
  height: 200px;
  background-color: rgba(239, 68, 68, 0.1); /* primary/10 */
  bottom: 5%;
  right: 20%;
  animation: drift 22s infinite alternate ease-in-out -15s;
}
@keyframes drift {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(30px, 50px) scale(1.1);
  }
  100% {
    transform: translate(-30px, -20px) scale(1);
  }
}

/* --- CTA Button Pulse Animation (Re-added) --- */
.cta-button {
  animation: pulse-cta 2.5s infinite ease-in-out;
}
@keyframes pulse-cta {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  }
}



/* ===================================================================
    BUSINESS SECTION (Animated Cards)
=================================================================== */

/* --- Animated border (Outer frame) --- */
.animated-border-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1rem; /* rounded-2xl */
  padding: 3px; /* p-[3px] */
  background: linear-gradient(
    to right,
    var(--card-border-start-color, #f87171),
    var(--card-border-end-color, #ef4444)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: all 0.3s ease-in-out;
  
  /* This ensures the border stays *behind* the inner card (which has z-10) */
  z-index: 5;
}

/* * FIX 1: REMOVED "rotate(5deg)" to stop the hover distortion
 */
.animated-border-card:hover::before {
  transform: scale(1.02);
}


/* * FIX 2: NEW CSS FOR CENTERING DATABASE CONTENT
 * This targets the <ul> and <li> tags inside your new .db-content-wrapper
 */
.db-content-wrapper {
  text-align: center; /* Centers the <ul> block */
}
.db-content-wrapper ul {
  display: inline-block; /* Makes the <ul> only as wide as its content */
  text-align: left;    /* Aligns the <li> text itself to the left */
  list-style-position: inside; /* Keeps bullets from overflowing */
  padding-left: 0;     /* Removes default browser padding */
}


/* ===================================================================
    RGB WAVE ANIMATION (Essential for the card)
=================================================================== */

@keyframes rgb-wave {
  from {
    background-position: 50% 0%;
  }
  to {
    background-position: 50% 400%;
  }
}

.inner-card-bg[class*="rgb-wave-"] {
  background-size: 100% 500%; 
  animation: rgb-wave 12s linear infinite; 
}

.rgb-wave-0 {
  background-image: linear-gradient(to bottom, 
    #f472b6, #60a5fa, #4ade80, #fca5a5, #f472b6
  );
}
.rgb-wave-1 {
  background-image: linear-gradient(to bottom, 
    #60a5fa, #4ade80, #fca5a5, #f472b6, #60a5fa
  );
}
.rgb-wave-2 {
  background-image: linear-gradient(to bottom, 
    #4ade80, #fca5a5, #f472b6, #60a5fa, #4ade80
  );
}
.rgb-wave-3 {
  background-image: linear-gradient(to bottom, 
    #fca5a5, #f472b6, #60a5fa, #4ade80, #fca5a5
  );
}


boxShadow: {
          // আপনার আগের শ্যাডো
          'primary-glow': '0 1px 5px rgba(239, 68, 68, 0.6)',
          
          // হোভারের জন্য নতুন এবং আরও গাঢ় শ্যাডো
          'primary-glow-hover': '0 2px 5px rgba(239, 68, 68, 0.8)', 
        }