/* === МОДАЛЬНОЕ ОКНО РАССРОЧКИ=== */
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
box-sizing: border-box;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Состояние открытого окна */
.modal.is-open {
opacity: 1;
visibility: visible;
}

/* Затемнение фона (оверлей) */
.modal__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px); /* Лёгкий размытый фон */
}

/* Диалоговое окно */
.modal__dialog {
position: relative;
width: 100%;
max-width: 500px;
max-height: 90vh;
background-color: #ffffff;
border-radius: 20px;
padding: 32px 28px;
box-sizing: border-box;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
z-index: 10;
overflow-y: auto; /* Скролл, если форма не влезает на экранах телефонов */
transform: translateY(20px) scale(0.95);
transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.modal.is-open .modal__dialog {
transform: translateY(0) scale(1);
}

/* Кнопка закрытия (крестик) */
.modal__close {
position: absolute;
top: 16px;
right: 20px;
background: none;
border: none;
font-size: 28px;
line-height: 1;
color: #8a94a6;
cursor: pointer;
padding: 4px;
transition: color 0.2s ease, transform 0.2s ease;
}

.modal__close:hover {
color: #2c323d;
transform: scale(1.1);
}

/* Заголовок модального окна */
.modal__title {
font-size: 24px;
font-weight: 700;
color: #2c323d;
margin: 0 0 20px 0;
text-align: center;
}

/* === АДАПТИВНОСТЬ МОДАЛКИ === */
@media (max-width: 576px) {
.modal {
padding: 10px;
}

.modal__dialog {
padding: 24px 18px;
border-radius: 16px;
}

.modal__title {
font-size: 20px;
margin-bottom: 16px;
}
}

h2.rspz, .dhh h2  {
font-size: 35px;
font-weight: 500;
color: #2c3e50;
margin: 50px 0 20px 0;
line-height: 1.2;
letter-spacing: -0.5px;
}
/* ==========================================================================
Статьи блога
========================================================================== */
/* Переменные темы */
:root {
--art-bg: #ffffff;
--art-text: #2d3748;
--art-heading: #1a202c;
--art-accent: #0085ca;
--art-radius: 16px;
--art-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
--art-max-width: 920px; /* Оптимальная ширина для комфортного чтения */
}
/* Общий сброс полей для контейнеров статьи */
.artcl111,
.artcl222,
.artcls {
box-sizing: border-box;
max-width: var(--art-max-width);
margin-left: auto;
margin-right: auto;
}
/* --------------------------------------------------------------------------
1. Главное изображение / Главный баннер (.artcl111)
-------------------------------------------------------------------------- */
.artcl111 {
width: 100%;
margin-bottom: 2rem;
border-radius: var(--art-radius);
overflow: hidden;
box-shadow: var(--art-shadow);
background-color: #f7fafc;
}
.artcl111 .img-nvst {
display: block;
width: 100%;
height: auto;
max-height: 500px;
object-fit: cover;
object-position: center;
}
/* --------------------------------------------------------------------------
2. Краткое описание / Лид статьи (.artcl222)
-------------------------------------------------------------------------- */
.artcl222 {
background: #f8fafc;
border-left: 4px solid var(--art-accent);
padding: 1.5rem 2rem;
margin-bottom: 2.5rem;
border-radius: 0 var(--art-radius) var(--art-radius) 0;
font-size: 1.15rem;
line-height: 1.6;
color: #4a5568;
font-weight: 500;
}
/* Если лид пустой (нет метаполя brief), скрываем контейнер */
.artcl222:empty {
display: none;
}
/* --------------------------------------------------------------------------
3. Основной контент и заголовок (.artcls)
-------------------------------------------------------------------------- */
.artcls {
background: var(--art-bg);
color: var(--art-text);
line-height: 1.8;
font-size: 1.0625rem; /* 17px */
}
/* Блок заголовка статьи */
.artcls .nazstr4 {
margin-bottom: 2rem;
}
.artcls .nazstr4 hr {
border: 0;
height: 2px;
background: #e2e8f0;
margin-bottom: 1.5rem;
}
.artcls .nazstr4 h2 {
color: var(--art-heading);
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
line-height: 1.25;
margin: 0;
}
/* Типографика внутри статьи (the_content) */
.artcls h1,
.artcls h2,
.artcls h3,
.artcls h4 {
color: var(--art-heading);
font-weight: 700;
line-height: 1.3;
margin-top: 2.25rem;
margin-bottom: 1rem;
}
.artcls h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }
.artcls h4 { font-size: clamp(1.1rem, 2vw, 1.25rem); }
.artcls p {
margin-top: 0;
margin-bottom: 1.5rem;
}
/* Картинки и галереи внутри тела статьи */
.artcls img {
max-width: 100%;
height: auto;
border-radius: calc(var(--art-radius) - 4px);
margin: 1.5rem 0;
}
/* Списки */
.artcls ul,
.artcls ol {
margin-top: 0;
margin-bottom: 1.75rem;
padding-left: 1.5rem;
}
.artcls li {
margin-bottom: 0.5rem;
}
/* Цитаты внутри текста */
.artcls blockquote {
margin: 2rem 0;
padding: 1.25rem 1.75rem;
border-left: 4px solid var(--art-accent);
background-color: #f7fafc;
border-radius: 0 12px 12px 0;
font-style: italic;
color: #4a5568;
}
/* Таблицы внутри статей */
.artcls table {
width: 100%;
border-collapse: collapse;
margin: 2rem 0;
font-size: 0.95rem;
}
.artcls th,
.artcls td {
padding: 0.75rem 1rem;
border: 1px solid #e2e8f0;
text-align: left;
}
.artcls th {
background-color: #edf2f7;
color: var(--art-heading);
font-weight: 600;
}
/* --------------------------------------------------------------------------
Адаптивность для мобильных устройств (планшеты и телефоны)
-------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
:root {
--art-radius: 12px;
}
.artcl111 {
margin-bottom: 1.25rem;
}
.artcl111 .img-nvst {
max-height: 300px;
}
.artcl222 {
padding: 1rem 1.25rem;
font-size: 1.05rem;
margin-bottom: 1.75rem;
}
.artcls {
font-size: 1rem;
}
.artcls .nazstr4 {
margin-bottom: 1.25rem;
}
.artcls table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
}
/* ==========================================================================
Акция
========================================================================== */
/* Переменные темы для быстрой кастомизации */
:root {
--promo-bg: #ffffff;
--promo-text: #2d3748;
--promo-heading: #1a202c;
--promo-radius: 16px;
--promo-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
--promo-gap: 2rem;
--promo-accent: #0085ca;
}
/* Общий контейнер (если блоки идут подряд в родительском элементе) */
.act111,
.act222 {
box-sizing: border-box;
}
/* --------------------------------------------------------------------------
Блок 1: Изображение / Баннер акции (.act111)
-------------------------------------------------------------------------- */
.act111 {
width: 100%;
margin-bottom: var(--promo-gap);
border-radius: var(--promo-radius);
overflow: hidden;
box-shadow: var(--promo-shadow);
background-color: #f7fafc;
position: relative;
}
.act111 .img-nvst {
display: block;
width: 100%;
height: auto;
max-height: 480px;
object-fit: cover;
object-position: center;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.act111:hover .img-nvst {
transform: scale(1.02);
}
/* --------------------------------------------------------------------------
Блок 2: Текстовый контент акции (.act222)
-------------------------------------------------------------------------- */
.act222 {
background: var(--promo-bg);
color: var(--promo-text);
border-radius: var(--promo-radius);
padding: 2.5rem;
box-shadow: var(--promo-shadow);
line-height: 1.7;
font-size: 1.0625rem; /* 17px */
}
/* Типографика внутри контента */
.act222 h1,
.act222 h2,
.act222 h3,
.act222 h4 {
color: var(--promo-heading);
font-weight: 700;
line-height: 1.3;
margin-top: 2rem;
margin-bottom: 1rem;
}
.act222 h1:first-child,
.act222 h2:first-child,
.act222 h3:first-child {
margin-top: 0;
}
.act222 h1 { font-size: clamp(1.75rem, 4vw, 2.25rem); }
.act222 h2 { font-size: clamp(1.5rem, 3vw, 1.875rem); }
.act222 h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }
.act222 p {
margin-top: 0;
margin-bottom: 1.25rem;
}
.act222 p:last-child {
margin-bottom: 0;
}
/* Списки */
.act222 ul,
.act222 ol {
margin-top: 0;
margin-bottom: 1.5rem;
padding-left: 1.25rem;
}
.act222 li {
margin-bottom: 0.5rem;
}
/* Выделение условий / плашек внутри акции */
.act222 blockquote,
.act222 .wp-block-quote {
border-left: 4px solid var(--promo-accent);
background-color: #f8fafc;
margin: 1.5rem 0;
padding: 1rem 1.5rem;
border-radius: 0 8px 8px 0;
font-style: italic;
}
/* Кнопки и ссылки внутри описания */
.act222 a:not([class]) {
color: var(--promo-accent);
text-decoration: underline;
text-underline-offset: 3px;
transition: opacity 0.2s ease;
}
.act222 a:not([class]):hover {
opacity: 0.8;
}
/* --------------------------------------------------------------------------
Адаптивная раскладка для больших экранов (Desktop Grid)
-------------------------------------------------------------------------- */
@media screen and (min-width: 992px) {
/* Если оба блока обернуты в родительский контейнер flex/grid,
они автоматически встанут в двухколоночный вариант */
.promo-page-wrapper {
display: grid;
grid-template-columns: 45% 1fr;
gap: 2.5rem;
align-items: start;
}
.promo-page-wrapper .act111 {
margin-bottom: 0;
position: sticky;
top: 20px;
}
.promo-page-wrapper .act111 .img-nvst {
max-height: 600px;
}
}
/* --------------------------------------------------------------------------
Мобильные устройства
-------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
:root {
--promo-radius: 12px;
--promo-gap: 1.25rem;
}
.act222 {
padding: 1.5rem;
font-size: 1rem;
}
.act111 .img-nvst {
max-height: 320px;
}
}
.mskt-services-grid a, .mrt-grid a, .direction-card a {
text-decoration: none;
}
.content-all-section {
max-width: 1200px;
margin: 80px auto 0 auto;
padding: 0px 40px;
}
@media screen and (max-width: 768px) {
.content-all-section {
max-width: 100%;
margin: 0;
padding: 0;
}
}
/* Прайс */
.price-section {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
max-width: 1200px;
margin: 40px auto 0 auto;
padding: 50px 40px;
}
.price-section h2 {
font-size: 32px;
color: #5B2939;
margin-bottom: 25px;
}
.price-subheading {
font-size: 20px;
margin: 10px;
line-height: 20px;
}
/* Единая карточка услуги (содержит десктопную и мобильную строки) */
.price-card {
margin-bottom: 15px;
}
/* Скрытие элементов для работы кнопки "показать еще" */
.price-card.hidden {
display: none !important;
}
/* 1. Верхний контейнер (Десктопный вид) */
.price-item-desktop {
background-color: #f4f6f9;
border-radius: 12px;
padding: 20px 25px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.price-item-desktop .text {
color: #5B2939;
font-size: 16px;
line-height: 1.4;
max-width: 75%;
}
.price-item-desktop .price {
color: #5B2939;
font-weight: bold;
font-size: 18px;
white-space: nowrap;
}
/* 2. Нижний контейнер (Мобильный вид с кнопкой) */
.price-item-mobile {
background-color: #f4f6f9;
border-radius: 12px;
padding: 20px 25px;
display: flex;
justify-content: space-between;
align-items: center;
}
.price-item-mobile .left-side {
max-width: 70%;
}
.price-item-mobile .text {
color: #8C6B73;
font-size: 13px;
line-height: 1.4;
margin-bottom: 10px;
}
.price-item-mobile .price {
color: #5B2939;
font-weight: bold;
font-size: 16px;
}
.price-item-mobile .btn-order {
background-color: #0a65f7;
color: #FFFFFF;
text-decoration: none;
padding: 12px 30px;
border-radius: 20px;
font-size: 14px;
font-weight: 500;
transition: background-color 0.2s;
}
.price-subgroup {
margin-top: 50px;
}
.price-item-mobile .btn-order:hover {
opacity:0.8;
}
/* Кнопка "Показать еще" */
.show-more-btn {
background: none;
border: none;
color: #8C6B73;
font-size: 14px;
cursor: pointer;
padding: 10px 0;
margin-top: 15px;
text-decoration: none;
border-bottom: 1px dashed #8C6B73;
}
.show-more-btn:hover {
color: #5B2939;
border-bottom-color: #5B2939;
}
/* ==========================================================================
Карточка врача — Раздел Диагностики (Современный стиль)
========================================================================== */
/* Главный контейнер карточки */
.contdg {
max-width: 1200px;
margin: 40px auto 0 auto;
background-color: #f5f6f7;
border-radius: 24px;
padding: 50px 40px;
text-align: left; /* Текст выравниваем по левому краю для читаемости */
display: flex;
flex-wrap: wrap;
gap: 40px;
align-items: flex-start;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
box-sizing: border-box;
}
/* --------------------------------------------------------------------------
Левая колонка (Фотография)
-------------------------------------------------------------------------- */
.contdg1 {
flex: 0 0 320px;
max-width: 320px;
width: 100%;
height: 420px;
position: relative;
overflow: hidden;
border-radius: 16px;
box-shadow: 0 8px 20px rgba(82, 99, 113, 0.2);
background: #ffffff;
}
img.img-contdg {
width: 100% !important;
height: 100% !important;
object-fit: cover;
object-position: top center;
display: block;
}
/* Оверлеи, если используются */
.contdg11, .contdg22 {
position: absolute;
top: 0;
left: 0;
z-index: 99;
width: 100%;
height: 100%;
background: rgba(0, 133, 202, 0.85); /* #0085ca с прозрачностью */
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
text-align: center;
padding: 20px;
box-sizing: border-box;
}
/* --------------------------------------------------------------------------
Правая колонка (Информация о враче)
-------------------------------------------------------------------------- */
.contdg2 {
flex: 1 1 500px;
display: flex;
flex-direction: column;
gap: 16px;
color: #1d1d1d;
}
/* ФИО Врача */
h2.marbot20 {
font-family: "Raleway", sans-serif;
font-variant-numeric: lining-nums proportional-nums;
color: #1d1d1d;
font-size: 38px;
font-weight: 600;
line-height: 1.2;
margin: 0 0 10px 0;
padding: 0;
width: 100%;
}
/* Специальность */
.spec {
font-size: 18px;
font-weight: 500;
color: #0085ca;
padding-bottom: 12px;
margin: 0;
width: 100%;
border-bottom: 1px solid #dcdcdc;
display: flex;
align-items: center;
gap: 8px;
}
.spec i {
color: #0085ca;
}
/* Стаж и Специализация */
.stazh {
font-size: 16px;
color: #585858;
margin: 0;
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 10px;
padding: 4px 0;
}
/* Убираем старые инлайновые float-стили */
.stazh > div {
float: none !important;
width: auto !important;
}
.stazh > div:first-child {
color: #1d1d1d !important;
font-weight: 600;
}
/* Блок "О враче" */
.ocontdg,
.contdg2 > div[style*="float:left"] {
float: none !important;
width: 100% !important;
margin: 15px 0 0 0 !important;
padding: 20px 0 0 0 !important;
font-size: 16px;
line-height: 1.6;
color: #4a4a4a;
border-top: 1px solid #dcdcdc;
}
/* --------------------------------------------------------------------------
Таблицы и списки регалий / сертификатов
-------------------------------------------------------------------------- */
.contdg ul {
text-align: left;
position: relative;
width: 100%;
margin: 15px 0 0 0;
padding-left: 20px;
box-sizing: border-box;
}
.contdg ul li {
width: 100%;
margin: 8px 0;
font-size: 15px;
line-height: 1.5;
color: #4a4a4a;
}
table#contdg {
width: 100%;
background: #ffffff;
border-radius: 8px;
overflow: hidden;
margin-top: 15px;
border-collapse: collapse;
}
table#contdg th {
background: #0085ca;
color: #ffffff;
height: 40px;
padding: 0 15px;
text-align: left;
font-weight: 500;
}
table#contdg td {
height: 36px;
padding: 0 15px;
border-bottom: 1px dashed #d0d0d0;
color: #333;
}
/* Дополнительные блоки фотографий/дипломов (.imgv) */
.imgv {
float: left;
width: 30% !important;
margin: 15px 2% 15px 0;
}
.imgv img {
width: 100%;
border-radius: 10px;
border: 4px solid #ffffff;
box-shadow: 0 4px 12px rgba(82, 99, 113, 0.15);
}
/* --------------------------------------------------------------------------
Адаптивность (Responsive)
-------------------------------------------------------------------------- */
/* Планшеты и ПК с небольшим экраном */
@media screen and (max-width: 1050px) {
.contdg {
padding: 35px 25px;
gap: 25px;
}
.contdg1 {
flex: 0 0 100%;
max-width: 280px;
margin: 0 auto;
height: 360px;
}
.contdg2 {
flex: 0 0 100%;
text-align: left;
}
h2.marbot20 {
font-size: 30px;
line-height: 1.25;
width: 100%;
}
.contdgi h2 {
padding: 6px 12px;
text-align: center;
width: 100%;
box-sizing: border-box;
}
}
/* Мобильные телефоны */
@media screen and (max-width: 720px) {
.contdg {
padding: 30px 16px;
border-radius: 16px;
margin-top: 20px;
}
.contdg1 {
max-width: 100%;
height: 340px;
}
h2.marbot20 {
font-size: 24px;
line-height: 1.3;
}
.spec {
font-size: 16px;
}
.stazh {
flex-direction: column;
gap: 2px;
font-size: 15px;
}
.imgv {
width: 100% !important;
margin: 10px 0;
}
.contdg ul li {
font-size: 14px;
line-height: 1.4;
}
}
/* Кнопка Наверх */
.btn-up {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
border-radius: 50px; /* В стиле ваших кнопок */
background-color: #8cb8ff; /* Ваш фирменный розовый */
color: #fff;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
opacity: 0; /* Изначально скрыта */
visibility: hidden;
z-index: 1001;
box-shadow: 0 4px 15px rgba(245, 189, 199, 0.4);
}
.btn-up.show {
opacity: 1;
visibility: visible;
}
.btn-up:hover {
background-color: #0a65f7; /* Чуть темнее при наведении */
transform: translateY(-5px); /* Легкий прыжок вверх */
}
@media (max-width: 600px) {
.btn-up {
bottom: 20px;
right: 20px;
width: 45px;
height: 45px;
}
}
.formzv_nalozh, .formzv_nalozh2{display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(109, 109, 109, 0.74); text-align: center; z-index:9999;}.formzv_nalozh:after, .formzv_nalozh2:after{display: inline-block; *display: inline; *zoom: 1; height: 100%; width: 0; vertical-align: middle; content: ''}
.formzv {
display: inline-block;
*display: inline;
*zoom: 1;
position: relative;
width: 30%;
max-width: 100%;
margin: 120px 0 0 0;
padding: 0;
vertical-align: middle;
}.formzv_zakr {
position: relative;
z-index: 999;
width: 27px;
float: right;
margin: 5px;
height: 27px;
padding: 8px;
border-radius: 50%;
background: #0a65f7;
text-align: center;
font-size: 12px;
line-height: 12px;
color: #ffffff;
text-decoration: none;
font-weight: 300;
cursor: pointer;
}.formzv_zakr:hover{background: #808080}
@media screen and (min-width: 0px) and (max-width: 1050px) {.formzv{width:100%;}}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Onest', sans-serif;
background-color: #ffffff;
color: #333333;
line-height: 1.5;
padding: 40px 20px;
}
/* МЕНЮ */
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background: rgba(255, 255, 255, 0.95);
padding: 10px 20px;
box-sizing: border-box;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
/* ФИКС ДЛЯ ШИРОКИХ ЭКРАНОВ */
.header-inner {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 15px;
width: 100%;
max-width: 1200px; /* Ограничиваем ширину вровень с promo-section */
margin: 0 auto;    /* Центрируем шапку на широких мониторах */
}
/* Отступ для контента под фиксированной шапкой */
.top-page-wrapper {
margin-top: 100px;
background-color: #fdf0f2;
border-radius: 0 0 60px 60px;
padding-bottom: 70px;
}
/* Стили для активной ссылки (убрали дублирование) */
.nav .nav-link.active,
.nav-link.active {
background: #0a65f7;
color: #fff;
}
.logo {
height: 65px;
display: block;
}
.nav {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
}
.nav-link, .btn-nav {
text-decoration: none;
padding: 10px 30px;
border-radius: 50px;
font-size: 16px;
font-weight: 200;
color: #1a1a1a;
background: #fff;
transition: background 0.2s ease, color 0.2s ease;
}
.btn-blue {
border: 1px solid #0a65f7;
}
.btn-pink {
background: #0a65f7;
}
/* АДАПТИВНОСТЬ */
@media (max-width: 600px) {
.header-inner {
justify-content: center;
}
.nav {
width: 100%;
}
.header {
position: relative;
background: none;
box-shadow: none;
padding: 15px 10px;
transition: none;
}
.nav-link, .btn-nav {
padding: 10px 20px;
}
}
/* Контейнер главного блока */
.promo-section {
max-width: 1200px;
margin:55px auto 0 auto;
background-color: #f5f6f7;
border-radius: 24px;
padding: 60px 40px;
text-align: center;
}
/* Заголовки */
.promo-title {
font-size: 45px;
font-weight: 500;
color: #4a5056;
margin-bottom: 16px;
line-height: 1.2;
}
.promo-subtitle {
font-size:20px;
color: #6c757d;
font-weight: 500;
max-width: 800px;
margin: 0 auto 40px auto;
}
/* Сетка для карточек */
.cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
}
/* Карточка чекапа */
.checkup-card {
background-color: #ffffff;
border-radius: 20px;
padding: 30px 24px;
text-align: left;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.checkup-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
}
.card-category {
font-size: 13px;
color: #8c939a;
margin-bottom: 4px;
}
.card-title {
font-size: 18px;
font-weight: 700;
color: #212529;
margin-bottom: 20px;
}
.card-description {
font-size: 13px;
color: #6c757d;
margin-bottom: 24px;
line-height: 1.4;
flex-grow: 1; /* Чтобы кнопки всегда были на одном уровне */
}
/* Параметры (Цена и Время) */
.card-meta {
display: flex;
gap: 16px;
margin-bottom: 24px;
}
.meta-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
color: #8c939a;
}
.meta-item i {
font-size: 16px;
color: #31a2e3; /* Голубой цвет для иконок */
}
.meta-value {
display: block;
font-size: 13px;
color: #4a5056;
font-weight: 600;
margin-top: 1px;
}
/* Кнопка записи */
.btn-appointment {
display: block;
width: 100%;
background-color: #3cae4e; /* Приятный зеленый цвет */
color: #ffffff;
text-align: center;
padding: 12px 20px;
border-radius: 30px;
text-decoration: none;
font-size: 14px;
font-weight: 600;
border: none;
cursor: pointer;
transition: background-color 0.2s ease;
}
.btn-appointment:hover {
background-color: #339441;
}
/* Адаптивность для мобильных */
@media (max-width: 768px) {
.promo-section {
padding: 40px 20px;
}
.promo-title {
font-size: 28px;
}
.promo-subtitle {
font-size: 16px;
}
}
/* Общие настройки секции */
.values-section {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 50px 20px;
font-family: 'Onest', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.values-container {
background-color: #ffffff;
padding: 20px 0 60px 0; /* Точные отступы как на макете */
}
/* Текстовый центр */
.values-text-block {
max-width: 800px;
margin: 0 auto 75px auto; /* Большой отступ до цифр */
text-align: center;
}
.values-title {
font-size:42px;
font-weight: 500; /* На макете заголовок не жирный, а скорее Medium */
color: #333333;
line-height: 1.25;
letter-spacing: -0.5px;
margin-bottom: 45px;
}
.values-intro {
font-size: 16px;
color: #a3a8ad; /* Мягкий благородный серый */
margin-bottom: 12px;
font-weight: 400;
letter-spacing: -0.2px;
}
/* Список */
.values-list {
list-style: none;
padding: 0;
margin: 0;
display: inline-block;
text-align: left;
}
.values-list li {
font-size: 18px;
line-height: 18px;
margin-bottom: 6px;
position: relative;
padding-left: 18px;
letter-spacing: -0.2px;
}
/* Идеальная точка-маркер */
.values-list li::before {
content: "•";
color: #333333;
font-size: 16px;
position: absolute;
left: 2px;
top: -1px;
}
/* Цвета текста для вредного клиента */
.highlight-dark {
color: #333333;
font-weight: 600; /* Строго выделенные ключевые слова */
}
.text-muted {
color: #a3a8ad;
font-weight: 400;
}
/* Сетка цифр */
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
text-align: center;
max-width: 1050px;
margin: 0 auto;
}
.stat-card {
display: flex;
flex-direction: column;
align-items: center;
border: 2px solid #3cae4e;
padding: 10px;
border-radius: 30px;
}
/* Сами цифры — легкие, большие, без лишней жирности */
.stat-number {
font-size: 64px;
font-weight: 400; /* На макете они тонкие и аккуратные */
color: #333333;
line-height: 1;
margin-bottom: 18px;
letter-spacing: -1.5px;
}
/* Подписи под цифрами */
.stat-label {
font-size: 12px;
color: #555555;
line-height: 1.3;
font-weight: 400;
letter-spacing: -0.1px;
}
/* Адаптив, чтобы сетка не ломалась */
@media (max-width: 992px) {
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 50px 20px;
}
.values-title {
font-size: 28px;
}
}
@media (max-width: 576px) {
.stats-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.values-title {
font-size: 22px;
margin-bottom: 30px;
}
.values-text-block {
margin-bottom: 50px;
}
.stat-number {
font-size: 54px;
margin-bottom: 10px;
}
}
.directions-section {
width: 100%;
max-width: 1200px;
margin: 60px auto;
padding: 0 20px;
font-family: 'Onest', sans-serif;
-webkit-font-smoothing: antialiased;
}
/* Строим идеальную сетку 3х2 */
.directions-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px; /* Расстояние между карточками */
}
/* Первая ячейка с текстом */
.direction-info-block {
display: flex;
flex-direction: column;
justify-content: center;
padding: 10px 30px 10px 0; /* Отступ справа, чтобы текст не прижимался к карточке */
}
.directions-main-title {
font-size: 45px;
font-weight: 500;
color: #333333;
margin-bottom: 24px;
letter-spacing: -0.5px;
}
.directions-main-desc {
font-size: 13px;
line-height: 1.6;
color: #777777;
font-weight: 400;
}
/* Общие стили для всех карточек */
.direction-card {
border-radius: 24px;
padding: 35px 30px;
min-height: 240px;
display: flex;
flex-direction: column;
justify-content: space-between; /* Иконка наверх, контент вниз */
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.direction-card:hover {
transform: translateY(-5px);
}
/* Специфика синей карточки */
.card-blue {
background-color: #0a65f7;
color: #ffffff;
}
.card-blue .card-title {
color: #ffffff;
}
.card-blue .card-desc {
color: rgba(255, 255, 255, 0.85); /* Чуть прозрачный белый текст для описания */
}
.card-blue:hover {
box-shadow: 0 12px 30px rgba(10, 101, 247, 0.25);
}
/* Специфика серой карточки */
.card-gray {
background-color: #f4f6f9;
color: #333333;
}
.card-gray .card-title {
color: #333333;
}
.card-gray .card-desc {
color: #666666;
}
.card-gray:hover {
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04);
}
/* Стили заголовков и описаний внутри карточек */
.card-title {
font-size: 22px;
font-weight: 700;
text-transform: uppercase; /* Перевод в верхний регистр */
margin-bottom: 14px;
letter-spacing: 0.3px;
}
.card-desc {
font-size: 14px;
line-height: 1.4;
font-weight: 400;
}
/* Общие стили для оберток иконок */
.card-icon-wrap {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
margin-bottom: 20px;
}
/* Иконка на синей плашке (светло-синий круг) */
.icon-light-blue {
background-color: rgba(255, 255, 255, 0.25);
color: #ffffff;
}
/* Иконка на серой плашке (насыщенный синий круг) */
.icon-blue {
background-color: #0a65f7;
color: #ffffff;
}
/* Адаптивность «Пиксель-Перфект» */
@media (max-width: 992px) {
.directions-grid {
grid-template-columns: repeat(2, 1fr); /* На планшетах перестраиваем в 2 колонки */
}
.direction-info-block {
grid-column: span 2; /* Главный текст растягивается на всю ширину сверху */
padding-right: 0;
margin-bottom: 10px;
}
}
@media (max-width: 600px) {
.directions-grid {
grid-template-columns: 1fr; /* На мобилках всё в один ряд */
}
.direction-info-block {
grid-column: span 1;
}
.directions-main-title {
font-size: 30px;
}
.direction-card {
min-height: auto; /* На мобильных убираем фиксированную высоту */
gap: 30px; /* Делаем фиксированный отступ между иконкой и текстом */
}
}
.cta-section {
width: 100%;
max-width: 1200px;
margin: 50px auto;
padding: 0 20px;
font-family: 'Onest', sans-serif;
-webkit-font-smoothing: antialiased;
}
.cta-banner {
position: relative;
background-color: #3cae4e; /* Фирменный зелёный цвет клиники */
/* ФИКС: Переписали SVG на концентрические окружности (circle).
Теперь линии идут идеальными параллельными дугами-волнами,
расширяясь из единого центра за пределами правого нижнего угла. */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' preserveAspectRatio='xMaxYMax meet'%3E%3Cg fill='none' stroke='rgba%28255, 255, 255, 0.18%29' stroke-width='3.5'%3E%3Ccircle cx='450' cy='450' r='160'/%3E%3Ccircle cx='450' cy='450' r='200'/%3E%3Ccircle cx='450' cy='450' r='240'/%3E%3Ccircle cx='450' cy='450' r='280'/%3E%3Ccircle cx='450' cy='450' r='320'/%3E%3Ccircle cx='450' cy='450' r='360'/%3E%3Ccircle cx='450' cy='450' r='400'/%3E%3C/g%3E%3C/svg%3E");
/* Масштаб и четкое позиционирование в правом нижнем углу */
background-size: 380px 380px;
background-position: right bottom;
background-repeat: no-repeat;
border-radius: 32px; /* Выраженное скругление углов баннера */
padding: 60px 50px;
color: #ffffff;
overflow: hidden; /* Чтобы фоновые линии не вылезали за скругленные углы */
}
.cta-title {
font-size: 34px;
font-weight: 700;
letter-spacing: 0.5px;
margin-bottom: 20px;
text-transform: uppercase;
}
.cta-text {
font-size: 16px;
line-height: 1.5;
font-weight: 400;
max-width: 650px; /* Ограничиваем ширину, чтобы текст переносился как на макете */
color: rgba(255, 255, 255, 0.95);
margin-bottom: 40px;
}
/* Белая pill-кнопка */
.cta-button {
display: inline-block;
background-color: #ffffff;
color: #3cae4e;
font-size: 18px;
font-weight: 700;
text-decoration: none;
padding: 16px 50px;
border-radius: 40px; /* Полное скругление */
margin-bottom: 45px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.cta-button:hover {
transform: translateY(-2px);
background-color: #f8f9fa;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
/* Дисклеймер внизу */
.cta-disclaimer {
font-size: 12px;
color: rgba(255, 255, 255, 0.75); /* Делаем текст менее ярким */
font-weight: 400;
letter-spacing: -0.1px;
}
.disclaimer-link {
color: rgba(255, 255, 255, 0.75);
text-decoration: underline;
transition: color 0.2s ease;
}
.disclaimer-link:hover {
color: #ffffff;
}
/* Адаптивность для перфекционизма */
@media (max-width: 768px) {
.cta-banner {
padding: 45px 30px;
/* Уменьшаем размер волн для планшетов */
background-size: 280px 280px;
}
.cta-title {
font-size: 26px;
margin-bottom: 15px;
}
.cta-text {
font-size: 14px;
margin-bottom: 30px;
}
.cta-button {
font-size: 16px;
padding: 14px 40px;
margin-bottom: 35px;
}
}
@media (max-width: 480px) {
.cta-banner {
padding: 35px 20px;
text-align: center; /* На мобилках лучше выровнять по центру */
background-image: none; /* Убираем линии на совсем мелких экранах, чтобы не забивать контент */
}
.cta-text {
max-width: 100%;
}
.cta-button {
width: 100%; /* Кнопка на всю ширину экрана на смартфонах */
box-sizing: border-box;
}
}
.advantages-section {
width: 100%;
max-width: 1200px;
margin: 60px auto;
padding: 0 20px;
font-family: 'Onest', sans-serif;
-webkit-font-smoothing: antialiased;
}
/* Флекс-сетка для двух колонок с одинаковым выравниванием по высоте */
.advantages-container {
display: flex;
gap: 48px; /* Выверенный отступ между колонками */
align-items: stretch;
}
/* Левая колонка */
.advantages-left {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding-top: 10px;
}
.adv-main-title {
font-size: 45px;
font-weight: 500;
color: #333333;
margin-bottom: 40px;
letter-spacing: -0.5px;
}
.adv-item {
margin-bottom: 35px;
}
.adv-item:last-child {
margin-bottom: 0;
}
.adv-sub-title {
font-size: 22px;
font-weight: 600;
color: #333333;
margin-bottom: 16px;
line-height: 1.3;
letter-spacing: -0.2px;
}
.adv-text {
font-size: 13px;
line-height: 1.6;
color: #555555;
font-weight: 400;
}
/* Правая колонка — закругленная карточка */
.advantages-right-card {
flex: 1;
background-color: #f4f6f9; /* Идеальный тон серого как на макете */
border-radius: 24px;
padding: 50px 45px;
display: flex;
flex-direction: column;
}
.comfort-title {
font-size: 34px;
font-weight: 500;
color: #333333;
margin-bottom: 30px;
line-height: 1.2;
letter-spacing: -0.5px;
}
.comfort-content {
display: flex;
flex-direction: column;
gap: 20px; /* Фиксированный отступ между абзацами */
}
.comfort-text {
font-size: 13px;
line-height: 1.6;
color: #555555;
font-weight: 400;
}
.comfort-text strong {
color: #333333;
font-weight: 600;
}
/* Мощный адаптив для вредного клиента, чтобы ничего не поехало */
@media (max-width: 992px) {
.advantages-container {
flex-direction: column; /* Перестраиваем в один столбец на планшетах */
gap: 40px;
}
.advantages-right-card {
padding: 40px 30px;
}
.adv-main-title, .comfort-title {
font-size: 30px;
margin-bottom: 25px;
}
.adv-sub-title {
font-size: 20px;
}
}
@media (max-width: 576px) {
.advantages-right-card {
padding: 30px 20px;
border-radius: 20px;
}
.adv-main-title, .comfort-title {
font-size: 26px;
}
.adv-sub-title {
font-size: 18px;
}
}
.doctors-section {
width: 100%;
max-width: 1200px;
margin: 60px auto;
padding: 0 20px;
font-family: 'Onest', sans-serif;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
}
/* Шапка блока для выравнивания заголовка и стрелок */
.doctors-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 45px;
}
.doctors-main-title {
font-size: 45px;
font-weight: 500;
color: #333333;
margin-bottom: 0; /* Обнулили внешний отступ, так как теперь есть флекс-контейнер */
letter-spacing: -0.5px;
}
/* Кнопки навигации карусели */
.carousel-controls {
display: flex;
gap: 12px;
}
.carousel-btn {
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid #eef1f5;
background-color: #ffffff;
color: #333333;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
transition: all 0.2s ease;
}
.carousel-btn:hover {
background-color: #0a65f7;
color: #ffffff;
border-color: #0a65f7;
}
/* Обертка скрывает вылезающие за границы экрана элементы */
.carousel-wrapper {
overflow: hidden;
width: 100%;
padding: 10px 0; /* Небольшой отступ, чтобы тень при ховере не резалась */
margin: -10px 0;
}
/* Переделываем сетку под карусель с плавной прокруткой */
.doctors-grid {
display: flex; /* Вместо grid используем flex для выстраивания в линию */
gap: 20px;
overflow-x: auto; /* Включаем горизонтальный скролл */
scroll-behavior: smooth; /* Плавный скролл при клике на стрелки */
/* Эффект snap-скролла для мобилок (карточка «магнитится» к экрану) */
scroll-snap-type: x mandatory;
scrollbar-width: none; /* Скрываем стандартный скроллбар в Firefox */
}
/* Скрываем скроллбар в Chrome, Safari и Edge */
.doctors-grid::-webkit-scrollbar {
display: none;
}
/* Базовый стиль карточки */
.doctor-card {
flex: 0 0 calc(25% - 15px); /* Ровно 4 карточки в ряд с учетом gap */
scroll-snap-align: start; /* Точка фиксации скролла */
background-color: #ffffff;
border: 1px solid #eef1f5; /* Едва заметная тонкая рамка */
border-radius: 28px;
padding: 35px 25px;
display: flex;
flex-direction: column;
align-items: flex-start; /* Все тексты выровнены по левому краю */
min-height: 380px; /* Фиксируем минимальную высоту для симметрии */
box-sizing: border-box;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
/* Специфический фон для выделенной карточки (вторая на макете) */
.card-highlighted {
background-color: #f4f6f9;
border-color: transparent; /* Убираем рамку, так как есть фон */
}
.doctor-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
}
/* Контейнер для круглого фото */
.doc-avatar-wrap {
width: 130px;
height: 130px;
border-radius: 50%;
overflow: hidden;
margin-bottom: 30px;
align-self: center; /* Фото центрируем внутри карточки */
background-color: #f4f6f9; /* Подложка на случай, если фото на прозрачном фоне */
/* ФИКС: Делаем флекс-контейнером, чтобы легче позиционировать картинку */
display: flex;
align-items: flex-end; /* Опускаем фото к нижнему краю круга */
justify-content: center;
position: relative;
}
/* Чтобы на белой карточке серая подложка аватара смотрелась чисто */
.card-highlighted .doc-avatar-wrap {
background-color: #ffffff;
}
/* ФИКС ИЗОБРАЖЕНИЯ: убираем жесткий cover, мешающий отображению вертикальных портретов */
.doc-img {
width: 100%;
height: 85%; /* Слегка увеличиваем высоту, чтобы скомпенсировать прозрачные поля Photoroom */
object-fit: contain; /* Картинка масштабируется без обрезания лица */
object-position: bottom center; /* Позиционируем по нижнему краю */
transform: scale(1.18); /* Аккуратно увеличиваем масштаб лица внутри круга */
transform-origin: bottom center; /* Увеличение идет от нижней точки */
}
/* Блок с именами */
.doc-info {
margin-bottom: 20px;
width: 100%;
}
.doc-surname {
font-size: 20px;
font-weight: 700;
color: #333333;
margin-bottom: 4px;
line-height: 1.2;
}
.doc-name {
font-size: 18px;
font-weight: 400;
color: #555555;
margin-bottom: 16px;
line-height: 1.2;
}
.doc-position {
font-size: 12px;
color: #9aa1a7;
font-weight: 500;
text-transform: capitalize;
}
/* Стаж всегда прижат к низу карточки */
.doc-experience {
margin-top: auto; /* Магия флексбокса: толкает элемент в самый низ */
font-size: 14px;
font-weight: 600;
color: #333333;
padding-top: 10px;
}
/* Адаптив под любые экраны */
@media (max-width: 1100px) {
.doctor-card {
flex: 0 0 calc(50% - 10px); /* 2 карточки на экране */
}
}
@media (max-width: 600px) {
.doctors-header {
margin-bottom: 30px;
}
.doctors-main-title {
font-size: 28px;
}
/* На мобильных прячем стрелочки, так как там удобнее листать пальцем (свайпом) */
.carousel-controls {
display: none;
}
.doctor-card {
flex: 0 0 calc(100% - 20px); /* 1 карточка во всю ширину экрана на мобилке */
min-height: auto; /* Пускай тянутся по контенту */
}
}
.articles-section {
width: 100%;
max-width: 1200px;
margin: 60px auto;
padding: 0 20px;
font-family: 'Onest', sans-serif;
-webkit-font-smoothing: antialiased;
}
.articles-main-title {
font-size: 45px;
font-weight: 500;
color: #333333;
margin-bottom: 45px;
letter-spacing: -0.5px;
}
/* Сетка 3 колонки */
.articles-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px; /* Единый отступ для гармонии с блоком Направлений */
}
/* Базовая структура карточки статьи */
.article-card {
border-radius: 32px; /* Повышенное скругление, как на макете */
padding: 40px 35px;
min-height: 250px;
display: flex;
flex-direction: column;
justify-content: space-between; /* Текст наверх, ссылку вниз */
box-sizing: border-box;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.article-card:hover {
transform: translateY(-5px);
}
/* Стили для серого варианта */
.card-gray {
background-color: #f4f6f9;
}
.card-gray .article-title {
color: #333333;
}
.card-gray .article-excerpt {
color: #666666;
}
.card-gray .article-link {
color: #333333;
}
.card-gray:hover {
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04);
}
/* Стили для синего варианта */
.card-blue {
background-color: #0a65f7;
}
.card-blue .article-title {
color: #ffffff;
}
.card-blue .article-excerpt {
color: rgba(255, 255, 255, 0.85);
}
.card-blue .article-link {
color: #ffffff;
}
.card-blue:hover {
box-shadow: 0 12px 30px rgba(10, 101, 247, 0.25);
}
/* Внутренняя типографика */
.article-title {
font-size: 26px;
font-weight: 600;
margin-bottom: 14px;
letter-spacing: -0.3px;
line-height: 1.2;
}
.article-excerpt {
font-size: 14px;
line-height: 1.5;
font-weight: 400;
}
/* Ссылка «читать» */
.article-link {
font-size: 14px;
font-weight: 500;
text-decoration: underline;
align-self: flex-start; /* Чтобы подчеркивание было только по длине слова */
margin-top: 25px; /* Минимальный отступ сверху, если текст разрастется */
transition: opacity 0.2s ease;
}
.article-link:hover {
opacity: 0.8;
}
/* Адаптивная сетка под планшеты и мобильные */
@media (max-width: 992px) {
.articles-grid {
grid-template-columns: repeat(2, 1fr); /* 2 колонки на средних экранах */
}
}
@media (max-width: 600px) {
.articles-grid {
grid-template-columns: 1fr; /* 1 колонка на смартфонах */
gap: 20px;
}
.article-card {
min-height: auto;
padding: 30px 25px;
}
.articles-main-title {
font-size: 28px;
margin-bottom: 30px;
}
.article-title {
font-size: 22px;
}
}
.main-footer {
width: 100%;
max-width: 1200px;
margin: 60px auto 0 auto;
padding: 0 20px;
font-family: 'Onest', sans-serif;
-webkit-font-smoothing: antialiased;
}
.footer-container {
background-color: #f4f6f9; /* Светло-серый фон плашки как на макете */
border-radius: 32px 32px 0 0; /* Скругление только верхних углов */
padding: 60px 50px 40px 50px;
box-sizing: border-box;
}
/* Сетка из 4 колонок */
.footer-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
align-items: flex-start;
}
/* Заголовки колонок */
.footer-col-title {
font-size: 20px;
font-weight: 700;
color: #000000;
margin-bottom: 25px;
display: flex;
align-items: center;
gap: 10px;
}
/* Обертка для маленьких зеленых иконок */
.footer-icon-wrap {
color: #3cae4e; /* Фирменный зеленый цвет иконок */
font-size: 18px;
display: inline-flex;
align-items: center;
}
/* Текст в колонке О нас */
.footer-about-text {
font-size: 14px;
line-height: 1.5;
color: #333333;
font-weight: 500;
}
/* Списки в контактах, ссылках и графике */
.footer-contacts-list,
.footer-menu-links,
.footer-schedule {
list-style: none;
padding: 0;
margin: 0;
}
/* Элементы контактов с микро-иконками */
.footer-contacts-list li {
font-size: 14px;
line-height: 1.4;
color: #333333;
margin-bottom: 18px;
display: flex;
gap: 10px;
align-items: flex-start;
}
.contact-icon {
color: #3cae4e;
font-size: 14px;
margin-top: 2px;
display: inline-block;
visibility: hidden; /* Скрываем дублирующие иконки перед строками, если на макете они не везде нужны */
}
/* Показываем иконку телефона и почты, если потребуется */
.footer-contacts-list li:nth-child(2) .contact-icon,
.footer-contacts-list li:nth-child(3) .contact-icon {
visibility: visible;
}
/* Ссылки */
.footer-link {
color: #333333;
text-decoration: none;
}
.footer-link-bold {
color: #000000;
text-decoration: none;
font-weight: 700;
}
.footer-menu-links li {
margin-bottom: 12px;
}
.footer-menu-link {
font-size: 16px;
color: #333333;
font-weight: 500;
text-decoration: underline; /* Ссылки подчеркнуты как на макете */
transition: color 0.2s ease;
}
.footer-menu-link:hover, .footer-link:hover {
color: #3cae4e;
}
/* График работы */
.footer-schedule li {
font-size: 14px;
line-height: 1.6;
color: #333333;
margin-bottom: 8px;
}
.footer-schedule li strong {
font-weight: 600;
display: inline-block;
width: 55px; /* Выравнивает время по одной вертикальной линии */
}
/* Линия-разделитель */
.footer-divider {
border: 0;
height: 1px;
background-color: #e2e6eb;
margin: 40px 0 30px 0;
}
/* Юридический блок в самом низу */
.footer-legal-block {
width: 100%;
}
.legal-warning {
font-size: 11px;
font-weight: 600;
color: #777777;
margin-bottom: 15px;
}
.legal-text {
font-size: 10px;
line-height: 1.6;
color: #9aa1a7; /* Очень мелкий приглушенный серый текст */
font-weight: 400;
text-align: left;
}
/* Адаптивность для идеального отображения на планшетах и мобильных */
@media (max-width: 992px) {
.footer-grid {
grid-template-columns: repeat(2, 1fr); /* На планшетах в 2 колонки */
gap: 40px;
}
.footer-container {
padding: 40px 30px;
}
}
@media (max-width: 576px) {
.footer-grid {
grid-template-columns: 1fr; /* На мобилках все колонки в один ряд */
gap: 30px;
}
.footer-container {
padding: 35px 20px;
border-radius: 24px 24px 0 0;
}
.footer-col-title {
margin-bottom: 15px;
}
.footer-divider {
margin: 30px 0 20px 0;
}
}
/* Основные контейнеры и общая сетка */
.content-section {
width: 100%;
background-color: #ffffff;
padding: 0 0 60px 0;
font-family: 'Onest', sans-serif;
-webkit-font-smoothing: antialiased;
color: #333333;
}
/* Выравнивание строго по сетке с шапкой (max-width: 1200px) */
.content-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
/* Главный заголовок H1 */
.content-main-title {
font-size: 45px;
font-weight: 500;
color: #2c3e50; /* Глубокий темный оттенок */
margin: 0 0 35px 18px;
line-height: 1.2;
letter-spacing: -0.5px;
}
/* Вводный абзац */
.content-lead-block {
margin-bottom: 40px;
}
.content-subtitle {
font-size: 16px;
font-weight: 600;
color: #555555;
margin: 0 0 12px 0;
}
.content-paragraph {
font-size: 16px;
line-height: 1.6;
font-weight: 400;
color: #555555;
margin: 0;
max-width: 1080px; /* Чтобы строки не растягивались слишком широко на 4К мониторах */
}
/* Заголовок списка H2 */
.content-list-title {
font-size: 18px;
font-weight: 700;
color: #2c3e50;
margin: 0 0 25px 0;
letter-spacing: -0.2px;
}
/* Стилизация маркированного списка */
.content-list {
list-style: none; /* Отключаем стандартные маркеры */
padding: 0;
margin: 0;
max-width: 1000px;
}
.content-list li {
position: relative;
font-size: 15px;
line-height: 1.6;
color: #555555;
padding-left: 24px; /* Место под кастомный маркер */
margin-bottom: 12px;
}
.content-list li strong {
color: #2c3e50;
font-weight: 600;
}
/* Кастомные точки (маркеры) фирменного синего цвета клиники */
.content-list li::before {
content: "";
position: absolute;
left: 6px;
top: 10px; /* Центрируем точку по вертикали относительно первой строки */
width: 5px;
height: 5px;
background-color: #0a65f7; /* Наш фирменный синий акцент */
border-radius: 50%;
}
/* Последний элемент списка без нижнего отступа */
.content-list li:last-child {
margin-bottom: 0;
}
/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
.content-section {
padding: 40px 0;
}
.content-main-title {
font-size: 32px;
margin-bottom: 25px;
}
.content-paragraph {
font-size: 15px;
line-height: 1.5;
}
.content-list li {
font-size: 14px;
margin-bottom: 10px;
padding-left: 20px;
}
.content-list li::before {
left: 4px;
top: 8px;
}
}
@media (max-width: 480px) {
.content-main-title {
font-size: 26px;
}
.content-list-title {
font-size: 16px;
}
}
/* Основные контейнеры */
.mrt-types-section {
width: 100%;
background-color: #ffffff;
padding: 40px 0 60px 0;
font-family: 'Onest', sans-serif;
-webkit-font-smoothing: antialiased;
}
.mrt-types-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
/* Сетка карточек: 3 колонки */
.mrt-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}
/* Общие стили для карточки */
.mrt-card {
border-radius: 28px;
padding: 35px 30px;
display: flex;
flex-direction: column;
align-items: flex-start;
box-sizing: border-box;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.mrt-card:hover {
transform: translateY(-4px);
}
/* Скругленный контейнер под иконку */
.mrt-icon-wrap {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
}
.mrt-icon-wrap svg {
width: 22px;
height: 22px;
}
.mrt-card-title {
font-size: 20px;
font-weight: 700;
line-height: 1.3;
margin: 0 0 15px 0;
}
.mrt-card-text {
font-size: 13.5px;
line-height: 1.5;
margin: 0;
font-weight: 500;
}
/* Стиль 1: Светлая карточка */
.card-light {
background-color: #f4f6fa; /* Нежно-серый фон */
}
.card-light .mrt-icon-wrap {
background-color: #0a65f7; /* Синий круг */
color: #ffffff;
}
.card-light .mrt-card-title {
color: #1a1a1a;
}
.card-light .mrt-card-text {
color: #555555;
}
.card-light:hover {
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
}
/* Стиль 2: Синяя карточка */
.card-blue {
background-color: #0a65f7; /* Глубокий синий */
}
.card-blue .mrt-icon-wrap {
background-color: #ffffff; /* Белый круг */
color: #0a65f7;
}
.card-blue .mrt-card-title {
color: #ffffff;
}
.card-blue .mrt-card-text {
color: rgba(255, 255, 255, 0.85); /* Полупрозрачный текст для лучшей читаемости */
}
.card-blue:hover {
box-shadow: 0 8px 30px rgba(10, 101, 247, 0.25);
}
/* Адаптивность */
@media (max-width: 1024px) {
.mrt-grid {
grid-template-columns: repeat(2, 1fr); /* На планшетах перестраиваем в 2 колонки */
gap: 20px;
}
}
@media (max-width: 768px) {
.mrt-card {
padding: 30px 25px;
}
.mrt-card-title {
font-size: 18px;
}
}
@media (max-width: 600px) {
.mrt-grid {
grid-template-columns: 1fr; /* На смартфонах карточки идут в 1 колонку */
gap: 15px;
}
.mrt-types-section {
padding: 30px 0;
}
}
/* Общие стили секции */
.mrt-research-section {
width: 100%;
background-color: #ffffff;
padding: 60px 0;
font-family: 'Onest', sans-serif;
-webkit-font-smoothing: antialiased;
color: #333333;
}
.mrt-research-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
/* Главный заголовок блока */
.mrt-research-main-title {
font-size: 45px;
font-weight: 500;
color: #2c3e50;
margin: 0 0 45px 0;
line-height: 1.2;
letter-spacing: -0.5px;
}
.mrt-research-main-title .text-green {
color: #39b54a; /* Фирменный зеленый цвет */
}
/* Флекс-контейнер для разделения на две колонки */
.mrt-research-flex {
display: flex;
gap: 50px;
align-items: flex-start;
}
/* ЛЕВАЯ ЧАСТЬ: Сетка из карточек преимуществ */
.mrt-features-grid {
flex: 1;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
max-width: 580px;
min-width: 480px;
}
/* Стили карточек преимуществ */
.mrt-feature-card {
background-color: #f4f6fa;
border-radius: 20px;
padding: 25px 15px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
box-sizing: border-box;
min-height: 190px;
transition: transform 0.2s ease;
}
.mrt-feature-card:hover {
transform: translateY(-3px);
}
/* Зеленый круг под иконку */
.feature-icon-wrap {
width: 48px;
height: 48px;
background-color: #39b54a;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
color: #ffffff;
}
.feature-icon-wrap svg {
width: 24px;
height: 24px;
}
.feature-card-title {
font-size: 16px;
font-weight: 700;
color: #2c3e50;
margin: 0 0 8px 0;
line-height: 1.2;
}
.feature-card-text {
font-size: 11px;
line-height: 1.4;
color: #666666;
margin: 0;
font-weight: 500;
}
/* ПРАВАЯ ЧАСТЬ: Информационный контент */
.mrt-info-content {
flex: 1.1;
}
.mrt-info-title {
font-size: 45px;
font-weight: 500;
color: #2c3e50;
margin: 0 0 20px 0;
letter-spacing: -0.5px;
}
.mrt-info-lead {
font-size: 14px;
line-height: 1.6;
font-weight: 500;
color: #555555;
margin: 0 0 15px 0;
}
/* Маркированный список */
.mrt-info-list {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
}
.mrt-info-list li {
position: relative;
font-size: 14px;
line-height: 1.6;
color: #555555;
padding-left: 18px;
margin-bottom: 8px;
font-weight: 400;
}
/* Маленькие аккуратные точки-маркеры */
.mrt-info-list li::before {
content: "";
position: absolute;
left: 6px;
top: 9px;
width: 4px;
height: 4px;
background-color: #555555;
border-radius: 50%;
}
.mrt-info-paragraph {
font-size: 14px;
line-height: 1.6;
color: #555555;
margin: 0 0 20px 0;
font-weight: 400;
}
.mrt-info-paragraph:last-child {
margin-bottom: 0;
}
/* ================= АДАПТИВНОСТЬ ================= */
@media (max-width: 1024px) {
.mrt-research-flex {
flex-direction: column-reverse; /* На планшетах сначала идет подробный текст, затем иконки */
gap: 40px;
}
.mrt-features-grid {
max-width: 100%;
min-width: 100%;
}
}
@media (max-width: 768px) {
.mrt-research-section {
padding: 40px 0;
}
.mrt-research-main-title {
font-size: 30px;
margin-bottom: 30px;
}
.mrt-info-title {
font-size: 28px;
}
.mrt-features-grid {
grid-template-columns: repeat(2, 1fr); /* 2 колонки на экранах поменьше */
}
}
@media (max-width: 480px) {
.mrt-research-main-title {
font-size: 24px;
}
.mrt-info-title {
font-size: 22px;
}
.mrt-features-grid {
grid-template-columns: 1fr; /* 1 колонка на мобильных */
gap: 12px;
}
.mrt-feature-card {
min-height: auto;
padding: 20px 15px;
}
}
/* Секция-обертка */
.mrt-service-banner-section {
width: 100%;
background-color: #ffffff;
box-sizing: border-box;
}
/* Строгий контейнер по сетке сайта */
.mrt-service-container {
max-width: 1200px;
margin: 50px auto;
padding: 0 20px;
box-sizing: border-box;
font-family: 'Onest', sans-serif;
-webkit-font-smoothing: antialiased;
}
/* Основная плашка баннера */
.mrt-service-card {
background-color: #f4f6fa;
border-radius: 32px; /* Закругление углов карточки */
display: flex;
align-items: center;
justify-content: space-between;
padding: 45px 50px; /* Сбалансированные внутренние поля */
gap: 50px;
box-sizing: border-box;
width: 100%;
}
/* Левая текстовая колонка */
.mrt-service-info {
flex: 1; /* Равное распределение */
min-width: 320px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* Бейдж сверху */
.mrt-service-badge {
font-size: 13px;
font-weight: 500;
color: #7d8790;
background-color: transparent;
border: 1px solid #c9d2db;
padding: 7px 18px;
border-radius: 100px;
margin-bottom: 35px;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
/* Заголовок направления */
.mrt-service-title {
font-size: 42px;
font-weight: 700;
color: #3a3f45;
line-height: 1.15;
margin: 0 0 24px 0;
letter-spacing: -0.5px;
}
/* Текст описания */
.mrt-service-desc {
font-size: 13px;
line-height: 1.55;
color: #727a82;
margin: 0;
font-weight: 400;
}
/* Правая колонка под картинку */
.mrt-service-image-wrap {
flex: 1; /* Картинка занимает ровно половину пространства */
display: flex;
justify-content: flex-end;
align-items: center;
}
/* Картинка с точными пропорциями по макету */
.mrt-service-img {
width: 100%;
max-width: 520px; /* Ограничиваем максимальную ширину */
height: auto;
aspect-ratio: 1.37 / 1; /* Пропорция широкого экрана со скриншота (примерно 520px на 380px) */
object-fit: cover;
border-radius: 20px; /* Скругление картинки */
display: block;
}
/* ================= АДАПТИВНОСТЬ ================= */
@media (max-width: 1024px) {
.mrt-service-card {
padding: 35px 40px;
gap: 30px;
}
.mrt-service-title {
font-size: 34px;
}
}
@media (max-width: 768px) {
.mrt-service-card {
flex-direction: column; /* Элементы выстраиваются вертикально */
padding: 35px 25px;
gap: 30px;
}
.mrt-service-info {
min-width: 100%;
}
.mrt-service-badge {
margin-bottom: 20px;
}
.mrt-service-title {
font-size: 28px;
margin-bottom: 16px;
}
.mrt-service-image-wrap {
width: 100%;
justify-content: center;
}
.mrt-service-img {
max-width: 100%;
aspect-ratio: auto; /* На телефонах даем картинке адаптироваться естественно */
}
}
@media (max-width: 480px) {
.mrt-service-card {
border-radius: 24px;
padding: 25px 20px;
}
.mrt-service-title {
font-size: 24px;
}
.mrt-service-desc {
font-size: 12px;
}
}
/* Секция-обертка */
.mrt-details-section {
width: 100%;
background-color: #ffffff;
box-sizing: border-box;
}
/* Строгий контейнер по сетке сайта */
.mrt-details-container {
max-width: 1200px;
margin: 50px auto;
padding: 0 20px;
box-sizing: border-box;
font-family: 'Onest', sans-serif;
-webkit-font-smoothing: antialiased;
}
/* Сетка из двух колонок с точным распределением пространства */
.mrt-details-grid {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 110px; /* Фирменный зазор между колонками */
align-items: start;
}
/* Структура колонки */
.mrt-details-col {
display: flex;
flex-direction: column;
}
/* Заголовки со строго заданной насыщенностью 500 */
.mrt-details-title {
font-size: 44px;
line-height: 1.15;
font-weight: 500;
margin: 0 0 45px 0;
letter-spacing: -0.6px;
}
/* Главное слово в заголовке — теперь встроенное в строку */
.mrt-details-title .text-blue {
color: #0a65f7;
display: inline; /* Изменено с block на inline для одной строки */
}
/* Дополнительный текст заголовка */
.mrt-details-title .text-dark {
color: #3e4348;
display: inline; /* Изменено на inline для бесшовного стыка */
}
/* Текстовое содержимое колонок */
.mrt-details-content {
display: flex;
flex-direction: column;
}
/* Подзаголовок списка патологий */
.mrt-details-subtitle {
font-size: 15px; /* Увеличено для баланса */
font-weight: 400;
color: #555c62;
margin: 0 0 22px 0;
letter-spacing: -0.1px;
}
/* Список патологий */
.mrt-details-list {
list-style: none;
padding: 0;
margin: 0;
}
.mrt-details-list li {
font-size: 15px; /* Увеличено с 13.5px */
line-height: 14px;
color: #555c62;
position: relative;
padding-left: 18px;
margin-bottom: 12px;
font-weight: 400;
}
/* Аккуратные маркеры (точки) списка */
.mrt-details-list li::before {
content: "•";
color: #555c62;
font-size: 12px;
position: absolute;
left: 4px;
top: 0px;
}
.mrt-details-list li:last-child {
margin-bottom: 0;
}
/* Текст в правой колонке */
.mrt-details-paragraph {
font-size: 15px; /* Увеличено с 13.5px */
line-height: 1.6;
color: #555c62;
margin: 0;
font-weight: 400;
}
/* ================= АДАПТИВНОСТЬ ================= */
@media (max-width: 1024px) {
.mrt-details-grid {
grid-template-columns: 1fr 1fr;
gap: 50px;
}
.mrt-details-title {
font-size: 36px;
margin-bottom: 35px;
}
/* Снимаем жесткие переносы на планшетах для гибкости */
.mrt-details-title br,
.mrt-details-list li br,
.mrt-details-paragraph br {
display: none;
}
}
@media (max-width: 768px) {
.mrt-details-grid {
grid-template-columns: 1fr;
gap: 45px;
}
.mrt-details-title {
font-size: 32px;
margin-bottom: 25px;
}
.mrt-details-title .text-blue {
margin-right: 8px;
}
}
@media (max-width: 480px) {
.mrt-details-container {
margin: 30px auto;
}
.mrt-details-title {
font-size: 28px;
}
.mrt-details-paragraph,
.mrt-details-list li {
font-size: 14px;
}
}
/* Секция-обертка */
.mrt-how-section {
width: 100%;
background-color: #ffffff;
box-sizing: border-box;
}
/* Жесткий контейнер по вашему стандарту */
.mrt-how-container {
max-width: 1200px;
margin: 50px auto;
padding: 0 20px;
box-sizing: border-box;
font-family: 'Onest', sans-serif;
-webkit-font-smoothing: antialiased;
}
/* Заголовок: синий и темный текст на одной строке */
.mrt-how-title {
font-size: 44px;
line-height: 1.2;
font-weight: 500; /* Насыщенность 500 */
color: #3e4348;
margin: 0 0 45px 0;
letter-spacing: -0.6px;
}
/* Синяя часть на той же строке */
.mrt-how-title .text-blue {
color: #0a65f7;
}
.mrt-how-title .text-dark {
color: #3e4348;
}
/* Сетка карточек */
.mrt-how-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px; /* Аккуратный зазор между колонками */
}
/* Стили отдельной карточки */
.mrt-how-card {
background-color: #f4f6fa;
border-radius: 24px;
padding: 40px 24px 35px 24px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* Легкий интерактив при наведении */
.mrt-how-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 25px rgba(10, 101, 247, 0.05);
}
/* Контейнер для иконки */
.mrt-how-icon-wrap {
width: 64px;
height: 64px;
margin-bottom: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.mrt-how-icon {
width: 100%;
height: 100%;
display: block;
}
/* Заголовок внутри карточки */
.mrt-how-card-title {
font-size: 20px;
font-weight: 500;
color: #3e4348;
margin: 0 0 10px 0;
line-height: 1.25;
}
/* Описание внутри карточки */
.mrt-how-card-desc {
font-size: 13px;
line-height: 1.45;
color: #727a82;
margin: 0;
font-weight: 400;
max-width: 190px; /* Чтобы текст аккуратно складывался в две-три строки */
}
/* ================= АДАПТИВНОСТЬ ================= */
@media (max-width: 1024px) {
.mrt-how-grid {
grid-template-columns: repeat(2, 1fr); /* 2х2 на планшетах */
gap: 20px;
}
.mrt-how-title {
font-size: 36px;
}
}
@media (max-width: 768px) {
.mrt-how-title {
font-size: 30px;
margin-bottom: 30px;
}
.mrt-how-title br {
display: none; /* Убираем жесткий перенос на средних экранах */
}
}
@media (max-width: 540px) {
.mrt-how-grid {
grid-template-columns: 1fr; /* В одну колонку на мобильных */
gap: 16px;
}
.mrt-how-card {
padding: 30px 20px;
}
.mrt-how-title {
font-size: 26px;
}
}
/* Секция-обертка */
.mrt-prep-section {
width: 100%;
background-color: #ffffff;
box-sizing: border-box;
}
/* Контейнер */
.mrt-prep-container {
max-width: 1200px;
margin: 50px auto;
padding: 0 20px;
box-sizing: border-box;
font-family: 'Onest', sans-serif;
-webkit-font-smoothing: antialiased;
}
/* Сетка из двух колонок */
.mrt-prep-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 110px;
align-items: start;
}
.mrt-prep-col {
display: flex;
flex-direction: column;
}
/* Заголовки (насыщенность 500) */
.mrt-prep-title {
font-size: 44px;
line-height: 1.15;
font-weight: 500;
margin: 0 0 45px 0;
letter-spacing: -0.6px;
min-height: 101px; /* Высота для выравнивания начала списков */
}
/* Подготовка — синяя */
.mrt-prep-title .text-blue {
color: #0a65f7;
}
/* к исследованию — тёмные */
.mrt-prep-title .text-dark {
color: #3e4348;
}
.mrt-prep-title .text-dark-only {
color: #3e4348;
}
.mrt-prep-content {
display: flex;
flex-direction: column;
}
/* Основной список (текст сделан крупнее — 15px) */
.mrt-prep-list {
list-style: none;
padding: 0;
margin: 0;
}
.mrt-prep-list > li {
font-size: 15px; /* Увеличено для лучшей читаемости */
line-height: 1.6;
color: #555c62;
position: relative;
padding-left: 18px;
margin-bottom: 14px;
font-weight: 400;
}
/* Маркеры (точки) */
.mrt-prep-list > li::before {
content: "•";
color: #555c62;
font-size: 12px;
position: absolute;
left: 4px;
top: 0px;
}
.mrt-prep-list > li:last-child {
margin-bottom: 0;
}
/* Вложенный список (текст сделан крупнее — 15px) */
.mrt-prep-sublist {
list-style: none;
padding: 0;
margin: 14px 0 0 0;
}
.mrt-prep-sublist > li {
font-size: 15px; /* Увеличено для лучшей читаемости */
line-height: 1.6;
color: #555c62;
position: relative;
padding-left: 18px;
margin-bottom: 14px;
font-weight: 400;
}
.mrt-prep-sublist > li::before {
content: "•";
color: #555c62;
font-size: 12px;
position: absolute;
left: 4px;
top: 0px;
}
.mrt-prep-sublist > li:last-child {
margin-bottom: 0;
}
/* ================= АДАПТИВНОСТЬ ================= */
@media (max-width: 1024px) {
.mrt-prep-grid {
grid-template-columns: 1fr 1fr;
gap: 50px;
}
.mrt-prep-title {
font-size: 36px;
margin-bottom: 35px;
min-height: auto;
}
/* Снимаем жесткие переносы на планшетах */
.mrt-prep-list br,
.mrt-prep-sublist br {
display: none;
}
}
@media (max-width: 768px) {
.mrt-prep-grid {
grid-template-columns: 1fr;
gap: 45px;
}
.mrt-prep-title {
font-size: 32px;
margin-bottom: 25px;
min-height: auto;
}
}
@media (max-width: 480px) {
.mrt-prep-container {
margin: 30px auto;
}
.mrt-prep-title {
font-size: 28px;
}
.mrt-prep-list > li,
.mrt-prep-sublist > li {
font-size: 14px;
}
}
/* Секция-обертка */
.mskt-about-section {
width: 100%;
background-color: #ffffff;
box-sizing: border-box;
}
/* Строгий контейнер по вашей сетке */
.mskt-about-container {
max-width: 1200px;
margin: 50px auto;
padding: 0 20px;
box-sizing: border-box;
font-family: 'Onest', sans-serif;
-webkit-font-smoothing: antialiased;
}
/* Главный заголовок (44px, насыщенность 500, как в других блоках) */
.mskt-about-title {
font-size: 44px;
line-height: 1.2;
font-weight: 500;
color: #3e4348;
margin: 0 0 35px 0;
letter-spacing: -0.6px;
}
/* Вводный текст (крупный — 15px) */
.mskt-about-lead {
font-size: 15px;
line-height: 1.6;
color: #555c62;
margin: 0 0 45px 0;
font-weight: 400;
max-width: 1100px; /* Чтобы строка не растягивалась бесконечно на сверхшироких экранах */
}
/* Подзаголовок перед списком (насыщенность 500) */
.mskt-about-subtitle {
font-size: 18px;
line-height: 1.4;
font-weight: 500;
color: #3e4348;
margin: 0 0 25px 0;
letter-spacing: -0.2px;
}
/* Список преимуществ */
.mskt-about-list {
list-style: none;
padding: 0;
margin: 0;
max-width: 1100px;
}
.mskt-about-list li {
font-size: 15px; /* Крупный и читаемый текст */
line-height: 1.6;
color: #555c62;
position: relative;
padding-left: 18px;
margin-bottom: 12px;
font-weight: 400;
}
/* Фирменные маркеры (точки) */
.mskt-about-list li::before {
content: "•";
color: #555c62;
font-size: 12px;
position: absolute;
left: 4px;
top: 0px;
}
.mskt-about-list li:last-child {
margin-bottom: 0;
}
/* ================= АДАПТИВНОСТЬ ================= */
@media (max-width: 1024px) {
.mskt-about-container {
margin: 40px auto;
}
.mskt-about-title {
font-size: 36px;
margin-bottom: 25px;
}
.mskt-about-lead {
margin-bottom: 35px;
}
}
@media (max-width: 768px) {
.mskt-about-title {
font-size: 32px;
}
.mskt-about-subtitle {
font-size: 17px;
margin-bottom: 20px;
}
}
@media (max-width: 480px) {
.mskt-about-container {
margin: 30px auto;
}
.mskt-about-title {
font-size: 28px;
margin-bottom: 20px;
}
.mskt-about-lead,
.mskt-about-list li {
font-size: 14px;
}
.mskt-about-subtitle {
font-size: 16px;
}
}
/* Секция-обертка */
.mskt-grid-section {
width: 100%;
background-color: #ffffff;
box-sizing: border-box;
}
/* Контейнер */
.mskt-grid-container {
max-width: 1200px;
margin: 50px auto;
padding: 0 20px;
box-sizing: border-box;
font-family: 'Onest', sans-serif;
-webkit-font-smoothing: antialiased;
}
/* Сетка 3-колоночная */
.mskt-services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* Базовый стиль карточки */
.mskt-card {
border-radius: 20px;
padding: 35px 30px;
min-height: 250px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
box-sizing: border-box;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mskt-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
}
/* Вариант 1: Светлая карточка */
.mskt-card.bg-light {
background-color: #f5f6f8;
}
/* Вариант 2: Синяя карточка */
.mskt-card.bg-blue {
background-color: #0a65f7;
}
/* Обертка для иконок */
.mskt-card-icon {
width: 46px;
height: 46px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 35px;
box-sizing: border-box;
}
/* Иконки на светлых картах */
.mskt-card.bg-light .mskt-card-icon {
background-color: transparent;
border: 1.5px solid #0a65f7;
}
/* Иконки на синих картах */
.mskt-card.bg-blue .mskt-card-icon {
background-color: rgba(255, 255, 255, 0.15);
border: 1.5px solid rgba(255, 255, 255, 0.2);
}
.mskt-card-icon svg {
width: 22px;
height: 22px;
}
/* Заголовки */
.mskt-card-title {
font-size: 20px;
line-height: 1.3;
font-weight: 500;
margin: 0 0 10px 0;
letter-spacing: -0.3px;
}
.mskt-card-title.text-dark {
color: #3e4348;
}
.mskt-card-title.text-white {
color: #ffffff;
}
/* Поддерживающий текст (описание) */
.mskt-card-desc {
font-size: 14px;
line-height: 1.45;
margin: 0;
font-weight: 400;
}
.mskt-card-desc.text-desc-white {
color: rgba(255, 255, 255, 0.85);
}
/* ================= АДАПТИВНОСТЬ ================= */
@media (max-width: 1024px) {
.mskt-services-grid {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.mskt-card {
padding: 30px 25px;
min-height: 220px;
}
}
@media (max-width: 650px) {
.mskt-services-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.mskt-card {
min-height: auto;
padding: 25px 20px;
}
.mskt-card-icon {
margin-bottom: 20px;
}
.mskt-card-title {
font-size: 18px;
}
}
/* Секция-обертка */
.mskt-process-section {
width: 100%;
background-color: #ffffff;
box-sizing: border-box;
}
/* Контейнер */
.mskt-process-container {
max-width: 1200px;
margin: 50px auto;
padding: 0 20px;
box-sizing: border-box;
font-family: 'Onest', sans-serif;
-webkit-font-smoothing: antialiased;
}
/* Заголовок блока */
.mskt-process-main-title {
font-size: 44px;
line-height: 1.15;
font-weight: 500;
margin: 0 0 45px 0;
letter-spacing: -0.6px;
}
.mskt-process-main-title .text-green {
color: #24a647;
display: inline;
}
.mskt-process-main-title .text-dark {
color: #3e4348;
display: inline;
}
/* Двухколоночный грид */
.mskt-process-grid {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 65px;
align-items: start;
}
/* Сетка карточек преимуществ */
.mskt-process-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
/* Отдельная карточка с плавными переходами */
.mskt-proc-card {
background-color: #f5f6f8;
border-radius: 18px;
padding: 25px 18px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
min-height: 215px;
box-sizing: border-box;
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
background-color 0.25s ease;
}
/* Ховер-эффект "левитации" */
.mskt-proc-card:hover {
transform: translateY(-5px);
background-color: #fbfbfc;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
}
/* Обновленная иконка: Сплошной зеленый круг с белым контентом */
.mskt-proc-icon {
width: 52px;
height: 52px;
background-color: #24a647;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
transition: transform 0.25s ease;
}
/* Легкий поворот/импульс иконки при наведении на саму карточку */
.mskt-proc-card:hover .mskt-proc-icon {
transform: scale(1.05);
}
.mskt-proc-icon svg {
width: 22px;
height: 22px;
}
/* Заголовки в карточках */
.mskt-proc-title {
font-size: 18px;
font-weight: 500;
color: #3e4348;
margin: 0 0 10px 0;
letter-spacing: -0.2px;
}
/* Текст описания в карточках */
.mskt-proc-text {
font-size: 13px;
line-height: 1.45;
color: #555c62;
margin: 0;
font-weight: 400;
}
/* Правая текстовая часть */
.mskt-process-info {
display: flex;
flex-direction: column;
}
/* Заголовок эффективности */
.mskt-info-title {
font-size: 38px;
line-height: 1.2;
font-weight: 500;
color: #3e4348;
margin: 0 0 30px 0;
letter-spacing: -0.5px;
}
/* Абзацы текста эффективности (15px) */
.mskt-info-content p {
font-size: 15px;
line-height: 1.65;
color: #555c62;
margin: 0 0 20px 0;
font-weight: 400;
}
.mskt-info-content p:last-child {
margin-bottom: 0;
}
/* ================= АДАПТИВНОСТЬ ================= */
@media (max-width: 1100px) {
.mskt-process-grid {
grid-template-columns: 1fr;
gap: 50px;
}
}
@media (max-width: 768px) {
.mskt-process-main-title {
font-size: 36px;
margin-bottom: 30px;
}
.mskt-info-title {
font-size: 30px;
margin-bottom: 20px;
}
.mskt-process-cards {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
}
@media (max-width: 480px) {
.mskt-process-main-title {
font-size: 28px;
}
.mskt-process-cards {
grid-template-columns: 1fr;
}
.mskt-proc-card {
min-height: auto;
padding: 22px 15px;
}
.mskt-info-title {
font-size: 24px;
}
.mskt-info-content p {
font-size: 14px;
}
}
/* Основной контейнер секции */
.mskt-conduct-section {
width: 100%;
background-color: #ffffff;
box-sizing: border-box;
}
.mskt-conduct-container {
max-width: 1200px;
margin: 60px auto;
padding: 0 20px;
box-sizing: border-box;
font-family: 'Onest', sans-serif;
-webkit-font-smoothing: antialiased;
}
/* Заголовок МСКТ */
.mskt-conduct-main-title {
font-size: 44px;
line-height: 1.25;
font-weight: 500;
margin: 0 0 40px 0;
letter-spacing: -0.6px;
}
.mskt-conduct-main-title .text-green {
color: #24a647;
}
.mskt-conduct-main-title .text-dark {
color: #3e4348;
}
/* Сетка карточек 4 в ряд */
.mskt-conduct-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
/* Стилизация интерактивных карточек */
.mskt-conduct-card {
background-color: #f5f6f8;
border-radius: 20px;
padding: 35px 20px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
box-sizing: border-box;
min-height: 230px;
transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1),
background-color 0.25s ease;
}
/* Плавный подъем карточки и легкая тень при наведении */
.mskt-conduct-card:hover {
transform: translateY(-6px);
background-color: #fbfbfc;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
}
/* Иконки: Белые на сплошном зеленом фоне */
.mskt-conduct-icon {
width: 56px;
height: 56px;
background-color: #24a647;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
transition: transform 0.25s ease, background-color 0.25s ease;
}
/* Микро-эффект масштабирования круга с иконкой при наведении на карточку */
.mskt-conduct-card:hover .mskt-conduct-icon {
transform: scale(1.06);
}
.mskt-conduct-icon svg {
width: 24px;
height: 24px;
}
/* Заголовки карточек */
.mskt-conduct-title {
font-size: 19px;
font-weight: 500;
color: #3e4348;
margin: 0 0 10px 0;
letter-spacing: -0.2px;
}
/* Подписи под заголовками */
.mskt-conduct-text {
font-size: 13.5px;
line-height: 1.45;
color: #555c62;
margin: 0;
font-weight: 400;
}
/* ================= АДАПТИВНАЯ ВЕРСТКА ================= */
@media (max-width: 1024px) {
.mskt-conduct-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.mskt-conduct-main-title {
font-size: 36px;
}
/* Отключаем принудительный перенос на средних экранах */
.mskt-conduct-main-title br {
display: none;
}
}
@media (max-width: 600px) {
.mskt-conduct-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.mskt-conduct-main-title {
font-size: 28px;
margin-bottom: 25px;
}
.mskt-conduct-card {
min-height: auto;
padding: 25px 15px;
}
}
/* Основной контейнер секции */
.mammography-intro-section {
width: 100%;
background-color: #ffffff;
box-sizing: border-box;
}
.mammography-intro-container {
max-width: 1200px;
margin: 60px auto 40px auto;
padding: 0 20px;
box-sizing: border-box;
font-family: 'Onest', sans-serif;
-webkit-font-smoothing: antialiased;
}
/* Заголовок страницы */
.mammography-intro-title {
font-size: 46px;
line-height: 1.18;
font-weight: 500;
color: #3e4348;
margin: 0 0 28px 0;
letter-spacing: -0.8px;
}
/* Вводное описание */
.mammography-intro-text {
font-size: 15px;
line-height: 1.6;
color: #555c62;
margin: 0;
max-width: 1100px; /* Чтобы текст смотрелся сбалансированно на сверхшироких экранах */
font-weight: 400;
}
/* ================= АДАПТИВНАЯ ВЕРСТКА ================= */
@media (max-width: 1024px) {
.mammography-intro-container {
margin: 45px auto 30px auto;
}
.mammography-intro-title {
font-size: 38px;
margin-bottom: 20px;
}
.mammography-intro-text {
font-size: 14.5px;
}
}
@media (max-width: 600px) {
.mammography-intro-container {
margin: 35px auto 20px auto;
}
.mammography-intro-title {
font-size: 28px;
margin-bottom: 16px;
letter-spacing: -0.4px;
}
/* Отключаем жесткий перенос на мобилках для плавного обтекания */
.mammography-intro-title br {
display: none;
}
.mammography-intro-text {
font-size: 14px;
line-height: 1.55;
}
}
/* Основной контейнер секции */
.mammo-advantages-section {
width: 100%;
background-color: #ffffff;
box-sizing: border-box;
}
.mammo-advantages-container {
max-width: 1200px;
margin: 60px auto;
padding: 0 20px;
box-sizing: border-box;
font-family: 'Onest', sans-serif;
-webkit-font-smoothing: antialiased;
/* Двухколоночная верстка */
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 50px;
align-items: center; /* Центрируем правую колонку относительно левой */
}
/* Общие классы цветов */
.mammo-advantages-section .text-green {
color: #24a647;
}
.mammo-advantages-section .text-dark {
color: #3e4348;
}
/* Левая колонка */
.mammo-main-title {
font-size: 38px;
line-height: 1.2;
font-weight: 500;
margin: 0 0 35px 0;
letter-spacing: -0.6px;
}
/* Сетка карточек 3 в ряд */
.mammo-cards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
/* Карточки */
.mammo-card {
background-color: #f5f6f8;
border-radius: 20px;
padding: 28px 14px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
box-sizing: border-box;
min-height: 205px;
transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1),
background-color 0.25s ease;
}
.mammo-card:hover {
transform: translateY(-5px);
background-color: #fbfbfc;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
}
/* Круг иконки */
.mammo-card-icon {
width: 52px;
height: 52px;
background-color: #24a647;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
transition: transform 0.25s ease;
}
.mammo-card:hover .mammo-card-icon {
transform: scale(1.06);
}
.mammo-card-icon svg {
width: 24px;
height: 24px;
}
/* Текст в карточке */
.mammo-card-title {
font-size: 18px;
font-weight: 500;
color: #3e4348;
margin: 0 0 8px 0;
letter-spacing: -0.2px;
}
.mammo-card-text {
font-size: 12.5px;
line-height: 1.4;
color: #555c62;
margin: 0;
font-weight: 400;
}
/* Правая колонка */
.mammo-right-col {
padding-left: 20px;
}
.mammo-recom-title {
font-size: 38px;
line-height: 1.2;
font-weight: 500;
color: #3e4348;
margin: 0 0 30px 0;
letter-spacing: -0.6px;
}
.mammo-recom-content p {
font-size: 14.5px;
line-height: 1.6;
color: #555c62;
margin: 0 0 20px 0;
font-weight: 400;
}
.mammo-recom-content p:last-child {
margin-bottom: 0;
}
/* ================= АДАПТИВНАЯ ВЕРСТКА ================= */
@media (max-width: 1024px) {
.mammo-advantages-container {
grid-template-columns: 1fr;
gap: 40px;
}
.mammo-right-col {
padding-left: 0;
}
.mammo-main-title,
.mammo-recom-title {
font-size: 32px;
}
}
@media (max-width: 640px) {
.mammo-cards-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.mammo-main-title,
.mammo-recom-title {
font-size: 26px;
}
.mammo-main-title br,
.mammo-recom-title br {
display: none;
}
.mammo-card {
min-height: auto;
padding: 20px 10px;
}
}
@media (max-width: 420px) {
.mammo-cards-grid {
grid-template-columns: 1fr;
}
}
/* Основной контейнер секции */
.mammo-age-section {
width: 100%;
background-color: #ffffff;
box-sizing: border-box;
padding: 60px 0;
}
.mammo-age-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
font-family: 'Onest', sans-serif;
-webkit-font-smoothing: antialiased;
display: flex;
flex-direction: column;
gap: 80px; /* Расстояние между рядами */
}
/* Ряд сетки */
.mammo-age-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
/* Акцентный синий цвет */
.mammo-age-section .text-blue {
color: #2b68ef;
}
/* Текстовая колонка */
.mammo-age-title {
font-size: 38px;
line-height: 1.2;
font-weight: 500;
color: #3e4348;
margin: 0 0 24px 0;
letter-spacing: -0.6px;
}
.mammo-age-desc {
font-size: 14.5px;
line-height: 1.6;
color: #555c62;
margin: 0;
font-weight: 400;
}
.mammo-age-subtitle {
font-size: 14.5px;
line-height: 1.5;
color: #555c62;
margin: 0 0 16px 0;
font-weight: 400;
}
/* Список факторов риска */
.mammo-age-list {
list-style: none;
padding: 0;
margin: 0;
}
.mammo-age-list li {
position: relative;
padding-left: 18px;
font-size: 14px;
line-height: 1.6;
color: #555c62;
margin-bottom: 8px;
font-weight: 400;
}
.mammo-age-list li:last-child {
margin-bottom: 0;
}
/* Кастомные серые точки списков */
.mammo-age-list li::before {
content: "•";
position: absolute;
left: 0;
top: -1px;
color: #838a90;
font-size: 16px;
}
/* Область подложки и картинки (3D Pop-out) */
.mammo-age-img-col {
display: flex;
justify-content: center;
align-items: flex-end;
padding-top: 30px; /* Место сверху для выступающей головы */
}
.mammo-img-card {
position: relative;
width: 100%;
max-width: 520px;
height: 310px;
background-color: #f2f3f5;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: flex-end;
}
/* Изображение, выступающее наверх */
.mammo-popout-img {
position: absolute;
bottom: 0;
max-height: 420px;
width: auto;
object-fit: contain;
pointer-events: none;
/* --- Настройки освещения через CSS --- */
filter: brightness(1.12) contrast(0.95);
/* Плавный переход, если захочешь менять эффект при наведении */
transition: filter 0.3s ease;
}
/* ================= АДАПТИВНАЯ ВЕРСТКА ================= */
@media (max-width: 1024px) {
.mammo-age-row {
gap: 30px;
}
.mammo-age-title {
font-size: 32px;
margin-bottom: 18px;
}
.mammo-img-card {
height: 260px;
}
.mammo-popout-img {
max-height: 290px;
}
}
@media (max-width: 768px) {
.mammo-age-container {
gap: 50px;
}
.mammo-age-row {
grid-template-columns: 1fr;
}
/* На мобильных меняем порядок: сначала текст, потом фото */
.mammo-age-row.reverse {
display: flex;
flex-direction: column-reverse;
}
.mammo-age-title {
font-size: 28px;
}
.mammo-age-img-col {
padding-top: 25px;
}
.mammo-img-card {
height: 240px;
}
.mammo-popout-img {
max-height: 265px;
}
}
/* Основной контейнер секции */
.indications-section {
width: 100%;
background-color: #ffffff;
box-sizing: border-box;
padding: 60px 0;
}
.indications-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
font-family: 'Onest', sans-serif;
-webkit-font-smoothing: antialiased;
/* Двухколоночная сетка */
display: grid;
grid-template-columns: 1fr 1fr;
gap: 70px;
align-items: start;
}
/* Цветовые акценты */
.indications-section .text-blue {
color: #2b68ef;
}
.indications-section .text-dark {
color: #3e4348;
}
/* Заголовки */
.indications-title {
font-size: 38px;
line-height: 1.2;
font-weight: 500;
color: #3e4348;
margin: 0 0 24px 0;
letter-spacing: -0.6px;
}
/* Подзаголовок списков (полужирный текст) */
.indications-subtitle {
font-size: 14.5px;
line-height: 1.5;
font-weight: 600;
color: #3e4348;
margin: 0 0 16px 0;
}
/* Маркированные списки */
.indications-list {
list-style: none;
padding: 0;
margin: 0 0 28px 0;
}
.indications-list li {
position: relative;
padding-left: 18px;
font-size: 14px;
line-height: 1.6;
color: #555c62;
margin-bottom: 8px;
font-weight: 400;
}
.indications-list li:last-child {
margin-bottom: 0;
}
/* Кастомная маркер-точка */
.indications-list li::before {
content: "•";
position: absolute;
left: 0;
top: -1px;
color: #838a90;
font-size: 16px;
}
/* Нижний текстовый блок */
.indications-footer-text {
font-size: 14px;
line-height: 1.6;
color: #555c62;
margin: 0;
font-weight: 400;
}
.indications-footer-text strong {
font-weight: 600;
color: #3e4348;
}
/* ================= АДАПТИВНАЯ ВЕРСТКА ================= */
@media (max-width: 1024px) {
.indications-container {
gap: 40px;
}
.indications-title {
font-size: 32px;
margin-bottom: 20px;
}
}
@media (max-width: 768px) {
.indications-container {
grid-template-columns: 1fr;
gap: 50px;
}
.indications-title {
font-size: 28px;
}
.indications-title br {
display: none;
}
}
/* Основной контейнер секции */
.mammo-details-section {
width: 100%;
background-color: #ffffff;
box-sizing: border-box;
padding: 60px 0;
}
.mammo-details-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
font-family: 'Onest', sans-serif;
-webkit-font-smoothing: antialiased;
display: flex;
flex-direction: column;
gap: 80px; /* Отступ между рядами */
}
/* Ряд сетки */
.mammo-details-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
/* Цветовые акценты */
.mammo-details-section .text-blue {
color: #2b68ef;
}
/* Заголовки блоков */
.mammo-details-title {
font-size: 38px;
line-height: 1.2;
font-weight: 500;
color: #3e4348;
margin: 0 0 24px 0;
letter-spacing: -0.6px;
}
/* Текстовые абзацы */
.mammo-details-desc {
font-size: 14.5px;
line-height: 1.6;
color: #555c62;
margin: 0 0 16px 0;
font-weight: 400;
}
.mammo-details-desc:last-child {
margin-bottom: 0;
}
.mammo-details-desc strong {
font-weight: 600;
color: #3e4348;
}
.mammo-info-block {
margin-bottom: 20px;
}
.mammo-info-block:last-child {
margin-bottom: 0;
}
/* Подзаголовок списков */
.mammo-details-subtitle {
font-size: 14.5px;
line-height: 1.5;
font-weight: 600;
color: #3e4348;
margin: 16px 0 10px 0;
}
/* Список с точками */
.mammo-details-list {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
}
.mammo-details-list li {
position: relative;
padding-left: 18px;
font-size: 14px;
line-height: 1.6;
color: #555c62;
margin-bottom: 6px;
font-weight: 400;
}
.mammo-details-list li::before {
content: "•";
position: absolute;
left: 0;
top: -1px;
color: #838a90;
font-size: 16px;
}
/* Примечание "Важно:" */
.mammo-details-note {
font-size: 14.5px;
line-height: 1.6;
color: #555c62;
margin: 0 0 20px 0;
}
.mammo-details-note strong {
font-weight: 600;
color: #3e4348;
}
/* Обертка для фото */
.mammo-details-img-col {
width: 100%;
display: flex;
justify-content: center;
}
.mammo-details-img-wrapper {
width: 100%;
height: 360px;
border-radius: 20px;
overflow: hidden;
background-color: #f2f3f5;
}
.mammo-details-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: brightness(1.05) contrast(0.98); /* Легкое освещение под стиль сайта */
}
/* ================= АДАПТИВНАЯ ВЕРСТКА ================= */
@media (max-width: 1024px) {
.mammo-details-row {
gap: 35px;
}
.mammo-details-title {
font-size: 32px;
margin-bottom: 18px;
}
.mammo-details-img-wrapper {
height: 300px;
}
}
@media (max-width: 768px) {
.mammo-details-container {
gap: 50px;
}
.mammo-details-row {
grid-template-columns: 1fr;
}
/* На мобилках меняем порядок в обратном ряду (сначала текст, потом фото) */
.mammo-details-row.reverse {
display: flex;
flex-direction: column-reverse;
}
.mammo-details-title {
font-size: 28px;
}
.mammo-details-title br {
display: none;
}
.mammo-details-img-wrapper {
height: 240px;
}
}
/* Основной контейнер секции */
.services-search-section {
width: 100%;
background-color: #ffffff;
box-sizing: border-box;
padding: 30px 0;
}
.services-search-container {
max-width: 1200px; /* Совпадает с шириной верхнего блока */
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
font-family: 'Onest', sans-serif;
-webkit-font-smoothing: antialiased;
display: flex;
align-items: center;
gap: 40px; /* Отступ между заголовком и инпутом */
}
/* Заголовок "Поиск по услугам:" */
.services-search-title {
font-size: 42px;
line-height: 1.15;
font-weight: 500;
color: #3e4348;
margin: 0;
letter-spacing: -0.6px;
white-space: nowrap; /* Не дает тексту перенослиться */
flex-shrink: 0;      /* Заголовку фиксированный размер */
}
/* Обертка поля ввода — растягиваем во всю ширину */
.services-search-wrapper {
position: relative;
flex-grow: 1;        /* Занимает всю оставшуюся ширину блока */
display: flex;
align-items: center;
}
/* Поле ввода */
.services-search-input {
width: 100%;
height: 54px;
padding: 0 55px 0 24px;
background-color: #f5f6f8;
border: 1.5px solid #2b68ef;
border-radius: 50px;
font-family: 'Onest', sans-serif;
font-size: 15px;
color: #3e4348;
box-sizing: border-box;
outline: none;
transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
/* Placeholder (подсказка внутри) */
.services-search-input::placeholder {
color: #9aa0a6;
font-weight: 400;
}
/* Фокус на поле ввода */
.services-search-input:focus {
background-color: #ffffff;
border-color: #1a54d8;
box-shadow: 0 4px 16px rgba(43, 104, 239, 0.12);
}
/* Кнопка с иконкой лупы */
.services-search-btn {
position: absolute;
right: 20px;
background: none;
border: none;
padding: 0;
margin: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
transition: transform 0.2s ease;
}
.services-search-btn:hover {
transform: scale(1.1);
}
.services-search-btn svg {
width: 20px;
height: 20px;
}
/* ================= АДАПТИВНАЯ ВЕРСТКА ================= */
@media (max-width: 900px) {
.services-search-container {
gap: 24px;
}
.services-search-title {
font-size: 32px;
}
.services-search-input {
height: 48px;
font-size: 14.5px;
}
}
@media (max-width: 680px) {
.services-search-container {
flex-direction: column;
align-items: stretch; /* Растягивает инпут на всю ширину на мобилке */
gap: 16px;
}
.services-search-title {
font-size: 26px;
white-space: normal;
}
.services-search-wrapper {
width: 100%;
}
.services-search-input {
height: 46px;
padding: 0 45px 0 20px;
font-size: 14px;
}
.services-search-btn {
right: 14px;
}
}
/* Основной контейнер секции */
.digital-xray-section {
width: 100%;
background-color: #ffffff;
box-sizing: border-box;
padding: 60px 0 40px 0;
}
.digital-xray-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
font-family: 'Onest', sans-serif;
-webkit-font-smoothing: antialiased;
}
/* Главный заголовок страницы/блока */
.digital-xray-title {
font-size: 52px;
line-height: 1.1;
font-weight: 500;
color: #3e4348;
margin: 0 0 36px 0;
letter-spacing: -0.8px;
}
/* Контейнер с абзацами */
.digital-xray-content {
display: flex;
flex-direction: column;
gap: 20px; /* Отступы между параграфами */
}
/* Стилизация текста */
.digital-xray-text {
font-size: 14.5px;
line-height: 1.6;
color: #555c62;
margin: 0;
font-weight: 400;
}
.digital-xray-text strong {
font-weight: 600;
color: #3e4348;
}
/* ================= АДАПТИВНАЯ ВЕРСТКА ================= */
@media (max-width: 1024px) {
.digital-xray-title {
font-size: 42px;
margin-bottom: 28px;
}
}
@media (max-width: 768px) {
.digital-xray-section {
padding: 40px 0 30px 0;
}
.digital-xray-title {
font-size: 32px;
margin-bottom: 20px;
}
.digital-xray-content {
gap: 16px;
}
.digital-xray-text {
font-size: 14px;
line-height: 1.55;
}
}
/* Основной контейнер секции */
.xray-benefits-section {
width: 100%;
background-color: #ffffff;
box-sizing: border-box;
padding: 60px 0;
}
.xray-benefits-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
font-family: 'Onest', sans-serif;
-webkit-font-smoothing: antialiased;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: flex-start;
}
/* Цветовой акцент */
.xray-benefits-section .text-blue {
color: #2b68ef;
}
/* Заголовок */
.xray-benefits-title {
font-size: 42px;
line-height: 1.15;
font-weight: 500;
color: #3e4348;
margin: 0 0 28px 0;
letter-spacing: -0.6px;
}
/* Список преимуществ */
.xray-benefits-list {
list-style: none;
padding: 0;
margin: 0 0 32px 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.xray-benefits-list li {
position: relative;
padding-left: 18px;
font-size: 14.5px;
line-height: 1.6;
color: #555c62;
font-weight: 400;
}
.xray-benefits-list li::before {
content: "•";
position: absolute;
left: 0;
top: -1px;
color: #838a90;
font-size: 16px;
}
.xray-benefits-list li strong {
color: #3e4348;
font-weight: 600;
}
/* Сноска снизу */
.xray-benefits-disclaimer {
font-size: 13.5px;
line-height: 1.4;
color: #838a90;
margin: 0;
}
/* Обертка для фотографии */
.xray-benefits-img-col {
width: 100%;
}
.xray-benefits-img-wrapper {
width: 100%;
height: 420px;
border-radius: 20px;
overflow: hidden;
background-color: #f2f3f5;
}
.xray-benefits-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ================= АДАПТИВНАЯ ВЕРСТКА ================= */
@media (max-width: 1024px) {
.xray-benefits-container {
gap: 40px;
}
.xray-benefits-title {
font-size: 34px;
margin-bottom: 20px;
}
.xray-benefits-img-wrapper {
height: 360px;
}
}
@media (max-width: 768px) {
.xray-benefits-section {
padding: 40px 0;
}
.xray-benefits-container {
grid-template-columns: 1fr;
gap: 32px;
}
.xray-benefits-title {
font-size: 28px;
}
.xray-benefits-img-wrapper {
height: 260px;
}
}
/* Основной контейнер секции */
.xray-types-section {
width: 100%;
background-color: #ffffff;
box-sizing: border-box;
padding: 60px 0;
}
.xray-types-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
font-family: 'Onest', sans-serif;
-webkit-font-smoothing: antialiased;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
/* Синий акцент */
.xray-types-section .text-blue {
color: #2b68ef;
}
/* Обертка для изображения */
.xray-types-img-col {
width: 100%;
}
.xray-types-img-wrapper {
width: 100%;
height: 380px;
border-radius: 20px;
overflow: hidden;
background-color: #f2f3f5;
}
.xray-types-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Заголовок */
.xray-types-title {
font-size: 42px;
line-height: 1.15;
font-weight: 500;
color: #3e4348;
margin: 0 0 24px 0;
letter-spacing: -0.6px;
}
/* Вводный абзац */
.xray-types-intro {
font-size: 14.5px;
line-height: 1.6;
color: #555c62;
margin: 0 0 20px 0;
}
/* Список видов рентгена */
.xray-types-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.xray-types-list li {
position: relative;
padding-left: 18px;
font-size: 14.5px;
line-height: 1.6;
color: #555c62;
font-weight: 400;
}
.xray-types-list li::before {
content: "•";
position: absolute;
left: 0;
top: -1px;
color: #838a90;
font-size: 16px;
}
.xray-types-list li strong {
color: #3e4348;
font-weight: 600;
}
/* ================= АДАПТИВНАЯ ВЕРСТКА ================= */
@media (max-width: 1024px) {
.xray-types-container {
gap: 40px;
}
.xray-types-title {
font-size: 34px;
margin-bottom: 20px;
}
.xray-types-img-wrapper {
height: 320px;
}
}
@media (max-width: 768px) {
.xray-types-section {
padding: 40px 0;
}
.xray-types-container {
grid-template-columns: 1fr;
gap: 24px;
}
.xray-types-title {
font-size: 28px;
}
.xray-types-img-wrapper {
height: 250px;
}
}
/* Основной контейнер секции */
.densitometry-section {
width: 100%;
background-color: #ffffff;
box-sizing: border-box;
padding: 0 0 60px 0;
}
.densitometry-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
font-family: 'Onest', sans-serif;
-webkit-font-smoothing: antialiased;
}
/* Крупный заголовок */
.densitometry-title {
font-size: 52px;
line-height: 1.1;
font-weight: 500;
color: #3e4348;
margin: 0 0 36px 0;
letter-spacing: -0.8px;
}
/* Текстовый блок */
.densitometry-content {
display: flex;
flex-direction: column;
gap: 24px;
max-width: 1100px;
}
.densitometry-content p {
font-size: 15px;
line-height: 1.6;
color: #555c62;
margin: 0;
font-weight: 400;
}
/* ================= АДАПТИВНАЯ ВЕРСТКА ================= */
@media (max-width: 1024px) {
.densitometry-title {
font-size: 42px;
margin-bottom: 28px;
}
}
@media (max-width: 768px) {
.densitometry-section {
padding: 40px 0;
}
.densitometry-title {
font-size: 32px;
margin-bottom: 20px;
}
.densitometry-content {
gap: 18px;
}
.densitometry-content p {
font-size: 14px;
}
}
/* Основной контейнер секции */
.procedure-essence-section {
width: 100%;
background-color: #ffffff;
box-sizing: border-box;
padding: 0 0 60px 0;
}
.procedure-essence-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
font-family: 'Onest', sans-serif;
-webkit-font-smoothing: antialiased;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
/* Голубой акцент */
.procedure-essence-section .text-blue {
color: #2b68ef;
}
/* Заголовок */
.procedure-essence-title {
font-size: 42px;
line-height: 1.15;
font-weight: 500;
color: #3e4348;
margin: 0 0 24px 0;
letter-spacing: -0.6px;
}
/* Текст */
.procedure-essence-p {
font-size: 14.5px;
line-height: 1.6;
color: #555c62;
margin: 0 0 16px 0;
font-weight: 400;
}
.procedure-essence-p:last-child {
margin-bottom: 0;
}
/* Обертка для изображения */
.procedure-essence-img-col {
width: 100%;
}
.procedure-essence-img-wrapper {
width: 100%;
height: 380px;
border-radius: 20px;
overflow: hidden;
background-color: #f2f3f5;
}
.procedure-essence-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ================= АДАПТИВНАЯ ВЕРСТКА ================= */
@media (max-width: 1024px) {
.procedure-essence-container {
gap: 40px;
}
.procedure-essence-title {
font-size: 34px;
margin-bottom: 20px;
}
.procedure-essence-img-wrapper {
height: 320px;
}
}
@media (max-width: 768px) {
.procedure-essence-section {
padding: 40px 0;
}
.procedure-essence-container {
grid-template-columns: 1fr;
gap: 24px;
}
.procedure-essence-title {
font-size: 28px;
}
.procedure-essence-img-wrapper {
height: 250px;
}
}
/* Основной контейнер секции */
.methodology-section {
width: 100%;
background-color: #ffffff;
box-sizing: border-box;
padding: 0 0 60px 0;
}
.methodology-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
font-family: 'Onest', sans-serif;
-webkit-font-smoothing: antialiased;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
/* Синий акцент */
.methodology-section .text-blue {
color: #2b68ef;
}
/* Обертка для изображения */
.methodology-img-col {
width: 100%;
}
.methodology-img-wrapper {
width: 100%;
height: 380px;
border-radius: 20px;
overflow: hidden;
background-color: #f2f3f5;
}
.methodology-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Заголовок */
.methodology-title {
font-size: 42px;
line-height: 1.15;
font-weight: 500;
color: #3e4348;
margin: 0 0 24px 0;
letter-spacing: -0.6px;
}
/* Абзацы текста */
.methodology-p {
font-size: 14.5px;
line-height: 1.6;
color: #555c62;
margin: 0 0 20px 0;
font-weight: 400;
}
/* Сноска снизу */
.methodology-disclaimer {
font-size: 13.5px;
line-height: 1.4;
color: #838a90;
margin: 12px 0 0 0;
}
/* ================= АДАПТИВНАЯ ВЕРСТКА ================= */
@media (max-width: 1024px) {
.methodology-container {
gap: 40px;
}
.methodology-title {
font-size: 34px;
margin-bottom: 20px;
}
.methodology-img-wrapper {
height: 320px;
}
}
@media (max-width: 768px) {
.methodology-section {
padding: 40px 0;
}
.methodology-container {
grid-template-columns: 1fr;
gap: 24px;
}
.methodology-title {
font-size: 28px;
}
.methodology-img-wrapper {
height: 250px;
}
}
/* Основной контейнер секции */
.indications-section {
width: 100%;
background-color: #ffffff;
box-sizing: border-box;
padding: 0 0 60px 0;
}
.indications-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
font-family: 'Onest', sans-serif;
-webkit-font-smoothing: antialiased;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: flex-start;
}
/* Акцентный синий цвет */
.indications-section .text-blue {
color: #2b68ef;
}
/* Заголовки */
.indications-title {
font-size: 38px;
line-height: 1.15;
font-weight: 500;
color: #3e4348;
margin: 0 0 24px 0;
letter-spacing: -0.6px;
}
/* Вводный текст */
.indications-intro {
font-size: 14.5px;
line-height: 1.55;
color: #555c62;
margin: 0 0 20px 0;
}
/* Списочные элементы */
.indications-list {
list-style: none;
padding: 0;
margin: 0 0 28px 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.indications-list li {
position: relative;
padding-left: 18px;
font-size: 14px;
line-height: 1.55;
color: #555c62;
}
.indications-list li::before {
content: "•";
position: absolute;
left: 0;
top: -1px;
color: #838a90;
font-size: 16px;
}
/* Примечание внизу левой колонки */
.indications-note {
font-size: 14px;
line-height: 1.6;
color: #555c62;
margin: 0;
}
/* ================= АДАПТИВНАЯ ВЕРСТКА ================= */
@media (max-width: 1024px) {
.indications-container {
gap: 40px;
}
.indications-title {
font-size: 32px;
}
}
@media (max-width: 768px) {
.indications-section {
padding: 40px 0;
}
.indications-container {
grid-template-columns: 1fr;
gap: 40px;
}
.indications-title {
font-size: 28px;
margin-bottom: 16px;
}
.indications-list {
gap: 12px;
margin-bottom: 20px;
}
}
/* Контейнер баннера */
.ortho-banner {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #f7f8f9; /* Светло-серый фон карточки */
border-radius: 24px;
padding: 48px;
gap: 40px;
box-sizing: border-box;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
/* Левая текстовая колонка */
.ortho-banner__content {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* Подзаголовок сверху */
.ortho-banner__subtitle {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 16px;
line-height: 1.4;
color: #626973;
margin-bottom: 16px;
font-weight: 400;
}
/* Главный заголовок */
.ortho-banner__title {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 36px;
line-height: 1.15;
font-weight: 700;
color: #2c323d;
margin: 0 0 24px 0;
letter-spacing: -0.01em;
}
/* Синий акцентный текст в заголовке */
.ortho-banner__highlight {
color: #0b63e6;
}
/* Текст описания */
.ortho-banner__description {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14px;
line-height: 1.5;
color: #555d68;
margin: 0 0 32px 0;
max-width: 460px;
}
/* Синяя закругленная кнопка */
.ortho-banner__btn {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #0b63e6;
color: #ffffff;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: none;
padding: 14px 28px;
border-radius: 50px;
border: none;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease;
}
.ortho-banner__btn:hover {
background-color: #084fba;
}
.ortho-banner__btn:active {
transform: translateY(1px);
}
/* Правый блок с картинкой */
.ortho-banner__image-wrapper {
flex: 1;
width: 100%;
max-width: 520px;
aspect-ratio: 4 / 3;
border-radius: 20px;
overflow: hidden;
flex-shrink: 0;
}
.ortho-banner__image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Адаптивность для мобильных и планшетов */
@media (max-width: 992px) {
.ortho-banner {
flex-direction: column-reverse;
padding: 24px;
gap: 24px;
border-radius: 16px;
}
.ortho-banner__image-wrapper {
max-width: 100%;
aspect-ratio: 16 / 9;
border-radius: 12px;
}
.ortho-banner__title {
font-size: 26px;
margin-bottom: 16px;
}
.ortho-banner__subtitle {
font-size: 14px;
margin-bottom: 12px;
}
.ortho-banner__description {
font-size: 13px;
margin-bottom: 24px;
}
.ortho-banner__btn {
width: 100%;
padding: 14px 20px;
}
}
/* Общий блок */
.reasons-block {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 20px 0;
box-sizing: border-box;
}
/* Заголовок секции */
.reasons-block__title {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 36px;
font-weight: 700;
color: #2c323d;
margin: 0 0 36px 0;
text-align: left;
letter-spacing: -0.01em;
}
/* Сетка карточек */
.reasons-block__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
/* Карточка */
.reason-card {
background-color: #f7f8f9; /* Светло-серый фон как в макете */
border-radius: 24px;
padding: 40px 28px 36px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
box-sizing: border-box;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.reason-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
}
/* Иконка */
.reason-card__icon {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
}
.reason-card__icon svg {
width: 100%;
height: 100%;
}
/* Заголовок карточки */
.reason-card__title {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 22px;
line-height: 1.25;
font-weight: 700;
color: #0b63e6; /* Фирменный акцентный синий */
margin: 0 0 16px 0;
}
/* Текст карточки */
.reason-card__text {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14px;
line-height: 1.5;
color: #555d68;
margin: 0;
max-width: 300px;
}
/* Адаптив под планшеты и смартфоны */
@media (max-width: 992px) {
.reasons-block__grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.reasons-block__title {
font-size: 28px;
margin-bottom: 24px;
}
}
@media (max-width: 640px) {
.reasons-block__grid {
grid-template-columns: 1fr;
}
.reason-card {
padding: 32px 20px;
border-radius: 18px;
}
.reason-card__title {
font-size: 20px;
}
.reason-card__title br {
display: none; /* На мобилке перенос строки в заголовке отключаем */
}
}
/* Главный контейнер */
.diseases-section {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 20px 0;
box-sizing: border-box;
}
/* Заголовок с акцентом */
.diseases-section__title {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 36px;
font-weight: 700;
color: #2c323d;
margin-bottom: 32px;
letter-spacing: -0.01em;
}
.diseases-section__highlight {
color: #0b63e6;
}
/* Сетка в 2 колонки */
.diseases-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
align-items: start;
}
/* Карточка аккордеона */
.disease-card {
background-color: #f7f8f9;
border-radius: 20px;
overflow: hidden;
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.disease-card[open] {
background-color: #ffffff;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
/* Шапка плашки (кликабельная) */
.disease-card__header {
display: flex;
align-items: center;
padding: 20px 24px;
cursor: pointer;
list-style: none; /* Убираем стандартную стрелку браузера */
user-select: none;
}
.disease-card__header::-webkit-details-marker {
display: none; /* Скрываем стрелку в Safari/Chrome */
}
/* Синяя круглая иконка */
.disease-card__icon {
width: 52px;
height: 52px;
background-color: #0b63e6;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-right: 20px;
}
/* Название сустава */
.disease-card__title {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 18px;
font-weight: 600;
color: #2c323d;
flex-grow: 1;
}
/* Плюс, трансформирующийся в крестик */
.disease-card__toggle {
position: relative;
width: 24px;
height: 24px;
flex-shrink: 0;
margin-left: 12px;
}
.disease-card__toggle::before,
.disease-card__toggle::after {
content: '';
position: absolute;
background-color: #2c323d;
border-radius: 2px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.3s ease;
}
/* Горизонтальная линия плюса */
.disease-card__toggle::before {
width: 20px;
height: 2px;
}
/* Вертикальная линия плюса */
.disease-card__toggle::after {
width: 2px;
height: 20px;
}
/* При открытии вертикальная линия поворачивается в минус/крестик */
.disease-card[open] .disease-card__toggle::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.disease-card[open] .disease-card__toggle::before {
transform: translate(-50%, -50%) rotate(180deg);
}
/* Выпадающий текст */
.disease-card__content {
padding: 0 24px 20px 96px; /* Отступ слева подгоняет текст под заголовок */
animation: fadeIn 0.3s ease-in-out;
}
.disease-card__content p {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14px;
line-height: 1.55;
color: #555d68;
margin: 0;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Адаптив для мобильных устройств */
@media (max-width: 768px) {
.diseases-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.diseases-section__title {
font-size: 28px;
margin-bottom: 20px;
}
.disease-card__header {
padding: 16px 18px;
}
.disease-card__icon {
width: 44px;
height: 44px;
margin-right: 14px;
}
.disease-card__title {
font-size: 16px;
}
.disease-card__content {
padding: 0 18px 16px 76px;
}
}
/* Основной контейнер */
.when-to-visit {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 20px 0;
box-sizing: border-box;
}
/* Главный заголовок */
.when-to-visit__title {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 36px;
line-height: 1.2;
font-weight: 700;
color: #2c323d;
margin: 0 0 32px 0;
letter-spacing: -0.01em;
}
/* Синий акцент */
.when-to-visit__highlight {
color: #0b63e6;
}
/* Двухколоночный расклад */
.when-to-visit__content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 48px;
}
/* Левая текстовая колонка */
.when-to-visit__info {
flex: 1;
max-width: 540px;
}
/* Подзаголовок "Обратитесь к врачу, если:" */
.when-to-visit__subtitle {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 22px;
font-weight: 700;
color: #2c323d;
margin: 0 0 20px 0;
}
/* Маркерованный список */
.when-to-visit__list {
margin: 0 0 32px 0;
padding-left: 20px;
list-style-type: disc;
}
.when-to-visit__list li {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 15px;
line-height: 1.55;
color: #2c323d;
margin-bottom: 6px;
}
.when-to-visit__list li::marker {
color: #2c323d;
font-size: 0.9em;
}
/* Финальная акцентная фраза */
.when-to-visit__note {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 15px;
font-weight: 700;
color: #0b63e6;
margin: 0;
}
/* Правый блок с фото */
.when-to-visit__image-wrapper {
flex: 1;
max-width: 520px;
aspect-ratio: 4 / 3;
border-radius: 20px;
overflow: hidden;
flex-shrink: 0;
}
.when-to-visit__image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Адаптив под мобильные устройства и планшеты */
@media (max-width: 992px) {
.when-to-visit__content {
flex-direction: column-reverse;
gap: 28px;
}
.when-to-visit__info {
max-width: 100%;
}
.when-to-visit__image-wrapper {
max-width: 100%;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 16px;
}
.when-to-visit__title {
font-size: 28px;
margin-bottom: 24px;
}
.when-to-visit__subtitle {
font-size: 18px;
margin-bottom: 14px;
}
.when-to-visit__list li {
font-size: 14px;
}
}
/* Главный блок */
.diagnostics-block {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 20px 0;
box-sizing: border-box;
}
.diagnostics-block__title {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 36px;
font-weight: 700;
color: #2c323d;
margin: 0 0 32px 0;
letter-spacing: -0.01em;
}
/* Сетка карточек */
.diagnostics-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
align-items: stretch;
}
/* Базовые стили карточек */
.diag-card {
border-radius: 20px;
padding: 32px 28px;
display: flex;
flex-direction: column;
justify-content: flex-start;
box-sizing: border-box;
min-height: 240px;
position: relative;
cursor: pointer;
/* Плавный переход для ховера */
transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
background-color 0.25s ease;
}
/* Синяя акцентная карточка */
.diag-card--blue {
background-color: #0b63e6;
color: #ffffff;
box-shadow: 0 4px 12px rgba(11, 99, 230, 0.15);
}
/* Светлая карточка */
.diag-card--light {
background-color: #f7f8f9;
color: #2c323d;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}
/* === ЛЕГКИЙ HOVER ЭФФЕКТ === */
.diag-card:hover {
/* Легкое приподнятие вверх на 4px */
transform: translateY(-4px);
}
.diag-card--blue:hover {
background-color: #0959d2;
/* Увеличение глубины мягкой тени */
box-shadow: 0 12px 28px rgba(11, 99, 230, 0.3);
}
.diag-card--light:hover {
background-color: #ffffff;
/* Контрастная мягкая тень для белого фона */
box-shadow: 0 12px 28px rgba(44, 50, 61, 0.08);
}
/* Легкое скейлирование иконки при наведении на карточку */
.diag-card__icon {
width: 48px;
height: 48px;
margin-bottom: 28px;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.diag-card:hover .diag-card__icon {
transform: scale(1.08);
}
.diag-card__icon svg {
width: 100%;
height: 100%;
display: block;
}
/* Заголовки и тексты */
.diag-card__title {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 20px;
font-weight: 700;
margin: 0 0 12px 0;
}
.diag-card__desc {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14px;
line-height: 1.45;
margin: 0;
}
.diag-card--blue .diag-card__desc {
color: rgba(255, 255, 255, 0.9);
}
.diag-card--light .diag-card__desc {
color: #555d68;
}
/* Текстовые блоки по бокам */
.diagnostics-info {
display: flex;
flex-direction: column;
justify-content: center;
}
.diagnostics-info--top p {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 15px;
line-height: 1.5;
color: #555d68;
margin: 0;
max-width: 320px;
}
.diagnostics-info--bottom {
justify-content: flex-start;
padding-top: 8px;
}
.diagnostics-info__title {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 20px;
line-height: 1.3;
font-weight: 700;
color: #2c323d;
margin: 0 0 16px 0;
}
.diagnostics-info__desc {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14px;
line-height: 1.5;
color: #555d68;
margin: 0;
}
/* Адаптив */
@media (max-width: 992px) {
.diagnostics-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.diagnostics-info--top,
.diagnostics-info--bottom {
grid-column: 1 / -1;
}
}
@media (max-width: 640px) {
.diagnostics-grid {
grid-template-columns: 1fr;
}
.diagnostics-block__title {
font-size: 28px;
margin-bottom: 20px;
}
.diag-card {
min-height: auto;
padding: 24px 20px;
}
}
/* Основная секция */
.treatment-block {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 20px 0;
box-sizing: border-box;
}
/* Заголовок блока */
.treatment-block__title {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 36px;
line-height: 1.2;
font-weight: 700;
color: #2c323d;
margin: 0 0 32px 0;
letter-spacing: -0.01em;
}
/* Контентная сетка */
.treatment-block__content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 48px;
}
/* Левая текстовая часть */
.treatment-block__info {
flex: 1;
max-width: 540px;
}
.treatment-block__subtitle {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 20px;
line-height: 1.35;
font-weight: 600;
color: #2c323d;
margin: 0 0 24px 0;
}
/* Маркированный список */
.treatment-block__list {
margin: 0;
padding-left: 20px;
list-style-type: disc;
}
.treatment-block__list li {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 15px;
line-height: 1.55;
color: #2c323d;
margin-bottom: 6px;
}
.treatment-block__list li:last-child {
margin-bottom: 0;
}
.treatment-block__list li::marker {
color: #2c323d;
font-size: 0.9em;
}
/* Правый блок с фото */
.treatment-block__image-wrapper {
flex: 1;
max-width: 520px;
aspect-ratio: 4 / 3;
border-radius: 20px;
overflow: hidden;
flex-shrink: 0;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
.treatment-block__image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Адаптив для планшетов и мобильных устройств */
@media (max-width: 992px) {
.treatment-block__content {
flex-direction: column-reverse;
gap: 28px;
}
.treatment-block__info {
max-width: 100%;
}
.treatment-block__image-wrapper {
max-width: 100%;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 16px;
}
.treatment-block__title {
font-size: 28px;
margin-bottom: 24px;
}
.treatment-block__subtitle {
font-size: 18px;
margin-bottom: 16px;
}
.treatment-block__list li {
font-size: 14px;
}
}
/* Основная секция */
.recovery-block {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 20px 0;
box-sizing: border-box;
}
/* Заголовок */
.recovery-block__title {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 36px;
line-height: 1.2;
font-weight: 700;
color: #2c323d;
margin: 0 0 28px 0;
letter-spacing: -0.01em;
}
.recovery-block__highlight {
color: #0b63e6;
}
/* Вводные тексты */
.recovery-block__intro {
display: flex;
gap: 48px;
margin-bottom: 56px;
}
.recovery-block__text {
flex: 1;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 16px;
line-height: 1.45;
color: #555d68;
margin: 0;
max-width: 480px;
}
/* Линейка шагов */
.recovery-steps {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.recovery-step {
flex: 1;
display: flex;
justify-content: center;
}
/* Круглая плашка шага */
.recovery-step__circle {
width: 220px;
height: 220px;
background-color: #f7f8f9;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 24px 12px;
box-sizing: border-box;
cursor: pointer;
/* Анимация при взаимодействии */
transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
background-color 0.3s ease,
box-shadow 0.3s ease;
}
/* Размеры и плавность иконки */
.recovery-step__icon {
width: 56px;
height: 56px;
margin-bottom: 12px;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.recovery-step__icon svg {
width: 100%;
height: 100%;
display: block;
}
/* Описание шага */
.recovery-step__label {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 15px;
line-height: 1.25;
font-weight: 600;
color: #2c323d;
}
/* Межшаговые стрелки */
.recovery-steps__arrow {
width: 24px;
height: 24px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.recovery-steps__arrow svg {
width: 100%;
height: 100%;
}
/* Легкий ховер-эффект */
.recovery-step__circle:hover {
transform: translateY(-6px);
background-color: #ffffff;
box-shadow: 0 12px 32px rgba(11, 99, 230, 0.12);
}
.recovery-step__circle:hover .recovery-step__icon {
transform: scale(1.1);
}
/* Мобильная адаптивность */
@media (max-width: 992px) {
.recovery-block__intro {
flex-direction: column;
gap: 16px;
margin-bottom: 32px;
}
.recovery-steps {
flex-direction: column;
gap: 16px;
}
.recovery-steps__arrow {
transform: rotate(90deg);
margin: -4px 0;
}
.recovery-step__circle {
width: 100%;
max-width: 260px;
height: auto;
aspect-ratio: 1 / 1;
}
}
/* Основной контейнер */
.faq-block {
width: 100%;
max-width: 800px;
margin: 0 auto;
padding: 20px 0;
box-sizing: border-box;
}
/* Заголовок блока */
.faq-block__title {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 36px;
line-height: 1.2;
font-weight: 700;
color: #2c323d;
margin: 0 0 32px 0;
letter-spacing: -0.01em;
}
/* Список вопросов */
.faq-accordion {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Элемент аккордеона */
.faq-item {
background-color: #f7f8f9;
border-radius: 16px;
overflow: hidden;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
/* Шапка с вопросом */
.faq-item__header {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px 28px;
background: none;
border: none;
cursor: pointer;
text-align: left;
outline: none;
gap: 20px;
}
.faq-item__question {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 20px;
line-height: 1.3;
font-weight: 700;
color: #2c323d;
}
/* Иконка "+ / -" на чистом CSS */
.faq-item__icon {
position: relative;
width: 20px;
height: 20px;
flex-shrink: 0;
}
/* Горизонтальная линия */
.faq-item__icon::before {
content: '';
position: absolute;
top: 9px;
left: 0;
width: 20px;
height: 2px;
background-color: #2c323d;
border-radius: 1px;
}
/* Вертикальная линия (поворачивается при открытии) */
.faq-item__icon::after {
content: '';
position: absolute;
top: 0;
left: 9px;
width: 2px;
height: 20px;
background-color: #2c323d;
border-radius: 1px;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}
/* Скрываемая часть с ответом */
.faq-item__content {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item__answer {
padding: 0 28px 24px 28px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 15px;
line-height: 1.55;
color: #2c323d;
}
/* АКТИВНОЕ СОСТОЯНИЕ (Открытый вопрос) */
.faq-item--open {
background-color: #ffffff;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
/* Превращение плюс в минус при раскрытии */
.faq-item--open .faq-item__icon::after {
transform: rotate(90deg);
opacity: 0;
}
/* Ховер эффект */
.faq-item:not(.faq-item--open):hover {
background-color: #f0f2f5;
}
/* Адаптив для мобильных устройств */
@media (max-width: 768px) {
.faq-block__title {
font-size: 28px;
margin-bottom: 20px;
}
.faq-item__header {
padding: 18px 20px;
}
.faq-item__question {
font-size: 17px;
}
.faq-item__answer {
padding: 0 20px 20px 20px;
font-size: 14px;
}
}
/* Внешний контейнер (отступы вокруг карточки, чтобы выступающие элементы не задевали соседей) */
.installment-block {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px; /* Запас сверху и справа под вылет картинки */
box-sizing: border-box;
}
/* Основная карточка */
.installment-card {
position: relative;
width: 100%;
/* Фиксированная/минимальная высота карточки строго по пропорциям макета */
min-height: 320px;
background-color: #f7f8f9;
border-radius: 24px;
padding: 48px 56px;
box-sizing: border-box;
display: flex;
align-items: center;

/* СТРОГО ОБЯЗАТЕЛЬНО: картинка не будет обрезаться по краям */
overflow: visible;
}
/* Левая текстовая колонка */
.installment-card__content {
max-width: 520px;
z-index: 2; /* Текст находится под/над картинкой при необходимости */
}
/* Заголовок: точные размеры и интервалы */
.installment-card__title {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 50px;
line-height: 1.22; /* ~39px */
font-weight: 600;
color: #2c323d;
margin: 0 0 36px 0;
letter-spacing: -0.02em;
}
/* Основной текст: точные размеры */
.installment-card__text {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 34px;
line-height: 1.15; /* ~26px */
font-weight: 400;
color: #555d68;
margin: 0;
max-width: 520px;
}
/* Единая PNG-картинка с вылетом за границы */
.installment-card__image {
position: absolute;
/* Позиционирование относительно правого верхнего угла */
top: -28px;        /* Вылет НАВЕРХ за пределы карточки */
right: -18px;      /* Вылет ВПРАВО за пределы карточки */
height: 470px;     /* Высота изображения больше высоты самой карточки (320px) */
width: auto;
pointer-events: none;
z-index: 3;
}
/* Адаптив для планшетов и мобилок */
@media (max-width: 992px) {
.installment-card {
min-height: auto;
padding: 32px 24px 280px 24px; /* Отступ снизу под картинку */
flex-direction: column;
align-items: flex-start;
}
.installment-card__title {
font-size: 24px;
margin-bottom: 16px;
}
.installment-card__text {
font-size: 15px;
}
.installment-card__image {
top: auto;
bottom: -20px;
right: 50%;
transform: translateX(50%);
height: 260px;
}
}
/* Основной контейнер */
.conditions-section {
width: 100%;
max-width: 1140px;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* Главный заголовок */
.conditions-section__title {
font-size: 36px;
line-height: 1.2;
font-weight: 700;
color: #2c323d;
margin: 0 0 32px 0;
letter-spacing: -0.01em;
}
/* Лейаут: слева карточки, справа текст */
.conditions-section__layout {
display: flex;
align-items: flex-start;
gap: 40px;
}
/* Сетка с плашками */
.conditions-grid {
flex: 1;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 16px;
}
/* Карточки 1, 2, 3 занижают треть ширины (по 2 колонки) */
.condition-card:nth-child(1),
.condition-card:nth-child(2),
.condition-card:nth-child(3) {
grid-column: span 2;
}
/* Карточки 4, 5 занимают половину ширины (по 3 колонки) */
.condition-card:nth-child(4),
.condition-card:nth-child(5) {
grid-column: span 3;
}
/* Сама синяя карточка */
.condition-card {
background-color: #0b63e6;
border-radius: 20px;
padding: 20px 22px;
display: flex;
align-items: center;
gap: 14px;
box-sizing: border-box;
min-height: 100px;
}
/* SVG иконка */
.condition-card__icon {
width: 40px;
height: 40px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.condition-card__icon svg {
width: 100%;
height: 100%;
display: block;
}
/* Тексты внутри синей карточки */
.condition-card__content {
color: #ffffff;
}
.condition-card__label {
font-size: 16px;
font-weight: 700;
line-height: 1.25;
margin-bottom: 2px;
}
.condition-card__value {
font-size: 13px;
line-height: 1.35;
font-weight: 400;
opacity: 0.95;
}
/* Правый текстовый блок */
.conditions-info {
width: 260px;
flex-shrink: 0;
padding-top: 6px;
}
.conditions-info__title {
font-size: 18px;
line-height: 1.3;
font-weight: 700;
color: #111111;
margin: 0 0 20px 0;
}
.conditions-info__text {
font-size: 14px;
line-height: 1.4;
color: #666666;
margin: 0;
}
/* Адаптивность для мобильных и планшетов */
@media (max-width: 992px) {
.conditions-section__layout {
flex-direction: column;
}
.conditions-info {
width: 100%;
}
.conditions-grid {
grid-template-columns: 1fr;
}
.condition-card:nth-child(1),
.condition-card:nth-child(2),
.condition-card:nth-child(3),
.condition-card:nth-child(4),
.condition-card:nth-child(5) {
grid-column: span 1;
}
}
/* Основная секция */
.services-installment {
width: 100%;
max-width: 1140px;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* Заголовок блока */
.services-installment__title {
font-size: 36px;
line-height: 1.2;
font-weight: 700;
color: #2c323d;
margin: 0 0 32px 0;
letter-spacing: -0.01em;
}
/* Грид 3х2 */
.services-installment__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* Плашка карточки */
.service-card {
background-color: #f7f8f9;
border-radius: 20px;
padding: 36px 24px 32px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
text-decoration: none;
box-sizing: border-box;
min-height: 180px;
/* Плавные переходы для ховер-эффекта */
transition: transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1),
background-color 0.35s ease,
box-shadow 0.35s ease;
}
/* Контейнер иконки */
.service-card__icon {
width: 56px;
height: 56px;
margin-bottom: 20px;
flex-shrink: 0;
/* Плавное увеличение иконки */
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.service-card__icon svg {
width: 100%;
height: 100%;
display: block;
}
/* Название услуги */
.service-card__label {
font-size: 18px;
line-height: 1.3;
font-weight: 700;
color: #2c323d;
transition: color 0.3s ease;
}
/* === ХОВЕР-ЭФФЕКТ (При наведении) === */
.service-card:hover {
background-color: #ffffff;
/* Карточка приподнимается вверх */
transform: translateY(-8px);
/* Парящая мягкая тень */
box-shadow: 0 16px 36px rgba(11, 99, 230, 0.12);
}
/* Плавный пружинистый зум иконки при наведении */
.service-card:hover .service-card__icon {
transform: scale(1.12);
}
/* Подсветка текста синим оттенком */
.service-card:hover .service-card__label {
color: #0b63e6;
}
/* Адаптивность */
@media (max-width: 992px) {
.services-installment__grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
}
@media (max-width: 576px) {
.services-installment__title {
font-size: 26px;
margin-bottom: 20px;
}
.services-installment__grid {
grid-template-columns: 1fr;
}
.service-card {
padding: 28px 16px;
min-height: 150px;
}
}
.checkout-process {
width: 100%;
max-width: 1140px;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* === СИНИЙ БАННЕР CTA === */
.cta-banner-b {
  background-color: #0b63e6;
  border-radius: 20px;
  padding: 18px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 56px;
  box-sizing: border-box; /* Гарантирует правильный расчет паддингов */
}

.cta-banner-b__text {
  color: #ffffff;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.cta-banner-b__btn {
  background-color: #ffffff;
  color: #0b63e6;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  padding: 14px 32px;
  border-radius: 50px;
  white-space: nowrap;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; /* Предотвращает сжатие кнопки */
}

/* Ховер кнопки */
.cta-banner-b__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  background-color: #f8fafc;
}

.cta-banner-b__btn:active {
  transform: translateY(0);
}

/* ==========================================
   АДАПТИВНАЯ ВЕРСТКА (MEDIA QUERIES)
   ========================================== */

/* Планшеты и небольшие экраны (до 992px) */
@media (max-width: 992px) {
  .cta-banner-b {
    padding: 24px;
    margin-bottom: 40px;
  }
  
  .cta-banner-b__text {
    font-size: 18px;
  }

  .cta-banner-b__btn {
    font-size: 16px;
    padding: 12px 24px;
  }
}

/* Мобильные устройства (до 768px) */
@media (max-width: 768px) {
  .cta-banner-b {
    flex-direction: column; /* Перестраиваем в колонку */
    text-align: center;
    gap: 18px;
    padding: 20px 16px;
    border-radius: 16px;
  }

  .cta-banner-b__text {
    font-size: 16px;
    line-height: 1.3;
  }

  .cta-banner-b__btn {
    width: 100%; /* Кнопка во всю ширину */
    box-sizing: border-box;
    padding: 14px 20px;
  }
}

/* Маленькие смартфоны (до 380px) */
@media (max-width: 380px) {
  .cta-banner-b__text {
    font-size: 14px;
  }

  .cta-banner-b__btn {
    font-size: 15px;
  }
}


/* === СЕКЦИЯ «КАК ОФОРМИТЬ?» === */
.steps-block__title {
font-size: 38px;
line-height: 1.2;
font-weight: 700;
color: #2c323d;
margin: 0 0 32px 0;
letter-spacing: -0.01em;
}
.steps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
/* Шаг карточки */
.step-card {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 12px;
border-radius: 12px;
transition: background-color 0.3s ease, transform 0.3s ease;
}
/* Ховер карточки шага */
.step-card:hover {
background-color: #f7f8f9;
transform: translateY(-3px);
}
.step-card__num {
font-size: 15px;
line-height: 1.5;
font-weight: 400;
color: #555d68;
flex-shrink: 0;
}
.step-card__content {
font-size: 15px;
line-height: 1.5;
color: #555d68;
}
.step-card__bold {
font-weight: 600;
color: #2c323d;
display: inline;
margin-right: 4px;
}
/* Адаптив */
@media (max-width: 992px) {
.cta-banner {
flex-direction: column;
text-align: center;
padding: 24px;
}
.cta-banner__text {
font-size: 18px;
}
.cta-banner__btn {
width: 100%;
box-sizing: border-box;
}
.steps-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.steps-block__title {
font-size: 28px;
margin-bottom: 20px;
}
}
/* Общий контейнер */
.action-banner-section {
width: 100%;
max-width: 1140px;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* Синий баннер с градиентом */
.action-banner {
position: relative;
width: 100%;
min-height: 140px;
/* Плавный градиент слева направо */
background: linear-gradient(90deg, #0b63e6 0%, #0099ff 100%);
border-radius: 24px;
padding: 24px 36px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;

/* СТРОГОЕ ОГРАНИЧЕНИЕ: ничего не выходит за границы синего блока */
overflow: hidden;
}
/* Левый заголовок */
.action-banner__title {
font-size: 30px;
line-height: 1.15;
font-weight: 700;
color: #ffffff;
margin: 0;
z-index: 2;
white-space: nowrap;
flex-shrink: 0;
}
/* Контейнер для центрирования изображения в рамках блока */
.action-banner__image-wrap {
position: absolute;
left: 230px;
top: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 1;
}
/* Сама картинка (% + монеты) строго вписывается по высоте плашки */
.action-banner__image {
max-height: 100%;
width: auto;
object-fit: contain;
display: block;
}
/* Правая группа (текст + кнопка) */
.action-banner__right {
display: flex;
align-items: center;
gap: 32px;
z-index: 2;
margin-left: auto;
}
/* Описание */
.action-banner__info {
max-width: 320px;
color: #ffffff;
}
.action-banner__subtitle {
font-size: 17px;
line-height: 1.25;
font-weight: 700;
margin-bottom: 6px;
}
.action-banner__text {
font-size: 14px;
line-height: 1.35;
font-weight: 400;
opacity: 0.92;
}
/* Белая кнопка */
.action-banner__btn {
background-color: #ffffff;
color: #0b63e6;
font-size: 15px;
font-weight: 700;
text-decoration: none;
padding: 16px 32px;
border-radius: 50px;
white-space: nowrap;
transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* Ховер кнопки */
.action-banner__btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
background-color: #f8fafc;
}
.action-banner__btn:active {
transform: translateY(0);
}
/* Адаптивность для мобильных и планшетов */
@media (max-width: 992px) {
.action-banner {
flex-direction: column;
align-items: flex-start;
padding: 32px 24px;
gap: 24px;
}
.action-banner__image-wrap {
position: relative;
left: auto;
top: auto;
width: 100%;
height: 120px;
margin: 0 auto;
}
.action-banner__right {
flex-direction: column;
align-items: flex-start;
margin-left: 0;
gap: 20px;
width: 100%;
}
.action-banner__btn {
width: 100%;
box-sizing: border-box;
}
}