/* মোবাইল ভিউতে ডানে-বামে যাওয়া বন্ধ করার জন্য */
html,
body {
  overflow-x: hidden;
  width: 100%;
  position: relative;
  background-color: #ffffff;
}

body {
  font-family: "Merriweather", serif;
}
.font-heading {
  font-family: "Lora", serif;
}

.btn-vibrant {
  background: linear-gradient(45deg, #22d3ee, #0ea5e9);
}

/* ড্রয়ার অ্যানিমেশন */
#mobile-drawer.active {
  transform: translateX(0);
}
#drawer-overlay.active {
  display: block;
  opacity: 1;
}



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

    .animate-marquee {
        animation: marquee 40s linear infinite; /* স্পিড বাড়িয়ে ১৫ সেকেন্ড করা হয়েছে */
        display: flex;
        width: max-content;
    }

    .logo-item {
        transition: transform 0.3s ease;
        cursor: pointer;
    }

    .logo-item:hover {
        transform: scale(1.2);
    }

    /* শুধুমাত্র লোগোর ওপর মাউস থাকলে অ্যানিমেশন পজ হবে */
    .animate-marquee:has(.logo-item:hover) {
        animation-play-state: paused;
    }

    .mesh-gradient {
    filter: blur(150px);
    opacity: 0.5;
}






/* Advanced Glassmorphism */
.glass-panel {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  /* বক্স শ্যাডো আপনার নতুন প্রাইমারি কালারের সাথে মিলিয়ে দেওয়া হয়েছে */
  box-shadow: 0 8px 32px 0 hsla(193, 72%, 20%, 0.15);
}

.dark .glass-panel {
  background: rgba(15, 23, 42, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-vibrant {
  /* গ্রাডিয়েন্টে প্রাইমারি এবং সেকেন্ডারি কালার ব্যবহার করা হয়েছে */
  background-image: linear-gradient(to bottom, #22d3ee, #0ea5e9);
  color: white;
  /* border: 1px solid #0ea5e9; */
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3),
    0 6px 12px rgba(14, 165, 233, 0.3);
}

.btn-vibrant::before {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3),
    0 8px 16px rgba(14, 165, 233, 0.35);
}

.btn-vibrant:hover::before {
  width: 100%;
}

.btn-vibrant:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3),
    0 8px 16px hsla(200, 75%, 58%, 0.35);
}