nav #logo {
  animation: logo 2s ease-in-out forwards;
}

@keyframes logo {
  from {
    clip-path: inset(0 100%  0 0 );

  }
  
  to {

    clip-path: inset(0);
  }
}

.text {
  animation: popIn 1s ease-in-out forwards;
  opacity: 0;
  transform: translateY(30px);
}

@keyframes popIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}




#hamkorlar .box {
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 0% cover 20%;
}

@keyframes appear {
  from {
    opacity: 0;
    clip-path: inset(100% 100% 0 0);
  }

  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}


.custom-btn {
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 0% cover 20%;

}

nav ul li {
  transform: translateY(-50px);
  animation: popIn 1s ease-in-out forwards;

}

nav ul li:nth-child(2) {
  animation-delay: .3s;
}

nav ul li:nth-child(3) {
  animation-delay: .6s;
}

@keyframes popIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}