/* ====================================================
   VISUAL UPGRADE — Enhanced Section Styling
   Web Crafters IT Solutions
   ==================================================== */


/* ---- 1. RICHER SECTION BACKGROUNDS ---- */

/* section-dark: rich layered lavender instead of flat #F4F1FF */
.section-dark {
  background: linear-gradient(160deg, #EAE2FF 0%, #F2EEFF 45%, #E8E0FF 100%);
}

/* section-gradient: soft dual-tone instead of barely-visible tint */
.section-gradient {
  background: linear-gradient(135deg, #F5F0FF 0%, #EDF6FF 55%, #F4F0FF 100%);
  border-top: 1px solid rgba(107, 0, 204, 0.1);
  border-bottom: 1px solid rgba(107, 0, 204, 0.1);
}

/* Ensure containers in section-dark sit above the dot pattern */
.section-dark > .container {
  position: relative;
  z-index: 1;
}


/* ---- 2. SECTION LABEL — Pill-badge treatment ---- */

.section-label {
  background: linear-gradient(135deg, rgba(107, 0, 204, 0.09) 0%, rgba(155, 48, 255, 0.06) 100%);
  padding: 6px 18px 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(107, 0, 204, 0.18);
  box-shadow: 0 2px 8px rgba(107, 0, 204, 0.07);
}


/* ---- 3. SERVICE CARDS — Unique coloured top bar + icon ---- */

/* Always show the top bar (was only on hover) */
.service-card::before {
  transform: scaleX(1);
  opacity: 0.7;
}
.service-card:hover::before {
  opacity: 1;
}

/* Large watermark number for visual depth */
.service-card::after {
  content: attr(data-num);
  position: absolute;
  bottom: 16px;
  right: 20px;
  font-family: var(--font-primary);
  font-size: 3.5rem;
  font-weight: 900;
  color: rgba(107, 0, 204, 0.05);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* Per-card accent colour via CSS custom property */
.service-card[data-num="01"] { --card-accent: #6B00CC; }
.service-card[data-num="01"]::before { background: linear-gradient(90deg, #6B00CC, #9B30FF); }
.service-card[data-num="01"] .service-icon {
  background: rgba(107, 0, 204, 0.12);
  color: #6B00CC;
  border-color: rgba(107, 0, 204, 0.22);
}

.service-card[data-num="02"] { --card-accent: #2563EB; }
.service-card[data-num="02"]::before { background: linear-gradient(90deg, #2563EB, #06B6D4); }
.service-card[data-num="02"] .service-icon {
  background: rgba(37, 99, 235, 0.12);
  color: #2563EB;
  border-color: rgba(37, 99, 235, 0.22);
}

.service-card[data-num="03"] { --card-accent: #059669; }
.service-card[data-num="03"]::before { background: linear-gradient(90deg, #059669, #10B981); }
.service-card[data-num="03"] .service-icon {
  background: rgba(5, 150, 105, 0.12);
  color: #059669;
  border-color: rgba(5, 150, 105, 0.22);
}

.service-card[data-num="04"] { --card-accent: #D97706; }
.service-card[data-num="04"]::before { background: linear-gradient(90deg, #D97706, #F59E0B); }
.service-card[data-num="04"] .service-icon {
  background: rgba(217, 119, 6, 0.12);
  color: #D97706;
  border-color: rgba(217, 119, 6, 0.22);
}

.service-card[data-num="05"] { --card-accent: #DC2626; }
.service-card[data-num="05"]::before { background: linear-gradient(90deg, #DC2626, #F87171); }
.service-card[data-num="05"] .service-icon {
  background: rgba(220, 38, 38, 0.12);
  color: #DC2626;
  border-color: rgba(220, 38, 38, 0.22);
}

.service-card[data-num="06"] { --card-accent: #0EA5E9; }
.service-card[data-num="06"]::before { background: linear-gradient(90deg, #0EA5E9, #06B6D4); }
.service-card[data-num="06"] .service-icon {
  background: rgba(14, 165, 233, 0.12);
  color: #0EA5E9;
  border-color: rgba(14, 165, 233, 0.22);
}

.service-card[data-num="07"] { --card-accent: #7C3AED; }
.service-card[data-num="07"]::before { background: linear-gradient(90deg, #7C3AED, #A855F7); }
.service-card[data-num="07"] .service-icon {
  background: rgba(124, 58, 237, 0.12);
  color: #7C3AED;
  border-color: rgba(124, 58, 237, 0.22);
}

.service-card[data-num="08"] { --card-accent: #059669; }
.service-card[data-num="08"]::before { background: linear-gradient(90deg, #059669, #34D399); }
.service-card[data-num="08"] .service-icon {
  background: rgba(5, 150, 105, 0.12);
  color: #059669;
  border-color: rgba(5, 150, 105, 0.22);
}


/* ---- 4. WHY-CHOOSE-US — Coloured icons + left accent ---- */

.why-item {
  position: relative;
  border-left: 3px solid transparent;
  transition: border-color 0.3s ease, var(--transition);
}

.why-item:hover {
  border-left-color: var(--primary-light);
}

/* Unique icon colours */
.section-gradient .why-item:nth-child(1) .why-icon,
.why-item:nth-child(1) .why-icon {
  background: rgba(107, 0, 204, 0.12);
  color: #6B00CC;
  border-color: rgba(107, 0, 204, 0.2);
}
.section-gradient .why-item:nth-child(2) .why-icon,
.why-item:nth-child(2) .why-icon {
  background: rgba(245, 158, 11, 0.12);
  color: #D97706;
  border-color: rgba(245, 158, 11, 0.2);
}
.section-gradient .why-item:nth-child(3) .why-icon,
.why-item:nth-child(3) .why-icon {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border-color: rgba(16, 185, 129, 0.2);
}
.section-gradient .why-item:nth-child(4) .why-icon,
.why-item:nth-child(4) .why-icon {
  background: rgba(59, 130, 246, 0.12);
  color: #2563EB;
  border-color: rgba(59, 130, 246, 0.2);
}
.section-gradient .why-item:nth-child(5) .why-icon,
.why-item:nth-child(5) .why-icon {
  background: rgba(220, 38, 38, 0.12);
  color: #DC2626;
  border-color: rgba(220, 38, 38, 0.2);
}
.section-gradient .why-item:nth-child(6) .why-icon,
.why-item:nth-child(6) .why-icon {
  background: rgba(14, 165, 233, 0.12);
  color: #0EA5E9;
  border-color: rgba(14, 165, 233, 0.2);
}

/* Keep icon colour solid on hover (override the default purple) */
.why-item:nth-child(1):hover .why-icon { background: #6B00CC; color: #fff; border-color: transparent; box-shadow: 0 0 20px rgba(107,0,204,0.35); }
.why-item:nth-child(2):hover .why-icon { background: #D97706; color: #fff; border-color: transparent; box-shadow: 0 0 20px rgba(217,119,6,0.35); }
.why-item:nth-child(3):hover .why-icon { background: #059669; color: #fff; border-color: transparent; box-shadow: 0 0 20px rgba(5,150,105,0.35); }
.why-item:nth-child(4):hover .why-icon { background: #2563EB; color: #fff; border-color: transparent; box-shadow: 0 0 20px rgba(37,99,235,0.35); }
.why-item:nth-child(5):hover .why-icon { background: #DC2626; color: #fff; border-color: transparent; box-shadow: 0 0 20px rgba(220,38,38,0.35); }
.why-item:nth-child(6):hover .why-icon { background: #0EA5E9; color: #fff; border-color: transparent; box-shadow: 0 0 20px rgba(14,165,233,0.35); }


/* ---- 5. TESTIMONIAL CARDS — Left border accent + bigger stars ---- */

.testimonial-card {
  border-left: 4px solid var(--primary-light);
  background: linear-gradient(160deg, #FFFFFF 60%, rgba(107, 0, 204, 0.025) 100%) !important;
}

.testimonial-stars {
  font-size: 1.1rem;
  color: #F59E0B;
  letter-spacing: 3px;
}

.testimonial-quote {
  font-size: 5rem;
  color: var(--primary-light);
  opacity: 0.15;
  margin-bottom: 8px;
}

.testimonial-text {
  font-size: 0.95rem;
}

.testimonial-avatar-placeholder {
  box-shadow: 0 4px 16px rgba(107, 0, 204, 0.3);
}


/* ---- 6. ABOUT STAT CARDS — Coloured top border per card ---- */

.about-stat-card {
  border-top: 3px solid transparent;
  transition: var(--transition), border-color 0s;
}

.about-stat-card:nth-child(1) { border-top-color: #6B00CC; }
.about-stat-card:nth-child(2) { border-top-color: #D97706; }
.about-stat-card:nth-child(3) { border-top-color: #059669; }
.about-stat-card:nth-child(4) { border-top-color: #2563EB; }


/* ---- 7. CTA BOX — Bold dark purple gradient ---- */

.cta-box {
  background: linear-gradient(135deg, #3D0080 0%, #6B00CC 45%, #8B2BE8 100%) !important;
  border: none !important;
  box-shadow: 0 20px 60px rgba(107, 0, 204, 0.4);
}

.cta-box h2 {
  color: #fff;
}

/* Fix: gradient/transparent text is invisible on dark bg — force white */
.cta-box .text-gradient,
.cta-box .section-title span,
.cta-box h2 span {
  background: none !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.cta-box p {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* Primary button: semi-transparent white glass on dark bg */
.cta-box .btn-primary {
  background: rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.cta-box .btn-primary:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-2px);
}

/* Secondary button: visible on dark bg */
.cta-box .btn-secondary {
  background: transparent !important;
  border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.cta-box .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

.cta-box .btn-whatsapp {
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.5);
}


/* ---- 8. BLOG CARDS — Top accent border + hover enhancement ---- */

.blog-card {
  border-top: 3px solid transparent;
  transition: var(--transition), border-color 0s;
}

.blog-grid .blog-card:nth-child(3n+1) { border-top-color: #6B00CC; }
.blog-grid .blog-card:nth-child(3n+2) { border-top-color: #059669; }
.blog-grid .blog-card:nth-child(3n+3) { border-top-color: #D97706; }

.blog-read-more {
  background: rgba(107, 0, 204, 0.06);
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(107, 0, 204, 0.12);
  font-size: 0.82rem;
  transition: var(--transition);
}

.blog-read-more:hover {
  background: var(--gradient-primary);
  color: #fff;
  border-color: transparent;
  gap: 10px;
}


/* ---- 9. HERO ENHANCEMENTS ---- */

.hero-badge {
  background: linear-gradient(135deg, rgba(107, 0, 204, 0.14) 0%, rgba(155, 48, 255, 0.1) 100%);
  border: 1px solid rgba(107, 0, 204, 0.28);
  box-shadow: 0 2px 14px rgba(107, 0, 204, 0.12);
}

.hero-float-card {
  box-shadow: 0 8px 32px rgba(107, 0, 204, 0.16), 0 2px 8px rgba(0, 0, 0, 0.06);
}

.hero-stat-number span {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ---- 10. GLASS CARD — Richer shadow depth ---- */

.glass-card {
  box-shadow: 0 4px 24px rgba(107, 0, 204, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
}

.glass-card:hover {
  box-shadow: 0 14px 50px rgba(107, 0, 204, 0.15), 0 4px 12px rgba(0, 0, 0, 0.05);
}


/* ---- 11. MARQUEE SECTION — More vibrant ---- */

.marquee-section {
  background: linear-gradient(90deg, rgba(107, 0, 204, 0.04) 0%, rgba(155, 48, 255, 0.07) 50%, rgba(107, 0, 204, 0.04) 100%);
  border-top: 1px solid rgba(107, 0, 204, 0.13);
  border-bottom: 1px solid rgba(107, 0, 204, 0.13);
}

.marquee-item {
  color: var(--text-primary);
  font-weight: 600;
}

.marquee-item i {
  font-size: 1.1rem;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ---- 12. TECH MARQUEE SECTION ---- */

.tech-marquee-section {
  background: linear-gradient(90deg, #F5F0FF 0%, #EDE8FF 50%, #F5F0FF 100%);
  border-top: 1px solid rgba(107, 0, 204, 0.1);
  border-bottom: 1px solid rgba(107, 0, 204, 0.1);
}

.tech-badge {
  box-shadow: 0 2px 10px rgba(107, 0, 204, 0.07);
  border-color: rgba(107, 0, 204, 0.12);
}

.tech-badge:hover {
  box-shadow: 0 6px 20px rgba(107, 0, 204, 0.14);
}


/* ---- 13. PAGE HERO BANNER — Richer background ---- */

.page-hero {
  background: linear-gradient(160deg, #EFE8FF 0%, #E8DEFF 45%, #F5F0FF 100%);
}

.page-hero-orb-1 {
  opacity: 0.45;
}


/* ---- 14. CONTACT ICONS — Per-item colours ---- */

.contact-info-item:nth-child(1) .contact-icon {
  background: rgba(107, 0, 204, 0.1);
  color: #6B00CC;
  border-color: rgba(107, 0, 204, 0.18);
}
.contact-info-item:nth-child(2) .contact-icon {
  background: rgba(37, 211, 102, 0.1);
  color: #059669;
  border-color: rgba(37, 211, 102, 0.18);
}
.contact-info-item:nth-child(3) .contact-icon {
  background: rgba(59, 130, 246, 0.1);
  color: #2563EB;
  border-color: rgba(59, 130, 246, 0.18);
}
.contact-info-item:nth-child(4) .contact-icon {
  background: rgba(245, 158, 11, 0.1);
  color: #D97706;
  border-color: rgba(245, 158, 11, 0.18);
}

/* Contact info hover matches per-item colour */
.contact-info-item:nth-child(1):hover .contact-icon { background: #6B00CC; color: #fff; border-color: transparent; }
.contact-info-item:nth-child(2):hover .contact-icon { background: #059669; color: #fff; border-color: transparent; }
.contact-info-item:nth-child(3):hover .contact-icon { background: #2563EB; color: #fff; border-color: transparent; }
.contact-info-item:nth-child(4):hover .contact-icon { background: #D97706; color: #fff; border-color: transparent; }


/* ---- 15. SERVICE DETAIL FEATURE CARDS ---- */

.service-detail-features .glass-card {
  border-left: 3px solid var(--primary-light);
}


/* ---- 16. PROCESS STEPS — Numbered circles more vibrant ---- */

.process-number {
  box-shadow: 0 4px 20px rgba(107, 0, 204, 0.3), 0 0 0 6px rgba(107, 0, 204, 0.08);
}


/* ---- 17. FOOTER CTA LINE — brighter gradient ---- */

.footer::before {
  opacity: 0.8;
}


/* ---- 18. SERVICE AREAS SECTION — Better visuals ---- */

[style*="padding: 48px 0"] {
  background: linear-gradient(135deg, #F8F5FF 0%, #F0EAFF 100%) !important;
}