@import "https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css";
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css";
@import "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css";
@import "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css";

body {
    /*transform: scale(1.2);*/
    background-image: url('/static/images/background.jpg'); /* Указываем путь к картинке */
    background-size: cover; /* Масштабируем по размеру экрана */
    background-position: center;
    background-attachment: fixed; /* Фон остается неподвижным при прокрутке */
    color: #f8f9fa; /* Светло-серый цвет текста */
}

h1, h2, h3 {
    color: #00bfff; /* Голубой оттенок для заголовков */
}

p {
    color: #dfe4ea; /* Светло-серый для параграфов */
}

/* Затемняем фон контента для лучшей читаемости */
.content-box {
    background: rgba(0, 0, 0, 0.7); /* Затемненный черный */
    /*padding: 20px;*/
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.1);
}

/* Стили для Swiper */
.swiper {
    width: 100%;
    height: 100%;
    padding: 20px 0;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}
.swiper-slide a:hover {
    text-decoration: none;
}

.tech-card {
    width: 200px; /* Фиксированная ширина карточки */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.tech-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.tech-card i {
    display: block;
    margin: 0 auto;
}

.tech-card p {
    margin-top: 0.5rem;
    color: #333;
}

/* Стили для кнопок навигации */
.swiper-button-next,
.swiper-button-prev {
    color: #3b82f6; /* Цвет кнопок */
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 24px; /* Размер иконок кнопок */
}

.description {
    margin-top: 10px;
    font-size: 0.9rem;
    color: #555;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.3s ease;
}

.description.visible {
    opacity: 1;
    max-height: 200px; /* Максимальная высота для плавного появления */
}