.loader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f7f9fb;
        transition: opacity 0.75s, visibility 0.75s;
    }

    .loader-hidden{
      opacity: 0;
      visibility: hidden;
    }
    .loader::after{
      content: "";
      width: 75px;
      height: 75px;
      border: 5px solid #dddd;
      border-top-color: #77B536;
      border-radius: 50%;
      animation: loading 0.75s ease infinite;
    }
    @keyframes loading{
      from{
        transform: rotate(0turn);
      }
      to{
        transform: rotate(1turn);
      }
    }