/* ============================================================================
   ACT Research — 2026 visual refresh (overlay layer)
   Design only. Loaded AFTER bootstrap.css / style.css / component.css so it
   wins on equal specificity. No HTML structure, text or logic is changed.
   ========================================================================== */

:root {
  --navy:      #1f3855;   /* brand primary (kept) */
  --navy-700:  #182c43;
  --navy-900:  #0f1d2e;
  --brand:     #3b5bdb;   /* accent — matches the online configurator app */
  --brand-600: #2f4cc8;
  --ink:       #1f2533;
  --muted:     #5b6475;
  --line:      #e6e9f0;
  --canvas:    #f5f7fb;
  --surface:   #ffffff;
  --radius:    14px;
  --radius-lg: 20px;
  --shadow-sm: 0 2px 10px rgba(20, 28, 56, .06), 0 1px 3px rgba(20, 28, 56, .05);
  --shadow:    0 14px 32px rgba(20, 28, 56, .10), 0 4px 10px rgba(20, 28, 56, .06);
  --shadow-lg: 0 26px 60px rgba(20, 28, 56, .18);
}

/* ---- Base ---------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', 'Poppins', sans-serif !important;
  letter-spacing: -.01em;
  color: var(--navy);
}

p { color: var(--muted); line-height: 1.75; }
img { max-width: 100%; }
a { transition: color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease; }

/* ---- Top contact strip --------------------------------------------------- */
.header-strip {
  background: var(--navy);
  padding: 9px 0;
  font-size: 13px;
}
.header-strip .phonenum,
.header-strip .phonenum.two,
.header-strip .phonenum.two.one {
  color: rgba(255, 255, 255, .9);
  margin: 4px 0;
}
.header-strip .glyphicon { color: #8fa6ff; }

/* language flags -> tidy rounded chips */
.lang-switcher { border-collapse: separate; border-spacing: 3px; }
.lang-switcher img.flag {
  width: 26px;
  height: 17px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  transition: transform .15s ease, box-shadow .15s ease;
  display: block;
}
.lang-switcher a:hover img.flag {
  transform: scale(1.14);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}

/* ---- Header / logo / nav ------------------------------------------------- */
.header-top {
  padding: 14px 0;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.header-top .container { width: auto !important; max-width: 1320px; }

.logo h1 { color: var(--navy); font-weight: 800; }
.logo h1 span { color: var(--brand); }
.top-para { color: var(--muted) !important; letter-spacing: 2px; }

.top-menu ul li a {
  color: var(--ink) !important;
  font-weight: 500;
  border-radius: 8px;
  padding: 8px 12px;
}
.top-menu ul li a:hover,
.top-menu ul li.active > a { color: var(--brand) !important; }

.dropdown-menu {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px;
}
.dropdown-menu a { border-radius: 8px; color: var(--ink); }
.dropdown-menu a:hover { background: var(--canvas); color: var(--brand); }

/* "Online configurator" nav link -> prominent CTA button (no HTML change) */
.top-menu ul li a[href*="8085"],
.top-menu ul li a[href*="86.125.151.7"] {
  background: var(--brand) !important;
  color: #fff !important;
  padding: 9px 20px !important;
  border-radius: 999px !important;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(59, 91, 219, .32);
}
.top-menu ul li a[href*="8085"]:hover,
.top-menu ul li a[href*="86.125.151.7"]:hover {
  background: var(--brand-600) !important;
  color: #fff !important;
  box-shadow: 0 9px 24px rgba(59, 91, 219, .45);
  transform: translateY(-1px);
}

/* ---- Hero ---------------------------------------------------------------- */
.banner {
  min-height: 640px;
  position: relative;
  background-attachment: scroll;
}
.banner:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
              rgba(15, 29, 46, .28) 0%,
              rgba(15, 29, 46, .08) 38%,
              rgba(15, 29, 46, .50) 100%);
}

/* ---- Section headings ---------------------------------------------------- */
h3.title {
  color: var(--navy);
  font-weight: 800;
  font-size: 2.6em;
}
h2.tittle { letter-spacing: .3px; }
h2.tittle span { color: #8fa6ff; }

.line {
  display: block;
  height: 4px;
  width: 66px;
  margin: 16px auto 0;
  background: var(--brand);
  border-radius: 999px;
}
.line .sub-line { display: none; }

/* ---- About --------------------------------------------------------------- */
.about .ab-left img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.about h4 { color: var(--brand); font-weight: 600; }

/* ---- Services + product tiles ------------------------------------------- */
.services-list { background: var(--canvas); padding: 5em 0; }
.services-list > .container > p { color: var(--muted); }

.list-gds,
[class*="list-gds"] {
  border: 1px solid var(--line) !important;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 26px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.list-gds:hover,
[class*="list-gds"]:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--brand) !important;
}
.list-gds > a,
[class*="list-gds"] > a { display: block; padding: 8px; }
.list-gds h4,
[class*="list-gds"] h4 {
  color: var(--navy) !important;
  font-size: 1.18em !important;
  font-weight: 600;
  margin: 20px 12px !important;
  transition: color .15s ease;
}
.list-gds:hover h4,
[class*="list-gds"]:hover h4 { color: var(--brand) !important; }
.list-gds1 span,
[class*="list-gds"] span { color: var(--brand) !important; }

/* ---- Photo gallery (portfolio) ------------------------------------------ */
.portfolio { padding: 5em 0; }
.team-gd { padding: 8px !important; }
.team_pos {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.team_pos:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.team_pos img { width: 100%; display: block; transition: transform .45s ease; }
.team_pos:hover img { transform: scale(1.07); }

/* ---- Testimonials -------------------------------------------------------- */
.testimonials.module { background: var(--canvas); }
.testimonials.module blockquote,
.testimonials .testimonial {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
}

/* ---- Contact + map ------------------------------------------------------- */
.contact input[type="text"],
.contact input[type="email"],
.contact textarea,
input.form-control,
textarea.form-control {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.contact input:focus,
.contact textarea:focus,
.form-control:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(59, 91, 219, .15);
}
#gmap_canvas,
.map iframe,
iframe[src*="maps"] {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* ---- Buttons ------------------------------------------------------------- */
.btn,
button.btn,
a.btn,
input[type="submit"] {
  border-radius: 999px !important;
  font-weight: 600;
  letter-spacing: .2px;
  padding: 11px 24px;
  border: none;
  transition: background-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.btn-primary,
.btn-default,
input[type="submit"] {
  background: var(--brand) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(59, 91, 219, .28);
}
.btn-primary:hover,
.btn-default:hover,
input[type="submit"]:hover {
  background: var(--brand-600) !important;
  box-shadow: 0 9px 22px rgba(59, 91, 219, .4);
  transform: translateY(-1px);
}

/* ---- Footer -------------------------------------------------------------- */
.footer {
  background: var(--navy-900);
  color: rgba(255, 255, 255, .82);
  padding: 3em 0;
}
.footer h3, .footer h4 { color: #fff; }
.footer p, .footer li, .footer a { color: rgba(255, 255, 255, .82); }
.footer a:hover { color: #8fa6ff; }

/* ---- Modals (about + gallery lightboxes) -------------------------------- */
.modal-content,
.modal-content.about,
.portfolio-modal .modal-content {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.modal-header { border-bottom: 1px solid var(--line); }

/* ---- Back-to-top + scrollbar -------------------------------------------- */
#toTop {
  border-radius: 50% !important;
  background: var(--brand) !important;
  box-shadow: 0 8px 20px rgba(59, 91, 219, .4);
}
* { scrollbar-width: thin; scrollbar-color: #c6ccd9 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: #c8cedb;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #aab2c4; }