/* ============================================================
   🚀 MakeIdBd — PREMIUM ENHANCEMENT CSS
   এই ফাইলটি existing style এর পরে <link> বা <style> হিসেবে যোগ করুন
   ============================================================ */

/* ── Google Fonts Import ── */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600;700;800&family=Noto+Sans+Bengali:wght@400;500;600;700&display=swap');

/* ── CSS Variables ── */
:root {
  --brand-red:   #F5325C;
  --brand-blue:  #4686e5;
  --brand-dark:  #0d1b2e;
  --brand-light: #f0f5ff;
  --gradient-hero: linear-gradient(135deg, #0d1b2e 0%, #1a2f55 50%, #0d1b2e 100%);
  --gradient-accent: linear-gradient(90deg, #F5325C, #ff7a7a);
  --gradient-blue:   linear-gradient(135deg, #4686e5, #63a1f1);
  --shadow-card: 0 8px 32px rgba(70,134,229,0.13), 0 2px 8px rgba(0,0,0,0.08);
  --shadow-hover: 0 16px 48px rgba(70,134,229,0.22), 0 4px 16px rgba(0,0,0,0.12);
  --radius-lg: 20px;
  --radius-xl: 28px;
  --transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
}

/* ── Base font upgrade ── */
body, .navbar, p, h1, h2, h3, h4, h5, h6 {
  font-family: 'Sora', 'Noto Sans Bengali', 'Jost', sans-serif !important;
}

/* ── Smooth scroll ── */
html { scroll-behavior: smooth; }

/* ══════════════════════════════
   🔝 NAVBAR — Premium Glass Effect
══════════════════════════════*/
.navbar.bootsnav {
  backdrop-filter: blur(18px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
  background: rgba(13, 27, 46, 0.82) !important;
  border-bottom: 1px solid rgba(70,134,229,0.18) !important;
  transition: var(--transition) !important;
}
.navbar.bootsnav.scroll-on {
  background: rgba(13, 27, 46, 0.96) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important;
}
.navbar.bootsnav .nav > li > a,
.navbar.bootsnav.scroll-on .nav > li > a,
.navbar.bootsnav.navbar-fixed .nav > li > a {
  color: #ffffff !important;
}
.navbar.bootsnav .nav > li > a:hover,
.navbar.bootsnav.scroll-on .nav > li > a:hover {
  color: #F5325C !important;
}
.navbar.bootsnav .nav > li > a {
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  transition: var(--transition) !important;
  position: relative;
}
.navbar.bootsnav .nav > li > a::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 70%;
  height: 2px;
  background: var(--gradient-accent);
  border-radius: 2px;
  transition: transform 0.3s ease;
}
.navbar.bootsnav .nav > li:hover > a::after,
.navbar.bootsnav .nav > li.active > a::after {
  transform: translateX(-50%) scaleX(1);
}

/* Login button — even more premium */
.attr-nav > ul > li > a {
  background: linear-gradient(90deg, #F5325C, #ff7a7a) !important;
  border-radius: 30px !important;
  padding: 9px 22px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 4px 16px rgba(245,50,92,0.35) !important;
  transition: var(--transition) !important;
}
.attr-nav > ul > li > a:hover {
  box-shadow: 0 6px 24px rgba(245,50,92,0.55) !important;
  transform: translateY(-2px) !important;
}

/* ══════════════════════════════
   🌟 HERO SLIDER — WOW Overlays
══════════════════════════════*/
#home .overlay-bg,
#home .rev_slider_wrapper::before {
  background: linear-gradient(135deg, rgba(13,27,46,0.72) 0%, rgba(70,134,229,0.22) 100%) !important;
}
/* Floating shimmer particles on hero */
#home::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(70,134,229,0.12) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(245,50,92,0.10) 0%, transparent 50%);
  pointer-events: none;
  z-index: 2;
  animation: heroShimmer 8s ease-in-out infinite alternate;
}
@keyframes heroShimmer {
  0%   { opacity: 0.6; }
  100% { opacity: 1; }
}

/* ══════════════════════════════
   📣 NOTICE / PRICING TOP BAR
══════════════════════════════*/
#pricing.dark-bg {
  background: linear-gradient(135deg, #0d1b2e 0%, #1a2f55 100%) !important;
  border-top: none !important;
  border-bottom: 3px solid rgba(70,134,229,0.3) !important;
  position: relative;
  overflow: hidden;
}
#pricing.dark-bg::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(70,134,229,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.notice-card {
  border-radius: var(--radius-xl) !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(70,134,229,0.25) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* ══════════════════════════════
   💎 ID PLANNER SECTION
══════════════════════════════*/
#idp-planner {
  background: linear-gradient(160deg, #e8f0ff 0%, #f8fbff 50%, #eef4ff 100%) !important;
  position: relative;
  border-top: none !important;
  border-bottom: none !important;
  padding: 70px 0 !important;
}
#idp-planner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #4686e5, #F5325C, #4686e5);
  background-size: 200% 100%;
  animation: gradientSlide 3s linear infinite;
}
@keyframes gradientSlide {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

/* Scroll area — glass card */
#idp-planner .scroll-area {
  background: rgba(255,255,255,0.95) !important;
  border-radius: var(--radius-xl) !important;
  padding: 24px !important;
  box-shadow: var(--shadow-card) !important;
  border: 1px solid rgba(70,134,229,0.12) !important;
}

/* Section titles inside planner */
#idp-planner .section-title {
  font-family: 'Sora', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #1e3a8a !important;
  background: linear-gradient(90deg, rgba(70,134,229,0.12), rgba(99,161,241,0.06)) !important;
  border: 1px solid rgba(70,134,229,0.2) !important;
  border-radius: 30px !important;
  padding: 8px 18px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 2px 8px rgba(70,134,229,0.1) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Option cards — elevated */
#idp-planner .card.option-card {
  border-radius: 16px !important;
  border: 2px solid transparent !important;
  background: #fff !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.07) !important;
  transition: var(--transition) !important;
  overflow: hidden !important;
}
#idp-planner .card.option-card:hover {
  transform: translateY(-6px) scale(1.02) !important;
  box-shadow: var(--shadow-hover) !important;
  border-color: rgba(70,134,229,0.35) !important;
}
#idp-planner .card.option-card.selected {
  border: 2px solid #4686e5 !important;
  box-shadow: 0 0 0 4px rgba(70,134,229,0.15), var(--shadow-card) !important;
}
#idp-planner .card.option-card.selected::before {
  background: linear-gradient(135deg, #27ae60, #2ecc71) !important;
  box-shadow: 0 2px 8px rgba(39,174,96,0.4) !important;
  width: 26px !important;
  height: 26px !important;
  font-size: 13px !important;
}

/* Card image hover zoom */
#idp-planner .card-img-top {
  transition: transform 0.45s cubic-bezier(0.4,0,0.2,1) !important;
}
#idp-planner .option-card:hover .card-img-top {
  transform: scale(1.08) !important;
}

/* Preview FAB button */
#idp-planner .preview-fab {
  background: linear-gradient(135deg, #4686e5, #63a1f1) !important;
  box-shadow: 0 4px 12px rgba(70,134,229,0.4) !important;
  border-radius: 50% !important;
  width: 34px !important;
  height: 34px !important;
  transition: var(--transition) !important;
}
#idp-planner .preview-fab:hover {
  transform: scale(1.15) !important;
  background: linear-gradient(135deg, #F5325C, #ff7a7a) !important;
  box-shadow: 0 6px 18px rgba(245,50,92,0.4) !important;
}

/* ── Sticky Right Panel ── */
#idp-planner .sticky-right {
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-card) !important;
  border: 1px solid rgba(70,134,229,0.12) !important;
  background: #fff !important;
  overflow: hidden;
}
#idp-planner .sticky-right::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(90deg, #4686e5, #F5325C);
}

/* Total price display */
.total-xxl {
  background: linear-gradient(90deg, #F5325C, #ff7a7a) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-family: 'Sora', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -1px !important;
}

/* Submit/CTA buttons */
#idp-planner .btn-grad {
  background: linear-gradient(90deg, #4686e5, #63a1f1) !important;
  border-radius: 30px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  box-shadow: 0 4px 16px rgba(70,134,229,0.3) !important;
  transition: var(--transition) !important;
  border: none !important;
}
#idp-planner .btn-grad:hover:not(:disabled) {
  background: linear-gradient(90deg, #F5325C, #ff7a7a) !important;
  box-shadow: 0 8px 28px rgba(245,50,92,0.4) !important;
  transform: translateY(-2px) !important;
}
#idp-planner .btn-grad:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Summary rows */
#idp-planner .summary-row {
  padding: 8px 2px !important;
  font-size: 13.5px !important;
  border-bottom: 1px dashed rgba(70,134,229,0.15) !important;
  color: #334155 !important;
}

/* Form inputs */
#idp-planner .form-control,
#idp-planner .form-control:focus {
  border-radius: 12px !important;
  font-family: 'Noto Sans Bengali', 'Sora', sans-serif !important;
}
#idp-planner .form-control:focus {
  border-color: #4686e5 !important;
  box-shadow: 0 0 0 3px rgba(70,134,229,0.15) !important;
}

/* ══════════════════════════════
   📊 COUNTERS SECTION
══════════════════════════════*/
.dark-bg.xs-pt-80 {
  background: linear-gradient(135deg, #0d1b2e 0%, #162240 100%) !important;
  position: relative;
  overflow: hidden;
}
.dark-bg.xs-pt-80::before {
  content: '';
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(70,134,229,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.counter-type-2 h3 {
  font-family: 'Sora', sans-serif !important;
  font-weight: 800 !important;
  font-size: 3rem !important;
  letter-spacing: -1px !important;
}
.counter-type-2 {
  text-align: center;
  position: relative;
  padding: 30px 20px;
  border-radius: 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(70,134,229,0.12);
  transition: var(--transition);
  backdrop-filter: blur(8px);
}
.counter-type-2:hover {
  background: rgba(70,134,229,0.08);
  border-color: rgba(70,134,229,0.3);
  transform: translateY(-4px);
}

/* ══════════════════════════════
   🖼️ PORTFOLIO SLIDER
══════════════════════════════*/
.portfolio-item {
  position: relative;
  overflow: hidden;
  border-radius: 16px !important;
  margin: 8px !important;
}
.portfolio-item img {
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1) !important;
}
.portfolio-item:hover img {
  transform: scale(1.08) !important;
}
.portfolio-info {
  background: rgba(255,255,255,0.97) !important;
  border-radius: 0 0 16px 16px !important;
  transition: var(--transition) !important;
}

/* ══════════════════════════════
   👥 TEAM SECTION
══════════════════════════════*/
#team {
  background: linear-gradient(160deg, #0d1b2e 0%, #1a2f55 100%) !important;
  position: relative;
}
.team-member {
  transition: var(--transition) !important;
}
.team-member:hover {
  transform: translateY(-8px) !important;
}
.team-thumb {
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-card) !important;
  transition: var(--transition) !important;
}
.team-thumb:hover {
  box-shadow: var(--shadow-hover) !important;
}
.member-info {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
}
.member-info h3 {
  font-weight: 700 !important;
  font-family: 'Sora', sans-serif !important;
}

/* ══════════════════════════════
   📋 PRICING TABLES
══════════════════════════════*/
.pricing-box {
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-card) !important;
  transition: var(--transition) !important;
  border: 1px solid rgba(70,134,229,0.12) !important;
  overflow: hidden !important;
  position: relative;
}
.pricing-box:hover {
  transform: translateY(-8px) !important;
  box-shadow: var(--shadow-hover) !important;
}
.pricing-box.featured {
  background: linear-gradient(160deg, #0d1b2e 0%, #1a2f55 100%) !important;
  border-color: rgba(70,134,229,0.4) !important;
  box-shadow: 0 12px 40px rgba(70,134,229,0.25) !important;
}
/* featured card এ সব text সাদা */
.pricing-box.featured h3,
.pricing-box.featured h4,
.pricing-box.featured h3.dark-color,
.pricing-box.featured h4.dark-color {
  color: #ffffff !important;
}
.pricing-box.featured li,
.pricing-box.featured p {
  color: rgba(255, 255, 255, 0.82) !important;
}
.pricing-box.featured::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #4686e5, #F5325C);
}
.pricing-box h2 {
  font-family: 'Sora', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -1.5px !important;
}
/* ── FEATURED badge ───────────────────────────────────────────────────────
   master.css:1339-1340 pins this at `left:-4px` and draws a chevron notch with
   `.featured-mark:after { border-right: 9px solid #fff }`. That notch was drawn
   in WHITE for a white card; on the dark navy featured card it reads as a stray
   white arrow poking out of the ribbon, and the badge hangs off the card's
   rounded corner. Replace the ribbon with a pill centred inside the card. */
.pricing-box.featured .featured-mark {
  position: absolute !important;
  top: 26px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  display: inline-block !important;
  padding: 6px 18px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #F5325C, #FF7A7A) !important;
  color: #fff !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 2.4px !important;
  line-height: 1.5 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  box-shadow: 0 10px 22px -10px rgba(245, 50, 92, .9) !important;
}
.pricing-box.featured .featured-mark::after,
.pricing-box.featured .featured-mark::before {
  content: none !important;
  display: none !important;
  border: 0 !important;
}
.btn-color, .btn.btn-color {
  background: linear-gradient(90deg, #F5325C, #ff7a7a) !important;
  border: none !important;
  border-radius: 30px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(245,50,92,0.3) !important;
  transition: var(--transition) !important;
}
.btn-color:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(245,50,92,0.45) !important;
}

/* ══════════════════════════════
   💬 TESTIMONIALS
══════════════════════════════*/
.testimonial-content {
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-card) !important;
  transition: var(--transition) !important;
  border: 1px solid rgba(70,134,229,0.08) !important;
  position: relative;
  overflow: hidden;
}
.testimonial-content::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #4686e5, #F5325C, #4686e5);
  opacity: 0;
  transition: var(--transition);
}
.testimonial-content:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow-hover) !important;
}
.testimonial-content:hover::before {
  opacity: 1;
}

/* ══════════════════════════════
   📧 CONTACT SECTION
══════════════════════════════*/
#contact.dark-bg {
  background: linear-gradient(135deg, #0d1b2e 0%, #162240 100%) !important;
}
.contact-form-style-02 .md-input,
.contact-form-style-02 .md-textarea {
  border-radius: 12px !important;
  transition: var(--transition) !important;
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  border: 1px solid rgba(70,134,229,0.25) !important;
}
.contact-form-style-02 .md-input:focus,
.contact-form-style-02 .md-textarea:focus {
  border-color: #4686e5 !important;
  box-shadow: 0 0 0 3px rgba(70,134,229,0.2) !important;
  background: rgba(70,134,229,0.08) !important;
}

/* ══════════════════════════════
   🛠️ SERVICES SECTION
══════════════════════════════*/
#service .service-icon-box,
#feature .service-icon-box {
  border-radius: var(--radius-lg) !important;
  transition: var(--transition) !important;
  box-shadow: var(--shadow-card) !important;
  border: 1px solid rgba(70,134,229,0.08) !important;
}
#service .service-icon-box:hover,
#feature .service-icon-box:hover {
  transform: translateY(-8px) !important;
  box-shadow: var(--shadow-hover) !important;
  border-color: rgba(70,134,229,0.3) !important;
}

/* ══════════════════════════════
   📱 WHATSAPP FLOAT BUTTON
══════════════════════════════*/
.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 25px;
  right: 25px;
  background-color: #25D366;
  color: white;
  border-radius: 50%;
  text-align: center;
  font-size: 28px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition) !important;
  animation: waBounce 3s ease-in-out infinite, waGlow 1.8s ease-in-out infinite !important;
}
.whatsapp-float:hover {
  background-color: #20b358;
}
.whatsapp-float::before,
.whatsapp-float::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(37,211,102,0.55);
  z-index: -1;
  pointer-events: none;
  animation: waRipple 2s ease-out infinite;
}
.whatsapp-float::after {
  animation-delay: 1s;
}
.whatsapp-float:hover {
  transform: scale(1.12) !important;
  box-shadow: 0 12px 40px rgba(37,211,102,0.85),
              0 0 30px 8px rgba(37,211,102,0.65) !important;
}
@keyframes waBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes waGlow {
  0%, 100% {
    box-shadow: 0 6px 24px rgba(37,211,102,0.45),
                0 0 0 0 rgba(37,211,102,0.7);
  }
  50% {
    box-shadow: 0 8px 32px rgba(37,211,102,0.85),
                0 0 28px 8px rgba(37,211,102,0.6);
  }
}
@keyframes waRipple {
  0%   { transform: scale(1);   opacity: 0.55; }
  80%  { transform: scale(1.9); opacity: 0;    }
  100% { transform: scale(1.9); opacity: 0;    }
}

/* ══════════════════════════════
   🔴 VIDEO POPUP BUTTON
══════════════════════════════*/
.video-animate-btn {
  font-family: 'Noto Sans Bengali', 'Sora', sans-serif !important;
  border-radius: 30px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  box-shadow: 0 4px 16px rgba(248,79,79,0.4) !important;
}

/* ══════════════════════════════
   📖 SECTION TITLES — Global upgrade
══════════════════════════════*/
.section-title h1 {
  font-family: 'Sora', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  line-height: 1.2 !important;
}
.section-title h2.cardo-font {
  letter-spacing: 1px !important;
}
hr.center_line,
hr.left-line {
  height: 3px !important;
  border-radius: 3px !important;
  border: none !important;
}
hr.center_line.default-bg {
  background: linear-gradient(90deg, transparent, #4686e5, transparent) !important;
}
hr.left-line.dark-bg {
  background: linear-gradient(90deg, #4686e5, transparent) !important;
  width: 80px !important;
}
hr.center_line.white-bg {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent) !important;
}

/* ══════════════════════════════
   🎞️ LOADER
══════════════════════════════*/
#loader-overlay {
  background: linear-gradient(135deg, #0d1b2e 0%, #1a2f55 100%) !important;
}

/* master.css sets `.loader { left: 49%; transform: translateY(-50%) }`, which puts the
   LEFT EDGE of the 80px box at 49% - so the spinner sits ~40px right of centre.
   Centre it on both axes instead. */
#loader-overlay .loader {
  left: 50% !important;
  -webkit-transform: translate(-50%, -50%) !important;
  transform: translate(-50%, -50%) !important;
}

/* ══════════════════════════════
   🎠 SLICK SLIDER ARROWS (if present)
══════════════════════════════*/
.slick-prev, .slick-next {
  background: rgba(70,134,229,0.9) !important;
  border-radius: 50% !important;
  width: 42px !important;
  height: 42px !important;
  transition: var(--transition) !important;
}
.slick-prev:hover, .slick-next:hover {
  background: var(--brand-red) !important;
  transform: scale(1.1) !important;
}

/* ══════════════════════════════
   ✨ SCROLL REVEAL ANIMATIONS
══════════════════════════════*/
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

.pricing-box,
.team-member,
.testimonial-content,
.counter-type-2,
.service-icon-box {
  animation: fadeInUp 0.6s ease both;
}
.col-md-4:nth-child(2) .pricing-box,
.col-md-4:nth-child(2) .team-member,
.col-md-4:nth-child(2) .testimonial-content { animation-delay: 0.1s; }
.col-md-4:nth-child(3) .pricing-box,
.col-md-4:nth-child(3) .team-member,
.col-md-4:nth-child(3) .testimonial-content { animation-delay: 0.2s; }

/* ══════════════════════════════
   📱 RESPONSIVE TWEAKS
══════════════════════════════*/
@media (max-width: 768px) {
  .counter-type-2 h3 { font-size: 2.2rem !important; }
  .pricing-box { margin-bottom: 20px; }
  #idp-planner { padding: 40px 0 !important; }
}
@media (max-width: 480px) {
  .section-title h1 { font-size: 1.5rem !important; }
  .counter-type-2 { padding: 20px 12px; }
}

/* ══════════════════════════════
   🔒 VIDEO POPUP MODAL
══════════════════════════════*/
#noticeVideoPopup {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  background: rgba(13,27,46,0.9) !important;
}
#noticeVideoPopup > div {
  border-radius: var(--radius-xl) !important;
  overflow: hidden !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6) !important;
}

/* ══════════════════════════════
   🌈 SELECTION COLOR
══════════════════════════════*/
::selection {
  background: rgba(70,134,229,0.25);
  color: #0d1b2e;
}
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f0f5ff;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #4686e5, #F5325C);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #F5325C, #4686e5);
}


/* ══════════════════════════════════════════════════════════
   📱 MOBILE STICKY PRICE BAR
   — শুধু mobile এ দেখাবে (991px এর নিচে)
   — scroll করলেও সবসময় উপরে আটকে থাকবে
   — JS লাগবে না, HTML এ একটু code যোগ করতে হবে
══════════════════════════════════════════════════════════ */

/* ── Sticky bar wrapper ── */
#mobile-price-bar {
  display: none; /* desktop এ hidden */
}

@media (max-width: 991px) {

  /* ── Sticky bar — fixed top ── */
  #mobile-price-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 60px; /* navbar height এর নিচে */
    left: 0;
    right: 0;
    z-index: 9990;
    background: #fff;
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg, #4686e5, #F5325C) 1;
    box-shadow: 0 4px 20px rgba(0,0,0,0.14);
    padding: 10px 18px;
    gap: 10px;
    /* Slide in animation */
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.38s cubic-bezier(0.4,0,0.2,1),
                opacity   0.30s ease;
  }

  /* JS দিয়ে .visible class যোগ করলে দেখাবে */
  #mobile-price-bar.visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* — Left: label + prices — */
  #mobile-price-bar .mpb-prices {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
  }

  #mobile-price-bar .mpb-label {
    font-family: 'Noto Sans Bengali', 'Sora', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    white-space: nowrap;
  }

  /* কাটা দাম (আসল) */
  #mobile-price-bar .mpb-actual {
    font-family: 'Sora', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #94a3b8;
    position: relative;
    display: inline-block;
  }
  #mobile-price-bar .mpb-actual::after {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 100%; height: 2px;
    background: #eb1506;
    transform: rotate(-8deg);
    opacity: 0.85;
  }

  /* ছাড়ের দাম */
  #mobile-price-bar .mpb-discount {
    font-family: 'Sora', sans-serif;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.5px;
    background: linear-gradient(90deg, #F5325C, #ff7a7a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* — Right: submit button — */
  #mobile-price-bar .mpb-btn {
    flex-shrink: 0;
    background: linear-gradient(90deg, #4686e5, #63a1f1);
    color: #fff;
    font-family: 'Noto Sans Bengali', 'Sora', sans-serif;
    font-size: 13px;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    padding: 9px 18px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(70,134,229,0.35);
    transition: all 0.3s ease;
    white-space: nowrap;
  }
  #mobile-price-bar .mpb-btn:hover,
  #mobile-price-bar .mpb-btn:active {
    background: linear-gradient(90deg, #F5325C, #ff7a7a);
    box-shadow: 0 6px 20px rgba(245,50,92,0.40);
    transform: scale(1.04);
  }
  #mobile-price-bar .mpb-btn:disabled {
    background: #cbd5e1;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.6;
  }

  /* ── Body padding যেন bar এর নিচে content চলে না যায় ── */
  body.mpb-active {
    padding-top: 52px; /* bar এর height */
  }

  /* ── অরিজিনাল sticky-right panel — mobile এ নিচে সরল ── */
  #idp-planner .col-lg-4 {
    order: 2; /* card গুলোর পরে দেখাবে */
  }
  #idp-planner .col-lg-8 {
    order: 1;
  }

} /* end @media */


/* ── MPB input row (mobile number field in sticky bar) ── */
@media (max-width: 991px) {

  #mobile-price-bar {
    flex-direction: column;
    gap: 0;
    padding: 10px 14px 8px;
  }

  .mpb-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
  }

  .mpb-input-row {
    width: 100%;
    margin-top: 8px;
  }

  .mpb-mobile-input {
    width: 100%;
    height: 38px;
    border: 1.5px solid rgba(70,134,229,0.35);
    border-radius: 10px;
    padding: 0 14px;
    font-family: 'Noto Sans Bengali', 'Sora', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #1e3a8a;
    background: #f0f5ff;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    box-sizing: border-box;
  }
  .mpb-mobile-input::placeholder {
    color: #94a3b8;
    font-size: 13px;
  }
  .mpb-mobile-input:focus {
    border-color: #4686e5;
    box-shadow: 0 0 0 3px rgba(70,134,229,0.14);
    background: #fff;
  }

  /* bar এর height বেড়েছে তাই body padding adjust */
  body.mpb-active {
    padding-top: 0 !important; /* navbar already handles gap */
  }

}

/* ══════════════════════════════
   🔹 NAVBAR (shared — applies on every page that includes site_navbar.html)
══════════════════════════════*/
.navbar.bootsnav.navbar-fixed .attr-nav {
  position: absolute;
  right: 15px;
  top: 0;
  height: 100%;
  display: flex !important;
  align-items: center;
}
.navbar.bootsnav.navbar-fixed .attr-nav > ul {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.navbar.bootsnav.navbar-fixed .attr-nav > ul > li {
  display: flex !important;
  align-items: center;
}
/* Collapse navbar to hamburger up to 1199px (items don't fit otherwise) */
@media (max-width: 1199px) {
  .navbar.bootsnav.navbar-fixed .attr-nav {
    display: none !important;
  }
  nav.navbar.bootsnav .navbar-header {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 70px !important;
    min-height: 70px !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    text-align: left !important;
  }
  nav.navbar.bootsnav .navbar-header > .logo {
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: block !important;
    height: auto !important;
    max-width: 60% !important;
    text-align: left !important;
    z-index: 2;
  }
  nav.navbar.bootsnav .navbar-header > .logo > a {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  nav.navbar.bootsnav .navbar-header > .logo img {
    max-height: 44px !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    opacity: 1 !important;
    margin: 0 !important;
  }
  nav.navbar.bootsnav .navbar-toggle {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    float: none !important;
    margin: 0 !important;
    min-width: 44px;
    min-height: 40px;
    line-height: 1 !important;
    z-index: 2;
  }
  nav.navbar.bootsnav .navbar-toggle .fa,
  nav.navbar.bootsnav .navbar-toggle .fa-solid,
  nav.navbar.bootsnav .navbar-toggle [class*="fa-"] {
    font-size: 22px !important;
    line-height: 1 !important;
    color: #fff !important;
    display: inline-block !important;
  }
  .navbar.bootsnav .nav > li.mobile-login-item {
    display: block !important;
    margin: 14px 15px;
    text-align: center;
    border-bottom: none !important;
  }
  .navbar.bootsnav .nav > li.mobile-login-item > a {
    background: linear-gradient(90deg, #F5325C, #ff7a7a) !important;
    color: #fff !important;
    border-radius: 25px !important;
    padding: 10px 18px !important;
    font-weight: 700 !important;
    display: inline-block !important;
    border: none !important;
    box-shadow: 0 3px 10px rgba(245,50,92,0.35);
  }
  .navbar.bootsnav .nav > li.mobile-login-item > a:hover,
  .navbar.bootsnav .nav > li.mobile-login-item > a:focus {
    background: linear-gradient(90deg, #ff7a7a, #F5325C) !important;
    color: #fff !important;
  }
  .navbar.bootsnav .navbar-collapse {
    display: none !important;
    width: 100%;
    max-height: 70vh;
    overflow-y: auto;
    padding: 0 !important;
    margin: 0;
    border-top: 1px solid rgba(0,0,0,0.06);
    background: #fff;
  }
  .navbar.bootsnav .navbar-collapse.in {
    display: block !important;
  }
  .navbar.bootsnav .nav.navbar-nav {
    float: none !important;
    margin: 0;
    width: 100%;
  }
  .navbar.bootsnav .nav.navbar-nav > li {
    float: none !important;
    display: block;
    width: 100%;
  }
  .navbar.bootsnav .nav.navbar-nav > li > a {
    padding: 14px 20px !important;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    color: #333 !important;
  }
  .navbar.bootsnav .nav .dropdown-menu {
    position: static !important;
    float: none;
    width: 100%;
    box-shadow: none;
    border: 0;
    background: #f8f9fa;
    padding: 0;
  }
  .navbar.bootsnav .nav .dropdown-menu > li > a {
    padding: 12px 35px !important;
    color: #444 !important;
    border-bottom: 1px solid rgba(0,0,0,0.04);
  }
}
/* ── Hamburger icon eye-catcher ── */
nav.navbar.bootsnav .navbar-toggle {
  background: linear-gradient(135deg, #F5325C, #ff7a7a) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  color: #fff !important;
  font-size: 22px !important;
  box-shadow: 0 3px 10px rgba(245,50,92,0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
nav.navbar.bootsnav .navbar-toggle:hover,
nav.navbar.bootsnav .navbar-toggle:focus {
  background: linear-gradient(135deg, #ff7a7a, #F5325C) !important;
  box-shadow: 0 4px 14px rgba(245,50,92,0.6);
  transform: scale(1.05);
  outline: none;
}
/* push nav items left so they don't overlap attr-nav Login button */
.navbar.bootsnav .navbar-collapse {
  padding-right: 115px !important;
}
/* Hide the in-menu Login li at desktop widths (>=1200px) — there the attr-nav Login shows */
@media (min-width: 1200px) {
  .navbar.bootsnav .nav > li.mobile-login-item {
    display: none !important;
  }
}
.navbar.bootsnav .nav > li > a {
  padding-left: 12px !important;
  padding-right: 12px !important;
  font-size: 13px !important;
}
.attr-nav > ul > li > a {
  color: #fff !important;
  background: none;
  border-radius: 0;
  padding: 8px 12px !important;
  font-weight: 600;
  transition: all 0.3s ease;
}
.attr-nav > ul > li.login-btn > a {
  background: linear-gradient(90deg, #F5325C, #ff7a7a) !important;
  border-radius: 25px !important;
  padding: 8px 18px !important;
  font-weight: 700 !important;
}
.attr-nav > ul > li.login-btn > a:hover {
  background: linear-gradient(90deg, #ff7a7a, #F5325C) !important;
  transform: translateY(-1px);
}

/* ── Sticky planner sidebar ───────────────────────────────────────────────
   `position: sticky` on #idp-planner .sticky-right never actually pinned, which
   is why a JS `position: fixed` hack had been bolted on - and that hack was what
   made the option cards jump: going fixed pulled the column out of the flex row,
   the row re-flowed and the grid changed column count mid-scroll.
   Two separate things were blocking real sticky:

   1. master.css:176 sets `.wrapper { overflow-x: hidden }`. A box cannot have
      overflow-x hidden and overflow-y visible, so the browser computes
      overflow-y as `auto`; .wrapper becomes a scroll container and sticky dies
      for everything inside it. `overflow-x: clip` clips identically WITHOUT
      creating a scroll container.
   2. `#idp-planner .row.g-4 { align-items: flex-start }` kept the column from
      stretching, so the column was exactly as tall as the card inside it and
      the sticky card had 0px of travel. Let the column fill the row instead. */
.wrapper {
  overflow-x: clip;
  overflow-y: visible;
}

@media (min-width: 992px) {
  /* the `section` type selector outranks index.html's inline
     `#idp-planner .row.g-4 { align-items: flex-start !important }`, which sits
     later in the cascade and would otherwise win at equal specificity */
  section#idp-planner .row.g-4 {
    align-items: stretch !important;
  }
  section#idp-planner .row.g-4 > [class*="col-"] {
    display: block !important;
  }
  section#idp-planner .sticky-right {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 110px !important;
    align-self: flex-start !important;
  }
}

/* ── Stop the Login button from jumping ───────────────────────────────────
   plugins.js adds/removes `navbar-transparent` (and `no-background`) on EVERY
   scroll event once past 34px. bootsnav.css pairs those classes with
   `transition: all 1s ease-in-out` on the navbar, a border that appears and
   disappears, and `padding-top/bottom: 29px` on the attr-nav links - so each
   toggle animates the navbar's GEOMETRY and the button visibly slides.
   Fix: keep the box identical in both states and animate paint only. */
nav.navbar.bootsnav,
nav.navbar.bootsnav.no-background,
nav.navbar.bootsnav.navbar-transparent {
  border: none !important;
  -webkit-transition: background-color .25s ease, box-shadow .25s ease !important;
  transition: background-color .25s ease, box-shadow .25s ease !important;
}
nav.navbar.bootsnav .attr-nav > ul > li > a,
nav.navbar.bootsnav.navbar-transparent.white .attr-nav > ul > li > a,
nav.navbar.bootsnav.no-background.white .attr-nav > ul > li > a {
  padding: 8px 12px !important;
  -webkit-transition: background-color .25s ease, color .25s ease !important;
  transition: background-color .25s ease, color .25s ease !important;
}
nav.navbar.bootsnav .attr-nav > ul > li.login-btn > a,
nav.navbar.bootsnav.navbar-transparent.white .attr-nav > ul > li.login-btn > a,
nav.navbar.bootsnav.no-background.white .attr-nav > ul > li.login-btn > a {
  padding: 9px 20px !important;
  line-height: 1.45 !important;
  -webkit-transition: background .25s ease, box-shadow .25s ease, -webkit-transform .18s ease !important;
  transition: background .25s ease, box-shadow .25s ease, transform .18s ease !important;
}
/* hover moves it with a transform only, which never affects layout */
nav.navbar.bootsnav .attr-nav > ul > li.login-btn > a:hover {
  box-shadow: 0 8px 20px -8px rgba(245, 50, 92, .9) !important;
}


/* ── Option cards: stop them colliding when tapped ────────────────────────
   `#idp-planner .card.option-card:hover` (line ~207) lifts the card with
   `translateY(-6px) scale(1.02)` and paints `--shadow-hover`
   (`0 16px 48px rgba(70,134,229,.22)`). On a phone :hover LATCHES after a tap,
   so the tapped card grows ~2px on each side and throws a 48px-blur glow 16px
   downward - straight across the 12px gutter and onto its neighbours. That is
   what reads as the cards "joining" as you scroll through them.

   Order matters here: the neutraliser must come FIRST, because the lift below
   uses an identical selector and a media query adds no specificity, so on a
   tie the later rule wins. */
#idp-planner .card.option-card:hover,
#idp-planner .card.option-card:focus-within {
  transform: none !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .07) !important;
}
#idp-planner .card.option-card:hover .card-img-top {
  transform: none !important;
}

/* Real pointers still get a lift - but a vertical one only, so the card never
   grows sideways into the gutter, and with a shadow that stays under itself. */
@media (hover: hover) and (pointer: fine) {
  #idp-planner .card.option-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 26px -12px rgba(70, 134, 229, .55) !important;
    border-color: rgba(70, 134, 229, .35) !important;
  }
  /* the zoom happens inside the card's own overflow:hidden, so it cannot
     reach a neighbour */
  #idp-planner .card.option-card:hover .card-img-top {
    transform: scale(1.04) !important;
  }
}

/* Selected: draw the ring with `outline`, which paints on top of the image,
   is never clipped by the card's overflow:hidden and costs no layout - the old
   `box-shadow: 0 0 0 4px` ring spilled 4px into the gutter instead. */
#idp-planner .card.option-card.selected {
  border-color: #4686e5 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .07) !important;
  outline: 2px solid #4686e5 !important;
  outline-offset: -6px !important;
}
#idp-planner .card.option-card.selected:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, .07) !important;
}

/* ==========================================================================
   LOGIN-BUTTON JITTER FIX  (DEFECT 2)

   FILE: D:/makeidbd/makeidbd2026/idmaker/static/site_assets/css/makeidbd_enhanced.css
   WHERE: append at the very END of the file, i.e. AFTER the existing
          "Stop the Login button from jumping" block that ends at line 1200.

   WHY HERE: site_base.html loads master.css (96, which @imports bootsnav.css
   at master.css:56) -> responsive.css (97) -> makeidbd_enhanced.css (98) ->
   tabbar.css (99) -> revolution/*.css (101-103) -> {% block extra_head %} (105).
   tabbar.css, the revolution sheets and index.html's inline style contain no
   navbar selectors, so this file is effectively last for the navbar. Even so,
   every geometry property below carries !important AND leads with `nav` so it
   wins on specificity, not on source order.

   WHAT STILL FLIPS ON SCROLL AFTER THIS (on purpose): only box-shadow
   (bootsnav.css:9 vs :142), animated at .25s by the existing rule at
   makeidbd_enhanced.css:1175-1181. The background is already permanently
   opaque (makeidbd_enhanced.css:36-41, !important) and the border already
   permanently none (:1178), so nothing else moves or repaints.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FREEZE THE BAR HEIGHT.  plugins.js strips `navbar-transparent` at
      scrollTop > 34; bootsnav.css:142 says 80px, bootsnav.css:103 says 60px.
      Scoped to >=992px, NOT >=1200px, because bootsnav's transparent block
      opens at `@media (min-width:1024px)` (bootsnav.css:113) - below 1200px the
      pill is hidden but the bar still flipped while
      `nav.navbar.bootsnav .navbar-header{height:70px !important}`
      (makeidbd_enhanced.css:992-1002) held the logo at 70px, so the logo spilled
      out of a 60px bar. 992px is the floor because responsive.css:229
      (`height:auto`, needed by the open hamburger panel) and
      `#mobile-price-bar{top:60px}` (makeidbd_enhanced.css:790) are both
      `@media (max-width:991px)`. Nothing between 992 and 1199 assumes 60px.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  nav.navbar.bootsnav.navbar-fixed,
  nav.navbar.bootsnav.navbar-fixed.navbar-transparent,
  nav.navbar.bootsnav.navbar-fixed.navbar-transparent.white,
  nav.navbar.bootsnav.navbar-fixed.no-background,
  nav.navbar.bootsnav.navbar-fixed.no-background.white {
    height: 70px !important;
    min-height: 70px !important;
    /* paint only. bootsnav.css:9 and makeidbd_enhanced.css:41 both say
       `transition: all`, which would animate the height itself. */
    -webkit-transition: background-color .25s ease, box-shadow .25s ease !important;
            transition: background-color .25s ease, box-shadow .25s ease !important;
  }
}

@media (min-width: 1200px) {

  /* ------------------------------------------------------------------------
     2. FREEZE THE LOGO BOX. master.css:274 = 80px while transparent,
        master.css:278 = 60px once it is gone; master.css:279 animates the img
        over .5s. The logo is the tallest float inside
        `nav.bootsnav .container` (bootsnav.css:3, position:relative), and
        Bootstrap 3's `.container:after{clear:both}` means that float really
        does set the container height that `.attr-nav` is measured against.
        MUST stay >=1200px: at (0,5,1)!important this would otherwise outrank
        makeidbd_enhanced.css:1003's (0,3,2)!important `height:auto` and break
        the mobile logo.
     ------------------------------------------------------------------------ */
  nav.navbar.bootsnav.navbar-fixed .logo,
  nav.navbar.bootsnav.navbar-fixed.navbar-transparent .logo,
  nav.navbar.bootsnav.navbar-fixed.no-background .logo {
    height: 70px !important;
    -webkit-transition: none !important;
            transition: none !important;
  }
  nav.navbar.bootsnav.navbar-fixed .logo img {
    max-height: 44px !important;
    width: auto !important;
    -webkit-transition: none !important;
            transition: none !important;
  }

  /* ------------------------------------------------------------------------
     3. FREEZE THE MENU-LINK BOX AT EXACTLY 70px.
        bootsnav.css:147 = 29px top/bottom while transparent;
        bootsnav.css:116 = 20px once it is gone.
        25 + 20 + 25 = 70. `line-height` is pinned explicitly rather than
        inherited from Bootstrap 3's `.navbar-nav>li>a{line-height:20px}`, and
        bootsnav.css:12's `margin-bottom:-2px` is zeroed - without those two the
        box is 68px in a 70px bar and shifts with any webfont swap.
        Left/right padding is deliberately NOT touched: it belongs to
        makeidbd_enhanced.css:1144-1147 (12px, font-size 13px).
     ------------------------------------------------------------------------ */
  nav.navbar.bootsnav.navbar-fixed ul.nav > li > a,
  nav.navbar.bootsnav.navbar-fixed.navbar-transparent.white ul.nav > li > a,
  nav.navbar.bootsnav.navbar-fixed.no-background.white ul.nav > li > a {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
    line-height: 20px !important;
    margin-bottom: 0 !important;
  }

  /* ------------------------------------------------------------------------
     4. ONE GEOMETRY FOR .attr-nav IN BOTH STATES.
        Kills the relative-float <-> absolute swap (bootsnav.css:141 at (0,4,1)
        beats makeidbd_enhanced.css:966 at (0,4,0) while un-scrolled), which is
        the ~15px sideways teleport, and kills the animated 80px/60px/100%
        height churn. `top:0;bottom:0;height:auto` spans the now-frozen 70px
        container, so align-items:center lands on the same pixel in both states.
     ------------------------------------------------------------------------ */
  nav.navbar.bootsnav.navbar-fixed .attr-nav,
  nav.navbar.bootsnav.navbar-fixed.navbar-transparent .attr-nav,
  nav.navbar.bootsnav.navbar-fixed.navbar-transparent.white .attr-nav,
  nav.navbar.bootsnav.navbar-fixed.no-background .attr-nav {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 15px !important;
    left: auto !important;
    height: auto !important;
    float: none !important;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center !important;
        -ms-flex-align: center !important;
            align-items: center !important;
    margin: 0 !important;
    padding-left: 0 !important;
    border-left: 0 !important;   /* stray cart/search hairline, bootsnav.css:44 */
    z-index: 999;
    -webkit-transition: none !important;   /* bootsnav.css:44 + :141 `all .3s` */
            transition: none !important;
  }

  nav.navbar.bootsnav.navbar-fixed .attr-nav > ul {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center !important;
        -ms-flex-align: center !important;
            align-items: center !important;
    width: auto !important;      /* bootsnav.css:48 has width:100%;height:100% */
    height: auto !important;
    margin: 0 !important;        /* bootsnav.css:48 has margin-bottom:-7px */
    padding: 0 !important;
    list-style: none !important;
    -webkit-transition: none !important;
            transition: none !important;
  }

  nav.navbar.bootsnav.navbar-fixed .attr-nav > ul > li,
  nav.navbar.bootsnav.navbar-fixed .attr-nav > ul > li.login-btn {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center !important;
        -ms-flex-align: center !important;
            align-items: center !important;
    float: none !important;
    vertical-align: middle !important;  /* bootsnav.css:49 uses table-cell */
    margin: 0 !important;
    padding: 0 !important;
    -webkit-transition: none !important;
            transition: none !important;
  }

  /* Clearance for the pill. Pill left edge = container padding-box right
     - (15px inset + 104px min-width) = R-119, so the collapse needs at least
     104px of right padding; 124px leaves a clean 20px gap. At >=1200px the
     container is 1170px (bootstrap.min.css) and the seven Bengali nav items
     plus the logo measure ~810px, so there is >200px of slack. */
  nav.navbar.bootsnav .navbar-collapse {
    padding-right: 124px !important;
  }
}

/* --------------------------------------------------------------------------
   4b. REPAIR A PRE-EXISTING BUG THE GUTTER RULE CAUSES ON MOBILE.
       makeidbd_enhanced.css:1074-1083 sets `padding:0 !important` on the
       collapse inside @media (max-width:1199px), but :1135-1137 sets
       `padding-right:115px !important` UNSCOPED, at the same (0,3,0)
       specificity and LATER in the file - so the hamburger panel currently
       carries 115px of right padding and `li.mobile-login-item`
       (text-align:center) renders visibly off-centre. (0,3,1) + !important
       wins this back on specificity rather than source order.
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  nav.navbar.bootsnav .navbar-collapse {
    padding-right: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   5. THE PILL - FIXED BOX, LAYOUT-NEUTRAL HOVER.
      Unscoped on purpose: `.attr-nav` is display:none below 1200px
      (makeidbd_enhanced.css:989-991), `.sm-display-none` (responsive.css:264)
      and `.hidden-xs` (bootstrap.min.css) also hide it, so these rules cost
      nothing there.

      SPECIFICITY: the rule these must beat is makeidbd_enhanced.css:1189-1196
      `nav.navbar.bootsnav.navbar-transparent.white .attr-nav > ul > li.login-btn > a`
      = (0,6,4) + !important. Adding `.navbar-fixed` makes these (0,7,4), a real
      win rather than a source-order tie. The hover selectors are (0,7,5), which
      beats both :1198 (0,4,5) and :89-91 (0,1,3)!important - the latter is what
      `transform: none !important` finally neutralises (its translateY(-2px) has
      been silently overriding the intended -1px at :1165 all along).

      Fixed height + min-width means the Montserrat/Sora webfont swap
      (master.css:51 and makeidbd_enhanced.css:7, both display=swap) can no
      longer reflow the pill and nudge its right-anchored edge.

      No `filter:` anywhere: toggling one on :hover would create and destroy a
      stacking context and a containing block for any future absolutely
      positioned child (bootsnav.css:51's `span.badge` is exactly that pattern).
   -------------------------------------------------------------------------- */
nav.navbar.bootsnav.navbar-fixed .attr-nav > ul > li.login-btn > a,
nav.navbar.bootsnav.navbar-fixed.navbar-transparent.white .attr-nav > ul > li.login-btn > a,
nav.navbar.bootsnav.navbar-fixed.no-background.white .attr-nav > ul > li.login-btn > a {
  -webkit-box-sizing: border-box !important;
          box-sizing: border-box !important;
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  -webkit-box-align: center !important;
      -ms-flex-align: center !important;
          align-items: center !important;
  -webkit-box-pack: center !important;
      -ms-flex-pack: center !important;
          justify-content: center !important;

  height: 38px !important;      /* fixed box: no vertical reflow, ever */
  min-width: 104px !important;  /* fixed box: no font-swap reflow      */
  padding: 0 22px !important;
  margin: 0 !important;

  line-height: 1 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .4px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  color: #fff !important;

  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #F5325C, #ff7a7a) !important;
  box-shadow: 0 4px 14px rgba(245, 50, 92, .32) !important;

  -webkit-transform: none !important;   /* beats makeidbd_enhanced.css:90 */
          transform: none !important;
  -webkit-transition: box-shadow .2s ease !important;
          transition: box-shadow .2s ease !important;
}

/* Hover: gradient swap + deeper glow. Zero layout, zero position change. */
nav.navbar.bootsnav.navbar-fixed .attr-nav > ul > li.login-btn > a:hover,
nav.navbar.bootsnav.navbar-fixed .attr-nav > ul > li.login-btn > a:focus,
nav.navbar.bootsnav.navbar-fixed.navbar-transparent.white .attr-nav > ul > li.login-btn > a:hover,
nav.navbar.bootsnav.navbar-fixed.navbar-transparent.white .attr-nav > ul > li.login-btn > a:focus,
nav.navbar.bootsnav.navbar-fixed.no-background.white .attr-nav > ul > li.login-btn > a:hover,
nav.navbar.bootsnav.navbar-fixed.no-background.white .attr-nav > ul > li.login-btn > a:focus {
  background: linear-gradient(90deg, #ff7a7a, #F5325C) !important;
  box-shadow: 0 6px 22px rgba(245, 50, 92, .55) !important;
  color: #fff !important;
  text-decoration: none !important;
  -webkit-transform: none !important;   /* kills the -2px lift at :90 */
          transform: none !important;
  outline: none !important;
}

/* Keyboard ring drawn with box-shadow so it adds no box and no layout. */
nav.navbar.bootsnav.navbar-fixed .attr-nav > ul > li.login-btn > a:focus-visible {
  box-shadow: 0 6px 22px rgba(245, 50, 92, .55),
              0 0 0 3px rgba(255, 255, 255, .65) !important;
}

nav.navbar.bootsnav.navbar-fixed .attr-nav > ul > li.login-btn > a:active {
  box-shadow: 0 2px 8px rgba(245, 50, 92, .45) !important;
  -webkit-transform: none !important;
          transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  nav.navbar.bootsnav.navbar-fixed,
  nav.navbar.bootsnav.navbar-fixed .logo,
  nav.navbar.bootsnav.navbar-fixed .attr-nav,
  nav.navbar.bootsnav.navbar-fixed .attr-nav > ul > li.login-btn > a {
    -webkit-transition: none !important;
            transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   DEAD CODE YOU MAY NOW DELETE (verified, no behaviour change):
     makeidbd_enhanced.css:1163-1166  `.attr-nav > ul > li.login-btn > a:hover
       { transform: translateY(-1px); }` - never applied; line 90's !important
       always beat it, and it is now fully superseded.
     makeidbd_enhanced.css:43-46      `.navbar.bootsnav.scroll-on { ... }`
       - grep over static/site_assets/js/{master,plugins,tabbar,pwa}.js finds
         zero occurrences of `scroll-on`; nothing ever adds that class.
   REMAINING (not fixable from CSS): plugins.js still runs an unthrottled
   window scroll listener doing addClass/removeClass at a bare `>34` with no
   hysteresis. After this file both states render identically so the jitter is
   gone, but the style recalcs remain. The clean removal is to drop
   `navbar-transparent` from templates/partials/site_navbar.html:3 - the
   handler's guard is `a.hasClass("navbar-transparent")&&...` so it would never
   bind - and the CSS above already supplies the intended look in both states.
   -------------------------------------------------------------------------- */


/* ── Testimonials on small screens ────────────────────────────────────────
   master.css:1624 gives the card `padding: 40px; margin: 50px auto`, which is
   fine on a third of a desktop row but leaves almost no text column once the
   slide itself is phone-width. */
@media (max-width: 767px) {
  .testimonial-item .testimonial-content {
    padding: 26px 22px !important;
    margin: 22px auto !important;
    max-width: 520px;
  }
  .testimonial-item .testimonial-content p {
    text-align: center;
    font-size: 15px !important;
    line-height: 1.85 !important;
  }
  .testimonial-item .testimonial-content img {
    width: 84px !important;
    margin-top: 14px;
  }
  .testimonial-item .testimonial-content .icofont-quote-left {
    font-size: 34px !important;
    margin-top: 0 !important;
    display: block;
  }
  /* the slide peeking in from the side used to clip the card's shadow */
  .testimonial .slick-list { padding-left: 0 !important; padding-right: 0 !important; }
}