* { margin: 0; padding: 0; box-sizing: border-box; }
@font-face{font-family:"Benzin-Bold";font-display:swap;src:url(../fonts/Benzin-Bold.ttf) format("truetype");font-weight:700;font-style:normal}@font-face{font-family:"Benzin-ExtraBold";font-display:swap;src:url(../fonts/Benzin-ExtraBold.ttf) format("truetype");font-weight:800;font-style:normal}@font-face{font-family:"Benzin-Semibold";font-display:swap;src:url(../fonts/Benzin-Semibold.ttf) format("truetype");font-weight:600;font-style:normal}@font-face{font-family:"Benzin";font-display:swap;src:url(../fonts/Benzin-Medium.ttf) format("truetype");font-weight:500;font-style:normal}@font-face{font-family:"Benzin-Regular";font-display:swap;src:url(../fonts/Benzin-Regular.ttf) format("truetype");font-weight:400;font-style:normal}
   
html, body {overflow-x: hidden;}

body {
  background-color: #f9f9f9;
  padding: 20px;
}

/* Контейнер шапки */

.container{
  max-width: 82.5em;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* ВЕРХНЯЯ ПАНЕЛЬ */
.header-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

/* Логотип */
.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  gap: 10px;
}

.logo-icon {
  width: 30%;
  height: auto;
}

.logo-img {
  display: block;
  height: 56px;
  width: auto;
  object-fit: contain;
}

/* Кнопки действий */
.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.buttons-row {
  display: flex;
  gap: 6px;
}
.btn {
  border: none;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  transition: opacity 0.2s;
}
.btn:hover {
  opacity: 0.9;
}
.btn-dark { background-color: #3b4246; }
.btn-beige { background-color: #c4b19c; }
.btn-blue { background-color: #00a2f4; }
.btn-wide { width: 100%; text-align: center; }

/* Информационный блок */
.header-info {
  font-size: 12px;
  color: #555;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.info-item {
  position: relative;
  padding-left: 26px;
}
/* Заглушки под иконки */
.info-item::before {
  position: absolute;
  left: 0;
  top: 0;
}
.time::before { content: "🕒"; }
.address::before { content: "📍"; }
.metro::before { content: "🚇"; }

/* Номера телефонов */
.header-phones {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.phone-link {
  display: block;
  text-decoration: none;
  color: #fff;
  font-weight: 100;
  font-size: 20px;
  padding: 6px 18px;
  border-radius: 20px;
  text-align: center;
  font-family: "Benzin";
}

.phone-link-footer {
  display: block;
  text-decoration: none;
  color: #fff;
  font-weight: 100;
  padding: 6px 18px;
  border-radius: 20px;
  text-align: center;
  font-family: "Benzin";
}    
.phone-blue { background-color: #00a2f4; }
.phone-green { background-color: #317a4f; }
.phone-dark { background: linear-gradient(90deg, #333 0%, #5a5d62 100%); }

/* Версия для слабовидящих */
.accessibility-btn {
  background-color: #c4b19c;
  border: none;
  border-radius: 8px;
  color: #fff;
  padding: 6px 10px;
  font-size: 9px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.2;
}
.accessibility-btn .eye-icon {
  font-size: 14px;
  margin-bottom: 2px;
}

/* НИЖНЯЯ ПАНЕЛЬ (МЕНЮ) */
.header-nav-bar {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 15px;
}

.nav-menu {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  gap: 4px;
}
.nav-menu li a {
  display: block;
  background: linear-gradient(90deg, #333 0%, #5a5d62 100%);
  color: #fff;
  text-decoration: none;
  padding: 5px 7px;
  font-size: 14px;
  border-radius: 20px;
  transition: background-color 0.2s;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
}
.nav-menu li a:hover {
  background-color: #2e3539;
}

/* Поиск */
.search-box {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 20px;
  padding: 4px 10px;
  width: 180px;
}
.search-box input {
  border: none;
  outline: none;
  width: 100%;
  font-size: 10px;
  color: #333;
}
.search-box input::placeholder {
  color: #ccc;
}
.search-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  color: #ccc;
}

/* HEADER */

.promo-container {
    width: 100%;
}

/* Главный баннер */
.promo-banner {
    position: relative;
    width: 100%;
    height: 420px;
    border-radius: 12px;
    overflow: hidden;
    padding: 40px 60px;
    box-sizing: border-box;
    margin-top: 26px;
}

.promo-banner-okr{background-image: url(https://mipz.ru//wp-content/themes/mipz/assets/img/kurs-psiholog-konsultant/kurs-psiholog-konsultant-bg.png);background-size: cover;}
.promo-banner-trevoga{background: linear-gradient(90deg, #2379b9 0%, #85cea3 100%);}

.promo-container {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    height: 100%;
}

/* Левая часть: лого и кнопки */
.promo-left-side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.promo-logo {
  width: 170px;
  height: auto;
  display: block;
  margin-left: 70px;
}

.dist-logo {
  width: 226px;
  height: auto;
  display: block;
  margin-left: 70px;
}

.promo-person {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  display: block;
}

/* Кнопки */
.promo-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 450px;
}

.promo_banner_btn {
  display: block;
  width: 100%;
  border-radius: 25px;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.5px;
  box-sizing: border-box;
  font-family: "Benzin";
  padding: 5px;
  cursor: pointer;
}

.promo_banner_btn:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

.btn-blue { background-color: #007bff; color: #ffffff; }
.btn-green { background-color: #317a4f; color: #ffffff; }
.btn-dark { background: linear-gradient(90deg, #333 0%, #5a5d62 100%);; color: #ffffff; }

.promo-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #2b323a;
    text-align: right;
    max-width: 550px;
    align-items: flex-end;
}

.promo-subtitle { font-size: 13px; font-weight: 600; margin-bottom: 15px; display: block; font-family: 'Roboto', sans-serif;}
.promo-title { font-size: 34px; font-weight: 700; line-height: 1.2; margin-bottom: 25px; font-family: "Benzin";}
.promo-description { font-size: 15px; line-height: 1.5; margin-bottom: 20px; font-family: 'Roboto', sans-serif;}
.promo-footer-text { font-size: 13px; opacity: 0.8; font-family: 'Roboto', sans-serif;}

.image-wrapper {
  position: absolute;
  bottom: 0;          
  left: 23%;          
  width: 440px;       
  height: 380px;      
  display: flex;
  align-items: flex-end; 
  pointer-events: none; 
}

.promo-person {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom;
    display: block;
}

.okr-title{
  font-size: 24px;
  font-weight: 500;
  color: #1e1e1e;
  margin: 0 0 25px 0;
  letter-spacing: 1px;
  font-family: "Benzin";
  text-align: center;
}

.institute-advantages__main-title, .course-authors__main-title{
  display: inline-block;
  background: linear-gradient(90deg, #333 0%, #5a5d62 100%);
  color: #ffffff;
  font-size: 26px;
  font-weight: 700;
  padding: 12px 40px;
  border-radius: 50px;
  letter-spacing: 1px;
  font-family: "Benzin", sans-serif;
  text-align: center;
}

.program-bonus__header-desc{
  font-size: 20px;
  line-height: 1.45;
  color: #3e444f;
  font-family: "Benzin-Regular";
  margin-top: 26px;
}

.course-authors__btn-action:hover {
  background-color: #0077d6;
}
.course-authors__btn-action:active {
  transform: scale(0.98);
}

.course-authors__btn-action {
    font-family: "Benzin";
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    padding: 10px 45px;
    border-radius: 50px;
    letter-spacing: 0.5px;
    box-shadow: 0 8px 25px rgba(0, 145, 255, 0.3);
    transition: background-color 0.2s ease, transform 0.1s ease;
    position: relative;
    z-index: 2;
    cursor: pointer;
}

.institute-advantages__card-title, .card-inner h3, .doc-card h3, .tax-title, .card-text-content h3 {
  min-height: 85px; 
  margin-bottom: 20px;
  font-size: 26px;
  font-weight: 600;
  color: #2b3441;
  line-height: 1.15;
  letter-spacing: 1px;
  font-family: "Benzin";
}

.institute-advantages {
  width: 100%;
  margin-top: 26px;
}
.institute-advantages__container {
  margin: 0 auto;
}

/* Шапка блока — Большая темная капсула */
.institute-advantages__header {
  text-align: center;
  margin-bottom: 35px;
}

.title-wrapper{text-align: center;}

/* Сетка из 4-х карточек (2 в ряд на десктопе) */
.institute-advantages__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 35px;
}

/* Базовая карточка (Нежный серо-бежевый фон) */
.institute-advantages__card {
  background: linear-gradient(90deg, #c6b69c 0%, #dcd3c2 100%);
  border-radius: 28px;
  padding: 45px 45px 50px 45px; 
  height: auto; 
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
  position: relative !important; 
  overflow: visible !important;
}

/* Текстовый контейнер карточки */
.institute-advantages__card-content {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Описание внутри карточек */
.institute-advantages__card-text, .card-inner p, .doc-card p, .card-text-content p {
  font-size: 18px;
  line-height: 1.2;
  color: #3e444f;
  font-family: 'Roboto', sans-serif;
  margin-top: 0;
  max-width: 80%; 
}
.institute-advantages__card-text strong {
  font-weight: 700;
  color: #2b3441;
}

/* --- ЖЕЛЕЗОБЕТОННОЕ ПОЗИЦИОНИРОВАНИЕ ИКОНОК НА УГЛАХ С ВЫЛЕТОМ --- */
.institute-advantages__card-badge {
  position: absolute;
  right: 26px;
  bottom: 26px;
}

/* Круглые темные фишки-иконки */
.institute-advantages__card-badge img {
  width: 110px;
  height: auto;
  display: block;
  max-width: none;
}

/* --- НИЖНЯЯ КНОПКА ДЕЙСТВИЯ (Синяя капсула) --- */
.institute-advantages__footer {
  text-align: center;
}
.institute-advantages__btn-action {
  font-family: 'Arial', sans-serif;
  font-size: 15px;
  font-weight: 800;
  background-color: #0091ff;
  color: #ffffff;
  text-decoration: none;
  padding: 16px 50px;
  border-radius: 50px; /* Идеально скругленные края капсулы */
  letter-spacing: 0.5px;
  box-shadow: 0 4px 15px rgba(0, 145, 255, 0.25);
  transition: background-color 0.2s ease, transform 0.1s ease;
  display: inline-block;
}
.institute-advantages__btn-action:hover {
  background-color: #0077d6;
}
.institute-advantages__btn-action:active {
  transform: scale(0.98);
}

.course-authors {
  width: 100%;
  margin: 100px auto 0;
}

/* Шапка блока */
.course-authors__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 50px;
}

/* Сетка контента спикеров */
.course-authors__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  position: relative;
  margin-bottom: 50px;
}

/* Полупрозрачная центральная печать института */
.course-authors__watermark {
  position: absolute;
  top: 200px;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  opacity: 0.15;
  pointer-events: none;
}
.course-authors__watermark img {
  width: 326px;
  height: auto;
  display: block;
}

/* Контейнер одного спикера */
.course-authors__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 2;
}

/* Обертка для круглых фотографий (задаем бежевую подложку) */
.course-authors__photo-wrapper {
  width: 426px;
  height: 426px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 50px;
}

/* Фото спикера */
.course-authors__photo {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Темные плашки-имена */
.course-authors__name-badge {
  background-color: #3e444f;
  color: #ffffff;
  font-size: 20px;
  font-family: "Benzin";
  padding: 10px 40px;
  border-radius: 50px;
  margin-bottom: 25px;
  letter-spacing: 1px;
  font-weight: bold;
}

/* Описание биографии */
.course-authors__bio {
  font-size: 20px;
  line-height: 1.2;
  color: #3e444f;
  max-width: 440px;
  font-family: 'Roboto', sans-serif;
}
.course-authors__bio strong {
  font-weight: 700;
  color: #2b3441;
}

/* Нижняя кнопка подвала */

.course-authors__btn-action:hover {
  background-color: #0077d6;
}
.course-authors__btn-action:active {
  transform: scale(0.98);
}

.promo-header {
    text-align: center;
    margin-bottom: 40px;
}

.highlight-text {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 10px;
    line-height: 1.4;
}

.main-title {
    font-size: 24px;
    font-weight: 700;
    color: #333333;
    margin-bottom: 5px;
}

.subtitle {
    font-size: 16px;
    color: #666666;
}

/* Сетка карточек */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 50px;
}

.feature-card {
    background: linear-gradient(90deg, #a3cfae 0%, #ded7c7 100%);
    border-radius: 20px;
    padding: 30px;
    position: relative;
    overflow: hidden;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-content {
    position: relative;
    z-index: 2;
    max-width: 80%;
}

.card-prefix {
    font-size: 54px;
    font-weight: bold;
    color: #333333;
    margin-right: 5px;
    font-family: "Benzin";
}

.card-number {
    font-size: 50px;
    font-weight: 800;
    color: #333333;
    line-height: 0.7;
    font-family: "Benzin";
}

.card-title {
    font-size: 40px;
    font-weight: 800;
    color: #333333;
    line-height: 1;
    font-family: "Benzin";
}

.card-subtitle {
    font-family: 'Benzin', sans-serif;
    font-weight: 800;
    font-size: 20px;
    line-height: 1.2;
    color: #333333;
}

.card-desc {
    font-size: 16px;
    color: #3e4643;
}

/* Позиционирование картинок внутри карточек (как на макете) */
.card-img {
    position: absolute;
    bottom: 0px;
    right: 20px;
    width: 150px;
    height: auto;
    z-index: 1;
    pointer-events: none;
}

/* Основной контейнер секции */
.promo-block {
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* Ограничитель ширины экрана и главный позиционный ориентир */
.promo-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr 1fr; /* Ровное деление экрана на две зоны */
    align-items: center;
    position: relative;
    min-height: 450px;
}

/* --- ЛЕВАЯ ЗОНА (КОНТЕНТ) --- */
.promo-left-zone {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; /* Все элементы прижаты влево */
    gap: 45px; /* Большой отступ между плашкой и кнопками как на картинке */
    padding-left: 20px;
}

/* Контейнер 3D плашки */
.start-badge-box {
    width: 100%;
    max-width: 326px;
    transform: rotate(-2deg);
}

.badge-img {
    display: block;
    width: 100%;
    height: auto;
}

/* Контейнер кнопок */
.promo-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 450px;
}

/* --- ПРАВАЯ ЗОНА (КРУГЛОЕ ФОТО) --- */
.promo-image-zone {
    display: flex;
    justify-content: center; /* Центрируем круг во второй половине экрана */
    align-items: center;
}

/* Идеальная круглая маска под фото */
.circle-mask {
    width: 420px;
    height: 420px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
}

.expert-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* --- АБСОЛЮТНЫЕ ЭЛЕМЕНТЫ (ПЕЧАТЬ) --- */
.gold-seal-box {
    position: absolute;
    top: 50px;
    right: 20px;
    width: 170px;
    height: 95px;
    pointer-events: none;
}

.seal-img {
    width: 100%;
    height: auto;
}

.header-badge-container {
    text-align: center;
    margin-bottom: 40px;
}

.mipz-features-block, .learning-program-block, .program-accordion-block, .institute-advantages__header-two, .students-learning-block, .community-section, .real-client-block, .for-whom-section, .pricing-section, .faq-promo-section {
  margin-top: 26px;
}
.program-bonus__header-desc-two{
    font-size: 20px;
    line-height: 1.45;
    color: #3e444f;
    font-family: "Benzin-Regular";
    margin: 26px auto;
    width: 75%;
}

.why-badge {
  display: inline-block;
  background: linear-gradient(90deg, #333 0%, #5a5d62 100%);
  color: #ffffff;
  font-size: 26px;
  font-weight: 700;
  padding: 12px 40px;
  border-radius: 50px;
  letter-spacing: 1px;
  font-family: "Benzin", sans-serif;
  text-align: center;
}

.real-client-block-button {
    display: inline-block;
    background: linear-gradient(90deg, #333 0%, #5a5d62 100%);
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    padding: 12px 40px;
    border-radius: 50px;
    letter-spacing: 1px;
    font-family: "Benzin", sans-serif;
    text-align: center;
}

.course-authors__btn-action {
  font-family: "Benzin";
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  padding: 10px 45px;
  border-radius: 50px;
  letter-spacing: 0.5px;
  box-shadow: 0 8px 25px rgba(0, 145, 255, 0.3);
  transition: background-color 0.2s ease, transform 0.1s ease;
  position: relative;
  z-index: 2;
  cursor: pointer;
}

.course-authors__header-desc{ 
  max-width: 1020px;
  line-height: 1.35;
  color: #3e444f;
  margin-top: 26px;
  font-family: "Benzin-Regular";
  font-size: 20px;
}

/* --- СЕТКИ ИЗ КАРТОЧЕК --- */
.program-bonus__grid {
  display: grid;
  gap: 25px;
}
.program-bonus__grid--triple {
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 25px;
}
.program-bonus__grid--double {
  grid-template-columns: repeat(2, 1fr);
}

/* Общий базовый стиль для всех карточек */
.program-bonus__card {
  border-radius: 24px;
  padding: 35px 30px 45px 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
  height: auto;
  background: linear-gradient(90deg, #c6b69c 0%, #dcd3c2 100%);
  position: relative !important; 
  overflow: visible !important;
}

.program-bonus__card-number{
  font-size: 7em;
  font-weight: 900;
  color: #333333;
  line-height: 0.8;
  font-family: "Benzin";
}

.benefit-num{
  font-size: 7em;
  font-weight: 800;
  color: #333333;
  line-height: 0.8;
  font-family: "Benzin";
}

.program-bonus__card-info, .module-info {
  display: flex;
  flex-direction: column;
  width: 80%;
}

/* Шапка внутренней карточки (Цифра + Заголовок) */
.program-bonus__card-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  min-height: 56px; 
  margin-bottom: 20px;
  align-items: start;
}

/* Заголовок шага */
.program-bonus__card-title {
  font-size: 22px;
  color: #3e444f;
  line-height: 1.2;
  font-family: "Benzin";
  width: 360px;
}

/* Описание внутри карточек */
.program-bonus__card-text, .process-text p, .module-info p {
  font-size: 16px;
  line-height: 1.2;
  color: #3e444f;
  font-family: 'Roboto', sans-serif;
  margin-top: 0;
  max-width: 80%; 
}

/* --- ЖЕЛЕЗОБЕТОННОЕ ПОЗИЦИОНИРОВАНИЕ ИКОНОК НА УГЛАХ С ВЫЛЕТОМ --- */
.program-bonus__card-badge, .program-bonus-card-badge-icon, .module-badge {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 25px;
}

/* Круглые 3D-значки */
.program-bonus__card-badge img, .module-badge img {
  width: 125px;
  height: auto;
  display: block;
  max-width: none;
}

/* Секция средней части (Платформа) */
.platform-section {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 60px;
}

.platform-left {
    flex: 1;
    display: flex;
    justify-content: center;
}

.photo-wrapper {
    position: relative;
    width: 360px;
    height: auto;
}

.students-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.round-seal {
    position: absolute;
    bottom: -40px;
    right: 20px;
    width: 126px;
    height: 126px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.platform-right {
    flex: 1.3;
    font-family: "Benzin";
}

.platform-subtitle {
    font-size: 20px;
    color: #333;
    margin-bottom: 20px;
    line-height: 1.4;
    font-family: "Benzin";
}

.platform-title {
    font-size: 30px;
    font-weight: 800;
    color: #333333;
    line-height: 1.3;
    margin-bottom: 36px;
    font-family: "Benzin";
}

.platform-desc {
  font-size: 26px;
  font-weight: 300;
  color: #333333;
  margin-bottom: 30px;
}

.how-it-works-badge {
    display: inline-block;
    background-color: #4a4d46;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 25px;
    border-radius: 8px;
    letter-spacing: 0.5px;
}

/* Нижняя сетка из 3-х вертикальных цветных карточек */
.process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.process-card {
    border-radius: 30px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    background: linear-gradient(90deg, #a3cfae 0%, #ded7c7 100%);
}

.process-text{
  padding: 25px 20px;
}

.online-program__card-image-wrapper{
    width: 100%;
    height: 250px;
    margin-top: auto;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    overflow: hidden;
}

.online-program__card-image-wrapper img
 {
    width: auto;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
    display: block;
}

.process-text h3 {
    font-size: 36px;
    font-weight: 800;
    color: #333333;
    margin-bottom: 15px;
    font-family: "Benzin", bold;
    line-height: 1.1;
}

.process-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    margin-top: 15px;
}

/* Нижняя кнопка */
.footer-action {
    text-align: center;
    margin-top: 30px;
}

.btn-price {
  font-family: "Benzin", sans-serif;
  display: inline-block;
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  padding: 10px 45px;
  border-radius: 50px;
  transition: background-color 0.2s ease, transform 0.1s ease;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 15px rgba(0, 145, 255, 0.2);
  background-color: #0091ff;
  text-align: center;
}

.btn-action-blue{
  background-color: #0091ff;
}

.btn-price:hover {
    transform: translateY(-2px);
}

.main-title-container {
    text-align: center;
    margin-bottom: 30px;
}

.main-badge-title {
    display: inline-block;
    background-color: #4a4d46;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    padding: 12px 35px;
    border-radius: 15px;
    letter-spacing: 0.5px;
}

/* Вводный текст */
.intro-text {
  text-align: center;
  margin: 0 auto 26px;
  width: 60%;
}  

.intro-text p {
  font-size: 20px;
  line-height: 1.45;
  color: #3e444f;
  font-family: "Benzin-Regular";
}

/* Темный центральный баннер */
.dark-banner{background-image: url(https://mipz.ru//wp-content/themes/mipz/assets/img/kurs-psiholog-konsultant/dark-banner-bg.png);background-size: cover;}

.dark-banner {
    border-radius: 30px;
    padding: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
}

/* Декоративный легкий волнистый узор на фоне баннера (опционально) */
.dark-banner::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.03) 0%, transparent 50%);
    pointer-events: none;
}

.banner-content {
    flex: 1.5;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.learning-program-block-banner-logo {
  display: flex;
  justify-content: left;
  gap: 10px;
  margin-bottom: 35px;
  margin-left: 35px;
}

.learning-program-block-banner-text {
  color: #ffffff;
  font-size: 22px;
  line-height: 1.4;
  max-width: 750px;
  margin: 0 auto;
  font-family: "Benzin-Regular";
}

.learning-program-block-banner-text strong {
    color: #ffffff;
}

/* Блок под 3D графику справа */
.banner-graphics {
    flex: 0.7;
    position: relative;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-graphics img{
  width: 85%;
}

/* Сетка 2х2 с модулями обучения */
.modules-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin-bottom: 50px;
}

.module-card {
  border-radius: 24px;
  padding: 35px 30px 45px 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
  height: 260px;
  position: relative !important;
  overflow: visible !important
}

/* Цвета плашек (соответствуют палитре макета) */
.module-card-bg-right { background: linear-gradient(90deg, #ded7c7 0%, #a3cfae 100%); }
.module-card-bg-left { background: linear-gradient(90deg, #a3cfae 0%, #ded7c7 100%); }

.module-info h3, .section-middle-title h2, .main-title {
  font-size: 36px;
  font-weight: 800;
  color: #333333;
  margin-bottom: 30px;
  font-family: "Benzin", bold;
  line-height: 1.1;
}

.main-title span{margin-right: 100px;}

/* Секция подвальной кнопки действия */
.action-footer, .course-authors__footer {
    text-align: center;
}

.btn-places {
    display: inline-block;
    background: linear-gradient(90deg, #3bbbf2, #1a9ee2);
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    padding: 15px 45px;
    border-radius: 25px;
    box-shadow: 0 4px 15px rgba(26, 158, 226, 0.4);
    letter-spacing: 0.5px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-places:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(26, 158, 226, 0.5);
}

/* Верхняя часть заголовка */
.header-container {
    text-align: center;
    margin-bottom: 50px;
}

.program-badge {
    display: inline-block;
    background-color: #4a4d46;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    padding: 12px 40px;
    border-radius: 15px;
    letter-spacing: 0.5px;
    margin-bottom: 25px;
}

.program-subtitle {
  text-align: center;
  margin: 26px auto;
  width: 55%;
  font-size: 20px;
  line-height: 1.25;
  color: #333333;
  font-family: "Benzin";
  font-weight: 500;
}

/* Основная сетка контента */
.program-content {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

/* Левая инфо-панель */
.info-left {
    flex: 0.8;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: sticky;
    top: 20px; /* Чтобы левая часть красиво оставалась на месте при скролле аккордеона */
}

.modules-counter {
    margin-bottom: 30px;
}

.big-number {
    display: block;
    font-size: 140px;
    font-weight: 900;
    color: #333333;
    line-height: 0.8;
    font-family: "Benzin";
}

.counter-text {
    display: block;
    font-size: 28px;
    font-weight: 800;
    color: #333333;
    letter-spacing: 1px;
    margin-top: 15px;
    font-family: "Benzin";
}

.seal-img {
    max-width: 190px;
    height: auto;
}

/* Правая сторона: Конструкция аккордеона */
.accordion-right {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.accordion-item {
    background-color: #ebebeb; /* Светло-серые плашки как на макете */
    border-radius: 25px;
    overflow: hidden;
    transition: background-color 0.3s ease;
}

/* Шапка элемента (Кнопка) */
.accordion-header {
    width: 100%;
    background: none;
    border: none;
    outline: none;
    padding: 15px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    text-align: left;
}

.item-title {
    font-size: 15px;
    font-weight: 600;
    color: #4a4d46;
}

/* Кастомная стрелочка на чистом CSS */
.accordion-arrow {
    width: 10px;
    height: 10px;
    border-right: 2px solid #7a7a7a;
    border-bottom: 2px solid #7a7a7a;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
    margin-right: 5px;
    flex-shrink: 0;
}

/* Скрытая выпадающая контентная область */
.accordion-collapse {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.accordion-body {
    padding: 0 25px 20px 25px;
    font-size: 14px;
    line-height: 1.5;
    color: #555555;
}

/* Состояния при раскрытии (Класс active добавляется через JS) */
.accordion-item.active {
    background-color: #e0e0e0; /* Слегка темнеет при открытии */
}

.accordion-item.active .accordion-arrow {
    transform: rotate(-135deg); /* Поворот стрелки вверх */
}

/* Верхняя плашка */
.top-title-container {
    margin-bottom: 40px;
}

.top-badge {
    display: inline-block;
    background-color: #273030;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    padding: 10px 35px;
    border-radius: 12px;
    letter-spacing: 0.5px;
}

/* Секция со списком и картинкой */
.main-intro-section {
    display: flex;
    align-items: center;
}

.intro-left {
    flex: 1.2;
}

/* Маркированный список (Кастомные галочки) */
.learning-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 30px;
}

.learning-list li {
  font-size: 20px;
  line-height: 1.1;
  color: #333333;
  position: relative;
  padding-left: 36px;
  font-family: 'Roboto', sans-serif;
}

/* Отрисовка галочки перед пунктами списка */
.learning-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 20px;
  height: 20px;
  background-color: #3e444f;
  border-radius: 50%;
}

.learning-list li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 7px;
  width: 9px;
  height: 12px;
  border: solid #ffffff;
  border-width: 0 3.5px 3.5px 0;
  transform: rotate(45deg);
}

/* Кнопка "Задать вопрос менеджеру..." */
.action-btn-container {
    display: inline-block;
}

.btn-ask {
    display: inline-block;
    background: linear-gradient(90deg, #3bbbf2, #1a9ee2);
    color: #ffffff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    padding: 14px 25px;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(26, 158, 226, 0.3);
    letter-spacing: 0.5px;
    transition: transform 0.2s;
}

.btn-ask:hover {
    transform: translateY(-2px);
}

/* Секция картинки */
.intro-right {
    flex: 1;
    display: flex;
    justify-content: center;
}

.experts-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0 0 0 120px; /* Характерный срез угла овала как на макете */
    object-fit: cover;
}

/* Круглая печать, заходящая под изображение */
.seal-badge {
    position: absolute;
    bottom: -35px;
    left: -35px;
    width: 115px;
    height: 115px;
    background-color: #ffffff;
    border-radius: 50%;
    padding: 4px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

.seal-badge img {
    width: 100%;
    height: auto;
    border-radius: 50%;
}

/* Средний заголовок */
.section-middle-title {
    margin-bottom: 40px;
}

/* Сетка преимуществ 2х2 */
.experts-advantages-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.advantage-card {
    background-color: #dcd8cd; /* Родной бежево-серый оттенок блоков МИПЗ */
    border-radius: 25px;
    padding: 35px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    min-height: 250px;
}

.card-inner {
    z-index: 2;
    max-width: 85%;
}

/* Черные круглые иконки в углах карточек */
.card-icon-black {
    position: absolute;
    bottom: 25px;
    right: 25px;
    width: 55px;
    height: 55px;
    background-color: #242424;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.card-icon-black-dop img{
    position: absolute;
    bottom: 25px;
    right: 25px;
    width: 126px;
    height: 126px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    z-index: 1;
}

/* 1. Верхний темный баннер */
.diploma-dark-banner {
    background-image: url(https://mipz.ru//wp-content/themes/mipz/assets/img/kurs-psiholog-konsultant/dark-banner-bg.png);
    background-size: cover;
    border-radius: 30px;
    padding: 30px 50px;
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 40px;
    position: relative;
    overflow: visible;
}

/* Левая часть баннера с 3D-книгой */
.banner-left-graphics {
    flex: 0.8;
    display: flex;
    justify-content: center;
    position: relative;
}

.diploma-cover-img {
    max-width: 260px;
    height: auto;
    filter: drop-shadow(5px 10px 20px rgba(0, 0, 0, 0.4));
    transform: rotate(-3deg);
}

/* Правая контентная часть баннера */
.banner-right-content {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: right;
    margin-right: 70px;
}

/* Логотип в шапке баннера */
.banner-header-logo {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.inst-logo-icon {
    font-size: 24px;
    color: #ffffff;
}

.inst-logo-text {
    font-size: 10px;
    font-weight: 700;
    color: #b5b8ba;
    letter-spacing: 0.5px;
    line-height: 1.3;
}

/* Главный и второстепенный текст */
.banner-main-text {
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    max-width: 750px;
    margin-left: auto; /* Смещаем к правому краю */
}

.banner-sub-text {
    color: #ffffff;
    font-size: 20px;
    line-height: 1.3;
    opacity: 0.9;
    font-family: "Benzin-Regular";
}

.banner-sub-text-dop{
  color: #000000;
  font-size: 20px;
  line-height: 1.3;
  opacity: 0.9;
  font-family: "Benzin-Regular";
}

/* 2. Сетка с документами (дипломами) */
.diploma-documents-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.document-card {
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Легкая тень вокруг сканов */
    display: flex;
    justify-content: center;
    align-items: center;
}

.diploma-scan-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* --- ВЕРХНЯЯ ТЕКСТОВАЯ ЧАСТЬ --- */
.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.header-badge {
    display: inline-block;
    background-color: #273030;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    padding: 10px 35px;
    border-radius: 12px;
    letter-spacing: 0.5px;
    margin-bottom: 25px;
}

.header-title {
    font-size: 16px;
    font-weight: 600;
    color: #4a4d46;
    line-height: 1.5;
    max-width: 850px;
    margin: 0 auto 20px auto;
}

.header-title span {
    font-weight: 800;
}

.header-subtitle {
    font-size: 15px;
    font-weight: bold;
    color: #555555;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.4;
}

/* --- СЕТКА КАРТОЧЕК 2х2 --- */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    align-items: stretch; /* Растягивает карточки в ряду до одинаковой высоты */
}

.step-card {
    border-radius: 35px;
    padding: 40px 35px;
    display: flex;
    position: relative;
    gap: 25px;
    overflow: hidden;
}

/* Цвета плашек (оригинальная палитра МИПЗ) */
.bg-green {
    background-color: #cae1d4;
}

.bg-beige {
    background-color: #dcd8cd;
}

/* Номера блоков (1, 2, 3, 4) */
.card-left-num {
    font-size: 90px;
    font-weight: 900;
    color: #4a4d46;
    line-height: 0.8;
    opacity: 0.9;
    user-select: none;
}

/* Текстовое наполнение внутри карточки */
.card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 2;
}

.card-body h3 {
    font-size: 24px;
    font-weight: 800;
    color: #38423b;
    line-height: 1.2;
}

.card-body p {
    font-size: 16px;
    line-height: 1.2;
    color: #333333;
    font-family: 'Roboto', sans-serif;
}

/* Внутренние списки в карточках */
.card-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.card-list li {
    position: relative;
    padding-left: 15px;
    font-size: 16px;
    line-height: 1;
    color: #333333;
    font-family: 'Roboto', sans-serif;
}

.card-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #4f5752;
    font-weight: bold;
}

.card-list.bold-items li {
    padding-left: 0;
}
.card-list.bold-items li::before {
    content: "";
}

/* Синие круглые 3D-значки в нижнем правом углу */
.card-3d-badge {
    position: absolute;
    bottom: 25px;
    right: 25px;
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, #69bde1, #2196f3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(33, 150, 243, 0.35);
    z-index: 1;
    transform: rotate(5deg);
}

/* --- ШАПКА БЛОКА --- */
.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.header-badge {
    display: inline-block;
    background-color: #333333;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    padding: 12px 40px;
    border-radius: 15px;
    letter-spacing: 0.5px;
    margin-bottom: 25px;
}

.header-subtitle {
    font-size: 20px;
    font-weight: 500;
    color: #333333;
    max-width: 800px;
    margin: 26px auto;
    line-height: 1.3;
    font-family: "Benzin-Regular";
}

.line {
  border: none; 
  height: 2px;
  background-color: #333;
  margin: 20px auto;
  max-width: 800px;
}

/* --- СЕТКА КАРТОЧЕК --- */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: stretch; /* Растягивает все карточки в ряду до одинаковой высоты */
}

.community-card {
    background: linear-gradient(90deg, #c6b69c 0%, #dcd3c2 100%);
    border-radius: 25px;
    padding: 36px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    position: relative;
    min-height: 380px;
    overflow: hidden;
}

/* Контентная часть (заголовки и параграфы) */
.card-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.community-card h3 {
    font-size: 20px;
    font-weight: 800;
    color: #38423b;
    line-height: 1.3;
    font-family: "Benzin";
}

/* Круглые черные объемные иконки снизу */
.card-icon-black {
    width: 65px;
    height: 65px;
    background-color: #242424;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #ffffff;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
    margin-top: 25px;
    flex-shrink: 0; /* Защищает иконку от сжатия при длинном тексте */
    transition: transform 0.3s ease;
}

/* Небольшой интерактивный эффект при наведении */
.community-card:hover .card-icon-black {
    transform: scale(1.05);
}

/* --- ВЕРХНЯЯ ЧАСТЬ: ИНТРО --- */
.intro-section {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 40px;
}

.intro-left-image {
    flex: 1;
    display: flex;
    justify-content: center;
}

/* Контейнер под круглое фото девушки */
.expert-photo-container {
    position: relative;
    width: 320px;
    height: 320px;
}

.expert-img {
    width: 70%;
    height: 100%;
    object-fit: cover;
    border-radius: 50% 50% 0 50%; /* Срез под овал, аналогично прошлым блокам */
}

/* Золотая печать института на фоне за головой */
.gold-seal {
    position: absolute;
    top: 0;
    right: -20px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    padding: 4px;
}

.gold-seal img {
    width: 100%;
    height: auto;
    border-radius: 50%;
}

.intro-right-text {
    flex: 1.5;
    text-align: right; /* Текст прижат к правому краю по макету */
}

.main-desc {
  color: #333333;
  max-width: 620px;
  margin-left: auto;
  font-size: 20px;
  line-height: 1.3;
  opacity: 0.9;
  font-family: "Benzin-Regular";
  margin-bottom: 26px;
}

/* --- ТЕМНАЯ ПЛАШКА РАЗДЕЛИТЕЛЬ --- */
.badge-row {
    text-align: center;
    margin-bottom: 40px;
}

.dark-status-badge {
    display: inline-block;
    background-color: #273030;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    padding: 14px 45px;
    border-radius: 20px;
    letter-spacing: 0.5px;
}

/* --- СЕТКА КАРТОЧЕК 2х2 --- */
.documents-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.doc-card {
    border-radius: 30px;
    padding: 35px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
    min-height: 220px;
    background: linear-gradient(90deg, #a3cfae 0%, #ded7c7 100%);
}

.doc-card-content {
    flex: 1;
    max-width: 80%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Голубые глянцевые 3D-иконки в углу */
.blue-3d-badge img{
    width: 126px;
    height: 126px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transform: rotate(5deg);
}

/* --- ОБЩИЕ ПЛАШКИ-ЗАГОЛОВКИ --- */
.badge-row {
    text-align: center;
    margin-bottom: 30px;
}

.top-badge, .format-badge {
    display: inline-block;
    background-color: #4a4d46; /* Темный графитовый цвет */
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    padding: 12px 40px;
    border-radius: 15px;
    letter-spacing: 0.5px;
}

/* --- ВЕРХНИЙ ТЕМНЫЙ БАННЕР --- */
.program-intro-banner {
    background-image: url(https://mipz.ru//wp-content/themes/mipz/assets/img/kurs-psiholog-konsultant/dark-banner-bg.png);
    background-size: cover;
    border-radius: 30px;
    padding: 35px 60px;
    text-align: center;
    position: relative;
    margin-bottom: 40px;
    overflow: hidden;
}

.banner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 15px;
}

.banner-logo .logo-icon {
    font-size: 18px;
}

.banner-logo .logo-text {
    font-size: 10px;
    color: #b5b5b5;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.banner-text {
    color: #ffffff;
    font-size: 20px;
    line-height: 1.3;
    max-width: 950px;
    margin: 0 auto;
    font-family: "Benzin-Regular";
}

/* Стилизация декоративных веточек по бокам текста */
.laurel-left, .laurel-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 32px;
    opacity: 0.3;
    user-select: none;
}
.laurel-left { left: 25px; }
.laurel-right { right: 25px; transform: translateY(-50%) scaleX(-1); }


/* --- ГЛАВНАЯ КАРТОЧКА СТОИМОСТИ --- */
.pricing-main-card {
    background-image: url(https://mipz.ru//wp-content/themes/mipz/assets/img/kurs-psiholog-konsultant/dark-banner-bg.png);
    background-size: cover;
    border-radius: 35px;
    padding: 50px;
    position: relative;
    overflow: hidden;
}

/* Легкие декоративные волны на фоне карточки */
.pricing-main-card::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 250px; height: 250px;
    background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 70%);
    pointer-events: none;
}

/* Ряд шапки: Тег "Дистанционно" + Дата */
.card-header-row {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-bottom: 35px;
}

.format-tag {
    background-color: #ffffff;
    color: #232526;
    font-size: 26px;
    font-weight: 900;
    padding: 10px 40px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    font-family: "Benzin";
}

.start-date {
    color: #ffffff;
    font-size: 26px;
    font-weight: 700;
    font-family: "Benzin-Regular";
}

/* Обертка контента */
.card-content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
}

.prices-info {
    flex: 1.3;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.prices-title {
    color: #ffffff;
    font-size: 26px;
    font-weight: 700;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 10px;
    font-family: "Benzin-Regular";
}

/* Блоки с ценами */
.price-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.price-line {
    color: #ffffff;
    font-size: 20px;
    line-height: 1.4;
    font-family: "Benzin-Regular";
}

.price-sub-line {
    color: #b5b5b5;
    font-size: 20px;
    padding-left: 10px;
    font-family: "Benzin-Regular";
}

/* Цвет выделения для цен */
.blue-text {
    color: #3bbbf2;
    font-weight: 800;
}

.old-price {
    /*text-decoration: line-through;*/
    font-weight: 600;
}

.new-price, .sub-price {
    font-size: 20px;
    font-family: "Benzin-Regular";
}

.grant-line {
    font-weight: bold;
}

/* Кнопки действий */
.pricing-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
}

.btn {
    display: block;
    text-align: center;
    padding: 12px 20px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-gradient {
    background: linear-gradient(90deg, #3bbbf2, #1a9ee2);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(26, 158, 226, 0.3);
}

.btn-white {
    background-color: #ffffff;
    color: #232526;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
}

/* Правая сторона: Графика */
.prices-graphics {
    flex: 0.8;
    display: flex;
    justify-content: flex-end;
}

.laptop-img {
    max-width: 240px;
    height: auto;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3));
}

/* --- ВЕРХНИЕ ТЕКСТОВЫЕ ССЫЛКИ --- */
.top-links {
    text-align: center;
    font-size: 16px;
    color: #666666;
    line-height: 1.5;
    margin-bottom: 30px;
    margin-top: 30px;
    font-family: 'Roboto', sans-serif;
}

.policy-link {
    color: #666666;
    text-decoration: none;
}

/* --- БЛОК НАЛОГОВОГО ВЫЧЕТА --- */
.tax-refund-banner {
    background: linear-gradient(90deg, #a3cfae 0%, #ded7c7 100%);
    border-radius: 30px;
    padding: 26px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
    position: relative;
    overflow: hidden;
}

.tax-content {
    flex: 1.5;
}

.tax-text {
    color: #4f5752;
    font-size: 20px;
    color: #333;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.4;
    font-family: "Benzin";
}

.tax-graphics {
    flex: 0.5;
    display: flex;
    justify-content: flex-end;
}

.ruble-img {
    max-width: 200px;
    height: auto;
    filter: drop-shadow(0 8px 15px rgba(0,0,0,0.08));
}

/* --- ЦЕНТРАЛЬНАЯ ЧАСТЬ С ПРИЗЫВОМ --- */
.cta-middle-section {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 50px;
}

.cta-left-image {
    flex: 1;
    display: flex;
    justify-content: center;
}

.photo-container {
    position: relative;
    width: 280px;
    height: 280px;
}

.students-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50% 50% 0 50%; /* Наклонный срез овала под стиль остальных блоков */
    position: relative;
    z-index: 2;
}

.institute-badge-bg {
    position: absolute;
    top: 10px;
    right: -25px;
    width: 110px;
    height: 110px;
    padding: 4px;
    z-index: 1;
}

.institute-badge-bg img {
    width: 100%;
    height: auto;
    border-radius: 50%;
}

.cta-right-text {
    flex: 1.6;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 20px;
}

/* Верхняя продолговатая кнопка */
.btn-blue-rect {
    display: inline-block;
    background: linear-gradient(90deg, #1aa0e3, #38bdf2);
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 35px;
    border-radius: 12px;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(26, 160, 227, 0.3);
}

.motivation-text {
    font-size: 18px;
    line-height: 1.4;
    color: #4a4d46;
    max-width: 600px;
}

.start-stream-badge {
    background-color: #4a4d46;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    padding: 12px 45px;
    border-radius: 15px;
    letter-spacing: 0.5px;
    margin-top: 10px;
}

/* --- НИЖНЯЯ СЕТКА ИЗ 3-Х КАРТОЧЕК --- */
.info-footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.footer-card-item {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Сама плашка */
.card-box {
    background: linear-gradient(90deg, #c6b69c 0%, #dcd3c2 100%);
    border-radius: 25px;
    padding: 30px 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 240px;
    position: relative;
    overflow: hidden;
}

.card-text-content{
  max-width: 85%;
}

/* Черная глянцевая круглая кнопка-иконка в углу */
.black-3d-button img{
    position: absolute;
    bottom: 25px;
    right: 25px;
    width: 126px;
    height: 126px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

/* Стили индивидуальных нижних кнопок под плашками */
.grid-btn {
    display: block;
    text-align: center;
    padding: 12px 15px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: transform 0.2s;
}

.grid-btn:hover {
    transform: translateY(-2px);
}

.btn-cyan {
    background: linear-gradient(90deg, #3bc0f4, #1fa5e6);
    color: #ffffff;
}

.btn-dark {
    background-color: #273030;
    color: #ffffff;
}

.btn-blue {
    background: linear-gradient(90deg, #199ee2, #0d83ca);
    color: #ffffff;
}

/* --- СЕКЦИЯ 1: ВЕРХНЯЯ ЧАСТЬ (FAQ) --- */
.faq-top-row {
    display: flex;
    gap: 50px;
    margin-bottom: 80px;
    align-items: flex-start;
}

.faq-heading-col {
    flex: 0.9;
    display: flex;
    flex-direction: column;
    gap: 25px;
    position: relative;
}

.faq-main-title {
    font-size: 36px;
    font-weight: 900;
    color: #273030;
    line-height: 1.1;
    letter-spacing: 0.5px;
    text-align: end;
    font-family: "Benzin";
}

/* Синяя кнопка "Задать вопрос" */
.btn-ask-question {

}

.cap-img {
    max-width: 260px;
    height: auto;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.15));
}

/* Правая сторона: Стилизация аккордеона */
.faq-accordion-col {
    flex: 1.3;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.faq-item {
    background-color: #ebebeb;
    border-radius: 25px;
    overflow: hidden;
    transition: background-color 0.2s ease;
}

.faq-header {
    width: 100%;
    background: none;
    border: none;
    outline: none;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    text-align: left;
    font-size: 20px;
}

.faq-title {
    font-size: 14px;
    font-weight: 600;
    color: #4a4d46;
    padding-right: 15px;
}

/* Стрелочка на чистом CSS */
.faq-arrow {
    width: 8px;
    height: 8px;
    border-right: 2px solid #7a7a7a;
    border-bottom: 2px solid #7a7a7a;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.faq-collapse {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease-out;
}

.faq-body {
    padding: 0 20px 16px 20px;
    font-size: 16px;
    line-height: 1.4;
    color: #555555;
}

/* Активные состояния при клике */
.faq-item.active {
    background-color: #e0e0e0;
}

.faq-item.active .faq-arrow {
    transform: rotate(-135deg); /* Поворот вверх */
}

/* --- СЕКЦИЯ 2: НИЖНЯЯ ЧАСТЬ (КОЛЛАЖ) --- */
.promo-bottom-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

.promo-mid-title {
    font-size: 28px;
    font-weight: 800;
    color: #273030;
    line-height: 1.2;
    margin-bottom: 25px;
}

.btn-submit-app {
    display: inline-block;
    background: linear-gradient(90deg, #1aa0e3, #38bdf2);
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    padding: 12px 45px;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(26, 160, 227, 0.3);
    letter-spacing: 0.5px;
    margin-bottom: 50px;
    z-index: 5;
}

/* Сетка для коллажа */
.graphics-collage-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 30px;
    width: 100%;
    align-items: flex-end;
    position: relative;
    margin-top: 26px;
}

.collage-card {
    position: relative;
    overflow: visible;
}

/* Карточка здания со скруглением угла */
.card-building {
    border-radius: 25px;
    overflow: hidden;
    height: 340px;
}

.building-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Круглая печать, заходящая на угол здания */
.blue-seal-badge {
    position: absolute;
    top: -30px;
    right: -30px;
    width: 110px;
    height: 110px;
    background-color: #ffffff;
    border-radius: 50%;
    padding: 4px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.12);
    z-index: 3;
}

.blue-seal-badge img {
    width: 100%;
    height: auto;
    border-radius: 50%;
}

/* Карточка студенток со специфичным овальным срезом */
.card-students {
    width: 100%;
    height: 380px;
}

.students-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Огромный полупрозрачный герб на заднем фоне */
.big-watermark-seal {
    position: absolute;
    top: -60px;
    right: -20px;
    width: 260px;
    height: 260px;
    opacity: 0.05; /* Едва заметный эффект водяного знака */
    z-index: -1;
    pointer-events: none;
}

.big-watermark-seal img {
    width: 100%;
    height: auto;
}

/* --- ЛЕВАЯ КОЛОНКА: ЗДАНИЕ И ПЕЧАТЬ --- */
.mipz-about__media-left {
  position: relative;
  width: 100%;
  overflow: visible !important;
}

/* Фото здания с закругленными углами */
.mipz-about__building-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* Позиционирование круглой печати института строго на верхнем правом углу здания */
.mipz-about__seal-badge {
  position: absolute;
  top: 0;
  right: 120px; 
  transform: translateY(-50%);
  
  z-index: 5;
}
.mipz-about__seal-badge img {
  width: 150px; /* Диаметр печати */
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.1));
}

/* --- ПРАВАЯ КОЛОНКА: ДЕВУШКИ В КРУГЕ С ВЫЛЕТОМ ГОЛОВ --- */
.mipz-about__media-right {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  height: 440px;
  overflow: visible !important;
}

/* Бежевый круг подложки, который аппаратно срезает низ */
.mipz-about__circle-mask {
  width: 380px;         
  height: 380px;        
  background-color: #dfd8cb;
  border-radius: 50%;   
  overflow: hidden;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

/* Общий стиль для обеих картинок девушек (нижней и верхней) */
.mipz-about__girls-img {
  width: auto;
  height: 420px;
  display: block;
  object-fit: contain;
}

/* Позиционирование нижней картинки (внутри круга) */
.mipz-about__circle-mask .mipz-about__girls-img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* Позиционирование верхней картинки (которая показывает головы наружу) */
.mipz-about__girls-img--top {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  clip-path: inset(0% 0% 25% 0%);
  -webkit-clip-path: inset(0% 0% 25% 0%);
}

.footer {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.footer__box {
    padding: 45px 0 30px;
    width: 100%;
    margin: 0 auto;
}

.footer__top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.footer-menu {
    max-width: 326px;
    min-width: 326px;
    margin-right: 43px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.footer-menu>div:first-child {
    position: relative;
}

.footer-menu>div {
    max-width: 326px;
    min-width: 326px;
    width: 100%;
}

.footer-menu>div li {
    margin-bottom: 10px;
}

.footer-menu a {
    color: #000;
    font-size: 16px;
    line-height: 16px;
    text-decoration: none;
    font-family: 'Roboto';
}

.footer-menu li, ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-menu li:after {
    content: ' ';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    opacity: .2;
    background: #fff;
}

.footer__top-map {
    height: auto;
    overflow: hidden;
    max-width: 350px;
    min-width: 350px;
    margin-left: 50px;
    margin-right: 90px;
}

footer iframe {
    padding: 0;
}

footer iframe {
    border-radius: 513px;
    width: 350px;
    height: 350px;
}

.footer__contacts {
    width: 100%;
}

.footer__contacts-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    flex-direction: column;
}

.footer__contacts-address {
    color: #000;
    max-width: unset;
    width: 100%;
    margin-right: 58px;
    font-size: 16px;
    line-height: 38px;
    position: relative;
    padding-left: 36px;
    font-family: 'Roboto';
}

.footer__contacts-address:before {
    position: absolute;
    content: '';
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 26px;
    background: url(../img/icons/pin-b.svg) no-repeat;
    background-size: contain;
}

.footer__contacts-time {
    color: #000;
    font-size: 16px;
    line-height: 19px;
    position: relative;
    padding-left: 36px;
    max-width: 250px;
    width: 100%;
    margin-right: 58px;
}

.footer__contacts-tel{
    display: flex;
    flex-direction: column;
    position: relative;
    padding-left: 33px;
}

.footer__contacts-tel:before {
    position: absolute;
    content: '';
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 19px;
    height: 20px;
    background: url(../img/icons/trubka.svg) no-repeat;
    background-size: contain;
}

.footer__contacts-tel a {
    color: #000;
    font-size: 24px;
    line-height: 34px;
    letter-spacing: .48px;
    text-decoration: none;
}

.footer__contacts-bottom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.footer__contacts-time {
    color: #000;
    font-size: 16px;
    line-height: 19px;
    position: relative;
    padding-left: 36px;
    max-width: 250px;
    width: 100%;
    margin-right: 58px;
    font-family: 'Roboto';
}

.footer__contacts-time:before {
    content: '';
    width: 18px;
    height: 18px;
    top: 0;
    left: 0;
    position: absolute;
    -webkit-mask-image: url(../img/icons/time.svg);
    mask-image: url(../img/icons/time.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: #000;
}

.footer__contacts-top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: flex-start;
    margin-bottom: 0;
    margin-top: 28px;
    flex-direction: column;
    align-content: flex-start;
}

.footer__three-bottom {
    display: flex;
}

.footer__contacts-mail {
    max-width: 246px;
    min-width: 246px;
    margin-right: 59px;
}

.footer__contacts-mail button {
    width: 100%;
    display: inline-block;
    min-height: 30px;
    border-radius: 100px;
    padding: 8px 8px;
    text-align: center;
    font-size: 14px;
    text-transform: uppercase;
    line-height: 21px;
    position: relative;
    border: none;
    max-width: 246px;
    color: #ffffff;
    font-family: "Benzin";
    font-weight: 600;
    text-decoration: none;
    background: linear-gradient(90deg, #333 0%, #5a5d62 100%);
}

.footer-mail {
    font-weight: 400;
    text-decoration: none;
    font-size: 16px;
    font-family: 'Roboto';
}

.footer-mail a {
    display: block;
    margin: 5px 0;
    text-decoration: none;
}

.footer__social a {
    width: 46px;
    height: 46px;
    display: inline-block;
    border-radius: 50%;
    border: 1px solid;
    background: #DCEFE7;
    margin-right: 6px;
    position: relative;
}

.footer__social a svg {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
}

.copyright {
    max-width: 565px;
    font-size: 14px;
    line-height: 19px;
    color: #000;
    margin-right: 60px;
    font-family: 'Roboto';
}

@media (max-width: 1024px) {
  .copyright {
    margin-right: 0;
    margin-top: 10px;
    max-width: 100%;
    text-align: center;
  }
}

@media (max-width: 992px) {
    .institute-advantages__grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .institute-advantages__card {
    height: auto;
    padding: 35px 25px 60px 25px;
  }
  .institute-advantages__card-title {
    min-height: auto;
    margin-bottom: 15px;
  }
  .institute-advantages__card-text {
    max-width: 100%;
  }
  .institute-advantages__card-badge {
    transform: translate(35%, 55%) !important;
  }
  .institute-advantages__card-badge img {
    width: 90px;
  }

  .program-bonus__grid--triple,
  .program-bonus__grid--double {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .program-bonus__card {
    height: auto;
    padding: 30px 25px 55px 25px;
    margin-bottom: 26px;
  }
  .program-bonus__card-header {
    min-height: auto;
    margin-bottom: 12px;
  }
  .program-bonus__card-text, .beck-standards__card-content {
    max-width: 85%;
  }
  .program-bonus__card-badge, .program-bonus-card-badge-icon {
    transform: translate(5%, 15%);
  }
  .program-bonus__card-badge img, .program-bonus-card-badge-icon img {
    width: 85px;
  }

  .course-authors__grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .course-authors__watermark {
    display: none;
  }

  .footer__top {
   flex-direction: column-reverse;
   align-items: center;
 }

 .footer-menu{
   margin-right: 0;
    text-align: center;
    margin-top: 20px;
    justify-content: center;
    max-width: 100%;
  }

  .footer-menu>div {
    max-width: 100%;
  }

  .footer-menu>div {
    max-width: 100%;
  }

  .footer__contacts {
    max-width: 552px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .footer__contacts-center {
    align-items: center;
    flex-direction: column;
  }

  .footer__contacts-mail {
    max-width: 246px;
    min-width: 246px;
    margin-right: 0;
  }
}

@media (max-width: 950px) {
    .cards-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 колонки на планшетах */
        gap: 15px;
    }
    
    .community-card {
        min-height: 340px;
    }
}

/* Адаптивность для мобильных устройств */
@media (max-width: 900px) {
    .features-grid {
        grid-template-columns: 1fr;
    }
    
.promo-wrapper {
        grid-template-columns: 1fr; /* Переход в один столбец */
        text-align: center;
        gap: 50px;
        padding-top: 60px;
    }

    .promo-left-zone {
        align-items: center;
        padding-left: 0;
        order: 2; /* Кнопки уходят вниз */
    }

    .promo-image-zone {
        order: 1; /* Фото встает наверх */
    }

    .circle-mask {
        width: 320px;
        height: 320px;
    }

    .gold-seal-box {
        top: 0;
        right: 20px;
        width: 70px;
        height: 70px;
    }

    .platform-section {
        flex-direction: column;
        text-align: center;
    }

    .process-grid {
        grid-template-columns: 1fr;
    }
    
    .process-card {
        height: auto;
    }

    .photo-wrapper {
        width: 260px;
        height: 260px;
    }

    .main-intro-section {
      flex-direction: column;
      gap: 30px;
    }
    
    .intro-left {
        width: 100%;
        order: 1;
    }

    .intro-right {
        width: 100%;
        justify-content: center;
        order: 2;
        margin-bottom: 20px;
    }

    .seal-badge {
        bottom: -20px;
        left: 10px;
    }

    .section-middle-title {
        text-align: center;
    }

    .experts-advantages-grid {
        grid-template-columns: 1fr;
    }
    
    .advantage-card {
        min-height: auto;
    }

    .diploma-dark-banner {
        flex-direction: column;
        padding: 40px 20px;
        text-align: center;
    }

    .banner-right-content {
        text-align: center;
    }

    .banner-header-logo {
        justify-content: center;
    }

    .banner-main-text {
        font-size: 18px;
        margin-left: initial;
    }

    .banner-sub-text {
        font-size: 15px;
    }

    .diploma-cover-img {
        max-width: 170px;
        transform: none; /* Убираем наклон на мобилках для аккуратности */
    }

    .diploma-documents-grid {
        grid-template-columns: 1fr; /* Перестраиваем дипломы друг под друга */
        gap: 15px;
    }

    .steps-grid {
        grid-template-columns: 1fr; /* На смартфонах карточки встают в одну ленту */
        gap: 20px;
    }

    .step-card {
        padding: 30px 20px;
        border-radius: 25px;
        flex-direction: row;
    }

    .card-body {
        max-width: 100%;
    }

    .card-left-num {
        font-size: 70px;
    }

    .card-3d-badge {
        position: relative;
        bottom: 0;
        right: 0;
        align-self: flex-end;
        margin-top: 15px;
        margin-left: auto;
    }

    .intro-section {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .intro-right-text {
        text-align: center;
    }

    .main-title {
        font-size: 28px;
    }

    .main-desc {
        margin: 0 auto;
    }

    .dark-status-badge {
        font-size: 13px;
        padding: 12px 20px;
        line-height: 1.4;
    }

    .documents-grid {
        grid-template-columns: 1fr; /* Переход в один столбец */
        gap: 15px;
    }

    .doc-card {
        padding: 25px;
        min-height: auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .doc-card-content {
        max-width: 100%;
    }

    .blue-3d-badge {
        align-self: flex-end; /* Смещаем иконку вниз-вправо на мобильных */
    }

    .tax-refund-banner {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
        gap: 20px;
    }

    .cta-middle-section {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .cta-right-text {
        align-items: center;
        text-align: center;
    }

    .info-footer-grid {
        grid-template-columns: 1fr; /* Перестраиваем 3 нижние карточки в одну колонку */
        gap: 30px;
    }

    .card-box {
        height: auto;
        min-height: 180px;
        padding-bottom: 80px; /* Оставляем место для иконки */
    }

    .faq-top-row {
        flex-direction: column;
        gap: 30px;
    }

    .faq-heading-col {
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .faq-main-title {
        font-size: 30px;
    }

    .graduate-cap-wrapper {
        display: none; /* Скрываем декоративную шапку на смартфонах */
    }

    .promo-mid-title {
        font-size: 22px;
    }

    .graphics-collage-grid {
        grid-template-columns: 1fr; /* Коллаж выстраивается вертикально */
        gap: 40px;
    }

    .card-building {
        height: 240px;
    }

    .card-students {
        height: 320px;
    }

    .blue-seal-badge {
        right: 10px;
        top: -20px;
        width: 90px;
        height: 90px;
    }
}

@media (max-width: 880px) {
  .footer__top-map{
    display: block;
    max-width: 100%;
    margin: 20px auto;
    min-width: inherit;
  }
  .footer__social {
    text-align: center;
  }
}

@media (max-width: 850px) {
    .dark-banner {
        flex-direction: column;
        padding: 30px 20px;
    }

    .banner-graphics {
        height: 120px;
        width: 100%;
    }

    .modules-grid {
        grid-template-columns: 1fr;
    }
    
    .module-card {
        padding: 25px;
        min-height: auto;
    }

    .program-content {
        flex-direction: column;
        gap: 40px;
    }

    .info-left {
        position: relative;
        top: 0;
        width: 100%;
    }

    .big-number {
        font-size: 110px;
    }

    .counter-text {
        font-size: 24px;
    }

        .program-intro-banner {
        padding: 30px 20px;
    }
    
    .laurel-left, .laurel-right {
        display: none; /* Скрываем ветки на маленьких экранах */
    }

    .pricing-main-card {
        padding: 30px 20px;
    }

    .card-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .format-tag {
        width: 100%;
        text-align: center;
    }

    .card-content-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .prices-info {
        width: 100%;
    }

    .pricing-buttons {
        max-width: 100%;
    }

    .prices-graphics {
        width: 100%;
        justify-content: center;
    }

    .laptop-img {
        max-width: 200px;
    }
}    

@media (max-width: 768px) {

.okr-title, .why-badge, .module-info h3, .section-middle-title h2, .main-title , .format-tag {font-size: 20px;}

.promo-banner {
    height: auto !important;
    padding: 30px 20px !important;
    margin: 15px 0 !important;
  }

  /* Переводим контейнер в вертикальный flex-стек */
  .promo-container {
    flex-direction: column !important;
    height: auto !important;
    gap: 25px;
  }

  /* Левая часть (где логотип и кнопки) */
  .promo-left-side {
    height: auto !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 20px;
    order: 2;
  }

  /* Логотип центрируем и убираем огромный левый отступ */
  .promo-logo {
    margin: 0 auto !important;
    width: 140px !important;
  }

  /* Извлекаем картинку из абсолютного позиционирования, 
     чтобы она встала в общую очередь элементов */
  .image-wrapper {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 250px !important;
    margin: 10px 0 !important;
    justify-content: center !important;
  }

  .promo-person {
    width: auto !important;
    height: 100% !important;
    margin: 0 auto !important;
  }

  /* Блок с текстом: меняем выравнивание на центр */
  .promo-content {
    max-width: 100% !important;
    text-align: center !important;
    order: 1;
  }

  .promo-subtitle {
    font-size: 12px !important;
    margin-bottom: 10px !important;
  }

  /* Уменьшаем шрифт заголовка, чтобы он не переносился по одной букве */
  .promo-title {
    font-size: 22px !important;
    line-height: 1.3 !important;
    margin-bottom: 15px !important;
  }

  .promo-description {
    font-size: 14px !important;
    margin-bottom: 15px !important;
  }

  .promo-footer-text {
    font-size: 11px !important;
  }

  /* Блок с кнопками: переносим в самый низ */
  .promo-buttons {
    width: 100% !important;
    gap: 10px !important;
    order: 3;
  }

  /* Кнопки делаем удобными для нажатия пальцем */
  .promo_banner_btn {
    font-size: 16px !important;
    padding: 14px 20px !important;
  }

  .institute-advantages__main-title, .course-authors__main-title{
    font-size: 18px;
    padding: 10px 25px;
    line-height: 1.3;
    max-width: 100%;
  }
  .institute-advantages__card-badge{position: relative;margin: auto;}
  .institute-advantages__card-title{font-size: 20px;}

  .course-authors__footer{display: flex;}

  .cards-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 15px;
  }

  .program-bonus__card-title, .intro-text{ width: 100%; }

  .banner-graphics img {
    width: 35%;
}

.program-bonus__grid--triple, .program-bonus__grid--double{display: block;}

.card-icon-black-dop img {display: none;}

.dist-logo {margin: auto;}

  .footer__contacts-top{
    margin-top: 0;
  }

  .footer__three-bottom {
    flex-direction: column;
  }

  .footer__buttons-bottom {
    margin-bottom: 15px;
    margin-top: 15px;
  }

  .footer-mail a {
    margin: 5px 0;
  }
}

@media (max-width: 600px) {
  .footer-menu {
    margin-bottom: 30px;
    margin-right: 0;
    text-align: center;
    margin-top: 0px;
    justify-content: center;
    max-width: 100%;
  }

  .footer__contacts-bottom>div, .footer__contacts-center>div, .footer__contacts-top>div {
    width: 280px;
    margin-right: 0;
    max-width: 280px;
  }

  .footer__contacts-bottom, .footer__contacts-center, .footer__contacts-top {
    flex-direction: column;
  }

  .footer__contacts-mail{
    margin-bottom: 0px;
    text-align: center;
  }
} 

@media (max-width: 576px) {
.course-authors__main-title {
    font-size: 16px;
    padding: 12px 25px;
    width: 100%;
  }
  .course-authors__photo-wrapper {
    width: 260px;
    height: 260px;
  }
  .course-authors__name-badge {
    font-size: 16px;
    padding: 10px 25px;
    width: 100%;
  }
  .course-authors__btn-action {
    display: block;
    width: 100%;
    font-size: 12px;
    padding: 15px 15px;
  }

  .program-bonus__main-title,
  .program-bonus__sub-title {
    font-size: 16px;
    padding: 12px 25px;
    width: 100%;
    text-align: center;
  }
  .program-bonus__banner-text {
    font-size: 16px;
  }
  .program-bonus__card-title {
    font-size: 18px;
  }
  .program-bonus__card-number {
    font-size: 40px;
  }
}

@media (max-width: 550px) {
    .cards-grid {
        grid-template-columns: 1fr;
    }

    .community-card {
        min-height: auto;
        padding: 30px 20px;
    }
}