/*  how work */
.secworkbg {
  background-color: var(--text-black);
  padding: 60px 10px;
  border-radius: 20px;
}

.work-section {
  background: var(--text-black);
  padding: 80px 0;
}

/* Main images */
.main-img,
.img-card img {
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Right card effect */
.img-card {
  transform: translateY(50px);
  /* niche shift */
}

/* Floating Review Box */
.review-box {
  position: absolute;
  top: 32px;
  left: 42px;
  background:var(--white-tranp);
  padding: 20px;
  border-radius: 16px;
  color:var(--white);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
  z-index: 10;

  animation: floatBox 3s ease-in-out infinite;
}

/* Animation */
@keyframes floatBox {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-15px); }
  100% { transform: translateY(0px); }
}

/* avatars */
.review-box .avatars {
  display: flex;
  margin-bottom: 10px;
}

.review-box .avatars img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 2px solid var(--white);
  margin-left: -10px;
}

.review-box h3 {
  font-size: 28px;
  font-family: 'Inter';
  font-weight: bold;
  margin: 0;
}
.review-box h3 i{
  color: var(--secondary-color);
}

.review-box p {
  font-family: 'Inter';
  font-size: 14px;
  margin: 0;
  opacity: 0.8;
}
.secworbgtext h5{
  color: var(--white) !important;
}
.secworbgtext h2{
  color: var(--white) !important;
  font-size: 44px !important;
}
.steps-section{
  background-image: radial-gradient(#222 1px, transparent 1px);
  background-size: 20px 20px;
  color:var(--white);
}

.step-box{
  display:flex;
  align-items:center;
  gap:20px;
  padding:25px 0;
  border-bottom:1px solid var(--text-gray);
}

.step-icon svg{
  width:50px;
  height:50px;
  stroke:var(--primary-color);
  fill:none;
  stroke-width:2;
}

.step-content h4{
  font-size:20px;
  font-weight:600;
  margin-bottom:6px;
}

.step-content p{
  font-size:14px;
  color:var(--text-gray);
  max-width:500px;
}
/* how work end */