@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

body {
    background-image: url('/images/style/wal.jpeg');
    background-size: 800px;
    color: #2F3E46;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;

}

.bg-theme-light { background-color: #F5F0E6; }
      .bg-theme-dark { background-color: #E6DCCD; }
      .text-theme-green { color: #44704f; }
      
      /* Стили для главного изображения */
      .hero-image {
        background-image: url('images/style/01.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 8px;
        min-height: 300px; /* Чтобы картинка не пропадала на мобильных */
        height: 100%;
      }
      .ur-image {
        background-image: url('images/style/ur.jpeg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 8px;
        min-height: 350px; /* Чтобы картинка не пропадала на мобильных */
        height: 100%;
      }

      /* Стили для круглых/квадратных иконок в карточках */
      .card-image-block {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 8px;
        width: 100%;
        max-width: 250px;
        aspect-ratio: 1 / 1; /* Делает блок всегда квадратным */
        margin: 0 auto; /* Центрирование */
      }

      .disabled-div {
  opacity: 0.5; /* Делает элемент полупрозрачным */
  pointer-events: none; /* Отключает клики и наведение */
  filter: grayscale(50%); /* Делает элемент полностью серым */
  cursor: not-allowed; /* Меняет курсор на значок "запрещено" */
}

/* Фирменный цвет для ссылок меню на ВСЕХ устройствах (и ПК, и мобильные) */
    .custom-nav .nav-link {
        color: #44704f !important;
        transition: opacity 0.2s;
    }
    
    .custom-nav .nav-link:hover {
        opacity: 0.8; /* Эффект при наведении */
    }

    /* Дополнительные стили специально для мобильного меню (до 768px) */
    @media (max-width: 767.98px) {
        .custom-nav .nav-item {
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* Легкий разделитель для удобства клика */
        }

    }

a {
    color: #44704f;
    text-decoration:none;
}

a:hover {
    color: #4e835b;
    text-decoration: underline;
}

h1, h2 {
    color: #cca558;
}
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #44704f;
    --bs-btn-border-color: #44704f;;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #36593f;
    --bs-btn-hover-border-color: #44704f;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #4e835b;;
    --bs-btn-active-border-color: #44704f;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #346d42;;
    --bs-btn-disabled-border-color: #0d6efd
}

.btn    -info {
    --bs-btn-color: #fff;
    --bs-btn-bg: #44704f;
    --bs-btn-border-color: #44704f;;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #36593f;
    --bs-btn-hover-border-color: #44704f;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #4e835b;
    --bs-btn-active-border-color: #44704f;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #346d42;;
    --bs-btn-disabled-border-color: #0d6efd
    
}


.btn-info {
  background-color: #00284c !important;   /* твой цвет фона, например оранжевый */
  border-color: #00284c !important;      /* цвет рамки — обычно такой же */
  color: #ffffff !important;         /* цвет текста — белый */
  font-size: 16px;
}

/* Чтобы цвет не менялся при наведении/активном состоянии */
.btn-info:hover,
.btn-info:focus,
.btn-info:active {
  background-color: #00325f !important; /* чуть темнее при наведении */
  border-color: #00325f !important;
  color: #ffffff !important;
  font-size: 16px;
}

.btn-group-lg > .btn,
.btn-lg {
    --bs-btn-font-size: 1rem; /* Ваше значение */
    font-size: 1rem; /* Резервный вариант */
}

        @media (min-width: 768px) {
            .lesson-img-container {
                width: 200px;
                height: 200px;
                flex-shrink: 0;
            }
        }

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

/* Цвет заголовка аккордеона */
.accordion-button {
  background-color: #f4dfb2 !important;       /* светло‑серый фон */
  color: #19558a !important;                 /* тёмный текст */
}

/* Цвет активного (раскрытого) заголовка */
.accordion-button:not(.collapsed) {
  background-color: #f4dfb2 !important;      /* чуть темнее при раскрытии */
  color: #19558a !important;
}

/* Цвет тела аккордеона (контента) */
.accordion-body {
  background-color: #f2eee2;                 /*  фон контента */
  padding: 1rem 1.25rem;                     /* можно подправить отступы */
}

.flying-star {
    /* Критически важно: position: fixed и высокий z-index */
    position: fixed !important;
    z-index: 99999 !important; /* Убедимся, что она поверх ВСЕГО */
    
    /* Размеры картинки */
    width: 32px !important; 
    height: 32px !important;
    
    /* Гарантируем, что она видима и не мешает кликам */
    display: block !important;
    pointer-events: none !important;
    
    /* Запускаем анимацию 'flyUp' на 1.2 секунды */
    /* Добавлены вендорные префиксы для совместимости с браузерами */
    -webkit-animation: flyUp 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
    animation: flyUp 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
    
    /* Начальное состояние (на всякий случай) */
    opacity: 1 !important;
}

/* 2. Описание этапов анимации 'flyUp' */
/* Обязательно добавлены префиксы @-webkit-keyframes */

@-webkit-keyframes flyUp {
    0% {
        -webkit-transform: translateY(0) scale(1) rotate(0deg);
        transform: translateY(0) scale(1) rotate(0deg);
        opacity: 1;
    }
    80% {
        opacity: 0.8;
    }
    100% {
        /* JS динамически подставляет расстояние в переменную --travel-distance */
        -webkit-transform: translateY(var(--travel-distance)) scale(1.4) rotate(360deg);
        transform: translateY(var(--travel-distance)) scale(1.4) rotate(360deg);
        opacity: 0;
    }
}

@keyframes flyUp {
    0% {
        -webkit-transform: translateY(0) scale(1) rotate(0deg);
        transform: translateY(0) scale(1) rotate(0deg);
        opacity: 1;
    }
    80% {
        opacity: 0.8;
    }
    100% {
        /* JS динамически подставляет расстояние в переменную --travel-distance */
        -webkit-transform: translateY(var(--travel-distance)) scale(1.4) rotate(360deg);
        transform: translateY(var(--travel-distance)) scale(1.4) rotate(360deg);
        opacity: 0;
    }
}

    .modal-video-container {
      position: relative;
      padding-bottom: 56.25%; /* 16:9 */
      height: 0;
      overflow: hidden;
      background: #000;
    }
    .modal-video-container video {
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      object-fit: cover; /* или cover, если хочешь заполнить полностью */
    }