body {
      color: #066d36; /* Цвет текста по умолчанию */
      font-family: "Play", sans-serif;
  font-weight: 400;
  font-style: normal;

    }
p {
 text-align: justify;
}
nav ul a {
    -webkit-transition: background-color .3s;
    transition: background-color .3s;
    font-size: 1rem;
    color: #066d36;
    display: block;
    padding: 0 15px;
    cursor: pointer;
    display: flex;
}
h3{
    text-shadow: 2px 2px 4px rgb(3 33 7);
}
h1 {
    font-size: 4.2rem;
    margin: -0rem 0 -0.0rem 0;
    line-height: 89%;
    padding: 50px;
}
.men ul li {
  position: relative; 
  transition: all 0.3s ease; 
}

.men ul li::after {
  content: ''; 
  position: absolute; 
  bottom: 0; 
  left: 50%; 
  width: 0; 
  height: 2px; 
  background-color: #066d36; 
  transition: all 0.3s ease; 
}

.men ul li:hover::after {
  width: 100%; 
  left: 0; 
}

.slider .indicators .indicator-item.active {
    background-color: #09bb5c;
}

.slider .indicators .indicator-item {
    height: 10px;
    width: 10px;
    margin: 0 5px;
}

h3 {
    margin: 4.946667rem 0 1.168rem 0;
}

nav .sidenav-trigger i {
    color: #09bb5c;
}

.title-container {
    position: relative;
    margin-bottom: 20px;
}

.title-line {
    content: '';
    display: block;
    width: calc(44% - 143px);
    height: 2px;
    background-color: #09bb5c;
    position: absolute;
    bottom: 10px;
}
.title-line.left {
      left: 0;
}

.title-line.right {
    right: 0;
}

.image-container {
  position: relative;
  width: 100%; /* Задаем ширину блока */
  height: 265px; /* Задаем высоту блока */
  overflow: hidden; /* Обрезаем содержимое блока, если оно выходит за его пределы */
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* Заполняем ширину блока */
  height: 100%; /* Заполняем высоту блока */
  object-fit: cover; /* Масштабируем изображение, чтобы оно полностью заполнило блок */
  padding: 5px;
  border-radius: 20px;
}

.line {
  width: 100%;
  height: 40px;
  background-color: #373737; /* серый цвет */
}

.footer {
  background-color: #424242; /* серый цвет */
}

.otziv{
    background-color: #ededed;
    padding: 20px;
}

.carousel {
    height: 300px;
}

.card-panel {
    margin: 6.5rem 0 1rem 0;
}

.btn, .btn-large, .btn-small {
    background-color: #479211;
}

h3 {
    font-size: 1.92rem;
}

.prez {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #467f1d; /* Цвет фона контейнера */
    padding: 20px;
    position: relative; /* Добавляем позиционирование для псевдоэлемента */
}

.block {
    width: 50%; /* Ширина блока */
    height: 300px; /* Высота блока */
    padding: 0; /* Убираем внутренние отступы */
    margin: 0; /* Убираем внешние отступы */
    background-size: cover; /* Растягиваем фон на всю площадь блока */
    background-repeat: no-repeat; /* Отключаем повторение фонового изображения */
    padding: 30px;
}

.block p {
    color: white; /* Цвет текста */
    font-size: 15px; /* Размер шрифта */
}

.download-button {
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid white;
    border-radius: 10px;
    color: white; /* Цвет текста */
    font-weight: bold; /* Жирный шрифт */
    text-decoration: none; /* Убираем подчеркивание ссылки */
    -webkit-transition: background-color .3s;
    transition: background-color .3s;
}

.download-button:hover {
    background-color: yellow; /* Изменение цвета фона при наведении */
    color: green; /* Изменение цвета текста при наведении */
}

.zagolov{
    background-image: url('../img/zag.jpg');
    background-size: cover; /* Растянуть изображение на всю площадь */
    background-position: center; /* Выравнивание изображения по центру */
}


.card .card-title {
    font-size: 15px;
}
.card-image  {
    display: inline-block;
    height: 200px;
}

.card-title  {
    display: inline-block;
    height: 45px;
}
.imagecon img{
    width: 100%;
    padding: 10px;
    border-radius: 20px;
}

.pulsating-icon-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 70px;
    height: 70px;
    border-radius: 50%; /* Круглая форма */
    background-color: transparent; /* Прозрачный фон */
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    overflow: hidden; /* Скрытие области, выходящей за пределы контейнера */
  }
  
  /* Стили для пульсирующего круга */
  .pulsating-circle {
    width: 50px;
    height: 50px;
    background-color: #007bff; /* Цвет круга */
    border-radius: 50%; /* Круглая форма */
    animation: pulse 1s infinite alternate; /* Анимация пульсации */
    cursor: pointer; /* Изменение курсора при наведении */
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none; /* Удаление подчеркивания от ссылки */
    color: white; /* Цвет иконки */
    position: relative; /* Позиционирование относительно контейнера */
    margin-bottom: 10px; /* Отступ от нижнего края */
    margin-right: 10px; /* Отступ от правого края */
  }
  
.kont {
    padding: 60px 0px 60px 0px;
}

.kont a {
    color: #066d36;
    display: flex;
}

  /* Ключевая анимация для пульсации */
  @keyframes pulse {
    from {
      transform: scale(1);
    }
    to {
      transform: scale(1.1);
    }
  }

/* Экстра маленькие устройства (phones, меньше 600px) */
@media (max-width: 599px) { 
    .block {
        width: 100%; /* При маленьких экранах блоки занимают всю ширину */
        padding: 10px;
        height: 350px;
    }

    .prez {
    display: flex;
    padding: 0px;
    flex-direction: column-reverse;
}
.card-panel {
    margin: 3.9rem 0 1rem 0;
}
.carousel {
    height: 382px;
}
.row .col.s9 {
    width: 99%;
}
}



/* Маленькие устройства (tablets, от 600px до 959px) */
@media (min-width: 600px) and (max-width: 959px) {
    .block {
        height: 500px;
    }

}

/* Средние устройства (tablets, от 960px до 1279px) */
@media (min-width: 960px) and (max-width: 1279px) {
    /* Ваш CSS-код для средних устройств */
}

/* Большие устройства (desktops, от 1280px до 1919px) */
@media (min-width: 1280px) and (max-width: 1919px) {
    /* Ваш CSS-код для больших устройств */
}

/* Экстра большие устройства (large desktops, 1920px и выше) */
@media (min-width: 1920px) {
    /* Ваш CSS-код для экстра больших устройств */
}

.footer p {
  text-align: center;
  color: #aaa;
}