/* ========================================
   AMBIKA PERIPHERALS - COLOR HIGHLIGHTS
   Extra stylesheet: adds colorful, medium-tone
   highlight accents on top of style.css.
   Nothing here overrides layout/structure —
   only colors, gradients & highlight touches.
   ======================================== */

:root {
  --hl-teal: #14b8a6;
  --hl-purple: #a855f7;
  --hl-pink: #ec4899;
  --hl-cyan: #06b6d4;
  --hl-amber: #f59e0b;
  --hl-green: #22c55e;
}

/* ---- Section eyebrows: distinct medium color per section ---- */
#about .section-eyebrow {
  color: var(--hl-teal);
  background: linear-gradient(135deg, rgba(20,184,166,0.12), rgba(20,184,166,0.05));
  border-color: rgba(20,184,166,0.25);
}
#products .section-eyebrow {
  color: var(--hl-purple);
  background: linear-gradient(135deg, rgba(168,85,247,0.12), rgba(168,85,247,0.05));
  border-color: rgba(168,85,247,0.25);
}
#services .section-eyebrow {
  color: var(--hl-pink);
  background: linear-gradient(135deg, rgba(236,72,153,0.12), rgba(236,72,153,0.05));
  border-color: rgba(236,72,153,0.25);
}
#why-us .section-eyebrow {
  color: var(--hl-amber);
  background: linear-gradient(135deg, rgba(245,158,11,0.14), rgba(245,158,11,0.05));
  border-color: rgba(245,158,11,0.28);
}
#brands .section-eyebrow {
  color: var(--hl-cyan);
  background: linear-gradient(135deg, rgba(6,182,212,0.12), rgba(6,182,212,0.05));
  border-color: rgba(6,182,212,0.25);
}

/* ---- Stat numbers: alternating medium colors ---- */
.stat-item:nth-child(1) .stat-number { color: var(--hl-cyan); text-shadow: 0 0 20px rgba(6,182,212,0.45); }
.stat-item:nth-child(2) .stat-number { color: var(--hl-amber); text-shadow: 0 0 20px rgba(245,158,11,0.45); }
.stat-item:nth-child(3) .stat-number { color: var(--hl-teal); text-shadow: 0 0 20px rgba(20,184,166,0.45); }
.stat-item:nth-child(4) .stat-number { color: var(--hl-pink); text-shadow: 0 0 20px rgba(236,72,153,0.45); }

/* ---- Service cards: colorful top highlight bar + link color cycle ---- */
.service-card:nth-of-type(9n+1)::before { background: linear-gradient(90deg, var(--hl-teal), var(--hl-cyan)); }
.service-card:nth-of-type(9n+2)::before { background: linear-gradient(90deg, var(--hl-purple), var(--hl-pink)); }
.service-card:nth-of-type(9n+3)::before { background: linear-gradient(90deg, var(--hl-amber), #fbbf24); }
.service-card:nth-of-type(9n+4)::before { background: linear-gradient(90deg, var(--hl-cyan), var(--hl-teal)); }
.service-card:nth-of-type(9n+5)::before { background: linear-gradient(90deg, var(--hl-pink), var(--hl-purple)); }
.service-card:nth-of-type(9n+6)::before { background: linear-gradient(90deg, var(--hl-green), var(--hl-teal)); }
.service-card:nth-of-type(9n+7)::before { background: linear-gradient(90deg, var(--hl-purple), var(--hl-cyan)); }
.service-card:nth-of-type(9n+8)::before { background: linear-gradient(90deg, var(--hl-amber), var(--hl-pink)); }
.service-card:nth-of-type(9n+9)::before { background: linear-gradient(90deg, var(--hl-teal), var(--hl-purple)); }
.service-card::before { transform: scaleX(0.35); opacity: 0.85; transition: var(--transition); }
.service-card:hover::before { transform: scaleX(1); opacity: 1; }

/* ---- Accordion numbers: colorful medium badges ---- */
.accordion-item:nth-of-type(6n+1) .acc-num { color: var(--hl-teal); background: rgba(20,184,166,0.12); }
.accordion-item:nth-of-type(6n+2) .acc-num { color: var(--hl-purple); background: rgba(168,85,247,0.12); }
.accordion-item:nth-of-type(6n+3) .acc-num { color: var(--hl-pink); background: rgba(236,72,153,0.12); }
.accordion-item:nth-of-type(6n+4) .acc-num { color: var(--hl-amber); background: rgba(245,158,11,0.14); }
.accordion-item:nth-of-type(6n+5) .acc-num { color: var(--hl-cyan); background: rgba(6,182,212,0.12); }
.accordion-item:nth-of-type(6n+6) .acc-num { color: var(--hl-green); background: rgba(34,197,94,0.12); }

/* ---- Why Us icons: colorful medium gradients ---- */
.why-card:nth-of-type(4n+1) .why-icon { background: linear-gradient(135deg, var(--hl-teal), var(--hl-cyan)); box-shadow: 0 6px 20px rgba(20,184,166,0.35); }
.why-card:nth-of-type(4n+2) .why-icon { background: linear-gradient(135deg, var(--hl-purple), var(--hl-pink)); box-shadow: 0 6px 20px rgba(168,85,247,0.35); }
.why-card:nth-of-type(4n+3) .why-icon { background: linear-gradient(135deg, var(--hl-amber), #fbbf24); box-shadow: 0 6px 20px rgba(245,158,11,0.35); }
.why-card:nth-of-type(4n+4) .why-icon { background: linear-gradient(135deg, var(--hl-cyan), var(--hl-teal)); box-shadow: 0 6px 20px rgba(6,182,212,0.35); }
.why-card:hover .why-icon { background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important; }

/* ---- Why Us card hover background: richer medium gradient ---- */
.why-card:hover {
  background: linear-gradient(135deg, #1a3c6e, var(--hl-purple)) !important;
}

/* ---- Check list icons: colorful medium cycle ---- */
.check-item:nth-of-type(4n+1) i { background: linear-gradient(135deg, var(--hl-teal), var(--hl-cyan)); box-shadow: 0 3px 10px rgba(20,184,166,0.35); }
.check-item:nth-of-type(4n+2) i { background: linear-gradient(135deg, var(--hl-purple), var(--hl-pink)); box-shadow: 0 3px 10px rgba(168,85,247,0.35); }
.check-item:nth-of-type(4n+3) i { background: linear-gradient(135deg, var(--hl-amber), #fbbf24); box-shadow: 0 3px 10px rgba(245,158,11,0.35); }
.check-item:nth-of-type(4n+4) i { background: linear-gradient(135deg, var(--hl-cyan), var(--hl-green)); box-shadow: 0 3px 10px rgba(6,182,212,0.35); }

/* ---- Contact info icons: colorful medium cycle ---- */
.ci-item:nth-of-type(4n+1) .ci-icon { background: linear-gradient(135deg, rgba(20,184,166,0.28), rgba(6,182,212,0.15)); border-color: rgba(20,184,166,0.35); color: var(--hl-teal); }
.ci-item:nth-of-type(4n+2) .ci-icon { background: linear-gradient(135deg, rgba(168,85,247,0.28), rgba(236,72,153,0.15)); border-color: rgba(168,85,247,0.35); color: var(--hl-purple); }
.ci-item:nth-of-type(4n+3) .ci-icon { background: linear-gradient(135deg, rgba(245,158,11,0.3), rgba(251,191,36,0.15)); border-color: rgba(245,158,11,0.38); color: var(--hl-amber); }
.ci-item:nth-of-type(4n+4) .ci-icon { background: linear-gradient(135deg, rgba(6,182,212,0.28), rgba(34,197,94,0.15)); border-color: rgba(6,182,212,0.35); color: var(--hl-cyan); }

/* ---- Brand logos: colorful medium hover border cycle ---- */
.brand-logo:nth-of-type(6n+1):hover { border-color: var(--hl-teal); box-shadow: 0 6px 24px rgba(20,184,166,0.25); }
.brand-logo:nth-of-type(6n+2):hover { border-color: var(--hl-purple); box-shadow: 0 6px 24px rgba(168,85,247,0.25); }
.brand-logo:nth-of-type(6n+3):hover { border-color: var(--hl-pink); box-shadow: 0 6px 24px rgba(236,72,153,0.25); }
.brand-logo:nth-of-type(6n+4):hover { border-color: var(--hl-amber); box-shadow: 0 6px 24px rgba(245,158,11,0.3); }
.brand-logo:nth-of-type(6n+5):hover { border-color: var(--hl-cyan); box-shadow: 0 6px 24px rgba(6,182,212,0.25); }
.brand-logo:nth-of-type(6n+6):hover { border-color: var(--hl-green); box-shadow: 0 6px 24px rgba(34,197,94,0.25); }

/* ---- Product image top-left corner ribbon accent (subtle color pop) ---- */
.service-card:nth-of-type(9n+1) .product-img { border-top: 3px solid var(--hl-teal); }
.service-card:nth-of-type(9n+2) .product-img { border-top: 3px solid var(--hl-purple); }
.service-card:nth-of-type(9n+3) .product-img { border-top: 3px solid var(--hl-amber); }
.service-card:nth-of-type(9n+4) .product-img { border-top: 3px solid var(--hl-cyan); }
.service-card:nth-of-type(9n+5) .product-img { border-top: 3px solid var(--hl-pink); }
.service-card:nth-of-type(9n+6) .product-img { border-top: 3px solid var(--hl-green); }
.service-card:nth-of-type(9n+7) .product-img { border-top: 3px solid var(--hl-purple); }
.service-card:nth-of-type(9n+8) .product-img { border-top: 3px solid var(--hl-amber); }
.service-card:nth-of-type(9n+9) .product-img { border-top: 3px solid var(--hl-teal); }

/* ---- About feature items: colorful left border cycle ---- */
.af-item:nth-of-type(4n+1) { border-left-color: var(--hl-teal); }
.af-item:nth-of-type(4n+1) i { color: var(--hl-teal); }
.af-item:nth-of-type(4n+2) { border-left-color: var(--hl-purple); }
.af-item:nth-of-type(4n+2) i { color: var(--hl-purple); }
.af-item:nth-of-type(4n+3) { border-left-color: var(--hl-amber); }
.af-item:nth-of-type(4n+3) i { color: var(--hl-amber); }
.af-item:nth-of-type(4n+4) { border-left-color: var(--hl-cyan); }
.af-item:nth-of-type(4n+4) i { color: var(--hl-cyan); }

/* ---- About badge: richer medium gradient ---- */
.about-badge {
  background: linear-gradient(135deg, var(--hl-purple), var(--hl-pink)) !important;
  box-shadow: 0 8px 28px rgba(168,85,247,0.4) !important;
}

/* ---- Contact info block: medium colorful gradient instead of flat navy ---- */
.contact-info-block {
  background: linear-gradient(145deg, #0f2548, var(--hl-purple) 130%) !important;
}

/* ---- Social icon hover: colorful cycle ---- */
.social-links a:nth-of-type(4n+1):hover, .footer-socials a:nth-of-type(5n+1):hover { background: linear-gradient(135deg, var(--hl-teal), var(--hl-cyan)) !important; box-shadow: 0 4px 14px rgba(20,184,166,0.35) !important; }
.social-links a:nth-of-type(4n+2):hover, .footer-socials a:nth-of-type(5n+2):hover { background: linear-gradient(135deg, var(--hl-purple), var(--hl-pink)) !important; box-shadow: 0 4px 14px rgba(168,85,247,0.35) !important; }
.social-links a:nth-of-type(4n+3):hover, .footer-socials a:nth-of-type(5n+3):hover { background: linear-gradient(135deg, var(--hl-amber), #fbbf24) !important; box-shadow: 0 4px 14px rgba(245,158,11,0.35) !important; }
.social-links a:nth-of-type(4n+4):hover, .footer-socials a:nth-of-type(5n+4):hover { background: linear-gradient(135deg, var(--hl-cyan), var(--hl-green)) !important; box-shadow: 0 4px 14px rgba(6,182,212,0.35) !important; }
.footer-socials a:nth-of-type(5n+5):hover { background: linear-gradient(135deg, var(--hl-pink), var(--hl-purple)) !important; box-shadow: 0 4px 14px rgba(236,72,153,0.35) !important; }

/* ---- Hero badge: slightly richer medium gradient ---- */
.hero-badge {
  background: linear-gradient(135deg, var(--hl-pink), var(--accent)) !important;
  box-shadow: 0 4px 16px rgba(236,72,153,0.35) !important;
}

/* ---- Topbar bottom line: multi-color medium gradient instead of flat accent ---- */
.topbar {
  border-bottom: 2px solid transparent !important;
  border-image: linear-gradient(90deg, var(--hl-teal), var(--hl-purple), var(--hl-pink), var(--hl-amber)) 1 !important;
}

/* ---- Back to top button: medium colorful gradient ---- */
.back-to-top {
  background: linear-gradient(135deg, var(--hl-purple), var(--hl-pink)) !important;
  box-shadow: 0 6px 20px rgba(168,85,247,0.4) !important;
}
.back-to-top:hover {
  background: linear-gradient(135deg, var(--hl-pink), var(--hl-purple)) !important;
}