:root{
      /* Brand */
      --ink:#0a1f44;          /* deep navy for text on white */
      --blue:#0e6fff;         /* brand blue */
      --blue-2:#1d4ed8;       /* secondary blue */
      --mint:#e9f3ff;         /* light tint */
      --card: rgba(255,255,255,.78);
      --border: rgba(255,255,255,.35);
      --shadow: 0 20px 50px rgba(2,12,46,.18);
      --radius: 20px;

      /* Accessibility mix */
      --text-strong:#ffffff;
      --text-soft:#e7eeff;
      --text-dim:#cfe0ff;
    }

    /* Background stays premium-dark */
    html,body{
      background: radial-gradient(1200px 800px at 20% 0%, #0b1540 0%, #060b26 45%, #050919 100%);
      color: var(--text-soft);
      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }

    /* NEW: White main menu with blue logo */
    .navbar{
      background:#ffffff !important;
      border-bottom: 1px solid rgba(10,31,68,.08);
      box-shadow: 0 6px 25px rgba(6, 11, 30, .06);
    }
    .navbar-brand img{height:34px; width:auto;}
    .nav-link{
      color:#25324d !important;
      font-weight:600;
    }
    .nav-link:hover{color:#0b46c5!important;}
    .navbar .btn-brand{
      color:#fff !important;
    }

    /* Hero */
    .hero{
      position:relative; overflow:hidden;
      padding-top:7.5rem; padding-bottom:5.5rem;
    }
    .hero .shape{
      position:absolute; inset:-10%;
      background:
        radial-gradient(45% 60% at 70% 20%, rgba(14,111,255,.25), transparent 60%),
        radial-gradient(35% 40% at 10% 90%, rgba(29,78,216,.18), transparent 60%);
      filter: blur(40px); z-index:0;
    }
    .hero h1, .hero p.lead{ text-shadow:0 0 24px rgba(0,0,0,.6); }
    .tag{display:inline-flex; gap:.5rem; align-items:center; font-size:.85rem; padding:.35rem .6rem;
      background: rgba(14,111,255,.17); border:1px solid rgba(14,111,255,.38); color:#eef3ff; border-radius:999px;}

    /* Buttons & links */
    .btn-brand{background: linear-gradient(135deg, var(--blue), var(--blue-2)); color:#fff; border:0;}
    .btn-brand:hover{filter: brightness(1.05); color:#fff;}
    .link-fx{position:relative; text-decoration:none; color:#bcd2ff;}
    .link-fx::after{content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:#4da3ff; transition:width .25s ease;}
    .link-fx:hover::after{width:100%;}

    /* Cards / glass */
    .glass{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);}
    .ix-card:hover{transform: translateY(-4px); transition: transform .25s ease;}
    .chip{display:inline-block; font-size:.8rem; padding:.25rem .6rem; border-radius:999px; border:1px solid rgba(255,255,255,.45); color:#f2f6ff;}

    /* Section headings with strong contrast */
    section{padding:80px 0;}
    .section-title{color:var(--text-strong);}
    .subtle{color:#e6edff; opacity:.96;}

    /* “Grayish/whitish” areas now high-contrast */
    .light-panel{
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.12));
      border:1px solid rgba(255,255,255,.22);
      border-radius: var(--radius);
      color:#f7fbff;
    }
    .metric .label{color:#d7e6ff;}
    .metric .value{color:#fff;}

    /* Process */
    .step{position:relative; padding-left:46px;}
    .step i{position:absolute; left:0; top:0; width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(14,111,255,.2); border:1px solid rgba(14,111,255,.45); color:#e8f1ff;}

    /* CTA band */
    .cta{
      background: linear-gradient(120deg, rgba(14,111,255,.18), rgba(29,78,216,.12));
      border:1px solid rgba(255,255,255,.18); border-radius: calc(var(--radius) + 6px);
    }

    /* Forms */
    .form-control, .form-select{
      background: rgba(255,255,255,.14);
      border-color: rgba(255,255,255,.32);
      color:#fff;
    }
    .form-control:focus{border-color: var(--blue); box-shadow: 0 0 0 .2rem rgba(14,111,255,.25);}
    ::placeholder{color:#cfe0ff;}

    /* Footer */
    footer{padding:40px 0; border-top:1px solid rgba(255,255,255,.1); color:#cfe0ff;}

    /* Responsive */
    @media (max-width: 991.98px){
      .hero{padding-top:6.5rem;}
    }
    .profile-card{
  background: rgba(12,20,50,.72);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
  color:#eef3ff;
  backdrop-filter: blur(16px);
}

.profile-img-wrapper{
  position: relative;
}
.profile-img-wrapper::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(14,111,255,.3), rgba(29,78,216,.1));
  z-index:-1;
  filter: blur(12px);
}

.text-label{
  color:#cfe0ff;
  font-weight:400;
}

.badge-availability{
  background: rgba(14,111,255,.3);
  color:#fff;
  padding: .25rem .7rem;
  border-radius:999px;
  font-size:.75rem;
  font-weight:500;
  border:1px solid rgba(14,111,255,.35);
}

.metric-box{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  color:#ffffff;
}

.label{color:#b8c9ff;}
.value{color:#ffffff;}

.cap-chip{
  display:inline-block;
  font-size:.75rem;
  padding: .28rem .65rem;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  color:#dfe7ff;
}
.project-card{
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius:20px;
  overflow:hidden;
  color:#fff;
  backdrop-filter: blur(14px);
  transition:.3s ease-in-out;
}
.project-card:hover{
  transform: translateY(-5px);
  box-shadow:0 18px 40px rgba(0,0,0,.4);
}

.img-box img{
  width:100%;
  height:200px;
  object-fit:cover;
}

.project-type{
  font-size:.78rem;
  color:#bbcbff;
}

.project-title{
  color:#fff;
  font-weight:600;
}

.project-text{
  color:#dde7ff;
}

.project-features li{
  color:#e8efff;
}

.client{
  color:#d0dcff;
  font-style:italic;
}
.btn-cta {
  background: linear-gradient(135deg, var(--blue), var(--blue-2));
  border: none;
  color: #fff !important;
  font-size: .85rem;
  font-weight: 600;
  padding: .55rem 1.2rem;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: .25s ease;
  box-shadow: 0 8px 18px rgba(14,111,255,.28);
}

.btn-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(14,111,255,.38);
  filter: brightness(1.07);
}

.btn-cta i {
  font-size: .95rem;
}
.service-card {
  background: rgba(12,20,50,.72);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 22px;
  padding: 28px;
  color: #eef3ff;
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 38px rgba(0,0,0,.35);
  display: flex;
  flex-direction: column;
  transition: .25s ease;
}
.service-card:hover {
  transform: translateY(-6px);
}

.service-header i {
  font-size: 2rem;
  color: var(--blue);
}
.service-title {
  font-weight: 600;
  margin: 0;
  color: #fff;
}
.service-header {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.service-text {
  color: #dfe7ff;
  font-size: .95rem;
  margin-bottom: 1.5rem;
}

/* Ensure button sits at the bottom consistently */
.service-card .btn-cta {
  margin-top: auto;
}
.process-card, .toolbox-card {
  background: rgba(12,18,50,.75);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 22px;
  box-shadow: 0 20px 40px rgba(0,0,0,.32);
  backdrop-filter: blur(18px);
  color: #eef3ff;
}

.step-block {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.step-icon {
  width: 48px;
  height: 48px;
  background: rgba(14,111,255,.25);
  border-radius: 12px;
  border: 1px solid rgba(14,111,255,.5);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.25rem;
  color: #fff;
  flex-shrink: 0;
}
.step-title {
  margin-bottom: .25rem;
  color: #ffffff;
  font-weight: 600;
}
.step-text {
  color: #dfe7ff;
  font-size: .95rem;
}

.tool-title {
  color: #fff;
  font-weight: 600;
}
.tool-text {
  color: #dfe7ff;
}
.tool-chip {
  padding: .35rem .85rem;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  font-size:.85rem;
}

.cta-box {
  background: linear-gradient(120deg, rgba(14,111,255,.22), rgba(29,78,216,.25));
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 24px;
  padding: 2rem 2.5rem;
  box-shadow: 0 26px 50px rgba(0,0,0,.4);
}
.cta-title {
  color:#fff;
  font-weight:700;
  margin:0 0 .3rem;
}
.cta-text {
  color:#e4ecff;
  opacity:.95;
}

.hero-sub {
  color:#e6eeff;
  opacity:.95;
}
.insight-card{
  background: rgba(12,18,50,.75);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px rgba(0,0,0,.32);
  transition: .3s ease;
  display: flex;
  flex-direction: column;
}
.insight-card:hover{
  transform: translateY(-6px);
}

.insight-img img{
  width:100%;
  height:170px;
  object-fit:cover;
}

.insight-content{
  padding: 1.4rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}

.insight-meta{
  font-size:.75rem;
  color:#bcd2ff;
  text-transform:none;
}

.insight-title{
  color:#fff;
  font-weight:600;
  font-size:1.1rem;
}

.insight-text{
  color:#dfe7ff;
  font-size:.95rem;
  margin-bottom:1rem;
}

.small-cta{
  font-size:.8rem;
  align-self:flex-start;
}

/* Make CTA match body style */
.btn-cta{
  background: linear-gradient(135deg, var(--blue), var(--blue-2));
  border:none;
  color:#fff !important;
  padding:.5rem 1.2rem;
  border-radius:50px;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-size:.85rem;
  font-weight:600;
  box-shadow:0 8px 18px rgba(14,111,255,.28);
  transition:.25s ease;
}
.btn-cta:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(14,111,255,.38);
}
.contact-card, .direct-contact {
  background: rgba(12,18,50,.78);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 24px;
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 45px rgba(0,0,0,.38);
  color: #eef4ff;
}

.input-field {
  position: relative;
}
.input-field i {
  position: absolute;
  top: 12px;
  left: 14px;
  font-size: 1rem;
  color: #8fb5ff;
}
.input-field .form-control,
.input-field .form-select {
  padding-left: 38px !important;
}

.textarea-field i {
  top: 12px;
}

.contact-item {
  color:#e7edff;
  font-size:.95rem;
}
.whatsapp-link {
  color:#46d466;
  text-decoration:none;
  font-weight:500;
}
.whatsapp-link:hover {
  text-decoration:underline;
}

.contact-heading {
  color:#fff;
  font-weight:600;
}
.contact-subtitle {
  color:#d7e2ff;
}

.social-links a {
  color:#d7e2ff;
  font-size:1.3rem;
  margin-right:1rem;
}
.social-links a:hover {
  color:var(--blue);
  transform:translateY(-3px);
  transition:.3s;
}

/* form text */
.form-label {
  color: #dfe7ff;
  font-weight:500;
}

/* --- Mobile Navbar Improvements --- */
@media (max-width: 991.98px) {
  .navbar {
    padding: 0.75rem 1rem;
  }

  /* When menu is expanded */
  #nav {
    background: #ffffff;
    border-radius: 0 0 12px 12px;
    padding: 1rem;
    box-shadow: 0 8px 20px rgba(0,0,0,.15);
  }

  .navbar-nav {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }

  .nav-link {
    padding: 0.5rem 0 !important;
    width: 100%;
    font-size: 1rem;
  }

  .navbar .btn-brand {
    width: 100%;
    text-align: center;
    margin-top: 0.75rem;
  }
}

/* Make toggler icon more visible */
/* Show the mobile menu icon in brand blue (#0e6fff) */
.navbar-light .navbar-toggler-icon {
  width: 1.5rem;
  height: 1.5rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  background-size: contain;
  background-repeat: no-repeat;
}

/* Remove default border */
.navbar-toggler {
  border: none !important;
  box-shadow: none !important;
}
/* === NAVBAR THEME UPDATE: Dark Bluish #0050A0 === */
.navbar {
  background: #0050A0 !important; /* Solid dark blue */
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* Logo spacing remains */
.navbar-brand img {
  height: 34px;
}

/* Navigation link colors */
.nav-link {
  color: #EAF2FF !important;  /* Soft white-blue */
  font-weight: 500;
}
.nav-link:hover,
.nav-link:focus {
  color: #ffffff !important;
}

/* Mobile Toggler Icon (hamburger) – now light for dark background */
.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
.navbar-toggler {
  border: none;
  box-shadow: none !important;
}

/* "Book a Call" button inside navbar */
.navbar .btn-brand {
  background: #ffffff;
  color: #0050A0 !important;
  font-weight: 600;
  border: none;
}
.navbar .btn-brand:hover {
  background: #EAF2FF;
  color: #003b7a !important;
}

/* Mobile menu dropdown background */
@media (max-width: 991px) {
  #navMenu {
    background: #0050A0;
    padding: 1rem;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,.4);
  }
  .nav-link {
    padding: 0.6rem 0 !important;
    width: 100%;
  }
  .navbar .btn-brand {
    width: 100%;
    margin-top: 0.75rem;
  }
}
  /* Modern glass-effect service cards */
.service-mini-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  text-align: center;
}

.service-mini-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

/* Service icons */
.icon-service {
  font-size: 2.4rem;
  color: #0e6fff;  /* or use your theme blue */
}

/* Improve text readability */
.service-mini-card p {
  color: #f0f4ff !important;
  opacity: 0.9;
}

.section-title {
  color: #ffffff !important;
}
.service-mini-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  text-align: center;
}

.service-mini-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.icon-service {
  font-size: 2.4rem;
  color: #0e6fff;
}

/* Ensure no horizontal overflow */
#offers {
  overflow: hidden;
}
.testimonial-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  color: #eef3ff;
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  height: 100%;
}

.testimonial-text {
  font-size: 0.95rem;
  color: #f1f6ff;
  line-height: 1.6;
  opacity: .95;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(1);
  width: 2.2rem;
  height: 2.2rem;
}