/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/


*{
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}


@font-face {
  font-family: "Unbounded";
  src: url(../../fonts/Unbounded-ExtraLight.ttf);
  font-weight: 200;
}

@font-face {
  font-family: "Unbounded";
  src: url(../../fonts/Unbounded-Light.ttf);
  font-weight: 300;
}

@font-face {
  font-family: "Unbounded";
  src: url(../../fonts/Unbounded-Regular.ttf);
  font-weight: 400;
} 

@font-face {
  font-family: "Unbounded";
  src: url(../../fonts/Unbounded-Medium.ttf);
  font-weight: 500;
}  

@font-face {
  font-family: "Unbounded";
  src: url(../../fonts/Unbounded-SemiBold.ttf);
  font-weight: 600;
} 

@font-face {
  font-family: "Unbounded";
  src: url(../../fonts/Unbounded-Bold.ttf);
  font-weight: 700;
} 

@font-face {
  font-family: "Unbounded";
  src: url(../../fonts/Unbounded-ExtraBold.ttf);
  font-weight: 800;
} 

@font-face {
  font-family: "Unbounded";
  src: url(../../fonts/Unbounded-Black.ttf);
  font-weight: 900;
} 



img {
  -moz-user-select: none !important;
-webkit-user-select: none !important;
-ms-user-select: none !important;
  user-select: none !important;
  pointer-events: none !important;
}

html {
  scrollbar-width: thin;
  scrollbar-color:  var(--color-main) #121212; 
} 
    
/* Chrome, Edge and Safari */
html::-webkit-scrollbar {
  height: 3px;
  width: 3px;
}

html::-webkit-scrollbar-track {
  background-color: #121212;
}

html::-webkit-scrollbar-track:hover {
  background-color: #121212;
}

html::-webkit-scrollbar-track:active {
  background-color: #121212;
}

html::-webkit-scrollbar-thumb {
  background-color: var(--color-main);
}

html::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-main);
}

html::-webkit-scrollbar-thumb:active {
  background-color: var(--color-main);
}


:root {
  --main-bg-color-dark: #121212;
  --max-width-cont: 2000px;
  --font-text-main: "Unbounded";
  --font-text-main-weight: 400;
  --color-main: #e44f54;
  --color-white: white;
}

a {
  /*cursor: none !important;*/
  text-decoration: none;
}  

body{
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
  background-color: var(--main-bg-color-dark);
  width: 100%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  position: relative;
 /* cursor: none !important;*/
}

.invert-theme-text-active{
  color: #121212 !important;
}

.invert-theme-div-active07{

}

.invert-theme-div-active08{

}

.invert-theme-div-active09{

}

.invert-theme-div-active{

}

.body-light{
  background-color: #e3e3e3 !important;
}

.invert-block-process-active{
  background-color: transparent !important;
  font-weight: 500 !important;
  -webkit-box-shadow: 5px 5px 14px 0px #1212124d inset !important;
          box-shadow: 5px 5px 14px 0px #1212124d inset !important;
}

#cursor {
  position: fixed;
  z-index: 99;
  left: 0;
  top: 0;
  pointer-events: none;
  will-change: transform;
  
 /* mix-blend-mode: color-dodge ;*/
}


@media (hover: hover) and (pointer: fine) {
  .cursor__circle {
    width: 32px;
    height: 32px;
    margin-top: -50%;
    margin-left: -50%;
    border-radius: 50%;
    border: solid 1px var(--color-main);
    -webkit-transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1),
      background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1),
      border-color 0.3s cubic-bezier(0.25, 1, 0.5, 1),
      width 0.3s cubic-bezier(0.25, 1, 0.5, 1),
      height 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    -o-transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1),
      background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1),
      border-color 0.3s cubic-bezier(0.25, 1, 0.5, 1),
      width 0.3s cubic-bezier(0.25, 1, 0.5, 1),
      height 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1),
      background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1),
      border-color 0.3s cubic-bezier(0.25, 1, 0.5, 1),
      width 0.3s cubic-bezier(0.25, 1, 0.5, 1),
      height 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  }

  
  #cursor.arrow .cursor__circle{
    width: 128px;
    height: 128px;
    background-color: rgba(0, 0, 0, 0);
    border-color: var(--color-main);
  }
  
}

.section-wrap{
  position: relative;
  width: 100%;
  margin-top: 100px;
}

.section-stages{
  position: relative;
  width: 30%;
  margin-left: 100px;
  aspect-ratio: 16/9;
}




.section-stages-title {
    font-family: var(--font-text-main);
    font-weight: 300;
    color: var(--color-white);
    font-size: 16px;
    width: 150%;
    height: 100%;
    background: #121212;
    padding: 30px 20px 30px 40%;
    position: absolute;
    top: 0px;
    left: 100%;
    z-index: 2;
}

.portfolio-a-link{
  font-family: var(--font-text-main);
  font-weight: 300;
  color: var(--color-white);
  text-decoration: none;
  font-size: 24px;
  padding: 10px 30px;
  border-radius: 35px;
  border: 1px solid var(--color-main);
  margin-top: 20px;
  margin-left: 100px;
  margin-right: auto;
  display: block;
  width: fit-content;
  transition: all 0.5s ease;
}


.portfolio-keys-punkt-flex-inner{
  text-align: left;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  gap: 10px;
}


.portfolio-keys-punkt-flex{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-family: var(--font-text-main);
  font-weight: 200;
  color: var(--color-white);
  font-size: 14px;
}

.dot-portfolio{
  aspect-ratio: 1/1;
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

.dot-portfolio-yellow{
  width: 10px;
  height: 10px;
  background: var(--color-main);
  border-radius: 50%;
}



.section__inner{
  position: relative;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
}

.section-stages img{
  width: 100%;
}






.element-animation-usl {
  will-change: opacity, transform;
}  

.element-show-usl {
  -webkit-animation: elementShowUsl 0.8s ease forwards;
          animation: elementShowUsl 0.8s ease forwards;
}

@-webkit-keyframes elementShowUsl{
0%{
  opacity: 0;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}
100%{
  opacity: 1;
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}
}

@keyframes elementShowUsl{
0%{
  opacity: 0;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}
100%{
  opacity: 1;
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}
}


.animation-buttons-CTA{
  transform: scale(0);
  opacity: 0;
}

.animation-buttons-CTA-show{
  position: relative;
  z-index: 1;
  transform: scale(1);
  opacity: 1;
  box-shadow: 0 0 0 var(--color-main);
  animation: pulseCTA 1s infinite;
}

.element-animation{
  transform: translateX(100px);
  opacity: 0;
  transition: all 0.9s ease;
}


@keyframes pulseCTA {
  0% {
            box-shadow: 0 0 0 0 #3548699c;
  }
  70% {
              box-shadow: 0 0 0 20px rgba(204, 44, 44, 0);
  }
  100% {
              box-shadow: 0 0 0 0 rgba(204, 44, 44, 0);
  }
}


.element-show {
transform: translateX(0px);
opacity: 1;
will-change: opacity, transform;
   }
 


@-webkit-keyframes elementShow{
0%{
  opacity: 0;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}
100%{
  opacity: 1;
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}
}


@keyframes elementShow{
0%{
  opacity: 0;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}
100%{
  opacity: 1;
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}
}


.element-animation-kto {
will-change: opacity, transform;
transform: translateX(100px);
opacity: 0;
transition: all 0.5s ease;
}

.element-show-kto {
  transform: translateX(0px);
  opacity: 1;
}


@-webkit-keyframes elementShowkto1{
0%{
  opacity: 0;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}
100%{
  opacity: 1;
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}
}


@keyframes elementShowkto1{
0%{
  opacity: 0;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}
100%{
  opacity: 1;
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}
}


.element-animation-kto1 {
  will-change: opacity, transform;
  transform: translateX(-100px);
  opacity: 0;
  transition: all 0.5s ease;
}

.element-show-kto1 {
  transform: translateX(0px);
  opacity: 1;
}


@-webkit-keyframes elementShowkto2{
0%{
  opacity: 0;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
100%{
  opacity: 1;
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}
}


@keyframes elementShowkto2{
0%{
  opacity: 0;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
100%{
  opacity: 1;
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}
}



.body-container{
  width: 100%;
  max-width: var(--max-width-cont);
  position: relative;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  margin: 0 auto 0 auto;
  background: transparent;
  overflow-x: clip;
}

.main-block{
  position: relative;
  width: 100%;
  height: 100vh;
  max-width: var(--max-width-cont);
  max-height: 100vh;
  overflow-x: clip;
  overflow-y: clip;
}

.fokus-camera-elements{
  position: relative;
          /*transform: scale(0.5);*/
width: 100%;
height: 100vh;
max-height: 100vh;
       /*animation: mainVideoScale 0.5s ease 3.2s forwards;*/
}

@-webkit-keyframes mainVideoScale{
  100%{
      -webkit-transform: scale(1);
              transform: scale(1);
  }
}

@keyframes mainVideoScale{
  100%{
      -webkit-transform: scale(1);
              transform: scale(1);
  }
}

.angle-fokus-left-top{
 /* -webkit-transition: -webkit-transform 0.4s ease;
    transition: -webkit-transform 0.4s ease;
    -o-transition: transform 0.4s ease;
    transition: transform 0.4s ease;
    transition: transform 0.4s ease, -webkit-transform 0.4s ease;
  will-change: transform;*/
  width: 40px;
  height: 40px;
  border-top: 2px solid var(--color-white);
  border-left: 2px solid var(--color-white);
  position: absolute;
  top: 100px;
  left: 100px;
  z-index: 1;
 /* opacity: 0;
  -webkit-animation: angleFokusOpacity 0.3s ease 4.2s forwards;
          animation: angleFokusOpacity 0.3s ease 4.2s forwards;*/
}

.angle-fokus-left-bottom{
  /*-webkit-transition: -webkit-transform 0.4s ease;
    transition: -webkit-transform 0.4s ease;
    -o-transition: transform 0.4s ease;
    transition: transform 0.4s ease;
    transition: transform 0.4s ease, -webkit-transform 0.4s ease;
  will-change: transform;*/
  width: 40px;
  height: 40px;
  border-bottom: 2px solid var(--color-white);
  border-left: 2px solid var(--color-white);
  position: absolute;
  left: 100px;
  bottom: 100px;
  z-index: 1;
/*  opacity: 0;
  -webkit-animation: angleFokusOpacity 0.3s ease 4.2s forwards;
          animation: angleFokusOpacity 0.3s ease 4.2s forwards;*/
}

.angle-fokus-right-top{
 /* -webkit-transition: -webkit-transform 0.4s ease;
    transition: -webkit-transform 0.4s ease;
    -o-transition: transform 0.4s ease;
    transition: transform 0.4s ease;
    transition: transform 0.4s ease, -webkit-transform 0.4s ease;
  will-change: transform;*/
  width: 40px;
  height: 40px;
  border-top: 2px solid var(--color-white);
  border-right: 2px solid var(--color-white);
  position: absolute;
  top: 100px;
  right: 100px;
  z-index: 1;
 /* opacity: 0;
  -webkit-animation: angleFokusOpacity 0.3s ease 4.2s forwards;
          animation: angleFokusOpacity 0.3s ease 4.2s forwards;*/
}

.angle-fokus-right-bottom{
 /* -webkit-transition: -webkit-transform 0.4s ease;
    transition: -webkit-transform 0.4s ease;
    -o-transition: transform 0.4s ease;
    transition: transform 0.4s ease;
    transition: transform 0.4s ease, -webkit-transform 0.4s ease;
  will-change: transform;*/
  width: 40px;
  height: 40px;
  border-bottom: 2px solid var(--color-white);
  border-right: 2px solid var(--color-white);
  position: absolute;
  bottom: 100px;
  right: 100px;
  z-index: 1;
 /* opacity: 0;
  -webkit-animation: angleFokusOpacity 0.3s ease 4.2s forwards;
          animation: angleFokusOpacity 0.3s ease 4.2s forwards;*/
}

@-webkit-keyframes angleFokusOpacity{
  100%{
      opacity: 1;
  }
}

@keyframes angleFokusOpacity{
  100%{
      opacity: 1;
  }
}

.transform-right{
  -webkit-transform: translateX(400px);
      -ms-transform: translateX(400px);
          transform: translateX(400px);
}
.transform-left{
  -webkit-transform: translateX(-400px);
      -ms-transform: translateX(-400px);
          transform: translateX(-400px);
}
.transform-right-top{
  -webkit-transform: translateX(400px) translateY(-340px);
      -ms-transform: translateX(400px) translateY(-340px);
          transform: translateX(400px) translateY(-340px);
}
.transform-left-top{
  -webkit-transform: translateX(-400px) translateY(-340px);
      -ms-transform: translateX(-400px) translateY(-340px);
          transform: translateX(-400px) translateY(-340px);
}

.opacity1{
  opacity: 1;
  -webkit-transition: opacity 0.2s ease;
  -o-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}

.opacity0{
  opacity: 0 !important;
  -webkit-transition: opacity 0.2s ease;
  -o-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}

.angle-fokus-left-top-svg1{
  display: block;
  margin-top: 20px;
  margin-left: 20px;
}

.angle-fokus-left-top-svg2{
  display: block;
  margin-top: 20px;
  margin-left: 20px;
}

.angle-fokus-right-top-svg1{
  display: block;
  margin-top: 20px;
  -webkit-transform: translateX(-20px);
      -ms-transform: translateX(-20px);
          transform: translateX(-20px);
}

.angle-fokus-right-top-svg2{
  display: block;
  margin-top: 20px;
  -webkit-transform: translateX(-20px);
      -ms-transform: translateX(-20px);
          transform: translateX(-20px);
}

.angle-fokus-right-bottom-svg1{
  position: absolute;
  display: block;
  bottom: 20px;
  right: 20px;
}


.angle-fokus-left-bottom-flex{
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  left: 20px;
  bottom: 20px;
}

.angle-fokus-left-bottom-flex-top{
  font-family: var(--font-text-main);
  font-size: 30px;
  font-weight: var(--font-text-main-weight);
  color: var(--color-white);
  text-transform: uppercase;
  line-height: 105%;
}


.angle-fokus-left-bottom-flex-center{
  width: max-content;
  font-family: var(--font-text-main);
  font-size: 70px;
  font-weight: var(--font-text-main-weight);
  color: var(--color-main);
  text-transform: uppercase;
  line-height: 105%;
}

.angle-fokus-left-bottom-flex-bottom-flex{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
}

.angle-fokus-left-bottom-flex-bottom-flex-left{
  font-family: var(--font-text-main);
  font-size: 16px;
  font-weight: var(--font-text-main-weight);
  color: var(--color-white);
  text-transform: uppercase;
  line-height: 105%;
}

.angle-fokus-left-bottom-flex-bottom-flex-right{
  font-family: var(--font-text-main);
  font-size: 16px;
  font-weight: var(--font-text-main-weight);
  color: var(--color-white);
  text-transform: uppercase;
  line-height: 120%;
  width: 400px;
}


.video-main-background{
display: block;
object-fit: cover;
position: absolute;
width: 100%;
height: 100vh;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);

}




.center-main--box{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  width: 50%;
  max-width: 500px;
  text-align: center;
  color: var(--color-white);
  font-family: var(--font-text-main);
  font-weight: var(--font-text-main-weight);
  z-index: 1;
  top: 120px;
 /* top: -500px;
  -webkit-animation: fallStep1 0.5s ease-in 4s forwards, fallStep2 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 4.5s forwards;
          animation: fallStep1 0.5s ease-in 4s forwards, fallStep2 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 4.5s forwards;*/
}

@-webkit-keyframes fallStep1{
  100%{
      top: 120px;
  }
}

@keyframes fallStep1{
  100%{
      top: 120px;
  }
}

@-webkit-keyframes fallStep2{
  50%{
      top: 80px;
  }
  100%{
      top: 120px;
  }
}

@keyframes fallStep2{
  50%{
      top: 80px;
  }
  100%{
      top: 120px;
  }
}


.center-main--box-button{
  color: var(--color-main);
  font-family: var(--font-text-main);
  font-weight: var(--font-text-main-weight);
  z-index: 1;
  text-decoration: none;
  text-transform: uppercase;
  padding: 18px 60px;
  border-radius: 30px;
  background: rgba(0, 0, 0, 0.244);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 1px solid var(--color-main);
}

#main--box-button-arrow{
  display: block;
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  will-change: transform;
}

@-webkit-keyframes arrowRotate{
0%{
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
100%{
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
}

@keyframes arrowRotate{
0%{
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
100%{
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
}

.button-zayavka{
  will-change: opacity;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 20px;

  &:hover #main--box-button-arrow{
      -webkit-animation: arrowRotate 0.5s ease forwards;
              animation: arrowRotate 0.5s ease forwards;
  }
}

.center-main--box-button-arrow{
  padding: 16px 18px;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border: 1px solid var(--color-main);
  border-radius: 50%;
}


.keys-block{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    overflow: hidden;
    position: relative;
    width: 100%;
    margin-top: 50px;
}

@media (min-width:1201px) { 
  .keys-project-img{
    height: 100vh;
    width: 100%;
  }
}


.keys-project-img{
  width: 100vw;
  object-fit: cover;
  height: 100vh;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
      -ms-transform: translateX(-50%) translateY(-50%) scale(1);
          transform: translateX(-50%) translateY(-50%) scale(1);
  z-index: -1;
  opacity: 1;
  -webkit-transition: opacity 0.5s ease;
  -o-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}



.keys-project{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  background: transparent;
  text-align: center;
  color: var(--color-white);
  font-family: "Unbounded";
  font-weight: 300;
  font-size: 60px;
  padding: 30px 0px;
  position: relative;
  margin: 0px 100px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  transition: all 0.9s ease;
}

.keys-project:hover{
  scale: 1.1;
  transition: all 0.9s ease;
  cursor: pointer;
}

.keys-project-opacity{
  opacity: 0;
  transition: all 0.9s ease;
}

.margin-auto{
  margin-left: auto !important;
  margin-right: auto !important;
}


.display-none{
  display: none !important;
}

.dsp-none{
  display: none !important;
  /*transform: translateX(-100%) translateY(-50%) scale(0);*/
  opacity: 0;
  -webkit-transition: opacity 0.5s ease;
  -o-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}

.title-block{
  z-index: 1;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  display: block;
  position: relative;
  margin-left: 100px;
  color: var(--color-white);
  font-family: "Unbounded";
  font-weight: 400;
  font-size: 80px;
  text-transform: uppercase;
}




.svg-eremyan-block{
  margin-top: 150px;
  position: relative;
  width: 100%;
}

.svg-eremyan{
  display: block;
  width: 100%;
}

.fill-lighter{
  /*fill: rgb(46, 46, 46);*/
  fill: rgb(190, 190, 190, 1);
  stroke: rgb(190, 190, 190, 1);
  will-change: transform, opacity;
  display: block;
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}

@-webkit-keyframes letterTitleMove {
0%{
  opacity: 0;
   -webkit-transform: translate(-100%, -50%) rotate(20deg);
           transform: translate(-100%, -50%) rotate(20deg);
}
100% {
  -webkit-transform: translate(0, 0) rotate(0deg);
          transform: translate(0, 0) rotate(0deg);
  opacity: 1;

}
}

@keyframes letterTitleMove {
0%{
  opacity: 0;
   -webkit-transform: translate(-100%, -50%) rotate(20deg);
           transform: translate(-100%, -50%) rotate(20deg);
}
100% {
  -webkit-transform: translate(0, 0) rotate(0deg);
          transform: translate(0, 0) rotate(0deg);
  opacity: 1;

}
}

@-webkit-keyframes letterTitleMoveYellow {
0%{
  opacity: 0;
   -webkit-transform: translate(-100%, -50%) rotate(20deg);
           transform: translate(-100%, -50%) rotate(20deg);
}
100% {
  -webkit-transform: translate(0, 0) rotate(0deg);
          transform: translate(0, 0) rotate(0deg);
  opacity: 1;

}
}

@keyframes letterTitleMoveYellow {
0%{
  opacity: 0;
   -webkit-transform: translate(-100%, -50%) rotate(20deg);
           transform: translate(-100%, -50%) rotate(20deg);
}
100% {
  -webkit-transform: translate(0, 0) rotate(0deg);
          transform: translate(0, 0) rotate(0deg);
  opacity: 1;

}
}

.title-block-span1{
  transform: translate(-150px, -50px) rotate(10deg);
  opacity: 0;
  transition: all 0.7s ease;
}



.title-block-span1-new {
display: inline-block;
transform: translate(0, 0) rotate(0deg);
opacity: 1;
will-change: opacity, transform;
   }
 




.color-yellow{
  color: var(--color-main) !important;
}

.partners-block{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-top: 1px solid var(--color-white);
  border-bottom: 1px solid var(--color-white);
  margin-top: 60px;
  padding-bottom: 50px;
  padding-top: 50px;
  position: relative;
}



.fon-item{
  width: 650px;
  position: absolute;
  top: 0px;
  left: 50%;
  z-index: -1;
  will-change: transform;
}

.partners-flex-top{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 45px;
  will-change: transform;
}

.partners-flex-bottom{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 75px;
  margin-top: 10px;
  will-change: transform;
}

.partners-div{
  width: 220px;
  border: 1px solid var(--color-white);
  border-radius: 50%;
  aspect-ratio: 1/1;
  position: relative;
}

.partners-img-top{
  width: 80%;
  -webkit-transform-origin: top left;
      -ms-transform-origin: top left;
          transform-origin: top left;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  will-change: transform;
}

.partners-img-bottom{
  -webkit-transform-origin: top left;
      -ms-transform-origin: top left;
          transform-origin: top left;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  will-change: transform;
}

#checkmark-form{
  width: 50px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    display: block;
}


.usligi-flex{
  margin-bottom: 80px;
  margin-top: 90px;
  padding: 0px 120px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
}

.uslugi-flex1-top{
  position: relative;
  height: 50px;
}

.uslugi-flex1-bottom{
  position: relative;
  height: 50px;
}

.uslugi-flex1-top-left-angle{
  width: 40px;
  height: 30px;
  border-top: 1px solid var(--color-white);
  border-left: 1px solid var(--color-white);
  position: absolute;
  left: 0;
  top: 0;
}

.uslugi-flex1-top-right-angle{
  width: 40px;
  height: 30px;
  border-top: 1px solid var(--color-white);
  border-right: 1px solid var(--color-white);
  position: absolute;
  right: 0;
  top: 0;
}


.uslugi-flex1-bottom-left-angle{
  width: 40px;
  height: 30px;
  border-bottom: 1px solid var(--color-white);
  border-left: 1px solid var(--color-white);
  position: absolute;
  left: 0;
  bottom: 0;
}

.uslugi-flex1-bottom-right-angle{
  width: 40px;
  height: 30px;
  border-bottom: 1px solid var(--color-white);
  border-right: 1px solid var(--color-white);
  position: absolute;
  right: 0;
  bottom: 0;
}


.uslugi-flex1-top-right-angle-svg{
  display: block;
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  position: absolute;
  top: 10px;
  right: 0px;
  width: 40px;
}

.uslugi-flex1{
  font-family: var(--font-text-main);
  font-weight: 300;
  color: var(--color-white);
  max-width: 400px;
  position: relative;
  font-size: 14px;
  text-align: justify;
  display: none;
}




.uslugi-flex2{
  text-transform: uppercase;
  margin-top: 0px;
  background-color: #4242444d;
  backdrop-filter: blur(10px);
  width: 500px;
  height: 150px;
  position: relative;
  font-family: var(--font-text-main);
  font-weight: 400;
  font-size: 20px;
  color: var(--color-white);
  border-radius: 30px;
  -webkit-box-shadow: 5px 5px 14px 0px var(--main-bg-color-dark) inset;
box-shadow: 5px 5px 14px 0px var(--main-bg-color-dark) inset;
}

.uslugi-flex3{
  text-transform: uppercase;
  margin-top: 30px;
  background-color: #4242444d;
  backdrop-filter: blur(10px);
  width: 500px;
  height: 150px;
  position: relative;
  font-family: var(--font-text-main);
  font-weight: 400;
  font-size: 20px;
  color: var(--color-white);
  border-radius: 30px;
  -webkit-box-shadow: 5px 5px 14px 0px var(--main-bg-color-dark) inset;
box-shadow: 5px 5px 14px 0px var(--main-bg-color-dark) inset;
}

.uslugi-flex4{
  text-transform: uppercase;
  margin-top: 30px;
  background-color: #4242444d;
  backdrop-filter: blur(10px);
  width: 500px;
  height: 150px;
  position: relative;
  font-family: var(--font-text-main);
  font-weight: 400;
  font-size: 20px;
  color: var(--color-white);
  border-radius: 30px;
  -webkit-box-shadow: 5px 5px 14px 0px var(--main-bg-color-dark) inset;
box-shadow: 5px 5px 14px 0px var(--main-bg-color-dark) inset;
}

.uslugi-flex5{
  margin-top: 30px;
  background-color: #424244;
  width: 500px;
  height: 150px;
  position: relative;
  font-family: var(--font-text-main);
  font-weight: 400;
  font-size: 20px;
  color: var(--color-white);
  border-radius: 30px;
  -webkit-box-shadow: 5px 5px 14px 0px var(--main-bg-color-dark) inset;
box-shadow: 5px 5px 14px 0px var(--main-bg-color-dark) inset;
}

.uslugi-flex2-svg{
  width: 50px;
  position: absolute;
  display: none;
  bottom: 20px;
  right: 20px;
}

.uslugi-flex2-inner{
  text-transform: uppercase;
  max-width: 400px;
  position: absolute;
  top: 50%;
  left: 70px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  line-height: 105%;
}

.uslugi-flex2-svg-number{
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
  height: 130px;
  position: absolute;
  top: 50%;
  left: -120px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transform-origin: right;
      -ms-transform-origin: right;
          transform-origin: right;
}

.uslugi-flex3-svg-number{
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
  height: 130px;
  position: absolute;
  top: 50%;
  left: -168px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transform-origin: right;
      -ms-transform-origin: right;
          transform-origin: right;
}


.uslugi-flex4-svg-number{
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
  height: 130px;
  position: absolute;
  top: 50%;
  left: -169px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transform-origin: right;
      -ms-transform-origin: right;
          transform-origin: right;
}


.uslugi-flex5-svg-number{
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
  height: 130px;
  position: absolute;
  top: 50%;
  left: -170px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transform-origin: right;
      -ms-transform-origin: right;
          transform-origin: right;
}

.usligi-flex-img1{
will-change: transform;
display: block;
  position: absolute;
  width: 50%;
  top: 30%;
  left: -3%;
  z-index: 0;
 /* transition: .2s linear;*/
}

.usligi-flex-img2{
  display: none;
  will-change: transform;
  position: absolute;
  width: 100%;
  top: -80%;
  left: 40%;
  z-index: -1;
}

.usligi-flex-img3{
  will-change: transform;
  position: absolute;
  width: 60%;
  opacity: 0.6;
  top: -100%;
  right: 0;
  z-index: -1;
}

.kto-takie-flex{
  z-index: 1;
  padding: 0 100px;
  margin-top: 80px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
}

.mt-200{
  margin-top: 100px;
}

.kto-takie-flex1{
  border-top-left-radius: 9%;
  border-top-right-radius: 9%;
  width: 100%;
  overflow: hidden;
  position: relative;
  -webkit-transform: perspective(2000px) rotatey(0deg) rotatex(0deg);
          transform: perspective(2000px) rotatey(0deg) rotatex(0deg);
-webkit-transition: -webkit-transform 0.2s ease;
transition: -webkit-transform 0.2s ease;
-o-transition: transform 0.2s ease;
transition: transform 0.2s ease;
transition: transform 0.2s ease, -webkit-transform 0.2s ease;
will-change: transform;
}

.kto-takie-flex1-img{
  width: 100%;
  aspect-ratio: 16 / 10;
    object-fit: cover;
}

.kto-takie-flex1-fon{
  opacity: 0.9;
  will-change: transform;
  width: 50%;
  position: absolute;
  top: -500px;
  right: -14%;
  z-index: -1;
}

.kto-takie-flex2{
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
          align-items: center;
  width: 100%;
  gap: 30px;
  margin-top: 0px;
  margin-bottom: 20px;
}

.kto-takie-flex2-left{
  display: block;
  width: 50%;
  position: relative;
}


.kto-takie-flex2-left svg{
    position: relative;
    display: block;
    width: 100%;
    left: 0;
    z-index: 2;
}

.kto-takie-flex2-right{
  display: block;
  width: 50%;
}

.kto-takie-flex2-right{
  font-size: 22px;
  font-weight: 300;
  font-family: var(--font-text-main);
  color: var(--color-white);
  line-height: 100%;
}

.kto-takie-flex3{
  font-size: 22px;
  font-weight: var(--font-text-main-weight);
  font-family: var(--font-text-main);
  color: var(--color-white);
  line-height: 100%;
  width: 100%;
  text-align: left;
  margin-top: 100px;
}

.kto-takie-flex4{
  text-transform: uppercase;
  position: relative;
  font-size: 67px;
  font-weight: 400;
  font-family: var(--font-text-main);
  color: var(--color-main);
  line-height: 120%;
  width: 100%;
  text-align: left;
  margin-top: 10px;
}

.kto-takie-flex4-inner{
  text-transform: none;
  width: 50%;
  position: absolute;
  left: 51%;
  top: 59%;
  font-size: 22px;
  font-weight: 300;
  font-family: var(--font-text-main);
  color: var(--color-white);
  line-height: 100%;
}

.mission-flex-block{
  padding: 0 120px;
  margin-top: 100px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
}

.mission-flex1{
  font-size: 22px;
  font-weight: var(--font-text-main-weight);
  font-family: var(--font-text-main);
  color: var(--color-main);
  line-height: 120%;
  width: 50%;
}

.mission-flex2{
  width: 50%;
  margin: 30px 0px 0px 0px;
  overflow: hidden;
  border-radius: 11%;
}

.mission-flex2-img{
  width: 100%;
}

.mission-flex3{
  margin-top: 100px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}

.mission-flex3-inner{
  font-size: 22px;
  font-weight: var(--font-text-main-weight);
  font-family: var(--font-text-main);
  color: var(--color-white);
  line-height: 120%;
  width: 50%;
}

.mission-flex4{
  font-size: 22px;
  font-weight: var(--font-text-main-weight);
  font-family: var(--font-text-main);
  color: var(--color-main);
  line-height: 120%;
  width: 50%;
}


.mission-flex-block-img1{
  position: absolute;
  top: -100px;
  left: 100px;
  will-change: transform;
}

.mission-flex-block-img2{
  position: absolute;
  top: 150px;
  left: -50px;
  will-change: transform;
}

.mission-flex-block-img3{
  opacity: 0.3;
    width: 50%;
    z-index: -1;
    position: absolute;
    top: 50px;
    left: 250px;
    will-change: transform;
}

.mission-flex-block-img4{
  display: none;
  position: absolute;
  top: 50%;
  left: 60%;
  will-change: transform;
}

.mission-flex-block-img5{
  display: none;
  position: absolute;
  bottom: 250px;
  left: 0px;
  z-index: -1;
  will-change: transform;
}

.mission-flex-block-img6{
  display: none;
  position: absolute;
  bottom: 125px;
  left: 75px;
  z-index: -1;
  will-change: transform;
}

.mission-flex-block-img7{
  position: absolute;
  bottom: -150px;
  left: 150px;
  z-index: -1;
  will-change: transform;
}


.glitch::before,
.glitch::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.glitch::before {
left: 2px;
text-shadow: -2px 0 #49FC00;
clip: rect(24px, 550px, 90px, 0);
-webkit-animation: glitch-anim-2 2.5s infinite linear alternate-reverse;
        animation: glitch-anim-2 2.5s infinite linear alternate-reverse;
}
.glitch::after {
left: -2px;
text-shadow: -2px 0 #b300fc;
clip: rect(85px, 550px, 140px, 0);
-webkit-animation: glitch-anim 2.5s infinite linear alternate-reverse;
        animation: glitch-anim 2.5s infinite linear alternate-reverse;
}
@-webkit-keyframes glitch-anim {
0% {
  clip: rect(110px, 9999999px, 74px, 0);
}
4.16666667% {
  clip: rect(135px, 9999999px, 143px, 0);
}
8.33333333% {
  clip: rect(100px, 9999999px, 100px, 0);
}
12.5% {
  clip: rect(38px, 9999999px, 24px, 0);
}
16.66666667% {
  clip: rect(125px, 9999999px, 83px, 0);
}
20.83333333% {
  clip: rect(149px, 9999999px, 63px, 0);
}
25% {
  clip: rect(12px, 9999999px, 104px, 0);
}
29.16666667% {
  clip: rect(68px, 9999999px, 7px, 0);
}
33.33333333% {
  clip: rect(77px, 9999999px, 20px, 0);
}
37.5% {
  clip: rect(99px, 9999999px, 6px, 0);
}
41.66666667% {
  clip: rect(27px, 9999999px, 99px, 0);
}
45.83333333% {
  clip: rect(58px, 9999999px, 107px, 0);
}
50% {
  clip: rect(108px, 9999999px, 77px, 0);
}
54.16666667% {
  clip: rect(58px, 9999999px, 87px, 0);
}
58.33333333% {
  clip: rect(142px, 9999999px, 112px, 0);
}
62.5% {
  clip: rect(124px, 9999999px, 125px, 0);
}
66.66666667% {
  clip: rect(61px, 9999999px, 53px, 0);
}
70.83333333% {
  clip: rect(117px, 9999999px, 74px, 0);
}
75% {
  clip: rect(21px, 9999999px, 74px, 0);
}
79.16666667% {
  clip: rect(117px, 9999999px, 70px, 0);
}
83.33333333% {
  clip: rect(87px, 9999999px, 122px, 0);
}
87.5% {
  clip: rect(95px, 9999999px, 9px, 0);
}
91.66666667% {
  clip: rect(121px, 9999999px, 75px, 0);
}
95.83333333% {
  clip: rect(121px, 9999999px, 115px, 0);
}
100% {
  clip: rect(101px, 9999999px, 72px, 0);
}
}
@keyframes glitch-anim {
0% {
  clip: rect(110px, 9999999px, 74px, 0);
}
4.16666667% {
  clip: rect(135px, 9999999px, 143px, 0);
}
8.33333333% {
  clip: rect(100px, 9999999px, 100px, 0);
}
12.5% {
  clip: rect(38px, 9999999px, 24px, 0);
}
16.66666667% {
  clip: rect(125px, 9999999px, 83px, 0);
}
20.83333333% {
  clip: rect(149px, 9999999px, 63px, 0);
}
25% {
  clip: rect(12px, 9999999px, 104px, 0);
}
29.16666667% {
  clip: rect(68px, 9999999px, 7px, 0);
}
33.33333333% {
  clip: rect(77px, 9999999px, 20px, 0);
}
37.5% {
  clip: rect(99px, 9999999px, 6px, 0);
}
41.66666667% {
  clip: rect(27px, 9999999px, 99px, 0);
}
45.83333333% {
  clip: rect(58px, 9999999px, 107px, 0);
}
50% {
  clip: rect(108px, 9999999px, 77px, 0);
}
54.16666667% {
  clip: rect(58px, 9999999px, 87px, 0);
}
58.33333333% {
  clip: rect(142px, 9999999px, 112px, 0);
}
62.5% {
  clip: rect(124px, 9999999px, 125px, 0);
}
66.66666667% {
  clip: rect(61px, 9999999px, 53px, 0);
}
70.83333333% {
  clip: rect(117px, 9999999px, 74px, 0);
}
75% {
  clip: rect(21px, 9999999px, 74px, 0);
}
79.16666667% {
  clip: rect(117px, 9999999px, 70px, 0);
}
83.33333333% {
  clip: rect(87px, 9999999px, 122px, 0);
}
87.5% {
  clip: rect(95px, 9999999px, 9px, 0);
}
91.66666667% {
  clip: rect(121px, 9999999px, 75px, 0);
}
95.83333333% {
  clip: rect(121px, 9999999px, 115px, 0);
}
100% {
  clip: rect(101px, 9999999px, 72px, 0);
}
}
@-webkit-keyframes glitch-anim-2 {
6.66666667% {
  clip: rect(76px, 9999999px, 132px, 0);
}
10% {
  clip: rect(13px, 9999999px, 82px, 0);
}
13.33333333% {
  clip: rect(97px, 9999999px, 2px, 0);
}
16.66666667% {
  clip: rect(1px, 9999999px, 147px, 0);
}
20% {
  clip: rect(113px, 9999999px, 124px, 0);
}
23.33333333% {
  clip: rect(132px, 9999999px, 130px, 0);
}
26.66666667% {
  clip: rect(120px, 9999999px, 32px, 0);
}
30% {
  clip: rect(2px, 9999999px, 10px, 0);
}
33.33333333% {
  clip: rect(76px, 9999999px, 46px, 0);
}
36.66666667% {
  clip: rect(140px, 9999999px, 79px, 0);
}
40% {
  clip: rect(37px, 9999999px, 67px, 0);
}
43.33333333% {
  clip: rect(133px, 9999999px, 95px, 0);
}
46.66666667% {
  clip: rect(6px, 9999999px, 16px, 0);
}
50% {
  clip: rect(98px, 9999999px, 123px, 0);
}
53.33333333% {
  clip: rect(42px, 9999999px, 88px, 0);
}
56.66666667% {
  clip: rect(77px, 9999999px, 110px, 0);
}
60% {
  clip: rect(22px, 9999999px, 145px, 0);
}
63.33333333% {
  clip: rect(47px, 9999999px, 75px, 0);
}
66.66666667% {
  clip: rect(109px, 9999999px, 135px, 0);
}
70% {
  clip: rect(118px, 9999999px, 40px, 0);
}
73.33333333% {
  clip: rect(74px, 9999999px, 141px, 0);
}
76.66666667% {
  clip: rect(59px, 9999999px, 100px, 0);
}
80% {
  clip: rect(14px, 9999999px, 32px, 0);
}
83.33333333% {
  clip: rect(22px, 9999999px, 28px, 0);
}
86.66666667% {
  clip: rect(106px, 9999999px, 74px, 0);
}
90% {
  clip: rect(33px, 9999999px, 97px, 0);
}
93.33333333% {
  clip: rect(94px, 9999999px, 29px, 0);
}
96.66666667% {
  clip: rect(108px, 9999999px, 87px, 0);
}
100% {
  clip: rect(5px, 9999999px, 14px, 0);
}
}
@keyframes glitch-anim-2 {
6.66666667% {
  clip: rect(76px, 9999999px, 132px, 0);
}
10% {
  clip: rect(13px, 9999999px, 82px, 0);
}
13.33333333% {
  clip: rect(97px, 9999999px, 2px, 0);
}
16.66666667% {
  clip: rect(1px, 9999999px, 147px, 0);
}
20% {
  clip: rect(113px, 9999999px, 124px, 0);
}
23.33333333% {
  clip: rect(132px, 9999999px, 130px, 0);
}
26.66666667% {
  clip: rect(120px, 9999999px, 32px, 0);
}
30% {
  clip: rect(2px, 9999999px, 10px, 0);
}
33.33333333% {
  clip: rect(76px, 9999999px, 46px, 0);
}
36.66666667% {
  clip: rect(140px, 9999999px, 79px, 0);
}
40% {
  clip: rect(37px, 9999999px, 67px, 0);
}
43.33333333% {
  clip: rect(133px, 9999999px, 95px, 0);
}
46.66666667% {
  clip: rect(6px, 9999999px, 16px, 0);
}
50% {
  clip: rect(98px, 9999999px, 123px, 0);
}
53.33333333% {
  clip: rect(42px, 9999999px, 88px, 0);
}
56.66666667% {
  clip: rect(77px, 9999999px, 110px, 0);
}
60% {
  clip: rect(22px, 9999999px, 145px, 0);
}
63.33333333% {
  clip: rect(47px, 9999999px, 75px, 0);
}
66.66666667% {
  clip: rect(109px, 9999999px, 135px, 0);
}
70% {
  clip: rect(118px, 9999999px, 40px, 0);
}
73.33333333% {
  clip: rect(74px, 9999999px, 141px, 0);
}
76.66666667% {
  clip: rect(59px, 9999999px, 100px, 0);
}
80% {
  clip: rect(14px, 9999999px, 32px, 0);
}
83.33333333% {
  clip: rect(22px, 9999999px, 28px, 0);
}
86.66666667% {
  clip: rect(106px, 9999999px, 74px, 0);
}
90% {
  clip: rect(33px, 9999999px, 97px, 0);
}
93.33333333% {
  clip: rect(94px, 9999999px, 29px, 0);
}
96.66666667% {
  clip: rect(108px, 9999999px, 87px, 0);
}
100% {
  clip: rect(5px, 9999999px, 14px, 0);
}
}

.btn-dmark {
  border: 2px transparent;
  font-family: var(--font-text-main);
    font-weight: 300;
    color: var(--color-white);
    font-size: 24px;
    padding: 10px 30px;
    border-radius: 35px;
  display: flex;
  gap: 10px;
  align-items: center;
  background: linear-gradient(90deg, rgba(53,72,105,1) 0%, rgba(228,79,84,1) 100%);
  cursor: pointer;
  transition: all 0.5s ease;
  box-sizing: border-box;
  }
  
  .btn-dmark:hover {
    transform: scale(1.1);
  }
  
  .btn-dmark .icon-dmark {
    display: block;
  height: 50px;
  filter: invert(1)
  }
  
  .pixels-case-img{
    opacity: 0.6;
    z-index: -1;
    transform: rotate(90deg);
    top: 0;
    left: 0;
    filter: invert(1) !important;
    position: absolute;
    width: 36% !important;
  }

  .uslugi-pixels-img{
  position: absolute;
    width: 30%;
    left: 0;
    top: 0;
    transform: rotate(90deg);
    filter: invert(1);
    opacity: 0.7;
    border-radius: 30px;
  }