.menu_item_active {
    color: #afafbe;
    pointer-events: none
}
.menu_list_item.active {
   /* color: var(--main-color);  Можно сделать текст желтым/салатовым */
   opacity: 1;
}
.menu_default_link {
    font-size: 20px;
    text-decoration: none
}
.menu_list .menu_dropdown__toggle.active {
    color: #afafbe; /* Здесь поставьте код вашего серого цвета */
}

.photo {
  width: 100%;       /* Растянуть на всю ширину блока */
  height: auto;  
  padding-top: 2%;   /* Фиксированная высота */
  /* Обрезает лишнее, сохраняя центр, не искажая картинку */
}

.history-title {
  border-top: 2px solid white;    /* Линия сверху (толщина, стиль, цвет) */
  border-bottom: 2px solid white; /* Линия снизу */
  padding-top: 20px;              /* Отступ от текста до верхней линии */
  padding-bottom: 20px;           /* Отступ от текста до нижней линии */
  text-align: center;             /* Выравнивание текста по центру */
  color: white;
}







.drop-cap::first-letter {
    font-family: 'Playfair Display', serif;
    font-size: 5rem;
    float: left;
    margin-right: 15px;
    line-height: 1;
    color: #c7daf7;;
    /* Темно-синий акцент */
    font-weight: bold;


}

.drop-cap{
    padding-bottom: 3%;
}
.o-college
{
    color: #ffffff;
    
}
.drop-cap h4,
h5 {
    text-align: justify;
 
}

.history-timeline {
    max-width: 1100px;
    margin: 40px auto;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

.college-history {
    max-width: 1200px;
    margin: 40px auto;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #333;
}

.history-item {
    display: flex;
    align-items: stretch;
    /* Полоска будет тянуться по высоте текста */
    margin-bottom: 0;
}

.history-year {
    width: 300px;
    text-align: left;
    
     font-size:45px;
     font-weight: bold;
   font-family: 'Playfair Display', serif;
    color: #c7daf7;;
    /* Темно-синий цвет вуза */
    padding: 20px 20px 0 0;
    flex-shrink: 0;
}

.goda{
    font-size: 40px;
}

.history-line-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 40px;
    flex-shrink: 0;
}

.dot {
    width: 12px;
    height: 12px;
    background-color: #032549;
    border-radius: 50%;
    margin-top: 25px;
    /* Совмещаем с первой строкой текста */
    z-index: 2;
}

.line {
    width: 2px;
    background-color: #032549;
    flex-grow: 1;
    /* Линия занимает все пространство вниз */
    opacity: 0.2;
}

/* Убираем линию у последнего элемента */
.history-item:last-child .line {
    display: none;
}

.history-text {
    padding: 20px 0 40px 20px;
    font-size: 1;
    line-height: 1.6;
    text-align: justify;
     font-family: 'Playfair Display', serif;
     color: #ffffff;
     width: 100%;
}


/* =======================================================
   АДАПТИВКА ДЛЯ СТРАНИЦЫ "ИСТОРИЯ КОЛЛЕДЖА" (Мобильная версия)
   ======================================================= */
@media screen and (max-width: 768px) {
    /* 1. Главные заголовки и отступы */
    main.container {
        padding: 0 15px !important;
        overflow-x: hidden; /* Защита от горизонтального скролла */
    }

    .photo {
        border-radius: 12px; /* Скругляем углы картинки для красоты */
        margin-top: 15px;
    }

    .history-title, .o-college {
        font-size: 22px !important;
        padding: 15px 10px !important;
        margin: 20px auto !important;
        width: 95% !important; /* Линии сверху и снизу не будут улетать за экран */
    }

    /* 2. Текст и Буквица (первая большая буква) */
    .drop-cap {
        font-size: 16px !important;
        line-height: 1.5 !important;
        text-align: left !important; /* На телефоне выравнивание по ширине (justify) делает некрасивые дыры */
    }

    .drop-cap::first-letter {
        font-size: 3.5rem !important; /* Уменьшаем букву (было 5rem) */
        margin-right: 10px !important;
        margin-top: 5px !important;
    }

    h5 {
        font-size: 16px !important;
        line-height: 1.5 !important;
        text-align: left !important;
    }

    /* 3. ТАЙМЛАЙН (Линия времени) */
    .history-item {
        position: relative !important;
        flex-direction: column !important; /* Выстраиваем элементы друг под другом */
        margin-bottom: 20px !important;
    }

    /* Фиксируем линию с точкой слева */
    .history-line-box {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        height: 100% !important;
        width: 30px !important;
    }

    .dot {
        margin-top: 12px !important; /* Выравниваем точку по центру годов */
        width: 10px !important;
        height: 10px !important;
    }

    /* Отодвигаем годы и текст вправо, чтобы они не наезжали на линию */
    .history-year {
        width: 100% !important;
        padding: 0 0 5px 35px !important; /* 35px - отступ от линии */
    }

    .goda {
        font-size: 26px !important; /* Уменьшаем размер года (было 40px) */
        line-height: 1.2 !important;
        margin: 0 !important;
    }

    .history-text {
        width: 100% !important;
        padding: 0 0 20px 35px !important; /* 35px - отступ от линии */
        font-size: 15px !important;
    }
}
.menu_separator {
  grid-column: 1 / -1; /* Самое важное: растягивает элемент на всю ширину сетки */
  width: 100%;
  height: 2px; /* Толщина линии */
  background: rgb(211, 211, 211); /* Цвет и прозрачность как у границ */
  margin: 10px 0; /* Отступ сверху и снизу, если нужно */
  
  /* Если из-за minmax(240px) линия станет огромной по высоте, 
     раскомментируйте строчку ниже: */
  /* align-self: center; */ 
}


/*ШРИФТЫ*/


@font-face {
    font-style: normal;
    font-weight: 100 800;
    font-family: ALSGorizont;
    src: local("ALSGorizont, Regular"), url(../fonts/ALSGorizont-Variable.a3521687.woff2) format("woff2");
    font-display: swap
}

@font-face {
    font-style: normal;
    font-weight: 100 800;
    font-family: Golos;
    src: local("Golos, Regular"), url(../fonts/GolosText-Variable.5894e8e5.woff2) format("woff2");
    font-display: swap
}

@font-face {
    font-style: normal;
    font-weight: 400;
    font-family: Sofia Sans;
    src: local("Sofia Sans, Regular"), url(../fonts/SofiaSans-Medium.61c6e0ef.woff) format("woff")
}

@font-face {
    font-style: normal;
    font-weight: 400;
    font-family: montserrat;
    src: local("montserrat, sans-serif, Regular"), url(https://fonts.googleapis.com/css2?family=Montserrat&display=swap) format("woff2"), url(https://fonts.googleapis.com/css2?family=Montserrat&display=swap) format("woff"), url(https://fonts.googleapis.com/css2?family=Montserrat&display=swap) format("opentype");
    font-display: auto
}

@font-face {
    font-style: normal;
    font-weight: 700;
    font-family: montserratBold;
    src: local("montserrat, sans-serif, Bold"), url(https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap) format("woff2"), url(https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap) format("woff"), url(https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap) format("opentype");
    font-display: auto
}