/* Start:/bitrix/templates/aspro_max/css/about.css?17631228399817*/
/* ledohod.css */
/* ========== variables & reset ========== */
:root{
  --main-colormain: rgba(61,96,171,1);
  --main-colorblue: rgba(30,121,200,1);
  --main-colorgray: rgba(196,198,219,1);
  --main-colordop: rgba(231,233,240,1);
  --main-colordop-2: rgba(247,246,255,1);
  --main-colorwhite: #fff;
  --dop-colorblack: rgba(9,17,49,1);
  --dop-colordark-gray: rgba(98,97,97,1);
  --dop-coloryellow: rgba(220,251,41,1);
  box-sizing: border-box;
}

/* Header */
.ledohod__header{ margin-bottom:20px;    width: 50%; }
.ledohod__title{
  font-weight:normal;
  font-size: clamp(24px, 2.8vw, 32px);
  margin:0 0 12px;
  color:var(--dop-colorblack);
}
.ledohod__lead, .ledohod__lead--sub{
  margin:0 0 10px;
  color:var(--dop-colordark-gray);
  font-size: clamp(14px, 1.3vw, 18px);
  line-height:1.45;
}

/* равные ряды грида — гарантирует одинаковую высоту ячейки */
.ledohod__features{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 18px 0 28px;
  grid-auto-rows: 1fr; /* <- важно: все ячейки одной высоты */
}

/* карточка растягивается на всю высоту ячейки */
.feature-card{
  background: var(--main-colormain);
  color: var(--main-colorwhite);
  border-radius: 18px;
  padding: 18px;
  /* min-height: 220px;  <- можно убрать или оставить по желанию */
  height: 100%; /* <-- растянуть по высоте ячейки грида */
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative; /* для номера */
  overflow: hidden;
  /* делаем внутренний отступ сверху чтобы оставить место для кружка-номера */
  padding-top: 56px;
}

/* убираем margin-top у заголовка, теперь отступ для номера делает padding-top карточки */
.feature-card__title {
  margin: 0 0 6px 0;
  font-size: 20px;
  font-weight: normal;
  color: inherit;
  /* удаляем: margin-top: 120px; */
}

/* обёртка для заголовка+текста, чтобы прижать её к низу */
.feature-card__body {
  /* займёт оставшееся пространство и «прижмёт» себя к низу карточки */
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* или, если обёртки нет — можно прижать сам текст */
.feature-card__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: inherit;
  opacity: 0.95;
  /* margin-top: auto;  <- опция: прижать только текст к низу */
}

/* заменяем margin-top на transform — визуальное смещение, не ломает высоту */
.feature-card--1 { transform: translateY(60px); background:var(--main-colormain); }
.feature-card--2 { transform: translateY(120px) rotate(2.49deg); background:var(--dop-coloryellow); color:var(--dop-colorblack); }
.feature-card--3 { transform: translateY(0) rotate(-0.8deg); background:var(--dop-colorblack); color:var(--main-colorwhite); }
.feature-card--4 { transform: translateY(0) rotate(-3.37deg); background:#f7f6ff; color:var(--dop-colorblack); }

/* номер */
.feature-card__num{
  width:44px; height:44px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--main-colorwhite);
  color:var(--main-colormain);
  font-weight:700;
  position:absolute;
  left:16px;
  top:16px;
}

.feature-card__num--dark{ background:var(--dop-colorblack); color:var(--main-colorwhite); }
.feature-card__num--accent{ background:var(--main-colordop); color:var(--main-colormain); }

/* card text */
.feature-card__title{ margin:0 0 6px 0; font-size:20px;     margin-top: 120px;font-weight: normal;
    color: #fff; }

.feature-card--4 .feature-card__title  {
 color: #3D60AB;
}
.feature-card--2 .feature-card__title  {
    color: #091131;
}
.feature-card--2 .feature-card__text  {
	color:#626161;
}
.feature-card--4 .feature-card__text  {
	color:#C4C6DB;
}
.feature-card__text{ margin:0; font-size:15px; line-height:1.45; color:inherit; opacity:0.95; }

/* ========== Intro area + aside with decorative circles & image ========== */
.ledohod__intro{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  align-items:start;
  margin-bottom:28px;
    margin-top: 220px;
}

/* intro text */
.ledohod__big{ margin:0 0 12px; font-size: clamp(20px, 2.8vw, 32px); color:var(--dop-colorblack); line-height:1.06; font-weight:600; }
.ledohod__paragraph{ margin:0 0 12px; color:var(--dop-colordark-gray); font-size:16px; line-height:1.5; }

/* aside contains circles and image stacked; circles absolutely positioned inside aside only (local) */
.ledohod__aside{ position:relative; min-height:320px; display:flex; align-items:center; justify-content:center; }
.ledohod__figure{ margin:0; position:relative; z-index:2; }
.ledohod__image{ width:320px; max-width:100%; height:auto; display:block; border-radius:12px; object-fit:cover; }

/* decorative circles (local absolute inside aside) */
.ledohod__circle{ position:absolute; border-radius:50%; z-index:1; opacity:0.95; }
.ledohod__circle--big{ width:360px; height:360px; background:#4698fc; left:-60px; top:-40px; }
.ledohod__circle--mid{ width:240px; height:240px; background:#78b4fd; left:-10px; top:20px; }
.ledohod__circle--small{ width:140px; height:140px; background:#a9cfff; left:40px; top:70px; }

/* ========== responsiveness ========== */
@media (max-width: 1200px){
  .ledohod__features{ grid-template-columns: repeat(2,1fr); }
  .ledohod__intro{ grid-template-columns: 1fr 300px; }
  .ledohod__image{ width:280px; }
}
@media (max-width: 720px){
  .ledohod__features{ grid-template-columns: 1fr; }
  .ledohod__intro{ grid-template-columns: 1fr; }
  .ledohod__aside{ order: -1; margin-bottom: 12px; }
  .ledohod__image{ width:100%; max-width:420px; margin:0 auto; display:block; }
  /* remove heavy rotations on small screens for readability */
  .feature-card--1,
  .feature-card--2,
  .feature-card--3,
  .feature-card--4{ transform:none; }

	.ledohod__intro{
		margin-top: 50px;
	}
	.ledohod__header{
		width:100%;
	}
	.ledohod__col--right{
		display:none!important;
	}
}
/* контейнер: две колонки ровно по 50% */
.ledohod__intro{
  display: flex;
  gap: 24px;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

/* колонки одинаковой ширины */
.ledohod__col{
  flex: 1 1 50%;
  min-width: 0; /* важно для корректного переноса текста */
}

/* Левый текст */
.ledohod__col--left { padding-right: 12px; }
.ledohod__big{
  margin: 0 0 12px;
  font-size: clamp(20px, 2.8vw, 32px);
  line-height: 1.06;
  font-weight: 600;
  color: var(--dop-colorblack, #091131);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ledohod__big span{ display:block; }

/* Параграфы */
.ledohod__paragraph{ margin: 0 0 12px; color: var(--dop-colordark-gray,#626161); font-size:16px; line-height:1.5; }

/* Правый aside — позиционируем элементы внутри и центрируем */
.ledohod__col--right{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding-left: 12px;
}

/* карточка-основание: цветной прямоугольник с закруглёнными углами и обрезкой */
.ledohod__card{
  position: absolute;
  bottom: 12px;            /* смещение карточки к низу колонки */
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 300px;           /* можно подкорректировать */
  background: #1E79C8;
  border-radius: 16px;
  overflow: hidden;        /* обрезает круги */
  z-index: 1;
  box-shadow: 0 8px 20px rgba(14,52,94,0.12);
  background-image: url('/bitrix/templates/aspro_max/images/back_about.png');
  background-position: right bottom;
    background-size: contain;
    background-repeat: no-repeat;
}

/* Круги — внутри карточки (будут обрезаны) */
.ledohod__card .ledohod__circle{
  position: absolute;
  border-radius: 50%;
  opacity: 0.95;
  z-index: 0;
  pointer-events: none;
}

/* Картинка — поверх карточки, центрирована и немного "вылезает" сверху */
.ledohod__figure{ margin: 0; position: relative; z-index: 2; width: min(320px, 95%); display:flex; justify-content:center; }
.ledohod__image{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  object-fit: cover;
  transform: translateY(-11px); /* поднимаем картинку над карточкой */
}

/* адаптив: на мобильных — колонки стекнутся */
@media (max-width: 720px){
  .ledohod__intro{
    flex-direction: column;
    gap: 16px;
  }
  .ledohod__col{ width: 100%; flex: 0 0 auto; }
  .ledohod__card{ width: calc(100% - 40px); height: 140px; left: 50%; transform: translateX(-50%); bottom: 0; }
  .ledohod__image{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    object-fit: cover;
    transform: translateY(-11px);
  }
  /* убирать сильные смещения кругов на мобилке */
  .ledohod__card .ledohod__circle--big{ left:-80px; top:-80px; width:260px; height:260px; }
  .ledohod__card .ledohod__circle--mid{ left:10px; top:-10px; width:180px; height:180px; }
  .ledohod__card .ledohod__circle--small{ left:110px; top:30px; width:100px; height:100px; }
}
.ledohod__big span {
    font-weight: normal;
	margin-bottom:20px;
}
/* End */
/* /bitrix/templates/aspro_max/css/about.css?17631228399817 */