/* Общие стили для наглядности */
body {
    background-color: #f9f9f9;
  }

  
  .title{
    text-transform:none;
    font-size: 24px;
    margin-bottom: 20px;
  }
  
  .KKK{
    font-size: 17px;
    text-align: center;
    color: #4192bc;
    max-width: 1000px;
    margin: 0 auto;
    margin-top: 20px;

}
#esimene-image {
 
  background-image: url('../../../../../image/catalog/uslugiPage/IMG_1166-1024x768.jpg'), linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)); 
  background-blend-mode: overlay; 
  background-size: cover; 
  background-position: center;
}
#teine-image {
  background-image: url('../../../../../image/catalog/uslugiPage/IMG_1360-1024x768.jpg'), linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)); 
  background-blend-mode: overlay; 
  background-size: cover; 
  background-position: center;
}
#kolme-image {
  background-image: url('../../../../../image/catalog/uslugiPage/IMG_0174-1024x768.jpg'), linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)); 
  background-blend-mode: overlay; 
  background-size: cover; 
  background-position: center;
}
#nelja-image {
  background-image: url('../../../../../image/catalog/uslugiPage/i_027.jpg'), linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)); 
  background-blend-mode: overlay; 
  background-size: cover; 
  background-position: center;
}
  
  /* Две колонки через grid */
  .kaheveerulised {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
  }
  
  .kolonn {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  
  /* Стили аккордеона */
  .akordion {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  /* Каждый пункт */
  .akordion-item {
    border-bottom: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden; /* скрывать "вылезающий" контент */
  }
  
  /* Заголовок (клик зона) */
   .akordion-header {
      text-shadow: 0 0 5px rgba(0, 0, 0, 0.6);

    position:relative;
    background-size: cover;     /* растянуть картинку по блоку */
    background-position: center;/* чтобы центрировать картинку */
    height: 250px; /* изначальная высота */
   /* Полупрозрачное затемнение (50%) */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    color: #f5f4ed;
    
    user-select: none; /* чтобы не выделялся текст при клике */

    transition: 
    background-color 0.2s ease,
    height 0.3s ease;

  }

  
 .akordion-header::after {
  content: "";
  position: absolute;
  inset: 0; /* сокращение для top/left/right/bottom = 0 */
  pointer-events: none;
  border-radius: 10px;

  background: linear-gradient(
    to bottom,
    rgba(65, 147, 188, 0.3) 0%,
    rgba(65, 147, 188, 0) 30%,
    rgba(65, 147, 188, 0) 70%,
    rgba(65, 147, 188, 0.3) 100%
  );

  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1; /* поверх картинки, но под текстом */
}
.akordion-header:hover::after {
  opacity: 1;
}


  /* Кнопка-иконка */
  .ikooni {
    margin-left: 10px;
    transition: transform 0.3s ease;
  }
  
  /* Тело аккордеона, изначально высота = 0 */
  .akordion-content {
    height: 0;
    padding: 0 20px;
    overflow: hidden;
    transition: height 0.3s ease; /* анимируем именно height */
  }


  /* Сбрасываем лишние отступы у параграфа внутри аккордеона */
.akordion-content p {
    margin: 0;
    padding: 0;
  }
  
  /* Стили для списка */
  .akordion-content ul {
    margin: 10px 0;         /* отступы от списка сверху/снизу */
    padding-left: 0px;     /* отступ слева для маркеров */
    list-style-type: disc;  /* вид маркера: кружочки (disc, circle, square) */
  }
  
  /* Стили для элементов списка */
  .akordion-content li {
    margin-bottom: 5px;     /* расстояние между пунктами списка */
    color: #333;            /* цвет текста */
    font-weight: normal;    /* толщина шрифта (может быть bold, если нужно) */
    line-height: 1.4;       /* межстрочное расстояние внутри пункта */
  }
  
.akordion-item.lahti .ikooni i {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}

.ikooni i {
  transition: transform 0.3s ease;
}

  .teenuse-hind {
    color: #e53935;
    font-weight: 500;
 	margin-left: auto; /* автоматический отступ слева */
 	white-space: nowrap;
  }
  
  .akordion-content ul {
  list-style: disc inside;
}


.akordion-content li {
  display: flex;
  justify-content: space-between;
   position: relative;
  padding-left: 1em;

}
  .akordion-content li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #000;
  font-size: 35px;
  line-height: 0.57;
}

  .maksu-teade {
    margin-top: 30px;
    text-align: center;
    font-size: 14px;
    color: #777;
  }

.akordion-item.lahti .akordion-header {
    color: #4192bc;   
    height: 50px; /* любая нужная вам меньшая высота */
    transition: height 0.3s ease; /* анимируем именно height */

               /* цвет текста, если нужно */
  }
  
  .Kontakti {
    display: inline-flex;                /* чтобы иконка и текст выравнивались в строку */
    align-items: center;                /* вертикальное выравнивание по центру */
    justify-content: center;            /* горизонтальное выравнивание (опционально) */
    gap: 8px;                           /* промежуток между иконкой и текстом */
    padding: 10px 20px;                 /* внутренние отступы */
    border: none;                       /* убираем рамку */
    border-radius: 9999px;             /* «пилюля» – максимальный радиус */
    background-color: #4192bc;          /* примерный цвет, похожий на скриншоте */
    color: #fff;                        /* белый текст */
    font-weight: 500;                   /* полужирный шрифт */
    font-size: 16px;                    /* размер текста */
    cursor: pointer;                    /* указатель на кнопку */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* приятная тень (возможно, чуть сильнее/слабее) */
    transition: box-shadow 0.2s ease, background-color 0.2s ease;
  }

  /* При наведении можно изменить тень или оттенок */
  .Kontakti:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    color: #fff;         
    background-color: #085f94; /* немного затемняем */
  }

  /* При нажатии (active) */
  .Kontakti:active {
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    transform: scale(0.98);
  }

  /* Если используете иконку шрифтов (например, FontAwesome),
     можно добавить отступы или менять размер иконки. */
  .Kontakti.iicon {
    font-size: 1.2rem;
  }
  .KontaktiHref{
    text-decoration: none;
    color: #fff;                        /* белый текст */
    font-weight: 500;                   /* полужирный шрифт */
    font-size: 16px;                    /* размер текста */
  }
 
  /* Общие стили остаются без изменений */

/* Мобильная версия */
@media (max-width: 768px) {
  /* Центрирование заголовка для мобильных */
  .KKK {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;      /* Добавляет отступ, вместо фиксированной высоты */
  text-align: center;
  flex-direction: column;
  }

  /* Сетка колонок: переходим на одну колонку */
  .kaheveerulised {
    grid-template-columns: 1fr; /* одна колонка вместо двух */
    gap: 10px;                 /* уменьшить расстояние между элементами */
  }

  .kolonn {
    gap: 10px; /* уменьшаем расстояние между пунктами */
  }

  /* Уменьшаем высоту заголовков в аккордеоне */
  .akordion-header {
    height: 150px; /* изначальная высота для мобильных */
    font-size: 16px; /* уменьшить размер текста */
    padding: 10px 15px;
  }

  /* Уменьшаем высоту при открытии */
  .akordion-item.lahti .akordion-header {
    height: 50px;
  }

  /* Увеличиваем интерактивные области для кнопок */
  .Kontakti {
    font-size: 14px; /* уменьшить текст кнопки */
    padding: 8px 16px; /* уменьшить внутренние отступы */
  }

  /* Корректируем список в контенте */
  .akordion-content ul {
    padding-left: 15px; /* уменьшаем отступ для маркеров */
  }

  .akordion-content li {
    font-size: 14px; /* уменьшенный шрифт */
    margin-bottom: 5px;
  }
}