/******* Do not edit this file *******
Woody Code Snippets CSS and JS
Saved: Apr 13 2026 | 14:46:32 */
.skills-block {
  font-family: inherit;
  padding: 60px 0px;
  box-sizing: border-box;
}

.skills-block * {
  box-sizing: border-box;
}

.skills-block__header {
  text-align: left;
  margin-bottom: 20px;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.skills-block__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
  align-items: stretch;
}

.skills-block__card {
  background: var(--e-global-color-c9b6d92, #F1F4F4);
  border-radius: 24px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.skills-block__card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(28, 69, 92, 0.1);
}

/* 
   РЕШЕНИЕ ПРОБЛЕМЫ ВЫРАВНИВАНИЯ:
   1. Фиксируем высоту заголовка (height: 70px), чтобы он занимал место 
      под две строки, даже если текст в одну строку.
   2. display: flex + align-items: flex-start прижимает текст к верху.
   3. margin-bottom: 30px создает пространство для линии.
*/
.skills-block__card-title {
  font-size: 22px!important;
  font-weight: 800!important;
  color: var(--e-global-color-secondary, #3A4247);
  
  /* Фиксируем высоту под 2 строки */
  height: 70px;
  
  /* Прижимаем текст к верху */
  display: flex;
  align-items: flex-start;
  
  /* Отступ снизу под линию */
  margin-bottom: 30px;
  
  position: relative;
}

/* Стильная линия-разделитель */
.skills-block__card-title::after {
  content: '';
  position: absolute;
  bottom: -20px; 
  left: 0;

  width: 48px;
  height: 4px;
  border-radius: 2px;

  /* Базовое состояние (ВСЕГДА видно) */
  background: linear-gradient(
    90deg,
    rgba(28, 69, 92, 0.3),
    rgba(136, 170, 184, 0.3)
  );

  opacity: 1;
  transform: scaleX(1);

  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.skills-block__card-title::after {
  content: '';
  position: absolute;
  bottom: -20px; 
  left: 0;

  width: 48px;
  height: 4px;
  border-radius: 2px;

  /* Базовый цвет */
  background: var(--e-global-color-ca1ca98);

  opacity: 0.4; /* мягкий по умолчанию */
  transform: scaleX(1);

  transition: all 0.3s ease;
}

/* При наведении — просто усиливаем */
.skills-block__card:hover .skills-block__card-title::after {
  opacity: 1;
  transform: scaleX(1.2);
}

@media (max-width: 1024px) {

  .skills-block__grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  .skills-block__header {
    text-align: center;
  }

  .skills-block__card {
    padding: 20px;
    border-radius: 20px;
  }

  .skills-block__card-title {
    font-size: 18px !important;
    height: auto !important;
    min-height: auto;
    margin-bottom: 20px;
    display: block !important;
  }

  .skills-block__card-title::after {
    bottom: -16px;
    width: 36px;
    height: 3px;
  }

  .skills-block__card-text {
    font-size: 15px;
    line-height: 1.5;
  }


}