/* =========================================
   GateMatrix base theme
   ========================================= */

:root {
  --navy: #0A192F;
  --blue: #1E90FF;
  --blue-soft: #4da6ff;
  --text-muted: rgba(255, 255, 255, 0.75);

  /* n8n chat theme */
  --chat--color--primary: #0a192f;
  --chat--color--primary-shade-50: #1e90ff;
  --chat--color--primary--shade-100: #1e90ff;
  --chat--color--secondary: #4da6ff;
  --chat--color-secondary-shade-50: #1a8cff;
  --chat--color-white: #ffffff;
  --chat--color-light: #f2f8ff;
  --chat--color-dark: #0d1b2a;
  --chat--header--background: #0a192f; 
  --chat--header--color: #1e90ff;
  --chat--message--bot--background: var(--chat--color-white);
  --chat--message--bot--color: var(--chat--color-dark);
  --chat--message--user--background: #1e90ff;
  --chat--message--user--color: #ffffff;
  --chat--toggle--background: var(--chat--color--primary);
  --chat--toggle--hover--background: var(--chat--color--primary-shade-50);
  --chat--toggle--active--background: var(--chat--color--primary--shade-100);
}

/* ===== Reset-ish ===== */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--navy);
  color: #ffffff;
}

/* Links */
a {
  color: var(--blue);
  text-decoration: none;
}
a:hover {
  color: var(--blue-soft);
}

/* =========================================
   Layout helpers
   ========================================= */

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.min-h-screen { min-height: 100vh; }

.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }

.top-0 { top: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.top-\[64px\] { top: 64px; }

.z-10 { z-index: 10; }
.z-50 { z-index: 50; }
.z-\[999\] { z-index: 999; }

.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }

.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }

.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }

.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2.5rem; }

.mx-auto { margin-left: auto; margin-right: auto; }

.block { display: block; }
.inline-block { display: inline-block; }
.hidden { display: none; }

.overflow-hidden { overflow: hidden; }

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* RTL tweak */
html[dir="rtl"] .text-left  { text-align: right; }
html[dir="rtl"] .text-right { text-align: left; }

/* =========================================
   Spacing utilities
   ========================================= */

.mt-2  { margin-top: 0.5rem; }
.mt-4  { margin-top: 1rem; }
.mt-6  { margin-top: 1.5rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-16 { margin-top: 4rem; }

.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }

.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }

.py-2  { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3  { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4  { padding-top: 1rem; padding-bottom: 1rem; }
.py-6  { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }

/* vertical spacing between children */
.space-y-4  > * + * { margin-top: 1rem; }
.space-y-16 > * + * { margin-top: 4rem; }

/* =========================================
   Size utilities
   ========================================= */

.w-5  { width: 1.25rem; }
.h-5  { height: 1.25rem; }
.w-8  { width: 2rem; }
.h-8  { height: 2rem; }
.w-10 { width: 2.5rem; }
.h-10 { height: 2.5rem; }
.w-48 { width: 12rem; }

.w-full { width: 100%; }

.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }

/* =========================================
   Typography
   ========================================= */

.text-sm { 
  font-size: 0.8rem;       /* slightly small but readable */
  line-height: 1.45;
}

.text-lg { 
  font-size: 1rem;
  line-height: 1.55;
}

.text-xl { 
  font-size: 1.25rem;
  line-height: 1.45;
}

.text-2xl { 
  font-size: 1.5rem;
  line-height: 1.35;
}

.text-3xl { 
  font-size: 1.85rem;
  line-height: 1.25;
}

.text-4xl { 
  font-size: 2.25rem;
  line-height: 1.2;
}

.text-5xl { 
  font-size: 2.75rem;
  line-height: 1.15;
}

.text-6xl { 
  font-size: 3.25rem;
  line-height: 1.1;
}


/* font weight */
.font-light     { font-weight: 250; }
.font-medium    { font-weight: 450; }
.font-semibold  { font-weight: 550; }
.font-extrabold { font-weight: 750; }

/* letter-spacing */
.tracking-tight   { letter-spacing: -0.02em; }
.tracking-widest  { letter-spacing: 0.25em; }

/* line height */
.leading-relaxed { line-height: 1.7; }

/* text colors */
.text-white       { color: #ffffff; }
.text-white\/70   { color: rgba(255, 255, 255, 0.7); }
.text-white\/80   { color: rgba(255, 255, 255, 0.8); }
.text-white\/90   { color: rgba(255, 255, 255, 0.9); }
.text-\[var\(--blue\)\] { color: var(--blue); }

/* Backgrounds */
.bg-\[\#0A192F\]      { background-color: #0A192F; }
.bg-\[\#0A192F\]\/70  { background-color: rgba(10, 25, 47, 0.70); }
.bg-\[\#0A192F\]\/95  { background-color: rgba(10, 25, 47, 0.95); }
.bg-\[var\(--blue\)\] { background-color: var(--blue); }
.bg-white\/10         { background-color: rgba(255, 255, 255, 0.10); }

/* Borders + radius */
.border           { border-width: 1px; border-style: solid; }
.border-t         { border-top-width: 1px; border-top-style: solid; }
.border-b         { border-bottom-width: 1px; border-bottom-style: solid; }
.border-white\/10 { border-color: rgba(255, 255, 255, 0.10); }
.border-white\/20 { border-color: rgba(255, 255, 255, 0.20); }

.rounded     { border-radius: 0.25rem; }
.rounded-lg  { border-radius: 0.5rem; }
.rounded-xl  { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }

/* Shadows */
.shadow-lg {
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

/* Object fit */
.object-contain { object-fit: contain; }
.object-cover   { object-fit: cover; }

/* =========================================
   Transitions / hover
   ========================================= */

.transition      { transition: all 0.15s ease; }
.transition-all  { transition: all 0.2s ease; }

.hover\:bg-white\/10:hover { background-color: rgba(255, 255, 255, 0.10); }
.hover\:text-white:hover   { color: #ffffff; }

.focus\:outline-none:focus { outline: none; }

/* =========================================
   Responsive utilities (md breakpoint)
   ========================================= */

@media (min-width: 768px) {
  .md\:flex       { display: flex !important; }
  .md\:hidden     { display: none !important; }
  .md\:items-center { align-items: center; }
  .md\:flex-row   { flex-direction: row; }

  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .md\:text-3xl { font-size: 1.875rem; line-height: 1.3; }
  .md\:text-5xl { font-size: 3rem; line-height: 1.1; }
  .md\:text-6xl { font-size: 3.75rem; line-height: 1.05; }
  .md\:text-7xl { font-size: 4.5rem; line-height: 1.05; }
}

/* =========================================
   Hero background
   ========================================= */

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
  pointer-events: none;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: rgba(10, 25, 47, 0.55);
}

.hero-tint {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 10%, rgba(30, 144, 255, 0.25), transparent 55%);
}

/* Make first banner taller on inner pages */
body > section:first-of-type {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

/* =========================================
   Navbar styles
   ========================================= */

.backdrop-blur { backdrop-filter: blur(16px); }

header {
  background: rgba(10, 25, 47, 0.70);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(16px);
}

header nav {
  font-size: 0.95rem;
}

header nav a {
  color: rgba(255, 255, 255, 0.90);
  font-weight: 500;
  padding: 0.25rem 0;
  line-height: 1.2;
}

header nav a:hover {
  color: #ffffff;
}

/* logo text (G/M blue from inline span, rest white) */
header > .container > .flex > a:first-child {
  color: #ffffff;
}

/* =========================================
   Dropdown menu (desktop)
   ========================================= */

.nvx-nav-parent {
  position: relative;
  z-index: 1000;
  display: inline-block;
}

.nvx-nav-sub {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);  /* small gap below navbar */
  margin-top: 0;
  visibility: hidden;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease;
  background: #0A192F;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  width: 14rem;
  padding: 8px;
  z-index: 900;
  pointer-events: none;
}

.nvx-nav-sub::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -8px;
  height: 8px;
}

.nvx-nav-parent:hover .nvx-nav-sub {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.nvx-nav-sub a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.9);
}

.nvx-nav-sub a:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* =========================================
   Mobile menu
   ========================================= */

.nvx-mm {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .25s ease, opacity .2s ease;
}

.nvx-mm.open {
  max-height: 80vh;
  opacity: 1;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* select in backup page */
#nvx_backup_freq option {
  background-color: #0A192F;
  color: white;
}

/* =========================================
   Blog table responsive (Ali)
   ========================================= */

@media (max-width: 768px) {

  table[width="1080"][cellpadding="4"][align="center"] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0.5rem auto !important;
    border-radius: 16px !important;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0 !important;
  }

  img[height="175"][width="1080"] {
    width: 100% !important;
    height: auto !important;
    max-height: 240px;
    object-fit: cover;
    display: block;
    border-radius: 12px;
    margin: 0 auto;
  }

  table[width="1080"] td,
  table[width="1080"] th {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    text-align: left;
  }

  table[width="1080"] td[width="80%"],
  table[width="1080"] td[width="20%"] {
    width: 100% !important;
  }

  table[width="1080"] td[width="20%"] {
    padding-top: .75rem !important;
    text-align: center !important;
  }

  img[height="210"][width="210"] {
    width: 64% !important;
    max-width: 240px;
    height: auto !important;
    display: block;
    margin: 0.6rem auto;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(0,0,0,.28);
  }

  table[width="1080"] tr[height="60"] { height: auto !important; }

  h1.text-3xl.font-extrabold {
    font-size: 1.45rem;
    line-height: 1.2;
    margin: 0.6rem 0;
  }

  h2.text-2xl.font-semibold {
    font-size: 1.05rem;
    margin-top: .6rem;
  }

  table[width="1080"] p {
    font-size: 0.95rem;
    line-height: 1.6;
  }

  table[width="1080"] li.flex {
    display: flex;
    gap: 0.6rem;
    margin: 0.45rem 0;
    align-items: flex-start;
  }
}

/* =========================================
   Footer + social icons
   ========================================= */

footer {
  background: rgba(255, 255, 255, 0.02);
}

.nvx-social .si {
  background: transparent;
  border: 0;
  padding: 6px;
  border-radius: 10px;
  cursor: pointer;
}

.nvx-social .si svg {
  width: 22px;
  height: 22px;
  color: rgba(255, 255, 255, 0.7);
  transition: transform .25s ease, color .25s ease, opacity .25s ease;
  opacity: .9;
}

.nvx-social .si svg path,
.nvx-social .si svg rect,
.nvx-social .si svg circle {
  fill: currentColor;
}

.nvx-social .si:hover svg {
  color: #00E5FF;
  transform: scale(1.12);
  opacity: 1;
}

/* =========================================
   Services grid (services_all.php)
   ========================================= */

.nvx-container { width:1200px; margin:0 auto; padding:24px; }
.nvx-hero { text-align:center; margin:40px 0 24px; }
.nvx-title { font-size:clamp(28px,3.2vw,44px); font-weight:800; }
.nvx-sub { color:#9CA3AF; }

.nvx-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:18px;
}

.nvx-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.07));
  border:1px solid rgba(255,255,255,0.15);
  border-radius:20px;
  overflow:hidden;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
  min-width: 180px ;
}
.nvx-card:hover {
  transform:translateY(-4px);
  border-color:#2b3b63;
  box-shadow:0 12px 24px rgba(0,0,0,.25);
}

.nvx-card-media img { width:100%; height:160px; object-fit:cover; display:block; }
.nvx-card-body { padding:16px; }
.nvx-badge {
  display:inline-block;
  font-size:12px;
  color:#cbd5e1;
  background:#ffffff14;
  border:1px solid #ffffff22;
  padding:4px 8px;
  border-radius:10px;
  margin-bottom:8px;
}
.nvx-card h3 { margin:8px 0 6px; font-size:20px; }
.nvx-card p { color:#cbd5e1; margin-bottom:12px; }

.nvx-card-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.nvx-btn {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 12px;
  background: #1E90FF;
  color: #ffffff !important;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid transparent;
  transition:
    background-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}
.nvx-btn:hover {
  background: #0f6ad6;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
  transform: translateY(-1px);
}
.nvx-btn.nvx-outline {
  background: transparent;
  border: 1px solid #2b3b63;
  color: #cbd5e1;
}
.nvx-btn.nvx-outline:hover {
  background: rgba(30,144,255,0.10);
  border-color: #1E90FF;
  color: #1E90FF;
}

/* =========================================
   Service detail page (services.php)
   ========================================= */

/* Intro section */
#intro {
  max-width: 900px;
  margin: 0 auto 2.5rem;
}
#intro h2 { margin-bottom: 0.75rem; }

/* Value props cards */
#value .rounded-2xl {
  padding: 28px !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.07));
  border-color: rgba(255,255,255,0.14);
  box-shadow: 0 12px 24px rgba(0,0,0,0.35);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
#value .rounded-2xl:hover {
  transform: translateY(-4px);
  border-color: #2b3b63;
  box-shadow: 0 16px 30px rgba(0,0,0,0.45);
}
#value .rounded-2xl h3 { margin-bottom: 12px; }
#value .rounded-2xl p { line-height: 1.7; }

/* =========================================
   Packages section (pricing cards)
   ========================================= */

#packages .rounded-2xl {
  padding: 28px !important;

  border-radius: 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
#packages .rounded-2xl:hover {
  transform: translateY(-4px);
  border-color: #2b3b63;
  box-shadow: 0 16px 30px rgba(0,0,0,0.45);
}

/* headings + subtitles */
#packages h3 { margin-bottom: 6px; }
#packages p.text-white\/70 {
  margin-bottom: 14px;
  font-size: 0.95rem;
}

/* price line */
#packages .text-4xl {
  margin-top: 10px;
  margin-bottom: 20px;
  font-size: 2.2rem;
  line-height: 1.1;
  letter-spacing: 0.03em;
}

/* feature list – remove bullets, add single blue checkmark */
#packages ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
#packages ul li {
  position: relative;
  padding-left: 28px;
  line-height: 1.6;
  font-size: 1rem;
  margin-bottom: 8px;
  color: rgba(255,255,255,0.85);
}
#packages ul li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0.15em;
  color: #1E90FF;
  font-weight: 900;
  font-size: 1.1rem;
}

/* CTA buttons inside package cards */
#packages a.inline-block {
  margin-top: 16px;
  display: inline-block;
  padding: 12px 20px !important;
  border-radius: 12px;
  background: #1E90FF;
  color: white;
  font-weight: 600;
  transition: 0.2s;
}
#packages a.inline-block:hover {
  background: #0f6ad6;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
  transform: translateY(-2px);
}

/* “What you get” cards share ticks style */
#what-you-get ul {
  list-style:none;
  padding-left:0;
  margin:0;
}
#what-you-get ul li {
  position:relative;
  padding-left:28px;
  line-height:1.6;
  margin-bottom:8px;
}
#what-you-get ul li::before {
  content:"✔";
  position:absolute;
  left:0;
  top:0.15em;
  color:#1E90FF;
  font-weight:900;
}

/* Bottom contact CTA section */
/* Fine-tune bottom CTA spacing */
section.py-12.text-center {
  background: radial-gradient(circle at top,
               rgba(30,144,255,0.18),
               transparent 55%);
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-top: 2.5rem;

  /* custom padding just for this section */
  padding-top: 3.5rem;
  padding-bottom: 4rem;
}

/* keep content nicely centered and not too wide */
section.py-12.text-center .container {
  max-width: 800px;
  margin: 0 auto;
}

/* a bit more air above the button */
section.py-12.text-center p {
  margin-bottom: 1.75rem !important;
}

/* ==== FIX DOUBLE TICKS ON PACKAGES ==== */

/* use the typed ✓ in the text, not a pseudo bullet */
#packages ul li,
#what-you-get ul li {
  padding-left: 0;                      /* no extra space for a fake icon */
}

/* completely disable our custom ::before checkmarks */
#packages ul li::before,
#what-you-get ul li::before {
  content: none !important;
}

/* style the first character (the typed ✓) to look like a nice bullet */
#packages ul li::first-letter,
#what-you-get ul li::first-letter {
  color: #1E90FF;
  font-weight: 900;
  padding-right: 4px;                   /* small gap between ✓ and text */
}
/* Make each package card a flex column */
#packages .rounded-2xl {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Push the button to the bottom */
#packages .rounded-2xl a.inline-block {
  margin-top: auto !important;
}

/* Ensure the UL takes only needed space */
#packages ul {
  flex-grow: 0;
}
#packages .rounded-2xl > * {
  margin-bottom: 1rem;
}

#packages .rounded-2xl a.inline-block {
  margin-bottom: 0; /* button sits at the bottom with no extra gap */
}
/* Center the button inside each package card */
#packages .rounded-2xl {
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: center; /* centers button horizontally */
}

/* Keep the list aligned left while button is centered */
#packages ul,
#packages ul li,
#packages p,
#packages h3 {
    width: 100%;
}

/* Button pinned to bottom AND centered */
#packages .rounded-2xl a.inline-block {
    margin-top: auto !important;
    align-self: center !important;
    width: 75%;             /* matches your screenshot */
    text-align: center;
}
/* PACKAGE NAME */
#packages h3 {
    font-size: 2rem !important;   /* bigger title */
    font-weight: 700 !important;
    text-align: center !important;
    margin-bottom: 0.5rem !important;
    color: #ffffff;
}

/* SUBTITLE UNDER PACKAGE NAME */
#packages p.text-white\/70 {
    text-align: center !important;
    font-size: 0.95rem !important;
    color: rgba(255,255,255,0.75) !important;
    margin-bottom: 1.2rem !important;
}

/* "Starting from" LABEL */
#packages .text-4xl {
    font-size: 1.7rem !important;     /* was too big */
    line-height: 1.25 !important;
    font-weight: 800;
    text-align: center !important;
    margin-bottom: 1.5rem !important;
}

/* OPTIONAL: Price number slightly bigger than text */
#packages .text-4xl strong {
    font-size: 1.9rem !important;
}
/* =========================================
   OUR PROCESS – calm everything down
   ========================================= */

/* Try both ids in case your section id differs */
#process,
#our-process {
  max-width: 1200px;
  margin: 0 auto 3rem;
}

/* Cards in Our Process */
#process .rounded-2xl,
#our-process .rounded-2xl {
  padding: 22px 24px !important;
  border-radius: 18px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.30);
}

/* Stage title: a bit smaller than before */
#process h3,
#our-process h3 {
  font-size: 1.4rem !important;        /* was ~1.7–1.8rem */
  line-height: 1.35 !important;
  margin-bottom: 0.75rem !important;
}

/* Body text: comfortable, not massive */
#process p,
#our-process p {
  font-size: 0.96rem !important;
  line-height: 1.7 !important;
}
/* =========================================
   Global card sizing – makes OUR PROCESS calmer
   ========================================= */

/* Default card titles (Our Process, value cards, etc.) */
.rounded-2xl h3 {
  font-size: 1.35rem !important;   /* smaller than before */
  line-height: 1.4 !important;
  margin-bottom: 0.75rem;
}

/* Default card body text */
.rounded-2xl p {
  font-size: 0.96rem !important;
  line-height: 1.7 !important;
}
/* Keep Packages titles a bit stronger than the default */
#packages .rounded-2xl h3 {
  font-size: 1.55rem !important;
  line-height: 1.35 !important;
}
/* =========================================
   OUR PROCESS + all generic info cards
   Add proper padding + spacing
   ========================================= */

/* Add padding to all rounded-2xl cards EXCEPT packages */
.rounded-2xl:not(#packages .rounded-2xl) {
    padding: 28px 32px !important;     /* nice safe breathing room */
}

/* Add spacing under headings */
.rounded-2xl:not(#packages .rounded-2xl) h3 {
    margin-bottom: 14px !important;
}

/* Improve paragraph readability */
.rounded-2xl:not(#packages .rounded-2xl) p {
    line-height: 1.7 !important;
    margin-bottom: 10px;
}

/* Optional: add spacing between Steps in Our Process */
#what-you-get .rounded-2xl,
#intro .rounded-2xl,
#value .rounded-2xl {
    padding: 32px !important;
}


/* The little arrow on the right */
.accordion-button::after {
  filter: invert(1) opacity(0.8);   /* make it white-ish */
}

/* When opened, rotate the arrow slightly stronger */
.accordion-button:not(.collapsed)::after {
  transform: rotate(-180deg);
  filter: invert(61%) sepia(86%) saturate(3380%) hue-rotate(192deg) brightness(101%) contrast(102%);
}

/* Answer body */
.accordion-body {
  padding: 14px 22px 18px 22px !important;
  font-size: 0.97rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
  background: rgba(10,25,47,0.98);
}

/* Make the outer table full-width and invisible */
#textview > table {
  width: 100% !important;
  border-collapse: collapse;
}

#textview > table > tbody > tr > td {
  padding: 0;
  border: 0;
}

/* Main FAQ section container */
/* FORCE FIX — Bottom CTA ("Tell us about your project") */
section:last-of-type {
    padding-top: 4rem !important;
    padding-bottom: 5rem !important;
}

/* Text spacing */
section:last-of-type h2,
section:last-of-type .text-4xl,
section:last-of-type .md\:text-5xl {
    margin-bottom: 1rem !important;
}

section:last-of-type p {
    margin-bottom: 2rem !important;
}

/* Center everything nicely */
section:last-of-type {
    text-align: center !important;
}
/* === Services page CTA: "Tell us about your project" === */
section.py-12.text-center {
  /* adjust these to taste */
  padding-top: 2rem !important;   /* less empty space above */
  padding-bottom: 3rem !important;/* comfy but not huge bottom */
}

/* tighten spacing between heading, text, and button */
section.py-12.text-center h2 {
  margin-bottom: 0.75rem !important;
}

section.py-12.text-center p {
  margin-bottom: 1.25rem !important;
}

/* just in case – keep everything nicely centered */
section.py-12.text-center .container {
  text-align: center;
}
/* Contact Us button (services CTA) */
section.py-12.text-center a.inline-block {
    padding-left: 5rem !important;   /* wider left */
    padding-right: 5rem !important;  /* wider right */
    padding-top: 1rem !important;      /* vertical stays clean */
    padding-bottom: 1rem !important;
    font-size: 1.15rem !important;
    border-radius: 14px !important;    /* prettier look */
}
/* Contact Us CTA button at the bottom of services page */
section.py-12.text-center a.inline-block {
    padding-left: 5rem !important;
    padding-right: 5rem !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;

    border-radius: 14px !important;
    background: #1E90FF !important;      /* same blue */
    color: #ffffff !important;           /* always white text */
    font-weight: 600;
    border: 1px solid transparent;

    box-shadow: 0 6px 16px rgba(0,0,0,0.35);
    transition:
        background-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

/* Hover animation – match Get a Quote */
section.py-12.text-center a.inline-block:hover {
    background: #0f6ad6 !important;      /* darker blue on hover */
    color: #ffffff !important;           /* still white */
    box-shadow: 0 10px 24px rgba(0,0,0,0.45);
    transform: translateY(-2px);
}

/* =========================================
   MOBILE NAV FINAL FIX
   ========================================= */

@media (max-width: 768px) {

  /* HAMBURGER – no white box, nice outline */
  #hamburger {
    background: transparent !important;
    border: 1px solid rgba(148,163,184,0.75) !important;
    border-radius: 15px !important;
    color: #ffffff !important;
    padding: 6px 18px !important;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
  }

  #hamburger:hover {
    background: rgba(30,144,255,0.25) !important;   /* soft blue glow */
    border-color: rgba(255,255,255,0.85) !important;
  }

  /* DROPDOWNS: "Our Services" / "Contact Us"
     (they’re <select> / .form-select in the header) */
  header select,
  header .form-select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;

    background-color: rgba(10,25,47,0.96) !important;  /* dark navy */
    color: #ffffff !important;
    border: 1px solid rgba(148,163,184,0.85) !important;
    border-radius: 999px !important;                   /* pill shape */
    padding: 8px 34px 8px 14px !important;
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
  }

  /* custom white arrow to replace the default ▼ */
  header select,
  header .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='white'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5 1.4 1.4-5.9 5.9-5.9-5.9z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
  }

  /* hover / focus: same vibe as other menu items */
  header select:hover,
  header .form-select:hover,
  header select:focus,
  header .form-select:focus {
    background-color: rgba(30,144,255,0.25) !important;  /* blue tint */
    border-color: rgba(255,255,255,0.9) !important;
    outline: none !important;
  }

  /* options list background when opened */
  header select option,
  header .form-select option {
    background-color: #0a192f;
    color: #e5e7eb;
  }
}
/* =========================================
   FINAL MOBILE DROPDOWN FIX
   (Our Services / Contact Us)
   ========================================= */
@media (max-width: 768px) {

  /* hit ANY select / .form-select on mobile */
  select,
  .form-select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;

    background-color: rgba(10,25,47,0.96) !important;   /* dark navy */
    color: #ffffff !important;
    border: 1px solid rgba(148,163,184,0.85) !important;
    border-radius: 999px !important;                    /* pill */
    padding: 8px 34px 8px 14px !important;
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
  }

  /* custom white arrow instead of the grey ▼ */
  select,
  .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='white'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5 1.4 1.4-5.9 5.9-5.9-5.9z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
  }

  /* hover / focus = same vibe as other menu items */
  select:hover,
  .form-select:hover,
  select:focus,
  .form-select:focus {
    background-color: rgba(30,144,255,0.25) !important; /* soft blue tint */
    border-color: rgba(255,255,255,0.9) !important;
    outline: none !important;
  }

  /* the options list when opened */
  select option,
  .form-select option {
    background-color: #0a192f;
    color: #e5e7eb;
  }
}
/* =========================================
   ULTIMATE MOBILE MENU FIX
   Our Services / Contact Us dropdown pills
   ========================================= */
@media (max-width: 768px) {

  /* Kill Bootstrap look on any button-ish thing in mobile menu */
  #mobileMenu .btn,
  #mobileMenu .btn-default,
  #mobileMenu .dropdown-toggle,
  #mobileMenu button,
  #mobileMenu select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;

    background-color: rgba(10, 25, 47, 0.96) !important;  /* navy */
    color: #ffffff !important;
    border-radius: 999px !important;                      /* pill */
    border: 1px solid rgba(148, 163, 184, 0.85) !important;
    padding: 8px 16px !important;
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
  }

  /* Remove any weird gradient / background image Bootstrap might add */
  #mobileMenu .btn,
  #mobileMenu .btn-default,
  #mobileMenu .dropdown-toggle {
    background-image: none !important;
  }

  /* Hover / focus – same vibe as other menu links */
  #mobileMenu .btn:hover,
  #mobileMenu .btn-default:hover,
  #mobileMenu .dropdown-toggle:hover,
  #mobileMenu button:hover,
  #mobileMenu select:hover,
  #mobileMenu .btn:focus,
  #mobileMenu .btn-default:focus,
  #mobileMenu .dropdown-toggle:focus,
  #mobileMenu button:focus,
  #mobileMenu select:focus {
    background-color: rgba(30, 144, 255, 0.25) !important; /* soft blue tint */
    border-color: rgba(255, 255, 255, 0.9) !important;
    outline: none !important;
  }

  /* If they use the little ▼ arrow via ::after, make it white */
  #mobileMenu .dropdown-toggle::after {
    border-top-color: #ffffff !important;
  }
}
/* =========================================
   THE FINAL MOBILE DROPDOWN FIX
   (Our Services / Contact Us)
   ========================================= */
@media (max-width: 768px) {

  /* Force the dropdown buttons to behave like normal menu items */
  #mobileMenu .dropdown-toggle,
  #mobileMenu button.dropdown-toggle,
  #mobileMenu .btn,
  #mobileMenu button,
  #mobileMenu .btn-default {
      background: transparent !important;
      color: #ffffff !important;
      border: none !important;
      border-radius: 0 !important;

      width: 100% !important;
      text-align: left !important;

      padding: 10px 4px !important;
      font-size: 1rem !important;
      font-weight: 400 !important;

      box-shadow: none !important;
  }

  /* Remove the arrow Bootstrap adds */
  #mobileMenu .dropdown-toggle::after {
      border: none !important;
      content: "▾" !important;              /* clean white arrow */
      font-size: 0.85rem;
      margin-left: 6px;
      color: #ffffff !important;
  }

  /* Hover same as menu links */
  #mobileMenu .dropdown-toggle:hover,
  #mobileMenu .btn:hover,
  #mobileMenu button:hover {
      background: rgba(255,255,255,0.06) !important;
      color: #ffffff !important;
  }
}
/* =========================================
   DESKTOP NAVBAR HOVER ANIMATION
   ========================================= */

@media (min-width: 769px) {

  /* Base link style */
  header nav a {
    display: inline-block;
    transition: color 0.18s ease, transform 0.18s ease;
  }

  /* Hover effect — slight zoom + color shift */
  header nav a:hover {
    color: #1E90FF !important;
    transform: translateY(-2px);   /* subtle lift */
  }

  /* Optional: active/focus */
  header nav a:focus-visible {
    outline: 2px solid #1E90FF;
    outline-offset: 4px;
  }
}
/* =========================================
   BLOG CARDS – make all three the same height
   ========================================= */

.blog-card {
  height: auto;
  min-height: 300px;
          /* tweak 220–260 until it feels right */
}

.blog-card table {
  height: 100%;
  min-height: 260px;
}
/* =========================================
   CONTACT FORM – submit button
   ========================================= */

/* Base style */
input[type="submit"],
button[type="submit"] {
  background: var(--blue, #1E90FF);
  color: #ffffff;                     /* white text */
  border: none;
  border-radius: 16px;
  padding: 0.65rem 2.5rem;
  font-size: 0.98rem;
  font-weight: 600;
  cursor: pointer;

  /* smooth animation */
  transition:
    background-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.15s ease;
}

/* Hover */
input[type="submit"]:hover,
button[type="submit"]:hover {
  background: #3aa0ff;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45);
  transform: translateY(-1px);
}

/* Pressed */
input[type="submit"]:active,
button[type="submit"]:active {
  transform: translateY(0);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.35);
}
/* =========================================
   LAYOUT – space before footer
   ========================================= */

footer {
  margin-top: 2.5rem;
  border-top: 1px solid rgba(255,255,255,0.10);
}
/* =========================================
   CONTACT PAGE – tighten vertical spacing
   ========================================= */

/* Smaller gap between H1 and first paragraph */
.container h1 + p,
main h1 + p {
  margin-top: 0.75rem !important;
}

/* Smaller gap between intro paragraph and the next block (table/form) */
p + table,
p + form {
  margin-top: 1rem !important;
}

/* =========================================
   FAQs PAGE – tighten vertical spacing
   ========================================= */

/* FAQ search input */
table[border="1"][cellpadding="8"] input[name="name1"] {
  color: #ffffff;                                   /* text */
  background-color: rgba(15, 23, 42, 0.95);         /* dark navy */
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.8);
  padding: 0.75rem 1.25rem;
}

/* placeholder */
table[border="1"][cellpadding="8"] input[name="name1"]::placeholder {
  color: rgba(148, 163, 184, 0.8);
}
/* FAQ search row layout */
table[border="1"][cellpadding="8"] {
  border: none;
  margin: 2rem auto 1.5rem;      /* center, add top/bottom space */
  max-width: 1100px;
  border-collapse: collapse;
}

table[border="1"][cellpadding="8"] td {
  border: none;
  color: #f9fafb;
  font-size: 0.95rem;
}

/* "Word :" label */
table[border="1"][cellpadding="8"] td:first-child {
  width: 90px;
  text-align: right;
  padding-right: 0.75rem;
}

/* middle cell with the input */
table[border="1"][cellpadding="8"] td:nth-child(2) {
  padding-right: 1.25rem;
}

/* right text ("Please enter the word(s)…") */
table[border="1"][cellpadding="8"] td:nth-child(3) {
  color: #9ca3af;
  line-height: 1.5;
}
/* Keep FAQ results area from collapsing & style it as one card */
#textview {
  display: block;
  min-height: 260px;   /* so footer doesn’t float if list is short/empty */
}

/* The table that wraps the <section id="faqs"> */
#textview table {
  margin: 0 auto 3rem;
  width: 100%;
  max-width: 1200px;
}

/* Main FAQs card */
#faqs {
  background: rgba(15, 23, 42, 0.98);
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2.2rem 2.5rem;
}

/* FAQs title – pull it towards the top */
#faqs h2 {
  text-align: center;
  font-size: 2.3rem;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

/* Individual Q/A blocks */
#faqs details {
  background: rgba(15, 23, 42, 0.9);
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  padding: 1rem 1.5rem;
}

#faqs details + details {
  margin-top: 0.75rem;
}

#faqs summary {
  cursor: pointer;
}
/* FAQs wrapper – no big background card */
#faqs {
  background: transparent;
  border: none;
  padding: 0 1rem 2rem;   /* just some side/bottom padding */
}
/* Individual FAQ card */
#faqs details {
  background: rgba(15,23,42,1);                    /* same navy tone */
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,0.4);
  overflow: hidden;                                /* keeps corners rounded */
  margin-bottom: 0.75rem;
}

/* Summary row (the clickable title) */
#faqs summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
}

/* Hide the native marker */
#faqs summary::-webkit-details-marker {
  display: none;
}

/* Table inside summary (your current markup) */
#faqs details table {
  width: 100%;
}

#faqs details td {
  color: #f9fafb;
}

/* Question row */
#faqs details tr:first-child td {
  font-weight: 600;
}

/* Answer row */
#faqs details tr:last-child td {
  padding-top: 0.75rem;
  padding-bottom: 0.5rem;
}
/* Individual FAQ card */
#faqs details {
  background: rgba(15,23,42,1);                    /* same navy tone */
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,0.4);
  overflow: hidden;                                /* keeps corners rounded */
  margin-bottom: 0.75rem;
}

/* Summary row (the clickable title) */
#faqs summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
}

/* Hide the native marker */
#faqs summary::-webkit-details-marker {
  display: none;
}

/* Table inside summary (your current markup) */
#faqs details table {
  width: 100%;
}

#faqs details td {
  color: #f9fafb;
}

/* Question row */
#faqs details tr:first-child td {
  font-weight: 600;
}

/* Answer row */
#faqs details tr:last-child td {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
/* FAQ card base */
#faqs details {
  transition:
    background-color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    transform .22s ease;
}

/* Hover effect (only when CLOSED, not when open) */
#faqs details:not([open]):hover {
  background: rgba(20, 28, 48, 1);
  border-color: rgba(148, 163, 184, 0.35);
  transform: translateY(-3px);             /* slight lift */
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

/* Hover effect when OPEN (slightly softer, not jumping) */
#faqs details[open] {
  background: rgba(20, 28, 48, 1);
  border-color: #1e90ff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
/* =========================================
   FAQ SEARCH PAGE (inside #textview)
   → make cards calm / non-animated
   ========================================= */

/* Base look for FAQ search results */
#textview #faqs details {
  background: rgba(15, 23, 42, 0.96);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: none;
  transform: none;
}

/* Disable hover “lift” and glow on the FAQ page */
#textview #faqs details:hover,
#textview #faqs details[open],
#textview #faqs details[open]:hover {
  background: rgba(15, 23, 42, 0.96);   /* same as normal */
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: none;
  transform: none;
}
/* =========================================
   FAQ PAGE – kill the hard-coded 700px height
   ========================================= */

/* The outer results table on faq.php */
table[width="90%"][align="center"] tr[height] {
    height: auto !important;
}

/* Let #textview size naturally */
#textview {
    min-height: 180px !important;
}
/* FAQ results area – give it some height so footer doesn’t float */
#textview {
  display: block;
  min-height: 180px;          /* adjust: 220–300px range usually looks nice */
  margin-top: 1.5rem;         /* little breathing room under the search row */
}
/* Main FAQ results table — ensure it always has height */
table[width="90%"][align="center"] {
  min-height: 260px !important;
  display: block !important;      /* allows min-height to work */
}

/* Remove the old forced height row */
table[width="90%"][align="center"] tr[height] {
  height: auto !important;
}

/* And #textview should remain visible but flexible */
#textview {
  min-height: 180px !important;
  display: block;
}
html, body {
  height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Your main content wrapper (all page bodies sit inside main) */
main {
  flex: 1 0 auto;
}

/* Footer always at the bottom, doesn’t stretch */
footer {
  flex-shrink: 0;
}

/* Careers form “card” */
main.container form[action="careers2.php"] table {
  max-width: 500px;
  min-width: 460px;
  margin: 0 auto;
  background: rgba(15, 23, 42, 0.96);
  border-radius: 18px;
  padding: 1.5rem 1.75rem;
  border-collapse: separate;
  border-spacing: 0.35rem 0.6rem;

  /* subtle card border */
  border: 1px solid rgba(255,255,255,0.25);
}

/* cells – no borders */
main.container form[action="careers2.php"] table th,
main.container form[action="careers2.php"] table td {
  border: none;
}

/* Labels */
main.container form[action="careers2.php"] table th {
  color: #e5e7eb;
  font-weight: 500;
  padding-right: 0.75rem;
  white-space: nowrap;
}

/* Inputs */
main.container form[action="careers2.php"] table input[type="text"],
main.container form[action="careers2.php"] table input[type="email"],
main.container form[action="careers2.php"] table input[type="tel"],
main.container form[action="careers2.php"] table textarea {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(148,163,184,0.7);
  background: rgba(15,23,42,0.9);
  color: #f9fafb;
  padding: 0.5rem 0.75rem;
  font-size: 0.95rem;
}

/* Button */
main.container form[action="careers2.php"] table input[type="submit"] {
  width: 100%;
  border-radius: 999px;
  background: #1E90FF;
  color: #ffffff;
  padding: 0.7rem 1.25rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: transform .18s ease,
              box-shadow .18s ease,
              background-color .18s ease;
}

main.container form[action="careers2.php"] table input[type="submit"]:hover {
  background: #2f9bff;
  transform: translateY(-1px);
}

/* Jobs list text */
main.container form[action="careers2.php"] > .grid > .space-y-4 {
  font-size: 1rem;
  line-height: 1.7;
}

/* Remove bullets & align left */
.grid.grid-cols-1.sm\:grid-cols-2.md\:grid-cols-3.gap-6.px-4 .blog-card ul {
  list-style: none !important;
  margin: 0;
  padding: 0;
}

.grid.grid-cols-1.sm\:grid-cols-2.md\:grid-cols-3.gap-6.px-4 .blog-card li {
  margin: 0.15rem 0;
  text-align: left !important;
}

.grid.grid-cols-1.sm\:grid-cols-2.md\:grid-cols-3.gap-6.px-4 .blog-card li a {
  color: #ffffff !important;
}
.grid.grid-cols-1.sm\:grid-cols-2.md\:grid-cols-3.gap-6.px-4 {
  row-gap: 0.1em !important;   /* default Tailwind gap-6 is 1.5rem; you can try 1rem */
}
/* Nice little hover */
h1.text-2xl.font-extrabold
  ~ .grid.grid-cols-1.sm\:grid-cols-2.md\:grid-cols-3.gap-6.px-4
  .blog-card li a:hover {
  color: #1E90FF;
  transform: translateX(3px);
  transition: color .18s ease, transform .18s ease;
}
h1.text-2xl.font-extrabold
  ~ .grid.grid-cols-1.sm\:grid-cols-2.md\:grid-cols-3.gap-6.px-4
  .blog-card h2,
h1.text-2xl.font-extrabold
  ~ .grid.grid-cols-1.sm\:grid-cols-2.md\:grid-cols-3.gap-6.px-4
  .blog-card h3 {
  text-align: center;
  color: var(--blue);
  margin-bottom: 1rem;
}
/* Remove bullets on sitemap lists */
h1.text-2xl.font-extrabold
  ~ .grid.grid-cols-1.sm\:grid-cols-2.md\:grid-cols-3.gap-6.px-4
  .blog-card ul,
h1.text-2xl.font-extrabold
  ~ .grid.grid-cols-1.sm\:grid-cols-2.md\:grid-cols-3.gap-6.px-4
  .blog-card li {
  list-style: none !important;
  margin: 0;
  padding: 0;
}
/* Sub-links styling */
h1.text-2xl.font-extrabold
  ~ .grid.grid-cols-1.sm\:grid-cols-2.md\:grid-cols-3.gap-6.px-4
  .blog-card li {
  text-align: left;
  margin: 0.25rem 0;
}
/* =========================================
   SITEMAP – scoped styling (safe for others)
   ========================================= */

/* The sitemap grid (the one right after the Site Map <h1>) */
h1.text-2xl.font-extrabold + br + div.grid.grid-cols-1.sm\:grid-cols-2.md\:grid-cols-3.gap-6.px-4 {
  /* control spacing just for this grid */
  row-gap: 1.25rem !important;
  column-gap: 1.25rem !important;
  margin-top: 1.5rem;
}

/* Remove bullets + align left + white links */
h1.text-2xl.font-extrabold + br + div.grid.grid-cols-1.sm\:grid-cols-2.md\:grid-cols-3.gap-6.px-4 .blog-card ul,
h1.text-2xl.font-extrabold + br + div.grid.grid-cols-1.sm\:grid-cols-2.md\:grid-cols-3.gap-6.px-4 .blog-card li {
  list-style: none !important;
  margin: 0;
  padding: 0;
}

h1.text-2xl.font-extrabold + br + div.grid.grid-cols-1.sm\:grid-cols-2.md\:grid-cols-3.gap-6.px-4 .blog-card li {
  text-align: left;
  margin: 0.25rem 0;
}

h1.text-2xl.font-extrabold + br + div.grid.grid-cols-1.sm\:grid-cols-2.md\:grid-cols-3.gap-6.px-4 .blog-card li a {
  color: #ffffff !important;
  text-decoration: none;
  transition: color .18s ease, transform .18s ease;
}

h1.text-2xl.font-extrabold + br + div.grid.grid-cols-1.sm\:grid-cols-2.md\:grid-cols-3.gap-6.px-4 .blog-card li a:hover {
  color: #1E90FF;
  transform: translateX(3px);
}

/* Make each card stretch nicely within its grid cell */
h1.text-2xl.font-extrabold + br + div.grid.grid-cols-1.sm\:grid-cols-2.md\:grid-cols-3.gap-6.px-4 .blog-card {
  height: 100%;
  margin: 0;
}

h1.text-2xl.font-extrabold + br + div.grid.grid-cols-1.sm\:grid-cols-2.md\:grid-cols-3.gap-6.px-4 .blog-card > * {
  height: 100%;
}

/* ------- Responsive tweaks ------- */

/* Mobile / small tablets – a bit more breathing room vertically */
@media (max-width: 768px) {
  h1.text-2xl.font-extrabold + br + div.grid.grid-cols-1.sm\:grid-cols-2.md\:grid-cols-3.gap-6.px-4 {
    row-gap: 1.75rem !important;
    column-gap: 1.25rem !important;
  }
}

/* Desktop – slightly tighter gap between rows */
@media (min-width: 1024px) {
  h1.text-2xl.font-extrabold + br + div.grid.grid-cols-1.sm\:grid-cols-2.md\:grid-cols-3.gap-6.px-4 {
    row-gap: 0.75rem !important;
    column-gap: 1.25rem !important;
  }
}
/* === GateMatrix Footer social icons === */
.nvx-social .si {
  background: transparent;
  border: 0;
  padding: 6px;
  border-radius: 10px;
  cursor: pointer;
}

.nvx-social .si svg {
  width: 22px;
  height: 22px;
  color: rgba(255, 255, 255, 0.7);
  transition: transform .25s ease, color .25s ease, opacity .25s ease;
  opacity: .9;
}

.nvx-social .si svg path,
.nvx-social .si svg rect,
.nvx-social .si svg circle {
  fill: currentColor;
}

.nvx-social .si:hover svg {
  color: #00E5FF;
  transform: scale(1.12);
  opacity: 1;
}

/* Subtle footer background (keep this if you like the tint) */
footer {
  background: rgba(255, 255, 255, 0.02);
}

/* Make footer content span full width on desktop */
footer > .container {
  max-width: 100% !important;
}

/* Phone + Email layout:
   - mobile: stacked
   - >= sm: side by side with nice spacing */
footer .flex.flex-col.sm\:flex-row {
  row-gap: 0.5rem;
  column-gap: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

@media (min-width: 640px) {
  footer .flex.flex-col.sm\:flex-row {
    align-items: center;
  }
}
/* Reduce the default top margin before the footer */
footer.mt-10 {
  margin-top: 1rem !important;   /* try 0 or 0.5rem if you want it tighter */
}
/* Footer contact block: phone + email layout */
footer .flex.flex-col.sm\:flex-row.items-center.md\:items-start {
  row-gap: 0.5rem;
  column-gap: 2rem;
}

/* Desktop and tablets: put them side by side */
@media (min-width: 640px) {
  footer .flex.flex-col.sm\:flex-row.items-center.md\:items-start {
    flex-direction: row !important;
    align-items: center !important;
  }
}

/* Phones: stack them again */
@media (max-width: 639.98px) {
  footer .flex.flex-col.sm\:flex-row.items-center.md\:items-start {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}
/* FINAL FIX: Remove gap under sitemap grid */
.grid.grid-cols-1.sm\:grid-cols-2.md\:grid-cols-3.gap-6.px-4 + div,
.grid.grid-cols-1.sm\:grid-cols-2.md\:grid-cols-3.gap-6.px-4 + section,
.grid.grid-cols-1.sm\:grid-cols-2.md\:grid-cols-3.gap-6.px-4 + * {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* Restore tight second row ONLY on desktop */
@media (min-width: 1024px) {
  .grid.grid-cols-1.sm\:grid-cols-2.md\:grid-cols-3.gap-6.px-4 .blog-card:nth-child(n+4) {
    margin-top: -7.5rem !important;
  }
}
/* ===========================
   SERVICES – MOBILE FIX
   =========================== */

/* Make the services container fluid on small screens */
@media (max-width: 768px) {
  .nvx-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box;
  }

  /* Force the grid to stack cards vertically */
  .nvx-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1.25rem !important;
  }

  /* Each card should take full width */
  .nvx-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* Make sure the image behaves nicely */
  .nvx-card-media img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
    display: block;
  }
}
/* =========================================
   UNIVERSAL FIX — MOBILE CARD VERTICAL GAP
   (Blogs + Sitemap)
   ========================================= */

@media (max-width: 640px) {

  /* Reduce outer grid vertical spacing */
  .grid.grid-cols-1,
  .grid.grid-cols-1.sm\:grid-cols-2.md\:grid-cols-3,
  .nvx-grid {
    row-gap: 0.75rem !important;  /* SMALL TIGHT GAP */
    margin-bottom: 0 !important;
  }

  /* Reduce gap between cards themselves */
  .blog-card,
  .nvx-card {
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important;  
  }

  /* Prevent extra margins inside cards */
  .blog-card > *,
  .nvx-card > * {
    margin-bottom: 0 !important;
  }
}