/* ================================================
   HEADER ENHANCEMENTS
   noor-landing-60 — Between Fear and Hope
   ================================================ */

/* ──────────────────────────
   1. BACKGROUND IMAGE
   ────────────────────────── */
.main-header {
  position: relative;
  overflow: hidden;
  background-image: url('../images/header-1.webp') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  min-height: 100vh;
}

/* Cinematic colour-grade overlay */
.main-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(4, 6, 18, 0.62) 0%,
      rgba(4, 6, 18, 0.28) 28%,
      rgba(4, 6, 18, 0.38) 62%,
      rgba(4, 6, 18, 0.92) 100%
    ),
    radial-gradient(ellipse at 50% 40%, rgba(237,210,121,0.06) 0%, transparent 55%);
  z-index: 1;
  pointer-events: none;
}

/* Bottom warm gold undertone */
.main-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 50%;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(201,162,39,0.18) 0%,
    rgba(201,162,39,0.06) 40%,
    transparent 65%);
  z-index: 1;
  pointer-events: none;
}

/* ──────────────────────────
   2. HIDE RINGS / STARS
   ────────────────────────── */
.stars-layer,
.hero-ring,
.hero-particles { display: none !important; }

/* ──────────────────────────
   3. ANIMATED COLOUR MESH  (.hero-bg)
   ────────────────────────── */
.hero-bg {
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  animation: mesh-shift 20s ease-in-out infinite alternate;
}

@keyframes mesh-shift {
  0% {
    background:
      radial-gradient(ellipse at 18% 22%, rgba(201,162,39,0.22) 0%, transparent 42%),
      radial-gradient(ellipse at 82% 72%, rgba(99,102,241,0.16) 0%, transparent 42%),
      radial-gradient(ellipse at 58% 8%,  rgba(237,210,121,0.10) 0%, transparent 36%);
  }
  50% {
    background:
      radial-gradient(ellipse at 28% 42%, rgba(201,162,39,0.17) 0%, transparent 42%),
      radial-gradient(ellipse at 72% 52%, rgba(99,102,241,0.20) 0%, transparent 42%),
      radial-gradient(ellipse at 44% 18%, rgba(237,210,121,0.12) 0%, transparent 36%);
  }
  100% {
    background:
      radial-gradient(ellipse at 14% 62%, rgba(201,162,39,0.19) 0%, transparent 42%),
      radial-gradient(ellipse at 86% 28%, rgba(99,102,241,0.14) 0%, transparent 42%),
      radial-gradient(ellipse at 52% 82%, rgba(237,210,121,0.09) 0%, transparent 36%);
  }
}

/* Diagonal light shaft inside the mesh layer */
.hero-bg::before {
  content: '';
  position: absolute;
  top: -30%;
  right: 5%;
  width: 55%;
  height: 150%;
  background: linear-gradient(
    to bottom-left,
    rgba(237,210,121,0.06) 0%,
    rgba(237,210,121,0.11) 18%,
    rgba(237,210,121,0.05) 38%,
    transparent 58%
  );
  transform: rotate(-18deg);
  pointer-events: none;
}

/* ──────────────────────────
   4. WARM GOLD LIGHT SOURCE  (.moon-glow)
   ────────────────────────── */
.moon-glow {
  display: block !important;
  position: absolute;
  top: -100px;
  right: -60px;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle at 38% 38%,
    rgba(255, 222, 130, 0.38) 0%,
    rgba(237, 185,  65, 0.20) 26%,
    rgba(200, 145,  22, 0.07) 52%,
    transparent 68%);
  border-radius: 50%;
  z-index: 3;
  pointer-events: none;
  filter: blur(28px);
  animation: light-breathe 9s ease-in-out infinite;
}

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

/* ──────────────────────────
   5. LEFT WARM ORB  (.header-orb-1)
   ────────────────────────── */
.header-orb-1 {
  display: block !important;
  position: absolute;
  top: 18%;
  left: -10%;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle,
    rgba(237, 210, 121, 0.18) 0%,
    rgba(237, 185,  70, 0.07) 48%,
    transparent 68%);
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
  filter: blur(72px);
  animation: orb-float-l 20s ease-in-out infinite;
}

@keyframes orb-float-l {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-44px); }
}

/* ──────────────────────────
   6. RIGHT COOL ORB  (.header-orb-2)
   ────────────────────────── */
.header-orb-2 {
  display: block !important;
  position: absolute;
  bottom: 22%;
  right: -8%;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle,
    rgba(99, 102, 241, 0.20) 0%,
    rgba(80,  90, 220, 0.07) 50%,
    transparent 70%);
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
  filter: blur(72px);
  animation: orb-float-r 24s ease-in-out infinite;
}

@keyframes orb-float-r {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(44px); }
}

/* ──────────────────────────
   7. BOTTOM GROUND GLOW  (.header-orb-3)
   ────────────────────────── */
.header-orb-3 {
  display: block !important;
  position: absolute;
  bottom: -8%;
  left: 20%;
  width: 720px;
  height: 260px;
  background: radial-gradient(ellipse,
    rgba(237, 210, 121, 0.14) 0%,
    rgba(201, 162,  39, 0.05) 50%,
    transparent 70%);
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
  filter: blur(55px);
}

/* ──────────────────────────
   8. CONTENT SPOTLIGHT  (.hero-halo)
   ────────────────────────── */
.hero-halo {
  display: block !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  width: 820px;
  height: 820px;
  background: radial-gradient(circle,
    rgba(237, 210, 121, 0.10) 0%,
    rgba(237, 210, 121, 0.04) 32%,
    transparent 58%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  filter: blur(22px);
  animation: halo-breathe 12s ease-in-out infinite;
}

@keyframes halo-breathe {
  0%, 100% { opacity: 0.68; }
  50%       { opacity: 1.00; }
}

/* ──────────────────────────
   9. LAYOUT
   ────────────────────────── */
.main-header .container { position: relative; z-index: 4; }

.main-header .header-caption {
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: center !important;
  padding: 60px 0 110px !important;
}

/* Glassmorphism content box */
.main-header .header-content {
  position: relative !important;
  overflow: visible !important;
  width: 100% !important;
  max-width: 880px !important;
  margin: 0 auto !important;
  text-align: start !important;
  padding: 52px 0px 44px !important; 
  margin-inline-start: 0 !important;
}

 

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

.main-header .header-content .main-title{
  text-align: start !important;
}
.main-header .header-content p{
    text-align: start !important;
    margin-inline-start: 0 !important;
}

/* ──────────────────────────
   10. LOGO
   ────────────────────────── */
.main-header .noor-logo img {
  filter: drop-shadow(0 4px 28px rgba(0,0,0,0.55)) brightness(1.06);
}

/* ──────────────────────────
   11. BADGE
   ────────────────────────── */
.header-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  background: rgba(237,210,121,0.10) !important;
  border: 1px solid rgba(237,210,121,0.40) !important;
  border-radius: 100px;
  padding: 11px 30px !important;
  margin-bottom: 32px !important;
  color: #edd279 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 4.5px !important;
  text-transform: uppercase !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 0 28px rgba(237,210,121,0.10), inset 0 1px 0 rgba(255,255,255,0.10) !important;
  animation: badge-appear 0.8s cubic-bezier(0.22,1,0.36,1) 0.3s both !important;
  position: relative;
  overflow: hidden;
}

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

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

@keyframes badge-appear {
  from { opacity: 0; transform: translateY(-16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes badge-dot-pulse {
  0%, 100% { transform: scale(1);   box-shadow: 0 0 10px rgba(237,210,121,0.9); }
  50%       { transform: scale(1.5); box-shadow: 0 0 22px rgba(237,210,121,1.0); }
}
@keyframes badge-shimmer {
  0%   { left: -130%; opacity: 0; }
  8%   { opacity: 1; }
  48%  { left: 130%; opacity: 1; }
  50%  { opacity: 0; }
  100% { left: 130%; opacity: 0; }
}

/* ──────────────────────────
   6. MAIN TITLE
   ────────────────────────── */
.main-header .main-title {
  text-align: center !important;
  font-size: 86px !important;
  line-height: 1.08 !important;
  letter-spacing: -3px !important;
  margin-bottom: 28px !important;
  background: linear-gradient(130deg,
    #ffffff  0%,
    #f8edbe 18%,
    #edd279 34%,
    #fde68a 50%,
    #ffffff 66%,
    #f5e4a8 80%,
    #edd279 92%,
    #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-shimmer 10s ease-in-out infinite;
  filter: drop-shadow(0 4px 40px rgba(237,210,121,0.28)) !important;
}

/* Gold underline from <span> */
.main-header .main-title span {
  display: block;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #edd279, #fcd34d, #edd279, transparent);
  margin: 16px auto 0;
  border-radius: 2px;
  box-shadow: 0 0 16px rgba(237,210,121,0.55);
  animation: title-line-grow 1.4s cubic-bezier(0.22,1,0.36,1) 1.0s forwards;
}
@keyframes title-line-grow {
  from { width: 0;     opacity: 0; }
  to   { width: 200px; opacity: 1; }
}

@keyframes title-shimmer {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

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

.main-header p.aya-font {
  font-size: 17px !important;
  line-height: 1.95 !important;
  color: rgba(225,230,245,0.80) !important;
  margin-bottom: 36px !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.55);
}

/* ──────────────────────────
   8. ORNAMENTAL DIVIDER
   ────────────────────────── */
.header-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 28px auto 0;
  max-width: 300px;
  animation: divider-reveal 1s ease-out 1.2s both;
}

.header-divider .divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(237,210,121,0.55));
}
.header-divider .divider-line.right {
  background: linear-gradient(90deg, rgba(237,210,121,0.55), transparent);
}
.header-divider .divider-diamond {
  width: 8px; height: 8px;
  background: #edd279;
  transform: rotate(45deg);
  flex-shrink: 0;
  box-shadow: 0 0 14px rgba(237,210,121,0.80);
  animation: diamond-glow 3.5s ease-in-out infinite;
}
.header-divider .divider-dot {
  width: 5px; height: 5px;
  background: rgba(237,210,121,0.60);
  transform: rotate(45deg);
  flex-shrink: 0;
}

@keyframes divider-reveal {
  from { opacity: 0; transform: scaleX(0.2); }
  to   { opacity: 1; transform: scaleX(1); }
}
@keyframes diamond-glow {
  0%, 100% { box-shadow: 0 0 8px  rgba(237,210,121,0.65); }
  50%       { box-shadow: 0 0 24px rgba(237,210,121,1.00); }
}

/* ──────────────────────────
   9. SCROLL INDICATOR
   ────────────────────────── */
.header-scroll {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 20;
  opacity: 0.70;
  animation: scroll-bounce 2.4s ease-in-out infinite, scroll-appear 1s ease-out 2s both;
  transition: opacity 0.3s ease;
}
.header-scroll:hover { opacity: 1; }

.header-scroll .scroll-mouse {
  width: 24px; height: 40px;
  border: 2px solid rgba(237,210,121,0.40);
  border-radius: 14px;
  position: relative;
}
.header-scroll .scroll-mouse::before {
  content: '';
  position: absolute;
  top: 7px; left: 50%;
  transform: translateX(-50%);
  width: 3px; height: 8px;
  background: linear-gradient(to bottom, #edd279, rgba(237,210,121,0.20));
  border-radius: 2px;
  animation: scroll-wheel 2.4s ease-in-out infinite;
}
.header-scroll .scroll-text {
  color: rgba(237,210,121,0.50);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 600;
}

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

/* ──────────────────────────
   10. BOTTOM FADE
   ────────────────────────── */
.main-header .bottom-fade {
  height: 260px !important;
  background: linear-gradient(
    to top,
    rgba(5, 10, 22, 0.98) 0%,
    rgba(5, 10, 22, 0.46) 40%,
    transparent 100%
  ) !important;
}

/* ──────────────────────────
   11. RESPONSIVE
   ────────────────────────── */
@media (max-width: 991px) {
  .main-header .main-title { font-size: 58px !important; letter-spacing: -2px !important; }
  .main-header .header-content { padding: 44px 40px 38px !important; }
  .hero-orb-1, .header-orb-2 { display: none !important; }
}
@media (max-width: 767px) {
  .main-header { background-image: url('../images/header-mob.webp') !important; }
  .main-header .main-title { font-size: 36px !important; letter-spacing: -0.5px !important; line-height: 1.14 !important; }
  .header-badge { font-size: 10px !important; padding: 9px 20px !important; letter-spacing: 3px !important; margin-bottom: 22px !important; }
  .main-header p.aya-font { font-size: 14.5px !important; line-height: 1.85 !important; }
  .header-divider { max-width: 200px; }
  .header-scroll { bottom: 18px; }
  .main-header .header-caption { padding: 32px 0 80px !important; }
  .main-header .header-content { padding: 32px 24px 28px !important; border-radius: 22px !important; }
  .moon-glow { display: none !important; }
}


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

.book-cover {
  background: linear-gradient(160deg, #06101f 0%, #09182e 35%, #0b1c38 60%, #07111f 100%) !important;
  position: relative;
  overflow: hidden;
  padding: 80px 0 100px !important;
}
.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); }
}
.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)} }
.book-cover .container { position: relative; z-index: 2; }
.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); } }
.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; }
.bc-book-stage { position: relative; display: flex; align-items: center; justify-content: center; width: 360px; height: 420px; }
.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);} }
.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)} }
.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;} }
.bc-book-stage .book-image { position: relative; z-index: 4; width: 240px !important; margin-inline-end: 0 !important; flex-shrink: 0; }
.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); }
.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; }
.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; }
.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; }
.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;} }
.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%; }
.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%;} }
.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);} }
.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; }
.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; }
.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); 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);} 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; }
.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%; }
.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; }
.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); }

@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 — MODERN REDESIGN        ║
   ╚════════════════════════════════════════╝ */

/* ── SECTION ── */
.the-videos {
  background: linear-gradient(160deg, #07101e 0%, #0b1628 50%, #07101e 100%) !important;
  padding: 90px 0 110px !important;
  position: relative;
  overflow: hidden;
}

/* Subtle radial glow in centre */
.the-videos::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 600px;
  background: radial-gradient(ellipse at 50% 0%,
    rgba(237,210,121,0.07) 0%,
    rgba(99,102,241,0.04) 45%,
    transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Hide old orb divs */
.vid-bg-orb { display: none !important; }

.the-videos .container { position: relative; z-index: 2; }

/* ── BADGE ── */
.vid-section-badge { text-align: center; margin-bottom: 18px; }
.vid-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(237,210,121,0.07);
  border: 1px solid rgba(237,210,121,0.28);
  border-radius: 100px;
  padding: 8px 22px;
  color: #edd279;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3.5px;
  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); }
}

/* ── HEADING ── */
.the-videos .heading {
  font-size: 52px !important;
  font-weight: 800 !important;
  color: #fff !important;
  text-shadow: none !important;
  background: linear-gradient(135deg, #ffffff 0%, #f5e8b0 45%, #edd279 70%, #ffffff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  margin-bottom: 60px !important;
  padding-bottom: 22px !important;
  position: relative;
}
.the-videos .heading::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 56px !important;
  height: 3px !important;
  background: linear-gradient(90deg, transparent, #edd279, transparent) !important;
  border-radius: 2px !important;
  box-shadow: 0 0 14px rgba(237,210,121,0.55) !important;
  animation: none !important;
}

.vid-subtitle { display: none !important; }

/* ── GRID ── */
.the-videos .row {
  display: flex !important;
  flex-wrap: wrap !important;
  margin: 0 -8px !important;
  counter-reset: unset;
}
.the-videos .row > [class*="col-"] {
  padding: 8px !important;
  counter-increment: unset;
}

/* ── CARD LINK ── */
.the-videos a.text-dec {
  display: block !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  position: relative;
  margin-bottom: 0 !important;
}

/* ── IMAGE WRAPPER — portrait Shorts ratio ── */
.the-videos .image {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: 0 6px 28px rgba(0,0,0,0.50) !important;
  transition: all 0.40s cubic-bezier(0.4, 0, 0.2, 1) !important;
  background: #06101e;
  aspect-ratio: 9 / 16;
  margin-bottom: 0 !important;
  width: 100%;
}

/* Thumbnail image — full-cover fill */
.the-videos .image .main-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border-radius: 0 !important;
}
.the-videos .image:hover .main-img {
  transform: scale(1.07) !important;
}

/* Bottom dark gradient so play button is visible */
.the-videos .image::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.70) 0%,
    rgba(0,0,0,0.12) 45%,
    transparent 70%
  ) !important;
  opacity: 1 !important;
  z-index: 2 !important;
  transition: background 0.35s ease !important;
}
.the-videos .image:hover::before {
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.82) 0%,
    rgba(0,0,0,0.32) 55%,
    rgba(0,0,0,0.06) 80%,
    transparent 100%
  ) !important;
}

/* Remove ::after text hint */
.the-videos .image::after { display: none !important; }

/* Hide old layer div */
.the-videos .image .layer { display: none !important; }

/* ── PLAY BUTTON ── */
.the-videos .image .card-content {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(0.82) !important;
  opacity: 0 !important;
  z-index: 6 !important;
  inset: unset;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.the-videos .image:hover .card-content {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

.the-videos .image .card-content .icon {
  display: flex !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.18) !important;
  border: 2px solid rgba(255,255,255,0.70) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 6px 28px rgba(0,0,0,0.50), 0 0 0 6px rgba(255,255,255,0.08) !important;
  position: relative !important;
  padding: 0 !important;
  transition: background 0.30s ease, border-color 0.30s ease, box-shadow 0.30s ease !important;
}
.the-videos .image:hover .card-content .icon {
  background: rgba(237,210,121,0.92) !important;
  border-color: rgba(237,210,121,0.90) !important;
  box-shadow: 0 6px 36px rgba(237,210,121,0.55), 0 0 0 6px rgba(237,210,121,0.14) !important;
}

/* CSS-only play triangle — replaces SVG img */
.the-videos .image .card-content .icon::before { display: none !important; }
.the-videos .image .card-content .icon::after {
  content: '' !important;
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  border-style: solid !important;
  border-width: 8px 0 8px 14px !important;
  border-color: transparent transparent transparent rgba(255,255,255,0.95) !important;
  margin-left: 3px !important;
  transition: border-color 0.30s ease !important;
}
.the-videos .image:hover .card-content .icon::after {
  border-color: transparent transparent transparent rgba(10,20,40,0.85) !important;
}

/* Hide the SVG img inside icon */
.the-videos .image .card-content .icon img {
  display: none !important;
}

/* ── CARD HOVER — LIFT + GOLD BORDER ── */
.the-videos .image:hover {
  transform: translateY(-10px) !important;
  border-color: rgba(237,210,121,0.40) !important;
  box-shadow:
    0 28px 65px rgba(0,0,0,0.65),
    0 0 0 1px rgba(237,210,121,0.38),
    0 0 42px rgba(237,210,121,0.08) !important;
}

/* Remove old title under card */
.the-videos .title { display: none !important; }

/* ── RESPONSIVE ── */
@media (max-width: 991px) {
  .the-videos .heading { font-size: 40px !important; margin-bottom: 44px !important; }
  .the-videos .row { margin: 0 -6px !important; }
  .the-videos .row > [class*="col-"] { padding: 6px !important; }
}
@media (max-width: 767px) {
  .the-videos { padding: 70px 0 80px !important; }
  .the-videos .heading { font-size: 32px !important; margin-bottom: 36px !important; }
  .the-videos .row { margin: 0 -5px !important; }
  .the-videos .row > [class*="col-"] { padding: 5px !important; }
  .the-videos .image .card-content .icon { width: 48px !important; height: 48px !important; }
  .the-videos .image .card-content .icon::after { border-width: 6px 0 6px 11px !important; }
}


/* ── SCROLL TO TOP ── */
.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 ── */
.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: auto; border-radius: 8px; margin-bottom: 8px; margin-inline-end: auto; margin-inline-start: 0; display: flex; }


/* ╔════════════════════════════════════════╗
   ║   CARDS SECTION — MODERN REDESIGN     ║
   ╚════════════════════════════════════════╝ */

.cards-download {
  background: linear-gradient(160deg, #060f1c 0%, #0a1525 50%, #060f1c 100%);
  padding: 90px 0 110px;
  position: relative;
  overflow: hidden;
}

/* Top atmosphere glow */
.cards-download::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 500px;
  background: radial-gradient(ellipse at 50% 0%,
    rgba(237,210,121,0.07) 0%,
    rgba(99,102,241,0.04) 45%,
    transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Floating orbs */
.cards-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  z-index: 0;
}
.cards-orb-1 {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(237,210,121,0.09) 0%, transparent 70%);
  top: 3%; right: -12%;
  animation: cards-orb-1 24s ease-in-out infinite;
}
.cards-orb-2 {
  width: 440px; height: 440px;
  background: radial-gradient(circle, rgba(99,102,241,0.08) 0%, transparent 70%);
  bottom: 6%; left: -10%;
  animation: cards-orb-2 28s ease-in-out infinite;
}
@keyframes cards-orb-1 {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(-28px, 38px); }
}
@keyframes cards-orb-2 {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(34px, -28px); }
}

.cards-download .container { position: relative; z-index: 2; }

/* ── Section top ── */
.cards-section-top {
  text-align: center;
  margin-bottom: 60px;
}

/* Badge */
.cards-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(237,210,121,0.07);
  border: 1px solid rgba(237,210,121,0.28);
  border-radius: 100px;
  padding: 8px 22px;
  color: #edd279;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-bottom: 20px;
}
.cards-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;
}

/* Heading */
.cards-download .heading {
  font-size: 52px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #ffffff 0%, #f5e8b0 45%, #edd279 70%, #ffffff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  margin-bottom: 0 !important;
  padding-bottom: 22px !important;
  text-shadow: none !important;
  position: relative;
}
.cards-download .heading::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 56px; height: 3px;
  background: linear-gradient(90deg, transparent, #edd279, transparent);
  border-radius: 2px;
  box-shadow: 0 0 14px rgba(237,210,121,0.55);
}
.cards-download .section-title { margin-bottom: 0; }

/* ── Grid ── */
.cards-download .cards-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}
.cards-download .cards-grid .card-col {
  width: 33.3333%;
  padding: 10px;
  box-sizing: border-box;
}

/* ── Card wrapper ── */
.cards-download a.card-img {
  display: block;
  border-radius: 20px;
  overflow: visible !important;
  position: relative !important;
  isolation: isolate;
  text-decoration: none !important;
  margin-bottom: 0;
}

/* ── Image container ── */
.cards-download a.card-img .image {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
  transition: all 0.42s cubic-bezier(0.4, 0, 0.2, 1);
  background: #07111e;
  margin-bottom: 0 !important;
}

/* Image zoom */
.cards-download a.card-img .image img {
  width: 100%;
  display: block;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.cards-download a.card-img:hover .image img {
  transform: scale(1.07) !important;
}

/* Gradient overlay */
.cards-download a.card-img .image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.68) 0%,
    rgba(0,0,0,0.18) 45%,
    transparent 70%
  );
  z-index: 2;
  transition: background 0.35s ease;
}
.cards-download a.card-img:hover .image::before {
  background: linear-gradient(
    to top,
    rgba(6,15,28,0.88) 0%,
    rgba(6,15,28,0.48) 55%,
    rgba(6,15,28,0.12) 80%,
    transparent 100%
  );
}

/* ── Eye button overlay ── */
.cards-download a.card-img .card-content {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(0.82) !important;
  z-index: 88 !important;
  opacity: 0 !important;
  transition: opacity 0.36s cubic-bezier(0.4, 0, 0.2, 1), transform 0.36s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;  
  width: auto !important;
  height: auto !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.cards-download a.card-img:hover .card-content {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

.cards-download a.card-img .card-content span {
  width: 62px !important;
  height: 62px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.18) !important;
  border: 2px solid rgba(255,255,255,0.70) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 6px 28px rgba(0,0,0,0.50), 0 0 0 6px rgba(255,255,255,0.08) !important;
  transition: background 0.30s ease, border-color 0.30s ease, box-shadow 0.30s ease !important;
  flex-shrink: 0 !important;
}
.cards-download a.card-img:hover .card-content span {
  background: rgba(237,210,121,0.92) !important;
  border-color: rgba(237,210,121,0.90) !important;
  box-shadow: 0 6px 36px rgba(237,210,121,0.55), 0 0 0 6px rgba(237,210,121,0.14) !important;
}

/* CSS-only eye icon via ::after */
.cards-download a.card-img .card-content span::before,
.cards-download a.card-img .card-content span::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  pointer-events: none !important;
}
/* Outer eye oval */
.cards-download a.card-img .card-content span::before {
  width: 22px !important;
  height: 14px !important;
  border: 2px solid rgba(255,255,255,0.92) !important;
  border-radius: 50% !important;
  background: none !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  transition: border-color 0.30s ease !important;
}
/* Pupil dot */
.cards-download a.card-img .card-content span::after {
  width: 7px !important;
  height: 7px !important;
  background: rgba(255,255,255,0.92) !important;
  border-radius: 50% !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  transition: background 0.30s ease !important;
}
.cards-download a.card-img:hover .card-content span::before {
  border-color: rgba(10,20,40,0.85) !important;
}
.cards-download a.card-img:hover .card-content span::after {
  background: rgba(10,20,40,0.85) !important;
}

/* Hide SVG img — using CSS icon instead */
.cards-download a.card-img .card-content span img {
  display: none !important;
}

/* ── Hover lift + gold border ── */
.cards-download a.card-img:hover .image {
  transform: translateY(-8px);
  border-color: rgba(237,210,121,0.36);
  box-shadow:
    0 26px 62px rgba(0,0,0,0.68),
    0 0 0 1px rgba(237,210,121,0.30),
    0 0 38px rgba(237,210,121,0.08);
}

/* Gold shimmer line at bottom on hover */
.cards-download a.card-img .image::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(237,210,121,0.70), transparent);
  z-index: 3;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.cards-download a.card-img:hover .image::after {
  opacity: 1;
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .cards-download .heading { font-size: 40px !important; }
  .cards-section-top { margin-bottom: 44px; }
  .cards-download .cards-grid .card-col { width: 33.3333%; }
}
@media (max-width: 767px) {
  .cards-download { padding: 70px 0 80px; }
  .cards-download .heading { font-size: 32px !important; }
  .cards-section-top { margin-bottom: 32px; }
  .cards-badge { font-size: 10px; padding: 8px 18px; letter-spacing: 2px; }
  .cards-download .cards-grid .card-col { width: 50%; padding: 7px; }
  .cards-download .cards-grid { margin: 0 -7px; }
}