@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Genos:ital,wght@0,100..900;1,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

*{
    margin: 0;
    padding: 0;
    font-family: "Montserrat", sans-serif;
}

html {
    overflow: scroll;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body{
  background: rgb(1,1,1);
}


::-webkit-scrollbar {
    width: 0;  
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #fff;
}

#circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #E7E2DD;
    position: fixed;
    transition: transform 0.3s ease-out, width 0.3s ease-out, height 0.3s ease-out; /* добавляем transition для width и height */
    z-index: 1000;
    pointer-events: none;
    mix-blend-mode: difference;
}


.loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #010101;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }

  .three-body {
    --uib-size: 50px;
    --uib-speed: 0.8s;
    --uib-color: #5D3FD3;
    position: relative;
    display: inline-block;
    height: var(--uib-size);
    width: var(--uib-size);
    animation: spin78236 calc(var(--uib-speed) * 2.5) infinite linear;
   }
   
   .three-body__dot {
    position: absolute;
    height: 100%;
    width: 30%;
   }
   
   .three-body__dot:after {
    content: '';
    position: absolute;
    height: 0%;
    width: 100%;
    padding-bottom: 100%;
    background-color: var(--uib-color);
    border-radius: 50%;
   }
   
   .three-body__dot:nth-child(1) {
    bottom: 5%;
    left: 0;
    transform: rotate(60deg);
    transform-origin: 50% 85%;
   }
   
   .three-body__dot:nth-child(1)::after {
    bottom: 0;
    left: 0;
    animation: wobble1 var(--uib-speed) infinite ease-in-out;
    animation-delay: calc(var(--uib-speed) * -0.3);
   }
   
   .three-body__dot:nth-child(2) {
    bottom: 5%;
    right: 0;
    transform: rotate(-60deg);
    transform-origin: 50% 85%;
   }
   
   .three-body__dot:nth-child(2)::after {
    bottom: 0;
    left: 0;
    animation: wobble1 var(--uib-speed) infinite
       calc(var(--uib-speed) * -0.15) ease-in-out;
   }
   
   .three-body__dot:nth-child(3) {
    bottom: -5%;
    left: 0;
    transform: translateX(116.666%);
   }
   
   .three-body__dot:nth-child(3)::after {
    top: 0;
    left: 0;
    animation: wobble2 var(--uib-speed) infinite ease-in-out;
   }
   
   @keyframes spin78236 {
    0% {
     transform: rotate(0deg);
    }
   
    100% {
     transform: rotate(360deg);
    }
   }
   
   @keyframes wobble1 {
    0%,
     100% {
     transform: translateY(0%) scale(1);
     opacity: 1;
    }
   
    50% {
     transform: translateY(-66%) scale(0.65);
     opacity: 0.8;
    }
   }
   
   @keyframes wobble2 {
    0%,
     100% {
     transform: translateY(0%) scale(1);
     opacity: 1;
    }
   
    50% {
     transform: translateY(66%) scale(0.65);
     opacity: 0.8;
    }
   }


.hide_loader {
    display: none;
}

a{
    text-decoration: none;
    color: #fff;
}

.scroll_absolute{
    position: absolute;
    top: 0;
    height: 100%;
    overflow: hidden;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.scroll_absolute span{
  writing-mode: vertical-rl; /* Расположение текста вертикально снизу вверх */
    text-orientation: mixed;
    transform: rotate(180deg);
    color: #93999F;
    text-transform: uppercase;
    font-size: 12px;
}

.scroll_slider {
  margin-top: 20px;
  width: 1px;
  height: 80px;
  background-color: #141C26;
  position: relative;
  overflow: hidden;
}

.slider_wrapper {
  width: 100%;
  height: 20px;
  background-color: #fff;
  position: absolute;
  top: 0;
  animation: fillAnimation 3s linear infinite;
}

@keyframes fillAnimation {
  0% {
    height: 0;
    top: 0;
  }
  50% {
    height: 100%;
    top: 0;
  }
  100% {
    height: 0;
    top: 100%;
  }
}


.hidden{
  opacity: 0;
  filter: blur(10px);
  transition: all 1s;
}

.show{
  filter: blur(0px);
  opacity: 1;
}

.mt-4{
  margin-top: 4rem;
}

.mt-6{
  margin-top: 6rem;
}

.mt-2{
  margin-top: 2rem;
}