.home {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 50px;
    padding: 2px 9% 0;
    min-height: 100dvh;
    visibility: hidden;
    opacity: 0;
    animation: show-home 0.8s ease forwards;
    animation-delay: 0.2s;
}

@keyframes show-home {
    100% {
        visibility: visible;
        opacity: 1;
    }
}

.home-info {
    display: flex;
    flex-direction: column; /* stack children vertically */
    align-items: flex-start; /* keep text and button aligned left */
    gap: 20px; /* space between text and button */
}

.home-info .btn {
    margin-top: 20px; /* extra space if needed */
}

.home-info h1 {
    font-size: 55px;
}

.home-info h2 {
    display: inline-block;
    font-size: 32px;
    margin-top: -10px;
}

.home-info h2 span {
    position: relative;
    display: inline-block;
    color: transparent;
    -webkit-text-stroke: .7px #7cf03d;
    animation: display-text 18s linear infinite;
    animation-delay: calc(-4s * var(--i));
}

@keyframes display-text {
    20%,100% {
        display: none;
    }
} 

.home-info h2 span::before {
    content: attr(data-text);
    position: absolute;
    width: 0;
    border-right: 2px solid #7cf03d;
    color: #7cf03d;
    white-space: nowrap;
    overflow: hidden;
    animation: fill-text 4s linear infinite;
}

@keyframes fill-text {
    10%,
    100% {
        width: 0;
    }

    70%,
    90% {
        width: 100%;
    }
}


.home-img .img-box {
  position: relative;
  width: 32vw;
  height: 32vw;
  border-radius: 50%;
  padding: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.home-img .img-box::before,
.home-img .img-box::after {
  content: '';
  position: absolute;
  width: 150%;         
  height: 150%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  background: conic-gradient(transparent, transparent, transparent, #7cf03d);
  border-radius: 50%;
  animation: rotate-border 10s linear infinite;
}

.home-img .img-box::after {
  animation-delay: -5s;
}

@keyframes rotate-border {
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.home-img .img-box .img-item {
  position: relative;
  width: 100%;
  height: 100%;
  background: #1f242d;
  border-radius: 50%;
  border: .1px solid #1f242d;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  overflow: hidden;
}

.home-img .img-box .img-item img {
  position: relative; 
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: normal;
  filter: drop-shadow(0 0 10px #7cf03d);
}

@media (max-width: 832px) {
  .home {
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    height: auto;
  }

  .home-info h1 {
    font-size: 32px;
  }

  .home-info h2 {
    font-size: 20px;
  }

  .home-img .img-box {
    width: 60vw;
    height: 60vw;
  }

   .home-img .img-box .img-item img {
    width: 100%;
    height: 100%;
    right: auto;
  }
}