.hone-banner-effect {
  background: url(../images/home-banner.png) no-repeat;
  background-size: cover;
      background-position: top center;
}
.chip-disc-primary::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--color-2B62EF);
}
.ig-box {
  display: flex;
  width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
  border-radius: 24px;
  background: linear-gradient(135deg, #ebf7ff 0%, var(--bg-white) 100%);
  box-shadow:
    0 1px 0 0 var(--bg-white) inset,
    0 0 0 1px var(--border-E2E9F0);
}
.counter-box {
  display: flex;
  width: 36px;
  height: 36px;
  justify-content: center;
  align-items: center;
  border-radius: 24px;
  color: var(--text-white);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  background: linear-gradient(135deg, var(--color-2B62EF) 0%, var(--color-30aff8) 100%); 
} 
.avatar-box {
  display: flex;
  width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
  border-radius: 24px;
  color: var(--text-white);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  background: linear-gradient(135deg, var(--color-63B3FF)  0%,  var(--color-2B62EF) 100%); 
} 

.card-hover-primary {
  transition: all 0.6s ease;
  background-position: left 110px bottom 44px;
}
.card-hover-primary:hover {
  border-color: var(--primary-color);
  box-shadow:
    0 4px 6px -1px rgba(10, 13, 18, 0.1),
    0 2px 4px -2px rgba(10, 13, 18, 0.06);
  background: radial-gradient(
      50% 50% at 50% 50%,
      rgba(166, 210, 255, 0.4) 0%,
      rgba(166, 210, 255, 0) 100%
    )
    no-repeat;
  background-position: left 110px bottom 44px;
}

.banner-floting-img{
  position: absolute;
  top: var(--top, auto);
  left: var(--left, auto);
  right: var(--right, auto);
  bottom: var(--bottom, auto); 
  height: auto;
  transition: all 0.6s ease;
}

.ig-box.ig-box-white{
  background: var(--bg-white);
  box-shadow: 0 4px 14px -6px rgba(40, 103, 228, 0.35);
   border: 1px solid var(--border-E2E9F0);
}
.ig-box.bg-EBF1FF{
  background: var(--bg-EBF1FF);
  box-shadow: 0 4px 14px -6px rgba(40, 103, 228, 0.35);
   border: 1px solid var(--border-E2E9F0);
}
 
.grid-box-conrainer{
  gap: 1px;
}
.grid-box-conrainer .grid-box{
   outline: 1px solid var(--border-E2E9F0);
   outline-offset: 0px;
   transition: all 0.6s ease;
}
.grid-box-conrainer .grid-box:hover{
   background: var(--bg-EBF1FF);
}

.grid-box-conrainer .grid-box .ig-grid-box{
  transition: all 0.6s ease;
  box-shadow: 0 0 0 0;
}
.grid-box-conrainer .grid-box:hover .ig-grid-box{
   border-color: var(--primary-color);
   box-shadow: 0 6px 24px -4px rgba(54, 112, 253, 0.20);


}
.hover-shadow{
  transition: box-shadow 0.6s ease;
}
.hover-shadow:hover{
  box-shadow: 0 12px 40px -8px rgba(72, 100, 145, 0.14), 0 2px 6px 0 rgba(93, 100, 111, 0.06);


}