/* ══════════════════════════════════════════════════════════════════
   1. CSS VARIABLES
   ══════════════════════════════════════════════════════════════════ */
:root {
  /* ── Global Palette ── */
  --primary:        #f5970f;
  --primary-light:  #ffb03b;
  --secondary:      #a40003;
  --secondary-dark: #7a0002;
  --black:          #000000;
  --white:          #ffffff;

  /* ── Global Aliases ── */
  --gold:        var(--primary);
  --gold-light:  var(--primary-light);
  --red:         var(--secondary);
  --red-deep:    var(--secondary-dark);
  --dark:        var(--black);
  --cream:       #ffffff;
  --text-body:   #333333;
  --text-muted:  #666666;
  --border:      rgba(245, 151, 15, 0.2);
  --max-w:       1300px;
  --shadow-soft: 0 22px 56px rgba(0, 0, 0, 0.06);
  --bs-body-font-size: 1.8rem;

  /* ── punch_API prefix ── */
  --punch_API-gold:       #C8860A;
  --punch_API-gold-light: #E8A020;
  --punch_API-gold-pale:  #F5D48B;
  --punch_API-red:        #8B1A1A;
  --punch_API-red-deep:   #6B0F0F;
  --punch_API-cream:      #FDF8F0;
  --punch_API-white:      #FFFFFF;
  --punch_API-dark:       #1A0A00;
  --punch_API-text-body:  #3D2008;
  --punch_API-text-muted: #7A5C3A;
  --punch_API-border:     rgba(200, 134, 10, 0.2);
  --punch_API-max-w:      1300px;

  /* ── sade-sati prefix ── */
  --sade-sati-gold:       #C8860A;
  --sade-sati-gold-light: #E8A020;
  --sade-sati-gold-pale:  #F5D48B;
  --sade-sati-red:        #D32F2F;
  --sade-sati-red-deep:   #B71C1C;
  --sade-sati-cream:      #FDF8F0;
  --sade-sati-white:      #FFFFFF;
  --sade-sati-dark:       #1A0A00;
  --sade-sati-text-body:  #3D2008;
  --sade-sati-text-muted: #7A5C3A;
  --sade-sati-border:     rgba(200, 134, 10, 0.2);
  --sade-sati-max-w:      1300px;

  /* ── free-kundali prefix ── */
  --free-kundali-gold:       #C8860A;
  --free-kundali-gold-light: #E8A020;
  --free-kundali-gold-pale:  #F5D48B;
  --free-kundali-red:        #8B1A1A;
  --free-kundali-red-deep:   #6B0F0F;
  --free-kundali-cream:      #FDF8F0;
  --free-kundali-white:      #FFFFFF;
  --free-kundali-dark:       #1A0A00;
  --free-kundali-text-body:  #3D2008;
  --free-kundali-text-muted: #7A5C3A;
  --free-kundali-border:     rgba(200, 134, 10, 0.2);
  --free-kundali-max-w:      1300px;

  /* ── lucky-date prefix ── */
  --lucky-date-gold:       #C8860A;
  --lucky-date-gold-light: #E8A020;
  --lucky-date-gold-pale:  #F5D48B;
  --lucky-date-red:        #8B1A1A;
  --lucky-date-red-deep:   #6B0F0F;
  --lucky-date-cream:      #FDF8F0;
  --lucky-date-white:      #FFFFFF;
  --lucky-date-dark:       #1A0A00;
  --lucky-date-text-body:  #3D2008;
  --lucky-date-text-muted: #7A5C3A;
  --lucky-date-border:     rgba(200, 134, 10, 0.2);
  --lucky-date-max-w:      1300px;

   --love-calculator-gold: #C8860A;
    --love-calculator-gold-light: #E8A020;
    --love-calculator-gold-pale: #F5D48B;
    --love-calculator-red: #D32F2F;
    --love-calculator-red-deep: #B71C1C;
    --love-calculator-cream: #FDF8F0;
    --love-calculator-white: #FFFFFF;
    --love-calculator-dark: #1A0A00;
    --love-calculator-text-body: #3D2008;
    --love-calculator-text-muted: #7A5C3A;
    --love-calculator-border: rgba(200, 134, 10, 0.2);
    --love-calculator-max-w: 1300px;
          --deep:   var(--secondary-dark, #7a0002);


    --red-hover: #a52020;
    --cream:     #fdf8f2;
    --cream-dk:  #f5ede0;
    --text:      #2e1a08;
    --muted:     #7a6350;
    --card-bg:   #ffffff;
    --sh-sm:     0 2px 12px rgba(139,26,26,.07);
    --sh-md:     0 6px 28px rgba(139,26,26,.13);
    --sh-lg:     0 14px 48px rgba(139,26,26,.18);
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
}


/* ══════════════════════════════════════════════════════════════════
   2. RESET & BASE
   ══════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Scoped reset for lucky-date (avoids conflicts) */
.lucky-date-wrap *, .lucky-date-wrap *::before, .lucky-date-wrap *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}

html { scroll-behavior: smooth; }

body {
  font-family: "Poppins", sans-serif;
  background: var(--white);
  color: var(--text-body);
  overflow-x: hidden;
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

img  { max-width: 100%; height: auto; display: block; }
ul   { list-style: none; }
a    { text-decoration: none; color: inherit; }



/* ── Section Wrappers ───────────────────────────────────────────── */
.section-wrap,
.punch_API-section-wrap,
.sade-sati-section-wrap,
.free-kundali-section-wrap,
.lucky-date-section-wrap {
  margin: 0 auto;
  padding: 0 24px;
  max-width: 1300px;
}

/* ── Gold Labels ────────────────────────────────────────────────── */
.gold-label,
.punch_API-gold-label,
.sade-sati-gold-label,
.free-kundali-gold-label,
.lucky-date-gold-label {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.gold-label                { color: var(--primary); }
.punch_API-gold-label      { color: var(--punch_API-gold); }
.sade-sati-gold-label      { color: var(--sade-sati-gold); }
.free-kundali-gold-label   { color: var(--free-kundali-gold); }
.lucky-date-gold-label     { color: var(--lucky-date-gold); }
.page-template-about-template .gold-label{
      color: #c9a14a;
}

/* ── Section Titles ─────────────────────────────────────────────── */
.section-title,
.punch_API-section-title,
.sade-sati-section-title,
.free-kundali-section-title,
.lucky-date-section-title {
  font-size: clamp(24px, 3.5vw, 42px);
  font-weight: 800;
  line-height: 1.2;
}
.section-title             { color: var(--black); }
.punch_API-section-title   { color: var(--punch_API-dark); }
.sade-sati-section-title   { color: var(--sade-sati-dark); }
.free-kundali-section-title{ color: var(--free-kundali-dark); }
.lucky-date-section-title  { color: var(--lucky-date-dark); }

/* Title accent spans */
.section-title span              { color: var(--primary); }
.punch_API-section-title span    { color: var(--punch_API-gold); }
.sade-sati-section-title span    { color: var(--sade-sati-gold); }
.free-kundali-section-title span { color: var(--free-kundali-gold); }
.lucky-date-section-title span   { color: var(--lucky-date-gold); }

/* ── Divider Ornaments ──────────────────────────────────────────── */
.divider-ornament,
.punch_API-divider-ornament,
.sade-sati-divider-ornament,
.free-kundali-divider-ornament,
.lucky-date-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 28px;
  justify-content: center;
}
.page-template-Consultion-template .features-header .divider-ornament .line{
      background: linear-gradient(90deg, #a40003, transparent);

}
.page-template-Consultion-template .features-header .divider-ornament .line.right {
  background: linear-gradient(270deg, #a40003, transparent);

}
.page-template-Consultion-template .features-header .divider-ornament .star{
      color: #a40003;
}
/* Lines */
.divider-ornament .line,
.punch_API-divider-ornament .punch_API-line,
.sade-sati-divider-ornament .sade-sati-line,
.free-kundali-divider-ornament .free-kundali-line,
.lucky-date-divider .lucky-date-line {
  flex: 1;
  height: 1px;
}
.divider-ornament .line              { max-width: 170px; background: linear-gradient(90deg, var(--primary-light), transparent); }
.punch_API-divider-ornament .punch_API-line   { max-width: 170px; background: linear-gradient(90deg, var(--punch_API-gold-light), transparent); }
.sade-sati-divider-ornament .sade-sati-line   { max-width: 80px;  background: linear-gradient(90deg, var(--sade-sati-gold-light), transparent); }
.free-kundali-divider-ornament .free-kundali-line { max-width: 170px; background: linear-gradient(90deg, var(--free-kundali-gold-light), transparent); }
.lucky-date-divider .lucky-date-line { max-width: 80px;  background: linear-gradient(90deg, var(--lucky-date-gold-light), transparent); }

/* Right-side lines */
.divider-ornament .line.right                                 { background: linear-gradient(270deg, var(--primary-light), transparent); }
.punch_API-divider-ornament .punch_API-line.punch_API-right   { background: linear-gradient(270deg, var(--punch_API-gold-light), transparent); }
.sade-sati-divider-ornament .sade-sati-line.sade-sati-right   { background: linear-gradient(270deg, var(--sade-sati-gold-light), transparent); }
.free-kundali-divider-ornament .free-kundali-line.free-kundali-right { background: linear-gradient(270deg, var(--free-kundali-gold-light), transparent); }
.lucky-date-divider .lucky-date-line-right                    { background: linear-gradient(270deg, var(--lucky-date-gold-light), transparent); }

/* Stars inside dividers */
.divider-ornament .star,
.punch_API-divider-ornament .punch_API-star,
.sade-sati-divider-ornament .sade-sati-star,
.free-kundali-divider-ornament .free-kundali-star,
.lucky-date-divider .lucky-date-star {
  font-size: 18px;
}
.divider-ornament .star              { color: var(--primary); }
.punch_API-divider-ornament .punch_API-star   { color: var(--punch_API-gold); }
.sade-sati-divider-ornament .sade-sati-star   { color: var(--sade-sati-gold); }
.free-kundali-divider-ornament .free-kundali-star { color: var(--free-kundali-gold); }
.lucky-date-divider .lucky-date-star { color: var(--lucky-date-gold); }


/* ── Shared Button Base ─────────────────────────────────────────── */
.btn-gold,
.punch_API-btn-gold,
.sade-sati-jyotisham-generate-btn,
.free-kundali-btn-gold,
.lucky-date-btn-gold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: none;
  padding: 14px 34px;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  color: #fff;
}
/* Shimmer pseudo-element shared */
.btn-gold::after,
.punch_API-btn-gold::after,
.lucky-date-btn-gold::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.14);
  transform: translateX(-100%) skewX(-15deg);
  transition: transform 0.4s ease;
}
.btn-gold:hover::after,
.punch_API-btn-gold:hover::after,
.lucky-date-btn-gold:hover::after {
  transform: translateX(110%) skewX(-15deg);
}

/* Gold button backgrounds */
.btn-gold {
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 60%, #c67805 100%);
  z-index: 1;
  animation: pulseShadow 2s infinite;
}
.btn-gold:hover {
  box-shadow: 0 6px 28px rgba(245, 151, 10, 0.45);
  color: #fff;
  transform: translateY(-1px);
}

.punch_API-btn-gold,
.sade-sati-jyotisham-generate-btn {
  background: linear-gradient(135deg, var(--punch_API-gold-light) 0%, var(--punch_API-gold) 60%, #A06A05 100%) !important;
  color: #fff !important;
  animation: pulseShadow 2s infinite;
}
.punch_API-btn-gold:hover {
  box-shadow: 0 6px 28px rgba(200, 134, 10, 0.45);
  color: #fff;
  transform: translateY(-1px);
}

.lucky-date-btn-gold {
  background: linear-gradient(135deg, var(--lucky-date-gold-light) 0%, var(--lucky-date-gold) 60%, #A06A05 100%);
}
.lucky-date-btn-gold:hover {
  box-shadow: 0 6px 28px rgba(200, 134, 10, 0.45);
  color: #fff;
  transform: translateY(-1px);
}

/* ── Outline Buttons ────────────────────────────────────────────── */
.btn-outline-gold,
.punch_API-btn-outline-gold,
.lucky-date-btn-outline-gold {
  background: transparent;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 13px 32px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}
.btn-outline-gold           { color: var(--primary);       border: 1.5px solid var(--primary); }
.punch_API-btn-outline-gold { color: var(--punch_API-gold); border: 1.5px solid var(--punch_API-gold); }
.lucky-date-btn-outline-gold{ color: var(--lucky-date-gold); border: 1.5px solid var(--lucky-date-gold); }

.btn-outline-gold:hover            { background: var(--primary);       color: #fff; box-shadow: 0 6px 22px rgba(245,151,10,.35); }
.punch_API-btn-outline-gold:hover  { background: var(--punch_API-gold); color: #fff; box-shadow: 0 6px 22px rgba(200,134,10,.35); }
.lucky-date-btn-outline-gold:hover { background: var(--lucky-date-gold);color: #fff; box-shadow: 0 6px 22px rgba(200,134,10,.35); }


/* ── Starfield Canvases ─────────────────────────────────────────── */
#starCanvas,
#punch_API-starCanvas,
#free-kundali-starCanvas,
#lucky-date-star-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.3;
}


/* ── Reveal Animations (shared logic) ──────────────────────────── */
.reveal,
.punch_API-reveal,
.sade-sati-reveal,
.free-kundali-reveal,
.lucky-date-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.visible,
.punch_API-reveal.punch_API-visible,
.sade-sati-reveal.sade-sati-visible,
.free-kundali-reveal.free-kundali-visible,
.lucky-date-reveal.lucky-date-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Delay helpers */
.reveal-delay-1, .punch_API-reveal-delay-1, .sade-sati-reveal-delay-1, .free-kundali-reveal-delay-1, .lucky-date-reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2, .punch_API-reveal-delay-2, .sade-sati-reveal-delay-2, .free-kundali-reveal-delay-2, .lucky-date-reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3, .punch_API-reveal-delay-3, .sade-sati-reveal-delay-3, .free-kundali-reveal-delay-3, .lucky-date-reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }


/* ══════════════════════════════════════════════════════════════════
   4. SHARED KEYFRAME ANIMATIONS
   ══════════════════════════════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Namespaced versions point to same logic */
@keyframes punch_API-fadeUp    { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:translateY(0); } }
@keyframes sade-sati-fadeUp    { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:translateY(0); } }
@keyframes free-kundali-fadeUp { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:translateY(0); } }
@keyframes lucky-date-fadeUp   { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:translateY(0); } }

@keyframes pulseShadow {
  0%   { box-shadow: 0 0 0 0 rgba(245, 151, 15, 0.4); }
  70%  { box-shadow: 0 0 0 15px rgba(245, 151, 15, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 151, 15, 0); }
}

@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(7px); }
}

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

/* Heartbeat — shared */
@keyframes heartbeat          { 0%{transform:scale(1)}15%{transform:scale(1.15)}30%{transform:scale(1)}45%{transform:scale(1.15)}60%{transform:scale(1)}100%{transform:scale(1)} }
@keyframes punch_API-heartbeat{ 0%{transform:scale(1)}15%{transform:scale(1.15)}30%{transform:scale(1)}45%{transform:scale(1.15)}60%{transform:scale(1)}100%{transform:scale(1)} }
@keyframes free-kundali-heartbeat{ 0%{transform:scale(1)}15%{transform:scale(1.15)}30%{transform:scale(1)}45%{transform:scale(1.15)}60%{transform:scale(1)}100%{transform:scale(1)} }
@keyframes lucky-date-heartbeat  { 0%{transform:scale(1)}15%{transform:scale(1.15)}30%{transform:scale(1)}45%{transform:scale(1.15)}60%{transform:scale(1)}100%{transform:scale(1)} }

@keyframes lucky-date-twinkle {
  0%, 100% { opacity: 0.3; transform: scale(1);   }
  50%       { opacity: 1;   transform: scale(1.2); }
}
@keyframes sade-sati-glow {
  0%   { box-shadow: 0 0 5px var(--sade-sati-gold-light); }
  50%  { box-shadow: 0 0 20px var(--sade-sati-gold-light), 0 0 10px var(--sade-sati-gold); }
  100% { box-shadow: 0 0 5px var(--sade-sati-gold-light); }
}


/* ══════════════════════════════════════════════════════════════════
   5. INFO / SERVICE CARDS  (shared card pattern)
   ══════════════════════════════════════════════════════════════════ */
.service-card,
.punch_API-info-card,
.sade-sati-info-card,
.free-kundali-b-text,   /* text part only */
.lucky-date-info-card {
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.22, 0.84, 0.44, 1);
}

/* Left accent bar — shared pattern */
.service-card::before,
.punch_API-info-card::before,
.sade-sati-info-card::before,
.lucky-date-info-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 0;
  transition: height 0.4s ease;
}
.service-card::before        { background: linear-gradient(180deg, var(--primary-light), var(--secondary)); }
.punch_API-info-card::before { background: linear-gradient(180deg, var(--punch_API-gold-light), var(--punch_API-red)); }
.sade-sati-info-card::before { background: linear-gradient(180deg, var(--sade-sati-gold-light), var(--sade-sati-red)); }
.lucky-date-info-card::before{ background: linear-gradient(180deg, var(--lucky-date-gold-light), var(--lucky-date-red)); }

.service-card:hover::before,
.punch_API-info-card:hover::before,
.sade-sati-info-card:hover::before,
.lucky-date-info-card:hover::before { height: 100%; }

/* Hover lift */
.service-card:hover,
.punch_API-info-card:hover,
.sade-sati-info-card:hover,
.lucky-date-info-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.1);
}
.service-card:hover   { border-color: var(--primary); }
.punch_API-info-card:hover  { border-color: var(--punch_API-gold-pale); }
.sade-sati-info-card:hover  { border-color: var(--sade-sati-gold-pale); }
.lucky-date-info-card:hover { border-color: var(--lucky-date-gold-pale); }

/* Card base styles */
.service-card,
.punch_API-info-card,
.sade-sati-info-card,
.lucky-date-info-card {
  background: var(--white);
  border-radius: 4px;
  padding: 34px 26px 30px;
  height: 100%;
  text-align: left;
}
.service-card  { border: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.punch_API-info-card  { border: 1px solid var(--punch_API-border); }
.sade-sati-info-card  { border: 1px solid var(--sade-sati-border); border-radius: 8px; }
.lucky-date-info-card { border: 1px solid rgba(200, 134, 10, 0.2); }

/* Card headings */
.service-card h4,
.punch_API-info-card h4,
.sade-sati-info-card h4,
.lucky-date-info-card h4 {
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.service-card h4        { font-size: 14px; color: var(--black); }
.punch_API-info-card h4 { color: var(--punch_API-dark); }
.sade-sati-info-card h4 { color: var(--sade-sati-dark); }
.lucky-date-info-card h4{ color: var(--lucky-date-dark); }

/* Card paragraphs */
.service-card p,
.punch_API-info-card p,
.sade-sati-info-card p,
.lucky-date-info-card p {
  font-size: 13px;
  line-height: 1.7;
  margin-bottom: 0;
}
.service-card p        { color: var(--text-muted); margin-bottom: 20px;}
.punch_API-info-card p { color: var(--punch_API-text-muted); font-size: 14px; }
.sade-sati-info-card p { color: var(--sade-sati-text-muted); }
.lucky-date-info-card p{ color: var(--lucky-date-text-muted); font-size: 14px; }


/* ══════════════════════════════════════════════════════════════════
   6. GLOBAL / PAGE-LEVEL SECTIONS
   ══════════════════════════════════════════════════════════════════ */

/* ── Hero Slider ────────────────────────────────────────────────── */
#heroSection { position: relative; overflow: hidden; }

.hero-slide {
  position: relative;
  height: 70vh;
  min-height: 450px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
}
.hero-slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.15) 100%);
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
  color: #fff;
  max-width: 640px;
  padding-left: 5%;
}
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(245,151,10,.18);
  border: 1px solid rgba(245,151,10,.45);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 7px 18px;
  border-radius: 50px;
  margin-bottom: 20px;
  backdrop-filter: blur(8px);
  animation: fadeUp .7s ease both;
}
.hero-title {
  font-size: clamp(32px, 5.5vw, 66px);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 18px;
  animation: fadeUp .7s .12s ease both;
}
.hero-title .accent { color: var(--primary-light); }
.hero-desc {
  font-size: clamp(13px, 1.5vw, 15px);
  font-weight: 300;
  line-height: 1.8;
  color: rgba(255,255,255,.72);
  max-width: 460px;
  margin-bottom: 32px;
  animation: fadeUp .7s .24s ease both;
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; animation: fadeUp .7s .36s ease both; }

/* Hero (non-slider) */
.hero { background: var(--white); padding: clamp(24px,5vw,56px) 16px; }
.hero__container {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px,4vw,44px);
  align-items: center;
}
.hero__content  { order: 2; }
.hero__visual   { order: 1; }
.hero__title {
  font-family: "Abhaya Libre", serif;
  font-weight: 800;
  color: var(--black);
  font-size: clamp(30px,6vw,52px);
  line-height: 1.14;
  margin: 0 0 10px;
}
.hero__title span { color: var(--secondary); }
.hero__sub { color: var(--text-muted); font-size: clamp(14px,2.4vw,16px); margin: 0 0 18px; opacity: .9; }
.hero__badges {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: 16px 18px;
}
.hero__img { width: 100%; height: auto; border-radius: 12px; box-shadow: 20px 20px 20px 0px rgb(0 0 0/38%); }
img.hero__badge-icononly { width: 550px; }

/* Carousel controls */
.carousel-control-prev, .carousel-control-next {
  width: 48px; height: 48px;
  top: 50%; transform: translateY(-50%); bottom: auto;
  border: 1px solid rgba(245,151,10,.5);
  border-radius: 50%;
  background: rgba(0,0,0,.3);
  backdrop-filter: blur(8px);
  transition: all .3s ease;
  opacity: 1;
}
.carousel-control-prev { left: 20px; }
.carousel-control-next { right: 20px; }
.carousel-control-prev:hover, .carousel-control-next:hover { background: var(--primary); border-color: var(--primary); }
.carousel-control-prev-icon, .carousel-control-next-icon { width: 15px; height: 15px; }
.carousel-indicators { bottom: 24px; gap: 8px; }
.carousel-indicators [data-bs-target] { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.35); border: none; transition: all .3s ease; }
.carousel-indicators .active { background: var(--primary-light); width: 26px; border-radius: 4px; }

.scroll-hint {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  z-index: 10; display: flex; flex-direction: column; align-items: center;
  gap: 5px; color: rgba(255,255,255,.35); font-size: 9px;
  letter-spacing: 2px; text-transform: uppercase;
  animation: scrollBounce 2.5s ease infinite;
}
.scroll-hint i { font-size: 17px; }
.mobile-bg { display: none; }

/* ── Marquee ────────────────────────────────────────────────────── */
.marquee-strip {
  background: linear-gradient(90deg, var(--secondary-dark), var(--secondary), var(--secondary-dark));
  padding: 13px 0; overflow: hidden; position: relative; z-index: 5;
}
.marquee-track { display: flex; width: max-content; animation: marqueeScroll 30s linear infinite; }
.marquee-item {
  display: flex; align-items: center; gap: 10px; padding: 0 36px;
  font-size: 11px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: rgba(255,255,255,.88); white-space: nowrap;
}
.marquee-item i { color: var(--primary-light); font-size: 12px; }

/* ── Services ───────────────────────────────────────────────────── */
#services { padding: 40px 0 94px; background: var(--white); position: relative; overflow: hidden; }
.service-icon {
  width: 60px; height: 60px;
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 60%, #c67805 100%);
  border: 1px solid rgba(245,151,10,.22); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; margin: 0 auto 20px; transition: all .3s ease;
}
.service-card:hover .service-icon { box-shadow: 0 6px 28px rgba(245,151,10,.45); }
.service-card:hover .service-icon i { color: #fff !important; }
.service-link {
  font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--primary); text-decoration: none; display: inline-flex; align-items: center;
  gap: 8px; transition: gap .3s ease;
}
.service-card .btn-gold { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; }

/* ── About ──────────────────────────────────────────────────────── */
#about { padding: 96px 0; background: var(--white); }
.about-image-wrap { position: relative; }
.about-photo-main {
  width: 100%; border-radius: 8px; object-fit: cover; display: block;
  box-shadow: 0 30px 80px rgba(0,0,0,.18); border: 3px solid rgba(245,151,10,.25);
}
.about-badge {
  position: absolute; bottom: -20px; right: -16px;
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  color: #fff; padding: 18px 20px; border-radius: 4px; text-align: center;
  box-shadow: 0 8px 32px rgba(245,151,10,.45); z-index: 3;
}
.about-badge .num { font-size: 32px; font-weight: 800; line-height: 1; }
.about-badge .lbl { font-size: 9px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; opacity: .9; }
.about-list { list-style: none; padding: 0; margin: 0 0 30px; }
.about-list li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--border);
  font-size: 13.5px; color: var(--text-body);
}
.about-list li:last-child { border-bottom: none; }
.about-list li i { color: var(--primary); font-size: 15px; margin-top: 2px; flex-shrink: 0; }

/* ── YouTube ────────────────────────────────────────────────────── */
#youtube { padding: 96px 0; background: #fdf8f0; position: relative; overflow: hidden; }
.yt-card { background: rgba(255,255,255,.04); border: 1px solid rgba(245,151,10,.18); border-radius: 6px; overflow: hidden; transition: all .35s ease; cursor: pointer; }
.yt-card:hover { transform: translateY(-6px); border-color: rgba(245,151,10,.5); box-shadow: 0 20px 50px rgba(0,0,0,.4); }
.yt-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #0d0500; }
.yt-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.yt-card:hover .yt-thumb img { transform: scale(1.05); }
.yt-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.3); transition: background .3s ease; }
.yt-play-btn { width: 52px; height: 52px; background: #ff0000; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; box-shadow: 0 4px 20px rgba(255,0,0,.5); transition: transform .3s ease; }
.yt-info { padding: 18px 20px; }
.yt-info h5 { font-size: 13px; font-weight: 600; color: #000; margin-bottom: 6px; line-height: 1.45; }
.yt-info p  { font-size: 11px; color: #000; }
.yt-channel-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,0,0,.1); border: 1px solid rgba(255,0,0,.3);
  border-radius: 50px; padding: 6px 16px; color: #ff6666;
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 20px;
}

/* ── Why Choose ─────────────────────────────────────────────────── */
#why { padding: 96px 0; background: var(--black); position: relative; overflow: hidden; }
.why-card {
  background: rgba(255,255,255,.04); border: 1px solid rgba(245,151,10,.18);
  border-radius: 4px; padding: 42px 34px; text-align: center;
  position: relative; overflow: hidden; transition: all .4s ease; height: 100%;
}
.why-card:hover { background: rgba(245,151,10,.06); border-color: rgba(245,151,10,.5); transform: translateY(-6px); }
.why-icon {
  width: 78px; height: 78px; color: #fff;
  background: linear-gradient(135deg, rgba(245,151,10,.18), rgba(245,151,10,.06));
  border: 1px solid rgba(245,151,10,.3); border-radius: 50%;
  margin: 0 auto 26px; display: flex; align-items: center; justify-content: center;
  font-size: 30px; transition: all .3s ease;
}
.why-card:hover .why-icon { background: linear-gradient(135deg, var(--primary-light), var(--primary)); box-shadow: 0 0 40px rgba(245,151,10,.4); }
.why-card h4 { font-size: 16px; font-weight: 700; color: #ffffff; margin-bottom: 14px; }
.why-card p  { font-size: 13px; color: rgba(255,255,255,.85); line-height: 1.8; }

/* ── Blogs ──────────────────────────────────────────────────────── */
#blogs { padding: 60px 0; background: var(--white); }
.blog-card { background: var(--white); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; transition: all .4s ease; height: 100%; }
.blog-card:hover { transform: translateY(-6px); box-shadow: 0 20px 52px rgba(0,0,0,.1); }
.blog-thumb { height: 200px; overflow: hidden; position: relative; }
.blog-thumb-inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 48px; transition: transform .4s ease; }
.blog-card:hover .blog-thumb-inner { transform: scale(1.06); }
.blog-thumb-1 { background: linear-gradient(135deg,#1a0800,#3d1200); }
.blog-thumb-2 { background: linear-gradient(135deg,#05001a,#1a0050); }
.blog-thumb-3 { background: linear-gradient(135deg,#001a10,#00401a); }
.blog-cat { position: absolute; top: 14px; left: 14px; background: linear-gradient(135deg,var(--primary-light),var(--primary)); color: #fff; font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 4px 12px; border-radius: 50px; }
.blog-body { padding: 24px 22px; }
.blog-body h4 { font-size: 15px; font-weight: 700; color: var(--black); margin-bottom: 10px; line-height: 1.4; }
.blog-body p  { font-size: 13px; color: var(--text-muted); line-height: 1.7; margin-bottom: 18px; }
.blog-link { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--primary); display: flex; align-items: center; gap: 8px; transition: gap .3s ease; }

/* ── CTA ────────────────────────────────────────────────────────── */
#cta {
  padding: 100px 0;
  background: linear-gradient(135deg, var(--secondary-dark) 0%, var(--secondary) 50%, var(--black) 100%);
  position: relative; overflow: hidden; text-align: center;
}
.cta-ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 700px; height: 700px; border-radius: 50%; border: 1px solid rgba(245,151,10,.08); pointer-events: none; }
#cta h2 { font-size: clamp(28px,5vw,52px); font-weight: 800; color: #fff; margin-bottom: 18px; line-height: 1.15; }
#cta h2 span { color: var(--primary-light); }
#cta p  { font-size: 15px; color: rgba(255,255,255,.58); max-width: 500px; margin: 0 auto 38px; line-height: 1.8; }
.cta-trust { display: flex; justify-content: center; gap: 36px; flex-wrap: wrap; margin-top: 52px; padding-top: 36px; border-top: 1px solid rgba(255,255,255,.07); }
.cta-trust-item { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: #fff !important; }

/* ── Instagram ──────────────────────────────────────────────────── */
#insta { padding: 60px 0; background: var(--white); position: relative; }
.insta-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 30px; flex-wrap: wrap; gap: 20px; }
.insta-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 16px; }
.insta-item { aspect-ratio: 1; overflow: hidden; border-radius: 12px; position: relative; box-shadow: 0 4px 12px rgba(0,0,0,.08); border: 1px solid rgba(245,151,10,.1); }
.insta-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.insta-item:hover img { transform: scale(1.08); }
.insta-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s ease; flex-direction: column; }
.insta-item:hover .insta-overlay { opacity: 1; }
.insta-overlay i { color: #fff; font-size: 28px; margin-bottom: 8px; transform: translateY(10px); transition: transform .3s ease; }
.insta-item:hover .insta-overlay i { transform: translateY(0); }
.insta-overlay span { color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.elementor-icon { font-size: 20px; }

/* ── YouTube About ──────────────────────────────────────────────── */
#youtubeAbout { padding: 96px 0; background: var(--black); }
.yt-about-thumb { position: relative; border-radius: 6px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.4); }
.yt-about-thumb img { width: 100%; display: block; }
.yt-play-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.3); display: flex; align-items: center; justify-content: center; transition: background .3s ease; }
.yt-play-overlay:hover { background: rgba(0,0,0,.5); }
.yt-play-circle { width: 72px; height: 72px; background: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.3); transition: transform .3s ease; }
.yt-play-overlay:hover .yt-play-circle { transform: scale(1.1); }

/* ── Difference Section ─────────────────────────────────────────── */
#difference { padding: 60px 0; background: #251010; position: relative; overflow: hidden; }
.diff-card { background: rgba(255,255,255,.04); border: 3px solid rgba(245,151,10,.18); border-radius: 4px; padding: 32px; height: 100%; transition: all .4s ease; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.diff-card:hover { background: rgba(245,151,10,.06); border-color: rgba(245,151,10,.5); transform: scale(1.05); }
.diff-icon { width: 50px; height: 50px; background: linear-gradient(135deg,rgba(245,151,10,.18),rgba(245,151,10,.06)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--primary-light); margin-bottom: 20px; }
.diff-card h4 { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.diff-card p  { font-size: 14px; color: rgba(255,255,255,.6); line-height: 1.7; margin-bottom: 0; }
.diff-stats { display: flex; gap: 20px; margin-top: 48px; flex-wrap: wrap; }
.stat-item { flex: 1; min-width: 200px; background: rgba(255,255,255,.05); border-radius: 4px; padding: 24px; text-align: center; }
.stat-item h2 { font-size: 42px; font-weight: 800; color: var(--primary-light); margin-bottom: 5px; }
.stat-item p  { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,.7); }

/* ── Struggles ──────────────────────────────────────────────────── */
#struggles { padding: 96px 0; background: var(--white); position: relative; overflow: hidden; }
.struggle-card { background: var(--white); border: 1px solid var(--border); border-radius: 4px; padding: 34px 26px 30px; position: relative; overflow: hidden; transition: all .4s cubic-bezier(.22,.84,.44,1); height: 100%; }
.struggle-card::before { content: ""; position: absolute; top: 0; left: 0; width: 3px; height: 0; background: linear-gradient(180deg,var(--primary-light),var(--secondary)); transition: height .4s ease; }
.struggle-card:hover { transform: translateY(-7px); box-shadow: 0 22px 56px rgba(0,0,0,.1); border-color: var(--primary); }
.struggle-card:hover::before { height: 100%; }
.struggle-icon { width: 60px; height: 60px; background: linear-gradient(135deg,rgba(245,151,10,.12),rgba(245,151,10,.05)); border: 1px solid rgba(245,151,10,.22); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 20px; transition: all .3s ease; color: var(--primary); }
.struggle-card:hover .struggle-icon { background: linear-gradient(135deg,var(--primary-light),var(--primary)); border-color: transparent; color: #fff; }
.struggle-card h4 { font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; color: var(--black); }
.struggle-card p  { font-size: 14px; line-height: 1.7; color: var(--text-muted); margin-bottom: 0; }

/* ── Our Story ──────────────────────────────────────────────────── */
#ourStory { padding: 60px 0; background: #fff; }
.story-block { display: flex; align-items: center; gap: 50px; margin-bottom: 60px; }
.story-block.reverse { flex-direction: row-reverse; }
.story-content { flex: 1; }
.story-content h3 { font-size: 32px; font-weight: 800; margin-bottom: 15px; line-height: 1.3; color: #111; }
.story-content h3 span { color: #c9a14a; }
.story-content p  { font-size: 15px; line-height: 1.8; color: #666; margin-bottom: 15px; }
.story-img-wrap { flex: 1; }
.story-img-wrap img { width: 100%; border-radius: 12px; box-shadow: 0 25px 60px rgba(0,0,0,.1); }
.bg-img { min-height: 380px; background-size: cover; background-position: center; border-radius: 12px; position: relative; overflow: hidden; }
.bg-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent,rgba(0,0,0,.2)); }
.story-list-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 15px; margin: 20px 0; }
.list-grid-item { font-size: 14px; display: flex; gap: 10px; align-items: center; color: #333; }
.list-grid-item i { color: #c9a14a; font-size: 16px; }
.edu-btn { display: inline-block; padding: 12px 28px; background: #c9a14a; color: #fff; border-radius: 6px; text-decoration: none; font-size: 14px; transition: .3s; }
.edu-btn:hover { background: #b8913f; }

/* ── Features Section ───────────────────────────────────────────── */
.features-section { padding: 60px 0; background: var(--white); border-bottom: 1px solid var(--border); }
.features-header  { text-align: center; max-width: 800px; margin: 0 auto 60px; }
.features-grid    { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; }
.feature-card { text-align: center; padding: 30px 20px; border: 1px solid var(--border); border-radius: 8px; transition: all .3s ease; background: #fff; }
.feature-card:hover { transform: translateY(-5px); border-color: var(--primary); box-shadow: var(--shadow-soft); }
.feature-icon { width: 50px; height: 50px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--primary); background: rgba(245,151,15,.1); border-radius: 50%; }
.feature-card h4 { font-size: 16px; font-weight: 700; color: var(--black); margin-bottom: 8px; }
.feature-card p  { font-size: 13px; color: var(--text-muted); line-height: 1.6; }

/* ── Stopping Section ───────────────────────────────────────────── */
.stopping-section { background: #251010; padding: 80px 0; color: var(--white); }
.stopping-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 30px; }
.stopping-card { background: transparent; padding: 20px; border-left: 3px solid rgba(255,255,255,.1); transition: border-color .3s; }
.stopping-card:hover { border-color: var(--primary); }
.stopping-icon  { font-size: 28px; color: var(--primary); margin-bottom: 10px; margin-left: 15px; display: block; }
.stopping-title { font-size: 18px; font-weight: 700; color: var(--white); margin-bottom: 10px; margin-left: 15px; }
.stopping-list  { list-style: none; padding: 0; margin: 0; }
.stopping-list li { position: relative; padding-left: 15px; margin-bottom: 8px; font-size: 14px; color: rgba(255,255,255,.7); line-height: 1.5; }
.stopping-list li::before { content: "•"; position: absolute; left: 0; color: var(--primary); }

/* ── Process Section ────────────────────────────────────────────── */
.process-section { padding: 60px 0; background: var(--white); overflow: hidden; }
.process-header  { text-align: center; margin-bottom: 60px; }
.process-flow    { position: relative; display: flex; justify-content: space-between; max-width: 1000px; margin: 0 auto; }
.process-line    { position: absolute; top: 40px; left: 50px; right: 50px; height: 2px; background: var(--border); z-index: 0; }
.process-step    { position: relative; z-index: 1; text-align: center; flex: 1; }
.step-icon { width: 80px; height: 80px; background: var(--white); border: 2px solid var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--primary); margin: 0 auto 20px; transition: all .3s ease; box-shadow: 0 5px 20px rgba(245,151,15,.1); }
.process-step:hover .step-icon { background: var(--primary); color: var(--white); transform: scale(1.1); }
.step-content h4 { font-size: 16px; font-weight: 700; color: var(--black); margin-bottom: 8px; }
.step-content p  { font-size: 13px; color: var(--text-muted); padding: 0 10px; }

/* ── One Call Section ───────────────────────────────────────────── */
.onecall-section { padding: 100px 0; background: #fdf8f0; position: relative; overflow: hidden; }
.onecall-wrapper { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; align-items: center; }
.onecall-image-wrap { display: flex; flex-direction: column; align-items: center; position: relative; }
.onecall-image-wrap::before { content: ''; position: absolute; top: 10%; left: 50%; transform: translateX(-50%); width: 350px; height: 350px; background: radial-gradient(circle,rgba(245,151,15,.25) 0%,transparent 70%); z-index: 0; border-radius: 50%; }
.onecall-img { position: relative; z-index: 1; width: 100%; max-width: 500px; height: auto; border-radius: 12px; border: 6px solid var(--white); box-shadow: 0 30px 60px rgba(0,0,0,.3); margin-bottom: 35px; transition: transform .4s ease; }
.onecall-img:hover { transform: scale(1.02); }
.onecall-badges-pro { position: relative; z-index: 2; display: flex; justify-content: center; gap: 20px; width: 100%; flex-wrap: wrap; }
.badge-pill { background: var(--black); color: var(--primary); padding: 12px 28px; border-radius: 50px; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; display: flex; align-items: center; gap: 10px; border: 1px solid var(--primary); box-shadow: 0 8px 20px rgba(0,0,0,.2); transition: all .3s ease; }
.badge-pill i { font-size: 18px; color: var(--primary); }
.badge-pill:hover { background: var(--primary); color: var(--black); transform: translateY(-3px); box-shadow: 0 10px 25px rgba(245,151,15,.4); }
.badge-pill:hover i { color: var(--black); }
.onecall-list { list-style: none; padding: 0; margin: 0 0 35px; }
.onecall-list li { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.onecall-list li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.onecall-list i      { font-size: 22px; color: var(--primary); margin-top: 2px; flex-shrink: 0; }
.onecall-list strong { display: block; font-size: 17px; color: var(--black); margin-bottom: 6px; }
.onecall-list p      { margin: 0; font-size: 14px; color: var(--text-muted); line-height: 1.5; }
.onecall-price-box   { background: #fff; border: 2px solid var(--black); padding: 28px; display: flex; justify-content: space-between; align-items: center; border-radius: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.05); }
.price-text   { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.price-amount { font-size: 36px; font-weight: 800; color: var(--black); font-family: "Abhaya Libre", serif; line-height: 1; }

/* ── Misc ───────────────────────────────────────────────────────── */
.buttom-new { margin-bottom: 40px; }


/* ══════════════════════════════════════════════════════════════════
   7. punch_API — SPECIFIC OVERRIDES
   ══════════════════════════════════════════════════════════════════ */
#punch_API-heroSection {
  position: relative; padding: 120px 0 100px; background: #251010;
  overflow: hidden; text-align: center; color: #fff;
}
.punch_API-hero-icon-lg { font-size: 60px; color: var(--punch_API-gold); margin-bottom: 20px; animation: punch_API-heartbeat 3s infinite ease-in-out; display: inline-block; }
.punch_API-hero-title-large { font-size: clamp(36px,6vw,64px); font-weight: 800; margin-bottom: 16px; line-height: 1.1; }
.punch_API-hero-title-large span {
  color: var(--punch_API-gold-light);
  background: -webkit-linear-gradient(45deg, var(--punch_API-gold-light), var(--punch_API-gold), #fff);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.punch_API-hero-subtitle { font-size: 17px; color: rgba(255,255,255,.75); max-width: 800px; margin: 0 auto 40px; line-height: 1.7; }

#punch_API-cardsSection { padding: 80px 0; background: var(--punch_API-white); }

.punch_API-card-number { font-family: 'Poppins',sans-serif; font-size: 3rem; color: rgba(200,134,10,.08); font-weight: 800; position: absolute; top: 10px; right: 20px; z-index: 0; }
.punch_API-card-content { position: relative; z-index: 1; }

#punch_API-elementsSection { padding: 80px 0; background: var(--punch_API-cream); }
.punch_API-element-block { background: #fff; padding: 40px; border-radius: 8px; margin-bottom: 30px; border-left: 4px solid var(--punch_API-gold); box-shadow: 0 4px 20px rgba(0,0,0,.03); }
.punch_API-element-block h3 { font-size: 24px; font-weight: 700; color: var(--punch_API-red); margin-bottom: 15px; font-family: 'Poppins',sans-serif; }
.punch_API-element-block p  { color: var(--punch_API-text-muted); font-size: 16px; line-height: 1.8; margin: 0; text-align: justify; }

#punch_API-calculatorSection { padding: 60px 0; }

.punch_API-jyotisham-header { display: none; text-align: center; padding: 32px 0; }
.punch_API-jyotisham-form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: #000 !important; font-size: 20px !important; text-transform: uppercase; letter-spacing: .05em; text-align: left; }
.punch_API-jyotisham-generate-btn { border-radius: 2px; }
.punch_API-jyotisham-score-card { background: #251010 !important; color: white; text-align: center; padding: 32px; border-radius: 16px; margin-bottom: 24px; }
.punch_API-jyotisham-card h3 { font-size: 2.25rem !important; }
.punch_API-jyotisham-card p  { color: #000 !important; font-size: 16px !important; }


/* ══════════════════════════════════════════════════════════════════
   8. sade-sati — SPECIFIC OVERRIDES
   ══════════════════════════════════════════════════════════════════ */
#sade-sati-cardsSection { padding: 80px 0; background: var(--sade-sati-white); }

.sade-sati-info-icon { width: 60px; height: 60px; background: linear-gradient(135deg,rgba(200,134,10,.12),rgba(200,134,10,.05)); border: 1px solid rgba(200,134,10,.22); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 20px; transition: all .3s ease; color: var(--sade-sati-gold); }
.sade-sati-info-card:hover .sade-sati-info-icon { background: linear-gradient(135deg,var(--sade-sati-gold-light),var(--sade-sati-gold)); border-color: transparent; }
.sade-sati-info-card:hover .sade-sati-info-icon i { color: #fff !important; }

#sade-sati-aboutToolSection { padding: 80px 0; background: var(--sade-sati-cream); }
.sade-sati-about-content { font-size: 16px; line-height: 1.9; color: var(--sade-sati-text-body); max-width: 900px; margin: 0 auto; text-align: center; }
.sade-sati-about-content p      { margin-bottom: 20px; }
.sade-sati-about-content strong { color: var(--sade-sati-red); font-weight: 700; }

#sade-sati-calculatorSection { padding: 60px 0; background: var(--sade-sati-white); position: relative; }
#sade-sati-calculatorSection::before { content: '♄'; position: absolute; top: -40px; right: -30px; font-size: 250px; color: rgba(200,134,10,.03); line-height: 1; pointer-events: none; font-family: serif; }
.sade-sati-calc-card { background: var(--sade-sati-white); border: 1px solid var(--sade-sati-border); border-radius: 12px; padding: 80px 60px; box-shadow: 0 10px 40px rgba(0,0,0,.05); position: relative; overflow: hidden; }

.sade-sati-jyotisham-form-group label { display: block; margin-bottom: 8px; font-weight: 500; color: #000 !important; font-size: 1.8rem !important; text-transform: uppercase; letter-spacing: .05em; }
.sade-sati-jyotisham-wrapper .sade-sati-jyotisham-card p { color: #4a5568; margin-bottom: 12px; line-height: 1.6; font-size: 16px; }
.sade-sati-jyotisham-generate-btn { border-radius: 2px; }


/* ══════════════════════════════════════════════════════════════════
   9. free-kundali — SPECIFIC OVERRIDES
   ══════════════════════════════════════════════════════════════════ */
#free-kundali-starCanvas { opacity: .3; }

#free-kundali-newDefinitionSection { padding: 80px 0; background: var(--free-kundali-white); }
.free-kundali-new-def-layout { display: flex; align-items: center; gap: 60px; }
.free-kundali-new-def-text { flex: 1; }
.free-kundali-new-def-text h3 { font-size: clamp(26px,3.5vw,38px); font-weight: 800; color: var(--free-kundali-dark); margin-bottom: 18px; line-height: 1.2; }
.free-kundali-new-def-text p  { font-size: 16px; color: var(--free-kundali-text-muted); line-height: 1.8; margin-bottom: 20px; }
.free-kundali-new-def-text ul { list-style: none; padding: 0; margin: 0; }
.free-kundali-new-def-text ul li { position: relative; padding-left: 25px; margin-bottom: 12px; color: var(--free-kundali-text-body); font-size: 15px; }
.free-kundali-new-def-text ul li::before { content: '✦'; position: absolute; left: 0; color: var(--free-kundali-gold); font-size: 11px; top: 50%; transform: translateY(-50%); }
.free-kundali-new-def-img { flex: 0 0 380px; display: flex; justify-content: center; }
.free-kundali-def-circle-shape { width: 350px; height: 350px; background: #FDF8F0; border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(200,134,10,.2); position: relative; }

#free-kundali-benefitsListSection { padding: 80px 0; background: var(--free-kundali-cream); }
.free-kundali-benefits-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 30px; margin-top: 40px; }
.free-kundali-benefit-item { display: flex; align-items: flex-start; gap: 20px; }
.free-kundali-b-icon { width: 50px; height: 50px; background: var(--white); border: 2px solid #C8860A; color: #C8860A; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; box-shadow: 0 4px 10px rgba(0,0,0,.05); }
.free-kundali-b-text h4 { font-size: 16px; font-weight: 700; color: var(--free-kundali-dark); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .5px; }
.free-kundali-b-text p  { font-size: 14px; color: var(--free-kundali-text-muted); line-height: 1.6; margin: 0; }

#free-kundali-calculatorSection { padding: 80px 0; background: var(--free-kundali-white); }


/* ══════════════════════════════════════════════════════════════════
   10. lucky-date — SPECIFIC OVERRIDES
   ══════════════════════════════════════════════════════════════════ */
.lucky-date-hero {
  position: relative; padding: 140px 0 100px; overflow: hidden;
  color: #fff; text-align: center; z-index: 1;
  background: radial-gradient(circle at top right, #2e1200 0%, #1A0A00 70%);
}
.lucky-date-hero-decor-star { position: absolute; color: rgba(200,134,10,.3); animation: lucky-date-twinkle 3s infinite ease-in-out; z-index: 0; }
.lucky-date-star-top-left  { top: 60px;  left: 10%;  font-size: 24px; animation-delay: 0s;   }
.lucky-date-star-top-right { top: 80px;  right: 15%; font-size: 18px; animation-delay: 1s;   }
.lucky-date-star-mid-left  { top: 40%;   left: 5%;   font-size: 14px; animation-delay: 2s;   }
.lucky-date-star-mid-right { top: 50%;   right: 8%;  font-size: 20px; animation-delay: .5s;  }
.lucky-date-hero-content   { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; }
.lucky-date-hero-tag-pill  { display: inline-block; font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: var(--lucky-date-gold-light); background: rgba(200,134,10,.1); border: 1px solid rgba(200,134,10,.3); padding: 8px 18px; border-radius: 50px; margin-bottom: 25px; }
.lucky-date-hero-title { font-size: clamp(36px,5.5vw,64px); font-weight: 800; margin-bottom: 25px; line-height: 1.1; color: #fff; }
.lucky-date-hero-title span { color: var(--lucky-date-gold-light); background: -webkit-linear-gradient(45deg,var(--lucky-date-gold-light),var(--lucky-date-gold),#fff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.lucky-date-hero-subtitle { font-size: 16px; color: rgba(255,255,255,.75); max-width: 650px; margin: 0 auto 35px; line-height: 1.8; }

.lucky-date-features { padding: 80px 0; background: #FFFFFF; position: relative; }
.lucky-date-feature-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 25px; margin-top: 40px; }
.lucky-date-feature-box { background: linear-gradient(135deg,#FFF3E0 0%,#FFE0B2 100%); padding: 40px 25px; border-radius: 8px; text-align: left; border: 1px solid rgba(200,134,10,.2); transition: all .3s ease; position: relative; overflow: hidden; }
.lucky-date-feature-box:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(200,134,10,.2); border-color: var(--lucky-date-gold); }
.lucky-date-feature-box h4 { color: var(--lucky-date-red); font-size: 18px; font-weight: 700; margin-bottom: 12px; line-height: 1.3; }
.lucky-date-feature-box p  { color: #5D4037; font-size: 14px; line-height: 1.6; margin: 0; }

.lucky-date-info { padding: 80px 0; background: var(--lucky-date-cream); }

.lucky-date-calculator { padding: 100px 0; background: #FFFFFF; position: relative; }
.lucky-date-calculator::before { content: '✦'; position: absolute; top: -50px; right: -40px; font-size: 300px; color: rgba(200,134,10,.03); line-height: 1; pointer-events: none; }
.lucky-date-calc-card { background: #FFFFFF; border: 1px solid rgba(200,134,10,.2); border-radius: 8px; padding: 50px 40px; box-shadow: 0 20px 60px rgba(0,0,0,.08); position: relative; overflow: hidden; }

.lucky-date-form-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--lucky-date-text-muted); margin-bottom: 8px; display: block; }
.lucky-date-form-input { width: 100%; padding: 14px 18px; border: 1px solid #e0d0b8; border-radius: 2px; font-family: 'Poppins',sans-serif; font-size: 15px; color: var(--lucky-date-dark); background: #faf9f6; transition: all .3s ease; }
.lucky-date-form-input:focus { outline: none; border-color: var(--lucky-date-gold); background: #fff; box-shadow: 0 0 0 4px rgba(200,134,10,.1); }

.lucky-date-result { margin-top: 40px; background: #fff; padding: 40px; border-radius: 8px; box-shadow: 0 20px 50px rgba(200,134,10,.15); border: 1px solid var(--lucky-date-gold); position: relative; overflow: hidden; }
.lucky-date-result::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg,var(--lucky-date-gold),var(--lucky-date-red),var(--lucky-date-gold)); }
.lucky-date-result-title    { color: var(--lucky-date-dark); font-size: 2rem; font-weight: 700; text-align: center; }
.lucky-date-result-subtitle { font-style: italic; color: var(--lucky-date-text-muted); margin-bottom: 30px; text-align: center; }

.lucky-date-calendar-wrapper { max-width: 600px; margin: 30px auto 0; border: 1px solid rgba(200,134,10,.2); border-radius: 8px; overflow: hidden; background: white; box-shadow: 0 5px 15px rgba(0,0,0,.05); }
.lucky-date-calendar-header  { background: var(--lucky-date-dark); color: white; padding: 15px; font-size: 1.2rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; text-align: center; }
.lucky-date-calendar-weekdays{ display: grid; grid-template-columns: repeat(7,1fr); background: var(--lucky-date-gold-light); color: #000; }
.lucky-date-weekday { padding: 10px 0; font-weight: 700; font-size: .9rem; text-align: center; border-right: 1px solid rgba(0,0,0,.1); }
.lucky-date-weekday:last-child { border-right: none; }
.lucky-date-calendar-days    { display: grid; grid-template-columns: repeat(7,1fr); }
.lucky-date-day-cell { padding: 15px 0; border-right: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; font-size: 1.1rem; color: #333; position: relative; text-align: center; transition: .2s; }
.lucky-date-day-cell:nth-child(7n) { border-right: none; }
.lucky-date-day-cell.lucky-date-is-lucky { background-color: var(--lucky-date-red); color: white; font-weight: 700; cursor: default; box-shadow: inset 0 0 10px rgba(0,0,0,.2); }
.lucky-date-day-cell.lucky-date-is-lucky::after { content: '★'; display: block; font-size: 1rem; color: var(--lucky-date-gold); margin-top: 2px; animation: lucky-date-heartbeat 2s infinite; }

.lucky-date-message { background: var(--lucky-date-cream); padding: 20px; border-left: 4px solid var(--lucky-date-gold); text-align: left; border-radius: 4px; font-size: 15px; margin-top: 30px; color: var(--lucky-date-text-body); }
.lucky-date-cta-wrap { text-align: center; margin-top: 30px; }




/* ─── UTILITY CLASSES ────────────────────────────────────────────── */
.love-calculator-section-wrap {
    max-width: var(--love-calculator-max-w);
    margin: 0 auto;
    padding: 0 24px;
}

.love-calculator-gold-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--love-calculator-gold);
    margin-bottom: 10px;
}

.love-calculator-section-title {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    color: var(--love-calculator-dark);
    line-height: 1.2;
}

.love-calculator-section-title span {
    color: var(--love-calculator-gold);
}

.love-calculator-divider-ornament {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0 28px;
}

.love-calculator-divider-ornament .love-calculator-line {
    flex: 1;
    max-width: 80px;
    height: 1px;
    background: linear-gradient(90deg, var(--love-calculator-gold-light), transparent);
}

.love-calculator-divider-ornament .love-calculator-line-right {
    background: linear-gradient(270deg, var(--love-calculator-gold-light), transparent);
}

.love-calculator-divider-ornament .love-calculator-star {
    color: var(--love-calculator-gold);
    font-size: 18px;
}

/* ─── STAR CANVAS ────────────────────────────────────────────────── */
.love-calculator-star-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.3;
}

/* ─── ANIMATIONS ─────────────────────────────────────────────────── */
@keyframes love-calculator-fadeUp {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes love-calculator-heartbeat {
    0%   { transform: scale(1); }
    15%  { transform: scale(1.1); }
    30%  { transform: scale(1); }
    45%  { transform: scale(1.1); }
    60%  { transform: scale(1); }
    100% { transform: scale(1); }
}

@keyframes love-calculator-glow {
    0%   { box-shadow: 0 0 5px var(--love-calculator-gold-light); }
    50%  { box-shadow: 0 0 20px var(--love-calculator-gold-light), 0 0 10px var(--love-calculator-gold); }
    100% { box-shadow: 0 0 5px var(--love-calculator-gold-light); }
}

.love-calculator-reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

.love-calculator-reveal.love-calculator-visible {
    opacity: 1;
    transform: translateY(0);
}

.love-calculator-reveal-delay-1 { transition-delay: 0.1s; }
.love-calculator-reveal-delay-2 { transition-delay: 0.2s; }
.love-calculator-reveal-delay-3 { transition-delay: 0.3s; }

/* ─── HERO SECTION ───────────────────────────────────────────────── */
.love-calculator-hero-section {
    position: relative;
    padding: 100px 0 80px;
    background: #251010;
    overflow: hidden;
    text-align: center;
    color: #fff;
}

.love-calculator-hero-icon-lg {
    font-size: 60px;
    color: var(--love-calculator-gold);
    margin-bottom: 20px;
    animation: love-calculator-heartbeat 3s infinite ease-in-out;
    display: inline-block;
}

.love-calculator-hero-title-large {
    font-size: clamp(36px, 6vw, 64px);
    font-weight: 800;
    margin-bottom: 16px;
    line-height: 1.1;
    text-transform: capitalize;
}

.love-calculator-hero-title-large span {
    color: var(--love-calculator-gold-light);
    background: -webkit-linear-gradient(45deg, var(--love-calculator-gold-light), var(--love-calculator-gold), #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.love-calculator-hero-subtitle {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    max-width: 600px;
    margin: 0 auto 30px;
}

/* ─── INFO CARDS SECTION ─────────────────────────────────────────── */
.love-calculator-cards-section {
    padding: 80px 0;
    background: var(--love-calculator-white);
}

.love-calculator-info-card {
    background: var(--love-calculator-white);
    border: 1px solid var(--love-calculator-border);
    border-radius: 8px;
    padding: 34px 26px 30px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.22, 0.84, 0.44, 1);
    height: 100%;
    text-align: left;
}

.love-calculator-info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 0;
    background: linear-gradient(180deg, var(--love-calculator-gold-light), var(--love-calculator-red));
    transition: height 0.4s ease;
}

.love-calculator-info-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 22px 56px rgba(0, 0, 0, 0.1);
    border-color: var(--love-calculator-gold-pale);
}

.love-calculator-info-card:hover::before {
    height: 100%;
}

.love-calculator-info-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(200, 134, 10, 0.12), rgba(200, 134, 10, 0.05));
    border: 1px solid rgba(200, 134, 10, 0.22);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    color: var(--love-calculator-gold);
}

.love-calculator-info-card:hover .love-calculator-info-icon {
    background: linear-gradient(135deg, var(--love-calculator-gold-light), var(--love-calculator-gold));
    border-color: transparent;
}

.love-calculator-info-card:hover .love-calculator-info-icon i {
    color: #fff !important;
}

.love-calculator-info-card h4 {
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    color: var(--love-calculator-dark);
}

.love-calculator-info-card p {
    font-size: 13px;
    line-height: 1.7;
    color: var(--love-calculator-text-muted);
    margin-bottom: 0;
}

/* ─── ABOUT TOOL SECTION ─────────────────────────────────────────── */
.love-calculator-about-section {
    padding: 80px 0;
    background: var(--love-calculator-cream);
}

.love-calculator-about-content {
    font-size: 16px;
    line-height: 1.9;
    color: var(--love-calculator-text-body);
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.love-calculator-about-content p {
    margin-bottom: 20px;
}

.love-calculator-about-content strong {
    color: var(--love-calculator-red);
    font-weight: 700;
}
             
/* ─── CALCULATOR FORM SECTION ────────────────────────────────────── */
.love-calculator-section {
    padding: 100px 0 120px;
    background: var(--love-calculator-white);
    position: relative;
}

.love-calculator-section::before {   
    content: '♥';
    position: absolute;
    top: -40px;
    right: -30px;
    font-size: 250px;
    color: rgba(200, 134, 10, 0.03);
    line-height: 1;
    pointer-events: none;
    font-family: serif;
}

.love-calculator-card {
    background: var(--love-calculator-white);
    border: 1px solid var(--love-calculator-border);
    border-radius: 12px;
    padding: 80px 60px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

/* ─── BUTTONS ────────────────────────────────────────────────────── */
.love-calculator-btn-gold {
    background: linear-gradient(135deg, var(--love-calculator-gold-light) 0%, var(--love-calculator-gold) 60%, #A06A05 100%);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border: none;
    padding: 14px 34px;
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.love-calculator-btn-gold::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.14);
    transform: translateX(-100%) skewX(-15deg);
    transition: transform 0.4s ease;
}

.love-calculator-btn-gold:hover::after {
    transform: translateX(110%) skewX(-15deg);
}

.love-calculator-btn-gold:hover {
    box-shadow: 0 6px 28px rgba(200, 134, 10, 0.45);
    color: #fff;
    transform: translateY(-1px);
}

/* ─── FORM ELEMENTS ──────────────────────────────────────────────── */
.love-calculator-form-label {
    font-size: 12px;
    font-weight: 700;
    color: #555;
    margin-bottom: 8px;
    display: block;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.love-calculator-form-control {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    color: #333;
    background: #fff;
    transition: all 0.3s ease;
    height: 50px;
}

.love-calculator-form-control:focus {
    outline: none;
    border-color: var(--love-calculator-red);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.1);
}

.love-calculator-form-control::placeholder {
    color: #aaa;
    font-weight: 400;
}

.love-calculator-submit-btn {
    width: 100%;
    background-color: var(--love-calculator-red);
    color: var(--love-calculator-white);
    border: none;
    padding: 16px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 15px;
    box-shadow: 0 4px 6px rgba(211, 47, 47, 0.2);
}

.love-calculator-submit-btn:hover {
    background-color: var(--love-calculator-red-deep);
    transform: translateY(-2px);
    box-shadow: 0 8px 12px rgba(211, 47, 47, 0.3);
}

/* ─── RESULT BANNER ──────────────────────────────────────────────── */
.love-calculator-result-banner {
    margin-top: 50px;
    background-color: #2b0a0a;
    background-size: cover;
    background-position: center;
    color: var(--love-calculator-white);
    padding: 0;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    border: 2px solid var(--love-calculator-gold-pale);
    animation: love-calculator-fadeUp 0.8s ease forwards;
}

.love-calculator-result-banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(106, 15, 15, 0.95) 0%, rgba(20, 5, 0, 0.98) 100%);
    z-index: 1;
}

.love-calculator-result-banner-inner {
    position: relative;
    z-index: 2;
    padding: 50px 30px;
}

.love-calculator-score-circle-wrapper {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.love-calculator-compatibility-score {
    font-size: 4.5rem;
    font-weight: 800;
    background: linear-gradient(45deg, #FFD700, #FFA500, #FF8C00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
    line-height: 1;
    text-shadow: 0 4px 15px rgba(255, 165, 0, 0.3);
}

.love-calculator-score-label {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 5px;
}

.love-calculator-love-meter {
    width: 100%;
    max-width: 300px;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    margin: 20px auto 30px;
    overflow: hidden;
}

.love-calculator-love-meter-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff4b1f, #ff9068);
    width: 0%;
    border-radius: 10px;
    box-shadow: 0 0 10px #ff4b1f;
    transition: width 1.5s ease-out;
}

.love-calculator-banner-text h3 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.love-calculator-banner-text p {
    font-size: 1.8rem;
    margin-bottom: 30px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 300;
}

.love-calculator-cta-yellow-btn {
    display: inline-block;
    background: linear-gradient(135deg, #FFD700, #FDB931);
    color: #3e2700;
    padding: 16px 40px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 800;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 10px 25px rgba(255, 215, 0, 0.3);
    transition: 0.3s;
}

.love-calculator-cta-yellow-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(255, 215, 0, 0.5);
    color: #1a1000;
}

.love-calculator-result-details {
    margin-top: 30px;
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

/* ─── NAMES DISPLAY ──────────────────────────────────────────────── */
.love-calculator-names-display {
    margin-bottom: 20px;
    font-size: 2rem;
    line-height: 1.4;
}

.love-calculator-names-display .love-calculator-names-label {
    color: var(--love-calculator-gold-pale);
    font-weight: 600;
}

.love-calculator-names-display .love-calculator-name-1 {
    color: #fff;
    font-size: 1.8rem;
    margin: 0 5px;
    font-weight: 700;
}

.love-calculator-names-display .love-calculator-ampersand {
    color: var(--love-calculator-gold);
    font-size: 1.5rem;
}

.love-calculator-names-display .love-calculator-name-2 {
    color: #fff;
    font-size: 1.3rem;
    margin: 0 5px;
    font-weight: 700;
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(200,147,10,.45);
  background: rgba(200,147,10,.1);
  color: var(--gold-light);
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 16px; border-radius: 40px; margin-bottom: 18px;
}

.hero-divider {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 20px;
}
.hero-divider .ln { width: 56px; height: 1px; background: rgba(200,147,10,.5); }
.hero-divider .st { color: var(--gold-light); font-size: .9rem; }

.cstm-filter-wrap{
    display: flex;
    justify-content: space-between;
}

/* Tab row */
.blog-cat-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

}
.blog-cat-tabs::-webkit-scrollbar { display: none; }

.blog-cat-tab {
   flex-shrink: 0;
    padding: 4px 12px;
    background: transparent;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    border-radius: 3px;
    border: 1.5px solid rgba(245, 151, 15, 0.2);
    color: #7a5c30;
    font-size: 11px;


}

.blog-cat-tab.active,
.blog-cat-tab:hover {
  background: linear-gradient(90deg, var(--secondary-dark), var(--secondary), var(--secondary-dark));
  border-color: #a40003;;
  color: #fff;
}

/* Search row */
.blog-search-row {
  display: flex; align-items: center; justify-content: center;
  gap: 0;
}
.blog-search-row input {
      flex: 1;
    max-width: 600px;
    border: 1.5px solid rgba(200, 147, 10, .6);
    border-right: none;
    border-radius: 5px 0 0 5px;
    background: rgba(255, 255, 255, .07);
    font-size: 1.2rem;
    outline: none;
     transition: border-color .2s; 
}
.blog-search-row input::placeholder { color: #000; }
.blog-search-row input:focus { border-color: var(--gold-light); }
.blog-search-row button {
  padding: 14px 22px;
  background: linear-gradient(135deg, var(--gold-light), #b8790a);
  border: none; border-radius: 0 5px 5px 0;
  color: #1a0600; 
  font-size: 1.2rem; font-weight: 800; letter-spacing: .04em;
  cursor: pointer; transition: filter .2s; white-space: nowrap;
}
.blog-search-row button:hover { filter: brightness(1.08); }

/* ══════════════════════════════════════════════
   WHAT WE OFFER BANNER
══════════════════════════════════════════════ */
.offer-banner {
  background: var(--cream-dk);
  padding: 44px 24px 36px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.gold-label {
  display: inline-block;
  color: var(--gold);
  font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 10px;
}

.divider-orn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 14px;
}
.divider-orn .ln { width: 60px; height: 1px; background: var(--gold); opacity: .6; }
.divider-orn .st { color: var(--gold); font-size: .9rem; }

/* ══════════════════════════════════════════════
   MAIN WRAPPER
══════════════════════════════════════════════ */
.blog-wrap {
  max-width: 1300px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}

/* ══════════════════════════════════════════════
   SECTION HEADING
══════════════════════════════════════════════ */
.sec-heading {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 28px;
   margin-top: 50px;
}
/* .sec-heading:not(:first-child) { margin-top: 50px; } */
.sec-heading .ico { color: var(--gold); font-size: 3rem; flex-shrink: 0; }
.sec-heading h3 {
  font-size: clamp(1.15rem, 2.5vw, 3rem);
  font-weight: 700; color: var(--dark); white-space: nowrap;
}
.sec-heading .line {
  flex: 1; height: 2px;
  background: linear-gradient(to right, var(--border), transparent);
}

/* ══════════════════════════════════════════════
   BLOG GRID (3 cols)
══════════════════════════════════════════════ */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.blog-card {
  background: var(--card-bg);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--sh-sm);
  display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
  cursor: pointer;
}
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--sh-md); }
.thum-wrap{
    display: flex;
    width: 100%;
    justify-content: space-around;
    background: linear-gradient(90deg, var(--secondary-dark), var(--secondary), var(--secondary-dark));
}
.card-thumb.th1{
  background: #0d0500;
}


/* Category banner at bottom of thumb — like the reference */
.thumb-cat-bar,
.thumb-cat-rashi {
  color: #fff; 
  font-size: 1.3rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: 10px 0;
}

.card-body {
  padding: 0px 10px 20px 20px;
  flex: 1; display: flex; flex-direction: column;
}
.card-body h4 {
  font-size: 1.8rem; font-weight: 700; line-height: 1.42;
  color: var(--dark); margin: 10px 0 10px;
}
.card-body p {
  color: var(--muted); font-size: 1.3rem; line-height: 1.65;
  flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.btn-read-more {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 14px;
  color: var(--red); font-size: 2rem; font-weight: 800;
  text-decoration: none; letter-spacing: .02em;
  transition: gap .2s;
}
.btn-read-more:hover { gap: 10px; }

.card-footer {
    display: flex;
    padding: 12px 13px;
    gap: 10px;
    align-items: center;

}
.post-meta span{
  font-size: 1.2rem;
}
.author-row { display: flex; align-items: center; gap: 8px; }
.cp-avatar {
  width: 35px; height: 35px; border-radius: 50%;
  background: linear-gradient(135deg, var(--red), var(--gold));
  color: #fff; font-size: 1.5rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cp-author-name { font-size: 1.2rem; font-weight: 700; color: var(--text); }
.read-min {
  font-size: .72rem; color: var(--muted);
  background: rgba(200,147,10,.1);
  border: 1px solid rgba(200,147,10,.25);
  padding: 2px 9px; border-radius: 40px;
}

/* ══════════════════════════════════════════════
   PAGINATION
══════════════════════════════════════════════ */
.pagination {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 6px;
  margin-top: 56px;
}
.pg {
    min-width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    border: 1.5px solid var(--border);
    background: var(--card-bg);
    color: var(--muted);
    cursor: pointer;
    transition: all .2s;
}
.pg:hover { border-color: var(--red); color: var(--red); }
.pg.active {background: linear-gradient(90deg, var(--secondary-dark), var(--secondary), var(--secondary-dark)); border-color: var(--red); color: #fff; box-shadow: 0 4px 14px rgba(139,26,26,.3); }
.pg.arrow { font-size: 1.1rem; }
/* FILTER WRAP */
.pagination .pg.disabled{
  display: none;

}




/* MOBILE DROPDOWN */
.blog-mobile-filter{
    display:none;
    width:100%;
}


  .cstm-post-progress {
      position: fixed; top: 0; left: 0; z-index: 1000;
      height: 3px; width: 0%;
      background: linear-gradient(90deg, var(--red), var(--gold));
      transition: width .1s linear;
    }

    /* ════════════════════════════════════════════════════
       HERO  —  Feature image + title + category ONLY
    ════════════════════════════════════════════════════ */
    .cstm-post-hero {
      position: relative;
      width: 100%;
      overflow: hidden;
    }
    .cstm-post-hero {
        position: relative;
        width: 100%;
        aspect-ratio: 21 / 9;
        min-height: 280px;
        max-height: 520px;
        overflow: hidden;
        background: var(--deep);
    }
      /* actual feature image */
    .cstm-post-hero-img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover; object-position: center;
      display: block;
    }



    .cstm-post-cat-chip,
    .cstm-post-sb-card h4 {
      display: inline-block;
      color: #fff;
      padding: 4px 14px;
      font-size: 1.5rem; font-weight: 700;
      letter-spacing: .12em; text-transform: uppercase;
      border-radius: 2px; margin-bottom: 10px;
      background: #c67805;
    }
    .cstm-post-hero-caption h1 {
      font-size: clamp(4.3rem, 3.2vw, 2.4rem);
      font-weight: 800; color: #000;
      line-height: 1.2;
      padding: 20px 0px;
    }

    /* ════════════════════════════════════════════════════
       BREADCRUMB  (just below hero)
    ════════════════════════════════════════════════════ */
    .cstm-post-breadcrumb-bar {
      background: var(--white);
      padding: 10px clamp(16px,4vw,48px);
    }
    .cstm-post-breadcrumb {
      max-width: 1300px; margin: 0 auto;
      display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
      font-size: 1.5rem; font-weight: 500; letter-spacing: .05em;
      text-transform: uppercase; color: var(--muted);
    }
    .cstm-post-breadcrumb a { color: var(--red); transition: color .2s; }
    .cstm-post-breadcrumb a:hover { color: var(--red); }
    .cstm-post-breadcrumb .sep { color: rgba(164,0,3,.3); }
    .cstm-post-breadcrumb .current { color: var(--red); font-weight: 600; }

    /* ════════════════════════════════════════════════════
       PAGE LAYOUT  (article + sidebar)
    ════════════════════════════════════════════════════ */
    .cstm-post-layout {
      margin: 0 auto;
      padding: 36px clamp(16px, 3vw, 24px) 80px;
      max-width: 1300px;
     
    }
      .cstm-post-wrap-grid{
        display: grid;
      grid-template-columns: 1fr 300px;
      gap: 40px;
      align-items: start;
      }

    /* ════════════════════════════════════════════════════
       ARTICLE CARD
    ════════════════════════════════════════════════════ */
    .cstm-post-article {
      background: var(--card-bg);
      border-radius: var(--r-md);
      box-shadow: var(--sh-sm);
      overflow: hidden;
    }

    /* ── post meta row (author + date + read time) ── */
    .cstm-post-meta-row {
      display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
      padding: 18px 10px;
      border-bottom: 1px solid var(--border);
      background: var(--cream-dk);
    }
    .cstm-post-meta-row .cp-author {
      display: flex; align-items: center; gap: 9px;
    }
    .cstm-post-meta-row .cp-avatar {
      width: 50px; height: 50px; border-radius: 50%; flex-shrink: 0;
      background: linear-gradient(135deg, var(--red), var(--gold));
      display: flex; align-items: center; justify-content: center;
      font-size: 1.78rem; font-weight: 700; color: #fff;
      border: 2px solid rgba(245,151,15,.3);
    }
    .cstm-post-meta-row .cp-author-name {
      font-size: 1.2rem; font-weight: 700; color: var(--red);
    }
    .cstm-post-meta-row .cp-author-role {
      font-size: 1.2rem; color: var(--muted);
    }
    .cstm-post-meta-row .cp-meta-dots {
      display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
      font-size: 1.2rem; color: var(--muted); margin-left: auto;
    }
    .cstm-post-meta-row .cp-meta-dots span {
      display: flex; align-items: center; gap: 5px;
    }

    /* ── intro excerpt (gold left border) ── */
    .cstm-post-intro {
      border-left: 4px solid var(--gold);
      background: rgba(245,151,15,.06);
      padding: 18px 24px;
      font-size: 2rem; font-weight: 500;
      color: var(--text); line-height: 1.78;
      margin: 0;
    }

    /* ── body ── */
    .cstm-post-body { padding: 32px 28px 40px; }

    .cstm-post-body h2 {
      font-size: 3rem; font-weight: 700; color: var(--black);
      margin: 32px 0 12px;
      padding-bottom: 8px;
      border-bottom: 2px solid var(--border);
      position: relative;
    }
    .cstm-post-body h2::before {
      content: '';
      position: absolute; bottom: -2px; left: 0;
      width: 44px; height: 2px;
      background: var(--red);
    }
    .cstm-post-body h3 {
      font-size: 1rem; font-weight: 700; color: var(--red);
      margin: 24px 0 10px;
    }
    .cstm-post-body p {
      font-size: 2rem; line-height: 1.9;
      color: #3e2a10; margin-bottom: 16px;
    }
    .cstm-post-body strong { color: var(--red); font-weight: 700; }
    .cstm-post-body em { color: var(--muted); font-style: italic; }

    /* lists */
    .cstm-post-body ul,
    .cstm-post-body ol {
      list-style: none; padding: 0; margin: 0 0 16px;
    }
    .cstm-post-body ul li,
    .cstm-post-body ol li {
      position: relative; padding-left: 22px;
      font-size: 1.5rem;
      line-height: 2;
      color: #3e2a10; margin-bottom: 8px;
    }
    .cstm-post-body ul li::before {
      content: '✦';
      position: absolute; left: 0; top: 4px;
      color: var(--gold);     
      font-size: 1.5rem;
      line-height: 2;
    }
    .cstm-post-body ol { counter-reset: ol; }
    .cstm-post-body ol li::before {
      counter-increment: ol;
      content: counter(ol) ".";
      position: absolute; left: 0;
      color: var(--red); font-weight: 700;     
      font-size: 1.5rem;
      line-height: 2;
    }

    /* pull-quote */
    .cstm-post-pullquote {
      background: linear-gradient(135deg, var(--deep) 0%, #3d0909 100%);
      border-radius: var(--r-sm);
      padding: 26px 30px;
      margin: 26px 0;
      position: relative; overflow: hidden;
    }
    .cstm-post-pullquote::before {
      content: '"';
      position: absolute; top: -12px; left: 14px;
      font-size: 7rem; line-height: 1;
      color: rgba(245,151,15,.10);
      font-family: Georgia, serif; pointer-events: none;
    }
    .cstm-post-pullquote p {
      font-size: 1.8rem; font-weight: 600; font-style: italic;
      color: #fff !important; line-height: 2; margin: 0;
      position: relative; z-index: 1;
    }
    .cstm-post-pullquote cite {
      display: block; margin-top: 10px;
      font-size: 1.5rem; font-weight: 500; font-style: normal;
      color: var(--gold-light); letter-spacing: .07em;
      text-transform: uppercase; position: relative; z-index: 1;
    }

    /* table */
    .cstm-post-table-wrap { overflow-x: auto; margin: 22px 0; border-radius: var(--r-sm); overflow: hidden; box-shadow: var(--sh-sm); }
    .cstm-post-table { width: 100%; border-collapse: collapse; font-size: 1.5rem; }
    .cstm-post-table thead tr { background: var(--red); color: #fff; }
     .cstm-post-table thead tr th { font-size: 1.5rem;  }
    .cstm-post-table th {
      padding: 11px 15px; text-align: left;
      font-weight: 600; letter-spacing: .05em; font-size: .76rem; text-transform: uppercase;
    }
    .cstm-post-table td { padding: 10px 15px; border-bottom: 1px solid var(--border); color: #3e2a10; }
    .cstm-post-table tbody tr:nth-child(even) td { background: var(--cream-dk); }
    .cstm-post-table tbody tr:hover td { background: rgba(245,151,15,.07); }
    .cstm-post-table .planet { font-weight: 700; color: var(--red); }
    .cstm-post-table .sign   { font-weight: 600; }

   /* ── tags ── */
    .cstm-post-tags {
      display: flex; flex-wrap: wrap; gap: 7px;
      padding: 18px 28px;
      border-top: 1px solid var(--border);
      background: var(--cream);
    }
    .cstm-post-tags .cp-tag-label {
      font-size: 1.2rem; font-weight: 700; letter-spacing: .06em;
      text-transform: uppercase; color: var(--muted);
      align-self: center; margin-right: 4px;
    }
    
    .cp-tag {
     padding: 4px 11px;
      border-radius: 20px;
      border: 1px solid var(--border);
      font-size: 1.2rem;
      color: #fff;
      cursor: pointer;
      transition: all .18s;
      background: var(--red);
    }
    .cp-tag:hover { background: var(--red); color: #fff; border-color: var(--red); }


    .share-btn {
      width: 34px; height: 34px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: .82rem; font-weight: 700;
      border: 1.5px solid var(--border);
      color: var(--muted); cursor: pointer; transition: all .18s;
      text-decoration: none;
    }
    .share-btn:hover { background: var(--red); color: #fff; border-color: var(--red); }

    /* ════════════════════════════════════════════════════
       AUTHOR BIO
    ════════════════════════════════════════════════════ */
    .cstm-post-author-box {
      margin-top: 28px;
      background: linear-gradient(135deg, var(--deep) 0%, #3d0909 100%);
      border-radius: var(--r-md);
      padding: 26px 28px;
      display: flex; gap: 20px; align-items: flex-start;
      box-shadow: var(--sh-md);
    }
    .cstm-post-author-box .bio-avatar {
      width: 68px; height: 68px; border-radius: 50%; flex-shrink: 0;
      background: linear-gradient(135deg, var(--red), var(--gold));
      display: flex; align-items: center; justify-content: center;
      font-size: 1.5rem; font-weight: 700; color: #fff;
      border: 3px solid rgba(245,151,15,.4);
    }
    .cstm-post-author-box h4 {
      font-size: .95rem; font-weight: 700; color: var(--gold-light); margin-bottom: 3px;
    }
    .cstm-post-author-box .bio-role {
      font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
      color: rgba(255,255,255,.45); margin-bottom: 9px;
    }
    .cstm-post-author-box p {
      font-size: .82rem; color: rgba(255,255,255,.72); line-height: 1.7; margin: 0;
    }

    /* ════════════════════════════════════════════════════
       RELATED POSTS
    ════════════════════════════════════════════════════ */
    .cstm-post-related { margin-top: 40px; }
    .cstm-post-related-label {
      display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
    }
    .cstm-post-related-label h3 {
      font-size: 2.5rem; font-weight: 800; color: var(--black); white-space: nowrap;
    }
    .cstm-post-rl-line {
      flex: 1;
      height: 3px;
      max-width: 255px;
      background: linear-gradient(90deg, var(--red), transparent);
    }
 
    .cstm-post-related-grid {
      display: grid; grid-template-columns: repeat(3,1fr); gap: 20px;
    }

    /* related card (same pattern as listing cards) */
    .cstm-post-rel-card {
      background: var(--card-bg);
      border-radius: var(--r-sm);
      overflow: hidden;
      box-shadow: var(--sh-sm);
      transition: transform .25s, box-shadow .25s;
      display: flex; flex-direction: column;
    }
    .cstm-post-rel-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
    .cstm-post-rel-thumb {
      width: 100%; aspect-ratio: 16/10;
      display: flex; align-items: center; justify-content: center; font-size: 2.8rem;
      overflow: hidden;
    }
    .cstm-post-rel-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .cstm-post-rel-thumb.t1 { background: linear-gradient(135deg,#4a0e0e,#8b3030); }
    .cstm-post-rel-thumb.t2 { background: linear-gradient(135deg,#2d1508,#7a4020); }
    .cstm-post-rel-thumb.t3 { background: linear-gradient(135deg,#080e2d,#203080); }
    .cstm-post-rel-cat {
      background: var(--red); color: #fff;
      text-align: center; padding: 8px 12px;
      font-size: 1.2rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    }
    .cstm-post-rel-body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; }
    .cstm-post-rel-body .cp-rel-meta { font-size: 1.2rem; color: var(--muted); margin-bottom: 7px; }
    .cstm-post-rel-body h4 {
      font-size: 1.5rem; font-weight: 700; color: var(--black);
      line-height: 1.4; margin-bottom: 10px; flex: 1;
    }
    .cstm-post-read-more {
      display: inline-flex; align-items: center; gap: 5px;
      color: var(--red); font-size: 1.6rem; font-weight: 700;
      text-decoration: none; transition: gap .18s;
    }
    .cstm-post-read-more:hover { gap: 9px; }
    .cstm-post-read-more .circle {
      width: 17px; height: 17px; border-radius: 50%;
      border: 1.5px solid var(--red);
      display: flex; align-items: center; justify-content: center;
      font-size: .62rem; transition: background .18s, color .18s;
    }
    .cstm-post-read-more:hover .circle { background: var(--red); color: #fff; }

    /* ════════════════════════════════════════════════════
       SIDEBAR
    ════════════════════════════════════════════════════ */
    .cstm-post-sidebar { display: flex; flex-direction: column; gap: 24px; }
    .cstm-post-sb-sticky {display: flex; flex-direction: column; gap: 24px; }

    /* CTA block */
    .cstm-post-sb-cta {
      background: linear-gradient(160deg, var(--deep) 0%, #3d0909 100%);
      border: 1px solid rgba(245,151,15,.4);
      border-radius: var(--r-sm);
      padding: 24px 20px; text-align: center;
      position: relative; overflow: hidden;
    }
    .cstm-post-sb-cta::before {
      content: '☸'; position: absolute; top: -12px; right: -12px;
      font-size: 5rem; opacity: .06; color: var(--gold); pointer-events: none;
    }
    .cstm-post-sb-cta h4 {
      font-size: 2.5rem; font-weight: 700; color: #fff; margin-bottom: 7px; line-height: 1.3;
    }
    .cstm-post-sb-cta h4 em { color: var(--gold-light); font-style: italic; }
    .cstm-post-sb-cta p { font-size: 1.5rem; color: rgba(255,255,255,.68); margin-bottom: 14px; }
    .cstm-post-price-badge {
      font-size: 2.5rem; font-weight: 800; color: var(--gold-light);
      display: block; margin-bottom: 13px;
    }
    .cstm-post-price-badge s { font-size: 2rem; color: rgba(255,255,255,.38); margin-right: 5px; }
    .cstm-post-sb-btn {
      display: block; width: 100%; padding: 11px;
      background: linear-gradient(135deg, var(--gold) 0%, #c8800a 100%);
      color: #1a0800; font-weight: 700; font-size: 1.6rem;
      border: none; border-radius: 4px; cursor: pointer;
      text-decoration: none; transition: filter .18s; text-align: center;
    }
    .cstm-post-sb-btn:hover { filter: brightness(1.1); color: #1a0800;}

    
    
    /* table of contents */
    .cstm-post-toc ol { list-style: none; counter-reset: toc; padding: 0; margin: 0; }
    .cstm-post-toc li { counter-increment: toc; border-bottom: 1px dashed var(--border); }
    .cstm-post-toc li:last-child { border-bottom: none; }
    .cstm-post-toc a {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 0; font-size: .82rem; color: var(--muted); transition: color .18s;
    }
    .cstm-post-toc a::before {
      content: counter(toc);
      min-width: 21px; height: 21px; border-radius: 50%;
      background: var(--cream-dk); border: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      font-size: .68rem; font-weight: 700; color: var(--red); flex-shrink: 0;
    }
    .cstm-post-toc a:hover { color: var(--red); }
    .cstm-post-toc a:hover::before { background: var(--red); color: #fff; border-color: var(--red); }

    /* recent posts */
    .cstm-post-rp-item {
      display: flex; gap: 10px; align-items: flex-start;
      padding: 10px 0; border-bottom: 1px dashed var(--border);
    }
    .cstm-post-rp-item:last-child { border-bottom: none; padding-bottom: 0; }
    .cstm-post-rp-thumb {
      width: 100px; height: 100px; border-radius: var(--r-sm); flex-shrink: 0;
      display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
    }
    .cstm-post-rp-thumb.c1 { background: linear-gradient(135deg,#4a0e0e,#8b3030); }
    .cstm-post-rp-thumb.c2 { background: linear-gradient(135deg,#2d1508,#7a4020); }
    .cstm-post-rp-thumb.c3 { background: linear-gradient(135deg,#080e2d,#203080); }
    .cstm-post-rp-thumb.c4 { background: linear-gradient(135deg,#0e2d0e,#208030); }
    .cstm-post-rp-info h5 {
      font-size: 1.5rem; font-weight: 700; color: var(--black); line-height: 1.3; margin-bottom: 3px;
    }
    .cstm-post-rp-info span { font-size: 1.5rem; color: var(--muted); }

    /* sidebar tags */
    .cstm-post-sb-tags { display: flex; flex-wrap: wrap; gap: 6px;     margin: 10px 0px 10px 0px;}
    .cstm-post-sb-tag {
        padding: 4px 10px;
        border-radius: 20px;
        border: 1px solid var(--border);
        font-size: 1.5rem;
        color: var(--muted);
        cursor: pointer;
        transition: all .18s;
        background: var(--red);
        color: #fff;
    }
    .cstm-post-sb-tag:hover { background: var(--red); color: #fff; border-color: var(--red); }

    /* ════════════════════════════════════════════════════
       ANIMATIONS
    ════════════════════════════════════════════════════ */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .cstm-post-hero-caption  { animation: fadeUp .65s ease both; }
    .cstm-post-article       { animation: fadeUp .5s .05s ease both; }
    .cstm-post-related       { animation: fadeUp .5s .1s  ease both; }
     .blog-search-icon{
      display: none;
    }
    .blog-search-icon-desktop{
      display: block;
    }
  .cstm-blog-hero{
    display: block;
  }
   .cstm-blog-hero img,
   .Mobil-cstm-blog-hero img{
    margin: 0 auto;

   }
  .Mobil-cstm-blog-hero{
    display: none;

  }
/* ── 1024px ── */
@media (max-width: 1024px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
        .cstm-post-layout {
        grid-template-columns: 1fr;
      }
      .cstm-post-sidebar {
        display: grid; grid-template-columns: repeat(2,1fr);
        order: -1;
      }
      .cstm-post-sb-cta { grid-column: 1/-1; }
      .cstm-post-sb-sticky {  display: contents; }
      .cstm-post-related-grid { grid-template-columns: repeat(2,1fr); }
      .cstm-post-wrap-grid{
        display: block;
      }
      .cstm-post-rel-card-3{
        display: none;
      }
}


/* ── ≤ 992px ─── */
@media (max-width: 992px) {
  .punch_API-hero-title-large { font-size: 42px; }
  .punch_API-element-block    { padding: 25px; }
  .punch_API-element-block h3 { font-size: 20px; }
  .punch_API-card-number      { font-size: 2rem; top: 20px; }
  .free-kundali-new-def-layout{ flex-direction: column; gap: 40px; }
  .free-kundali-new-def-img   { flex: unset; width: 100%; }
  .free-kundali-def-circle-shape { width: 260px; height: 260px; }
  .free-kundali-benefits-grid { grid-template-columns: repeat(2,1fr); }
  .lucky-date-feature-grid    { grid-template-columns: repeat(2,1fr); }
  .lucky-date-hero-title      { font-size: 42px; }
  .lucky-date-day-cell        { padding: 10px 0; font-size: 1rem; }
}

/* ── ≤ 991px ─── */
@media (max-width: 991px) {
  .stopping-grid { grid-template-columns: repeat(2,1fr); }
  .hero-slide    { height: 260px; min-height: 260px; }
  img.hero__badge-icononly { margin-left: -25px !important; }
  .about-badge   { right: 0; }
  .story-block   { flex-direction: column !important; gap: 25px; }
  .story-content { order: 1; }
  .story-img-wrap{ order: 2; width: 100%; }
  .bg-img        { min-height: 500px; }
  .story-list-grid { grid-template-columns: 1fr; }
  .story-content h3 { font-size: 26px; }
  .insta-grid    { grid-template-columns: repeat(3,1fr); }
  .hero-slide    { height: 60vh; }
  .story-content-1 { padding-left: 0; }
  .story-content-1::before { display: none; }
  .onecall-list li { justify-content: center; text-align: left; }
  .onecall-wrapper { grid-template-columns: 1fr; gap: 50px; text-align: center; }
}
/* ── ≥ 980px: Hero two-column ─── */
@media (min-width: 980px) {
  .hero__container { grid-template-columns: 1.05fr .95fr; gap: 104px; }
  .hero__content { order: 1; }
  .hero__visual  { order: 2; }
  .hero__title   { font-size: 62px; }
  .hero__img     { max-width: 500px; }
}

@media (max-width: 700px) {
    .cstm-post-body { padding: 22px 18px 28px; }
    .cstm-post-meta-row { padding: 14px 18px; }
    .cstm-post-related-grid { grid-template-columns: 1fr; }
    .cstm-post-sidebar { grid-template-columns: 1fr; padding-top: 20px;}
    .cstm-post-author-box { flex-direction: column; }
    .cstm-post-layout { padding: 24px 14px 56px; gap: 28px; }
    .cstm-post-intro { 
      padding: 15px 18px;
     }
     .cstm-post-body h2{
      font-size: 2rem;
     }
    
      .cstm-post-intro,
      .cstm-post-pullquote p,
      .cstm-post-body p,
      .card-body h4 {
  
      font-size: 1.5rem;
     }
     .cstm-post-table,
     .cstm-post-table thead tr th,
     .cstm-post-pullquote cite,
         .cstm-post-breadcrumb,
         .cstm-post-cat-chip, .cstm-post-sb-card h4,
         .cstm-post-sb-tag {
       font-size: 1rem;

     }
       
      .sec-heading h3 { font-size: 2rem; }
      .card-body h4{
        margin: 0;
      }
      .sec-heading:not(:first-child) { margin-top: 30px; }
       .cstm-blog-hero{
          display: none;
        }
        .Mobil-cstm-blog-hero{
          display: block;

        }
  }


/* ── 768px ── */
@media (max-width: 768px) {
  

  .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }

  .blog-cat-tabs { padding: 0 12px; }
  .blog-cat-tab { padding: 11px 13px; font-size: .75rem; }

  .blog-search-row input {     width: 100%; border-radius: 0; }

  .blog-wrap { padding: 32px 16px 60px; }

  .offer-banner { padding: 32px 16px 24px; }
  .cp-tag {
        font-size: 0.8rem;
  }
  .process-flow { flex-direction: column; align-items: center; gap: 40px; }
  .process-line ,
  .blog-cat-tabs,
  .cstm-mobile-post-hide { display: none; }
  .cstm-filter-wrap{
    gap: 10px;
  }
}

@media(max-width:767px){


    .blog-mobile-filter{
        display:flex;
        width: 50%;
     
    }
    .blog-search-icon{
      display: block;
    }
    .blog-search-icon-desktop{
      display: none;
    }
   



    .hero-slide    { height: 550px; min-height: 550px; }
    .desktop-bg    { display: none; }
    .mobile-bg     { display: block; }
    .hero-cta      { flex-direction: column; align-items: flex-start; }
    .carousel-control-prev, .carousel-control-next { display: none; }
    .about-badge   { position: static; margin-top: -60px; display: inline-block; }
    #about         { padding-top: 0; }
    .hero-slide    { height: 88vh; }
    .stat-item     { min-width: 100%; }
    .story-block-2 { flex-direction: column; }
    .story-content-2 { padding: 40px 24px; }
    .story-list-grid { grid-template-columns: 1fr; }
    .features-grid { grid-template-columns: 1fr; }
    #sade-sati-heroSection { padding: 70px 0 50px; }
    .sade-sati-calc-card   { padding: 24px; }
    .love-calculator-hero-section {
          padding: 70px 0 50px;
      }

      .love-calculator-card {
          padding: 24px;
      }

      .love-calculator-compatibility-score {
          font-size: 3rem;
      }

      .love-calculator-banner-text h3 {
          font-size: 1.2rem;
      }

      

}

/* ── ≤ 600px ─── */
@media (max-width: 600px) {
  .onecall-badges-pro { flex-direction: column; align-items: center; gap: 12px; }
  .onecall-price-box  { flex-direction: column; gap: 20px; text-align: center; }
  .cstm-post-hero { aspect-ratio: 16/9; max-height: 260px; }

}

/* ── ≤ 576px ─── */
@media (max-width: 576px) {
  #ourStory       { padding: 40px 0; }
  .story-content h3 { font-size: 22px; }
  .story-content p  { font-size: 14px; }
  .edu-btn          { padding: 10px 20px; font-size: 13px; }
  .bg-img           { min-height: 350px; }
  .insta-grid       { grid-template-columns: repeat(2,1fr); }
  .insta-header     { flex-direction: column; align-items: flex-start; text-align: left; }
  .stopping-grid    { grid-template-columns: 1fr; }
  .free-kundali-benefits-grid { grid-template-columns: 1fr; }
  .free-kundali-new-def-layout{ gap: 28px; }
  .lucky-date-feature-grid    { grid-template-columns: 1fr; }
  .lucky-date-calc-card       { padding: 30px 20px; }
  .lucky-date-result          { padding: 25px 15px; }
}

/* ── 540px ── */
@media (max-width: 540px) {
  .blog-grid { grid-template-columns: 1fr; }

  .featured-body { padding: 22px 18px; }
  .featured-body h2 { font-size: 1.15rem; }

  .pagination { gap: 4px; }
  .pg { min-width: 34px; height: 34px; font-size: .78rem; }
}

@media (max-width: 480px) {
  .cstm-post-hero-caption h1 { font-size: 1.15rem; }
  .cstm-post-meta-row .meta-dots { margin-left: 0; }
}
/* ── 380px ── */
@media (max-width: 380px) {
  .blog-cat-tab { padding: 10px 10px; font-size: .7rem; }
}