/** Общие настройки стиля **/

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px; /* Чтобы заголовок секции не прятался под меню после прокрутки */
}


:root {
    --metrics-mint: #C3F2DF;       /* Твой основной мятный */
    --metrics-dark-green: #1B4332; /* Глубокий темно-зеленый (для заголовков) */
    --metrics-green: #2D6A4F;      /* Акцентный зеленый */
    --metrics-gray: #495057;       /* Серый для текста */
    --metrics-black: #212529;      /* Почти черный */
}

/* Общий фон страницы или секции */
.bg-metrics-mint {
    background-color: var(--metrics-mint);
}

/* Эффект для кнопки перехода */
.btn-lg:hover {
    background-color: #2D6A4F !important;
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

/* Адаптивность для мобильных: картинка всегда сверху текста на телефонах */
@media (max-width: 991px) {
    #metrics .order-lg-1 { order: 2; }
    #metrics .order-lg-2 { order: 1; }
    #metrics img { margin-bottom: 30px; }
}

/* Цвет текста (если еще не задан) */
.text-metrics-dark { color: #1B4332; }
.text-metrics-gray { color: #495057; }

/* Универсальная карточка в стиле METRICS */
.metrics-card {
    background-color: #ffffff !important;
    border-left: 4px solid var(--metrics-green) !important;
    border-radius: 0 12px 12px 0; /* Скругляем только правые углы для стиля */
    padding: 1.5rem;
    /*height: 100%;*/
    box-shadow: 0 4px 12px rgba(27, 67, 50, 0.05); /* Очень мягкая тень */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.metrics-card:hover {
    transform: translateX(5px); /* Легкое смещение вправо при наведении */
    box-shadow: 0 6px 18px rgba(27, 67, 50, 0.1);
}

.metrics-box {
  box-shadow: 0 4px 12px rgba(27, 67, 50, 0.05); /* Очень мягкая тень */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.metrics-box:hover {
  transform: translateX(5px); /* Легкое смещение вправо при наведении */
  box-shadow: 0 6px 18px rgba(27, 67, 50, 0.1);
}

/* Цвет индикаторов карусели METRICS */
#metricsCarousel .carousel-indicators [button] {
    background-color: var(--metrics-green); /* Твой зеленый */
}

/* Делаем их чуть более заметными */
#metricsCarousel .carousel-indicators {
    bottom: 10px;
    margin-bottom: 0;
}

#metricsCarousel .carousel-item img {
    height: 450px; /* Зафиксируй высоту, которая тебе подходит */
    object-fit: contain; /* Картинка впишется целиком без обрезки */
    background-color: #fff;
}


/* Стили для карточек "Принципы" */
.principle-item {
    background: rgba(255, 255, 255, 0.4); /* Еще более прозрачный белый */
    backdrop-filter: blur(8px);
    border: 1px solid rgba(45, 106, 79, 0.2); /* Рамка с оттенком зеленого */
    border-radius: 16px;
    padding: 30px;
    height: 100%;
    transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(27, 67, 50, 0.05); /* Тень с зеленым отливом */
}

.principle-item:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.7);
    border-color: var(--metrics-green);
    box-shadow: 0 15px 35px rgba(27, 67, 50, 0.12);
}

.text-metrics-dark {
    color: var(--metrics-dark-green);
}

/* Кнопки в стиле METRICS */
.btn-metrics {
    background-color: var(--metrics-dark-green);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 25px;
}

.btn-metrics:hover {
    background-color: var(--metrics-green);
    color: white;
}

.text-primary {
  color: darkgreen;
}

/* состояние меню */
.navbar {
    /*background-color: #C3F2DF !important; /* Твой мятный цвет всегда */
    /*box-shadow: 0 2px 10px rgba(27, 67, 50, 0.1); /* Легкая тень, чтобы отделять от контента */
    /*transition: none; /* Убираем анимацию, если она не нужна */
    background-color: rgba(195, 242, 223, 0.8) !important; /* Мятный с прозрачностью 80% */
    backdrop-filter: blur(10px); /* Эффект матового стекла */
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(27, 67, 50, 0.1);
}
.navbar.scrolled {
    background-color: #C3F2DF !important;
}
/* Настройка ссылок, чтобы они были читаемы на обоих фонах */
.nav-link {
    color: var(--metrics-dark-green) !important;
    font-weight: 500;
    transition: color 0.3s;
}

.nav-link:hover {
    color: var(--metrics-green) !important;
}

/* Кнопка-бургер в стиле METRICS */
.navbar-toggler {
    border-color: var(--metrics-green);
}
.rounded-circle {
    object-fit: cover;
    border: 3px solid var(--metrics-mint); /* Тонкая рамка в стиле бренда */
}

/* Линия, объединяющая смысловой блок */
.methodology-timeline {

    padding-left: 40px; /* Отступ текста от линии */

    border-left: 4px solid var(--metrics-green) !important;
    border-radius: 0 12px 12px 0; /* Скругляем только правые углы для стиля */
    
    background-color: #FFFF;
    padding-bottom: 40px;
    padding-top: 40px;
    padding-right: 40px;
}

/* Опционально: можно добавить "точку" в начале линии */
.methodology-timeline::before {
    content: "";
    position: absolute;
    top: 0;
    left: -6px;
    width: 10px;
    height: 10px;
    background-color: #2D6A4F;
    border-radius: 50%;
}


body {
    background-color: #C3F2DF; /* Твой мятный по умолчанию */
    color: #1B4332; /* Темно-зеленый для основного текста */
    font-family: 'Inter', sans-serif; /* Или другой шрифт, который ты выбрал */
}

/* Настраиваем секции */
section {
    background-color: transparent !important; /* Убираем белые фоны, если они были */
    padding: 60px 0;
}

section#about {
    padding-top: 120px !important; /* Увеличили отступ, чтобы точно не наезжало */
}