body {
    margin: 0;
    padding: 20px;
    font-family: Arial, sans-serif;
    background-color: #D9DCD6;
    color: #333;
    display: flex;
    justify-content: center;
    /* Центрування основного контенту на сторінці */
}

.container {
    width: 100%;
    max-width: 800px;
    /* Максимальна ширина контейнера для оптимального читання */
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

  .highlight {
      color: #16425B;
      /* Для виділяючих елементів */
  }

  .important-info {
      color: #008148;
      /* Для важливої інформації */
  }

  .article-header {
      text-align: center;
      background-color: #f4f4f4;
      padding: 20px;
      border-radius: 8px;
      margin-bottom: 20px;
  }

  .article-header h1 {
      font-size: 24px;
      color: #16425B;
  }

  .article-header h2 {
      font-size: 18px;
      color: #008148;
  }

  @media (max-width: 768px) {

      .article-header h1,
      .article-header h2 {
          font-size: 20px;
      }
  }
 
  .main-image-container {
      width: 100%;
      /* Забезпечує повну ширину контейнера на сторінці */
      display: flex;
      justify-content: center;
      /* Центрування фотографії */
      margin-bottom: 20px;
      /* Відступ знизу */
  }

  .main-image {
      width: 100%;
      /* Встановлюємо ширину фотографії */
      max-width: 800px;
      /* Максимальна ширина, щоб фотографія не виглядала надто великою на великих екранах */
      height: auto;
      /* Висота автоматично налаштовується за шириною */
      border-radius: 8px;
      /* Закруглення кутів фотографії */
  }

  @media (max-width: 768px) {
      .main-image {
          max-width: 100%;
          /* Дозволяє фотографії займати всю ширину на маленьких пристроях */
      }
  }

  .main-article {
      font-family: Arial, sans-serif;
      /* Використання легкого для читання шрифту */
      color: #333;
      /* Основний колір тексту */
      line-height: 1.6;
      /* Відступ між лініями для кращої читабельності */
      padding: 20px;
      /* Внутрішній відступ */
      background-color: #fff;
      /* Фоновий колір для контрасту зі сторінкою */
      border-radius: 8px;
      /* Закруглення країв блоку */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      /* Тінь для підкреслення блоку */
      margin-bottom: 20px;
      /* Відступ знизу */
  }

  .highlight-green {
      color: #008148;
      /* Виділення важливих моментів зеленим */
      font-weight: bold;
      /* Зробити текст жирним */
  }

  .highlight-blue {
      color: #16425B;
      /* Виділення ключових даних синім */
      font-weight: bold;
      /* Зробити текст жирним */
  }

  .main-article p {
      margin-bottom: 16px;
      /* Відступ між параграфами */
  }

  .image-wrapper {
      margin: 20px 0;
      padding: 10px;
      background-color: #f4f4f4;
      border-radius: 10px;
      text-align: center;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

  .skill-image {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
  }

  .image-caption {
      margin-top: 10px;
      color: #008148;
      /* Використання зеленого кольору для підкреслення важливості моменту */
      font-weight: bold;
  }

  .text-section {
      margin: 20px auto;
      max-width: 600px;
      padding: 15px;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      font-size: 16px;
      line-height: 1.6;
      color: #333;
  }

  .highlight-location {
      color: #16425B;
      /* Темно-синій колір для місцезнаходження */
      font-weight: bold;
  }

  .highlight-info {
      color: #008148;
      /* Зелений колір для особливої інформації */
      font-weight: bold;
  }

  .highlight-education,
  .highlight-job {
      color: #16425B;
      /* Темно-синій для освіти та роботи */
      font-style: italic;
  }

  @media (max-width: 768px) {
      .text-section {
          padding: 10px;
          font-size: 14px;
      }
  }
.difficult-conditions {
    background-color: #FF8E47;
    /* Теплий оранжевий колір для фону */
    color: #fff;
    /* Білий колір тексту для кращого контрасту */
    padding: 15px;
    margin: 20px auto;
    border-radius: 8px;
    max-width: 600px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    font-size: 16px;
    line-height: 1.6;
    font-weight: 700;
}

@media (max-width: 768px) {
    .difficult-conditions {
        padding: 10px;
        font-size: 14px;
    }
}

.vintage-photo {
    border: 5px solid #fff;
    /* Біла рамка навколо фото */
    padding: 10px;
    background-color: #e0e0e0;
    /* Світло-сірий колір для фону */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    /* Тіні для глибини */
    margin: 20px auto;
    max-width: 300px;
}

.heroine-photo {
    width: 100%;
    height: auto;
    filter: grayscale(100%);
    /* Зробити фотографію чорно-білою */
    opacity: 0.8;
    /* Злегка зменшити прозорість для вінтажного вигляду */
}

@media (max-width: 768px) {
    .vintage-photo {
        max-width: 100%;
    }
}
.health-struggle {
    background-color: #FFEEEA;
    /* світло-рожевий фон для акценту на здоров'я */
    padding: 15px;
    border-left: 5px solid #B22222;
    /* темно-червона смуга для серйозності стану */
    margin: 20px 0;
    color: #333;
    font-size: 18px;
}

.pain-detail {
    color: #B22222;
    /* темно-червоний для підкреслення болю */
    font-weight: bold;
}

@media (max-width: 768px) {
    .health-struggle {
        padding: 10px;
        font-size: 16px;
    }
}

.quote-block {
    background-color: #fff8dc;
    /* блідо-жовтий фон для виділення цитат */
    border-left: 5px solid #ff8e47;
    /* жовто-оранжева бічна смуга */
    padding: 20px;
    margin: 20px 0;
    color: #333;
}

.quote {
    margin: 10px 0;
    line-height: 1.6;
    font-size: 18px;
}

.quote strong em {
    font-weight: bold;
    font-style: italic;
    color: #008148;
    /* зелений колір для важливої інформації */
}

@media (max-width: 768px) {
    .quote-block {
        padding: 10px;
        font-size: 16px;
    }
}

.miracle-story {
    margin: 20px auto;
        max-width: 600px;
        padding: 15px;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        font-size: 16px;
        line-height: 1.6;
        color: #333;
}

.highlight-dream {
    color: #008148;
    /* зелений колір для важливих слів */
    font-weight: bold;
}

.highlight-cure {
    color: #16425B;
    /* темно-синій колір для наукових термінів */
    font-style: italic;
}

.highlight-miracle {
    color: #FF8E47;
    /* оранжевий для додаткового акценту на дивовижний результат */
    font-weight: bold;
    text-decoration: underline;
}

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

.miracle-recovery {
    margin: 20px auto;
        max-width: 600px;
        padding: 15px;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        font-size: 16px;
        line-height: 1.6;
        color: #333;
}

.highlight-call {
    color: #16425B;
    /* темно-синій для підкреслення особистого звернення */
    font-weight: bold;
}

.miracle-event {
    color: #555;
    margin-top: 10px;
}

.highlight-miracle {
    color: #FF8E47;
    /* оранжевий для акценту на момент дива */
    font-weight: bold;
}

.highlight-results {
    color: #008148;
    /* зелений для підсилення важливості результатів */
    font-weight: bold;
}

@media (max-width: 768px) {
    .miracle-recovery {
        font-size: 16px;
        /* адаптація для мобільних пристроїв */
    }
}

.xray-comparison-single {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    /* Ураховує внутрішні відступи в загальну ширину */
    position: relative;
    /* Для вирішення проблеми зміщення */

    /* Центруємо контейнер */
    left: 50%;
    transform: translateX(-50%);
}

.xray-details {
    padding: 10px;
    font-size: 16px;
    color: #ffffff;
    background-color: #008147;
    margin-top: 10px;
    border-radius: 5px;
}

.xray-comparison-single img {
    width: 100%;
    height: auto;
    border-radius: 15px;
}

@media (max-width: 768px) {
    .xray-comparison-single {
        width: 100%;
        padding: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}

.article-subtitle {
    font-size: 24px;
    /* Розмір шрифту */
    font-weight: bold;
    /* Жирний шрифт */
    text-align: center;
    /* Вирівнювання по центру */
    margin-top: 20px;
    /* Відступ зверху */
    color: #008148;
    /* Колір тексту */
}

.hero-quote {
    font-style: italic;
    /* Курсивний шрифт */
    font-size: 18px;
    /* Розмір шрифту */
    text-align: center;
    /* Вирівнювання по центру */
    color: #008148;
    /* Колір тексту */
    padding: 20px;
    /* Відступи всередині блоку */
    margin: 20px 0;
    /* Зовнішні відступи */
   
    /* Ліва границя */
    background-color: #F5F5F5;
    /* Фоновий колір */
}

.editorial-addon {
    background-color: #E0E0E0;
    /* Фоновий колір */
    padding: 20px;
    /* Відступи всередині блоку */
    border-left: 5px solid #16425B;
    /* Ліва границя */
    margin-bottom: 20px;
    /* Зовнішній відступ знизу */
}

.editorial-addon h3 {
    font-size: 20px;
    /* Розмір шрифту заголовка */
    color: #16425B;
    /* Колір тексту заголовка */
    margin-bottom: 10px;
    /* Зовнішній відступ знизу заголовка */
}

.doctor-profile {
    display: flex;
    /* Відображення в ряд */
    align-items: center;
    /* Вирівнювання по вертикалі */
    margin-bottom: 20px;
    /* Зовнішній відступ знизу */
}

.doctor-photo {
    flex: 0 0 auto;
    /* Не збільшується, не зменшується */
    margin-right: 20px;
    /* Зовнішній відступ справа */
}

.doctor-photo img {
    max-width: 100px;
    /* Максимальна ширина фото */
    border-radius: 5px;
    /* Круглий кут для фото */
}

.doctor-description {
    flex: 1;
    /* Займає залишок доступного простору */
}

.doctor-description h4 {
    font-size: 18px;
    /* Розмір шрифту заголовка */
    margin-bottom: 10px;
    /* Зовнішній відступ знизу заголовка */
    color: #16425B;
    /* Колір тексту заголовка */
}

.interview {
    background-color: #F9F9F9;
    /* Фоновий колір */
    padding: 20px;
    /* Відступи всередині блоку */
 
    /* Ліва границя */
    margin-bottom: 20px;
    /* Зовнішній відступ знизу */
}

.interview h4 {
    font-size: 18px;
    /* Розмір шрифту заголовка */
    margin-bottom: 10px;
    /* Зовнішній відступ знизу заголовка */
    color: #008148;
    /* Колір тексту заголовка */
}

.interview p {
    font-weight: 600;
    font-style: italic;
}

.ingredients-list {
    background-color: #008148;
    /* Фоновий колір */
    padding: 20px;
    /* Відступи всередині блоку */
  
    /* Ліва границя */
    margin-bottom: 20px;
    /* Зовнішній відступ знизу */
    border-radius: 5px;
}

.ingredients-list strong {
    color: #FF8E47;
    /* Колір тексту жирного шрифту */
}

.ingredients-list ul {
    list-style-type: none;
    /* Видалення маркера списку */
    padding-left: 20px;
    /* Відступи від лівого краю для пунктів списку */
}

.ingredients-list li {
    margin-bottom: 10px;
    /* Зовнішній відступ знизу між пунктами списку */
    color: #ffffff;
}
.conference-image {
    text-align: center;
    /* Вирівнювання по центру */
    margin-bottom: 20px;
    /* Зовнішній відступ знизу */
}

.conference-image img {
    max-width: 100%;
    /* Максимальна ширина зображення */
    height: auto;
    /* Автоматична висота */
    border-radius: 5px;
    /* Округлені кути */
}

.joint-description {
    background-color: #FDF5E6;
    /* Фоновий колір */
    padding: 20px;
    /* Відступи всередині блоку */

    /* Ліва границя */
    margin-bottom: 20px;
    /* Зовнішній відступ знизу */
}

.joint-description ol {
    list-style-type: none;
    /* Видалення маркера списку */
    counter-reset: item;
    /* Скидання лічильника */
}

.joint-description li {
    position: relative;
    /* Позиція відносно блока */
    margin-bottom: 10px;
    /* Зовнішній відступ знизу між пунктами списку */
}

.joint-description li:before {
    content: counter(item) ". ";
    /* Відображення номеру елемента */
    counter-increment: item;
    /* Збільшення лічильника */
    font-weight: bold;
    /* Жирний шрифт для номеру елемента */
}

.attention-call {
    background-color: #FFE4E1;
    /* Фоновий колір */
    padding: 20px;
    /* Відступи всередині блоку */
    border-radius: 5px;
    /* Ліва границя */
    margin-bottom: 20px;
    /* Зовнішній відступ знизу */
    font-weight: 600;
}

.attention-call strong {
    color: #ff6969;
    /* Колір тексту жирного шрифту */
}

.article-comments {
    
    /* Фоновий колір */
    border: 1px solid #CCCCCC;
    border-radius: 5px;
    /* Границя */
    padding: 20px;
    /* Відступи всередині блоку */
    margin-top: 30px;
    /* Зовнішній відступ зверху */
}

.comment {
    display: flex;
    /* Відображення в ряд */
    align-items: flex-start;
    /* Вирівнювання зверху */
    margin-bottom: 20px;
    /* Зовнішній відступ знизу */
}

.comment-avatar {
    flex: 0 0 auto;
    /* Не збільшується, не зменшується */
    margin-right: 15px;
    /* Зовнішній відступ справа */
}

.comment-avatar img {
    width: 50px;
    /* Ширина аватарки */
    height: 50px;
    /* Висота аватарки */
    border-radius: 50%;
    /* Округлені кути */
}

.comment-content {
    flex: 1;
    /* Займає залишок доступного простору */
}

.comment-content strong {
    color: #333;
    /* Колір тексту жирного шрифту */
    font-weight: bold;
    /* Жирний шрифт */
    margin-bottom: 5px;
    /* Зовнішній відступ знизу */
}

.main__gift-title {
    font-size: 20px;
    max-width: 760px;
    margin: 35px auto 0;
    text-align: center;
    color: #fff;
    background: #00416E;
    border-radius: 3px;
}

.main__boxes {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 655px;
    margin: 0 auto;
}

.main__boxes li {
    flex: 0 0 33.33%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}

.opentry {
    display: none;
}

.message-try,
.message-congrats {
    width: 475px;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    background-color: #fff;
    border-radius: 5px;
    padding: 25px;
    text-align: center;
    position: fixed;
    display: none;
}

.message-try p {
    margin: 20px 0;
    color: #666;
    font-size: 18px;
}

.close-try-message {
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    border-radius: 3px;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    width: 90px;
    padding: 10px;
    margin: 0 auto;
}

.close-try-message.yellow {
    background: #FFA400;
}

.message-try,
.message-congrats {
    width: 475px;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    background-color: #fff;
    border-radius: 5px;
    padding: 25px;
    text-align: center;
    position: fixed;
    display: none;
}

.message-congrats p:first-of-type,
.message-congrats p:last-of-type {
    text-transform: uppercase;
    font-size: 28px;
}

.message-congrats p:nth-of-type(2) {
    font-size: 24px;
}

.close-try-message.green {
    background: #71C341;
    margin-top: 20px;
}

.main__form {
    max-width: 420px;
    margin: 40px auto 0;
    display: none;
}

.main__form .np p {
    margin-left: 10px;
}

.main__form p {
    text-align: center;
}

.main__form p span {
    color: #00416E;
}

.main__form form {
    max-width: 320px;
    margin: 0 auto;
}

.main__form form input {
    background: #E5E5E5;
    margin-top: 15px;
    border-radius: 5px;
    outline: none;
    font-size: 14px;
    width: 85%;
    padding: 15px 20px;
    border: none;
}

.main__form form button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    outline: none;
    padding: 10px 0;
    background: #008148;
    border-radius: 5px;
    margin-top: 15px;
    color: #fff;
    border: none;
}

.timer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 250px;
    font-size: 48px;
    font-weight: bold;
    margin: 20px auto 0;
}

.timer>div {
    position: relative;
}

.timer>div::after {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -5px;
    font-size: 12px;
    font-weight: 400;
    text-align: center;
}

.timer>.hours::after {
    content: 'годин';
}

.timer>.mins::after {
    content: 'хвилин';
}

.timer>.sec::after {
    content: 'секунд';
}

@media screen and (max-width: 576px) {

    .main__boxes li {
        padding: 10px;
    }

    .main__gift-title {
        font-size: 14px;
        padding: 15px;
    }
}

.overlay {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .3);
    z-index: 99;
}

.message-try,
.message-congrats {
    width: 475px;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    background-color: #fff;
    border-radius: 5px;
    padding: 25px;
    text-align: center;
    position: fixed;
    display: none;
}

.message-try p {
    margin: 20px 0;
    color: #666;
    font-size: 18px;
}

.opentry {
    display: none;
}

.main__gift-title {
    padding: 30px;
}

.main__form {
    max-width: 420px;
    margin: 40px auto 0;
    display: none;
}

.main__form .np {
    max-width: 320px;
    margin: 30px auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #E5E5E5;
}

.main__form .np p {
    margin-left: 10px;
}

.main__form p {
    text-align: center;
}

.main__form p span {
    color: #00416E;
}

.main__form form {
    max-width: 320px;
    margin: 0 auto;
}


.main__form form button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    outline: none;
    padding: 10px 0;
    background: #008148;
    border-radius: 5px;
    margin-top: 15px;
    color: #fff;
    border: none;
}