:root {
        --duration: 1.5s;
        --container-size: 250px;
        --box-size: 33px;
        --box-border-radius: 15%;
      }
    
      .preloader-block {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: 999999;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        opacity: 1;
    }
    .preloader {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        overflow: hidden;
        animation-delay: 1s;
        width: 90vw;
      }
      
      .item-1 {
        width: 20px;
        height: 20px;
        background: #5173d1;
        border-radius: 50%;
        background-color: #68d3ee;
        margin: 0 7px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      @keyframes scale {
        0% {
          transform: scale(1);
        }
        50%,
          75% {
          transform: scale(2.5);
        }
        78%, 100% {
          opacity: 0;
        }
      }
      .item-1:before {
        content: '';
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #68d3ee;
        opacity: 0.7;
        animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
        animation-delay: 200ms;
        transition: 0.5s all ease;
        transform: scale(1);
      }
      
      .item-2 {
        width: 20px;
        height: 20px;
        background: #5173d1;
        border-radius: 50%;
        background-color: #68cfee;
        margin: 7px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      @keyframes scale {
        0% {
          transform: scale(1);
        }
        50%,
          75% {
          transform: scale(2.5);
        }
        78%, 100% {
          opacity: 0;
        }
      }
      .item-2:before {
        content: '';
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #68cfee;
        opacity: 0.7;
        animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
        animation-delay: 400ms;
        transition: 0.5s all ease;
        transform: scale(1);
      }
      
      .item-3 {
        width: 20px;
        height: 20px;
        background: #5173d1;
        border-radius: 50%;
        background-color: #68bdee;
        margin: 7px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      @keyframes scale {
        0% {
          transform: scale(1);
        }
        50%,
          75% {
          transform: scale(2.5);
        }
        78%, 100% {
          opacity: 0;
        }
      }
      .item-3:before {
        content: '';
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #68bdee;
        opacity: 0.7;
        animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
        animation-delay: 600ms;
        transition: 0.5s all ease;
        transform: scale(1);
      }
      
      .item-4 {
        width: 20px;
        height: 20px;
        background: #5173d1;
        border-radius: 50%;
        background-color: #68a6ee;
        margin: 7px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      @keyframes scale {
        0% {
          transform: scale(1);
        }
        50%,
          75% {
          transform: scale(2.5);
        }
        78%, 100% {
          opacity: 0;
        }
      }
      .item-4:before {
        content: '';
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #68a6ee;
        opacity: 0.7;
        animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
        animation-delay: 800ms;
        transition: 0.5s all ease;
        transform: scale(1);
      }
      
      .item-5 {
        width: 20px;
        height: 20px;
        background: #5173d1;
        border-radius: 50%;
        background-color: #6894ee;
        margin: 7px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      @keyframes scale {
        0% {
          transform: scale(1);
        }
        50%,
          75% {
          transform: scale(2.5);
        }
        78%, 100% {
          opacity: 0;
        }
      }
      .item-5:before {
        content: '';
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #6894ee;
        opacity: 0.7;
        animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
        animation-delay: 1000ms;
        transition: 0.5s all ease;
        transform: scale(1);
      }