.h1,h1 {font-size: 22px;line-height: 30px;font-weight: 700;}
.h2,h2 {font-size: 20px;line-height: 30px;font-weight: 700;}
.h3,h3 {font-size: 20px;line-height: 30px;font-weight: 700;}
.h4,h4 {font-size: 20px;line-height: 30px;font-weight: 600;}
.h5,h5 {font-size: 20px;line-height: 30px;font-weight: 700;}
.h6,h6 {font-size: 20px;}

/* Базові стилі для контейнера */
    .faq-container {
        max-width: 90%;
        margin: 20px auto;
    }

    .faq-container h2 {
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    }

    /* Стилі для розкривного блоку */
    details {
        background-color: #ffffff;
        margin-bottom: 15px;
        border-radius: 8px;
        border: 1px solid #e0e0e0;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        transition: all 0.3s ease;
    }

    /* Зміна стилю при наведенні */
    details:hover {
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    /* Стилі для самого запитання (заголовка) */
    summary {
        padding: 18px 20px;
        font-weight: 600;
        cursor: pointer;
        list-style: none; /* Прибираємо стандартний трикутник */
        display: flex;
        justify-content: space-between;
        align-items: center;
        outline: none;
    }

    /* Прибираємо стандартний маркер у Safari/Chrome */
    summary::-webkit-details-marker {
        display: none; 
    }

    /* Створення кастомного іконки "+" */
    summary::after {
        content: '+';
        font-size: 1.5em;
		margin-left: 15px;
        font-weight: 400;
        color: #519873;
        transition: transform 0.3s ease;
    }

    /* Анімація іконки на "-" при відкритті */
    details[open] summary::after {
        transform: rotate(45deg);
    }

    /* Стилі для тексту відповіді */
    .faq-content {
        padding: 0 20px 20px 20px;
        line-height: 1.6;
        border-top: 1px solid #eee;
        margin-top: 10px;
        padding-top: 15px;
    }
	/* Кнопка читати далі */
	/* Приховуємо чекбокс */
.toggle-check {
  display: none;
}

/* Приховуємо додатковий текст */
.hidden-text {
  display: none;
}

/* Стиль для кнопки-мітки */
.toggle-label {
  color: blue;
  cursor: pointer;
  text-decoration: underline;
}

/* Коли чекбокс активний (натиснутий) — показуємо текст */
.toggle-check:checked ~ .text-content .hidden-text {
  display: inline;
}

/* Змінюємо текст кнопки при натисканні */
.toggle-check:checked ~ .toggle-label {
  display: none; /* Або можна змінити контент через content: 'Згорнути' */
}

/*CSS для кнлпки показати все*/
.content-wrapper {
  max-height: 600px; /* Висота видимого блоку */
  overflow: hidden;
  position: relative;
  transition: max-height 0.5s ease; /* Плавне розкриття */
  
  /* Ефект поступового зникнення */
  -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}

/* Клас, який ми додамо через JS при натисканні */
.content-wrapper.full-height {
  max-height: 100%; /* Достатньо велике значення, щоб помістився весь текст */
  -webkit-mask-image: none;
  mask-image: none;
}

#toggleBtn {
    cursor: pointer;
    background: #EAEDF7;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}






.nsmenu-parent-title {font-weight: 400;}