.circular-preloader-wrapper {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1100px;
    width: 100%;
    border-radius: 2.5rem;
  }
  
  .circular-preloader__img-bg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transform: scale(1.2);
    transition: transform 2s ease;
  }
  
  .circular-preloader__img-bg.done {
    transform: scale(1);
  }
  
  .circular-preloader {
    transition: clip-path 1s ease-in-out;
    transition-delay: 0.25s;
  }
  
  .circular-preloader.done {
    clip-path: inset(0% 0% 100% 0%);
  }
  
  .circular-preloader::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 2.5rem;
    border: 1px solid transparent;
    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0.3),
        rgba(102, 102, 102, 0.3)
      )
      border-box;
    mask: linear-gradient(#fff 0, #fff 100%) padding-box,
      linear-gradient(#fff 0, #fff 100%);
    mask-composite: exclude;
    mix-blend-mode: color-dodge;
  }
  
  .circular-preloader__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 140px;
    height: 100%;
    width: 100%;
  }
  
  .circular-preloader.done .circular-preloader__inner {
    opacity: 0;
    transform: scale(0.8);
    transition: transform 0.4s ease, opacity 0.4s ease;
  }
  
  .circular-preloader__wrapper {
    position: relative;
    width: 260px;
    height: 260px;
  }
  
  .circular-preloader__ring {
    transform: rotate(-90deg);
  }
  
  .circular-preloader__progress,
  .circular-preloader__bg {
    fill: none;
    stroke-linecap: round;
  }
  
  .circular-preloader__bg {
    stroke: rgba(217, 217, 217, 0.3);
  }
  
  .circular-preloader__progress {
    stroke: #18181b;
    stroke-dasharray: 806;
    stroke-dashoffset: 806;
  }
  
  .circular-preloader__text {
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: "Oswald", sans-serif;
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1.3;
    transform: translate(-50%, -50%);
    color: rgba(217, 217, 217, 0.3);
  }
  
  .preloader__text {
    margin-top: 30px;
    font-family: "Oswald", sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.3;
    color: #ffffff;
    text-transform: uppercase;
  }
  
  @media screen and (max-width: 575px) {

    .circular-preloader-wrapper {
      border-radius: 1.5rem;
    }
  
    .circular-preloader__inner {
      margin-top: 0;
    }
  
    .circular-preloader {
      justify-content: center;
      min-height: 400px;
      max-height: 400px;
      border-radius: 1.5rem;
    }
  
    .circular-preloader::before {
      border-radius: 1.5rem;
    }
  }