/* PREMIUM DARK OVERRIDE (Prism Live / Codex Aesthetic) */

/* 1. Global Typography & Background */
@import url('fonts.css');

body, html {
  background-color: #030712 !important; /* Deep Space Black */
  background-image: none !important;
  color: #f8fafc !important; /* Off white text */
  font-family: 'Inter', sans-serif !important;
}

/* Base Headings */
h1, h2, h3, h4, h5, h6, .hero-title {
  font-family: 'Space Grotesk', sans-serif !important;
  color: #ffffff !important;
  letter-spacing: -0.02em !important;
}

/* General Text overrides */
p, .hero-text, .section-head p, .info-card p, .step-card p, .bento-card p, .testimonial-info p {
  color: #94a3b8 !important; /* Muted modern text */
}

/* 2. Topbar / Header Glass Pill */
.topbar-clean {
  background: rgba(3, 7, 18, 0.65) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5) !important;
}

/* Navigation Links */
.nav-inline a {
  color: #e2e8f0 !important;
  font-weight: 500 !important;
  transition: color 0.3s ease !important;
}
.nav-inline a:hover {
  color: #00d4ff !important;
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

/* 3. Sleek Glowing Buttons */
.btn-modern {
  border-radius: 999px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  border: none !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-modern-primary {
  background: linear-gradient(135deg, #00d4ff, #4199ff) !important;
  color: #000000 !important; /* High contrast text on bright button */
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
}

.btn-modern-primary:hover {
  box-shadow: 0 0 35px rgba(0, 212, 255, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.6) !important;
  transform: translateY(-2px) !important;
  color: #000 !important;
}

.btn-modern-light, .open-wp {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(10px) !important;
}

.btn-modern-light:hover, .open-wp:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

/* WhatsApp Float override */
.sticky-wa {
  box-shadow: 0 0 25px rgba(37, 211, 102, 0.5) !important;
}

/* 4. Glass Cards (Info, Steps, Testimonials, Pricing) */
.info-card, .step-card, .testimonial-card, .pricing-card {
  background: rgba(15, 23, 42, 0.4) !important; /* Very dark slate, transparent */
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  transition: all 0.4s ease !important;
}

.info-card:hover, .step-card:hover, .testimonial-card:hover {
  border-color: rgba(0, 212, 255, 0.3) !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 20px 40px rgba(0, 212, 255, 0.15), 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

/* Card Titles */
.info-card h3, .step-card h3, .testimonial-info h4 {
  color: #ffffff !important;
}

/* Card Icons */
.info-card .icon {
  background: rgba(0, 212, 255, 0.1) !important;
  color: #00d4ff !important;
  border: 1px solid rgba(0, 212, 255, 0.2) !important;
  box-shadow: inset 0 0 10px rgba(0, 212, 255, 0.1) !important;
}

.step-num {
  background: linear-gradient(135deg, #00d4ff, #4199ff) !important;
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.4) !important;
  color: #000 !important;
}

/* Hero Section Specifics */
.hero-modern {
  background: none !important; /* Rely on body dark background and kinetic canvas */
}

/* Fix Hero title gradient */
.hero-title span {
  background: linear-gradient(135deg, #00d4ff, #a855f7) !important; /* Cyan to Purple */
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}

.hero-point {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Hero Badge */
.hero-badge {
  background: rgba(0, 212, 255, 0.1) !important;
  border: 1px solid rgba(0, 212, 255, 0.2) !important;
  color: #00d4ff !important;
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.2) !important;
}

/* Form Container override */
.hero-form-shell {
  background: rgba(15, 23, 42, 0.3) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
.hero-form-card {
  background: rgba(15, 23, 42, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}
.hero-form-card h3 {
  color: #fff !important;
}

/* Language Selector */
.language-selector {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
.language-selector .lang-btn {
  color: #94a3b8 !important;
}
.language-selector .lang-btn.active {
  background: #00d4ff !important;
  color: #000 !important;
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.4) !important;
}

/* Mobile Menu Dark Overrides */
.mobile-menu-overlay__inner {
  background: rgba(15, 23, 42, 0.95) !important;
  border-left-color: rgba(255, 255, 255, 0.1) !important;
}
.offcanvas-navigation ul li a {
  color: #e2e8f0 !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
}
.offcanvas-navigation ul li a:hover {
  background: rgba(0, 212, 255, 0.1) !important;
  color: #00d4ff !important;
  border-color: rgba(0, 212, 255, 0.2) !important;
}
.mobile-navigation-close-icon {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}
.mobile-navigation-close-icon:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}
.mobile-language-selector {
  background: transparent !important;
  border-top-color: rgba(255, 255, 255, 0.05) !important;
}
.mobile-language-selector .mobile-lang-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #94a3b8 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
.mobile-language-selector .mobile-lang-btn.active {
  background: #00d4ff !important;
  color: #000 !important;
  border-color: #00d4ff !important;
}
#mobile-menu-trigger {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
#mobile-menu-trigger i, #mobile-menu-trigger i::before, #mobile-menu-trigger i::after {
  background: #00d4ff !important;
}

/* 5. Process / Timeline Section Dark Fixes */
/* Make sure the images are styled perfectly */
.ht-box-images {
  border-radius: 20px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

.ht-box-images img {
  border-radius: 20px !important;
}

/* 6. Contact CTA Box */
.cta-band {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(65, 153, 255, 0.05)) !important;
  border: 1px solid rgba(0, 212, 255, 0.2) !important;
  box-shadow: inset 0 0 40px rgba(0, 212, 255, 0.05) !important;
}

/* Footer elements */
.footer-area {
  background: #020408 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Ensure the AI form shadow dom doesn't stick out as white */
/* Note: Since it's shadow DOM we can't style its internals from here, but the host is fine */


/* TAKENOW TEXT FIXES */
.section-sub-title {
  color: #00d4ff !important;
}
.ht-box-icon .content .text, .ht-box-icon .content .text strong {
  color: #cbd5e1 !important;
}
.feature-btn a span.button-text {
  color: #f8fafc !important;
}
.feature-btn a i {
  color: #00d4ff !important;
}
/* Additional global text contrast fixes */
.section-title-wrap .heading,
.section-title-wrap h3.heading,
.section-title-wrap h2.heading,
.section-title-wrap h1.heading,
.section-title-wrap .section-sub-title {
  color: #f8fafc !important;
}
.hero-title,
.hero-subtitle,
.hero-point,
.hero-badge {
  color: #f8fafc !important;
}


/* Fix any remaining strong or span tags that inherit bad colors */
strong, b {
  color: #ffffff !important;
}
.ht-box-icon {
  padding: 30px !important;
  background: rgba(15, 23, 42, 0.6) !important;
}

/* GLOBAL HIGH CONTRAST DARK MODE TEXT OVERRIDES */
h1, h2, h3, h4, h5, h6, 
.heading, .title, .sub-title, 
.section-sub-title, .section-title,
.hero-title, .hero-subtitle,
.modern-grid h3, .modern-grid h4,
.ht-team-member h5, .ht-team-member span {
  color: #ffffff !important;
}

p, span, li, a, td, th, 
.text, .desc, .sub-text, 
.hero-text, .hero-point,
.testimonial-slider p,
.testimonial-info p,
.testimonial-card p,
.testimonial-item p,
.pricing-card-list li,
.pricing-card p,
.footer-widget p,
.footer-widget li a,
.breadcrumb-item a,
.post-title a {
  color: #e2e8f0 !important; /* Premium light slate/off-white */
}

/* Secondary muted text */
.text-muted, .muted, .post-meta, .date, .author, .comment-metadata {
  color: #94a3b8 !important;
}

/* Accent spans or links should retain a glowing cyan/blue color */
.text-color-primary, 
.color-accent, 
.highlight, 
a:hover {
  color: #00d4ff !important;
}

/* Ensure form labels and input texts are highly visible */
label, .form-label, .form-group label {
  color: #cbd5e1 !important;
}

input, select, textarea {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

input::placeholder, textarea::placeholder {
  color: #64748b !important;
}

/* Force FontAwesome font families to prevent global font overrides */
.fab {
  font-family: "Font Awesome 5 Brands" !important;
  font-weight: 400 !important;
}
.fas, .fa {
  font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
}
.far {
  font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free" !important;
  font-weight: 400 !important;
}
.fal {
  font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free" !important;
  font-weight: 300 !important;
}

/* Social Icons Visibility and Glowing Hover Effects */
.header-socials a,
.mobile-menu-overlay a i.fab,
.ht-social-networks a i {
  color: #00d4ff !important;
  transition: all 0.3s ease !important;
}
.header-socials a:hover,
.mobile-menu-overlay a:hover i.fab,
.ht-social-networks a:hover i {
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.8) !important;
}

/* Premium Dark Footer Styling */
.footer-area-wrapper, 
.footer-area, 
.footer-copyright-area {
  background-color: #030712 !important; /* Premium dark background */
  background-image: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.footer-widget__title {
  color: #ffffff !important;
}

.footer-widget__list li, 
.footer-widget__list li a,
.copyright-text, 
.copyright-text a {
  color: #cbd5e1 !important; /* Readable off-white */
}

.footer-widget__list li a:hover,
.copyright-text a:hover {
  color: #00d4ff !important;
}

/* WhatsApp Floating Button - Stable Green Brand Color */
.sticky-wa {
  background: #25d366 !important;
  color: #ffffff !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sticky-wa:hover {
  background: #128c7e !important; /* Standard WhatsApp dark green */
  color: #ffffff !important;
  box-shadow: 0 18px 45px rgba(37, 211, 102, 0.45) !important;
  transform: translateY(-4px) scale(1.08) !important;
}

.sticky-wa i {
  color: #ffffff !important;
}