.descers{
        display:none;
      }
      .mobview{
        display:none;
      }
        body {
          font-family: "Geologica";
            margin: 0;
            padding: 0;
            background-color: #1e2325;
            color: #333;
        }
        .onebtn, .twobtn{
          display:none;
        }
        .manymotors{
          display:none;
        }

        .container {
            width: 100%;
            margin: 0 auto;
            padding: 20px;
        }
        .ghdfjytg{
          font-weight: bolder;
    font-size: 47px;
        }
.itemsheader{
  position: absolute;
    text-align: center;
    width: 100%;
    top:135px;
}
.itemsheader p img{
  width:600px;
}
.descers{
 text-align: left; 
}

.descrfead{
   padding-top: 45px;
  text-align:left;
margin-left: auto;
color:white;
    margin-right: auto;
  padding: 25px;
    width: 770px;
    margin-top:25px;
}
.descrfead p{
  font-size: 20px;
}
.btnmobile{
  transition: background-color 0.3s ease;
  animation: pulse 1.5s infinite alternate; /* Додаємо анімацію */
  background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 15px;
    transition: background-color 0.3s ease;
}
.btnmobile:hover {
  background-color: #0056b3;
}
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.55);
    opacity: 1;
  }
}
        /* Шапка */
        .header {
            color: #fff;
            text-align: center;
            background-color: #1e2325;
            text-align:center;
            margin-bottom: 150px;
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 2em;
            font-weight: bold;
        }

        .navigation ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
        }

        .navigation li {
            margin-left: 20px;
        }

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

        .button {
            background-color: #007bff;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            text-decoration: none;
        }

        /* Секция "Наш парк" */
        .our-park {
            background-color: #fff;
            padding: 40px 0;
            text-align: center;
        }

        .our-park h2 {
            color: #007bff;
            margin-bottom: 20px;
        }

        .scooters {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }
.footer-section h3 a{
  color:black;
}
        .scooter-card {
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 20px;
            margin: 20px;
            width: 300px;
            text-align: center;
        }

        .scooter-card img {
            max-width: 100%;
            height: auto;
            margin-bottom: 10px;
        }

        .scooter-card h3 {
            margin-top: 0;
            margin-bottom: 5px;
        }

        .scooter-card p {
            color: #666;
            margin-bottom: 10px;
        }

        .scooter-card .button {
            padding: 8px 15px;
            font-size: 0.9em;
        }

        .scooter-card.grey .button {
            background-color: #888;
        }

        .scooter-card.green .button {
            background-color: #4CAF50;
        }

        .scooter-card.red .button {
            background-color: #f44336;
        }

        /* Секция с промо-изображением */
        .promo-section {
          background-color: #1cb4c9;
          width:100%;
            text-align: center;
            color: #fff;
            overflow: hidden;
            padding-top:25px;
            padding-bottom:25px;
        }
  .promo-sections{
display:grid;
width:100%;
grid-template-columns: 2fr 3fr;
    gap: 0px;
  }
        .promo-content {
           
            align-items: center;
            padding: 20px;
        }

        .promo-image {
            max-width: 50%;
            height: auto;
        }

        .promo-text {
            max-width: 40%;
            text-align: left;
        }

        .promo-text h2 {
            margin-top: 0;
            font-size: 2.5em;
            margin-bottom: 10px;
        }

        .promo-text p {
            font-size: 1.1em;
            line-height: 1.6;
        }

        /* Подвал */
        .footer {
            background-color: #94dfe9;
            color: #fff;
            padding: 30px 0;
            text-align: center;
        }

        .footer-content {
            display: flex;
            justify-content: space-around;
            align-items: flex-start;
            max-width: 960px;
            margin: 0 auto;
            padding: 20px;
        }
.footer-section ul li a{
  color:black;
}
        .footer-section {
          color:black;
            text-align: left;
        }

        .footer-section h3 {
            
            margin-bottom: 10px;
        }

        .footer-section ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .footer-section li {
            margin-bottom: 5px;
        }

        .footer-section a {
            color: #ccc;
            text-decoration: none;
        }

        .copyright {
            margin-top: 20px;
            font-size: 0.9em;
            color: #777;
        }
        .background-effect {
    background: linear-gradient(to bottom right, #f0f0f0, #e0e0e0); /* Пример градиента от светло-серого к серому */
    /* Добавьте другие стили для контейнера, например, padding, height и т.д. */
}

        .our-park-section { background-color: #fff; padding: 40px 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); }
        .container { width: 100%; margin: 0 auto; }
        .our-park-section h2 { color: #007bff; margin-bottom: 30px; font-size:60px; }
        .scooters-grid { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 20px; }
        .scooter-item { position: relative;  padding: 20px; width: 300px; text-align: center; box-sizing: border-box; overflow: hidden; }
        .particle-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
        .scooter-item img { max-width: 100%; height: auto; margin-bottom: 15px; }
        .scooter-item h3 { margin-top: 0; margin-bottom: 10px; font-size: 1.5em; }
        .scooter-item p { color: #666; font-size: 0.9em; line-height: 1.4; margin-bottom: 20px; }
        .rent-button { background-color: #007bff; color: #fff; border: none; padding: 10px 25px; border-radius: 20px; cursor: pointer; font-size: 1em; transition: background-color 0.3s ease; }
        .rent-button:hover { background-color: #0056b3; }
        .scooter-item.grey .rent-button { background-color: #888; }
        .scooter-item.grey .rent-button:hover { background-color: #666; }
        .scooter-item.green .rent-button { background-color: #4CAF50; }
        .scooter-item.green .rent-button:hover { background-color: #45a049; }
        .scooter-item.red .rent-button { background-color: #f44336; }
        .scooter-item.red .rent-button:hover { background-color: #d32f2f; }
        .scooter-item .price { margin-top: 10px; font-weight: bold; color: #333; }

      
        .text-effect-container {
          top: 552px;
          position:absolute;
          
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.back{
  paddin
}
.back p{
  color:black;
  padding-left:15px;
 
}
.text-block {
    color: #fff; /* Цвет текста */
    padding: 5px 10px; /* Отступы внутри плашки */
    font-size: 1.5em; /* Размер текста */
    text-align: center; /* Выравнивание текста по центру */
   opacity: 0;
   
 animation: slideInss 1s ease-out forwards;
}
.text-block.top {
padding-top:26px;
  transform: translateX(-100%); /* Початкове положення зліва */
  animation-delay: 0.2s;
margin-left:-135px;
}

.text-block.bottom {
margin-right:-135px;
  transform: translateX(100%); /* Змінене початкове положення справа */
  animation-delay: 0.5s;

}
.navigation{
    padding-right: 38%;
    font-size: 28px;
}
.navigation ul li{
    cursor:pointer;
}
.navigation ul li a:hover{
color:#63adc1;
}
  .modal {
  display: none; /* Скрываем модальное окно по умолчанию */
  position: fixed; /* Фиксированное позиционирование */
  z-index: 99999999; /* Помещаем окно поверх других элементов */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; 
  background-color: rgba(0,0,0,0.4); 
}
 .onemobilebtn .twomobilebtn{
display:block;;
  }
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; 
  padding: 20px;
  border: 1px solid #888;
  width: 350px;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
@keyframes slideIns {
  from {
    opacity: 0;
    
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideInss {
  from {
    opacity: 0;
  
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.bron{
  background-color:#FFD501;
  border-radius:10px;
  color:black;
}
.menitem{
  color:#0CAFC6;
}

.back p{
  color:black;

}
.back button:hover {
  background-color: #0056b3;
}


.back  .front{
  top:150px;
  position: absolute;
}


.sliding-image {
   position: absolute;
  bottom: 0; /* Розміщуємо внизу блоку */
  right: 0; /* Початкове положення справа */
  transform: translateY(0); /* Забираємо вертикальне центрування */
  max-width: 350px; /* Задайте бажану ширину зображення людини */
  height: auto;
  z-index: 10;
  animation: slideInOutRightBottom 6s infinite ease-in-out; /* Змінена назва та додано infinite */
  opacity: 0;
  transition: opacity 0.3s ease-in-out, right 0.3s ease-in-out, bottom 0.3s ease-in-out, transform 0.3s ease-in-out;

}

.sliding-image.visible {
    opacity: 1; /* Робимо видимим одразу */
}
@keyframes slideInOutRightBottom {
  0% {
    right: -80%;
    bottom: -20px; /* Трохи нижче, щоб виїжджало знизу */
    opacity: 0;
    transform: translateY(3px) rotate(0deg);
  }
  25% {
    right: -8px;
    bottom: 10px;
    opacity: 1;
    transform: translateY(-2px) rotate(2deg);
  }
  45% {
    bottom: -9px;
    transform: translateY(2px) rotate(-2deg);
  }
  50% {
    right: -8%;
    bottom: 0;
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
  75% {
    right: -9px;
    bottom: 10px;
    opacity: 1;
    transform: translateY(-2px) rotate(2deg);
  }
  95% {
    bottom: -8px;
    transform: translateY(3px) rotate(-2deg);
  }
  100% {
    right: -80%;
    bottom: -20px; /* Повертаємо в початкове положення */
    opacity: 0;
    transform: translateY(3px) rotate(0deg);
  }
}

.socs li a:hover{
color:#63adc1;
}
.product-card {
  position: absolute;
  perspective: 1000px;
  cursor: pointer;
    width: 509px;
    height: 596px;
      left: 26%;
    top: 30%;
}



.front{
  width:100%;
   overflow: hidden;
  background-image: url(/images/manymotors.png);
    background-size: cover;
      background-repeat: no-repeat;
}


.front {
    position: relative;
    overflow: hidden;
}
.btnmobile{
  display:none;
}
.particle-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0; /* Розміщуємо контейнер частинок позаду інших елементів */
}

.front > img {
    position: relative; /* Щоб зображення було над частинками */
    z-index: 1;
}

.particle {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.7); /* Червоний колір з прозорістю */
    border-radius: 50%;
    opacity: 0;
    animation: float 8s infinite linear, fadeInOut 1.5s infinite alternate;
}

@keyframes float {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(var(--random-x), var(--random-y)) scale(0.7); }
    100% { transform: translate(0, 0) scale(1); }
}

@keyframes fadeInOut {
    0% { opacity: 0; }
    50% { opacity: 0.7; }
    100% { opacity: 0; }
}
.logosfooter img{
  width: 150px;
}
.back{
  width:100%;
  padding-top: 30px;
    padding-bottom: 20px;
 right: -15px;
  background: linear-gradient(to right, #ffffffb3, transparent);
    border-radius: 12px;
    text-align: left;
    padding-left: 25px;
}
.tarifs{
    text-align:center;
    color:black;
    background-color: white;
  }
  .tarifs h2{
    font-weight: bolder;
    font-size:47px;
  }
  .gridst{
   display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 25px;
  }
  .cards{
    background-color:#0B505A;
    width:295px;
    padding:30px;
    border-radius:16px;

  }
  .cardss{
     background-color:#2B393F;
     width:295px;
      padding:30px;
    border-radius:16px;
  }
  .gridst div{
    text-align:center;
    width:295px;
    margin-left:auto;
    margin-right:auto;
  }
  .ye{
color:#FFD501;
font-size: 2.0rem;
font-weight: 900;
  }
  .smalltxt{
    font-weight: 100;
    font-size: 14px;
  }
  .bl{
color:#24D6EF;
font-size: 2.0rem;
font-weight: 900;
  }
  .gridst {
    color:white;
  }
    .mybtn{
      animation: pulsateqq 2s infinite ease-in-out;
      transition: transform 0.3s ease-in-out;
     
      color:black;
      border-radius:25px;
      background-color:#FFD501;
      width:80%;
      text-align:center;
      padding-top:15px;
      padding-bottom:15px;
      font-weight: 900;
      margin-left: auto;
    margin-right: auto;
    cursor: pointer;
    }
    @keyframes pulsateqq {
  0% {
    transform: scale(1); /* Начальный размер */
  }
  50% {
    transform: scale(1.20); /* Увеличивается на 5% */
  }
  100% {
    transform: scale(1); /* Возвращается к исходному размеру */
  }
}
    .mybtn:hover {
  transform: scale(1.18); /* Увеличиваем кнопку на 5% */
}

/* Если вы хотите, чтобы кнопка слегка уменьшалась, когда на нее нажимают */
.mybtn:active {
  transform: scale(0.98);
}
    .cards{
      height:240px;
    }
    .cardss{
      height:240px;
    }
    @media (max-width: 1700px) {
.front{
    height:420px;
  }
    }
@media (max-width: 1460px) {
  .front{
    height:360px;
  }
 
  .front img{
width:100%;
  }
  .itemsheader p{
    margin-bottom:0px;
  }
  .itemsheader{
    top:50px;
  }
  .itemsheader p img{
    width:430px;
  }
  .descrfead{
    width:63%;
     padding:2px
  }
    .text-effect-container
{
  top: 440px;
}
}
@media (max-width: 1200px) {
  .mobview{
        display:block;
      }
      .pcview{
        display:none;
      }
  .header{
    margin-bottom: 0px;
  }
      .itemsheader p img {
        width: 300px;
    }
.sliding-image {

  max-width: 350px;
}
  .text-effect-container
{
  top: 340px;
}
.product-card{
left: 7%;
    top: 28%;
}
.descrfead{
  display:none;
}
.descers{
  display:block;
}
}

/*tablet*/
@media (max-width: 992px){
.header{
  margin-bottom:0px;
}
  .itemsheader p img{
    width:430px;
  }
  .descrfead{
    width:58%;
  }
  body > div.header > div:nth-child(2) > p > img{
    width:88%;
  }
  .text-effect-container
{
  top: 258px;
}
 .navigation {
    padding-right: 16%;
 }
.sliding-image {

  max-width: 180px;
}
}

@media (max-width: 860px){
  .ghdfjytg{
    position:absolute;
    right:20px;
  }
.header{
  margin-bottom:60px;
}
      .itemsheader p img {
        width: 75%;
    }
  .descers{
  display:block;
  width:98%;
  margin-left:auto;
  margin-right:auto;
  }
   .descers p{
 font-size:19px;
  }
  .descrfead{
    display:none;
  }
  .promo-sections{
    display:block;
  }
    .text-effect-container
{
  top: 202px;
}
 .manymotors{
          display:block;
          width:100%;
        }
        .front{
          background-image: none;
        }

  .gridst{
    display:block;
  }
.onemobilebtn, .twomobilebtn{
  display:none;
}
.onebtn, .twobtn{
  display:block;
}
.cards {
    height: 270px;
}
  .promo-section{
    display:block;
    margin-left:auto;
    margin-right:auto;

  }
  .front {

    position: static;
      margin-left: -22px;
  }
  
  .sliding-image{
    display:none;
  }
  .sliding-images{
     display:none;
  }
   .navigation {
    padding-right: 6%;
 }
 .footer-section {
text-align:center;
 }
.footer-content{
display:block;
}
.product-card{
  width:88%;
}


 .navigation{
    font-size:15px;
  }
}
/*mobile*/

@media (max-width: 480px){
  .ghdfjytg{
    position: absolute;
    right:5px;
  }
  .logosfooter{
    display:none;
  }
  .text-effect-container{
    top: 124px;
  }
 .text-effect-containers{
  display:none;
 }
  .btnmobile{
    display:block;
    margin-left: auto;
    margin-right: auto;
  }
  .titllog{
    padding-top:0px;
    padding-bottom:0px;
    margin-top:0px;
    margin-bottom:0px;
  }
  .header-content{
    display:none;
  }
 
 
  .text-block {
    font-size: 1.1em;
}
  .logo{
    display:none;
  }
  .text-effect-container{
    width:80%;
    margin-left: -55px;
  }
  .navigation{
    display:none;
  }
.sliding-image {

  max-width: 150px;
}
}
.#footers > div > div:nth-child(1){
  width:17%; 
  
}