:root{
    --overlay: #0B036378; /* exact overlay color you specified */
    --accent-blue: #0A57D6;
    --track-grey: rgba(0,0,0,0.47); /* #00000078 equivalent */
    --container-width: 1180px;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background:#111;
    color:#222;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }

  /* ---- NAV (now overlaying hero) ---- */
  header.topbar{
    position: absolute;      /* overlay on top of hero */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 6;              /* must be above hero overlay */
    background: transparent; /* fully transparent so hero shows behind it */
    padding: 18px 0;
    /* white bottom line like the design */
    border-bottom: 1px solid rgba(255,255,255,0.18);
    backdrop-filter: none;
  }

  .container{
    width:100%;
    max-width:var(--container-width);
    margin:0 auto;
    padding:0 24px;
  }

  .nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 18px;
  }

  .brand{
    display:flex;
    align-items:center;
    gap:12px;
  }

  .brand-logo{
    width:46px;
    height:46px;
    object-fit:contain;
    border-radius:6px;
  }

  .company-name{
    color: #fff;
    font-weight:700;
    font-size:20px;
    text-decoration:none;
    letter-spacing:0.2px;
  }
nav.main-nav ul {
  list-style: none;
  display: flex;
  gap: 28px;
  align-items: center;
}

nav.main-nav a {
  position: relative;
  display: inline-block;          /* makes underline behave properly */
  color: rgba(255, 255, 255, 0.95);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  padding: 6px 0;                 /* keeps vertical breathing room */
  opacity: .95;
  transition: color 0.3s ease;
}

nav.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;                   /* push underline slightly below text */
  height: 2px;
  width: 0;
  background-color: #fff;         /* underline color */
  transition: width 0.3s ease;
}

nav.main-nav a:hover {
  color: #fff;
}

nav.main-nav a:hover::after {
  width: 100%;
}


  .nav-actions{display:flex;gap:14px;align-items:center}
  .icon{
    width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,0.04);color:#fff;
  }

  /* ===== HERO / SLIDER ===== */
  .hero{
    position:relative;
    height:520px;
    overflow:hidden;
    /* create top padding so hero content doesn't hide behind the overlay nav */
    padding-top:78px;
  }

  .slides{ position:absolute; inset:0; display:block; }

  .slide{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    opacity:0;
    transform:scale(1.02);
    animation: slideFade 12s ease-in-out infinite;
  }
  .slide.s1{ animation-delay: 0s; }
  .slide.s2{ animation-delay: 4s; }
  .slide.s3{ animation-delay: 8s; }

  @keyframes slideFade {
    0% { opacity:0; transform:scale(1.03); }
    8% { opacity:1; transform:scale(1.00); }
    33% { opacity:1; transform:scale(1.00); }
    41% { opacity:0; transform:scale(0.99); }
    100% { opacity:0; }
  }

  /* overlay with EXACT color (keeps hero darker but header transparent so you see this behind it) */
  .hero::before{
    content:"";
    position:absolute;
    inset:0;
    background: var(--overlay);
    z-index:2;   /* below header (6) and hero-content (5) */
    pointer-events:none;
  }

  .hero-content{
    position:relative;
    z-index:5;
    max-width:720px;
    padding:40px 48px 0 48px;
    display:block;
    color:#fff;
    height:100%;
    box-sizing:border-box;
  }

  .hero h1{
    font-family: "Poppins", sans-serif;
    font-weight:800;
    font-size:44px;
    line-height:1.03;
    color:#fff;
    margin-bottom:12px;
    text-shadow: 0 6px 30px rgba(0,0,0,0.45);
  }

  .hero p{
    max-width:540px;
    font-size:16px;
    color: rgba(255,255,255,0.9);
    margin-bottom:28px;
  }

  .btn{
    display:inline-block;
    padding:14px 28px;
    border-radius:34px;
    border:2px solid rgba(255,255,255,0.12);
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    color:#fff;
    font-weight:700;
    text-decoration:none;
    box-shadow: 0 6px 14px rgba(11,3,99,0.12);
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .btn:hover{ transform:translateY(-3px); box-shadow: 0 10px 20px rgba(11,3,99,0.18); }

  .hero .bubble{
    position:absolute;
    right:36px;
    top:46%;
    z-index:5;
    color:#fff;
    text-decoration:none;
    background: rgba(255,255,255,0.06);
    padding:10px 12px;
    border-radius:22px;
    font-size:13px;
  }

  /* WHY CHOOSE US */
  .why{
    background:#fff;
    padding:48px 0 96px;
    border-top: 12px solid #efefef;
  }

  .why h2{
    text-align:center;
    font-weight:800;
    font-family: "Poppins", sans-serif;
    color:var(--accent-blue);
    font-size:32px;
    margin-bottom:36px;
  }

  .features{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    max-width:900px;
    margin:0 auto 28px;
    padding:0 36px;
    gap:12px;
  }

  .feature{
    flex:1;
    text-align:center;
    font-weight:700;
    font-size:20px;
    color:#111;
  }
  .feature.center{ color:var(--accent-blue); }

  .track-wrap{
    position:relative;
    height:64px;
    max-width:900px;
    margin:0 auto;
    padding:0 36px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
  }

  .track{
    position:relative;
    width:100%;
    height:6px;
    background: var(--track-grey);
    border-radius:6px;
  }

  .base-dots{
    position:absolute;
    left:0;right:0;top:50%;
    transform:translateY(-50%);
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 6%;
    pointer-events:none;
  }

  .base-dots .dot{
    width:20px;height:20px;border-radius:50%;
    background:#fff;
    border:4px solid var(--track-grey);
    box-shadow:0 4px 12px rgba(0,0,0,0.06);
  }

  .moving-dot{
    position:absolute;
    top:50%;
    left:50%;
    width:28px;height:28px;border-radius:50%;
    transform:translate(-50%,-50%);
    z-index:6;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    box-shadow: 0 8px 18px rgba(10,87,214,0.18);
    border:4px solid var(--accent-blue);
    background: rgba(10,87,214,0.12);
    animation: moveDot 9s linear infinite;
  }

  @keyframes moveDot {
    0%   { left:50%; }   /* center */
    33%  { left:100%; }  /* right */
    66%  { left:0%; }    /* left */
    100% { left:50%; }   /* back to center */
  }

  .feature.active{ color:var(--accent-blue); }

  @media (max-width:880px){
    .hero{ height:420px; padding-top:64px; }
    .hero-content{ padding:28px 18px 0 18px; }
    .hero h1{ font-size:30px; }
    .features{max-width:680px;padding:0 20px}
    .track-wrap{max-width:680px;padding:0 20px}
  }



/* Container */
.container1 {
  width: 90%;
  margin: auto;
  max-width: 1200px;
}
/* ===== SERVICES SECTION ===== */
.services {
  margin-top: -80px;
  padding: 80px 0;
  background: #fff;
}

.services-header {
  text-align: left;
  margin-bottom: 40px;
}

.services-header h2 {
  font-size: 2rem;
  font-weight: 700;
}

.services-header .line {
  display: block;
  width: 60px;
  height: 3px;
  background: #B9802A; /* accent color */
  margin-top: 10px;
}

.services-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px; /* space between text and image */
}

.services-content .text-side {
  flex: 1;
}

.services-content .image-side {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.services-content .image-side img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.stats {
  display: flex;
  gap: 40px;
  margin-top: 30px;
}

.stat {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
}

.stat .counter {
  font-size: 2rem;
  font-weight: 700;
  color: #000;
}

/* Unmatched section */
.unmatched {
  padding: 80px 0;
  color: #fff;

  /* Gradient + background image together */
  background: 
    linear-gradient(to right, rgba(185,128,42,0.9), rgba(2,22,67,0.9)),
    url("images/210e2122dcb27884ae93fe6c199e00f7b0437ecc.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.unmatched-container {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.unmatched .text-side {
  flex: 1 1 30%;
}

.unmatched .cards {
  flex: 1 1 65%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.unmatched .card {
  border: 1px solid #fff;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  background: rgba(255,255,255,0.05); /* slight tint so content pops */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.unmatched .card i {
  font-size: 40px;   /* bigger, like in your screenshot */
  margin-bottom: 8px;
  color: #fff;
}

.unmatched .card h3 {
  font-size: 18px;
  margin-bottom: 6px;
  font-weight: bold;
}

.unmatched .card p {
  font-size: 14px;
  line-height: 1.4;
  color: #ddd;
}

:root{--uxp-blue: rgba(5,44,115,0.98); --uxp-yellow:#C88724;}
body{font-family:'Poppins',sans-serif;margin:0;background:#fff;color:#111}
.container1{max-width:1100px;margin:40px auto;padding:24px}
/* top area layout */
.uxp-top{display:flex;gap:24px;align-items:flex-start}
.uxp-left{flex:1;max-width:520px}
.uxp-left h2{color:#072B9D;font-size:34px;line-height:1.05;margin:0 0 16px;font-weight:700}
.uxp-left h2 span{display:block;color:#082EAA}
.uxp-left p{color:#222;font-size:16px;line-height:1.6;margin:0}

/* cards right */
.uxp-cards{display:flex;gap:18px}
.uxp-card{width:220px;background:#f2f2f2;border-radius:4px;overflow:hidden;box-shadow:0 2px 0 rgba(0,0,0,0.03)}
.uxp-card img{width:100%;height:120px;object-fit:cover;display:block}
.uxp-card .uxp-card-body{padding:18px;background:#efefef;display:flex;align-items:center;justify-content:space-between}
.uxp-card .uxp-title{font-weight:700}
.uxp-circle{width:44px;height:44px;border-radius:50%;background:var(--uxp-yellow);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;box-shadow:0 6px 12px rgba(0,0,0,0.08)}

/* partners section */
.uxp-partners{margin-top:36px;background:var(--uxp-blue);border-radius:22px;padding:40px;}
/* diamond pattern overlay using svg data url */
.uxp-partners{position:relative;overflow:hidden;box-shadow:0 10px 30px rgba(5,44,115,0.15);}
.uxp-partners::before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 80 80'><polygon points='40,0 80,40 40,80 0,40' fill='%23ffffff' fill-opacity='0.03'/></svg>");background-repeat:repeat;background-size:120px 120px;opacity:1;pointer-events:none;}
.uxp-partners-inner{position:relative;z-index:1;color:#fff;text-align:center;max-width:920px;margin:0 auto}
.uxp-partners h3{font-size:34px;margin:6px 0 10px;font-weight:700;letter-spacing:0.5px}
.uxp-partners p{margin:0 auto 28px;max-width:700px;color:rgba(255,255,255,0.9)}

/* logos row */
.uxp-logos{display:flex;gap:36px;align-items:center;justify-content:center;flex-wrap:wrap}
.uxp-logo{display:flex;align-items:center;gap:12px}
.uxp-logo svg{width:68px;height:38px;display:block;filter:drop-shadow(0 4px 8px rgba(0,0,0,0.15));}

/* logo label if needed */
.uxp-logo span{font-weight:600;color:rgba(255,255,255,0.95);font-size:18px}

/* responsive */
@media(max-width:860px){
.uxp-top{flex-direction:column}
.uxp-cards{justify-content:flex-start}
.uxp-card{width:48%}
}
@media(max-width:520px){
.uxp-card{width:100%}
.uxp-logos{gap:18px}
.uxp-logo svg{width:56px;height:32px}
}



:root{--nxs-black:#0b0b0b;--nxs-muted:#555;--nxs-gap:28px}
body{font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:0;color:var(--nxs-black);background:#fff}
.container2{max-width:1180px;margin:36px auto;padding:28px}

/* Header area */
.nxs-latest-wrap{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:28px}
.nxs-title{font-size:34px;font-weight:700;line-height:1;color:#111}
.nxs-intro{max-width:520px;text-align:right;color:var(--nxs-muted);font-size:15px;line-height:1.5}

/* Cards grid */
.nxs-news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.nxs-card{display:flex;flex-direction:column;gap:12px}
.nxs-card-img{width:100%;height:200px;object-fit:cover;border-radius:2px;display:block}
.nxs-card-date{font-size:13px;color:var(--nxs-muted)}
.nxs-card-headline{font-size:16px;font-weight:700;margin:4px 0}
.nxs-card-excerpt{font-size:14px;color:var(--nxs-muted);line-height:1.4}

/* fine tune spacing to match design */
.nxs-card:first-child .nxs-card-img{height:220px}

/* responsive */
@media (max-width:980px){
  .nxs-news-grid{grid-template-columns:repeat(2,1fr)}
  .nxs-latest-wrap{flex-direction:column;align-items:flex-start}
  .nxs-intro{text-align:left}
}
@media (max-width:560px){
  .container{padding:18px}
  .nxs-news-grid{grid-template-columns:1fr}
  .nxs-card-img{height:180px}
  .nxs-title{font-size:26px}
}



    :root {
      --panel-color-hex: #001A58B8;
      --panel-rgba-top: rgba(0,26,88,0.78);
      --panel-rgba-bottom: rgba(0,26,88,0.70);
    }

    body{
      margin:0;
      font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
   
      -webkit-font-smoothing:antialiased;
    }

    .leip-consult-section{
      max-width:1060px;
      margin:44px auto;
      padding:24px;

      box-sizing:border-box;
    }

    .leip-consult-inner{
      position:relative;
      overflow:visible;
    }

    .leip-bg{
      display:block;
      width:100%;
      height:auto;
      object-fit:cover;
      border-radius:2px;
      box-shadow: 0 0 0 1px rgba(0,0,0,0.02) inset;
    }

    /* Panel anchored lower; larger height so decorative border can extend below */
    .leip-consulting-panel{
      position:absolute;
      right:72px;
      bottom:-5px;                 /* moved slightly lower */
      width:360px;
      padding:44px 28px 28px;      /* extra top padding to avoid overlap with absolute paragraph */
      box-sizing:border-box;
      z-index:5;

      min-height:450px;            /* increased height so paragraph can sit mid-border */
      color:#fff;
      border-radius:2px;

      background-color: var(--panel-color-hex);
      background: linear-gradient(180deg, var(--panel-rgba-top), var(--panel-rgba-bottom));
      box-shadow:0 20px 40px rgba(0,0,0,0.45);
      border-left:1px solid rgba(255,255,255,0.06);
      border-top:1px solid rgba(255,255,255,0.04);

      -webkit-backdrop-filter: blur(2px);
      backdrop-filter: blur(2px);

      /* make the panel a positioning context for absolute children */
      position: absolute;
    }

    /* Decorative thin framed accent — shifted downward so its bottom sits below the panel */
    .leip-consulting-panel::after{
      content: "";
      position: absolute;
      left: -18px;
      right: -18px;
      /* instead of tying to top, set the pseudo element by height and bottom,
         so it visually sits lower than the panel and aligns closer to the image bottom. */
      height: calc(100% + 44px);
      bottom: -22px;               /* push the framed border down */
      z-index: -1;
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 3px;
      pointer-events: none;
      box-sizing: border-box;
    }

    /* Title stays at the top in normal flow */
    .leip-consulting-panel h2.leip-title {
      margin: 0;
      font-weight: 800;
      letter-spacing: -0.3px;
      line-height: 1.02;
      font-size: 30px;
      color: #ffffff;
      z-index: 6;
      position: relative;
    }

    /*
      Paragraph positioned visually near the middle of the decorative border.
      Using absolute placement inside the panel keeps it independent of the title
      and CTA so it sits in the vertical center area we want.
    */
    .leip-body {
      position: absolute;
      left: 28px;
      right: 28px;
      /* 58% pushes it below the true middle of the panel — visually centers it in the border */
      top: 58%;
      transform: translateY(-50%);
      z-index: 6;
      margin: 0;
      font-weight: 400;
      font-size: 14px;
      line-height: 1.45;
      color: rgba(255,255,255,0.94);
    }

    /* CTA anchored to the bottom area of the panel so button ends up close to image bottom */
    .leip-cta {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 22px;               /* distance from panel bottom */
      display: block;
      width: 180px;
      text-align: center;
      text-decoration: none;
      background: #ffffff;
      color: #001A58;
      padding: 12px 22px;
      border-radius: 28px;
      font-weight: 700;
      box-shadow: 0 6px 18px rgba(0,0,0,0.25);
      transition: transform .12s ease, box-shadow .12s ease;
      z-index: 6;
      border: none;
    }
    .leip-cta:active { transform: translateX(-50%) translateY(1px); }
    .leip-cta:hover  { box-shadow: 0 10px 24px rgba(0,0,0,0.30); }

    /* Small-screen behavior: keep panel overlapping image bottom, but convert to normal flow */
    @media (max-width: 820px) {
      .leip-consulting-panel {
        position: static;
        transform: none;
        margin: -120px auto 0;
        left: 50%;
        right: auto;
        width: calc(100% - 80px);
        min-height: 360px;
        padding: 28px;
      }
      .leip-consulting-panel::after { display:none; } /* hide decorative frame on narrow screens */
      .leip-body { position: static; margin-top: 12px; transform: none; top: auto; }
      .leip-cta { position: static; transform:none; margin: 18px auto 0; bottom: auto; left:auto; }
    }

    @media (max-width: 420px) {
      .leip-consulting-panel { padding:22px; min-height:300px; width: calc(100% - 40px); }
      .leip-consulting-panel h2.leip-title { font-size:22px; }
      .leip-cta { width:100%; border-radius: 10px; }
    }