.actually-area {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.actually-area-inner {
  position: relative;
}

.actually-area .t_line h2 > div {
  background-image: linear-gradient(to right, #111a22 50%, #585858 50%);
  background-size: 200% 100%;
  background-position-x: 100%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}
.dark .actually-area .t_line h2 > div {
  background-image: linear-gradient(to right, #111a22 50%, #464646 50%);
}
.actually-area .bg-area {
  position: absolute;
  top: 40%;
  left: 51%;
  transform: translate(-50%, -50%) scale(0);
  /* Start with scale 0 */
  background-color: var(--primary);
  width: 250px;
  /* Adjust width as needed */
  height: 250px;
  /* Adjust height as needed */
  border-radius: 50%;
  /* Circular shape */
}

.black_div {
  height: 1000px;
  background: #000;
}

.actually-wrapper.zoom-main {
  width: 100%;
  position: relative; /* required for pinning */
}
.actually-wrapper.zoom-main .actually-area.has-zoom {
  transform-origin: center center; /* ensures zoom scales from center */
}