  <style>
    body {
      font-family: 'Inter', sans-serif;
      background: #f8faff;
      overflow-x: hidden;
    }
    .navbar {
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
      position: sticky;
      top: 0;
      z-index: 1000;
      background: #fff;
    }
	.navbar {
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  position: fixed;        /* stays fixed at the top */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: #fff;
  margin-bottom: 0;       /* ensure no margin below */
  padding-bottom: 0;      /* remove any bottom padding */
}
.hero {
  position: relative;
  width: 100vw;
  min-height: calc(100vh - 80px);
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: -35px;
  margin-bottom: 0 !important;
  padding: 40px 5% 0 !important; /* remove internal blue space */
  background: linear-gradient(135deg, #eef6ff 0%, #ffffff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero > .container-fluid {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.hero .card {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* pull next section up to remove visible blue gap */
section.container {
  margin-top: -80px !important; /* stronger pull */
  padding-top: 0 !important;
}

@media (max-width: 992px) {
  .hero {
    height: auto;
    flex-direction: column;
    text-align: center;
    padding: 60px 15px 10px !important;
  }
  section.container {
    margin-top: -40px !important;
  }
}
@media (max-width: 992px) {
  .hero {
    height: auto;
    text-align: center;
    flex-direction: column;
    padding: 80px 15px;
  }
}
    .hero h1 span { color: #007bff; }
    .hero-img {
      position: relative;
      text-align: center;
    }
    .hero-img img {
      transition: transform 0.4s ease, box-shadow 0.4s ease;
    }
    .hero-img img:hover {
      transform: scale(1.03);
      box-shadow: 0 12px 30px rgba(0,0,0,0.15);
    }
    .hero-img .customer-overlay {
      position: absolute;
      bottom: -40px;
      right: 40px;
      width: 180px;
      border: 4px solid #fff;
      border-radius: 50%;
      box-shadow: 0 10px 25px rgba(0,0,0,0.2);
      transition: transform 0.4s ease;
    }
    .hero-img .customer-overlay:hover {
      transform: scale(1.05);
    }
    .card-custom {
      border: none;
      border-radius: 18px;
      box-shadow: 0 6px 18px rgba(0,0,0,0.08);
      transition: all 0.3s ease;
      background: #fff;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .card-custom:hover {
      transform: translateY(-6px);
      box-shadow: 0 12px 25px rgba(0,0,0,0.12);
    }
    .btn-rounded { border-radius: 30px; }
    .fade-in { animation: fadeIn 1s ease-in; }
    @keyframes fadeIn {
      from {opacity:0; transform:translateY(10px);}
      to {opacity:1; transform:translateY(0);}
    }
    footer {
      background: #0a1a2f;
      color: #fff;
      text-align: center;
      padding: 25px 0;
      margin-top: 30px;
    }
    .card-custom i {
      font-size: 2rem;
      color: #007bff;
    }
    .input-group .form-control, .input-group-text {
      height: 42px;
    }

/* 💥 Forcefully remove all space inside the hero bottom */
.hero {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  min-height: auto !important;
}

/* remove any gap from Bootstrap spacing classes inside hero */
.hero .container-fluid,
.hero .col-lg-6,
.hero .row {
  margin-bottom: 20px !important;
  margin-top: 40px !important;
  padding-bottom: 0 !important;
}

/* remove card padding at the bottom of chart */
.hero .card {
  padding-bottom: 40px !important;
  margin-bottom: 0 !important;
  border-bottom: none !important;
}

/* tighten the chart container itself */
#chartContainer {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  height: 250px !important; /* reduce height slightly if needed */
}

/* remove any invisible bottom spacing Bootstrap adds */
.hero::after {
  display: none !important;
  content: none !important;
}
/* Perfect small gap between hero and cards */
.hero {
  padding-bottom: 0 !important; /* keep hero itself tight */
  margin-bottom: 0 !important;
}

/* add a subtle, consistent breathing space below hero */
.hero + section.container {
  margin-top: 25px !important;   /* visually ideal: 20–30px */
  padding-top: 25px !important;
}

/* optional - if cards look cramped, add a soft top shadow */
.hero + section.container .card {
  margin-top: 40px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
</style>
