@media (min-width: 768px) {
    .cert-item {
        background: var(--basic);
        padding: 5px;
        margin: 5px;
        border-radius: 10px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        flex: 1 1 calc(25% - 20px);
    }
}
@media (max-width: 767px) {
    .cert-item {
        background: var(--basic);
        padding: 5px;
        margin: 5px;
        border-radius: 10px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        flex: 1 1 calc(50% - 20px);
    }
}
  
.cert-image {
    width: 100%; /* Заполняет всю ширину контейнера */
    border-radius: 10px; /* Закругляет углы изображения так же, как и контейнер */
    object-fit: cover; /* Обеспечивает сохранение соотношения сторон без растяжения, при этом обрезая изображение */
}
@media (min-width: 768px) {
    .cert-image {
        height: 350px;
    }

}
@media (max-width: 767px) {
    .cert-image {
        height: 150px;
    }
}

/* Анимация появления */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.cert-image:hover {
    transform: scale(1.05); /* Увеличение при наведении */
}

.modal {
    display: none; /* Скрыто по умолчанию */
    position: fixed;
    z-index: 1000; /* Убедитесь, что модальное окно выше других элементов */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Полупрозрачный черный фон */
    justify-content: center; /* Центрируем содержимое по горизонтали */
    align-items: center; /* Центрируем содержимое по вертикали */
}

/* Стили для изображения в модальном окне */
.modal-content-cert {
    max-width: 100%; /* Ширина не больше 100% */
    max-height: 100%; /* Высота не больше 100% */
    width: auto; /* Автоматическая ширина */
    height: auto; /* Автоматическая высота */
    object-fit: contain; /* Сохранение пропорций изображения */
    display: block; /* Блочный элемент */
    margin: auto; /* Центрировать изображение по горизонтали */
}
@media (max-width: 767px) {
    .modal-content-cert {
        margin-left: 100px;
    }
}

/* Закрывающая кнопка */
.close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 35px;
    cursor: pointer;
}


.cert-row .cert-item {
    overflow: hidden;
    max-height: 500px; /* или другая максимальная высота для видимых карточек */
    opacity: 1;
    transition: max-height 0.5s ease, opacity 0.5s ease;
  }
  
  .cert-row.collapsed .cert-item:nth-child(n+5) {
    max-height: 0;
    opacity: 0;
    pointer-events: none; /* чтобы скрытые элементы не мешали кликам */
  }
    /* Когда раскрыто — показываем */
    .cert-row.expanded .cert-item:nth-child(n+5) {
        max-height: 500px; /* достаточно для карточки */
        opacity: 1;
        margin-top: 15px;
      }
  
  

  /* Убираем выделение текста на кнопке */
  .toggle-btn:focus {
    outline: none;
  }