/* Основные стили для вкладок */
.nav-tabs {
    border-bottom: 1px solid #ddd;
}

    .nav-tabs li {
        display: inline-block;
        margin-right: 2px;
    }

        .nav-tabs li a {
            border-radius: 15px 15px 0 0;
            padding: 10px 25px;
            color: #555; /* стандартный цвет текста */
            font-weight: bold;
            text-align: center;
            background-color: #f8f9fa; /* фон для неактивных вкладок */
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        /* Активная вкладка будет синей */
        .nav-tabs li.active a {
            background-color: #007bff; /* синий фон для активной вкладки */
            color: white; /* белый текст */
        }

        /* Неактивные вкладки будут оранжевыми */
        .nav-tabs li:not(.active) a {
            background-color: #ff6600; /* оранжевый фон для неактивной вкладки */
            color: white;
        }

/* Стили для контента вкладок */
.tab-content {
    padding: 20px;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 10px 10px;
}


/* Стили по умолчанию для больших экранов */
.adaptive-image {
    max-width: 40%;
    min-height: 100%;
    width: auto;
    height: auto;
}

/* Мобильные устройства */
@media (max-width: 768px) {
    .adaptive-image {
        max-width: 100%; /* уменьшаем изображение для мобильных устройств */
        height: auto; /* убираем фиксированную минимальную высоту */
    }
}

/* Экстра мобильные устройства (например, маленькие экраны) */
@media (max-width: 480px) {
    .adaptive-image {
        max-width: 100%; /* еще больше уменьшаем изображение на маленьких экранах */
    }
}

/* Десктопные устройства */
@media (min-width: 1024px) {
    .adaptive-image {
        max-width: 100%; /* на широких экранах изображение будет меньше */
    }
}