/* ================================================
   HEADER ENHANCEMENTS
   noor-landing-58 — He Knows What is within You
   ================================================ */

/* ──────────────────────────
   1. STAR FIELD LAYER
   ────────────────────────── */
.stars-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* Small white stars */
.stars-layer::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 1px;
  background: transparent;
  border-radius: 50%;
  animation: star-twinkle-a 9s ease-in-out infinite alternate;
  box-shadow:
    20px 60px rgba(255,255,255,0.85), 85px 180px rgba(255,255,255,0.65),
    150px 90px rgba(255,255,255,0.80), 230px 250px rgba(255,255,255,0.60),
    320px 40px rgba(255,255,255,0.90), 410px 160px rgba(255,255,255,0.70),
    510px 280px rgba(255,255,255,0.55), 600px 120px rgba(255,255,255,0.80),
    680px 350px rgba(255,255,255,0.65), 780px 80px rgba(255,255,255,0.90),
    860px 240px rgba(255,255,255,0.60), 950px 160px rgba(255,255,255,0.75),
    1040px 300px rgba(255,255,255,0.70), 1130px 70px rgba(255,255,255,0.85),
    1220px 200px rgba(255,255,255,0.60), 1310px 330px rgba(255,255,255,0.80),
    1400px 110px rgba(255,255,255,0.70), 1490px 270px rgba(255,255,255,0.85),
    1580px 50px rgba(255,255,255,0.60), 1680px 190px rgba(255,255,255,0.75),
    30px 420px rgba(255,255,255,0.70), 120px 500px rgba(255,255,255,0.55),
    210px 460px rgba(255,255,255,0.80), 300px 550px rgba(255,255,255,0.65),
    390px 380px rgba(255,255,255,0.85), 480px 520px rgba(255,255,255,0.55),
    580px 440px rgba(255,255,255,0.70), 670px 580px rgba(255,255,255,0.80),
    760px 400px rgba(255,255,255,0.85), 860px 540px rgba(255,255,255,0.60),
    950px 470px rgba(255,255,255,0.70), 1050px 600px rgba(255,255,255,0.75),
    1140px 420px rgba(255,255,255,0.85), 1230px 560px rgba(255,255,255,0.55),
    1320px 490px rgba(255,255,255,0.70), 1420px 620px rgba(255,255,255,0.80),
    1510px 400px rgba(255,255,255,0.60), 1610px 540px rgba(255,255,255,0.85),
    1700px 460px rgba(255,255,255,0.70), 1800px 580px rgba(255,255,255,0.60),
    50px 720px rgba(255,255,255,0.80), 140px 800px rgba(255,255,255,0.65),
    240px 680px rgba(255,255,255,0.85), 330px 820px rgba(255,255,255,0.55),
    430px 740px rgba(255,255,255,0.70), 520px 860px rgba(255,255,255,0.80),
    620px 700px rgba(255,255,255,0.60), 710px 840px rgba(255,255,255,0.85),
    810px 760px rgba(255,255,255,0.70), 910px 890px rgba(255,255,255,0.55),
    1010px 740px rgba(255,255,255,0.80), 1100px 830px rgba(255,255,255,0.65),
    1200px 780px rgba(255,255,255,0.85), 1290px 920px rgba(255,255,255,0.55),
    1390px 800px rgba(255,255,255,0.70), 1480px 850px rgba(255,255,255,0.80),
    1580px 720px rgba(255,255,255,0.60), 1670px 900px rgba(255,255,255,0.85),
    1760px 780px rgba(255,255,255,0.70), 1850px 840px rgba(255,255,255,0.55);
}

/* Medium gold + white stars */
.stars-layer::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 2px; height: 2px;
  background: transparent;
  border-radius: 50%;
  animation: star-twinkle-b 13s ease-in-out infinite;
  box-shadow:
    160px 140px rgba(237,210,121,0.90), 480px 220px rgba(255,255,255,0.80),
    840px 170px rgba(237,210,121,0.75), 1200px 250px rgba(255,255,255,0.85),
    1600px 140px rgba(237,210,121,0.80), 280px 480px rgba(237,210,121,0.65),
    640px 420px rgba(255,255,255,0.70), 1000px 510px rgba(237,210,121,0.80),
    1360px 450px rgba(255,255,255,0.60), 1750px 480px rgba(237,210,121,0.70),
    100px 680px rgba(255,255,255,0.80), 460px 750px rgba(237,210,121,0.65),
    820px 700px rgba(255,255,255,0.70), 1180px 760px rgba(237,210,121,0.90),
    1540px 720px rgba(255,255,255,0.60), 220px 900px rgba(237,210,121,0.70),
    580px 950px rgba(255,255,255,0.80), 940px 870px rgba(237,210,121,0.60),
    1300px 910px rgba(255,255,255,0.70), 1660px 880px rgba(237,210,121,0.80);
}

@keyframes star-twinkle-a {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
@keyframes star-twinkle-b {
  0%, 100% { opacity: 0.9; }
  40% { opacity: 0.35; }
  80% { opacity: 0.75; }
}

/* ──────────────────────────
   2. MOON GLOW
   ────────────────────────── */
.moon-glow {
  position: absolute;
  top: -100px;
  right: -80px;
  width: 540px;
  height: 540px;
  background: radial-gradient(circle at 42% 42%,
    rgba(237, 210, 121, 0.22) 0%,
    rgba(237, 210, 121, 0.07) 38%,
    transparent 68%);
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
  animation: moon-breathe 11s ease-in-out infinite;
}

@keyframes moon-breathe {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50%       { opacity: 1;    transform: scale(1.10); }
}

/* ──────────────────────────
   3. HERO BG — AURORA
   ────────────────────────── */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  animation: aurora-shift 22s ease-in-out infinite alternate;
}

@keyframes aurora-shift {
  0% {
    background:
      radial-gradient(ellipse at 10% 20%, rgba(99,102,241,0.14) 0%, transparent 45%),
      radial-gradient(ellipse at 90% 75%, rgba(237,210,121,0.10) 0%, transparent 45%),
      radial-gradient(ellipse at 50% 100%, rgba(55,65,160,0.09) 0%, transparent 50%);
  }
  50% {
    background:
      radial-gradient(ellipse at 35% 55%, rgba(99,102,241,0.11) 0%, transparent 45%),
      radial-gradient(ellipse at 70% 20%, rgba(237,210,121,0.13) 0%, transparent 45%),
      radial-gradient(ellipse at 20% 85%, rgba(55,65,160,0.08) 0%, transparent 50%);
  }
  100% {
    background:
      radial-gradient(ellipse at 75% 40%, rgba(99,102,241,0.12) 0%, transparent 45%),
      radial-gradient(ellipse at 25% 70%, rgba(237,210,121,0.09) 0%, transparent 45%),
      radial-gradient(ellipse at 60% 10%, rgba(55,65,160,0.12) 0%, transparent 50%);
  }
}

/* ──────────────────────────
   4. FLOATING ORBS
   ────────────────────────── */
.header-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  filter: blur(60px);
}

.header-orb-1 {
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(237,210,121,0.18) 0%, transparent 70%);
  top: 5%; left: -8%;
  animation: orb-drift-1 22s ease-in-out infinite;
}

.header-orb-2 {
  width: 290px; height: 290px;
  background: radial-gradient(circle, rgba(99,102,241,0.14) 0%, transparent 70%);
  top: 28%; right: -2%;
  animation: orb-drift-2 28s ease-in-out infinite;
}

.header-orb-3 {
  width: 250px; height: 250px;
  background: radial-gradient(circle, rgba(237,210,121,0.11) 0%, transparent 70%);
  bottom: 18%; left: 32%;
  animation: orb-drift-3 19s ease-in-out infinite;
}

@keyframes orb-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(45px, -55px) scale(1.06); }
  66%       { transform: translate(-28px, 32px) scale(0.96); }
}
@keyframes orb-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(-38px, 50px) scale(1.05); }
  66%       { transform: translate(54px, -28px) scale(0.95); }
}
@keyframes orb-drift-3 {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(28px, -42px); }
}

/* ──────────────────────────
   5. HEADER BADGE
   ────────────────────────── */
.header-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(237, 210, 121, 0.08);
  border: 1px solid rgba(237, 210, 121, 0.28);
  border-radius: 50px;
  padding: 10px 26px;
  margin-bottom: 30px;
  color: #edd279;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: badge-appear 0.9s ease-out 0.2s both;
}

.header-badge .badge-dot {
  width: 8px; height: 8px;
  background: #edd279;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(237, 210, 121, 0.7);
  animation: badge-dot-pulse 2.2s ease-in-out infinite;
}

@keyframes badge-appear {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes badge-dot-pulse {
  0%, 100% { transform: scale(1);   box-shadow: 0 0 8px  rgba(237,210,121,0.7); }
  50%       { transform: scale(1.4); box-shadow: 0 0 18px rgba(237,210,121,1.0); }
}

/* ──────────────────────────
   6. CONTENT GLASS BOX
   ────────────────────────── */
.main-header .header-content { 
  position: relative;
  overflow: hidden;
} 

.main-header .header-content > * {
  position: relative;
  z-index: 1;
}

/* ──────────────────────────
   7. ORNAMENTAL DIVIDER
   ────────────────────────── */
.header-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 26px auto 0;
  max-width: 260px;
  animation: divider-reveal 1s ease-out 1.1s both;
}

.header-divider .divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(237,210,121,0.5));
}
.header-divider .divider-line.right {
  background: linear-gradient(90deg, rgba(237,210,121,0.5), transparent);
}

.header-divider .divider-diamond {
  width: 7px; height: 7px;
  background: #edd279;
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(237,210,121,0.65);
  animation: diamond-glow 3.5s ease-in-out infinite;
  flex-shrink: 0;
}

.header-divider .divider-dot {
  width: 4px; height: 4px;
  background: rgba(237,210,121,0.55);
  transform: rotate(45deg);
  flex-shrink: 0;
}

@keyframes divider-reveal {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}
@keyframes diamond-glow {
  0%, 100% { box-shadow: 0 0 6px  rgba(237,210,121,0.50); }
  50%       { box-shadow: 0 0 18px rgba(237,210,121,0.95); }
}

/* ──────────────────────────
   8. SCROLL INDICATOR
   ────────────────────────── */
.header-scroll {
  display: none !important;
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 20;
  opacity: 0.65;
  animation: scroll-bounce 2.2s ease-in-out infinite, scroll-appear 1s ease-out 1.5s both;
  transition: opacity 0.3s ease;
  cursor: default;
  text-decoration: none;
}
.header-scroll:hover { opacity: 1; }

.header-scroll .scroll-mouse {
  width: 24px; height: 38px;
  border: 2px solid rgba(255,255,255,0.35);
  border-radius: 14px;
  position: relative;
}
.header-scroll .scroll-mouse::before {
  content: '';
  position: absolute;
  top: 7px; left: 50%;
  transform: translateX(-50%);
  width: 3px; height: 7px;
  background: #edd279;
  border-radius: 2px;
  animation: scroll-wheel 2.2s ease-in-out infinite;
}
.header-scroll .scroll-text {
  color: rgba(255,255,255,0.40);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-weight: 600;
}

@keyframes scroll-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(9px); }
}
@keyframes scroll-wheel {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(11px); }
}
@keyframes scroll-appear {
  from { opacity: 0; }
  to   { opacity: 0.65; }
}

/* ──────────────────────────
   9. BOTTOM FADE — DEEPER
   ────────────────────────── */
.main-header .bottom-fade {
  height: 260px !important;
  background: linear-gradient(
    to top,
    rgba(8, 14, 32, 0.96) 0%,
    rgba(8, 14, 32, 0.45) 45%,
    transparent 100%
  ) !important;
}

/* ──────────────────────────
   10. RESPONSIVE
   ────────────────────────── */
@media (max-width: 991px) {
  .main-header .header-content {
    padding: 40px 40px !important;
  }
  .header-orb-1, .header-orb-2, .header-orb-3 {
    display: none;
  }
  .moon-glow {
    width: 320px; height: 320px;
    top: -60px; right: -40px;
  }
}

@media (max-width: 767px) {
  .main-header .header-content {
    padding: 32px 24px !important;
    border-radius: 20px !important;
  }
  .header-badge {
    font-size: 10px;
    padding: 8px 18px;
    letter-spacing: 2px;
    margin-bottom: 22px;
  }
  .header-divider { max-width: 200px; }
  .moon-glow      { display: none; }
  .header-scroll  { bottom: 20px; }
}


/* ╔════════════════════════════════════════╗
   ║   BOOK-COVER SECTION ENHANCEMENTS     ║
   ╚════════════════════════════════════════╝ */

/* ──────────────────────────
   1. SECTION BACKGROUND — dark, matching site palette
   ────────────────────────── */
.book-cover {
  background: linear-gradient(180deg,
    #070e1d 0%,
    #0a1628 40%,
    #0c1830 70%,
    #070e1d 100%) !important;
  position: relative;
  overflow: hidden;
}

/* Upgraded pseudo orbs on dark bg */
.book-cover::before {
  background: radial-gradient(circle,
    rgba(237, 210, 121, 0.10) 0%, transparent 60%) !important;
  top: -15% !important;
  left: -8% !important;
}
.book-cover::after {
  background: radial-gradient(circle,
    rgba(99, 102, 241, 0.09) 0%, transparent 60%) !important;
}

/* ──────────────────────────
   2. BACKGROUND FLOATING ORBS
   ────────────────────────── */
.bc-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(70px);
}
.bc-orb-1 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(237, 210, 121, 0.09) 0%, transparent 70%);
  top: 8%; right: -8%;
  animation: bc-drift-1 22s ease-in-out infinite;
}
.bc-orb-2 {
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, transparent 70%);
  bottom: 15%; left: -6%;
  animation: bc-drift-2 28s ease-in-out infinite;
}
.bc-orb-3 {
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(237, 210, 121, 0.07) 0%, transparent 70%);
  top: 45%; left: 45%;
  animation: bc-drift-3 19s ease-in-out infinite;
}

@keyframes bc-drift-1 {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(-35px, 45px); }
}
@keyframes bc-drift-2 {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(42px, -32px); }
}
@keyframes bc-drift-3 {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(-22px, 34px); }
}

/* ──────────────────────────
   3. SECTION BADGE
   ────────────────────────── */
.bc-section-top {
  text-align: center;
  margin-bottom: 56px;
  position: relative;
  z-index: 2;
}

.bc-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(237, 210, 121, 0.08);
  border: 1px solid rgba(237, 210, 121, 0.26);
  border-radius: 50px;
  padding: 10px 26px;
  color: #edd279;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.bc-badge-dot {
  width: 7px; height: 7px;
  background: #edd279;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(237, 210, 121, 0.75);
  animation: bc-dot-pulse 2.2s ease-in-out infinite;
}

@keyframes bc-dot-pulse {
  0%, 100% { transform: scale(1);   box-shadow: 0 0 8px  rgba(237, 210, 121, 0.75); }
  50%       { transform: scale(1.4); box-shadow: 0 0 18px rgba(237, 210, 121, 1.00); }
}

/* ──────────────────────────
   4. BOOK META TAGS
   ────────────────────────── */
.book-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 24px;
}

.book-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(203, 213, 225, 0.80);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 50px;
  letter-spacing: 0.4px;
  transition: all 0.3s ease;
}
.book-tag:hover {
  background: rgba(237, 210, 121, 0.10);
  border-color: rgba(237, 210, 121, 0.30);
  color: #edd279;
}
.book-tag.tag-gold {
  background: rgba(237, 210, 121, 0.09);
  border-color: rgba(237, 210, 121, 0.25);
  color: #edd279;
}
.book-tag i {
  font-size: 11px;
  opacity: 0.8;
}

/* ──────────────────────────
   5. CARD ENHANCEMENTS
   ────────────────────────── */
.book-cover .the-card {
  background: linear-gradient(145deg,
    rgba(16, 26, 48, 0.97) 0%,
    rgba(10, 16, 34, 0.99) 100%) !important;
  border: 1px solid rgba(237, 210, 121, 0.11) !important;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(237, 210, 121, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  position: relative;
  z-index: 2;
}

/* Glowing top border */
.book-cover .the-card::before {
  height: 2px !important;
  background: linear-gradient(
    90deg,
    transparent,
    #edd279 30%,
    #fcd34d 50%,
    #edd279 70%,
    transparent
  ) !important;
  box-shadow: 0 0 24px rgba(237, 210, 121, 0.45) !important;
  animation: border-shimmer 4s ease-in-out infinite !important;
}

@keyframes border-shimmer {
  0%, 100% { opacity: 0.8; }
  50%       { opacity: 1; }
}

/* ──────────────────────────
   6. BOOK TITLE GRADIENT
   ────────────────────────── */
.book-cover .book-title {
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    rgba(255, 255, 255, 0.9) 55%,
    rgba(237, 210, 121, 0.92) 100%
  ) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-shadow: none !important;
}

/* ──────────────────────────
   7. BOOK IMAGE — STRONGER GLOW
   ────────────────────────── */
.book-cover .book-image {
  position: relative;
  z-index: 2;
}
.book-cover .book-image::before {
  background: radial-gradient(circle,
    rgba(237, 210, 121, 0.32) 0%, transparent 65%) !important;
  width: 130% !important;
  height: 130% !important;
  filter: blur(50px) !important;
}

/* ──────────────────────────
   8. ENSURE CONTAINER IS ABOVE ORBS
   ────────────────────────── */
.book-cover .container {
  position: relative;
  z-index: 2;
}

/* ──────────────────────────
   9. RESPONSIVE
   ────────────────────────── */
@media (max-width: 991px) {
  .bc-orb-1, .bc-orb-2, .bc-orb-3 {
    display: none;
  }
  .bc-section-top { margin-bottom: 40px; }
}

@media (max-width: 767px) {
  .bc-section-top { margin-bottom: 32px; }
  .bc-badge {
    font-size: 10px;
    padding: 8px 18px;
    letter-spacing: 2px;
  }
  .book-meta { gap: 8px; }
  .book-tag  { font-size: 11px; padding: 5px 12px; }
}


/* ╔════════════════════════════════════════╗
   ║   THE-VIDEOS SECTION ENHANCEMENTS     ║
   ╚════════════════════════════════════════╝ */

/* ──────────────────────────
   1. SECTION BACKGROUND
   ────────────────────────── */
.the-videos {
  background: #f7f7f7 !important;
  padding: 80px 0 !important;
  position: relative;
  overflow: hidden;
}

/* ──────────────────────────
   2. BACKGROUND ORBS
   ────────────────────────── */
.vid-bg-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(80px);
}
.vid-bg-orb-1 {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(237,210,121,0.18) 0%, transparent 70%);
  top: -12%; left: -10%;
  animation: vid-orb-1 26s ease-in-out infinite;
}
.vid-bg-orb-2 {
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(99,102,241,0.10) 0%, transparent 70%);
  bottom: -12%; right: -8%;
  animation: vid-orb-2 30s ease-in-out infinite;
}
.vid-bg-orb-3 {
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(237,210,121,0.12) 0%, transparent 70%);
  top: 38%; left: 48%;
  animation: vid-orb-3 22s ease-in-out infinite;
}
@keyframes vid-orb-1 {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(55px, 45px); }
}
@keyframes vid-orb-2 {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(-45px, -55px); }
}
@keyframes vid-orb-3 {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(30px, -40px); }
}

/* ──────────────────────────
   3. CONTAINER ABOVE ORBS
   ────────────────────────── */
.the-videos .container {
  position: relative;
  z-index: 2;
}

/* ──────────────────────────
   4. SECTION BADGE
   ────────────────────────── */
.vid-section-badge {
  text-align: center;
  margin-bottom: 22px;
}
.vid-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(237,210,121,0.08);
  border: 1px solid rgba(237,210,121,0.26);
  border-radius: 50px;
  padding: 10px 26px;
  color: #edd279;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.vid-badge-dot {
  width: 7px; height: 7px;
  background: #edd279;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(237,210,121,0.75);
  animation: vid-dot-pulse 2.2s ease-in-out infinite;
}
@keyframes vid-dot-pulse {
  0%, 100% { transform: scale(1);   box-shadow: 0 0 8px  rgba(237,210,121,0.70); }
  50%       { transform: scale(1.4); box-shadow: 0 0 18px rgba(237,210,121,1.00); }
}

/* ──────────────────────────
   5. HEADING — GRADIENT + ANIMATED UNDERLINE
   ────────────────────────── */
.the-videos .heading {
  font-size: 52px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg,
    #1a1a2e 0%,
    #1e2a45 55%,
    #b8910a 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
  text-shadow: none !important;
  margin-bottom: 16px !important;
}
.the-videos .heading::after {
  bottom: -14px !important;
  width: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #edd279, #fcd34d, #edd279) !important;
  box-shadow: 0 0 12px rgba(237,210,121,0.4) !important;
  animation: vid-underline 1.6s ease-out 0.5s forwards !important;
}
@keyframes vid-underline {
  0%   { width: 0;    opacity: 0; }
  100% { width: 80px; opacity: 1; }
}

/* ──────────────────────────
   6. SUBTITLE
   ────────────────────────── */
.vid-subtitle {
  text-align: center;
  color: rgba(30,42,70,0.55);
  font-size: 15px;
  margin-top: 30px;
  margin-bottom: 60px;
  letter-spacing: 0.5px;
  line-height: 1.6;
  display: none !important;
}

/* ──────────────────────────
   7. CSS COUNTER NUMBERS
   ────────────────────────── */
.the-videos .row {
  counter-reset: vid-counter;
}
.the-videos .row > div {
  counter-increment: vid-counter;
}
.the-videos a {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  display: block;
}
.the-videos a::before {
  content: counter(vid-counter, decimal-leading-zero);
  position: absolute;
  top: 15px;
  left: 18px;
  font-size: 27px;
  font-weight: 800;
  color: rgba(255,255,255,0.92);
  z-index: 10;
  line-height: 1;
  letter-spacing: -1px;
  text-shadow: 0 2px 14px rgba(0,0,0,0.7);
  font-family: 'Heebo', sans-serif;
  pointer-events: none;
}

/* ──────────────────────────
   8. ALWAYS-ON DARK OVERLAY + HOVER DEEPEN
   ────────────────────────── */
.the-videos .image::before {
  content: '' !important;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.82) 0%,
    rgba(0,0,0,0.28) 42%,
    rgba(0,0,0,0.06) 68%,
    transparent 100%
  ) !important;
  opacity: 1 !important;
  z-index: 1;
  transition: background 0.35s ease !important;
}
.the-videos .image:hover::before {
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.92) 0%,
    rgba(0,0,0,0.60) 50%,
    rgba(0,0,0,0.22) 80%,
    transparent 100%
  ) !important;
}

/* ──────────────────────────
   9. "WATCH" HINT TEXT — SLIDES UP ON HOVER
   ────────────────────────── */
.the-videos .image::after {
  content: '▶  Watch';
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  color: rgba(255,255,255,0.85);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  opacity: 0;
  z-index: 5;
  transition: all 0.35s ease;
  white-space: nowrap;
  pointer-events: none;
}
.the-videos .image:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ──────────────────────────
   10. PLAY BUTTON — ALWAYS VISIBLE + PULSING RINGS
   ────────────────────────── */
.the-videos .image .card-content {
  opacity: 0.70 !important;
  inset: 40% auto auto 50% !important;
  transform: translate(-50%, -50%) scale(0.88) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 6 !important;
}
.the-videos .image:hover .card-content {
  opacity: 1 !important;
  inset: 42% auto auto 50% !important;
  transform: translate(-50%, -50%) scale(1.12) !important;
}

/* Enlarged gold icon */
.the-videos .image .card-content .icon {
  width: 62px !important;
  height: 62px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #edd279 0%, #fcd34d 100%) !important;
  box-shadow: 0 4px 28px rgba(237,210,121,0.60) !important;
  position: relative !important;
  padding: 0 !important;
}

/* Pulsing ring 1 */
.the-videos .image .card-content .icon::before {
  content: '';
  position: absolute;
  inset: -11px;
  border: 2px solid rgba(237,210,121,0.50);
  border-radius: 50%;
  animation: vid-ring-a 2.4s ease-in-out infinite;
}
/* Pulsing ring 2 */
.the-videos .image .card-content .icon::after {
  content: '';
  position: absolute;
  inset: -24px;
  border: 1.5px solid rgba(237,210,121,0.22);
  border-radius: 50%;
  animation: vid-ring-a 2.4s ease-in-out infinite 0.6s;
}
@keyframes vid-ring-a {
  0%   { transform: scale(1);    opacity: 0.9; }
  50%  { transform: scale(1.28); opacity: 0.2; }
  100% { transform: scale(1);    opacity: 0.9; }
}

/* Play icon — size + optical align */
.the-videos .image .card-content .icon img {
  width: 22px !important;
  height: 22px !important;
  position: relative;
  z-index: 1;
  margin-left: 3px;
}

/* ──────────────────────────
   11. CARD HOVER — GOLD BORDER GLOW + LIFT
   ────────────────────────── */
.the-videos .image {
  border-radius: 22px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.28) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.the-videos .image:hover {
  transform: translateY(-10px) scale(1.02) !important;
  box-shadow:
    0 30px 72px rgba(0,0,0,0.55),
    0 0 0 2px rgba(237,210,121,0.38),
    0 0 55px rgba(237,210,121,0.09) !important;
}

/* ──────────────────────────
   12. RESPONSIVE
   ────────────────────────── */
@media (max-width: 991px) {
  .vid-bg-orb-1, .vid-bg-orb-2, .vid-bg-orb-3 { display: none; }
  .the-videos .heading { font-size: 38px !important; }
}
@media (max-width: 767px) {
  .the-videos .heading {
    font-size: 32px !important;
    margin-bottom: 14px !important;
  }
  .vid-subtitle { font-size: 13px; margin-top: 24px; margin-bottom: 44px; }
  .vid-section-badge { margin-bottom: 14px; }
  .the-videos a::before { font-size: 22px; top: 12px; left: 14px; }
  .the-videos .image .card-content .icon {
    width: 50px !important;
    height: 50px !important;
  }
}