@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kelly+Slab&display=swap');
  @font-face {
    font-family: "bold";
    src: url('fonts/bold-regular.woff2') format('woff2'),
    url('fonts/bold-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    }
    @font-face {
      font-family: "brook";
      src: url('fonts/brook.woff2') format('woff2'),
      url('fonts/brook.woff') format('woff');
      font-weight: normal;
      font-style: normal;
      }
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
  user-select: none;
  background: #050505;
  justify-content: center;
    align-items: center;
    overflow: hidden;
}
html{
  background: #050505;
}
#home{
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.parallax-slider .swiper-slide {
  position: relative;
  overflow: hidden;
}

.parallax-slider .img-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-position: center;
  background-size: cover;
}


.slider-controls{
  position: absolute;
  right:5%;
  bottom:10%;
  height: auto;
  width: auto;
  display: flex;
  flex-direction: row;
}

.prev-ctrl,.next-ctrl{
  height: auto;
  width: auto;
  text-align: center;
  padding: 10px;
  background: transparent;
  outline: none;
  position: relative;
  left:auto;
  right:auto;
  cursor: pointer;
}
.slider-controls{
  background: rgb(0,0,0,.4);
  z-index: 10;
  margin-left:10px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 8px;
}

.parallax-slider{
  height:100vh;
  width: 100%;
}

.parallax-slider .img-container.zero {
  background:url(../images/project_0/index_home_vertical.webp);
  background-position: center;
  background-size: cover;
}

.parallax-slider .img-container.one {
  background:url(../images/project_1/index_home_vertical.webp);
  background-position: center;
  background-size: cover;
}

.parallax-slider .img-container.two {
  background:url(../images/project_2/index_home_vertical.webp);
  background-position: center;
  background-size: cover;
}

.parallax-slider .img-container.three {
  background:url(../images/project_3/index_home_vertical.webp);
  background-position: center;
  background-size: cover;
}
.parallax-slider .img-container.four {
  background:url(../images/project_4/index_home_vertical.webp);
  background-position: center;
  background-size: cover;
}
.parallax-slider .img-container.five {
  background:url(../images/project_5/index_home_vertical.webp);
  background-position: center;
  background-size: cover;
}

.parallax-slider .img-container.six {
  background:url(../images/project_6/index_home_vertical.webp);
  background-position: center;
  background-size: cover;
}

.parallax-slider .img-container.seven {
  background:url(../images/project_7/index_home_vertical.webp);
  background-position: center;
  background-size: cover;
}

.parallax-slider .img-container.eight {
  background:url(../images/project_8/index_home_vertical.webp);
  background-position: center;
  background-size: cover;
}

.parallax-slider .img-container.nine {
  background:url(../images/project_9/index_home_vertical.webp);
  background-position: center;
  background-size: cover;
}

.parallax-slider .img-container.ten {
  background:url(../images/project_10/index_home_vertical.webp);
  background-position: center;
  background-size: cover;
}

.parallax-slider .img-container.elewen {
  background:url(../images/project_11/index_home_vertical.webp);
  background-position: center;
  background-size: cover;
}

.parallax-slider .img-container.twelve {
  background:url(../images/project_12/index_home_vertical.webp);
  background-position: center;
  background-size: cover;
}


 /*Стили для мобильных устройств */
@media screen and (max-width: 768px) {
  .parallax-slider .img-container.zero {
    background: url(../images/project_0/index_mob_vertical.webp);
    background-size: cover; /* Полное заполнение с учетом пропорций */
    background-position: center; /* Центрирование изображения */
  }

  .parallax-slider .img-container.one {
    background: url(../images/project_1/index_mob_vertical.webp);
    background-size: cover; /* Полное заполнение с учетом пропорций */
    background-position: center; /* Центрирование изображения */
  }

  .parallax-slider .img-container.two {
    background: url(../images/project_2/index_mob_vertical.webp);
    background-size: cover; /* Полное заполнение с учетом пропорций */
    background-position: center; /* Центрирование изображения */
  }

  .parallax-slider .img-container.three {
    background: url(../images/project_3/index_mob_vertical.webp);
    background-size: cover; /* Полное заполнение с учетом пропорций */
    background-position: center; /* Центрирование изображения */
  }

  .parallax-slider .img-container.four {
    background: url(../images/project_4/index_mob_vertical.webp);
    background-size: cover; /* Полное заполнение с учетом пропорций */
    background-position: center; /* Центрирование изображения */
  }
  
  .parallax-slider .img-container.five {
    background: url(../images/project_5/index_mob_vertical.webp);
    background-size: cover; /* Полное заполнение с учетом пропорций */
    background-position: center; /* Центрирование изображения */
  }

  .parallax-slider .img-container.six {
    background: url(../images/project_6/index_mob_vertical.webp);
    background-size: cover; /* Полное заполнение с учетом пропорций */
    background-position: center; /* Центрирование изображения */
  }

  .parallax-slider .img-container.seven {
    background: url(../images/project_7/index_mob_vertical.webp);
    background-size: cover; /* Полное заполнение с учетом пропорций */
    background-position: center; /* Центрирование изображения */
  }

  .parallax-slider .img-container.eight {
    background: url(../images/project_8/index_mob_vertical.webp);
    background-size: cover; /* Полное заполнение с учетом пропорций */
    background-position: center; /* Центрирование изображения */
  }

  .parallax-slider .img-container.nine {
    background: url(../images/project_9/index_mob_vertical.webp);
    background-size: cover; /* Полное заполнение с учетом пропорций */
    background-position: center; /* Центрирование изображения */
  }

  .parallax-slider .img-container.ten {
    background: url(../images/project_10/index_mob_vertical.webp);
    background-size: cover; /* Полное заполнение с учетом пропорций */
    background-position: center; /* Центрирование изображения */
  }
  .parallax-slider .img-container.elewen {
    background: url(../images/project_11/index_mob_vertical.webp);
    background-size: cover; /* Полное заполнение с учетом пропорций */
    background-position: center; /* Центрирование изображения */
  }

  .parallax-slider .img-container.twelve {
    background: url(../images/project_12/index_mob_vertical.webp);
    background-size: cover; /* Полное заполнение с учетом пропорций */
    background-position: center; /* Центрирование изображения */
  }
}


.navigation{
  position: absolute;
  left: 0;
  top: 0;
  z-index:9;
  color: rgb(245, 245, 245);
  font-family: "Kelly Slab", serif;
  padding: 20px;
  padding-top: 40px;
  padding-left: 40px;
  font-size: 20px;
  width: 100%;
}
.logo{
  display: inline-block;
  z-index: 10;
  color: rgb(245, 245, 245);
  padding:10px;
  font-family: "Kelly Slab", serif;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 1px;
  border-radius: 4px;
}
.navigation-links{
  float: right;
  padding: 20px;
  padding-right: 40px;
}
a{
  color: inherit;
  text-decoration: none;
  outline: none;
}
a:hover{
  color: inherit;
  text-decoration: none;
  outline: none;
}
li{
  list-style: none;
  padding-left: 20px;
  padding-right: 20px;
}
.links{
  opacity:.9;
  transition: all .4s ease;
  padding-right: 0px;
}
.links:hover{
  opacity: 1;
}
/*.cursor{
  height: 50px;
  width: 50px;
  background: transparent;
  border-radius: 20%;
  pointer-events: none;
  border: 1px solid rgb(245, 245, 245);
  position: fixed;
  z-index: 10;
  top: -25px;
  left: -25px;
  opacity:1;
  overflow: hidden;
  font-family: "Kelly Slab", serif;
  text-align: center;
  color:black;
  font-size: 36px;
}*/
.cursor {
  height: 50px;
  width: 50px;
  background: transparent;
  border-radius: 50%; /* Слегка скруглённые углы */
  pointer-events: none; /* Не блокирует клики */
  position: fixed;
  z-index: 10;
  top: -25px;
  left: -25px;
  opacity: 1;
  display: flex;
  justify-content: center; /* Центрируем иконку */
  align-items: center;
  font-size: 36px; /* Размер шестерёнки */
}

.cursor i {
  color: transparent; /* Делаем иконку прозрачной */
  -webkit-text-stroke: 1px white; /* Белый контур иконки */
  text-stroke: 1px white; /* Для поддержки других браузеров */
  font-size: 36px; /* Размер иконки */
  animation: spin-reverse 5s linear infinite; /* Анимация вращения в обратную сторону */
}

/* Ключевые кадры для вращения в другую сторону */
@keyframes spin-reverse {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg); /* Вращение против часовой стрелки */
  }
}


/*.cursor-two{
  height: 8px;
  width: 8px;
  background: rgb(245, 245, 245);
  border-radius: 50%;
  pointer-events: none;
  position: fixed;
  z-index: 10;
  opacity:1;
  top: -4px;
  left: -4px;
  transition: all .05s ease;
}*/
.cursor-two {
  height: 20px; /* Размер области шестерёнки */
  width: 20px;
  background: none; /* Убираем фон */
  border-radius: 50%;
  pointer-events: none;
  position: fixed;
  z-index: 10;
  top: -10px;
  left: -10px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  transition: all 0.05s ease;
}

.cursor-two i {
  font-size: 20px; /* Размер шестерёнки */
  color: rgb(245, 245, 245); /* Цвет шестерёнки */
  animation: spin 2s linear infinite; /* Анимация вращения */
}

/* Ключевые кадры для вращения */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

ul{
  display: flex;
  flex-direction: row;
}
.swiper-pagination-container
{
  position: relative;
  width: 100px;
  height:70px;
  z-index: 10;
  padding:10px 
}
.swiper-pagination{
  width:100px;
  height:2px;
  background: rgb(245, 245, 245,.2);
  opacity: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.slider-control-image{
  height:50px;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{
  background: rgb(245, 245, 245);
}
.about-link{
  padding-right: 0px;
}
.slide-text{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(245, 245, 245);
  font-size: 60px;
  text-align: center;
  font-family: "Kelly Slab", serif;
  font-weight: 900;
}
#home .social-media-links {
  position: absolute;
  left:5%;
  bottom: 0%;
  color: rgb(245, 245, 245);
  z-index: 9;
}

.project .social-media-links{
  position: absolute;
  left:2%;
  bottom: 5%;
  color: rgb(245, 245, 245);
  z-index: 0;
}
#about .social-media-links {
  position: absolute;
  right:5%;
  bottom: 5%;
  color: rgb(245, 245, 245);
  z-index: 9;
}
#home .social-media-links ul , #about .social-media-links ul , .project .social-media-links ul{
  display: flex;
  flex-direction: row;
  font-size: 18px;
}
#home .social-media-links ul li ,#about .social-media-links ul li ,.project .social-media-links ul li{
  font-family: "Kelly Slab", serif;
  font-size: 18px;
  padding-left: 10px;
  padding-right: 10px;
}

#home .social-media-links ul li a img , #about .social-media-links ul li a img , .project .social-media-links ul li a img {
    width: 24px;
    height: 24px;
    fill: white; /* Цвет иконок */
    transition: all 0.3s ease;
}

#home .social-media-links ul li a:hover {
    
}

#about{
  position: relative;
  height: 100vh;
  width:100%;
  z-index:9;
  display: none;
  transform: scale(.9);
  overflow: hidden;
}
#about-color{
  position: absolute;
  left:0;
  top:0;
  width: 100%;
  height:100%;
  background: #041b4e;
  opacity: .5;
}

#breaker{
  background: #000000;
  position: fixed;
  height: 150vh;
  display: none;
  width: 100%;
  z-index: 11;
  transform: translateY(-100%);
  animation: breaker 2.5s ;
}

@keyframes breaker{
  0%{
    transform: translateY(-100%);
  }
  100%{
    transform: translateY(100%);
  }
}
.about-img{
  position: relative;
  width: 100%;
  height: 100vh;
  background: url(../images/about-pic.webp);
  background-position: center;
  background-size: cover;
}
.navigation-close-line{
  height: 22px;
  width: 2px;
  border-radius: 10px;
  background: rgb(245, 245, 245);
  position: absolute;
  transform: rotate(-45deg);
}
.navigation-close{
  padding: 20px;
  padding-top: 0px;
  cursor: pointer;
}
.navigation-close-line:nth-child(2){
  transform: rotate(45deg);
}
.about-text{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
  padding:100px;
  margin: 0px;
  position: relative;
  z-index: 5;
  color: rgb(245, 245, 245);
  font-family: poppins;
}
.about-text-header{
  font-size: 28px;
  padding-bottom: 30px;
  font-family: "Kelly Slab", serif;
}
.about-text-button{
  padding-top: 0px;
  text-align: left;
  /* margin: 10px; */
}
.about-text-paragraph{
  padding-bottom: 10px;
  font-size: 16px;
  opacity: .9;
  font-weight: 400;
  font-family: "Kelly Slab", serif;
}
.contact-button{
  padding:10px 20px;
  background-color: #f87620;
  outline: none;
  border: none;
  border-radius: 5px;
  font-weight: 600;
  opacity: .8;
  color:#ffffff;
  transition: all .4s ease;
  font-size: 18px;
  font-family: "Kelly Slab", serif;
}
.contact-button:hover{
  opacity: 1;
  transform: scale(1.05);
}
.project{
  height: 100vh;
  width: 100%;
  overflow: hidden;
  overflow: hidden;
  background: #050505;
  position: relative;
}
.slideshow{
  width:95%;
  margin: auto;
  overflow: hidden;
  height: 80vh;
}
.malevich-slides,.malevich-1-slides,.malevich-2-slides,.malevich-3-slides,.malevich-4-slides,.malevich-5-slides,.malevich-6-slides,.malevich-7-slides,.malevich-8-slides,.malevich-9-slides,.malevich-10-slides,.malevich-11-slides,.malevich-12-slides{
  width: 100%;
  height: 100vh;
  left: 0;
  top: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all .5s ease;
  position: absolute;
}
.controls{
  position: absolute;
  right:5%;
  bottom:6%;
  width: auto;
  height: auto;
  cursor: pointer;
}
.hover{
  cursor: pointer;
}
.imgs{
  cursor: pointer;
  height: 26px;
  width: 26px;
  transition: all .4s ease;
}
.controls button:hover img{
  transform: scale(1.4);
}

.malevich-slides picture,.malevich-1-slides picture,.malevich-2-slides picture,.malevich-3-slides picture,.malevich-4-slides picture,.malevich-5-slides picture,.malevich-6-slides picture,.malevich-7-slides picture,.malevich-8-slides picture,.malevich-9-slides picture,.malevich-10-slides picture,.malevich-11-slides picture,.malevich-12-slides picture{
  display: contents;
  width: 100%;
  /* height: auto; */
  width: auto;
  max-height: 100vh;
  max-width: 100%;
  position: absolute;
  margin: auto;
  pointer-events: none;
  border-radius: 6px;
}

.malevich-slides img,.malevich-1-slides img,.malevich-2-slides img,.malevich-3-slides img,.malevich-4-slides img,.malevich-5-slides img,.malevich-6-slides img,.malevich-7-slides img,.malevich-8-slides img,.malevich-9-slides img,.malevich-10-slides img,.malevich-11-slides img,.malevich-12-slides img{
  width: 100%;
    height: auto;
    object-fit: cover;
}
.navigation-project{
position: absolute;
z-index: 2;
}
.controls button{
  padding: 10px 10px;
  padding-left: 50px;
  background: transparent;
  color: rgb(245, 245, 245);
  transition: all .4s ease;
  outline: none;
  border: none;
  margin: 5px;
}
.project-link{
  padding:100px;
  padding-left: 150px;
  padding-right: 150px;
  text-shadow: 0 12px 15px rgba(0, 0, 0, 1);
}
.malevich-project,.malevich-1-project,.malevich-2-project,.malevich-3-project,.malevich-4-project,.malevich-5-project,.malevich-6-project,.malevich-7-project,.malevich-8-project,.malevich-9-project,.malevich-10-project,.malevich-11-project,.malevich-12-project{
  display: none;
  transform: scale(.9);
  overflow: hidden;
}
.project-name{
  font-size: 35px;
  font-family: "Kelly Slab", serif;
  color: rgb(245, 245, 245);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left:0;
  top:0;
  height: 100%;
  width: 100%;
  background: rgb(0,0,0,.4);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  pointer-events: none;
  font-weight: 700;
  z-index: 5;
  text-align: center;
}
.project-name p{
  text-align: center;
}
.view-project{
  font-size: 18px;
  font-weight: 200;
  font-family: "Kelly Slab", serif;
  margin-top: -10px;
  opacity: .9;
  padding: 0;
}
.pace {
  pointer-events: none;
  user-select: none;
  z-index: 2000;
  position: fixed;
  margin: auto;
  top: 180px;
  left: 0;
  right: 0;
  bottom: 0;
  width: 200px;
  border: 0px;
  height: 1px;
  overflow: hidden;
  background:#1b1b1b;
}

.pace .pace-progress {
  box-sizing: border-box;
  transform: translate3d(0, 0, 0);
  max-width: 400px;
  position: fixed;
  z-index: 2000;
  display: block;
  position: absolute;
  top: 0;
  right: 100%;
  height: 100%;
  width: 100%;
  background: #f87620;
}

.pace.pace-inactive {
  display: none;
}

#preloader{
  width:100%;
  height:100vh;
  background:#050505;
  overflow:hidden;
  z-index: 1000;
  position:fixed;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.p {
  position: absolute;
  top: 86.8%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "bold", serif;
  font-size: 50px;
  color: rgb(248 118 32);
  z-index: 3;
  /* Градиент */
  background: linear-gradient(to bottom, #f87620, #632d09); /* Градиент от оранжевого к жёлтому */
  -webkit-background-clip: text; /* Для WebKit-браузеров */
  -webkit-text-fill-color: transparent; /* Убираем заливку текста */
  background-clip: text; /* Для современных браузеров */
  text-fill-color: transparent; /* Убираем заливку текста */
  
}
#contact{
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  background: #050505;
  position: relative;
  z-index: 5;
color: rgb(245, 245, 245);
font-family: "Kelly Slab", serif;
font-weight: 100;
display: none;
transform: scale(.9);
}
.contact-social-media-links{
padding-top: 30px;
font-family: "Kelly Slab", serif;
z-index: 5;

}
.contact-social-media-links ul li:nth-child(1) {
  padding-left:0px;
  }
  .contact-social-media-links ul li:nth-child(3) {
    padding-right:30px;
    }
.contact-header{
  height: auto;
  padding:40px;
  padding-top: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  width: 100%;
}

#map{
  width: 100%;
  height: 100%;
  position: absolute;
}

.ymaps{
  width: 100% !important;
  height: 100% !important;
}

.form{
  min-height:70vh;
  width:100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.form a{
	font-size: 30px;
}
.input-line{
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
input{
  background: transparent;
  border-radius: 0px;
  border: none;
  border-bottom:1px solid rgb(255,255,255,.3) ;
  outline: none;
  margin:10px;
  padding:10px 20px;
  margin-bottom: 20px;
  font-size: 18px;
  width:80%;
  color: rgb(245, 245, 245);
transition: all .2s ease;
}
.input-line-column{
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.input-line-column input{
   width:84%;
}
.input-same-line{
  width:41%;
}
::placeholder{
  color: rgb(245, 245, 245,.8);
}
form{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Kelly Slab", serif;
  justify-content: center;
  height: auto;
}
#submit{
  background: transparent;
  outline: none;
  border: 1px solid rgb(255,255,255,.3);
  color: rgb(245, 245, 245);
  padding: 10px 30px;
  font-size: 18px;
  margin: 20px;
  font-family: "Kelly Slab", serif;
  cursor: pointer;
  transition: all .4s ease;
  position: relative;
  overflow: hidden;
  z-index: 2;
}
#submit:after{
  content: "";
  background: rgb(245, 245, 245);
  color: #000000;
  left: 0;
  top:100%;
  z-index: -1;
  width: 100%;
  height: 100%;
  position: absolute;
  transition: all .4s cubic-bezier(0.19, 1, 0.22, 1);
}
#submit:hover{
  color: black;
}
#submit:hover::after{
  top:0;
}
.textarea{
width: 84%;
height: 150px;
outline: none;
background: transparent;
border-radius: 0px;
border: none;
border-bottom:1px solid rgb(255,255,255,.3);
padding: 10px 20px;
margin: 10px;
margin-bottom: 20px;
font-size: 18px;
color: rgb(245, 245, 245);
font-family: "Kelly Slab", serif;
transition: all .2s ease;
}
 form .textarea:focus , form .textarea:valid{
  border-bottom: 1px solid rgb(255,255,255,1);
}
input:focus  , input:valid{
  border-bottom: 0px solid rgb(255,255,255,0);

}



#projects  .swiper-container{
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  max-height: 70vh;
}
#projects .swiper-wrapper{
  height: 70vh;
}
.align-center{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
}

#projects .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: transparent;
  max-width: 60%;
  position: relative;
  height: auto;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
#projects .swiper-slide img{
  width: auto;
  max-height: 70vh;
  position: absolute;
  margin: auto;
  pointer-events: none;
  border-radius: 6px;
}
.gg-mouse {
  box-sizing: border-box;
  position: relative;
  display: block;
  transform: scale(var(--ggs, 1));
  width: 16px;
  height: 24px;
  border: 2px solid rgb(245, 245, 245);
  border-radius: 10px;
}

.gg-mouse::after {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  border-radius: 3px;
  width: 2px;
  height: 6px;
  background: rgb(245, 245, 245);
  top: 3px; /* Начальная позиция "точки" */
  animation: scroll-indicator 2s linear infinite; /* Анимация */
  left: 50%; /* Центрируем "точку" */
  transform: translateX(-50%); /* Исправляем смещение */
}

/* Ключевые кадры для анимации */
@keyframes scroll-indicator {
  0% {
    top: 3px; /* Начальная позиция */
    opacity: 1;
  }
  50% {
    top: 12px; /* Нижняя позиция "точки" */
    opacity: 0.5; /* Полупрозрачность в середине */
  }
  100% {
    top: 3px; /* Возвращаемся в начальную позицию */
    opacity: 1;
  }
}

#projects .scroll-icon{
  bottom: 7%;
}
.scroll-icon{
position: absolute;
left: 50%;
bottom: 13%;
z-index: 2;
}
@keyframes mouse {
  0%{
    transform: translateY(0%);
  }
  50%{
    transform: translateY(50%);
  }
  100%{
    transform: translateY(0%);
  }
}
@-webkit-keyframes mouse{
  0%{
    transform: translateY(0%);
  }
  50%{
    transform: translateY(50%);
  }
  100%{
    transform: translateY(0%);
  }
}


.gg-swipe {
  display: none; /* По умолчанию скрыто на десктопе */
  width: 30px;
  height: 30px;
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  animation: swipe-animation 1.5s infinite ease-in-out;
}

/* Анимация раскачивания иконки свайпа */
@keyframes swipe-animation {
  0% {
      transform: translateX(-50%) translateX(0);
  }
  50% {
      transform: translateX(-50%) translateX(10px); /* Движение вправо */
  }
  100% {
      transform: translateX(-50%) translateX(0);
  }
}



/* Общие стили модального окна */
.modal {
  display: none; /* По умолчанию окно скрыто */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7); /* Полупрозрачный фон */
  z-index: 1000;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Убираем прокрутку всего окна */
  z-index: 9;
}

/* Текстовое содержимое */
.modal-content {
  background: #171717;
  padding: 50px;
  border-radius: 0px;
  width: 100%; /* Адаптивная ширина */
  height: 100vh;
  max-width: 100%; /* Максимальная ширина */
  box-shadow: none;
  position: relative; /* Для позиционирования крестика */
  max-height: 100vh; /* Ограничиваем высоту */
  overflow-y: auto; /* Включаем прокрутку только внутри текста */
  transform: scale(0); /* Начальное состояние (уменьшено до 0) */
  transform-origin: center; /* Центр анимации */
  opacity: 0; /* Прозрачность по умолчанию */
  animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* "Слайм"-эффект */
}

/* Медийное содержимое */
.modal-content-all {
  background: #ffffff;
  padding: 0px;
  border-radius: 0px;
  width: 100%; /* Адаптивная ширина */
  height: 100vh;
  max-width: 100%; /* Максимальная ширина */
  box-shadow: none;
  position: relative; /* Для позиционирования крестика */
  max-height: 100vh; /* Ограничиваем высоту */
  overflow-y: auto; /* Включаем прокрутку только внутри текста */
  transform: scale(0); /* Начальное состояние (уменьшено до 0) */
  transform-origin: center; /* Центр анимации */
  opacity: 0; /* Прозрачность по умолчанию */
  animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* "Слайм"-эффект */
  scroll-behavior: smooth; /* Плавный скролл для браузеров с поддержкой */
}

.modal-content-rating {
  background: #171717;
  padding: 50px;
  border-radius: 0px;
  width: 100%; /* Адаптивная ширина */
  height: 100vh;
  max-width: 100%; /* Максимальная ширина */
  box-shadow: none;
  position: relative; /* Для позиционирования крестика */
  max-height: 100vh; /* Ограничиваем высоту */
  overflow-y: auto; /* Включаем прокрутку только внутри текста */
  transform: scale(0); /* Начальное состояние (уменьшено до 0) */
  transform-origin: center; /* Центр анимации */
  opacity: 0; /* Прозрачность по умолчанию */
  animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* "Слайм"-эффект */
}




/* Анимация появления */
.modal.active .modal-content, .modal-content-all, .modal-content-rating {
  animation: slime 1s forwards; /* Запускаем анимацию */
}

/* Анимация вытекающего окна */
@keyframes slime {
  0% {
    transform: scale(0); /* Начало анимации: окно скрыто */
    opacity: 0; /* Прозрачное */
  }
  50% {
    transform: scale(1.1); /* "Растягивание" */
    opacity: 1;
  }
  100% {
    transform: scale(1); /* Финальная форма */
    opacity: 1;
  }
}




/* Сетка изображений */
.image-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr); /* Три блока в строке */
  gap: 0px; /* Расстояние между блоками */
  padding: 0px;
}

/* Блок изображения */
.image-box {
  width: 100%;
  padding-bottom: 35%; /* Соотношение сторон 1:1 */
  background-size: cover; /* Заполняем весь блок изображением */
  background-position: center; /* Центрируем изображение */
  border-radius: 0px; /* Закругленные углы */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Тень */
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, border-radius 0.6s ease-out;
  box-shadow: none; /* Подсветка по умолчанию отсутствует */
}



.image-text {
  position: absolute;
  z-index: 9; /* Увеличиваем z-index текста, чтобы он был поверх фона */
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  font-weight: 900;
  text-align: center;
  transition: font-size 0.5s ease-in-out;
  font-family: "Kelly Slab", serif;
  letter-spacing: 2px;
  text-shadow: 0 12px 15px rgba(0, 0, 0, 1);
}




.image-box {
  position: relative;
  overflow: hidden; /* Убираем выходящие элементы */
  z-index: 1; /* Фон должен быть под текстом */
}

.image-box a{
  /* color: transparent;
  -webkit-text-stroke: 1px #fff; */
  font-size: 80px;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  text-transform: uppercase; /* Делаем текст заглавным (по желанию) */
}

.image-box a:hover{
  color: #fff;
  text-shadow: 0 12px 15px rgba(0, 0, 0, 1);
}





/* Крестик для закрытия */
.close {
  position: fixed; /* Фиксируем крестик относительно экрана */
  top: 38px; /* Отступ от верхнего края экрана */
  right: 62px; /* Отступ от правого края экрана */
  font-size: 56px;
  font-weight: 100;
  color: #ffffff;
  cursor: pointer;
  text-shadow: none;
  z-index: 1001; /* Поверх модального окна */
}

.close:hover {
  color: #f87620;
}

.close_white {
  position: fixed; /* Фиксируем крестик относительно экрана */
  top: 38px; /* Отступ от верхнего края экрана */
  right: 62px; /* Отступ от правого края экрана */
  font-size: 56px;
  font-weight: 100;
  color: #ffffff;
  cursor: pointer;
  text-shadow: none;
  z-index: 1001; /* Поверх модального окна */
}

.close_white:hover {
  color: #f87620;
}

/* Текстовое содержимое */
.modal-content::-webkit-scrollbar {
  display: none; /* Скрываем полосу прокрутки для Webkit-браузеров */
}

.modal-content {
  scrollbar-width: none; /* Скрываем полосу прокрутки для Firefox */
  -ms-overflow-style: none; /* Скрываем полосу прокрутки для IE и Edge */
}

/* Текстовое содержимое */
.modal-content-all::-webkit-scrollbar {
  display: none; /* Скрываем полосу прокрутки для Webkit-браузеров */
}

.modal-content-all {
  scrollbar-width: none; /* Скрываем полосу прокрутки для Firefox */
  -ms-overflow-style: none; /* Скрываем полосу прокрутки для IE и Edge */
}

/* Текстовое содержимое */
.modal-content-rating::-webkit-scrollbar {
  display: none; /* Скрываем полосу прокрутки для Webkit-браузеров */
}

.modal-content-rating {
  scrollbar-width: none; /* Скрываем полосу прокрутки для Firefox */
  -ms-overflow-style: none; /* Скрываем полосу прокрутки для IE и Edge */
}

.modal-text {
  padding-right: 10px; /* Пространство для текста внутри окна */
}

.modal-text .text-header p {
	font-size: 28px;
    padding-bottom: 30px;
    font-family: "Kelly Slab", serif;
	color: #ffffff;
}

.modal-text .text-paragraph h1 {
	padding-bottom: 10px;
    font-size: 24px;
    opacity: .9;
    font-weight: 400;
    font-family: "Kelly Slab", serif;
	color: #ffffff;
}

.modal-text .text-paragraph h2 {
	padding-bottom: 10px;
    font-size: 18px;
    opacity: .9;
    font-weight: 400;
    font-family: "Kelly Slab", serif;
	color: #ffffff;
}

.modal-text .text-paragraph h3 {
	padding-bottom: 10px;
    font-size: 12px;
    opacity: .9;
    font-weight: 400;
    font-family: "Kelly Slab", serif;
	color: #ffffff;
}

.modal-text .text-paragraph p {
	padding-bottom: 10px;
    font-size: 16px;
    opacity: .9;
    font-weight: 400;
    font-family: "Kelly Slab", serif;
	color: #ffffff;
}

/* Пульс кнопки */

.pulse-effect {
  position: relative;
  display: inline-block;
  font-size: 24px; /* Размер иконки */
  color: #ffffff; /* Цвет иконки */
  animation: pulse 2s infinite ease-in-out; /* Пульсация */
}

.pulse-effect::before, .pulse-effect::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, #FFD700, #FFA500, #FF4500); /* Градиент золота и праны */
  border-radius: 50%; /* Делает круг */
  transform: translate(-50%, -50%);
  animation: ripple 2s infinite ease-in-out;
  z-index: -1; /* Слой под иконкой */
}

.pulse-effect::after {
  animation-delay: 1s; /* Сдвиг для второго круга */
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    color: #ffffff;
  }
  50% {
    transform: scale(1.05);
    color: #ffffff; /* Более яркий оттенок */
  }
}

@keyframes ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    width: 120px;
    height: 120px;
    opacity: 0;
  }
}

/* Крутящаяся шестерёнка */

/* Стиль для вращающейся иконки */
.spin_cog {
  display: inline-block;
  animation: spin 2s linear infinite; /* Анимация вращения */
}

/* Анимация вращения */
@keyframes spin {
  0% {
    transform: rotate(0deg); /* Начальная позиция */
  }
  100% {
    transform: rotate(360deg); /* Полный оборот */
  }
}

/* Прелоадер шестерёнки */

.container_gearbox {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -100px;
  height: 150px;
  width: 200px;
  margin-top: -75px;
}

@-webkit-keyframes clockwise {
  0% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes clockwise {
  0% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes counter-clockwise {
  0% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
@-moz-keyframes counter-clockwise {
  0% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}

.gearbox {
  background: #111;
  height: 150px;
  width: 200px;
  position: relative;
  border: none;
  overflow: hidden;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  -moz-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.1);
  -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.1);
  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.1);
}
.gearbox .overlay {
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  -moz-box-shadow: inset 0px 0px 20px black;
  -webkit-box-shadow: inset 0px 0px 20px black;
  box-shadow: inset 0px 0px 20px black;
  -moz-transition: background 0.2s;
  -o-transition: background 0.2s;
  -webkit-transition: background 0.2s;
  transition: background 0.2s;
}
.gearbox.turn .overlay {
  background: transparent;
}

.gear {
  position: absolute;
  height: 60px;
  width: 60px;
  -moz-box-shadow: 0px -1px 0px 0px #888888, 0px 1px 0px 0px black;
  -webkit-box-shadow: 0px -1px 0px 0px #888888, 0px 1px 0px 0px black;
  box-shadow: 0px -1px 0px 0px #888888, 0px 1px 0px 0px black;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
}
.gear.large {
  height: 120px;
  width: 120px;
  -moz-border-radius: 60px;
  -webkit-border-radius: 60px;
  border-radius: 60px;
}
.gear.large:after {
  height: 96px;
  width: 96px;
  -moz-border-radius: 48px;
  -webkit-border-radius: 48px;
  border-radius: 48px;
  margin-left: -48px;
  margin-top: -48px;
}
.gear.one {
  top: 12px;
  left: 10px;
}
.gear.two {
  top: 61px;
  left: 60px;
}
.gear.three {
  top: 110px;
  left: 10px;
}
.gear.four {
  top: 13px;
  left: 128px;
}
.gear:after {
  content: "";
  position: absolute;
  height: 36px;
  width: 36px;
  -moz-border-radius: 36px;
  -webkit-border-radius: 36px;
  border-radius: 36px;
  background: #111;
  top: 50%;
  left: 50%;
  margin-left: -18px;
  margin-top: -18px;
  z-index: 3;
  -moz-box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.1), inset 0px 0px 10px rgba(0, 0, 0, 0.1), inset 0px 2px 0px 0px #090909, inset 0px -1px 0px 0px #888888;
  -webkit-box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.1), inset 0px 0px 10px rgba(0, 0, 0, 0.1), inset 0px 2px 0px 0px #090909, inset 0px -1px 0px 0px #888888;
  box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.1), inset 0px 0px 10px rgba(0, 0, 0, 0.1), inset 0px 2px 0px 0px #090909, inset 0px -1px 0px 0px #888888;
}

.gear-inner {
  position: relative;
  height: 100%;
  width: 100%;
  background: #555;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.large .gear-inner {
  -moz-border-radius: 60px;
  -webkit-border-radius: 60px;
  border-radius: 60px;
}
.gear.one .gear-inner {
  -webkit-animation: counter-clockwise 3s infinite linear;
  -moz-animation: counter-clockwise 3s infinite linear;
}
.gear.two .gear-inner {
  -webkit-animation: clockwise 3s infinite linear;
  -moz-animation: clockwise 3s infinite linear;
}
.gear.three .gear-inner {
  -webkit-animation: counter-clockwise 3s infinite linear;
  -moz-animation: counter-clockwise 3s infinite linear;
}
.gear.four .gear-inner {
  -webkit-animation: counter-clockwise 6s infinite linear;
  -moz-animation: counter-clockwise 6s infinite linear;
}
.gear-inner .bar {
  background: #555;
  height: 16px;
  width: 76px;
  position: absolute;
  left: 50%;
  margin-left: -38px;
  top: 50%;
  margin-top: -8px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.large .gear-inner .bar {
  margin-left: -68px;
  width: 136px;
}
.gear-inner .bar:nth-child(2) {
  -moz-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}
.gear-inner .bar:nth-child(3) {
  -moz-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  -webkit-transform: rotate(120deg);
  transform: rotate(120deg);
}
.gear-inner .bar:nth-child(4) {
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.gear-inner .bar:nth-child(5) {
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}
.gear-inner .bar:nth-child(6) {
  -moz-transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  -webkit-transform: rotate(150deg);
  transform: rotate(150deg);
}

/* Рейтинг */
:root {
  --bg: #e3e4e8;
  --fg: #17181c;
  --primary: #255ff4;
  --yellow: #ff8929;
  --yellow-t: rgba(156, 99, 0, 0.897);
  --bezier: cubic-bezier(0.42,0,0.58,1);
  --trans-dur: 0.3s;
  font-size: calc(24px + (30 - 24) * (100vw - 320px) / (1280 - 320));
}

.rating {
  margin: auto;
}
.rating__display {
  font-size: 1em;
  color: #ff8929;
  font-weight: 500;
  min-height: 1.25em;
  position: absolute;
  top: 100%;
  width: 100%;
  text-align: center;
}
.rating__stars {
  display: flex;
  padding-bottom: 0.375em;
  position: relative;
}
.rating__star {
  display: block;
  overflow: visible;
  pointer-events: none;
  width: 2em;
  height: 2em;
}
.rating__star-ring, .rating__star-fill, .rating__star-line, .rating__star-stroke {
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.rating__star-ring, .rating__star-fill, .rating__star-line {
  stroke: var(--yellow);
}
.rating__star-fill {
  fill: var(--yellow);
  transform: scale(0);
  transition: fill var(--trans-dur) var(--bezier), transform var(--trans-dur) var(--bezier);
}
.rating__star-line {
  stroke-dasharray: 12 13;
  stroke-dashoffset: -13;
}
.rating__star-stroke {
  stroke: #c7cad1;
  transition: stroke var(--trans-dur);
}
.rating__label {
  cursor: pointer;
  padding: 0.125em;
}
.rating__label--delay1 .rating__star-ring, .rating__label--delay1 .rating__star-fill, .rating__label--delay1 .rating__star-line, .rating__label--delay1 .rating__star-stroke {
  animation-delay: 0.05s;
}
.rating__label--delay2 .rating__star-ring, .rating__label--delay2 .rating__star-fill, .rating__label--delay2 .rating__star-line, .rating__label--delay2 .rating__star-stroke {
  animation-delay: 0.1s;
}
.rating__label--delay3 .rating__star-ring, .rating__label--delay3 .rating__star-fill, .rating__label--delay3 .rating__star-line, .rating__label--delay3 .rating__star-stroke {
  animation-delay: 0.15s;
}
.rating__label--delay4 .rating__star-ring, .rating__label--delay4 .rating__star-fill, .rating__label--delay4 .rating__star-line, .rating__label--delay4 .rating__star-stroke {
  animation-delay: 0.2s;
}
.rating__input {
  position: absolute;
  -webkit-appearance: none;
  appearance: none;
}
.rating__input:hover ~ [data-rating]:not([hidden]) {
  display: none;
}
.rating__input-1:hover ~ [data-rating="1"][hidden], .rating__input-2:hover ~ [data-rating="2"][hidden], .rating__input-3:hover ~ [data-rating="3"][hidden], .rating__input-4:hover ~ [data-rating="4"][hidden], .rating__input-5:hover ~ [data-rating="5"][hidden], .rating__input:checked:hover ~ [data-rating]:not([hidden]) {
  display: block;
}
.rating__input-1:hover ~ .rating__label:first-of-type .rating__star-stroke, .rating__input-2:hover ~ .rating__label:nth-of-type(-n + 2) .rating__star-stroke, .rating__input-3:hover ~ .rating__label:nth-of-type(-n + 3) .rating__star-stroke, .rating__input-4:hover ~ .rating__label:nth-of-type(-n + 4) .rating__star-stroke, .rating__input-5:hover ~ .rating__label:nth-of-type(-n + 5) .rating__star-stroke {
  stroke: var(--yellow);
  transform: scale(1);
}
.rating__input-1:checked ~ .rating__label:first-of-type .rating__star-ring, .rating__input-2:checked ~ .rating__label:nth-of-type(-n + 2) .rating__star-ring, .rating__input-3:checked ~ .rating__label:nth-of-type(-n + 3) .rating__star-ring, .rating__input-4:checked ~ .rating__label:nth-of-type(-n + 4) .rating__star-ring, .rating__input-5:checked ~ .rating__label:nth-of-type(-n + 5) .rating__star-ring {
  animation-name: starRing;
}
.rating__input-1:checked ~ .rating__label:first-of-type .rating__star-stroke, .rating__input-2:checked ~ .rating__label:nth-of-type(-n + 2) .rating__star-stroke, .rating__input-3:checked ~ .rating__label:nth-of-type(-n + 3) .rating__star-stroke, .rating__input-4:checked ~ .rating__label:nth-of-type(-n + 4) .rating__star-stroke, .rating__input-5:checked ~ .rating__label:nth-of-type(-n + 5) .rating__star-stroke {
  animation-name: starStroke;
}
.rating__input-1:checked ~ .rating__label:first-of-type .rating__star-line, .rating__input-2:checked ~ .rating__label:nth-of-type(-n + 2) .rating__star-line, .rating__input-3:checked ~ .rating__label:nth-of-type(-n + 3) .rating__star-line, .rating__input-4:checked ~ .rating__label:nth-of-type(-n + 4) .rating__star-line, .rating__input-5:checked ~ .rating__label:nth-of-type(-n + 5) .rating__star-line {
  animation-name: starLine;
}
.rating__input-1:checked ~ .rating__label:first-of-type .rating__star-fill, .rating__input-2:checked ~ .rating__label:nth-of-type(-n + 2) .rating__star-fill, .rating__input-3:checked ~ .rating__label:nth-of-type(-n + 3) .rating__star-fill, .rating__input-4:checked ~ .rating__label:nth-of-type(-n + 4) .rating__star-fill, .rating__input-5:checked ~ .rating__label:nth-of-type(-n + 5) .rating__star-fill {
  animation-name: starFill;
}
.rating__input-1:not(:checked):hover ~ .rating__label:first-of-type .rating__star-fill, .rating__input-2:not(:checked):hover ~ .rating__label:nth-of-type(2) .rating__star-fill, .rating__input-3:not(:checked):hover ~ .rating__label:nth-of-type(3) .rating__star-fill, .rating__input-4:not(:checked):hover ~ .rating__label:nth-of-type(4) .rating__star-fill, .rating__input-5:not(:checked):hover ~ .rating__label:nth-of-type(5) .rating__star-fill {
  fill: var(--yellow-t);
}
.rating__sr {
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17181c;
    --fg: #e3e4e8;
  }

  .rating {
    margin: auto;
  }
  .rating__star-stroke {
    stroke: #ff8929;
  }
}
@keyframes starRing {
  from, 20% {
    animation-timing-function: ease-in;
    opacity: 1;
    r: 8px;
    stroke-width: 16px;
    transform: scale(0);
  }
  35% {
    animation-timing-function: ease-out;
    opacity: 0.5;
    r: 8px;
    stroke-width: 16px;
    transform: scale(1);
  }
  50%, to {
    opacity: 0;
    r: 16px;
    stroke-width: 0;
    transform: scale(1);
  }
}
@keyframes starFill {
  from, 40% {
    animation-timing-function: ease-out;
    transform: scale(0);
  }
  60% {
    animation-timing-function: ease-in-out;
    transform: scale(1.2);
  }
  80% {
    transform: scale(0.9);
  }
  to {
    transform: scale(1);
  }
}
@keyframes starStroke {
  from {
    transform: scale(1);
  }
  20%, to {
    transform: scale(0);
  }
}
@keyframes starLine {
  from, 40% {
    animation-timing-function: ease-out;
    stroke-dasharray: 1 23;
    stroke-dashoffset: 1;
  }
  60%, to {
    stroke-dasharray: 12 13;
    stroke-dashoffset: -13;
  }
}


/*
FOR TABLETS
*/

@media all and (max-width: 991px) and (min-width: 576px){
  .cursor,.cursor-two{
    display: none;
  }
.about-img{
  display: none;
}
#about{
  background: url(../images/about-pic.webp);
  background-position: center;
  background-size: cover;
}
.malevich-slides img,.malevich-1-slides img,.malevich-2-slides img,.malevich-3-slides img,.malevich-4-slides img,.malevich-5-slides img,.malevich-6-slides img,.malevich-7-slides img,.malevich-8-slides img,.malevich-9-slides img,.malevich-10-slides img,.malevich-11-slides img,.malevich-12-slides img{
  width: auto;
  max-width: 100%;
  max-height: auto;
  position: absolute;
  margin: auto;
  border-radius: 8px;
}
.view-project{
  display: block;
  font-size: 20px;
}

.pace{
  width:200px;
}
.project-link{
  padding:100px;
  padding-left: 100px;
  padding-right: 100px;
}
.slide-text {
  font-size: 30px;
}
.gg-mouse {

  display:none;
}

.gg-swipe {
  display: block; /* Показываем swipe */
}



#projects .swiper-slide img{
  width: 100%;
  max-height: 70vh;
  position: absolute;
  margin: auto;
  pointer-events: none;
  border-radius: 6px;
}

/* Сетка изображений */
.image-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr); /* Три блока в строке */
  gap: 0px; /* Расстояние между блоками */
  padding: 0px;
}

.image-box a{
  /* color: transparent;
  -webkit-text-stroke: 1px #fff; */
  font-size: 50px;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  text-transform: uppercase; /* Делаем текст заглавным (по желанию) */
}

#home .social-media-links {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  z-index: 10;
}

}






/*

FOR MOBILES

*/
@media all and (max-width: 576px) and (min-width: 375px){
.navigation{
  font-size: 14px;
  padding-top:20px;
  padding-left: 20px;
  padding-left: 10px;
}
.cursor,.cursor-two{
  display: none;
}
.navigation-links{
  padding-right: 0px;
  padding-left: 0px;
}
.logo{
  font-size: 28px;
  padding-left: 0px;
}
.project-link{
  padding:40px;
  padding-left: 40px;
  padding-right: 40px;
}
.slider-controls{
  position: absolute;
  right:15%;
  bottom:10%;
  height: auto;
  width: auto;
  display: flex;
  flex-direction: row;
}
.slide-text{
  font-size: 30px;
}
#home .social-media-links{
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
color: white;
z-index: 10;
}
.about-img{
  display: none;
}
#about{
  background: url(../images/about-pic.webp);
  background-position: center;
  background-size: cover;
}
.about-text{
  padding:50px;
  padding-top: 0px;
  padding-bottom: 0px;
  margin: 0px;
}
.about-text-header{
  font-size: 20px;
  padding-bottom: 10px;
}
.about-text-paragraph{
  padding-bottom: 10px;
  font-size: 14px;
}
.navigation-close-line{
  height: 16px;
  width: 2px;
}
#about .social-media-links ul li{
  font-family: "Kelly Slab", serif;
  font-size: 16px;
}
.malevich-slides img,.malevich-1-slides img,.malevich-2-slides img,.malevich-3-slides img,.malevich-4-slides img,.malevich-5-slides img,.malevich-6-slides img,.malevich-7-slides img,.malevich-8-slides img,.malevich-9-slides img,.malevich-10-slides img,.malevich-11-slides img,.malevich-12-slides img{
  width: auto;
  max-width: 100%;
  max-height: auto;
  position: absolute;
  margin: auto;
  border-radius: 8px;
}
.controls button{
  padding: 10px 10px;
  margin: 5px;
}
.controls button:hover img{
  transform: scale(1);
}
.view-project{
  display: block;
}
.input-line{
  flex-direction: column;
}
.input-same-line{
  width: 83%;
}
.pace{
  width:200px;
}
.textarea{
  height: 80px;
}
.form{
  height: auto;

}
.contact-header{
  padding:10px;
  padding-top: 80px;
  font-size: 24px;
}

#projects .swiper-slide img{
  width: 100%;
  max-height: 70vh;
  position: absolute;
  margin: auto;
  pointer-events: none;
  border-radius: 6px;
}
.gg-mouse {

  display:none;
}

.gg-swipe {
  display: inline-block; /* Показываем swipe */
}


.modal-content {
  background: #171717;
  padding: 20px;
  border-radius: 0px;
  width: 100%; /* Адаптивная ширина */
  height: 100vh;
  max-width: 100%; /* Максимальная ширина */
  box-shadow: none;
  position: relative; /* Для позиционирования крестика */
  max-height: 100vh; /* Ограничиваем высоту */
  overflow-y: auto; /* Включаем прокрутку только внутри текста */
  transform: scale(0); /* Начальное состояние (уменьшено до 0) */
  transform-origin: center; /* Центр анимации */
  opacity: 0; /* Прозрачность по умолчанию */
  animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* "Слайм"-эффект */
}

/* Крестик для закрытия */
.close {
  position: fixed; /* Фиксируем крестик относительно экрана */
  top: 18px; /* Отступ от верхнего края экрана */
  right: 24px; /* Отступ от правого края экрана */
  font-size: 50px;
  font-weight: 100;
  color: #ffffff;
  cursor: pointer;
  text-shadow: none;
  z-index: 1001; /* Поверх модального окна */
}

.close_white {
  position: fixed; /* Фиксируем крестик относительно экрана */
  top: 18px; /* Отступ от верхнего края экрана */
  right: 24px; /* Отступ от правого края экрана */
  font-size: 50px;
  font-weight: 100;
  color: #ffffff;
  cursor: pointer;
  text-shadow: none;
  z-index: 1001; /* Поверх модального окна */
}

/* Сетка изображений */
.image-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr); /* Три блока в строке */
  gap: 0px; /* Расстояние между блоками */
  padding: 0px;
}

.image-box a{
  /* color: transparent;
  -webkit-text-stroke: 1px #fff; */
  font-size: 30px;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  text-transform: uppercase; /* Делаем текст заглавным (по желанию) */
}

  
}
/*
FOR EXTRA SMALL DEVICES
*/


@media all and (max-width: 375px) and (min-width: 0px){
  .navigation{
    font-size: 14px;
    padding-top:20px;
    padding-left: 20px;
    padding-left: 10px;
  }
  .cursor,.cursor-two{
    display: none;
  }
  .project-link{
    padding:20px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .navigation-links{
    padding-right: 0px;
    padding-left: 0px;
  }
  .logo{
    font-size: 28px;
    padding-left: 0px;
  }
  .slider-controls{
    position: absolute;
    right:15%;
    bottom:10%;
    height: auto;
    width: auto;
    display: flex;
    flex-direction: row;
  }
  .slide-text{
    font-size: 28px;
  }
  #home .social-media-links {
	  display: flex; /* Включаем Flexbox */
	  justify-content: center; /* Центрируем по горизонтали */
	  align-items: center; /* Центрируем по вертикали */
	  position: absolute; /* Позволяем свободно позиционировать */
	  left: 50%; /* Сдвигаем к центру по горизонтали */
	  transform: translate(-50%, -50%); /* Выравниваем блок относительно его центра */
	  color: white; /* Цвет текста */
	  z-index: 8; /* Убедимся, что блок находится поверх других элементов */
	}

  .about-img{
    display: none;
  }
  #about{
    background: url(../images/about-pic.webp);
    background-position: center;
    background-size: cover;
  }
  .about-text{
    padding:40px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin: 0px;
  }
  .about-text-header{
    font-size: 18px;
    padding-bottom: 10px;
  }
  .about-text-paragraph{
    padding-bottom: 10px;
    font-size: 12px;
  }
  .contact-button{
    padding:8px 16px;
    background: #ff8929;
    outline: none;
    font-size: 12px;
    border: none;
    border-radius: 5px;
    color: rgb(245, 245, 245);
	  font-family: "Kelly Slab", serif;
  }
  #about .social-media-links ul li , .project .social-media-links ul li{
    font-size: 13px;
  }
  .navigation-close-line{
    height: 16px;
    width: 2px;
  }
.malevich-slides img,.malevich-1-slides img,.malevich-2-slides img,.malevich-3-slides img,.malevich-4-slides img,.malevich-5-slides img,.malevich-6-slides img,.malevich-7-slides img,.malevich-8-slides img,.malevich-9-slides img,.malevich-10-slides img,.malevich-11-slides img,.malevich-12-slides img{
    width: 100%;
    max-height: auto;
    position: absolute;
    margin: auto;
    border-radius: 8px;
  }
  .controls button{
    padding: 10px 10px;
    margin: 5px;
  }
  .controls button:hover img{
    transform: scale(1);
  }
  .view-project{
    display: block;
  }
  
  .pace{
    width:200px;
  }
  .contact-info-content{
    min-height: 50vh;
  }
  .contact-info{
    min-height: auto;
}
.input-line{
  flex-direction: column;
}
.input-same-line{
  width: 83%;
}
.textarea{
  height: 80px;
}
.form{
  height: auto;

}
.contact-header{
  padding:10px;
  padding-top: 80px;
  font-size: 18px;
}
input{
  font-size: 15px;
}
.textarea{
  font-size: 15px;
  height: 50px;
  padding-bottom: 10px;
}
#button{
  margin: 0px;
}

#projects .swiper-slide img{
  width: 100%;
  max-height: 70vh;
  position: absolute;
  margin: auto;
  pointer-events: none;
  border-radius: 6px;
}
.gg-mouse {

  display:none;
}

.gg-swipe {
  display: inline-block; /* Показываем swipe */
}

/* Сетка изображений */
.image-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr); /* Три блока в строке */
  gap: 0px; /* Расстояние между блоками */
  padding: 0px;
}

.image-box a{
  /* color: transparent;
  -webkit-text-stroke: 1px #fff; */
  font-size: 20px;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  text-transform: uppercase; /* Делаем текст заглавным (по желанию) */
}

}