/*body{
  background-color: rgb(148, 143, 143);
  color:rgb(5, 6, 6);
  margin-left: 50px;
  width: 100% ;
}
*/
body {
  background-color: #94908F; /* rgb(148,143,143) */
  color: #050606;            /* rgb(5,6,6) */
  margin: 0;                 /* убираем фиксированные отступы */
  padding-left: 10px;        /* если нужен внутренний отступ слева */
  box-sizing: border-box;    /* чтобы padding не ломал ширину */
  font-family: Arial, sans-serif; /* читаемый шрифт */
  width:100%;
}
  
h1 {
  color:rgb(200, 16, 16);

}
/* галерея фото
.imggalery {
  height: 250px;
  width: 250px;
  margin: 10px;
  border-radius: 15%;
 }
  старое*/

/* новое*/
/* Контейнер галереи */
.p-img {
  display: flex;
  flex-wrap: wrap;         /* Перенос картинок на следующую строку */
  justify-content: center; /* Центрирование по горизонтали */
  gap: 15px;               /* Расстояние между картинками */
  padding: 10px;
}

/* Картинки галереи */
.imggalery {
  width: 250px;
  height: 250px;
  border-radius: 15%;
  object-fit: cover;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Лёгкая тень */
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.5s ease;
  opacity: 0;               /* Исходно скрыты для анимации появления */
  animation: fadeIn 0.8s forwards; /* Анимация появления */
}

/* Анимация появления */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hover-эффект */
.imggalery:hover {
  transform: scale(1.05); /* Лёгкое увеличение */
  box-shadow: 0 8px 16px rgba(0,0,0,0.3); /* Глубже тень при наведении */
}

/* Планшеты */
@media (max-width: 1024px) {
  .imggalery {
    width: 200px;
    height: 200px;
  }
}

/* Смартфоны */
@media (max-width: 768px) {
  .imggalery {
    width: 45%; /* Две картинки в ряд */
    height: auto;
  }
}

/* Малые телефоны */
@media (max-width: 480px) {
  .imggalery {
    width: 90%; /* Почти на всю ширину */
    height: auto;
    margin: 5px 0;
  }
}
/* новое*/






  
  background-color: rgb(166, 166, 176);
  box-shadow: 0 4px 8px 0 rgb(28, 28, 27); /* тень*/

  ]
  









img:hover {
  outline: 3px solid #56f50d; /* Параметры рамки */
  opacity: 50%;
}







p {
  font-family:Georgia, 'Times New Roman', Times, serif;
  line-height: 2; /* ширина меж строк*/
  font-size: 16px; /* Размер текста для компьютера */
}
/* Стиль для текста на планшетах */
@media (max-width: 768px) {
  p {
    font-size: 14px; /* Уменьшаем размер текста на планшетах */
  }
}

/* Стиль для текста на мобильных устройствах */
@media (max-width: 480px) {
  p {
    font-size: 12px; /* Уменьшаем размер текста на мобильных */
  }
}





/* кнопка*/

#icon{
  opacity:50%; /*первая картинка ключи*/
  width: 50px;
  
}

/* кнопка звонок*/



#ul-list {
  border-radius: 25px;
  background-color: rgb(97, 147, 129);
  margin-left: 10px;
  padding-top: 10px;
  width:1050px;
  box-shadow: 0 4px 8px 0 rgb(16, 15, 15); /* тень*/
  transition: 0.3s;
  
}

#ul-list{
  display: flex;
}
.div-t{
  width: 1400px;
  height: 740px;
  
}

#ul-list:hover {
  box-shadow: 0 8px 16px 0 rgba(229, 6, 6, 0.845); /* тень*/
}

li {
  border-top: 2px solid white;
  line-height: 45px; /* по центру распределение*/
  font-size: 20px;
  padding-left: 60px;
  border-radius: 5px;
  background-color:rgb(65, 137, 114);
 
}
 /* ключи картинка*/
#icon2 {
  width: 20px;
  float: right;
  
  
  width: 0; /* скрыть картигку*/
  transition: 0.3s; /* медленное появление картинки*/
  
}
li:hover #icon2 {
  width: 50px;   /* ПОФВЛЕНИЕ карнинки*/
}

 /* отзывы >>*/

 #textrewp {
  margin-left: 50px;
  color: rgb(189, 241, 17);
 }
#review {
  background-color: #4e7a39;
  margin-left: 50px;
  border-radius: 20px;

}

#textrew{
  color:white;
  background-color: #85828d;
  padding-left: 20px;
  border-radius: 20px;
}
#djes {
  margin-left: 50px;
  padding-left: 10px;
  background-color: antiquewhite;
  width: 250px;
  border-radius:10px ;
}

#imgogl {
  border-radius: 20px;
  height: 50px;
  
}


#imgrew {
  width: 200px;
  height: 200px;
  margin-left: 50px;
  border-radius: 100px;
  
}
#divimg {
  margin-left: 50px;
 
}

#Rev1 {
  background-color: black;
  height: 100px;
  margin-left: 50px;
  border-radius: 20px;
}

#Rev2 {
  background-color: #887e9d;
  border-radius: 10px;
  width: 100px;
  color:aqua;
  margin-left: 50px;
}

#inputR {
  margin-left: 50px;
  
}
input {
  width: 70%;
  background-color: rgb(208, 202, 196);
}


/* << отзывы*/

#form {
  margin-left: 50px;
  background-color: #403d46;
  height: 30px;
  width: 400px;
  border:solid;
  border-color: #56f50d;
  border-radius: 15px;
  color:aqua;
  box-shadow: 0 4px 8px 0 rgb(97, 245, 102); /* тень*/
}

#form:hover {
  box-shadow: 0 8px 16px 0 rgba(235, 227, 15, 0.566);
}

.btn-link {
  height: 50px;
  width: 90px;
  font-size: 20px;
  margin-left:10px;
  display: inline-block; /* блочный эл*/
  background-color: rgb(7, 21, 125);
  color:#f1eff5;
  padding:1rem 1.5rem; /*поля вокруг текста*/
  text-decoration: none; /* убираем подчеркивание*/
  border-radius: 15px;
  box-shadow: 0 4px 8px 0 rgba(17, 211, 229, 0.725); /* тень*/
}

.btn-link:hover {
  box-shadow: 0 8px 16px 0 rgba(244, 125, 14, 0.566);
  background-color: rgb(12, 133, 119);
}

/* увелич текста ссылки*/
a {
  transition: transform 0.3s ease; /*  увеличение */
}

a:hover {
  transform: scale(1.2); /* увелич ссылку в 20% */
}

/* нижн ссыл кноп увеличение при навед */

  /* Контейнер для кнопок */
  .button-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Разделяем на 3 колонки */
    gap: 10px; /* Отступы между кнопками */
    margin-top: 20px; /* Отступ сверху */
  }

  /* Общие стили для кнопок */
  button {
    width: 100%; /* Кнопки занимают 100% ширины своей колонки */
    height: 40px;
    background-color: black; /* Черный фон кнопок */
    border-radius: 5%;
    font-size: 22px;
    color: white; /* Белый текст */
    box-shadow: -5px 10px 20px -5px rgb(2, 10, 0);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    margin: 0; /* Убираем отступы для кнопок */
  }

  button:hover {
    box-shadow: -5px 10px 20px -5px rgba(0, 0, 255, 0.7); /* Синее свечение при наведении */
    transform: scale(1.05);
  }

  /* Стили для ссылок внутри кнопок */
  .increase {
    text-decoration: none;
    color: white; /* Белый текст внутри кнопки */
    display: block;
    text-align: center;
    line-height: 40px;
    height: 100%;
    overflow: hidden; /* Прячем текст, если он выходит за пределы */
    text-overflow: ellipsis; /* Добавляем многоточие, если текст не помещается */
    white-space: nowrap; /* Запрещаем перенос текста на новую строку */
  }

  /* Адаптивность для разных экранов */
  @media (max-width: 1200px) {
    .button-container {
      grid-template-columns: repeat(2, 1fr); /* Для средних экранов 2 колонки */
    }
  }

  @media (max-width: 768px) {
    .button-container {
      grid-template-columns: 1fr; /* Для мобильных устройств 1 колонка */
    }
    button {
      font-size: 18px; /* Уменьшаем размер шрифта для мобильных */
      height: 50px; /* Увеличиваем высоту для мобильных */
    }
  }