/* ================================================
   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. LAYOUT — CENTER OVERRIDE
   ────────────────────────── */
.main-header .header-caption {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 40px 0 60px !important;
}

.main-header .header-content {
  position: relative;
  overflow: visible;
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 860px !important;
  text-align: center !important;
  margin: 0 auto !important;
}

.main-header .header-content::before,
.main-header .header-content::after { display: none !important; }

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

/* CENTER the paragraph and remove left bar */
.main-header p {
  text-align: center !important;
  padding-left: 0 !important;
  margin: 0 auto !important;
  max-width: 620px;
}
.main-header p::before { display: none !important; }

/* ──────────────────────────
   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 {
  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;
}

/* ──────────────────────────
   11. HERO HALO — central glow
   ────────────────────────── */
.hero-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle,
    rgba(237,210,121,0.14) 0%,
    rgba(99,102,241,0.09) 28%,
    rgba(237,210,121,0.06) 50%,
    rgba(10,18,50,0.0)    72%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  animation: halo-pulse 8s ease-in-out infinite;
}

@keyframes halo-pulse {
  0%, 100% { opacity: 0.8;  transform: translate(-50%, -52%) scale(1);    }
  50%       { opacity: 1;   transform: translate(-50%, -52%) scale(1.08); }
}

/* ──────────────────────────
   12. HERO RINGS
   ────────────────────────── */
.hero-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
}

.hero-ring-outer {
  width: 640px;
  height: 640px;
  margin-top: -320px;
  margin-left: -320px;
  border: 1px solid rgba(237,210,121,0.12);
  box-shadow:
    0 0 0 1px rgba(99,102,241,0.06),
    0 0 60px rgba(237,210,121,0.04) inset;
  animation: ring-spin-cw 60s linear infinite;
  /* dashed effect via gradient */
  border-image: none;
}

/* tick marks on outer ring */
.hero-ring-outer::before,
.hero-ring-outer::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}
.hero-ring-outer::before {
  inset: 8px;
  border: 1px dashed rgba(237,210,121,0.07);
}
.hero-ring-outer::after {
  width: 8px; height: 8px;
  background: rgba(237,210,121,0.55);
  box-shadow: 0 0 12px rgba(237,210,121,0.8);
  top: -4px;
  left: 50%;
  margin-left: -4px;
  border-radius: 50%;
}

.hero-ring-inner {
  width: 440px;
  height: 440px;
  margin-top: -220px;
  margin-left: -220px;
  border: 1px solid rgba(99,102,241,0.14);
  animation: ring-spin-ccw 40s linear infinite;
}

.hero-ring-inner::before {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  background: rgba(99,102,241,0.7);
  box-shadow: 0 0 10px rgba(99,102,241,0.9);
  border-radius: 50%;
  top: -3px;
  left: 50%;
  margin-left: -3px;
}

@keyframes ring-spin-cw {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes ring-spin-ccw {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* ──────────────────────────
   13. FLOATING PARTICLES
   ────────────────────────── */
.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

.hparticle {
  position: absolute;
  border-radius: 50%;
  animation: particle-rise linear infinite;
}

.hparticle:nth-child(1) {
  width: 3px; height: 3px;
  background: rgba(237,210,121,0.75);
  left: 12%; bottom: -10px;
  animation-duration: 9s; animation-delay: 0s;
  box-shadow: 0 0 6px rgba(237,210,121,0.6);
}
.hparticle:nth-child(2) {
  width: 2px; height: 2px;
  background: rgba(255,255,255,0.55);
  left: 25%; bottom: -10px;
  animation-duration: 12s; animation-delay: 1.5s;
}
.hparticle:nth-child(3) {
  width: 4px; height: 4px;
  background: rgba(237,210,121,0.60);
  left: 38%; bottom: -10px;
  animation-duration: 10s; animation-delay: 3s;
  box-shadow: 0 0 8px rgba(237,210,121,0.5);
}
.hparticle:nth-child(4) {
  width: 2px; height: 2px;
  background: rgba(199,185,255,0.55);
  left: 52%; bottom: -10px;
  animation-duration: 13s; animation-delay: 0.8s;
}
.hparticle:nth-child(5) {
  width: 3px; height: 3px;
  background: rgba(237,210,121,0.80);
  left: 63%; bottom: -10px;
  animation-duration: 8s; animation-delay: 2.2s;
  box-shadow: 0 0 8px rgba(237,210,121,0.65);
}
.hparticle:nth-child(6) {
  width: 2px; height: 2px;
  background: rgba(255,255,255,0.45);
  left: 75%; bottom: -10px;
  animation-duration: 11s; animation-delay: 4s;
}
.hparticle:nth-child(7) {
  width: 3px; height: 3px;
  background: rgba(237,210,121,0.65);
  left: 84%; bottom: -10px;
  animation-duration: 9.5s; animation-delay: 1s;
  box-shadow: 0 0 7px rgba(237,210,121,0.55);
}
.hparticle:nth-child(8) {
  width: 2px; height: 2px;
  background: rgba(199,185,255,0.45);
  left: 44%; bottom: -10px;
  animation-duration: 14s; animation-delay: 5s;
}

@keyframes particle-rise {
  0%   { transform: translateY(0)    translateX(0)    scale(1);   opacity: 0; }
  5%   { opacity: 1; }
  85%  { opacity: 0.6; }
  100% { transform: translateY(-110vh) translateX(30px) scale(0); opacity: 0; }
}

/* ──────────────────────────
   14. TITLE — larger & vivid
   ────────────────────────── */
.main-header .main-title {
  text-align: center !important;
  font-size: 82px !important;
  line-height: 1.08 !important;
  letter-spacing: -3px !important;
  margin-bottom: 28px !important;
  background: linear-gradient(135deg,
    #ffffff  0%,
    #f5e8a8 22%,
    #edd279 40%,
    #fde68a 55%,
    #ffffff 72%,
    #edd279 88%,
    #ffffff 100%) !important;
  background-size: 300% 300% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: title-glow 9s ease-in-out infinite;
  filter: drop-shadow(0 4px 40px rgba(237,210,121,0.25)) !important;
}

@keyframes title-glow {
  0%   { background-position: 0%   40%; filter: drop-shadow(0 4px 40px rgba(237,210,121,0.2));  }
  50%  { background-position: 100% 60%; filter: drop-shadow(0 4px 60px rgba(237,210,121,0.45)); }
  100% { background-position: 0%   40%; filter: drop-shadow(0 4px 40px rgba(237,210,121,0.2));  }
}

/* ──────────────────────────
   15. BADGE — shimmer
   ────────────────────────── */
.header-badge {
  display: none !important;
  position: relative;
  overflow: hidden;
  margin-bottom: 36px !important;
  font-size: 12px !important;
  padding: 12px 30px !important;
  letter-spacing: 4px !important;
}

.header-badge::after {
  content: '';
  position: absolute;
  top: 0; left: -130%;
  width: 65%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,0.22),
    transparent);
  border-radius: 50px;
  animation: badge-shimmer 5s ease-in-out infinite 2s;
  pointer-events: none;
}

@keyframes badge-shimmer {
  0%   { left: -130%; opacity: 0; }
  6%   { opacity: 1; }
  48%  { left: 135%; opacity: 1; }
  50%  { opacity: 0; }
  100% { left: 135%; opacity: 0; }
}

/* ──────────────────────────
   16. SUBTITLE paragraph
   ────────────────────────── */
.main-header p.aya-font {
  font-size: 17px !important;
  line-height: 1.85 !important;
  color: rgba(255,255,255,0.72) !important;
  margin-bottom: 32px !important;
}

/* ──────────────────────────
   10. RESPONSIVE
   ────────────────────────── */
@media (max-width: 991px) {
  .hero-ring-outer { width: 480px; height: 480px; margin-top: -240px; margin-left: -240px; }
  .hero-ring-inner { width: 320px; height: 320px; margin-top: -160px; margin-left: -160px; }
  .hero-halo       { width: 560px; height: 560px; }
  .header-orb-1, .header-orb-2, .header-orb-3 { display: none; }
  .moon-glow { width: 320px; height: 320px; top: -60px; right: -40px; }
  .main-header .main-title { font-size: 62px !important; letter-spacing: -2px !important; }
}

@media (max-width: 767px) {
  .hero-ring { display: none; }
  .hero-halo { width: 380px; height: 380px; }
  .main-header .main-title {
    font-size: 42px !important;
    letter-spacing: -1px !important;
    line-height: 1.15 !important;
  }
  .header-badge {
    font-size: 10px !important;
    padding: 9px 20px !important;
    letter-spacing: 2.5px !important;
    margin-bottom: 24px !important;
  }
  .header-divider { max-width: 200px; }
  .moon-glow      { display: none; }
  .header-scroll  { bottom: 20px; }
  .main-header p.aya-font { font-size: 15px !important; }
}


/* ╔════════════════════════════════════════╗
   ║   BOOK-COVER SECTION — MODERN REDESIGN║
   ╚════════════════════════════════════════╝ */

/* ── 1. SECTION BASE ── */
.book-cover {
  background: linear-gradient(160deg,
    #06101f 0%,
    #09182e 35%,
    #0b1c38 60%,
    #07111f 100%) !important;
  position: relative;
  overflow: hidden;
  padding: 80px 0 100px !important;
}

/* ── 2. BACKGROUND SPOTLIGHT BEAM ── */
.bc-spotlight {
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 700px;
  background: radial-gradient(ellipse at 50% 0%,
    rgba(237, 210, 121, 0.08) 0%,
    rgba(99, 102, 241, 0.05) 40%,
    transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: spotlight-breathe 14s ease-in-out infinite;
}
@keyframes spotlight-breathe {
  0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
  50%       { opacity: 1;   transform: translateX(-50%) scale(1.15); }
}

/* ── 3. BG FLOATING ORBS ── */
.bc-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(70px);
}
.bc-orb-1 {
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(237,210,121,0.10) 0%, transparent 70%);
  top: 5%; right: -10%;
  animation: bc-drift-1 22s ease-in-out infinite;
}
.bc-orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(99,102,241,0.09) 0%, transparent 70%);
  bottom: 10%; left: -8%;
  animation: bc-drift-2 28s ease-in-out infinite;
}
.bc-orb-3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(237,210,121,0.07) 0%, transparent 70%);
  top: 42%; left: 42%;
  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)} }

/* ── 4. CONTAINER ABOVE BG ── */
.book-cover .container { position: relative; z-index: 2; }

/* ── 5. SECTION BADGE ── */
.bc-section-top {
  text-align: center;
  margin-bottom: 60px;
  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,.75); }
  50%    { transform:scale(1.4); box-shadow:0 0 18px rgba(237,210,121,1); }
}

/* ── 6. SHOWCASE FLEX LAYOUT ── */
.bc-showcase {
  display: flex;
  align-items: center;
  gap: 64px;
}
.bc-book-col {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
}
.bc-info-col {
  flex: 1 1 0;
  min-width: 0;
}

/* ── 7. BOOK STAGE (rings + halo + particles) ── */
.bc-book-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 360px;
  height: 420px;
}

/* Central gold halo glow */
.bc-book-halo {
  position: absolute;
  width: 320px; height: 320px;
  background: radial-gradient(circle,
    rgba(237,210,121,0.22) 0%,
    rgba(99,102,241,0.10) 45%,
    transparent 70%);
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(28px);
  animation: bc-halo-pulse 8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bc-halo-pulse {
  0%,100%{ opacity:.8; transform:translate(-50%,-50%) scale(1); }
  50%    { opacity:1;  transform:translate(-50%,-50%) scale(1.12); }
}

/* Spinning rings */
.bc-book-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  top: 50%; left: 50%;
}
.bc-book-ring-1 {
  width: 340px; height: 340px;
  margin-top: -170px; margin-left: -170px;
  border: 1px solid rgba(237,210,121,0.14);
  box-shadow: 0 0 30px rgba(237,210,121,0.04) inset;
  animation: bc-ring-cw 45s linear infinite;
}
.bc-book-ring-1::before {
  content:'';
  position:absolute;
  inset:6px;
  border: 1px dashed rgba(237,210,121,0.07);
  border-radius:50%;
}
.bc-book-ring-1::after {
  content:'';
  position:absolute;
  width:8px; height:8px;
  background:rgba(237,210,121,0.7);
  box-shadow:0 0 14px rgba(237,210,121,0.9);
  border-radius:50%;
  top:-4px; left:50%; margin-left:-4px;
}
.bc-book-ring-2 {
  width: 240px; height: 240px;
  margin-top: -120px; margin-left: -120px;
  border: 1px solid rgba(99,102,241,0.14);
  animation: bc-ring-ccw 30s linear infinite;
}
.bc-book-ring-2::before {
  content:'';
  position:absolute;
  width:6px; height:6px;
  background:rgba(99,102,241,0.7);
  box-shadow:0 0 10px rgba(99,102,241,0.9);
  border-radius:50%;
  top:-3px; left:50%; margin-left:-3px;
}
@keyframes bc-ring-cw  { from{transform:rotate(0deg)}   to{transform:rotate(360deg)}  }
@keyframes bc-ring-ccw { from{transform:rotate(0deg)}   to{transform:rotate(-360deg)} }

/* Floating sparkle particles */
.bc-particles {
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  border-radius:50%;
}
.bc-p {
  position:absolute;
  border-radius:50%;
  animation:bc-particle-rise linear infinite;
}
.bc-p:nth-child(1){ width:3px;height:3px; background:rgba(237,210,121,.80); left:18%; bottom:-6px; animation-duration:7s; animation-delay:0s;   box-shadow:0 0 6px rgba(237,210,121,.6); }
.bc-p:nth-child(2){ width:2px;height:2px; background:rgba(255,255,255,.55); left:35%; bottom:-6px; animation-duration:9s; animation-delay:1.2s; }
.bc-p:nth-child(3){ width:4px;height:4px; background:rgba(237,210,121,.65); left:50%; bottom:-6px; animation-duration:8s; animation-delay:2.5s; box-shadow:0 0 8px rgba(237,210,121,.5); }
.bc-p:nth-child(4){ width:2px;height:2px; background:rgba(199,185,255,.55); left:65%; bottom:-6px; animation-duration:10s;animation-delay:0.6s; }
.bc-p:nth-child(5){ width:3px;height:3px; background:rgba(237,210,121,.75); left:80%; bottom:-6px; animation-duration:6.5s;animation-delay:3s;  box-shadow:0 0 7px rgba(237,210,121,.6); }
.bc-p:nth-child(6){ width:2px;height:2px; background:rgba(255,255,255,.45); left:28%; bottom:-6px; animation-duration:11s;animation-delay:4s; }
@keyframes bc-particle-rise {
  0%  { transform:translateY(0)      scale(1);   opacity:0; }
  5%  { opacity:1; }
  85% { opacity:.6; }
  100%{ transform:translateY(-380px) scale(0);  opacity:0; }
}

/* Book image positioning — explicit width so book3d % padding sizes correctly */
.bc-book-stage .book-image {
  position: relative;
  z-index: 4;
  width: 240px !important;
  margin-inline-end: 0 !important;
  flex-shrink: 0;
}

/* ── 8. INFO CARD ── */
.bc-info-card {
  background:
    radial-gradient(ellipse at 10% 0%,   rgba(237,210,121,0.055) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgba(99,102,241,0.055)  0%, transparent 55%),
    linear-gradient(155deg, rgba(18,30,58,0.98) 0%, rgba(8,13,28,1.00) 100%);
  border: 1px solid rgba(237,210,121,0.18);
  border-radius: 28px;
  padding: 50px 46px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 60px 140px rgba(0,0,0,0.70),
    0 0 0 1px rgba(237,210,121,0.06),
    inset 0 1px 0 rgba(255,255,255,0.07),
    inset 0 -1px 0 rgba(0,0,0,0.30);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

/* Top-left corner bracket */
.bc-info-card::before {
  content: '';
  position: absolute;
  top: 18px; left: 18px;
  width: 26px; height: 26px;
  border-top: 2px solid rgba(237,210,121,0.45);
  border-left: 2px solid rgba(237,210,121,0.45);
  border-radius: 4px 0 0 0;
  pointer-events: none;
}
/* Bottom-right corner bracket */
.bc-info-card::after {
  content: '';
  position: absolute;
  bottom: 18px; right: 18px;
  width: 26px; height: 26px;
  border-bottom: 2px solid rgba(237,210,121,0.30);
  border-right: 2px solid rgba(237,210,121,0.30);
  border-radius: 0 0 4px 0;
  pointer-events: none;
}

/* ── Scanning gold top bar ── */
.bc-info-top-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(237,210,121,0.25) 15%,
    #edd279 50%,
    rgba(237,210,121,0.25) 85%,
    transparent 100%);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 0 28px rgba(237,210,121,0.40), 0 2px 12px rgba(237,210,121,0.20);
  overflow: hidden;
}
/* Scan shimmer */
.bc-info-top-line::after {
  content: '';
  position: absolute;
  top: 0; left: -40%;
  width: 35%; height: 100%;
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,0.75), transparent);
  animation: bc-scan 3.5s ease-in-out infinite 1s;
}
@keyframes bc-scan {
  0%   { left: -40%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}

/* ── 9. TAGS ── */
.bc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.bc-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(180,196,220,0.80);
  font-size: 10px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 50px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all 0.28s ease;
}
.bc-tag:hover {
  background: rgba(237,210,121,0.10);
  border-color: rgba(237,210,121,0.36);
  color: #edd279;
  transform: translateY(-1px);
}
.bc-tag.bc-tag-gold {
  background: rgba(237,210,121,0.08);
  border-color: rgba(237,210,121,0.28);
  color: #edd279;
}
.bc-tag.bc-tag-gold:hover {
  background: rgba(237,210,121,0.16);
  box-shadow: 0 4px 18px rgba(237,210,121,0.18);
}
.bc-tag i {
  font-size: 10px;
  width: 16px; height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(237,210,121,0.14);
  border-radius: 50%;
  opacity: 1;
}

/* ── 10. TITLE ── */
.bc-title {
  font-size: 40px !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
  margin: 0 0 22px !important;
  background: linear-gradient(135deg,
    #ffffff  0%,
    #f8edbe 25%,
    #edd279 48%,
    #fde68a 62%,
    #ffffff 82%) !important;
  background-size: 280% 280% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: bc-title-animate 10s ease-in-out infinite !important;
  filter: drop-shadow(0 4px 36px rgba(237,210,121,0.22)) !important;
}
@keyframes bc-title-animate {
  0%   { background-position: 0%   40%; }
  50%  { background-position: 100% 60%; }
  100% { background-position: 0%   40%; }
}

/* ── 11. ORNAMENTAL DIVIDER ── */
.bc-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  max-width: 260px;
}
.bc-div-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(237,210,121,0.50), transparent);
}
.bc-div-line-r {
  background: linear-gradient(90deg, transparent, rgba(237,210,121,0.50));
}
.bc-div-diamond {
  width: 8px; height: 8px;
  background: #edd279;
  transform: rotate(45deg);
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(237,210,121,0.80);
  animation: bc-diamond-glow 3s ease-in-out infinite;
}
@keyframes bc-diamond-glow {
  0%,100% { box-shadow: 0 0 6px  rgba(237,210,121,.60); }
  50%     { box-shadow: 0 0 22px rgba(237,210,121,1.00); }
}

/* ── 12. DESCRIPTION ── */
.bc-desc {
  font-size: 15.5px !important;
  line-height: 1.9 !important;
  color: rgba(195,210,230,0.72) !important;
  margin-bottom: 30px !important;
  padding: 16px 20px !important;
  background: rgba(237,210,121,0.04) !important;
  border-left: 2px solid rgba(237,210,121,0.40) !important;
  border-radius: 0 10px 10px 0 !important;
  position: relative;
}
.bc-desc::before {
  display: none !important;
}

/* ── 13. CTA BUTTONS ── */
.bc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.bc-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 32px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
}
/* Primary — gold filled */
.bc-btn-primary {
  background: linear-gradient(135deg, #f0d882 0%, #c9a227 55%, #e8c54a 100%);
  color: #0a1320;
  box-shadow:
    0 8px 28px rgba(201,162,39,0.42),
    0 0 0 0 rgba(237,210,121,0);
  animation: bc-btn-glow-idle 3.5s ease-in-out infinite;
}
@keyframes bc-btn-glow-idle {
  0%,100% { box-shadow: 0 8px 28px rgba(201,162,39,0.42), 0 0 0 0 rgba(237,210,121,0); }
  50%     { box-shadow: 0 10px 36px rgba(201,162,39,0.58), 0 0 22px rgba(237,210,121,0.22); }
}
.bc-btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 18px 52px rgba(201,162,39,0.60);
  color: #0a1320;
  text-decoration: none;
  animation: none;
}
/* Shine sweep */
.bc-btn-shine {
  position: absolute;
  top: 0; left: -65%;
  width: 45%; height: 100%;
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,0.42), transparent);
  transform: skewX(-18deg);
  transition: left 0.55s ease;
  pointer-events: none;
}
.bc-btn-primary:hover .bc-btn-shine { left: 130%; }

/* Icon wrapper inside primary btn */
.bc-btn-primary .fa {
  width: 22px; height: 22px;
  background: rgba(0,0,0,0.15);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}

/* Outline button */
.bc-btn-outline {
  background: rgba(237,210,121,0.05);
  color: rgba(237,210,121,0.88);
  border: 1.5px solid rgba(237,210,121,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.bc-btn-outline .fa {
  width: 22px; height: 22px;
  background: rgba(237,210,121,0.12);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
  transition: background 0.28s ease;
}
.bc-btn-outline:hover {
  background: rgba(237,210,121,0.10);
  border-color: rgba(237,210,121,0.52);
  color: #edd279;
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(237,210,121,0.15);
}
.bc-btn-outline:hover .fa {
  background: rgba(237,210,121,0.22);
}

/* ── 15. RESPONSIVE ── */
@media (max-width: 1100px) {
  .bc-showcase { gap: 40px; }
  .bc-book-stage { width: 300px; height: 360px; }
  .bc-book-ring-1 { width: 280px; height: 280px; margin-top:-140px; margin-left:-140px; }
  .bc-book-ring-2 { width: 200px; height: 200px; margin-top:-100px; margin-left:-100px; }
  .bc-title { font-size: 34px !important; }
  .bc-info-card { padding: 40px 32px; }
}

@media (max-width: 991px) {
  .bc-showcase { flex-direction: column; gap: 48px; }
  .bc-book-col { order: -1; }
  .bc-book-stage { width: 280px; height: 340px; }
  .bc-orb-1, .bc-orb-2, .bc-orb-3 { display: none; }
  .bc-section-top { margin-bottom: 44px; }
  .bc-title { font-size: 32px !important; }
}

@media (max-width: 767px) {
  .book-cover { padding: 60px 0 80px !important; }
  .bc-section-top { margin-bottom: 32px; }
  .bc-badge { font-size: 10px; padding: 8px 18px; letter-spacing: 2px; }
  .bc-book-stage { width: 240px; height: 300px; }
  .bc-book-ring-1 { width: 240px; height: 240px; margin-top:-120px; margin-left:-120px; }
  .bc-book-ring-2 { display: none; }
  .bc-info-card { padding: 32px 22px; }
  .bc-title { font-size: 28px !important; }
  .bc-actions { flex-direction: column; }
  .bc-btn { justify-content: center; }
}


/* ╔════════════════════════════════════════╗
   ║   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;
  display: flex;
  flex-wrap: wrap;
}
.the-videos .row > div {
  counter-increment: vid-counter;
}
.the-videos a {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  display: block;
} 

/* ──────────────────────────
   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;
}

/* ──────────────────────────
   SCROLL TO TOP BUTTON
   ────────────────────────── */
.scroll-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #edd279, #c9a227);
  border: none;
  cursor: pointer;
  z-index: 9999;
  box-shadow: 0 4px 20px rgba(201,162,39,0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scroll-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.scroll-to-top:hover {
  box-shadow: 0 8px 30px rgba(201,162,39,0.65);
  transform: translateY(-3px);
}
.scroll-to-top::after {
  content: '';
  display: block;
  width: 11px;
  height: 11px;
  border-top: 2.5px solid #1a1a2e;
  border-right: 2.5px solid #1a1a2e;
  transform: rotate(-45deg) translate(-1px, 2px);
}

/* ──────────────────────────
   AYAT LIGHTGALLERY
   ────────────────────────── */
.ayat .owl-carousel .item img { cursor: zoom-in; }
.lg-outer.lg-visible ~ * .share-btn,
.lg-outer.lg-visible ~ * .whats-btn,
body:has(.lg-outer.lg-visible) .share-btn,
body:has(.lg-outer.lg-visible) .whats-btn { display: none !important; }



/* modal images */
.modal-img{
    width: 300px;
    height: 300px;
    border-radius: 8px;
    margin-bottom: 8px;
    margin-inline-end: auto;
    margin-inline-start: 0;
    display: flex;
}

/* ──────────────────────────
   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;
  }
}