/* ============================================================
   style-modern.css — Mavericks / WorldResearch Public Site
   v2 — light, card-based redesign matching test.html (team page)
   Brand: red -> blue gradient accents, white rounded cards,
   soft shadows, Segoe UI. Overrides old classes ONLY — no HTML
   changes needed. Loaded LAST in includes/header.php so every
   page that includes header.php picks this up automatically.

   NOTE: kept conservative on widths/floats so existing
   side-by-side box rows (.product / .video / .high_light on
   the homepage) don't reflow or break — only color, type,
   radius, and shadow are restyled.
   ============================================================ */

:root{
  --red:    #A40D12;
  --red-dark:#7d090e;
  --blue:   #1e40af;
  --gold:   #f59e0b;
  --border: #e2e8f0;
  --dgray:  #6b7280;
  --ink:    #222;
  --bg:     #f4f6fb;
  --radius: 12px;
  --shadow: 0 2px 12px rgba(0,0,0,.07);
  --shadow-md: 0 6px 28px rgba(0,0,0,.13);
}

/* ── BASE ─────────────────────────────────────────────── */
body{
  background: var(--bg) !important;
  font-family: 'Segoe UI', Arial, Helvetica, sans-serif !important;
  color: var(--ink) !important;
}
a{ color: var(--red); }
img{ max-width: 100%; height: auto; }

/* ── TYPOGRAPHY ───────────────────────────────────────── */
h1, .heading{
  color: var(--red) !important;
  font-family: 'Segoe UI', Arial, sans-serif !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  text-shadow: none !important;
  margin: 0 0 10px 0 !important;
  padding: 0 0 8px !important;
  border-bottom: 3px solid var(--blue);
  display: inline-block;
}
h2, h3, h4{
  color: var(--blue) !important;
  font-family: 'Segoe UI', Arial, sans-serif !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  margin: 18px 0 8px 0 !important;
}
h2{ font-size: 18px !important; }
h3{ font-size: 15px !important; }
h4{ font-size: 13.5px !important; }

p{
  color: #444 !important;
  font-family: 'Segoe UI', Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  word-spacing: normal !important;
}
.contul, .cont{
  color: #444 !important;
  font-family: 'Segoe UI', Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}
p ul li{ color: #444 !important; }

/* ── TOP BAR ──────────────────────────────────────────── */
.top{
  background: #fff !important;
  border-bottom: 1px solid var(--border) !important;
}
.toplinkes{
  color: var(--blue) !important;
  font-weight: 600 !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
}
.toplinkes:hover{
  background: var(--red) !important;
  color: #fff !important;
}

/* ── MAIN NAV (#nav) — keep red bar, just clean it up ────── */
.headertab{
  background: linear-gradient(135deg, var(--red) 0%, var(--blue) 100%) !important;
  filter: none !important;
}
#nav{
  background: transparent !important;
  text-shadow: none !important;
}
#nav a{
  background-color: transparent !important;
  color: rgba(255,255,255,.9) !important;
  font-weight: 700 !important;
}
#nav a:hover{
  background-color: rgba(0,0,0,.18) !important;
  color: #fff !important;
}
#nav ul{
  background: #fff !important;
  box-shadow: var(--shadow-md);
  border-radius: 0 0 10px 10px;
}
#nav li ul a{
  background-color: #fff !important;
  color: var(--blue) !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--border);
}
#nav li ul a:hover{
  background-color: var(--bg) !important;
  color: var(--red) !important;
}

/* ── PAGE BACKGROUND ──────────────────────────────────── */
.centre{ background: var(--bg) !important; }

/* ── BREADCRUMB ───────────────────────────────────────── */
.path{
  color: var(--dgray) !important;
  font-weight: 600 !important;
}
.path:hover{ color: var(--red) !important; }

/* ── CONTENT CARD (services_solution / itcontent etc.) ──── */
.services_solution, .itcontent, .corporate, .product_content{
  background: #fff !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  padding: 26px 30px !important;
  margin-top: 14px !important;
}

/* ── BOX CARDS (homepage product/video/highlight tiles) ──
   Their shared row-wrappers are switched to flexbox with
   align-items:stretch so every box in a row matches the
   tallest one, regardless of how much text each has. ── */
.feilds, .request_box, .product_banner_outer, .itbannerbox{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 16px !important;
  width: 100% !important;
  height: auto !important;
}
.product, .video, .video1, .high_light, .requestform, .it_btn{
  background: #fff !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  transition: box-shadow .2s, transform .2s;
  height: auto !important;
  min-height: 290px;
  display: flex !important;
  flex-direction: column !important;
}
.product:hover, .video:hover, .video1:hover, .high_light:hover{
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-3px);
}
.highlight_heading{ color: var(--blue) !important; font-weight: 700 !important; text-shadow:none !important; }
.highlight_detail{ color: var(--dgray) !important; }
.request_heading{ color: var(--red) !important; text-shadow: none !important; }

/* ── FORM FIELDS ──────────────────────────────────────── */
.textfield, .textfield1, .textfield2, .textfield3, .textfield4, .textfield41{
  border: 1.5px solid var(--border) !important;
  border-radius: 8px !important;
  font-family: 'Segoe UI', Arial, sans-serif !important;
  color: var(--ink) !important;
  background: #fff !important;
}
.textfield:focus, .textfield1:focus, .textfield2:focus,
.textfield3:focus, .textfield4:focus, .textfield41:focus{
  border-color: var(--blue) !important;
  outline: none;
}

/* ── BUTTONS / CTA LINKS ──────────────────────────────── */
.more_link, .more_link1, .contenttab, .talktous{
  background: linear-gradient(135deg, var(--red) 0%, var(--blue) 100%) !important;
  background-image: linear-gradient(135deg, var(--red) 0%, var(--blue) 100%) !important;
  filter: none !important;
  color: #fff !important;
  border-radius: 20px !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  transition: opacity .15s, transform .15s;
}
.more_link:hover, .more_link1:hover, .contenttab:hover, .talktous:hover{
  opacity: .9;
  color: #fff !important;
  transform: translateY(-1px);
}
.talktousbox{
  background: #fff !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius) !important;
}

/* ── SIDE LINKS ───────────────────────────────────────── */
.sidelink{ color: var(--blue) !important; font-weight: 600 !important; }
.sidelink:hover{ color: var(--red) !important; }

/* ── FOOTER — same red→blue gradient as nav/buttons ────────
   (colors only — font-size left exactly as the old CSS set it) */
.footer{
  background: linear-gradient(135deg, var(--red) 0%, var(--blue) 100%) !important;
  filter: none !important;
}
.footer_heading{
  background: transparent !important;
  border: none !important;
  text-shadow: none !important;
}
.footer_link_heading{
  color: #fff !important;
  text-shadow: none !important;
  font-weight: 700 !important;
}
.footer_link, .link_area ul li{
  color: rgba(255,255,255,.75) !important;
  text-shadow: none !important;
}
.footer_link:hover{ color: #fff !important; }
.bottom_links{ color: rgba(255,255,255,.85) !important; }
.bottom_links:hover{ color: #fff !important; text-decoration: underline; }
.fty{ color: rgba(255,255,255,.7) !important; }

/* ── SITEMAP ──────────────────────────────────────────── */
.sitemaplinks{ color: var(--blue) !important; }
.sitemaplinks:hover{ color: var(--red) !important; }

/* ══════════════════════════════════════════════════
   RESPONSIVE (light touch only)
══════════════════════════════════════════════════ */
@media (max-width: 880px){
  h1, .heading{ font-size: 21px !important; }
  .services_solution, .itcontent, .corporate, .product_content{
    padding: 16px !important;
  }
}