/* =============================================
   1. Font Imports & Global Styles
   ============================================= */

/* Google Fonts থেকে Lora এবং Noto Serif ফন্ট ইম্পোর্ট করা হয়েছে */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');

/* ওয়েবসাইটের প্রধান কালারগুলো এখানে ভ্যারিয়েবল হিসেবে রাখা হয়েছে */
:root {
  --brand-primary: #fa8027;
  --brand-grad-1: #fa8027;
  --brand-grad-2: #ff9a4d;
  --brand-grad-3: #ffb97a;
}

/* ওয়েবসাইটের সকল সাধারণ লেখার জন্য Lora ফন্ট নির্দিষ্ট করা হয়েছে */
body {
  font-family: 'Lora', serif;
}

/* ওয়েবসাইটের সকল হেডিং (h1, h2, ইত্যাদি) এর জন্য Noto Serif ফন্ট নির্দিষ্ট করা হয়েছে */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Noto Serif', serif;
}


/* =============================================
   2. Component Styles
   ============================================= */

/* প্রিমিয়াম গ্রেডিয়েন্ট বাটনের জন্য কাস্টম স্টাইল */
.btn-premium {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.25rem;
  border-radius: 9999px;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.2px;
  background-image: linear-gradient(135deg,
      var(--brand-grad-1),
      var(--brand-grad-2) 50%,
      var(--brand-grad-3));
  box-shadow: 0 8px 20px rgba(250, 128, 39, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
}

.btn-premium::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0.45),
      rgba(255, 255, 255, 0.06));
  mix-blend-mode: soft-light;
  pointer-events: none;
  mask: radial-gradient(120% 60% at 50% -20%,
      rgba(255, 255, 255, 0.9),
      transparent 70%);
}

.btn-premium:hover {
  filter: saturate(1.06);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(250, 128, 39, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.btn-premium:active {
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(250, 128, 39, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* প্রিমিয়াম আউটলাইন বাটনের জন্য কাস্টম স্টাইল */
.btn-premium-outline {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.78rem 1.15rem;
  border-radius: 9999px;
  font-weight: 700;
  color: var(--brand-primary);
  background: white;
  border: 2px solid rgba(250, 128, 39, 0.25);
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.08);
  transition: all 0.2s;
}

.btn-premium-outline:hover {
  color: #fff;
  border-color: transparent;
  background-image: linear-gradient(135deg,
      var(--brand-grad-1),
      var(--brand-grad-2) 50%,
      var(--brand-grad-3));
  box-shadow: 0 8px 20px rgba(250, 128, 39, 0.25);
  transform: translateY(-1px);
}


/* =============================================
   3. Utility & Helper Classes
   ============================================= */

/* হিরো সেকশনের জন্য একটি অ্যাবস্ট্রাক্ট ব্যাকগ্রাউন্ড ইফেক্ট */
.abstract-hero {
  background: radial-gradient(1200px 600px at -10% -10%,
      rgba(250, 128, 39, 0.25),
      transparent 60%),
    radial-gradient(900px 500px at 110% 10%,
      rgba(255, 154, 77, 0.25),
      transparent 60%),
    radial-gradient(800px 500px at 30% 120%,
      rgba(255, 185, 122, 0.25),
      transparent 60%),
    linear-gradient(180deg, #fafafa, #ffffff);
}

/* ন্যাভিগেশন বারের জন্য গ্লাস (blur) ইফেক্ট */
.glass {
  backdrop-filter: saturate(160%) blur(10px);
  background: rgba(255, 255, 255, 0.7);
}

/* স্লাইডারের জন্য ব্যবহৃত হেল্পার ক্লাস */
.slider-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: calc(100% * var(--num-slides));
}

.slide {
  flex: 0 0 100%;
}