@keyframes typewriter{
    from{width: 0;}
    to{width: 24em;}
    }
  
    @keyframes typewriter{
    from{width: 0;}
    to{width: 24em;}
    }
  
    @keyframes blinkTextCursor{
    from{border-right-color: rgba(255,255,255,.75);}
    to{border-right-color: transparent;}
    }

    
@keyframes navbar-show {
    from {
        transform: translateY(-100%)
    }
    to {
        transform: translateY(0)
    }
  }
  
  @keyframes dropdown-show {
    from {
        transform: scale(0.9);
        opacity: 0
    }
    to {
        transform: scale(1);
        opacity: 1
    }
  }

  @keyframes rotate {
    to {
      transform: rotate(5deg);
    }
  }
  
  @keyframes enter {
    to {
      opacity: 1;
    }
  }
  
  @keyframes breathe {
    to {
      transform: translateY(-5px);
    }
  }

  @keyframes first {
    0%,15%,30%,45%,60%,75%,100% {
      transform: rotate(0deg) translateY(6vmin);
    }
    5%,20%,35%,50%,65%,80%,95% {
      transform: rotate(15deg) translateY(-6vmin);
    }
    10%,25%,40%,55%,70%,85%,90% {
      transform: rotate(-15deg) translateY(6vmin);
    }
  }
  
  @keyframes second {
    0%,15%,30%,45%,60%,75%,100% {
      transform: rotate(0deg) translateY(-6mvin);
    }
    5%,20%,35%,50%,65%,80%,95% {
      transform: rotate(15deg) translateY(6vmin);
    }
    10%,25%,40%,55%,70%,85%,90% {
      transform: rotate(-15deg) translateY(-6vmin);
    }
  }
  

  .muzikiconlari {
    position: absolute;
    height: 10vmin;
    width: auto; top: 50px; z-index: 999; right:0px
  }
  .muzikiconlari span {
    display: inline-block;
    font-size: 3em;
    margin-left: 2vmin;
    color: #fff;
  }
  .muzikiconlari span:after {
    width: 1vmin;
    height: 1vmin;
    background-color: #d43509 !important;border-radius: 50%;
  }
  .muzikiconlari span:nth-child(1) {
    animation: first 15s linear infinite;
  }
  .muzikiconlari span:nth-child(2) {
    animation: second 15s linear infinite;
  }
  .muzikiconlari span:nth-child(3) {
    animation: first 15s linear infinite;
  }
  .muzikiconlari span:nth-child(4) {
    animation: second 15s linear infinite;
  }

.animated-svg-step1,
.animated-svg-step3,
.animated-svg-step4 {
  animation: enter .25s forwards, breathe 3s alternate infinite;
}

.animated-svg-step3 {
  animation-delay: 1s, -1s;
}

.animated-svg-step4 {
  animation-delay: 1.5s, -2s;
}

.animated-svg-pencil-lines {
  animation: enter .25s .5s forwards;
}

.animated-svg-pencil,
.animated-svg-pencil2,
.animated-svg-bubble {
  animation: enter .25s .5s forwards, rotate 3s alternate infinite;
}

.animated-svg-pencil {
  transform-origin: bottom;
}

.animated-svg-pencil2 {
  transform-origin: center 65%;
}

.animated-svg-bubble {
  transform-origin: 65%;
}

.animated-svg-dot1,
.animated-svg-dot2,
.animated-svg-dot3 {
  animation: enter .25s forwards;
  opacity: 0;
}

.animated-svg-dot1 {
  animation-delay: .5s;
}

.animated-svg-dot2 {
  animation-delay: .8s;
}

.animated-svg-dot3 {
  animation-delay: 1s;
}

.bgninhepsi {height: 89vh;}
.layers-background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
}
.pattern::before {
  width: 80vw;
  height: 80vw;
  bottom: -40vw;
  left: 25vw;
}
.p-0 {
  padding: 0 !important;
}
.layers {
  position: relative;
  margin: 0 auto;
}
.pattern::before, .pattern::after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
  position: absolute;
  content: "";
  display: block;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10rem;
}
.pattern::before, .pattern::after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
  position: absolute;
  content: "";
  display: block;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10rem;
}

.pattern::after {
  width: 50vw;
  height: 50vw;
  bottom: -30vw;
  left: 80vw;
}

.fill-cyan {fill: #7d50fe!important;}
.fill-blue{
  fill: rgb(0, 183, 255) !important;
}
.fill-yellow {
  fill: #fc0 !important;
}
.fill-pink {
  fill: #ff4e4f !important;
}
.fill-purple {
  fill: #ff4e4f !important;
}
.fill-purple {
  fill: #ff4e4f !important;
}
.fill-cyan {
  fill: #ff4e4f !important;
}
.fill-purple {
  fill: #02c4b5 !important;
}
.fill-asp {
  fill: #f56403 !important;
}