/* ==========================================================================
   SJM Softech – Professional design layer
   Loaded LAST on every page. Unifies colour, type, buttons, header, footer.
   To roll back the redesign, remove the <link> to this file.
   ========================================================================== */

:root {
  --navy: #0f2742;
  --navy-2: #173a5e;
  --accent: #d93a2b;        /* brand red, AA contrast with white text */
  --accent-dark: #b92e21;
  --text: #334155;
  --muted: #64748b;
  --line: #e2e8f0;
  --bg-soft: #f6f8fb;
  --white: #ffffff;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(15, 39, 66, .06), 0 1px 3px rgba(15, 39, 66, .08);
  --shadow-md: 0 8px 24px rgba(15, 39, 66, .10);
  --font: "Inter", "Roboto", "Segoe UI", Arial, sans-serif;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, h4, h5, h6, p, li, a, button, input, textarea, select, label, td, th, blockquote, dt, dd {
  font-family: var(--font) !important;
}
img { max-width: 100%; }
a { transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
:focus-visible { outline: 3px solid rgba(217, 58, 43, .45); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3, h4 { color: var(--navy); letter-spacing: -.01em; }
h1 { line-height: 1.15; font-weight: 700; }
h2 { line-height: 1.2; font-weight: 700; }
h3 { line-height: 1.3; font-weight: 600; }
p { color: var(--text); }

/* Heading emphasis: one solid brand colour instead of multi-colour gradients */
h1 em, h2 em, h3 em,
.hero-title em, .Main-Home-Page-Banner .hero-title em,
.Trusted-Box .Trusted-work .heading span,
.why-section-Home .why-title span,
.main-heading span, .main-heading em,
.main-head-gradient, .tech-stack-gradient {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--accent) !important;
  color: var(--accent) !important;
  font-style: normal !important;
}

/* Section eyebrow labels */
[class*="eyebrow"], [class*="-tag"], .sub-heading, .section-label {
  letter-spacing: .12em;
}

/* ---------- Buttons ---------- */
.btn-primary, a.btn-primary, button.btn-primary,
[class*="hero-cta"] a:first-child, [class$="-btn-primary"], [class*="cta-primary"] {
  background: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 600;
  box-shadow: none !important;
}
.btn-primary:hover, a.btn-primary:hover, button.btn-primary:hover,
[class*="hero-cta"] a:first-child:hover, [class$="-btn-primary"]:hover, [class*="cta-primary"]:hover {
  background: var(--accent-dark) !important;
  border-color: var(--accent-dark) !important;
  transform: none !important;
}
.btn-outline, a.btn-outline, button.btn-outline, [class$="-btn-secondary"], [class*="cta-secondary"] {
  background: transparent !important;
  border: 1px solid var(--navy) !important;
  color: var(--navy) !important;
  border-radius: 8px !important;
  font-weight: 600;
  box-shadow: none !important;
}
.btn-outline:hover, a.btn-outline:hover, button.btn-outline:hover,
[class$="-btn-secondary"]:hover, [class*="cta-secondary"]:hover {
  background: var(--navy) !important;
  color: #fff !important;
}

/* ---------- Header ---------- */
#header { background: #fff; border-top: 0 !important; box-shadow: 0 1px 0 var(--line); position: relative; z-index: 50; }
#header .nav-bar { background: #fff; }
#header .fix-container { position: relative; }
#logo img { max-height: 64px; width: auto; }
#shortinfo { display: flex; align-items: center; gap: 14px; }
#shortinfo .isl { height: 40px; width: auto; }
#shortinfo .flttxt { font-size: 13px; line-height: 1.45; color: var(--navy); font-weight: 600; margin: 0; text-align: right; }
#shortinfo .flttxt a { color: var(--navy) !important; font-weight: 600; margin: 0 !important; }

.cbp-hrmenu > ul > li > a {
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
  text-transform: none !important;
  color: var(--navy) !important;
}
.cbp-hrmenu > ul > li > a:hover,
.cbp-hrmenu > ul > li > a.active,
.cbp-hrmenu > ul > li.cbp-hropen > a { color: var(--accent) !important; }
.cbp-hrmenu .cbp-hrsub { background: var(--navy) !important; border-top: 2px solid var(--accent); box-shadow: var(--shadow-md); }
.cbp-hrmenu > ul > li.cbp-hropen, .cbp-hrmenu > ul > li.cbp-hropen > a:hover { background: var(--navy) !important; }
.cbp-hrmenu > ul > li.cbp-hropen > a { color: #fff !important; }
.cbp-hrmenu .cbp-hrsub-inner li a, .cbp-hrsub-inner .nav-block a,
.cbp-hrmenu .cbp-hrsub-inner .nav-block.differ ul li a { color: #e2e8f0 !important; font-size: 14px; }
.cbp-hrmenu .cbp-hrsub-inner li a span, .cbp-hrmenu .cbp-hrsub-inner .nav-block.differ ul li a span { background: var(--accent) !important; }
.cbp-hrmenu .cbp-hrsub-inner li a:hover { color: #fff !important; }
#menu-icn span { background: var(--navy) !important; }
.nav-bar { border-top: 0 !important; }

/* Quote buttons: solid, no dashed border */
a.r-quote {
  display: flex !important; align-items: center; justify-content: center;
  font-size: 14px !important;
  background: var(--accent) !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow: none !important;
  font-family: var(--font) !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
  text-transform: none !important;
  color: #fff !important;
}
a.r-quote:hover { background: var(--accent-dark) !important; }

/* ---------- Sections ---------- */
section { scroll-margin-top: 80px; }

/* Cards: consistent radius, border and soft shadow */
.card, .tech-card, .proc-card, .stats-card, .faq-item {
  border-radius: var(--radius-lg) !important;
}

/* ---------- FAQ ---------- */
.faq-item { border: 1px solid var(--line); background: #fff; box-shadow: none; }
.faq-question { color: var(--navy); font-weight: 600; }

/* ---------- Forms ---------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], select, textarea {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  color: var(--navy);
  background: #fff;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--navy-2);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(23, 58, 94, .15);
}

/* ---------- Footer ---------- */
footer.site-footer { background: var(--navy) !important; color: #cbd5e1; }
footer.site-footer a { color: #cbd5e1; }
footer.site-footer a:hover { color: #fff; }
footer.site-footer .sf-title { color: #fff; letter-spacing: .08em; text-transform: uppercase; font-size: 13px; font-weight: 700; }
footer.site-footer p { color: #b6c2d2; }
footer.site-footer .footer-copyright { border-top: 1px solid rgba(255, 255, 255, .12); }

/* ---------- Plain inner pages (careers / testimonials / portfolio) ---------- */
h1.page-title { text-align: center; font-size: clamp(28px, 4vw, 40px); margin: 40px auto 8px; }
#innertitlebg { background: var(--bg-soft); }
#innertitlebg h1 { font-size: clamp(26px, 4vw, 38px); text-transform: none; }
.inner_content p.txt { text-align: center; font-size: 17px; color: var(--muted); }

/* ---------- Accessibility / motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Small screens ---------- */
@media (max-width: 767px) {
  h1 { font-size: clamp(26px, 7vw, 34px); }
  h2 { font-size: clamp(22px, 6vw, 28px); }
  #logo img { max-height: 48px; }
}

/* ===== AUTO-GENERATED: off-brand blues/teals/purples mapped to brand navy ===== */
/*a{color:var(--navy) !important}*/
p a{color:var(--navy) !important}
.cbp-hrmenu>ul>li.cbp-hropen,.cbp-hrmenu>ul>li.cbp-hropen>a:hover{background:var(--navy) !important}
.cbp-hrmenu .cbp-hrsub{background:var(--navy) !important}
#menu-icn span{background:var(--navy) !important}
#services-tabs li.cmsdesign{background-color:var(--navy) !important}
.why-us-list li .thumb.three{background-color:var(--navy) !important}
a.cta-why{background:var(--navy) !important}
.cta-index .cta-full a.more{background:var(--navy) !important}
.cta-index .cta-full a.more:hover{color:var(--navy) !important}
.bizixx-t a{background-color:var(--navy) !important}
.bgo{background:var(--navy)!important !important}
.service-bg-two::before{background: var(--navy) !important}
.Faq-Box .avatar-count{color: var(--navy) !important}
.web-what .card::before{background:var(--navy) !important}
.web-what .card:hover{border: 1px solid var(--navy) !important}
.Web-Technology .devops{color:var(--navy) !important}
.Web-tech-stack-section .backend-clr{color:var(--navy) !important}
.Web-tech-stack-section .database-clr{color:var(--navy) !important}
.Web-tech-stack-section .devops-clr{color:var(--navy) !important}
.Web-Process .proc-card.active{background:var(--navy) !important}
.Main-Home-Page-Banner .hero-title{color: var(--navy) !important}
.home-blue{color: var(--navy) !important}
.Client-Box-Home .brand-exotec-Client-Home{color: var(--navy) !important}
.Client-Box-Home .brand-cisco-Client-Home{color: var(--navy) !important}
.Client-Box-Home .brand-dell-Client-Home{color: var(--navy) !important}
.Client-Box-Home .brand-samsung-Client-Home{color: var(--navy) !important}
.Trusted-Box .Trusted-work .Trusted-tag{color: var(--navy) !important}
.Trusted-Box .Trusted-work .heading{color: var(--navy) !important}
.Trusted-Box .Trusted-work .info h4{color: var(--navy) !important}
.Trusted-Box .Trusted-work .card .badge{color: var(--navy) !important}
.Trusted-Box .Trusted-work .icon{background: var(--navy) !important}
.Trusted-Box .Trusted-work .contact-info .icon-box{border: 1px solid var(--navy) !important;color: var(--navy) !important}
.Trusted-Box .Trusted-work .contact-info .text a:hover{color: var(--navy) !important}
.Trusted-Box .Trusted-work .contact-info:hover .icon-box{background: var(--navy) !important}
.services-box .title span{color: var(--navy) !important}
.services-box .card :hover .services-slider-icon{background-color: var(--navy) !important}
.services-box .card a:hover{color: var(--navy) !important}
.services-box .overlay button{background: var(--navy) !important}
.services-dot .dot-progress{stroke: var(--navy) !important}
.services-dot.active .dot-inner{background: var(--navy) !important}
.proc-card.active{background:var(--navy) !important}
.Technology-tab-new-box .tab{color: var(--navy) !important}
.Technology-tab-new-box .tab.active{background: var(--navy) !important}
.Technology-tab-new-box .section-title h3{color: var(--navy) !important}
.Technology-tab-new-box .section-title div{background: var(--navy) !important}
.why-section-Home .why-line{background: var(--navy) !important}
.why-section-Home .why-tag span{color: var(--navy) !important}
.why-section-Home .why-title{color: var(--navy) !important}
.why-section-Home .why-card:hover{border-color: var(--navy) !important}
.why-section-Home .why-card:hover .why-icon{background: var(--navy) !important}
.sub-heading .line{background: var(--navy) !important}
.sub-heading span{color: var(--navy) !important}
.main-heading{color: var(--navy) !important}

/* ---------- Prevent sideways scrolling on phones ---------- */
html { overflow-x: hidden; max-width: 100%; }
@media (max-width: 767px) {
  .rotating-badge { max-width: 100%; }
  .main-container, .fix-container { max-width: 100%; box-sizing: border-box; }
  table { display: block; overflow-x: auto; max-width: 100%; }
  pre, code { white-space: pre-wrap; word-break: break-word; }
}

/* Page-level gradient headings -> solid brand colour */
.desktop-app-gradient-text, .Delphi-app-gradient-text, .text-gradient-ai-int,
.software-maintenance-support-hero-left h1 .software-maintenance-support-grad,
.saas-product-development-hero-left h1 .saas-product-development-grad,
.dedicated-software-hero h1 .dedicated-software-grad,
[class*="-grad"]:is(span,em) {
  background: none !important; background-image: none !important;
  -webkit-background-clip: border-box !important; background-clip: border-box !important;
  -webkit-text-fill-color: var(--accent) !important; color: var(--accent) !important;
}