/* ═══════════════════════════════════════════════════════════════
   MEDIATOPIA — COLOUR CONTROL
   ═══════════════════════════════════════════════════════════════
   Edit any colour → save → Ctrl+Shift+R (hard refresh)
   
   This file overrides the page colours using CSS !important.
   The page looks IDENTICAL until you change a value here.
   ═══════════════════════════════════════════════════════════════ */


/* ── TOP MARQUEE (scrolling announcements) ───────────────────── */
/* Currently: dark navy #0d1525 with white text */

/*
#root > div > div:first-child {
  background: #0d1525 !important;
}
#root > div > div:first-child span {
  color: rgba(255,255,255,.55) !important;
}
*/


/* ── HEADER (sticky nav) ─────────────────────────────────────── */
/* Currently: dark navy with blur */

/*
header {
  background: rgba(13,21,37,.97) !important;
  border-bottom-color: rgba(255,255,255,.06) !important;
}
header a {
  color: rgba(255,255,255,.7) !important;
}
*/


/* ── HERO SECTION ────────────────────────────────────────────── */
/* Currently: #111c2e dark blue, white text */

/*
#hero {
  background: #111c2e !important;
}
#hero h1 {
  color: #ffffff !important;
}
#hero p {
  color: #e2e8f0 !important;
}
*/


/* ── HERO STAT CARDS ─────────────────────────────────────────── */
/* Currently: #111c2e bg, #27affb numbers, #94a3b8 labels */

/*
#hero section > div > div:last-child > div > div {
  background: #111c2e !important;
  border-color: rgba(255,255,255,.06) !important;
}
*/


/* ── TRUST BAR (checkmarks) ──────────────────────────────────── */
/* Currently: white bg, #64748b text, #27affb ticks */

/*
#trust-bar {
  background: #ffffff !important;
  border-bottom-color: #e2e8f0 !important;
}
#trust-bar span {
  color: #64748b !important;
}
*/


/* ── TECH MARQUEE (scrolling logos) ──────────────────────────── */
/* Currently: #111c2e bg */

/*
#tech-marquee {
  background: #111c2e !important;
}
*/


/* ── PROBLEM SECTION ─────────────────────────────────────────── */
/* Currently: white bg, #222222 headings, #64748b text */

/*
#problem {
  background: #ffffff !important;
}
#problem h2, #problem h3 {
  color: #222222 !important;
}
#problem p {
  color: #64748b !important;
}
*/


/* ── PROBLEM CARDS ───────────────────────────────────────────── */
/* Currently: white bg, #e2e8f0 border */

/*
#problem > div > div:last-child > div > div {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}
*/


/* ── SERVICES SECTION ────────────────────────────────────────── */
/* Currently: #f8fafc light grey bg */

/*
#services {
  background: #f8fafc !important;
}
#services h2 {
  color: #222222 !important;
}
*/


/* ── SERVICE CARDS ───────────────────────────────────────────── */
/* Currently: white bg, #e2e8f0 border */

/*
#services > div > div > div {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}
*/


/* ── CLIENT MARQUEE (industries strip) ───────────────────────── */
/* Currently: white bg, #e2e8f0 borders */

/*
#client-marquee {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}
*/


/* ── PROCESS SECTION ─────────────────────────────────────────── */
/* Currently: white bg, #222222 headings */

/*
#process {
  background: #ffffff !important;
}
#process h2 {
  color: #222222 !important;
}
*/


/* ── PORTFOLIO SLIDER ────────────────────────────────────────── */
/* Currently: #111c2e dark bg, white text */

/*
#portfolio {
  background: #111c2e !important;
}
#portfolio h2 {
  color: #ffffff !important;
}
*/


/* ── TESTIMONIALS / RESULTS ──────────────────────────────────── */
/* Currently: #f8fafc light grey bg */

/*
#results {
  background: #f8fafc !important;
}
#results h2 {
  color: #222222 !important;
}
*/


/* ── TESTIMONIAL CARDS ───────────────────────────────────────── */
/* Currently: white bg, #e2e8f0 border */

/*
#results > div > div > div {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}
*/


/* ── FAQ SECTION ─────────────────────────────────────────────── */
/* Currently: white bg */

/*
#faq {
  background: #ffffff !important;
}
#faq h2 {
  color: #222222 !important;
}
*/


/* ── CONTACT CTA (bottom banner) ─────────────────────────────── */
/* Currently: #111c2e dark bg, white text */

/*
#contact {
  background: #111c2e !important;
}
#contact h2 {
  color: #ffffff !important;
}
*/


/* ── FOOTER ──────────────────────────────────────────────────── */
/* Currently: #0d1525 darkest navy */

/*
footer {
  background: #0d1525 !important;
}
footer h3 {
  color: #ffffff !important;
}
footer h4 {
  color: #27affb !important;
}
footer a {
  color: rgba(255,255,255,.45) !important;
}
*/


/* ── GLOBAL: PRIMARY COLOUR ──────────────────────────────────── */
/* Uncomment to change ALL blue (#27affb) across the whole page  */

/*
[style*="rgb(39, 175, 251)"],
[style*="#27affb"] {
  color: #27affb !important;
}
*/


/* ═══════════════════════════════════════════════════════════════
   HOW TO USE:
   
   1. Find the section you want to change
   2. Uncomment the block (remove the opening /* and closing *​/)
   3. Change the colour value
   4. Save this file
   5. Ctrl+Shift+R in browser (hard refresh)
   
   Each block is commented out so the page looks exactly like
   the original until you deliberately change something.
   ═══════════════════════════════════════════════════════════════ */