.container-preloader{
  position: absolute;
  top: 0;
  width: 100%;
 height: 100svh;
  z-index:999999999;
  overflow: hidden;
}
.pre-loader{
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: var(--primary-color);
}

.count{
  position: absolute;
  bottom: 4%;
  right: 8%;
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
}
.count p{
  font-family:var(--font-secondary);
  font-size: 160px;
  color: var(--primary-color);
 }
.count span{
  font-family:var(--font-secondary);
  font-size: 160px;
  color: var(--primary-color);
  }
.loader-2{
    position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  background-color: var(--primary-color);
 }
.load-audvis{opacity: 0;pointer-events: none;}
.copy{font-family: var(--font-primary);
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  top: 25%;
  width: 30%;
  height: 30%;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}
.copy p{color: var(--primary-color);
font-size: 124px;
text-transform: uppercase;
font-weight: 400;
}
@media  (max-width:1440px) {
  .count p, .count span{font-size: 112px;}
  .copy p{font-size:96px;}
}
@media  (max-width:1067px) {
  .count p, .count span{font-size: 96px;}
  .copy p{font-size:80px;}
}
@media  (max-width:769px) {
  .count p, .count span{font-size: 80px;}
  .copy p{font-size:64px;}
}
@media  (max-width:620px) {
  .count p, .count span{font-size: 64px;}
  .copy p{font-size:48px;}
}
@media  (max-width:338px) {
  .count p, .count span{font-size: 56px;}
  .copy p{font-size:44px;}
}
.loader-4{ 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--secondary-color);
 }
.loader-3{ 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:var(--background-color);
 z-index: 2;
}