/* =====================================================================
   ik-final.css  —  loaded LAST on every page (via includes/ui_header.php)
   so the navbar + footer render identically across the whole site,
   regardless of each page's individual stylesheet order (some inner pages
   load modern.css last, which was overriding the navbar on those pages).
   ===================================================================== */

/* ---- Header bar: light frosted background everywhere ---- */
.header,
#header,
#header.fixed1,
#header.fixed2 {
  background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(233,243,252,0.93) 100%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(175%);
  backdrop-filter: blur(18px) saturate(175%);
  border-bottom: 1px solid rgba(0,119,204,0.12) !important;
  box-shadow: 0 4px 24px rgba(0,65,113,0.08) !important;
  height: auto !important;
  padding: 9px 0 !important;
}

/* ---- Container: transparent row, logo left + pill right ---- */
.header .container,
#header .container,
#header.fixed1 .container {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 26px 0 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ---- Logo (outside the pill) ---- */
.header .logo,
#header .logo,
#header.fixed1 .logo {
  float: none !important;
  height: auto !important;
  line-height: normal !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: flex;
  align-items: center;
}
.header .logo a,
#header .logo a,
#header.fixed1 .logo a {
  display: block !important;
  width: 320px !important;
  height: 74px !important;
  margin-left: 0 !important;     /* flush to the far-left edge */
  background: url(../images/logo.png) no-repeat left center !important;
  background-size: contain !important;
  filter: none !important;
}

/* ---- The nav PILL: rounded + a rich brand-blue background ---- */
.header .menu > ul,
#header .menu > ul {
  display: inline-flex !important;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 5px 6px !important;
  list-style: none;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #00396b 0%, #0072c6 55%, #0a86d8 100%) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  box-shadow: 0 12px 30px rgba(0,60,115,0.30),
              inset 0 1px 0 rgba(255,255,255,0.14) !important;
}
.header .menu > ul > li,
#header .menu > ul > li {
  height: auto !important;
  line-height: 1.2 !important;
  display: flex !important;
  align-items: center;
  position: relative;
  float: none !important;
  margin: 0 !important;
}

/* ---- Nav links: white, slightly larger ---- */
.header .menu > ul > li > a,
#header .menu > ul > li > a {
  padding: 8px 14px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  height: auto !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  white-space: nowrap;
  background: transparent !important;
  transition: background .25s ease, color .25s ease;
}
.header .menu > ul > li > a > i,
#header .menu > ul > li > a > i { color: #ffffff !important; }

.header .menu > ul > li:not(.contactli):not(.ik-ai-navli) > a:hover,
.header .menu > ul > li:not(.contactli):not(.ik-ai-navli) > a.active,
#header .menu > ul > li:not(.contactli):not(.ik-ai-navli) > a:hover,
#header .menu > ul > li:not(.contactli):not(.ik-ai-navli) > a.active {
  color: #ffffff !important;
  background: rgba(255,255,255,0.20) !important;
  box-shadow: none !important;
}

/* ---- Contact Us: white ghost pill ---- */
.header .menu > ul > li.contactli > a,
#header .menu > ul > li.contactli > a {
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.40) !important;
  border-radius: 999px !important;
  padding: 7px 17px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  height: auto !important;
  margin-left: 4px !important;
}
.header .menu > ul > li.contactli > a:hover,
#header .menu > ul > li.contactli > a:hover {
  background: rgba(255,255,255,0.16) !important;
  border-color: rgba(255,255,255,0.7) !important;
  color: #ffffff !important;
}

/* ---- Ask AI: dark primary button ---- */
.header .menu > ul > li.ik-ai-navli,
#header .menu > ul > li.ik-ai-navli {
  margin-left: 8px;
  padding-left: 10px;
  border-left: 1px solid rgba(255,255,255,0.22);
}
.header .menu > ul > li.ik-ai-navli > a,
#header .menu > ul > li.ik-ai-navli > a {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  background: #0a1628 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  height: auto !important;
  box-shadow: 0 6px 16px rgba(5,12,25,0.4);
}
.header .menu > ul > li.ik-ai-navli > a::before { content: "\2728"; font-size: 13px; line-height: 1; }
.header .menu > ul > li.ik-ai-navli > a:hover,
#header .menu > ul > li.ik-ai-navli > a:hover { background: #0f1e36 !important; color: #fff !important; }

/* ---- Dropdown: clean white card, click-to-open sticky (JS adds .ik-open) ---- */
#header .menu > ul > li > .submenu1 {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#header .menu > ul > li.ik-open > .submenu1 {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: all !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin-top: 10px !important;
  padding: 8px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0,65,113,0.10) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 50px rgba(0,65,113,0.18) !important;
}
#header .menu > ul > li.ik-open > .submenu1 li { display: block !important; }
#header .menu > ul > li.ik-open > .submenu1 li a {
  color: #1e2d3d !important;
  border-radius: 9px !important;
  padding: 11px 18px !important;
  font-weight: 600;
  white-space: nowrap;
  background: transparent !important;
}
#header .menu > ul > li.ik-open > .submenu1 li a:hover { background: #eaf3fb !important; color: #004171 !important; }
#header .menu > ul > li.ik-open > a > .fa-caret-down { transform: rotate(180deg); }
#header .menu > ul > li > a > .fa-caret-down { transition: transform .2s ease; }

/* ---- Footer logo: large rounded pill on the dark footer ---- */
footer.main_Footer .mFooter1 img {
  height: 60px !important;
  width: auto !important;
  filter: none !important;
  background: #ffffff !important;
  padding: 14px 30px !important;
  border-radius: 50px !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.28) !important;
}

/* ---- Mobile: pill keeps logo, hamburger clear ---- */
@media (max-width: 1024px) {
  .header, #header, #header.fixed1 { padding: 8px 0 !important; }
  .header .container, #header .container, #header.fixed1 .container {
    padding: 0 14px !important; max-width: 100%; justify-content: flex-start !important;
  }
  .header .logo a, #header .logo a { width: 168px !important; height: 42px !important; }
  .menu2 { top: 24px !important; right: 22px !important; }
}

/* =====================================================================
   INNER-PAGE BANNERS — show the banner IMAGE again (like the original
   site). modern.css had hidden the image and used a dark gradient; this
   restores the light image-+-text banner on every inner page.
   ===================================================================== */
.innerbanner {
  padding: 46px 0 !important;
  background: linear-gradient(to bottom, rgba(65,158,224,0.30) 0%, rgba(255,255,255,0.55) 100%) !important;
  position: relative;
}
.innerbanner::before { display: none !important; content: none !important; }
.innerbanner .container { position: relative; z-index: 1; }
.innerbanner_in {
  display: grid !important;
  grid-template-columns: 43fr 57fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.innerbanner_in > img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(0,65,113,0.14);
}
.innerbanner_in > div h2,
.innerbanner_in h2 {
  color: #004171 !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  margin: 0 0 14px !important;
}
.innerbanner_in > div p,
.innerbanner_in p { color: #1e2d3d !important; }
@media (max-width: 768px) {
  .innerbanner_in { grid-template-columns: 1fr !important; gap: 22px; }
}

/* =====================================================================
   AI THEME LAYER — neural net, AI badge, assistant greeting, glow
   ===================================================================== */

/* Neural-network canvas overlaid on the hero */
.ik-ai-net {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.55;
}

/* "AI-Driven" eyebrow badge in the hero */
.ik-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #004171;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 119, 204, 0.30);
  border-radius: 50px;
  box-shadow: 0 6px 18px rgba(0, 119, 204, 0.14);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  position: relative;
  z-index: 10;
  animation: ik-badge-glow 3s ease-in-out infinite;
}
.ik-hero-eyebrow .ik-spark { animation: ik-spark-spin 4s linear infinite; display: inline-block; }
@keyframes ik-badge-glow {
  0%,100% { box-shadow: 0 6px 18px rgba(0,119,204,0.14); }
  50%     { box-shadow: 0 6px 26px rgba(0,173,239,0.40); }
}
@keyframes ik-spark-spin { to { transform: rotate(360deg); } }

/* Ask-AI launcher — stronger pulsing AI ring */
.ik-ai-trigger-btn::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(0, 173, 239, 0.55);
  animation: ik-ai-ping 2.2s ease-out infinite;
}
@keyframes ik-ai-ping {
  0%   { transform: scale(0.9); opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Greeting bubble next to the Ask-AI launcher */
.ik-ai-tip {
  position: absolute;
  bottom: 8px;
  right: 78px;
  width: 230px;
  background: #ffffff;
  color: #1e2d3d;
  font-size: 13px;
  line-height: 1.5;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,65,113,.12);
  box-shadow: 0 14px 36px rgba(0,65,113,.22);
  opacity: 0;
  transform: translateX(10px) scale(.96);
  transform-origin: bottom right;
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.ik-ai-tip.show { opacity: 1; transform: translateX(0) scale(1); }
.ik-ai-tip::after {
  content: "";
  position: absolute;
  right: -7px; bottom: 18px;
  width: 14px; height: 14px;
  background: #ffffff;
  border-right: 1px solid rgba(0,65,113,.12);
  border-bottom: 1px solid rgba(0,65,113,.12);
  transform: rotate(-45deg);
}

/* Animated gradient shimmer on section eyebrow labels (Our Solutions, etc.) */
.ik-label {
  background: linear-gradient(90deg, rgba(0,119,204,.12), rgba(0,173,239,.22), rgba(0,119,204,.12)) !important;
  background-size: 200% 100% !important;
  animation: ik-label-shimmer 4s linear infinite;
}
@keyframes ik-label-shimmer { to { background-position: 200% 0; } }

@media (prefers-reduced-motion: reduce) {
  .ik-hero-eyebrow, .ik-hero-eyebrow .ik-spark,
  .ik-ai-trigger-btn::after, .ik-label { animation: none !important; }
}

/* AI capability ticker band */
.ik-ai-marquee {
  background: linear-gradient(135deg, #00396b 0%, #0072c6 60%, #0a86d8 100%);
  overflow: hidden;
  white-space: nowrap;
  padding: 14px 0;
  position: relative;
  z-index: 3;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 30px rgba(0,60,115,.18);
}
.ik-mq-track {
  display: inline-flex;
  align-items: center;
  animation: ik-mq-scroll 30s linear infinite;
  will-change: transform;
}
@keyframes ik-mq-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ik-mq-item {
  color: #ffffff;
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 0 26px;
}
.ik-mq-dot { color: #7fd3ff; font-size: 11px; }
.ik-ai-marquee:hover .ik-mq-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .ik-mq-track { animation: none !important; } }

/* Ask-AI reply links rendered as buttons */
.ik-bubble a.ik-ai-btn {
  display: inline-block;
  margin: 10px 8px 2px 0;
  padding: 9px 18px;
  background: linear-gradient(135deg, #1e88e5, #0b5cab) !important;
  color: #fff !important;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(13, 92, 171, .28);
  transition: transform .15s ease, box-shadow .15s ease;
}
.ik-bubble a.ik-ai-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 18px rgba(13, 92, 171, .4);
  color: #fff !important;
}

/* Hero text + AI badge moved higher; lighter canvas so the SVG net leads */
.bannerboxcont1 { transform: translateY(-24px); }
.ik-hero-eyebrow { display: none !important; }   /* AI-Driven badge removed */
.ik-hero-eyebrow { margin-bottom: 22px; }
.ik-ai-net { opacity: 0.35 !important; }

/* =====================================================================
   FOOTER — light theme like the original site, logo clearly visible.
   ===================================================================== */
footer.main_Footer {
  background: linear-gradient(180deg, #ffffff 0%, #e9f3fc 100%) !important;
  color: #5a738a !important;
  border-top: 1px solid #dce8f4;
}
footer.main_Footer::before {
  background: linear-gradient(90deg, #004171, #00adef, #004171) !important;
  opacity: 1;
}
/* Logo — natural colours, no chip, prominent */
footer.main_Footer .mFooter1 img {
  height: 64px !important;
  width: auto !important;
  filter: none !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
footer.main_Footer .mFooter1 {
  border-bottom: 1px solid #dce8f4 !important;
}
footer.main_Footer .mFooter1 p { color: #8aa0b6 !important; }
footer.main_Footer .mFooter1 h3,
footer.main_Footer .mFooter1 h3 a { color: #004171 !important; }
footer.main_Footer .mFooter1 h3 a:hover { color: #0077cc !important; }
/* Columns */
footer.main_Footer .main_Footer_in h4 { color: #004171 !important; }
footer.main_Footer .main_Footer_in h3 { color: #004171 !important; }
footer.main_Footer .main_Footer_in ul li a { color: #5a738a !important; }
footer.main_Footer .main_Footer_in ul li a:hover { color: #0077cc !important; }
/* Social icons */
footer.main_Footer .social a,
footer.main_Footer .main_Footer_in .social a {
  background: #eaf3fb !important;
  color: #0077cc !important;
  border: 1px solid #cfe3f6 !important;
}
footer.main_Footer .social a:hover { background: #0077cc !important; color: #fff !important; }
/* Bottom copy bar */
footer.main_Footer .copy { border-top: 1px solid #dce8f4 !important; }
footer.main_Footer .copy *,
footer.main_Footer .copy_links a { color: #8aa0b6 !important; }
footer.main_Footer .copy_links a:hover { color: #0077cc !important; }
@media (max-width: 768px) {
  footer.main_Footer .mFooter1 img { height: 54px !important; }
}