@font-face {
font-family: "Montserrat";
src: url("fonts/Montserrat-Black.ttf") format("truetype");
font-weight: 900; /* Вага для Black стилю */
font-style: normal;
}

@font-face {
font-family: "Montserrat";
src: url("fonts/Montserrat-Bold.ttf") format("truetype");
font-weight: bold; /* Вага для Bold стилю */
font-style: normal;
}

/* Підключаємо шрифт Montserrat ExtraBold */
@font-face {
font-family: "Montserrat";
src: url("fonts/Montserrat-ExtraBold.ttf") format("truetype");
font-weight: 800; /* Вага для ExtraBold стилю */
font-style: normal;
}

/* Підключаємо шрифт Montserrat ExtraLight */
@font-face {
font-family: "Montserrat";
src: url("fonts/Montserrat-ExtraLight.ttf") format("truetype");
font-weight: 200; /* Вага для ExtraLight стилю */
font-style: normal;
}

/* Підключаємо шрифт Montserrat Light */
@font-face {
font-family: "Montserrat";
src: url("fonts/Montserrat-Light.ttf") format("truetype");
font-weight: 300; /* Вага для Light стилю */
font-style: normal;
}

/* Підключаємо шрифт Montserrat Medium */
@font-face {
font-family: "Montserrat";
src: url("fonts/Montserrat-Medium.ttf") format("truetype");
font-weight: 500; /* Вага для Medium */
font-style: normal;
}

/* Підключаємо шрифт Montserrat */
@font-face {
font-family: "Montserrat";
src: url("fonts/Montserrat-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: "Montserrat";
src: url("fonts/Montserrat-SemiBold.ttf") format("truetype");
font-weight: 600;
font-style: normal;
}

/* Підключаємо шрифт Montserrat Thin */
@font-face {
font-family: "Montserrat";
src: url("fonts/Montserrat-Thin.ttf") format("truetype");
font-weight: 100; /* Вага для Thin */
font-style: normal;
}

/* Загальний стиль для тіла сторінки */
body {
font-family: "Montserrat", sans-serif; /* Основний шрифт */
margin: 0; /* Видаляємо відступи */
padding: 0; /* Видаляємо поля */
background-color: #ffffff; /* Білий фон */
}

/* Стилі для заголовка сайту */
header {
display: flex; /* Гнучке розташування елементів */
justify-content: space-between; /* Рівномірний розподіл між елементами */
align-items: center; /* Вирівнювання по вертикалі */
padding: 5px 20px; /* Внутрішній відступ */
background-color: #fff; /* Білий фон */
color: #000; /* Основний колір тексту */
}

/*Стилі для класу Container*/
.container {
max-width: 90%;
margin: 20px auto;
padding: 20px;
background: #fff;
border-radius: 8px;
/*	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/
}

.container a {
color: #000; /* Основний колір тексту посилань */
text-decoration: none; /* Прибираємо підкреслення */
font-weight: 600; /* Підсилюємо жирність тексту */
}

.container a:hover {
color: #221f1f; /* Основний колір тексту посилань */
text-decoration: underline; /* Прибираємо підкреслення */
}

/* Логотип */
.logo {
/*    font-size: 32px;  Розмір шрифту логотипу */
font-weight: bold; /* Жирність тексту */
display: flex; /* Гнучке розташування для вирівнювання */
align-items: center; /* Вертикальне вирівнювання */
}

/* Контактна інформація */
.contact-info {
text-align: center; /* Текст по центру */
font-size: 16px; /* Розмір тексту */
}

.contact-info a {
color: #221f1f; /* Основний колір тексту посилань */
text-decoration: none; /* Прибираємо підкреслення */
font-weight: 600; /* Підсилюємо жирність тексту */
transition: color 0.3s ease, text-decoration 0.3s ease; /* Плавний перехід стилів */
font-size: 24px; /* Розмір тексту посилання */
}

.contact-info a:hover {
color: #221f1f; /* Колір тексту при наведенні */
text-decoration: underline; /* Додаємо підкреслення при наведенні */
}

/* Блок соціальних іконок */
.social-icons {
display: flex; /* Розташування іконок в рядок */
gap: 25px; /* Проміжок між іконками */
align-items: center; /* Вирівнювання по вертикалі */
}

.social-icon {
width: 40px; /* Ширина іконки */
height: 40px; /* Висота іконки */
transition: transform 0.3s ease, opacity 0.3s ease; /* Анімація при наведенні */
}

.social-icon:hover {
transform: scale(1.2); /* Збільшення при наведенні */
opacity: 0.8; /* Прозорість при наведенні */
color: #221f1f; /* Колір іконки при наведенні */
}

/* Навігаційне меню */
nav {
background-color: #2e6f40; /* Темний фон */
text-align: center; /* Центрування тексту */
padding: 20px 0; /* Відступи */
}

.menu {
list-style: none; /* Прибираємо маркери списку */
margin: 0; /* Обнуляємо зовнішні відступи */
padding: 0; /* Обнуляємо внутрішні відступи */
display: flex; /* Гнучке розташування пунктів меню */
justify-content: center; /* Центрування пунктів меню */
gap: 30px; /* Проміжок між пунктами */
}

/* Пункти меню */
.menu li {
font-size: 18px; /* Розмір шрифту пунктів меню */
}

.menu a {
text-decoration: none; /* Прибираємо підкреслення */
color: #ffffff; /* Білий колір тексту */
font-weight: 600; /* Жирність тексту */
transition: color 0.3s ease; /* Плавний перехід кольору */
}

.menu a:hover {
color: #fff; /* Колір тексту при наведенні */
text-decoration: underline; /* Підкреслення при наведенні */
}

/* Кнопка гамбургера для мобільної версії */
.menu-toggle {
display: none; /* Ховаємо кнопку на великих екранах */
flex-direction: column; /* Вертикальне розташування ліній */
gap: 5px; /* Проміжок між лініями */
cursor: pointer; /* Змінюємо курсор на руку */
z-index: 10; /* Задаємо пріоритет елемента */
align-items: center; /* Центрування ліній */
justify-content: center; /* Вирівнювання по центру */
height: 40px; /* Висота кнопки */
width: 40px; /* Ширина кнопки */
margin: 0 auto; /* Вирівнювання по центру */
}

/* Лінії кнопки гамбургера */
.bar {
width: 30px; /* Ширина лінії */
height: 4px; /* Висота лінії */
background-color: #fff; /* Колір лінії */
border-radius: 5px; /* Згладжуємо краї */
}

/* Перемикання видимості меню */
.active {
display: block; /* Відображення активного елемента */
}

.menu.active {
display: block; /* Відображення активного меню */
flex-direction: column; /* Розташування пунктів меню в стовпчик */
gap: 10px; /* Відстань між пунктами меню */
text-align: center; /* Центрування пунктів меню в мобільній версії */
}

.menu a {
font-size: 24px; /* Розмір тексту пунктів меню */
}

/* Баннер */
.banner {
background-color: #fff; /* Білий фон для банера */
color: #221f1f; /* Основний текстовий колір */
padding: 50px 20px; /* Відступи всередині банера */
text-align: center; /* Центрування тексту */
margin-top: 0px; /* Відсутність відступу від меню */
}

/* ===== HERO SERVICES (повністю новий блок) ===== */
.hero-services{
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 4vw, 64px) 16px;
  border: 1px solid rgba(46,111,64,.25);
  background:
    radial-gradient(1200px 600px at 90% -10%, rgba(255,255,255,.09), transparent 60%),
    linear-gradient(135deg, #2e6f40 0%, #292f33 60%);
  color: #fff;
  box-shadow: 0 20px 50px rgba(0,0,0,.18);
}

/* легкий патерн поверх */
.hero-services::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(2px 2px at 25px 15px, rgba(255,255,255,.12) 50%, transparent 51%) repeat;
  background-size: 28px 28px;
  opacity:.22;
}

.hero-services__inner{
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center; /* <<< центрує весь контент, включно з кнопкою */
  text-align: center;
  gap: clamp(14px, 2.5vw, 22px);
}

.hero-services__inner > h2{
  margin: 0;
  font-weight: 800;
  font-size: clamp(1.4rem, 1.1rem + 1.5vw, 2.2rem);
  letter-spacing: .2px;
  text-shadow: 0 2px 16px rgba(0,0,0,.25);
}

/* список послуг як “плашки” */
.hero-services__list{
  --card-bg: rgba(255,255,255,.08);
  --card-border: rgba(255,255,255,.28);
  --card-shadow: 0 10px 26px rgba(0,0,0,.20);

  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  width: min(100%, 980px);
}

.hero-services__list li{
  position: relative;
  padding: 14px 18px 14px 48px;
  border-radius: 14px;
  border: 1px solid var(--card-border);
  background: linear-gradient(180deg, var(--card-bg), rgba(255,255,255,.06));
  box-shadow: var(--card-shadow);
  font-weight: 700;
  line-height: 1.35;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* галочка */
.hero-services__list li::before{
  content:"";
  position:absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.25);
}
.hero-services__list li::after{
  content:"";
  position:absolute;
  left: 22px; top: 50%;
  transform: translateY(-55%) rotate(45deg);
  width: 6px; height: 12px;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  opacity:.9;
}

.hero-services__list li:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.38);
  box-shadow: 0 16px 40px rgba(0,0,0,.24);
}

/* КНОПКА — завжди по центру */
.hero-services__cta{
  display: inline-block;
  margin-inline: auto;           /* <<< абсолютне вирівнювання по центру */
  margin-top: 4px;
  padding: 14px 28px;
  min-width: 240px;
  border-radius: 14px;
  background:#fff;
  color:#2e6f40;
  font-weight: 800;
  font-size: clamp(1rem, .95rem + .3vw, 1.1rem);
  text-decoration: none;
  text-align: center;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.hero-services__cta:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0,0,0,.22);
  background: #f7f7f7;
  color: #265e36;
}

/* дрібна адаптація */
@media (max-width: 600px){
  .hero-services{ padding: 22px 14px; }
  .hero-services__list{ gap: 10px; }
  .hero-services__list li{ padding: 12px 14px 12px 44px; }
}

/* без руху для користувачів з reduce motion */
@media (prefers-reduced-motion: reduce){
  .hero-services__list li,
  .hero-services__cta{
    transition: none !important;
  }
}



.banner-content h1 {
font-size: 4.5em; /* Розмір заголовка банера */
margin-bottom: 20px; /* Відступ знизу заголовка */
}

.banner-content p {
font-size: 24px; /* Розмір тексту банера */
margin-bottom: 30px; /* Відступ знизу тексту */
}

.banner-button {
text-decoration: none; /* Видалення підкреслення */
background-color: #2e6f40; /* Фон кнопки */
color: #ffffff; /* Колір тексту кнопки */
padding: 15px 30px; /* Внутрішні відступи кнопки */
font-size: 24px; /* Розмір тексту кнопки */
font-weight: 600; /* Жирність тексту кнопки */
border-radius: 5px; /* Закруглення кутів кнопки */
transition: background-color 0.3s ease; /* Анімація зміни кольору фону при наведенні */
}

.banner-button:hover {
background-color: #000; /* Колір кнопки при наведенні */
}

/* Медіа-запит для мобільних пристроїв */
@media (max-width: 768px) {
header {
flex-direction: column; /* Вертикальне розташування елементів у заголовку */
text-align: center; /* Центрування тексту */
padding: 20px 20px; /* Внутрішні відступи заголовку */
}

.logo {
font-size: 32px; /* Розмір логотипу */
margin-bottom: 10px; /* Відступ знизу логотипу */
}

.contact-info {
font-size: 14px; /* Розмір тексту контактної інформації */
margin-bottom: 10px; /* Відступ знизу тексту */
}

.social-icons {
margin-top: 10px; /* Відступ зверху для іконок соцмереж */
}

.social-icon {
width: 25px; /* Ширина іконки */
height: 25px; /* Висота іконки */
}

.menu {
display: none; /* Початково приховане меню */
flex-direction: column; /* Розташування пунктів меню у стовпчик */
gap: 10px; /* Відстань між пунктами меню */
text-align: center; /* Центрування пунктів меню */
margin-top: 20px; /* Відступ між меню та банером */
}

.menu a {
font-size: 22px; /* Розмір тексту пунктів меню */
margin: 10px 0; /* Відступи між пунктами меню */
}

.banner-content h1 {
font-size: 28px; /* Зменшений розмір заголовка для мобільних */
}

.banner-content p {
font-size: 16px; /* Зменшений розмір тексту для мобільних */
}

.banner-button {
font-size: 18px; /* Зменшений розмір тексту кнопки */
padding: 12px 24px; /* Зменшені відступи кнопки */
}

.menu-toggle {
display: flex; /* Відображення кнопки перемикання меню */
}

.menu.active {
display: flex; /* Відображення активного меню */
}
}

/* Про автора */
.about-author {
display: flex; /* Використання флексбоксу для структури секції */
align-items: center; /* Вирівнювання елементів по центру */
justify-content: center; /* Горизонтальне вирівнювання елементів */
padding: 50px 20px; /* Відступи секції */
background-color: #fff; /* Білий фон */
gap: 30px; /* Відстань між елементами */
}

.author-photo {
flex: 1; /* Пропорційне розподілення простору */
max-width: 400px; /* Максимальна ширина фото */
height: auto; /* Автоматична висота фото */
}

.author-photo .photo {
width: 100%; /* Фото займає всю ширину контейнера */
height: auto; /* Автоматичне налаштування висоти */
border-radius: 8px; /* Закруглення кутів фото */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Тінь для фото */
}

.author-text {
flex: 2; /* Пропорційний розмір текстового блоку */
font-size: 18px; /* Розмір тексту */
color: #221f1f; /* Колір тексту */
line-height: 1.6; /* Міжрядковий інтервал */
}

.author-text h2 {
font-size: 30px; /* Розмір заголовка */
margin-bottom: 20px; /* Відступ знизу заголовка */
color: #221f1f; /* Колір заголовка */
font-style: normal;
font-weight: 900;
}

@media (max-width: 768px) {
.about-author {
flex-direction: column; /* Вертикальне розташування елементів */
text-align: center; /* Центрування тексту */
padding: 30px 20px; /* Зменшені відступи секції */
}

.author-photo {
max-width: 90%; /* Зменшення ширини фото для мобільних */
margin-bottom: 5px; /* Відступ знизу фото */
}

.author-text {
font-size: 16px; /* Зменшений розмір тексту */
}
.author-text li {
text-align: left;
}
}

footer {
background-color: #221f1f; /* Темний фон футера */
color: #fff; /* Білий текст */
text-align: center; /* Центрування тексту */
padding: 30px 0; /* Відступи футера */
font-family: "Montserrat", sans-serif; /* Шрифт футера */
position: relative; /* Відносне позиціювання */
}

/* Стилі для тексту у футері */
.footer-content p {
margin: 0;
font-size: 18px;
}

/* Стиль для посилання */
footer a {
color: #fff; /* Колір посилання */
text-decoration: none; /* Прибираємо підкреслення */
font-weight: bold; /* Жирний шрифт для посилань */
transition: color 0.3s ease; /* Плавний перехід кольору */
}

/* Стиль для посилання при наведенні */
footer a:hover {
color: #fff; /* Змінюємо колір посилання при наведенні */
cursor: pointer;
text-decoration: underline;
}

/* Адаптація для мобільних пристроїв */
@media (max-width: 768px) {
.footer-content p {
font-size: 16px; /* Зменшуємо розмір тексту у футері для планшетів */
}

footer a {
font-size: 16px; /* Зменшуємо розмір шрифту для посилань */
}
}

/* Адаптація для маленьких екранів (менше ніж 480px) */
@media (max-width: 480px) {
.footer-content p {
font-size: 14px; /* Зменшуємо розмір тексту ще більше для смартфонів */
}

footer a {
font-size: 14px; /* Зменшуємо шрифт посилань для мобільних пристроїв */
}
}

/* Контактна інформація внизу сайту */
.contact-info-section {
padding: 30px 20px; /* Відступи для секції */
background-color: #fff; /* Білий фон */
text-align: center; /* Центрування тексту */
}

.contact-info-container {
display: flex; /* Гнучке вирівнювання */
justify-content: space-between; /* Рівномірний розподіл елементів */
gap: 20px; /* Проміжок між елементами */
flex-wrap: wrap; /* Перенесення елементів на новий ряд */
margin-bottom: 20px; /* Відступ знизу */
}

.contact-info-item {
flex: 1; /* Елементи займають однаковий простір */
min-width: 250px; /* Мінімальна ширина елемента */
padding: 20px; /* Внутрішні відступи */
background-color: #fff; /* Білий фон */
border: 3px solid #2e6f40; /* Рамка */
border-radius: 8px; /* Закруглені кути */
box-shadow: none; /* Відсутність тіні */
margin-bottom: 20px; /* Відступ знизу */
box-sizing: border-box; /* Урахування рамки у розмірах елемента */
}

.contact-info-item h3 {
font-size: 26px; /* Розмір заголовка */
color: #221f1f; /* Основний колір тексту */
margin-bottom: 15px; /* Відступ знизу */
font-style: normal;
font-weight: 800;
}

.contact-info-item p,
.contact-info-item a {
font-size: 18px; /* Розмір тексту */
color: #221f1f; /* Основний колір тексту */
text-decoration: none;
}

.contact-info-item a:hover {
text-decoration: underline;
}

/* Стилі для соціальних мереж */
.social-icons {
display: flex; /* Гнучке вирівнювання іконок */
gap: 15px; /* Проміжок між іконками */
justify-content: center; /* Центрування іконок */
}

.social-icon {
width: 60px; /* Розмір іконки */
height: 60px; /* Висота іконки */
padding: 20px; /* Внутрішні відступи */
transition: transform 0.3s ease, opacity 0.3s ease; /* Анімація при наведенні */
}

.social-icon:hover {
transform: scale(1.2); /* Збільшення при наведенні */
opacity: 0.8; /* Прозорість при наведенні */
}

.social-icon:focus {
outline: none; /* Відсутність обведення при фокусі */
}

/* Способи оплати */
.payment-section {
background-color: #f8f8f8;
padding: 20px 0;
text-align: center;
}

.payment-section h3 {
margin-bottom: 10px;
font-size: 1.5rem;
color: #292f33;
}

.payment-icons {
display: flex;
justify-content: center;
gap: 5px;
flex-wrap: wrap;
}

.payment-icons img {
width: 50px;
height: auto;
transition: transform 0.3s;
}

.payment-icons img:hover {
transform: scale(1.1);
}

/* Адаптація для мобільних пристроїв */
@media (max-width: 768px) {
.payment-section h3 {
font-size: 1.2rem; /* Зменшуємо розмір шрифту заголовка для мобільних */
}

.payment-icons {
justify-content: space-around; /* Переміщаємо іконки рівномірно по ширині */
}

.payment-icons img {
width: 40px; /* Зменшуємо розмір іконок для мобільних */
}
}

/* Адаптація для маленьких екранів (менше ніж 480px) */
@media (max-width: 480px) {
.payment-section h3 {
font-size: 1.1rem; /* Додаткове зменшення шрифту для дуже маленьких екранів */
}

.payment-icons img {
width: 35px; /* Зменшуємо іконки ще більше на маленьких екранах */
}
}

/* Стилі для CTA секції */
.cta-section {
background-color: #2e6f40; /* Яскравий фон для привернення уваги */
color: white; /* Білий текст для контрасту */
padding: 40px 20px;
text-align: center;
}

.cta-section h2 {
font-size: 36px;
margin-bottom: 15px;
font-weight: bold;
}

.cta-section p {
font-size: 18px;
margin-bottom: 30px;
}

.cta-button {
background-color: #292f33; /* Темна кнопка */
color: white;
padding: 15px 30px;
font-size: 18px;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}

.cta-button:hover {
background-color: #221f1f; /* Зміна кольору при наведенні */
}

/* Адаптація для мобільних пристроїв */
@media (max-width: 768px) {
.cta-section h2 {
font-size: 28px; /* Зменшуємо розмір заголовка */
}

.cta-section p {
font-size: 16px; /* Зменшуємо розмір тексту */
margin-bottom: 20px; /* Зменшуємо відступ між текстами */
}

.cta-button {
padding: 12px 25px; /* Зменшуємо розміри кнопки */
font-size: 16px; /* Зменшуємо шрифт на кнопці */
}
}

/* Адаптація для маленьких екранів (менше ніж 480px) */
@media (max-width: 480px) {
.cta-section h2 {
font-size: 24px; /* Ще більше зменшення заголовку */
}

.cta-section p {
font-size: 14px; /* Зменшуємо текст ще більше */
margin-bottom: 15px; /* Ще менше відступів */
}

.cta-button {
padding: 10px 20px; /* Далі зменшуємо розміри кнопки */
font-size: 18px; /* Зменшуємо шрифт кнопки */
}
}

/* Стилі для блоку переадресації КОРИСНА ІНФОРМАЦІЯ */
.info-redirect-section {
color: #000; /* Текст чорного кольору */
padding: 40px 20px;
text-align: center;
margin-bottom: 40px;
}

.info-redirect-section h2 {
font-size: 36px;
margin-bottom: 15px;
font-weight: bold;
}

.info-redirect-section p {
font-size: 18px;
margin-bottom: 30px;
}

.info-redirect-section .cta-button {
background-color: #292f33; /* Темна кнопка */
color: white;
padding: 15px 30px;
font-size: 18px;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}

.info-redirect-section .cta-button:hover {
background-color: #221f1f; /* Зміна кольору при наведенні */
}

/* Медіа-запит для мобільних пристроїв (до 768px) */
@media (max-width: 768px) {
.info-redirect-section {
padding: 30px 15px; /* Зменшуємо відступи */
}

.info-redirect-section h2 {
font-size: 28px; /* Зменшуємо розмір заголовка */
}

.info-redirect-section p {
font-size: 16px; /* Зменшуємо розмір тексту */
}

.info-redirect-section .cta-button {
padding: 12px 25px; /* Зменшуємо відступи на кнопці */
font-size: 16px; /* Зменшуємо розмір шрифту на кнопці */
}
}

/* Медіа-запит для дуже малих екранів (до 480px) */
@media (max-width: 480px) {
.info-redirect-section {
padding: 20px 10px; /* Ще більше зменшуємо відступи */
}

.info-redirect-section h2 {
font-size: 24px; /* Ще менший розмір заголовка */
}

.info-redirect-section p {
font-size: 14px; /* Ще менший розмір тексту */
}

.info-redirect-section .cta-button {
padding: 10px 20px; /* Зменшуємо розмір кнопки */
font-size: 16px; /* Зменшуємо розмір шрифтів на кнопці */
}
}

.updated-note{
  background: #fff6e5; border:1px solid #f3d19e; color:#7a4d00;
  padding:8px 12px; border-radius:8px; display:inline-block; font-size:.95rem;
}

/* ===== MISTAKES (Часті помилки) ===== */
.mistakes{
  position: relative;
  margin: 28px 0;
  padding: clamp(18px, 2.5vw, 28px);
  background:
    radial-gradient(1000px 400px at 90% -10%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(135deg, #2e6f40 0%, #292f33 58%);
  color: #fff;
  box-shadow: 0 18px 44px rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.18);
}

.mistakes > h2{
  margin: 0 0 14px;
  font-weight: 800;
  font-size: clamp(1.2rem, 1rem + .9vw, 1.8rem);
  letter-spacing: .2px;
  text-shadow: 0 2px 14px rgba(0,0,0,.25);
}

/* список як карткова сітка */
.mistakes__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.mistakes__list li{
  position: relative;
  padding: 14px 16px 14px 52px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.28);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  backdrop-filter: saturate(115%) blur(.4px);
  line-height: 1.45;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.mistakes__list li:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.38);
  box-shadow: 0 16px 40px rgba(0,0,0,.22);
}

/* круг-іконка + “!” з двох псевдоелементів */
.mistakes__list li::before{
  content:"";
  position:absolute;
  left:16px; top:50%; transform:translateY(-50%);
  width:24px; height:24px; border-radius:50%;
  background: rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.30);
}
.mistakes__list li::after{
  content:"";
  position:absolute;
  left:27px; top:50%; transform:translate(-50%,-58%);
  width:3px; height:12px; background:#fff; border-radius:2px;
  box-shadow: 0 10px 0 0 #fff; /* “крапка” як тінь нижче */
}

/* посилання під блоком */
.mistakes .related{
  margin-top: 12px;
  font-size: .98rem;
  opacity: .95;
}
.mistakes .related a{
  color:#fff;
  font-weight:700;
  text-underline-offset: 3px;
}
.mistakes .related a:hover{ text-decoration-thickness: 2px; }

/* ===== GLOSSARY (Міні-глосарій) ===== */
.glossary{
  margin: 28px 0;
  padding: clamp(18px, 2.5vw, 28px);
  border-radius: 16px;
  background: linear-gradient(180deg, #fafcff, #f7f9fe);
  box-shadow: 0 12px 26px rgba(18, 24, 40, .06);
  color:#0b1220;
}

.glossary > h2{
  margin: 0 0 14px;
  font-weight: 800;
  font-size: clamp(1.15rem, .95rem + .9vw, 1.6rem);
  color:#0b1220;
}

/* двоколонна сітка термін — визначення */
.glossary dl{
  display:grid;
  grid-template-columns: 1fr 3fr;
  gap: 10px 16px;
  margin: 0;
}

.glossary dt{
  font-weight: 800;
  color:#111827;
  background: #eef3ff;
  border:1px solid #dfe8ff;
  padding:10px 12px;
  border-radius: 12px;
  align-self: start;
}

.glossary dd{
  margin: 0;
  background: #ffffff;
  border:1px solid #e6ebf4;
  padding:10px 12px;
  border-radius: 12px;
  line-height: 1.5;
}

/* мобільна адаптація: у стовпчик з картковим виглядом */
@media (max-width: 700px){
  .glossary dl{ grid-template-columns: 1fr; }
  .glossary dt, .glossary dd{ padding:12px 14px; }
}

/* посилання-CTA під глосарієм */
.glossary .related{
  margin-top: 12px;
  font-size: .98rem;
  color:#0b1220;
}
.glossary .related a{
  color:#2e6f40;
  font-weight: 800;
  text-decoration: none;
  border-bottom: 2px solid rgba(46,111,64,.25);
  padding-bottom: 2px;
}
.glossary .related a:hover{
  border-bottom-color: rgba(46,111,64,.55);
}


/* Стилі для кнопки "Повернутися вгору" */
.scroll-to-top {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #292f33; /* Колір фону кнопки */
padding: 10px;
border-radius: 20%; /* Кругла кнопка */
display: none; /* Схована за замовчуванням */
cursor: pointer;
z-index: 1000; /* Щоб кнопка була поверх контенту */
}

.scroll-to-top svg {
width: 100%; /* Іконка заповнює кнопку */
height: auto;
}

.scroll-to-top:hover {
background-color: #221f1f; /* Зміна кольору кнопки при наведенні */
}

/* Стили для кнопки обратного звонка */
.callback-button {
position: fixed;
bottom: 20px;
left: 20px;
background-color: #2e6f40; /* Цвет кнопки */
color: #fff; /* Цвет текста */
border: none;
border-radius: 50px;
padding: 13px 15px;
cursor: pointer;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Стили для формы обратного звонка */
.callback-form {
position: fixed;
bottom: 80px; /* Выше кнопки */
left: 20px;
background-color: #fff;
border: 1px solid #2e6f40;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
z-index: 99999;
}

.callback-form form {
display: flex;
flex-direction: column;
}

.callback-form label {
margin-top: 10px;
}

.callback-form input {
margin-bottom: 10px;
padding: 8px;
border: 1px solid #2e6f40;
border-radius: 4px;
}

.callback-form button {
background-color: #2e6f40;
color: #fff;
border: none;
border-radius: 4px;
padding: 10px;
cursor: pointer;
margin-top: 10px;
font-size: 14px;
}

.callback-form button[type="button"] {
background-color: #3d3d3d;
margin-top: 5px;
}

.call-now-button {
display: inline-block;
background-color: #2e6f40;
color: white;
padding: 10px 10px;
font-size: 18px;
text-decoration: none;
border-radius: 5px;
margin-bottom: 5px;
transition: background-color 0.3s ease;
text-align: center;
}

/* Форма для відправки даних на сторінці Контакти */
.contact-form-section {
background-color: #f8f8f8;
padding: 40px 20px;
text-align: center;
}

.contact-form-section h2 {
font-size: 32px;
margin-bottom: 20px;
color: #292f33;
}

#contact-form {
max-width: 600px;
margin: 0 auto;
text-align: left;
}

.form-group {
margin-bottom: 20px;
}

.form-group label {
display: block;
font-size: 16px;
margin-bottom: 5px;
color: #292f33;
}

.form-group input,
.form-group textarea {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}

.form-group textarea {
resize: vertical;
}

/* Вирівнювання кнопки по ширині полів */
.submit-button {
background-color: #292f33;
color: white;
padding: 15px 30px;
font-size: 18px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
width: 100%; /* Додаємо ширину кнопки 100%, щоб вона відповідала полям */
box-sizing: border-box; /* Враховує padding у ширині */
}

.submit-button:hover {
background-color: #221f1f;
}

/* Адаптація для мобільних пристроїв */
@media (max-width: 768px) {
.contact-form-section h2 {
font-size: 28px; /* Зменшення розміру заголовка */
}

#contact-form {
padding: 0 10px; /* Зменшення внутрішніх відступів */
}

.form-group input,
.form-group textarea {
font-size: 14px; /* Зменшення розміру тексту у полях */
padding: 8px; /* Зменшення відступів */
}

.submit-button {
font-size: 16px; /* Зменшення розміру тексту кнопки */
padding: 12px 20px; /* Зменшення внутрішніх відступів */
}
}

@media (max-width: 480px) {
.contact-form-section h2 {
font-size: 24px; /* Ще менший розмір заголовка */
}

.submit-button {
font-size: 14px; /* Ще менший розмір тексту кнопки */
padding: 10px 15px; /* Зменшення внутрішніх відступів */
}
}

/* Корисна інформація */
.useful-info {
display: flex;
flex-direction: column;
gap: 20px;
padding: 20px;
border-radius: 10px;
}

.info-block {
background-color: #ffffff;
border: 1px solid #ddd;
border-radius: 10px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.info-block h3 {
color: #2e6f40;
margin-bottom: 15px;
}

.info-block p {
margin: 10px 0;
color: #292f33;
line-height: 1.6;
}

.info-block ul {
margin-top: 10px;
padding-left: 20px;
list-style-type: disc;
}

.info-block ul li {
margin-bottom: 5px;
}

/* Адаптація для мобільних пристроїв */
@media (max-width: 768px) {
.useful-info {
padding: 15px;
gap: 15px;
}

.info-block {
padding: 15px;
box-shadow: none; /* Можна спростити для економії ресурсів */
border: 1px solid #ccc;
}

.info-block h3 {
font-size: 1.2rem;
margin-bottom: 10px;
}

.info-block p {
font-size: 0.9rem;
line-height: 1.4;
}

.info-block ul {
padding-left: 15px;
}

.info-block ul li {
font-size: 0.9rem;
}
}

.services-info {
padding: 20px;
text-align: center;
margin: 20px 0;
}

.services-content-block h2 {
font-size: 26px;
color: #000;
margin-bottom: 10px;
}

.services-content-block p {
font-size: 18px;
color: #000;
margin-bottom: 20px;
}

.cta-button-services {
font-size: 20px;
display: inline-block;
padding: 10px 20px;
background-color: #2e6f40;
color: #fff;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
transition: background-color 0.3s;
}

.cta-button-services:hover {
background-color: #000;
}

/* Блок про Facebook */
.facebook-info {
margin-top: 30px;
padding: 15px;
background-color: #2e6f40;
color: #ffffff;
text-align: center;
}

/* Заголовок */
.facebook-content h2 {
font-size: 1.6rem; /* Зменшений розмір для мобільних пристроїв */
color: #ffffff;
margin-bottom: 12px;
}

/* Опис */
.facebook-content p {
font-size: 1.1rem; /* Зменшений розмір тексту */
margin-bottom: 15px;
line-height: 1.4;
}

/* Кнопка */
.facebook-button {
display: inline-block;
padding: 10px 15px; /* Зменшений відступ для мобільних */
font-size: 1.2rem; /* Зменшений розмір шрифту */
color: #fff;
background-color: #292f33;
border: none;
border-radius: 5px;
text-decoration: none;
transition: background-color 0.3s ease, color 0.3s ease;
}

/* Ховер ефект */
.facebook-button:hover {
background-color: #000;
color: #fff;
}

/* Адаптація для мобільних пристроїв */
@media (max-width: 768px) {
.facebook-info {
padding: 14px; /* Зменшений внутрішній відступ */
}

.facebook-content h2 {
font-size: 1.2rem; /* Менший заголовок для компактності */
}

.facebook-content p {
font-size: 0.9rem; /* Компактний текст */
margin-bottom: 12px;
}

.facebook-button {
padding: 8px 12px; /* Зменшені відступи кнопки */
font-size: 1rem; /* Менший шрифт */
}
}

/*Фото у розділі Корисна інформація*/
/* Стилі для фото в банері */
.banner-photo {
width: 100%;
max-width: 800px; /* Максимальна ширина фото */
height: auto;
border-radius: 15px; /* Округлення кутів */
margin-top: 20px;
display: block;
margin-left: auto;
margin-right: auto;
object-fit: cover;
}

/* Адаптивні стилі для мобільних пристроїв */
@media (max-width: 768px) {
.banner-photo {
max-width: 100%; /* Зображення займає всю ширину екрана на мобільних */
border-radius: 10px; /* Менше округлення кутів на мобільних */
box-shadow: none; /* Видалити тінь на мобільних пристроях для спрощення */
margin-top: 15px; /* Зменшити відступ від тексту */
}
}

@media (max-width: 480px) {
.banner-content h1 {
font-size: 28px; /* Зменшити шрифт заголовку на малих екранах */
}

.banner-content p {
font-size: 16px; /* Зменшити шрифт параграфу на малих екранах */
/*        margin-bottom: 15px;  Зменшити відступ знизу */
}
}

/* Стилі для блоку послуг */
.services {
padding: 30px 20px;
margin-top: 20px;
background: #2e6f40;
}

/* Заголовок блоку послуг */
.services-content h2 {
font-size: 2rem;
margin-bottom: 25px;
color: #fff;
text-align: center;
}

/* Список послуг */
.services-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
gap: 20px; /* Збільшено відстань між блоками */
justify-items: center;
}

/* Стиль кожного елементу послуги */
.service-item {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
text-align: center;
transition: transform 0.3s ease, background-color 0.3s ease;
width: 85%;
position: relative; /* Це дозволяє ефекту hover працювати коректно */
}

/* Заголовки кожної послуги */
.service-item h3 {
font-size: 1.25rem;
color: #000;
margin-bottom: 15px;
}

/* Текст опису послуги та ціна */
.service-item p {
font-size: 1rem;
color: #292f33;
margin-bottom: 15px;
line-height: 1.5;
}

/* Вартість послуги */
.price {
font-weight: bold;
color: #2e6f40;
font-size: 1.5rem;
}

/* Ефект на hover для кожної послуги */
.service-item:hover {
transform: translateY(-10px); /* Злегка підняти блок */
background-color: #000;
color: #ffffff;
cursor: pointer; /* Добавляем эту строку */
}

/* Переключення кольору ціни при hover */
.service-item:hover .price {
color: #ffffff;
}

.service-item:hover p {
color: #ffffff;
}

.service-item:hover h3 {
color: #ffffff;
}

/* Мобільна адаптація */
@media screen and (max-width: 768px) {
.services-content h2 {
font-size: 1.5rem;
margin-bottom: 15px;
}

.service-item h3 {
font-size: 1.1rem;
}

.service-item p {
font-size: 0.95rem;
}
.service-item {
width: 80%;
}
.services-list {
grid-template-columns: auto;
}
}

/*FAQ*/
.faq-section {
padding: 50px 0;
}

.faq-section .container {
max-width: 1200px;
margin: 0 auto;
}

.faq-section .section-title {
text-align: center;
font-size: 2.5rem;
margin-bottom: 30px;
color: #292f33;
}

.accordion-item {
margin-bottom: 10px;
}

.accordion-header {
width: 100%;
padding: 15px;
background-color: #2e6f40;
color: #fff;
text-align: left;
font-size: 1.2rem;
border: none;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s;
font-family: "Montserrat", sans-serif; /* Основний шрифт */
}

.accordion-header:hover {
background-color: #000;
}

/* Коли кнопка відкрита — показуємо наступну панель */
.accordion-header[aria-expanded="true"] + .accordion-content {
  display: block;
}

.accordion-content {
padding: 15px;
background-color: #fff;
font-size: 1rem;
color: #292f33;
display: none; /* Початково контент прихований */
border-left: 3px solid #2e6f40;
border-radius: 5px;
font-family: "Montserrat", sans-serif; /* Основний шрифт */
}

.accordion-content p {
margin: 0;
line-height: 1.6;
}

/*Стилі до ЗМІСТУ на сторінці Корисна інформація*/
.table-of-contents {
margin: 20px 0;
padding: 20px;
background-color: #ffffff; /* Білий фон для чистоти */
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* М'яка тінь для глибини */
max-width: 100%; /* Обмеження ширини для великих екранів */
margin-left: 20px;
margin-right: 20px; /* Центрування */
}

.table-of-contents h2 {
font-size: 1.8em; /* Трохи більший заголовок */
font-weight: 600;
margin-bottom: 15px;
color: #000; /* Темно-сірий для контрасту */
border-bottom: 1px solid #2e6f40; /* Акцентна синя лінія */
padding-bottom: 5px;
text-align: center;
}

.table-of-contents ul {
list-style-type: none;
padding: 0;
}

.table-of-contents li {
margin: 10px 0; /* Більший відступ між пунктами */
position: relative; /* Для псевдоелементів */
padding-left: 25px; /* Місце для маркера */
}

.table-of-contents li::before {
content: "➔"; /* Стрілка як маркер */
position: absolute;
left: 0;
color: #2e6f40; /* Синій колір маркера */
font-size: 1.1em;
transition: transform 0.3s ease; /* Плавний ефект для маркера */
}

.table-of-contents a {
text-decoration: none;
color: #000; /* Синій колір посилань */
font-weight: 500;
transition: color 0.3s ease; /* Плавна зміна кольору */
font-size: 1.2em;
}

.table-of-contents a:hover {
color: #2e6f40; /* Темніший відтінок при наведенні */
text-decoration: underline; /* Підкреслення при наведенні */
}

.table-of-contents li:hover::before {
transform: translateX(5px); /* Зсув стрілки вправо при наведенні */
}

/* Адаптивність для мобільних пристроїв */
@media (max-width: 600px) {
.table-of-contents {
padding: 15px;
margin: 10px;
}

.table-of-contents h2 {
font-size: 1.5em;
}

.table-of-contents li {
margin: 8px 0;
padding-left: 20px;
}
}

.services-intro {
padding: 10px 10px;
max-width: 1200px;
margin: 0 auto;
}
.services-intro h2 {
font-size: 2em;
margin-bottom: 10px;
color: black;
}
.services-intro h3 {
font-size: 1.5em;
margin-top: 30px;
margin-bottom: 15px;
}
.services-intro p,
.services-intro ul,
.services-intro ol {
font-size: 1.1em;
line-height: 1.6;
margin-bottom: 20px;
}
.services-intro ul li,
.services-intro ol li {
margin-bottom: 10px;
}

/*FAQ mini*/
/* ===== FAQ (Accordion) ===== */
:root{
  --faq-accent: #2e6f40;            /* змінити під бренд */
  --faq-bg: #ffffff;
  --faq-text: #000;              /* заголовок запитання */
  --faq-muted: #4b5563;             /* текст відповіді */
  --faq-border: #2e6f40;
  --faq-radius: 14px;
  --faq-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.faq{
  max-width: 900px;
  margin: 56px auto;
  padding: 0 16px;
}
.faq > h2{
  text-align: center;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  margin: 0 0 20px;
}

/* Карточка питання */
.faq details{
  background: var(--faq-bg);
  border: 1px solid var(--faq-border);
  border-radius: var(--faq-radius);
  box-shadow: var(--faq-shadow);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .06s ease;
  will-change: border-color, box-shadow;
}
.faq details + details{ margin-top: 12px; }

/* Заголовок питання */
.faq summary{
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 18px 56px 18px 20px;
  font-weight: 600;
  color: var(--faq-text);
  outline: none;
  user-select: none;
}
.faq summary::-webkit-details-marker{ display: none; }

/* Іконка-стрілка */
.faq summary::after{
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-50%) rotate(-45deg);
  transition: transform .2s ease, opacity .2s ease;
  opacity: .65;
}

/* Ховер/фокус стани */
.faq summary:hover{
  background: color-mix(in srgb, var(--faq-accent) 6%, var(--faq-bg));
}
.faq summary:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--faq-accent) 55%, transparent);
  outline-offset: 2px;
  border-radius: 10px;
}

/* Відкритий стан */
.faq details[open]{
  border-color: color-mix(in srgb, var(--faq-accent) 35%, var(--faq-border));
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}
.faq details[open] summary::after{
  transform: translateY(-50%) rotate(45deg);
  opacity: .9;
}

/* Тіло відповіді (будь-який контент, крім summary) */
.faq details > *:not(summary){
  padding: 0 20px 18px 20px;
  margin: 0;
  color: var(--faq-muted);
  line-height: 1.65;
  animation: faqFade .22s ease;
}

/* Дрібні елементи всередині відповіді */
.faq p + p{ margin-top: 10px; }
.faq ul{ padding-left: 1.2rem; margin: 10px 0 0; }
.faq a{ color: color-mix(in srgb, var(--faq-accent) 85%, #000); text-decoration: underline; }

/* Менше руху для користувачів з reduce motion */
@media (prefers-reduced-motion: reduce){
  .faq *, .faq *::before, .faq *::after{
    transition: none !important;
    animation: none !important;
  }
}

/* Друк */
@media print{
  .faq details{ box-shadow: none; border-color: #bbb; }
}

/* Невелике появлення відповіді */
@keyframes faqFade{
  from{ opacity: 0; transform: translateY(-2px); }
  to{ opacity: 1; transform: translateY(0); }
}

/*Чому обирають*/
/* ===== WHY-US (Чому нас обирають) ===== */
:root{
  --why-accent: #2e6f40;          /* колір акценту (зміни під бренд) */
  --why-bg: #ffffff;
  --why-card-bg: #ffffff;
  --why-text: #000;
  --why-muted: #4b5563;
  --why-border: #2e6f40;
  --why-radius: 16px;
  --why-shadow: 0 10px 24px rgba(0,0,0,.06);
}

.why-us{
  max-width: 1100px;
  margin: 56px auto;
  padding: 0 16px;
}
.why-us > h2{
  text-align: center;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  margin: 0 0 22px;
}

/* Сітка карток (li як картки) */
.why-us ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

/* Картка */
.why-us li{
  position: relative;
  background: var(--why-card-bg);
  border: 1px solid var(--why-border);
  border-radius: var(--why-radius);
  box-shadow: var(--why-shadow);
  padding: 18px 18px 18px 58px; /* місце під іконку зліва */
  color: var(--why-muted);
  line-height: 1.65;
  transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease;
  will-change: transform, box-shadow, border-color;
}

/* Акцент на ключових словах */
.why-us li strong{
  color: var(--why-text);
  font-weight: 700;
}

/* Іконка-мітка (галочка) */
.why-us li::before{
  content: "✓";
  display: grid;
  place-items: center;
  position: absolute;
  left: 16px;
  top: 18px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--why-accent);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

/* Ховер/фокус */
.why-us li:hover, .why-us li:focus-within{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--why-accent) 40%, var(--why-border));
  box-shadow: 0 14px 28px rgba(0,0,0,.08);
}

/* Додатковий підзаголовок (необовʼязково) */
.why-us .subtext{
  text-align: center;
  color: var(--why-muted);
  margin: 6px 0 18px;
  font-size: .975rem;
}

/* Менше руху */
@media (prefers-reduced-motion: reduce){
  .why-us li{ transition: none !important; }
}

/* Друк */
@media print{
  .why-us li{ box-shadow: none; border-color: #bbb; }
}