@font-face{
    font-family: Abel;
    src: url('/Abel-Regular.ttf')
  }
  *{
    font-family: Abel;
  }
   
  .loader{
      width: 100%;
      height: 100%;
      z-index: 1;
      position: fixed;
      top: 0;
      left: 0;
      background: #434242;
      display: flex;
      justify-content: center;
      align-items: center;
  }
.loader .circle_1{
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--primary-color);
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0,-50%);
    justify-content: center;
    align-items: center;
    display: flex;

}
.loader .circle_1 .circle_2{
  border-radius: 50%;
  background-color: #fff; 
}
.loader .circle-container{
  position: absolute;
  width: 100px;
  height: 100px;
  background:var(--dark-color-1);
  animation: loader 1.2s  cubic-bezier(0.65,-0.04, 0.47, 0.66) alternate infinite;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  transform: translateX(120px);
  
}
.loader .text_1{
  font-size: 1.1rem;
  color: #fff;

}
.loader .text_2{
  font-size: 2rem;
  position: absolute;
  opacity: 0;
  color: #fff;
}
@keyframes loader{
  from{
       transform: translateX(-100px);
  }to{
      transform: translateX(0px);
  }
}

@keyframes loader_done{
    from{
         transform: translateX(-100px);
    }to{
        transform: translateX(0px);
    }
  }