<style>

.hero-section{
  min-height:70vh;
  display:flex;
  align-items:center;
  background:
    linear-gradient(
      135deg,
      #ffe8e8 0%,
      #fff5f0 50%,
      #e8f0ff 100%
    );
}

.hero-circle{
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
}

.hero-circle-1{
  width:300px;
  height:300px;
  background:rgba(204,0,0,0.08);
  top:10%;
  left:5%;
}

.hero-circle-2{
  width:350px;
  height:350px;
  background:rgba(0,123,255,0.08);
  bottom:10%;
  right:10%;
}

.hero-circle-3{
  width:500px;
  height:500px;
  background:rgba(255,193,7,0.05);
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

.hero-image{
  height:520px;
  object-fit:cover;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      to top,
      rgba(0,0,0,0.6),
      transparent
    );
}

.hero-icon-box{
  width:50px;
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:rgba(255,255,255,0.2);
  backdrop-filter:blur(8px);
  font-size:20px;
}

.floating-card{
  position:absolute;
  top:40px;
  left:-20px;
  max-width:250px;
}

.satisfaction-box{
  position:absolute;
  bottom:80px;
  right:-10px;
  background:
    linear-gradient(
      135deg,
      #cc0000,
      #8b0000
    );

  padding:20px 25px;
  border-radius:20px;
}

@media(max-width:991px){

  .hero-image{
    height:400px;
  }

  .floating-card{
    left:10px;
  }

  .satisfaction-box{
    right:10px;
  }

}

</style>