/* ============================================
   MASTER FIXES — OVERRIDES EVERYTHING
   ============================================ */
/* fixes.css */

/* navGreeting — show only on homepage (where it's NOT wrapped in .nav-right-group);
   hide it everywhere else since it breaks the mobile navbar layout on inner pages */
.nav-right-group #navGreeting {
  display: none !important;
}

/* ===== NAV ACTIVE LINK — black default, glow when active ===== */
.nav-links a {
  color: #000000 !important;
  text-shadow: none !important;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--btn-fill) !important;
  text-shadow: 0 0 14px var(--btn-glow) !important;
}

/* ===== 1. BUTTONS — FORCE COLOR ===== */
/* ===== 1. BUTTONS — FORCE COLOR ===== */
.btn-3d,
.btn-3d.primary,
.btn-3d.secondary,
.btn-3d.nav-cta,
.btn-3d.btn-outline,
.nav-cta,
a.btn-3d,
button.btn-3d {
  background: var(--btn-fill) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 0 var(--btn-shadow), 0 10px 20px var(--btn-glow) !important;
  border-radius: 999px !important;
  border: none !important;
  font-weight: 700 !important;
  transition: transform 0.12s, box-shadow 0.12s !important;
  text-decoration: none !important;
}
.btn-3d:hover,
a.btn-3d:hover,
button.btn-3d:hover,
.nav-cta:hover {
  transform: translateY(4px) !important;
  box-shadow: 0 2px 0 var(--btn-shadow), 0 4px 8px var(--btn-glow) !important;
  color: #ffffff !important;
}

/* nav-cta glow explicit (homepage + all pages consistent) */
.navbar a.nav-cta,
.nav-right-group .btn-3d.nav-cta,
.nav-cta.btn-3d {
  box-shadow: 0 6px 0 var(--btn-shadow), 0 0 24px 4px var(--btn-glow) !important;
}
.navbar a.nav-cta:hover,
.nav-right-group .btn-3d.nav-cta:hover,
.nav-cta.btn-3d:hover {
  box-shadow: 0 2px 0 var(--btn-shadow), 0 0 16px 2px var(--btn-glow) !important;
}

/* back home button */
.back-home {
  background: var(--btn-fill) !important;
  color: #ffffff !important;
  box-shadow: 0 5px 0 var(--btn-shadow) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  padding: 8px 18px !important;
  border: none !important;
}
.back-home:hover {
  transform: translateY(3px) !important;
  box-shadow: 0 2px 0 var(--btn-shadow) !important;
  color: #ffffff !important;
}

/* ===== 2. HOMEPAGE — REMOVE HIGHLIGHT ON "for students", ADD TO HEADER SECTION ===== */
.hero-heading {
  background: none !important;
  padding: 0 !important;
}
.hero-heading em {
  color: #00050a !important;
  font-style: italic !important;
  background: none !important;
}
.hero-heading em::after { display: none !important; }

/* header section highlight */
.hero {
  background: linear-gradient(160deg, rgba(9,105,230,0.06) 0%, rgba(86,204,242,0.08) 100%) !important;
  border-bottom: 1px solid rgba(9,105,230,0.08) !important;
}

/* floating sticker emojis in hero section (not eyebrow) */
.tagline-sticker {
  font-size: 1.6rem !important;
  filter: drop-shadow(0 2px 4px rgba(9,105,230,0.2)) !important;
}

/* ===== 3. HERO STICKER PILLS — FORCE DARK BG ===== */
.hero-sticker,
.hero-sticker.purple,
.hero-sticker.blue,
.page-hero .hero-sticker {
  background: var(--sticker-grad) !important;
  color: #000000 !important;
  box-shadow: none !important;
  border-radius: 999px !important;
  border: none !important;
  font-weight: 700 !important;
  padding: 6px 16px !important;
  display: inline-block !important;
  transition: transform 0.25s ease !important;
}
.hero-sticker:hover {
  transform: translateY(-4px) !important;
}

/* ===== 4. PAGE HERO SECTION HIGHLIGHTS ===== */
/* eyebrow pill */
.eyebrow-highlight {
  background: #4b717d !important;
  color: white !important;
  padding: 6px 20px !important;
  border-radius: 999px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  display: inline-block !important;
  margin-bottom: 16px !important;
  box-shadow: 0 4px 0 #233c66 !important;
}

/* page sub text — dark bg pill */
.page-hero .page-sub {
  background: rgba(9,105,230,0.08) !important;
  border: 1px solid rgba(9,105,230,0.12) !important;
  padding: 10px 20px !important;
  border-radius: 12px !important;
  display: inline-block !important;
  color: #1A1A2E !important;
  max-width: 560px !important;
}

/* ===== 5. PRODUCTS PAGE ===== */
/* 3 sticker pills below subtitle */
.products-header-pills .hero-sticker { margin: 4px !important; }

/* combo card shadow fix (Image 4) */
.combo-card {
  box-shadow: 0 8px 0 var(--shadow-charcoal), 0 16px 40px rgba(35,60,102,0.15) !important;
}

/* best value badge — purple gradient, no 3D button look */
.combo-badge {
  background: var(--badge-purple-grad) !important;
  box-shadow: none !important;
}

/* price card highlight */
.card-price-wrap {
  background: rgba(9,105,230,0.04) !important;
  border: 1.5px solid rgba(9,105,230,0.12) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  margin-bottom: 12px !important;
}

/* get it / notify me buttons specifically */
.full-btn {
  background: var(--btn-fill) !important;
  color: white !important;
  box-shadow: 0 6px 0 var(--btn-shadow) !important;
  border-radius: 999px !important;
  width: 100% !important;
  text-align: center !important;
  display: block !important;
  padding: 12px 24px !important;
  font-weight: 700 !important;
}
.full-btn:hover {
  transform: translateY(4px) !important;
  box-shadow: 0 2px 0 var(--btn-shadow) !important;
  color: white !important;
}
.full-btn.disabled {
  opacity: 0.45 !important;
  pointer-events: none !important;
}

/* ===== 6. PROJECTS — label badge + progress line remove + bottom tag bg ===== */
.projects-label-badge {
  background: #0374a1 !important;
  color: white !important;
  box-shadow: 0 6px 0 #003647, 0 10px 22px rgba(9,105,230,0.25) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  animation: badgePulse 3s ease-in-out infinite !important;
}
@keyframes badgePulse {
  0%,100% { box-shadow: 0 6px 0 #56CCF2, 0 10px 22px rgba(9,105,230,0.25); }
  50% { box-shadow: 0 8px 0 #56CCF2, 0 14px 30px rgba(9,105,230,0.35); }
}
.label-divider { color: #56CCF2 !important; }

/* REMOVE progress bar fill line — keep only circles */
.progress-track { display: none !important; }

/* Bottom tags below circles — dark bg */
.progress-tag {
  background: #033ea1 !important;
  color: white !important;
  box-shadow: 0 3px 0 #233c66 !important;
  border-radius: 999px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
}

/* ===== 7. YOUTUBE — channel section gap + name bg ===== */
.yt-section {
  padding: 60px 5% !important;
}
.yt-channel-header {
  max-width: 1000px !important;
  margin: 0 auto 28px !important;
}
.yt-channel-name {
  display: inline-block !important;
  background: rgba(9,105,230,0.07) !important;
  border-radius: 10px !important;
  padding: 4px 14px !important;
}
.yt-channel-name.tech-name {
  background: rgba(2, 24, 53, 0.09) !important;
  color: #022e68 !important;
}
.yt-channel-name.art-name {
  background: rgba(123,94,167,0.09) !important;
  color: #381d61 !important;
}

/* yt section gap from header */
.yt-section:first-of-type { margin-top: 20px !important; }

/* ===== 8. BLOG — filter buttons force + newsletter fix ===== */
.filter-btn {
  background: #98bbf0 !important;
  color: white !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: 0 5px 0 #02228a !important;
  font-weight: 700 !important;
  padding: 9px 22px !important;
  opacity: 0.5 !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}
.filter-btn.active,
.filter-btn:hover {
  opacity: 1 !important;
  transform: translateY(2px) !important;
  box-shadow: 0 3px 0 #02228a !important;
}

/* Newsletter box — force dark bg + fix layout */
.newsletter-section .newsletter-box {
  background: #0969e6 !important;
  box-shadow: 0 10px 0 #56CCF2, 0 20px 48px rgba(9,105,230,0.2) !important;
}
.newsletter-section .newsletter-box h2,
.newsletter-section .newsletter-box p,
.newsletter-section .newsletter-note {
  color: white !important;
}
.newsletter-section .newsletter-form {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
}
.newsletter-section .email-input {
  width: 100% !important;
  max-width: 360px !important;
  padding: 13px 20px !important;
  border-radius: 999px !important;
  border: none !important;
  font-size: 0.9rem !important;
  outline: none !important;
  box-shadow: 0 3px 0 #56CCF2 !important;
}
.newsletter-section .btn-3d {
  width: auto !important;
  min-width: 160px !important;
}

/* ===== 9. ABOUT — sticker pills visibility ===== */
.about .hero-sticker,
.page-hero .hero-sticker {
  background: #77adf3 !important;
  color: white !important;
  box-shadow: 0 4px 0 #093782 !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}

/* ===== 10. ALL PAGES — WHY/LABEL highlights ===== */
.why-label,
.what-section-label {
  background: #023579 !important;
  color: white !important;
  box-shadow: 0 5px 0 #56CCF2 !important;
  border-radius: 999px !important;
}

/* admin floating + button — dark (Image 5) */
.admin-add-btn {
  background: var(--btn-fill) !important;
  box-shadow: 0 6px 0 var(--btn-shadow), 0 10px 22px var(--btn-glow) !important;
}
.admin-add-btn:hover {
  box-shadow: 0 2px 0 var(--btn-shadow) !important;
}

/* ===== NEWSLETTER SUCCESS STATE ===== */

/* ===== NEWSLETTER SUCCESS STATE ===== */
.newsletter-success {
  background: #e8fff0;
  border: 1.5px solid #1a7a3a;
  color: #1a7a3a;
  border-radius: 12px;
  padding: 12px 20px;
  font-weight: 600;
  font-size: 0.9rem;
  display: none;
  margin-top: 12px;
}

/* ===== YOUTUBE CHANNEL SECTION GAP ===== */
.yt-section { margin-top: 0 !important; }
.art-section { margin-top: 40px !important; border-top: 2px solid rgba(9,105,230,0.08) !important; padding-top: 60px !important; }

/* ===== PRODUCTS price section highlight ===== */
.card-price-wrap {
  background: rgba(9,105,230,0.04);
  border: 1px solid rgba(9,105,230,0.1);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.card-price { margin-bottom: 0 !important; }

/* Projects filter buttons — remove 3D, add gradient + animation (Image 6) */
/* Projects filter buttons — remove 3D, add blue gradient + animation (Image 4) */
.filter-section .domain-btn {
  box-shadow: none !important;
  background: linear-gradient(135deg, #dbeafe, #e0f2fe) !important;
  color: var(--text-dark) !important;
  border: 1.5px solid rgba(35,60,102,0.15) !important;
  transition: transform 0.25s ease, background 0.25s ease !important;
}
.filter-section .domain-btn.active,
.filter-section .domain-btn:hover {
  background: linear-gradient(135deg, var(--btn-fill), var(--btn-shadow)) !important;
  color: white !important;
  transform: translateY(-3px) !important;
  border-color: transparent !important;
}

/* ===== PROJECTS hero label — bigger + more visible ===== */

/* ===== PROJECTS hero label — bigger + more visible ===== */
.projects-label-badge {
  font-size: 0.9rem !important;
  padding: 10px 26px !important;
  letter-spacing: 0.02em !important;
}

@keyframes fadeIn { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)} }

/* newsletter success box */
.newsletter-success {
  background: #e8fff0 !important;
  border: 2px solid #1a7a3a !important;
  color: #1a7a3a !important;
  border-radius: 14px !important;
  padding: 14px 22px !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  text-align: center !important;
}

/* Fix 1: why-label shadow remove + pulse animation */
.why-label {
  box-shadow: 0 5px 0 #56CCF2 !important;
  filter: none !important;
  animation: labelPulse 3s ease-in-out infinite !important;
}
@keyframes labelPulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/* Fix 3: Projects label - cozy animated bg, no 3D shadow */
.projects-label-badge {
  background: linear-gradient(135deg, #dbeafe, #e0f2fe) !important;
  color: #0969e6 !important;
  box-shadow: none !important;
  border: 2px solid rgba(9,105,230,0.2) !important;
  animation: cozyFloat 4s ease-in-out infinite !important;
}
@keyframes cozyFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.label-divider { color: #0969e6 !important; }

/* progress tags black text */
/* progress tags black text */
.progress-tag {
  color: #000000 !important;
  background: white !important;
  border: 1.5px solid rgba(9,105,230,0.2) !important;
  box-shadow: 0 3px 0 #56CCF2 !important;
}
.hero-sticker.purple,
.hero-sticker.blue,
.projects-hero .hero-sticker {
  color: #000000 !important;
  background: var(--sticker-grad) !important;
  border: none !important;
  box-shadow: none !important;
}
/* Fix 4: YouTube channel layout */
/* Fix 4: YouTube channel layout */
.yt-channel-header {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: start !important;
  gap: 20px !important;
}
.yt-channel-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}
.yt-channel-name {
  font-size: 1.3rem !important;
  box-shadow: none !important;
  animation: channelPulse 3s ease-in-out infinite !important;
}
.yt-channel-badge {
  background: var(--badge-purple-grad) !important;
  color: white !important;
  box-shadow: none !important;
}
.yt-channel-name.tech-name {
  background: var(--badge-purple-grad) !important;
  color: white !important;
  padding: 4px 14px !important;
  border-radius: 10px !important;
}
.yt-channel-name.art-name {
  background: linear-gradient(135deg, #233c66, #4682B4) !important;
  color: white !important;
  padding: 4px 14px !important;
  border-radius: 10px !important;
}
@keyframes channelPulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.02) translateY(-2px); }
}

/* art section background fix (Image 8 — wasn't applying) */
/* both channels same bg (consistent, not different per channel) */
.yt-section,
.art-section {
  background: linear-gradient(135deg, #f0f7ff, #e8f4fd) !important;
}

/* long videos / shorts toggle buttons — consistent blue, remove ugly shadow */
.toggle-btn {
  box-shadow: none !important;
  background: linear-gradient(135deg, #dbeafe, #e0f2fe) !important;
  color: var(--text-dark) !important;
  border: 1.5px solid rgba(35,60,102,0.15) !important;
  transition: transform 0.25s ease, background 0.25s ease !important;
}
.toggle-btn.active,
.toggle-btn:hover {
  background: linear-gradient(135deg, var(--btn-fill), var(--btn-shadow)) !important;
  color: white !important;
  transform: translateY(-2px) !important;
  border-color: transparent !important;
}

/* video popup close button — remove 3D, add animation */
.video-popup-close {
  box-shadow: none !important;
  background: rgba(255,255,255,0.15) !important;
  color: white !important;
  border: 1.5px solid rgba(255,255,255,0.3) !important;
  transition: transform 0.25s ease, background 0.25s ease !important;
}
.video-popup-close:hover {
  background: rgba(255,255,255,0.3) !important;
  transform: rotate(90deg) scale(1.1) !important;
}

/* yt subscribe button — keep dark fill consistent (already covered by .btn-3d) */
/* yt subscribe button — keep dark fill consistent (already covered by .btn-3d) */

/* video popup close button — remove 3D, add animation */
.yt-popup-close,
.video-modal-close,
.popup-close-btn {
  box-shadow: none !important;
  background: rgba(255,255,255,0.15) !important;
  color: white !important;
  border: 1.5px solid rgba(255,255,255,0.3) !important;
  transition: transform 0.25s ease, background 0.25s ease !important;
}
.yt-popup-close:hover,
.video-modal-close:hover,
.popup-close-btn:hover {
  background: rgba(255,255,255,0.3) !important;
  transform: rotate(90deg) scale(1.1) !important;
}
/* subscribe button below description, right side */
.yt-sub-btn {
  margin-top: 8px !important;
  align-self: flex-end !important;
  justify-self: end !important;
}

/* Fix 5: Blog filter buttons — remove 3D shadow, gradient + animation */
.filter-btn {
  color: var(--text-dark) !important;
  background: linear-gradient(135deg, #dbeafe, #e0f2fe) !important;
  box-shadow: none !important;
  border: 1.5px solid rgba(35,60,102,0.15) !important;
  opacity: 1 !important;
  transition: transform 0.25s ease, background 0.25s ease !important;
}
.filter-btn.active,
.filter-btn:hover {
  background: var(--badge-purple-grad) !important;
  color: white !important;
  transform: translateY(-3px) !important;
  border-color: transparent !important;
}

/* blog notify hint pill (join the list) — remove shadow, add animation */
.blog-notify-hint {
  box-shadow: none !important;
  border: 1.5px solid rgba(35,60,102,0.12) !important;
  animation: nlFloat 4s ease-in-out infinite !important;
}

/* Fix 6: Newsletter cozy redesign */
.newsletter-section .newsletter-box {
  background: linear-gradient(135deg, #dbeafe, #e0f2fe) !important;
  color: #1A1A2E !important;
  border: 2px solid rgba(9,105,230,0.15) !important;
  box-shadow: 0 8px 0 #56CCF2, 0 16px 32px rgba(9,105,230,0.1) !important;
  max-width: 460px !important;
  padding: 36px 32px !important;
  border-radius: 24px !important;
}
.newsletter-box h2,
.newsletter-box p,
.newsletter-note {
  color: #1A1A2E !important;
}
.newsletter-box .newsletter-icon { font-size: 1.8rem !important; }

/* Fix 7: what-card no 3D shadow + hover animation only */
.what-card {
  box-shadow: none !important;
  border: 1.5px solid rgba(9,105,230,0.1) !important;
  transition: transform 0.25s ease, background 0.25s ease !important;
}
.what-card:hover {
  transform: translateY(-6px) scale(1.02) !important;
  background: rgba(9,105,230,0.04) !important;
  box-shadow: 0 8px 24px rgba(9,105,230,0.1) !important;
}
.what-icon {
  transition: transform 0.2s !important;
}
.what-card:hover .what-icon {
  transform: scale(1.2) rotate(-5deg) !important;
}

/* Fix 2: Templates 3 column layout */
.templates-grid {
  grid-template-columns: repeat(3, 1fr) !important;
}
@media (max-width: 900px) {
  .templates-grid { grid-template-columns: 1fr !important; }
}

/* Fix 1: Remove 3D shadow from honest part label */
.why-label {
  box-shadow: none !important;
  animation: labelPulse 3s ease-in-out infinite !important;
}

/* Fix 2: All 3 templates in one row on desktop */
.templates-grid {
  grid-template-columns: repeat(3, 1fr) !important;
}
@media (max-width: 768px) {
  .templates-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Fix 3: Super soon section cozy bg */
/* Fix 3: Super soon section cozy bg — animated gradient */
.super-soon-section {
  background: linear-gradient(120deg, #dbeafe, #e0f2fe, #f0f7ff, #e8f4fd) !important;
  background-size: 300% 300% !important;
  animation: gradientShift 8s ease infinite !important;
  border-radius: 20px !important;
  margin: 0 3% !important;
  box-shadow: inset 0 2px 12px rgba(35,60,102,0.1) !important;
  overflow: hidden !important;
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.soon-card {
  background: white !important;
  border: 1.5px solid rgba(9,105,230,0.1) !important;
  box-shadow: none !important;
  transition: transform 0.2s, background 0.2s !important;
}
.soon-card:hover {
  background: #f0f7ff !important;
  transform: translateY(-4px) !important;
}

/* Fix 4: FAQ section cozy vibe */
/* Fix 4: FAQ section cozy vibe — animated gradient */
.faq-section {
  background: linear-gradient(120deg, #dbeafe, #e0f2fe, #f0f7ff, #e8f4fd) !important;
  background-size: 300% 300% !important;
  animation: gradientShift 8s ease infinite !important;
  border-radius: 20px !important;
  margin: 20px 3% !important;
  box-shadow: inset 0 2px 12px rgba(35,60,102,0.1) !important;
  overflow: hidden !important;
}
.faq-item {
  background: white !important;
  border: 1.5px solid rgba(9,105,230,0.08) !important;
  box-shadow: none !important;
}
.faq-item:hover {
  border-color: rgba(9,105,230,0.2) !important;
}

/* Fix 5: Products hero sticker pills - black text */
/* Fix 5: Products hero sticker pills - black text */
.products-hero-pills .hero-sticker,
.page-hero .hero-sticker-row .hero-sticker {
  color: #000000 !important;
  background: var(--sticker-grad) !important;
  box-shadow: none !important;
}

/* Fix 6: Newsletter new layout */
.newsletter-section {
  padding: 40px 5% !important;
}
.newsletter-box-new {
  background: white !important;
  border: 1.5px solid rgba(9,105,230,0.12) !important;
  border-radius: 20px !important;
  padding: 36px 40px !important;
  max-width: 800px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 40px !important;
  box-shadow: 0 4px 24px rgba(9,105,230,0.08) !important;
}
.nl-icon { font-size: 2rem; display: block; margin-bottom: 10px; }
.nl-title {
  font-family: 'IBM Plex Serif', serif !important;
  font-size: 1.6rem !important;
  color: #1A1A2E !important;
  margin-bottom: 8px !important;
}
.nl-desc {
  font-size: 0.88rem !important;
  color: #8892B0 !important;
  line-height: 1.6 !important;
  margin-bottom: 20px !important;
}
.nl-social-links {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.nl-social-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: transform 0.15s !important;
  width: fit-content !important;
}
.nl-social-btn:hover { transform: translateY(-2px) !important; }
.nl-social-btn.whatsapp {
  background: #e8fff0 !important;
  color: #1a7a3a !important;
  border: 1.5px solid #1a7a3a !important;
}
.nl-social-btn.linkedin {
  background: #e8f0ff !important;
  color: #0969e6 !important;
  border: 1.5px solid #0969e6 !important;
}
.nl-right-desc {
  font-size: 0.85rem !important;
  color: #8892B0 !important;
  margin-bottom: 14px !important;
}
.nl-email-input {
  width: 100% !important;
  padding: 12px 18px !important;
  border-radius: 999px !important;
  border: 1.5px solid rgba(9,105,230,0.2) !important;
  font-size: 0.9rem !important;
  outline: none !important;
  margin-bottom: 10px !important;
  display: block !important;
}
.nl-subscribe-btn {
  width: 100% !important;
  text-align: center !important;
  display: block !important;
  margin-bottom: 10px !important;
}
.nl-note {
  font-size: 0.72rem !important;
  color: #8892B0 !important;
  text-align: center !important;
}
.newsletter-success {
  background: #e8fff0 !important;
  border: 1.5px solid #1a7a3a !important;
  color: #1a7a3a !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  text-align: center !important;
}
@media (max-width: 768px) {
  .newsletter-box-new {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 24px !important;
  }
}

/* Fix 8: About - remove shadow from label + cozy what-cards */
/* Fix 8: About - purple gradient label + cozy what-cards */
/* Fix 8: About - blue gradient label + cozy what-cards */
.what-section-label {
  background: linear-gradient(135deg, var(--btn-fill), var(--btn-shadow)) !important;
  box-shadow: none !important;
  animation: labelPulse 3s ease-in-out infinite !important;
}
.what-i-do {
  background: linear-gradient(135deg, #f0f7ff, #e8f4fd) !important;
}
.what-card {
  background: white !important;
  box-shadow: none !important;
  border: 1.5px solid rgba(9,105,230,0.1) !important;
  transition: transform 0.22s ease, background 0.22s ease !important;
}
.what-card:hover {
  transform: translateY(-5px) !important;
  background: #f0f7ff !important;
  border-color: rgba(9,105,230,0.25) !important;
}
.what-card:hover .what-icon {
  transform: scale(1.15) rotate(-5deg) !important;
}

/* Newsletter box cozy bg + success message centered */
.newsletter-box-new {
  background: linear-gradient(135deg, #f0f7ff, #e8f4fd) !important;
  border: 1.5px solid rgba(9,105,230,0.12) !important;
}
.nl-right {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
#successMsg {
  margin-top: 0 !important;
  align-self: center !important;
  width: 100% !important;
}

/* Force 3 column template grid on laptop */
@media (min-width: 769px) {
  .templates-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    align-items: start !important;
  }
}

/* Template grid - force 3 columns, no wrapping */
.templates-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-template-rows: auto !important;
  align-items: start !important;
  gap: 28px !important;
}
.templates-grid .template-card {
  width: 100% !important;
  min-width: 0 !important;
  grid-column: auto !important;
}
@media (max-width: 900px) {
  .templates-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Newsletter box - animated + darker text */
.newsletter-box-new {
  animation: nlFloat 5s ease-in-out infinite !important;
}
@keyframes nlFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.nl-desc,
.nl-right-desc,
.nl-note {
  color: #4a5568 !important;
}
.nl-title {
  color: #1A1A2E !important;
}
/* Blog grid back to normal card layout */
.blog-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: 24px !important;
}

/* Blog post detail page - boxed, not full screen */
.post-wrap {
  max-width: 720px !important;
  margin: 50px auto !important;
  background: white !important;
  border-radius: 20px !important;
  padding: 40px !important;
  box-shadow: 0 4px 24px rgba(9,105,230,0.08) !important;
  border: 1.5px solid rgba(9,105,230,0.1) !important;
}

/* ===== BLOG GRID — cards in proper grid like projects ===== */
.blog-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: 24px !important;
}

.blog-card {
  width: 100% !important;
  min-width: 0 !important;
}

.blog-card-inner {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.blog-card-inner h2 {
  font-size: 1.1rem !important;
  line-height: 1.4 !important;
  word-wrap: break-word !important;
  white-space: normal !important;
}

.blog-card-inner p {
  font-size: 0.88rem !important;
  line-height: 1.6 !important;
  word-wrap: break-word !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
}

.blog-meta {
  flex-wrap: wrap !important;
}

/* ===== BLOG POST DETAIL PAGE — boxed, not full screen ===== */
.post-wrap {
  max-width: 720px !important;
  margin: 50px auto !important;
  background: white !important;
  border-radius: 20px !important;
  padding: 40px !important;
  box-shadow: 0 4px 24px rgba(9,105,230,0.08) !important;
  border: 1.5px solid rgba(9,105,230,0.1) !important;
}

/* ===== MOBILE RESPONSIVE — global fixes ===== */
@media (max-width: 768px) {
  /* About page visual — polaroids bahut space le rahe hain */
  .about-visual {
    height: 220px !important;
    margin-bottom: 20px !important;
  }
  .polaroid-1 { width: 120px !important; }
  .polaroid-2 { width: 110px !important; left: 90px !important; }
  .about-floating-sticker {
    font-size: 0.65rem !important;
    padding: 4px 10px !important;
  }
  .s2 { right: 0px !important; }
  .s3 { right: 10px !important; }

  /* Newsletter box — single column */
  .newsletter-box-new {
    grid-template-columns: 1fr !important;
    padding: 24px !important;
    gap: 20px !important;
  }

  /* YouTube — stack channel header + wrap toggle buttons on mobile */
  .yt-channel-header {
    grid-template-columns: 1fr !important;
  }
  .yt-channel-title-wrap {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .yt-sub-btn {
    align-self: flex-start !important;
  }
  .video-toggle {
    flex-wrap: wrap !important;
  }
  .yt-grid {
    grid-template-columns: 1fr !important;
  }

  /* Footer */
  .footer-inner {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
  }

  /* Blog notify hint */
  .blog-notify-hint {
    flex-direction: column !important;
    text-align: center !important;
    gap: 6px !important;
  }

  /* Blog grid — fix horizontal scroll on small phones */
  .blog-grid {
    grid-template-columns: 1fr !important;
  }
  .blog-card-inner {
    padding: 22px !important;
  }
/* Products — combo card mobile fix */
  .combo-inner {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .combo-card {
    padding: 28px 20px !important;
    margin: 0 !important;
  }
  .combo-right {
    padding: 18px !important;
  }
  .coupon-row {
    flex-direction: row !important;
  }

  /* Products — back-home circle fix already in style.css but force here too */
  .back-home {
    padding: 6px 14px !important;
    font-size: 0.78rem !important;
  }

  /* Projects filter section — z-index fix taaki hamburger dropdown uske upar rahe */
  .filter-section {
    position: relative !important;
    z-index: 10 !important;
  }

  /* Navbar z-index ensure karo hamburger dropdown ke liye */
  .navbar {
    z-index: 200 !important;
  }

  /* Hamburger button — pointer events ensure */
  .hamburger {
    z-index: 201 !important;
    position: relative !important;
  }

  /* mob-open state — nav links visible */
  .nav-links.mob-open {
    z-index: 199 !important;
  }
}
/* super soon + faq section background — gradient + depth */
.super-soon-section,
.faq-section {
  background: linear-gradient(180deg, #e8f0ff 0%, #d9e7fc 100%);
  border-radius: 28px;
  margin: 0 5%;
  padding: 50px 4%;
}

.soon-card {
  background: linear-gradient(145deg, #ffffff, #f4f8ff);
  box-shadow: 0 4px 14px rgba(7,61,128,0.12), 0 1px 3px rgba(7,61,128,0.08);
  transition: transform 0.18s, box-shadow 0.18s;
}
.soon-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(7,61,128,0.18);
}
/* ===== POINT 5 — navbar greeting animated glowy ===== */
#navGreeting {
  font-weight: 800 !important;
  font-size: 0.95rem !important;
}
#navGreeting .greeting-text {
  background: linear-gradient(135deg, #0969e6, #073d80);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: greetPulse 2.5s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(9,105,230,0.3));
}
@keyframes greetPulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(9,105,230,0.25)); }
  50%       { filter: drop-shadow(0 0 14px rgba(9,105,230,0.5)); }
}

/* ===== POINT 5 — see projects arrow ===== */
.hero-btns .btn-outline::after {
  content: " →";
}

/* ===== POINT 7 — projects shipped card dark gradient shadow ===== */
/* ===== POINT 7 — shipped card dark gradient ===== */
.projects-section .project-card.done {
  box-shadow: 0 6px 0 #073d80, 0 12px 28px rgba(7,61,128,0.18) !important;
  background: linear-gradient(145deg, #ffffff, #f0f5ff) !important;
  border-color: rgba(9,105,230,0.25) !important;
}
.projects-section .project-card.done:hover {
  box-shadow: 0 10px 0 #073d80, 0 18px 36px rgba(7,61,128,0.22) !important;
  transform: translateY(-4px) !important;
}
/* ===== POINT 6 — template card preview better visual ===== */
.card-preview {
  background: linear-gradient(135deg, #0a2456 0%, #0969e6 60%, #56CCF2 100%) !important;
  height: 160px;
  position: relative;
  overflow: hidden;
}
.preview-placeholder span {
  color: white !important;
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.preview-placeholder p {
  color: rgba(255,255,255,0.75) !important;
  font-size: 0.82rem !important;
}
.card-preview::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 120px; height: 120px;
  background: rgba(255,255,255,0.06);
  border-radius: 50%;
}
.card-preview::after {
  content: '';
  position: absolute;
  bottom: -20px; left: -20px;
  width: 90px; height: 90px;
  background: rgba(255,255,255,0.04);
  border-radius: 50%;
}
/* ===== POINT 7 — shipped so far card dark shadow ===== */
.progress-bar-wrap {
  box-shadow: 0 7px 0 #073d80, 0 14px 28px rgba(7,61,128,0.15) !important;
}

/* project cards — shipped done card dark shadow */
.projects-section .project-card.done {
  box-shadow: 0 7px 0 #073d80, 0 14px 30px rgba(7,61,128,0.15) !important;
  border-color: rgba(9,105,230,0.2) !important;
}
.projects-section .project-card.done:hover {
  box-shadow: 0 12px 0 #073d80, 0 22px 44px rgba(7,61,128,0.22) !important;
  transform: translateY(-5px) !important;
}
/* fallback — agar reveal animation kaam na kare */
.reveal {
  opacity: 1 !important;
  transform: none !important;
}
/* ===== HOMEPAGE — floating cards mobile fix ===== */
@media (max-width: 768px) {
  .hero-visual {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    overflow: visible !important;
    position: relative !important;
    margin-top: 24px !important;
  }

  .sticker-card {
    width: 45% !important;
    min-width: 0 !important;
    max-width: 170px !important;
    padding: 16px !important;
    font-size: 0.82rem !important;
  }

  .float-card-1 {
    transform: rotate(-2deg) !important;
  }

  .float-card-3 {
    transform: rotate(2deg) !important;
    min-width: 0 !important;
  }

  .sticker-text {
    font-size: 0.8rem !important;
  }

  .sticker-tags span {
    font-size: 0.68rem !important;
  }
}