.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    overflow-x: hidden;
    font-size: 14px;
    position: relative;
    min-height: 100%;
}
:root {
    --primary-color: #6d7bd4;
    --secondary-color: #9c89b8;
    --accent-color: #b8bedd;
    --text-color: #4a4a4a;
    --light-bg: #f8f9fa;
    --success-color: #28a745;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
}

body {
    overflow-x: hidden;
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: #fff;
}

/* Герой секция */
.hero-section {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    padding-top: 60px;
    position: relative;
    padding-bottom: 80px; 
    width: 100%;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><polygon fill="rgba(255,255,255,0.05)" points="0,1000 1000,0 1000,1000"/></svg>');
}

.container-fluid.px-0 {
    padding-left: 0;
    padding-right: 0;
  
}

.hero-section .container-fluid {
    padding-left: 14rem !important;
    padding-right: 4rem !important;
}


.hero-buttons {
    display: flex;
    justify-content: flex-start; /* Выравнивание по левому краю */
    align-items: flex-start; /* Выравнивание по верху */
    flex-wrap: wrap; /* Разрешаем перенос */
    gap: 1rem; /* Расстояние между кнопками */
}

    /* Убираем растягивание, оставляем естественную ширину */
    .hero-buttons .btn {
        flex: 0 0 auto; /* НЕ растягиваем, естественная ширина */
        min-width: auto; /* Убираем фиксированную минимальную ширину */
        max-width: none; /* Убираем ограничение максимальной ширины */
        white-space: nowrap; /* Текст не переносится */
    }


/*.hero-avatar {
    width: 400px;
    height: 400px;
    border: 6px solid rgba(255,255,255,0.3);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    object-fit: cover;
    border-radius: 50% !important;
    margin-left: 0;
    -webkit-border-radius: 50%;
}
*/
.profession-title {
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Статистика в герое */
.stats {
    display: flex;
    gap: 2rem;
    margin: 2rem 0;

}

.stat-item {
    text-align: center;

}

.stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
}

.stat-label {
    font-size: 0.9rem;
    opacity: 0.9;
}

.mission-statement {
    font-size: 1.2rem;
    font-style: italic;
    border-left: 4px solid rgba(255,255,255,0.5);
    padding-left: 1rem;
}

/* Методы работы */
.methods-list {
    list-style: none;
    padding: 0;
}

    .methods-list li {
        padding: 0.5rem 0;
        font-size: 1.1rem;
        border-bottom: 1px solid #eee;
    }

        .methods-list li:last-child {
            border-bottom: none;
        }

.methods-grid {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.philosophy-card {
    margin-top: 3rem;
}

/* Таймлайн образования */
.education-timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

    .education-timeline::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 2px;
        background: var(--primary-color);
        transform: translateX(-50%);
    }

.education-year {
    text-align: center;
    background: var(--primary-color);
    color: white;
    padding: 0.5rem 2rem;
    border-radius: 25px;
    font-weight: 600;
    margin: 2rem auto;
    position: relative;
    z-index: 2;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
}

.education-item {
    position: relative;
    margin-bottom: 2rem;
    width: 45%;
}

    .education-item:nth-child(odd) {
        left: 0;
    }

    .education-item:nth-child(even) {
        left: 55%;
    }

.education-year-group .education-item:nth-child(odd) {
    left: 0;
}

.education-year-group .education-item:nth-child(even) {
    left: 55%;
}



.education-content {
    background: white;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    position: relative;
}

    .education-content::before {
        content: '';
        position: absolute;
        top: 20px;
        width: 20px;
        height: 20px;
        background: var(--primary-color);
        border-radius: 50%;
    }

.education-item:nth-child(odd) .education-content::before {
    right: -50px;
}

.education-item:nth-child(even) .education-content::before {
    left: -50px;
}


.education-hours {
    display: inline-block;
    background: var(--accent-color);
    color: var(--text-color);
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

/* Запросы */
.requests-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.request-item {
    background: white;
    padding: 2rem 1.5rem;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 2px solid transparent;
}

    .request-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.15);
        border-color: var(--primary-color);
    }

.request-icon {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.request-item h5 {
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}



/* Особенности работы */
.feature-card {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: 1px solid rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .feature-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    }

.feature-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

    .feature-icon.honesty {
        color: #28a745; /* Зеленый для честности */
    }

    .feature-icon.responsibility {
        color: #dc3545; /* Красный для ответственности */
    }

    .feature-icon.relaxation {
        color: #6f42c1; /* Фиолетовый для расслабленности */
    }

.feature-title {
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 1.5rem;
    font-size: 1.75rem;
}

.feature-text {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 1rem;
}

    .feature-text:last-child {
        margin-bottom: 0;
    }

/* Клуб "Время жить" */
.benefits-list, .audience-list {
    list-style: none;
    padding: 0;
}

    .benefits-list li, .audience-list li {
        padding: 0.75rem 0;
        font-size: 1.1rem;
        border-bottom: 1px solid #eee;
    }

        .benefits-list li:last-child, .audience-list li:last-child {
            border-bottom: none;
        }

.club-format {
    background: white;
    padding: 2.5rem;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    margin-top: 2rem;
}

.format-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.format-feature {
    text-align: center;
    padding: 1.5rem;
}

    .format-feature i {
        font-size: 2.5rem;
        color: var(--primary-color);
        margin-bottom: 1rem;
    }

.cta-section {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    padding: 4rem 0;
    text-align: center;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2rem;
}

/* Общие стили */
.section-title {
    text-align: center;
    margin-bottom: 3rem;
    font-weight: 600;
    color: var(--text-color);
}

.card {
    border: none;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

    .card:hover {
        transform: translateY(-5px);
    }

.btn-primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
    padding: 0.75rem 2rem;
    font-weight: 600;
}

    .btn-primary:hover {
        background: var(--secondary-color);
        border-color: var(--secondary-color);
        transform: translateY(-2px);
    }

.btn-outline-primary {
    border-color: var(--primary-color);
    color: var(--primary-color);
    padding: 0.75rem 2rem;
    font-weight: 600;
}

    .btn-outline-primary:hover {
        background: var(--primary-color);
        border-color: var(--primary-color);
        transform: translateY(-2px);
    }

/* Анимации */
[data-aos] {
    transition: all 0.6s ease;
}




/* Утилиты */
.text-primary {
    color: var(--primary-color) !important;
}

.bg-light {
    background-color: var(--light-bg) !important;
}

.shadow-sm {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}

.rounded-lg {
    border-radius: 15px !important;
}

/* Навигация (если добавите позже) */
.navbar {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    backdrop-filter: blur(10px);
}

.navbar-brand {
    font-weight: 700;
    color: var(--primary-color) !important;
}

/* Соцсети (если добавите позже) */
.social-link {
    text-decoration: none;
    color: inherit;
    display: block;
    padding: 2rem 1rem;
    border-radius: 15px;
    transition: all 0.3s ease;
    background: white;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

    .social-link:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.2);
        color: inherit;
    }

.telegram:hover {
    background: #0088cc;
    color: white;
}

.whatsapp:hover {
    background: #25D366;
    color: white;
}

.viber:hover {
    background: #7360F2;
    color: white;
}

.instagram:hover {
    background: #E1306C;
    color: white;
}

/* Секция особенностей работы */
.work-features-section {
    background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
}

.feature-card {
    /* Обновляем существующие стили */
    background: white;
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: 1px solid rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%; /* ДОБАВИТЬ эту строку */
    display: flex; /* ДОБАВИТЬ */
    flex-direction: column; /* ДОБАВИТЬ */
}

.feature-content {
    /* Обновляем для равной высоты карточек */
    flex: 1; /* ДОБАВИТЬ - это заставляет контент занимать всю доступную высоту */
    display: flex; /* ДОБАВИТЬ */
    flex-direction: column; /* ДОБАВИТЬ */
}


    .feature-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    }

.honesty-card {
    border-left-color: #28a745;
}

.responsibility-card {
    border-left-color: #dc3545;
}

.relaxation-card {
    border-left-color: #6f42c1;
}

.feature-header {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
}

.feature-icon-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1.5rem;
}

.honesty-card .feature-icon-wrapper {
    background: rgba(40, 167, 69, 0.1);
}

.responsibility-card .feature-icon-wrapper {
    background: rgba(220, 53, 69, 0.1);
}

.relaxation-card .feature-icon-wrapper {
    background: rgba(111, 66, 193, 0.1);
}

.feature-icon {
    font-size: 2.5rem;
}

.honesty-card .feature-icon {
    color: #28a745;
}

.responsibility-card .feature-icon {
    color: #dc3545;
}

.relaxation-card .feature-icon {
    color: #6f42c1;
}

.feature-name {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-color);
}

.feature-lead {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.feature-text {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    color: var(--text-color);
}

/* Эмоции теги */
.emotions-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin: 2rem 0;
}

.emotion-tag {
    background: rgba(109, 123, 212, 0.1);
    color: var(--primary-color);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid rgba(109, 123, 212, 0.2);
}

.feature-conclusion {
    font-style: italic;
    font-size: 1.1rem;
    color: #666;
    border-left: 3px solid var(--primary-color);
    padding-left: 1rem;
    margin-top: 1.5rem;
}

/* Блок ответственности */
.responsibility-highlight {
    background: rgba(220, 53, 69, 0.05);
    border: 2px solid rgba(220, 53, 69, 0.2);
    border-radius: 15px;
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.highlight-text {
    font-weight: 600;
    color: #dc3545;
    margin: 0;
    text-align: center;
    font-size: 1.1rem;
}

/* Блок акцента */
.emphasis-block {
    background: linear-gradient(135deg, #6d7bd4, #9c89b8);
    color: white;
    padding: 2rem;
    border-radius: 15px;
    margin-top: 2rem;
    text-align: center;
}

.emphasis-text {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
}

.highlight {
    color: #ffd700;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Секция клуба */
.living-club-section {
    background: linear-gradient(135deg, #fff9f0 0%, #fff0f8 100%);
     
}

.club-subtitle {
    font-size: 1.3rem;
    color: var(--text-color);
    opacity: 0.8;
}
    .club-benefits-card:hover,
    .club-audience-card:hover,
    .club-format-card:hover {
        transform: translateY(-10px);
    }

.card-header {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: 2rem;
    text-align: center;
}

    .card-header h4 {
        margin: 1rem 0 0 0;
        font-weight: 600;
    }

.benefits-icon,
.audience-icon,
.format-icon {
    font-size: 3rem;
    color: white;
}

.card-body {
    padding: 2rem;
}




    .benefit-item:last-child,
    .audience-item:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }



.benefit-item span,
.audience-item span {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-color);
}



    .format-feature:last-child {
        margin-bottom: 0;
    }

    .format-feature .feature-icon {
        font-size: 1.2rem;
        color: var(--primary-color);
        margin-right: 1rem;
        width: 20px;
        text-align: center;
    }

    .format-feature span {
        font-size: 0.95rem;
        color: var(--text-color);
    }

.format-note {
    text-align: center;
    font-style: italic;
    color: #666;
    margin: 1.5rem 0 0 0;
}





/* Стили для Telegram ссылки клуба */
.telegram-club-link {
    display: inline-block;
    background: linear-gradient(135deg, #0088cc, #00aced);
    color: white;
    text-decoration: none;
    border-radius: 20px;
    padding: 1.5rem 2rem;
    box-shadow: 0 10px 30px rgba(0, 136, 204, 0.3);
    transition: all 0.3s ease;
    max-width: 400px;
    width: 100%;
}

    .telegram-club-link:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(0, 136, 204, 0.4);
        color: white;
        text-decoration: none;
    }

.telegram-link-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.telegram-icon-wrapper {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.telegram-icon {
    font-size: 2rem;
    color: white;
}

.telegram-text {
    flex: 1;
    text-align: left;
}

.telegram-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
    letter-spacing: 0.5px;
}

.telegram-subtitle {
    font-size: 0.9rem;
    opacity: 0.9;
    font-weight: 400;
}

.telegram-arrow {
    opacity: 0.8;
    transition: transform 0.3s ease;
}

.telegram-club-link:hover .telegram-arrow {
    transform: translateX(3px);
}

/* Альтернативный вариант - более минималистичный */
.telegram-club-link.minimal {
    background: white;
    color: #0088cc;
    border: 2px solid #0088cc;
    box-shadow: 0 5px 20px rgba(0, 136, 204, 0.2);
}

    .telegram-club-link.minimal:hover {
        background: #0088cc;
        color: white;
    }

    .telegram-club-link.minimal .telegram-icon-wrapper {
        background: #0088cc;
    }

    .telegram-club-link.minimal .telegram-icon {
        color: white;
    }

    .telegram-club-link.minimal:hover .telegram-icon-wrapper {
        background: rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.5);
    }

/* Вариант с иконкой справа */
.telegram-club-link.icon-right .telegram-link-content {
    flex-direction: row-reverse;
}

.telegram-club-link.icon-right .telegram-text {
    text-align: right;
}



/* Дополнительные анимации */
@keyframes pulseTelegram {
    0% {
        box-shadow: 0 10px 30px rgba(0, 136, 204, 0.3);
    }

    50% {
        box-shadow: 0 10px 30px rgba(0, 136, 204, 0.6);
    }

    100% {
        box-shadow: 0 10px 30px rgba(0, 136, 204, 0.3);
    }
}

.telegram-club-link.pulse {
    animation: pulseTelegram 2s infinite;
}


.custom-navbar {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    padding: 1rem 0;
    transition: all 0.3s ease;
}

    .custom-navbar.scrolled {
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
        padding: 0.5rem 0;
    }

.navbar-brand {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    margin-right: 3rem;
}

.brand-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.2;
}

.brand-profession {
    font-size: 0.8rem;
    color: var(--text-color);
    opacity: 0.8;
    font-weight: 400;
    letter-spacing: 0.5px;
}

.custom-navbar .navbar-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-left: auto;
}

.custom-navbar .nav-link {
    color: var(--text-color) !important;
    font-weight: 500;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 25px;
    transition: all 0.3s ease;
    position: relative;
    text-decoration: none;
}

    .custom-navbar .nav-link:hover {
        color: var(--primary-color) !important;
        background: rgba(109, 123, 212, 0.1);
        transform: translateY(-2px);
    }

    .custom-navbar .nav-link::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 50%;
        width: 0;
        height: 2px;
        background: var(--primary-color);
        transition: all 0.3s ease;
        transform: translateX(-50%);
    }

    .custom-navbar .nav-link:hover::after {
        width: 80%;
    }

    /* CTA кнопка в навигации */
    .custom-navbar .nav-link.cta-button {
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        color: white !important;
        padding: 0.7rem 1.5rem;
        border-radius: 25px;
        font-weight: 600;
        box-shadow: 0 4px 15px rgba(109, 123, 212, 0.3);
        margin-left: 1rem;
    }

        .custom-navbar .nav-link.cta-button:hover {
            background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(109, 123, 212, 0.4);
            color: white !important;
        }

        .custom-navbar .nav-link.cta-button::after {
            display: none;
        }

/* Анимация появления навигации */
@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.custom-navbar {
    animation: slideDown 0.5s ease-out;
}





.club-card {
    background: white;
    border-radius: 0px !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
  
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 480px; /* Увеличиваем минимальную высоту */
}

    .club-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 25px 60px rgba(0,0,0,0.15);
    }

.club-card-header {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: 2.5rem 2rem;
    text-align: center;
    flex-shrink: 0;
}

.club-card-icon {
    font-size: 3.5rem;
    color: white;
    margin-bottom: 1rem;
    display: block;
}

.club-card-title {
    margin: 0;
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.3;
}

.club-card-body {
    padding: 3.5rem 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Стили для списков (первые две карточки) */
.club-card-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
}

.club-card-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #f0f0f0;
}

    .club-card-item:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }

.club-item-icon {
    font-size: 1.3rem;
    margin-right: 1rem;
    margin-top: 0.1rem;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

.club-card-item:nth-child(1) .club-item-icon {
    color: #28a745;
}

.club-card-item:nth-child(2) .club-item-icon {
    color: #17a2b8;
}

.club-card-item:nth-child(3) .club-item-icon {
    color: #ffc107;
}

.club-card-item:nth-child(4) .club-item-icon {
    color: #6f42c1;
}

.club-item-text {
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--text-color);
    font-weight: 500;
}

/* Стили для третьей карточки (формат) */
.club-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.club-main-text {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    text-align: center;
    color: var(--text-color);
}

.club-features {
    margin: 1.5rem 0;
    flex: 1;
}

.club-feature-item {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(109, 123, 212, 0.05);
    border-radius: 12px;
    transition: all 0.3s ease;
}

    .club-feature-item:hover {
        background: rgba(109, 123, 212, 0.1);
        transform: translateX(5px);
    }

    .club-feature-item:last-child {
        margin-bottom: 0;
    }

.club-feature-icon {
    font-size: 1.3rem;
    color: var(--primary-color);
    margin-right: 1rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.club-feature-text {
    font-size: 1rem;
    color: var(--text-color);
    font-weight: 500;
}

.club-note-text {
    text-align: center;
    font-style: italic;
    color: #666;
    margin: 1.5rem 0 0 0;
    font-size: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #f0f0f0;
}

/* Выравнивание высоты карточек */
.club-card-body,
.club-card-content {
    min-height: 280px; 
}


.club-card-list,
.club-card-item,
.club-main-text,
.club-features,
.club-feature-item,
.club-note-text {
    border-radius: 0 !important;
}


/* ===== СТИЛИ ДЛЯ СЕКЦИИ ТАРИФОВ ===== */

.tariffs-section {
    background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
}

.section-header {
    margin-bottom: 4rem;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 1rem;
}

.section-subtitle {
    font-size: 1.2rem;
    color: #666;
    font-weight: 400;
}

/* Карточки тарифов */
.tariff-card {
    background: white;
    border-radius: 32px !important; /* Оставляем только это скругление */
    padding: 0;
    box-shadow: 0 20px 60px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    position: relative;
    height: 100%;
    overflow: hidden; /* Добавляем чтобы внутренний контент не выходил за скругленные углы */
}

.tariff-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 80px rgba(0,0,0,0.15);
}

.popular-tariff {
    border: 3px solid var(--primary-color);
    transform: scale(1.05);
    border-radius: 30px !important; /* Явно указываем скругление */
}


    .popular-tariff:hover {
        transform: scale(1.05) translateY(-10px);
    }

.vip-tariff {
    border: 3px solid #ffd700;
    background: linear-gradient(135deg, #fffaf0, #fff5e6);
    border-radius: 30px; /* Явно указываем скругление */
}

.popular-badge {
    position: absolute;
    top: 20px;
    right: -35px;
    background: var(--primary-color);
    color: white;
    padding: 0.5rem 3rem;
    font-size: 0.8rem;
    font-weight: 600;
    transform: rotate(45deg);
    z-index: 2;
    border-radius: 25px !important;
}

.vip-tariff .popular-badge {
    background: linear-gradient(135deg, #ffd700, #ff6b00);
    border-radius: 25px !important;
    overflow: hidden;
}

/* Шапка тарифа */
.tariff-header {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border-radius: 25px !important;
    padding: 2.5rem 2rem;
    text-align: center;
    position: relative;
}

.tariff-name {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
}

.tariff-icon {
    font-size: 3rem;
    opacity: 0.9;
}

.vip-tariff .tariff-header {
    background: linear-gradient(135deg, #ffd700, #ff6b00);
}

.tariff-header {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: 2.5rem 2rem;
    text-align: center;
    position: relative;
    border-radius: 0; /* Убираем скругление у шапки */
}

/* Особенности тарифа */
.tariff-features {
    padding: 2.5rem 2rem;
    flex: 1;
    border-radius: 0 !important; /* Убираем скругление у блока особенностей */
}

.features-title {
    font-size: 1.1rem;
    color: var(--text-color);
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.features-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.2rem;
    padding: 0.8rem;
    border-radius: 0; /* Убираем скругление у элементов списка */
    transition: background 0.3s ease;
}

    .feature-item:hover {
        background: rgba(109, 123, 212, 0.05);
    }

.feature-check {
    color: #28a745;
    font-size: 1.1rem;
    margin-right: 1rem;
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.highlight-feature {
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
}

    .highlight-feature .feature-check {
        color: #ff6b00;
    }

.feature-item span {
    font-size: 1rem;
    line-height: 1.4;
    color: var(--text-color);
}

/* Цены */
.tariff-pricing {
    padding: 0 2rem;
    border-top: 1px solid #f0f0f0;
    border-radius: 0 !important; /* Убираем скругление у блока цен */
}

.price-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 0;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
}

    .price-option:last-child {
        border-bottom: none;
    }

   
.price-option.popular {
    background: rgba(109, 123, 212, 0.05);
    margin: 0 -2rem;
    padding: 1.2rem 2rem;
    border-bottom: none;
    border-top: 1px solid rgba(109, 123, 212, 0.2);
    border-bottom: 1px solid rgba(109, 123, 212, 0.2);
    border-radius: 0; /* Убираем скругление у популярной цены */
}

.price-period {
    font-weight: 500;
    color: var(--text-color);
}

.price-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

.price-save {
    position: absolute;
    top: -8px;
    right: 2rem;
    background: var(--primary-color);
    color: white;
    padding: 0.2rem 0.8rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
}

/* Кнопки */
.tariff-actions {
    padding: 2rem;
    border-radius: 0 !important; /* Убираем скругление у блока кнопок */
}

.btn-choose {
    width: 100%;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 15px;
    transition: all 0.3s ease;
}

/* ===== СТИЛИ ДЛЯ СЕКЦИИ ЗАПИСЕЙ ===== */

.records-section {
    background: linear-gradient(135deg, #fff5f5 0%, #fff0f5 100%);
}

.intro-text {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-color);
    max-width: 800px;
    margin: 0 auto;
}

/* Таймлайн блоков */
.blocks-timeline {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}

    .blocks-timeline::before {
        content: '';
        position: absolute;
        left: 30px;
        top: 0;
        bottom: 0;
        width: 3px;
        background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
        border-radius: 3px;
    }

.block-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 2.5rem;
    position: relative;
}

.block-period {
    background: var(--primary-color);
    color: white;
    padding: 0.8rem 1.2rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    min-width: 100px;
    text-align: center;
    margin-right: 2rem;
    position: relative;
    z-index: 2;
}

.block-content {
    flex: 1;
    background: white;
    padding: 1.5rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.block-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.block-description {
    color: #666;
    line-height: 1.5;
    margin: 0;
}

/* Карточка преимуществ записей */
.benefits-card {
    background: white;
    border-radius: 20px;
    padding: 3rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.1);
    display: flex;
    gap: 3rem;
    align-items: center;
}

.benefits-content {
    flex: 1;
}

.benefits-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 1.5rem;
}

.benefits-text {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-color);
    margin-bottom: 1rem;
}

    .benefits-text:last-child {
        margin-bottom: 0;
    }

.benefits-pricing {
    background: rgba(109, 123, 212, 0.05);
    padding: 2rem;
    border-radius: 15px;
    min-width: 250px;
}

.record-price-option {
    text-align: center;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(109, 123, 212, 0.2);
}

    .record-price-option:last-child {
        border-bottom: none;
    }

    .record-price-option.popular {
        background: rgba(109, 123, 212, 0.1);
        margin: 0 -2rem;
        padding: 1rem 2rem;
        border-radius: 10px;
    }

.price-label {
    display: block;
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

.btn-records {
    width: 100%;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 15px;
    margin-top: 1.5rem;
}




/* ===== СТИЛИ ДЛЯ ЛИЧНЫХ СЕССИЙ ===== */

.personal-sessions-section {
    background: linear-gradient(135deg, #f0f8ff 0%, #f5f0ff 100%);
}

/* Бейджи времени */
.time-left-badge {
    display: inline-block;
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: 1rem;
}

.future-badge {
    display: inline-block;
    background: linear-gradient(135deg, #dc3545, #e83e8c);
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: 1rem;
}

/* Карточки типов сессий */
.session-type-card {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    height: 100%;
    border: 2px solid transparent;
}

.session-type-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 60px rgba(0,0,0,0.15);
}

.future-card {
    border: 2px dashed #dc3545;
    background: linear-gradient(135deg, #fff5f5, #fff0f0);
    opacity: 0.9;
}

/* Шапка карточки сессии */
.session-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #f0f0f0;
}

.session-duration {
    display: inline-flex;
    align-items: center;
    background: rgba(109, 123, 212, 0.1);
    color: var(--primary-color);
    padding: 0.7rem 1.5rem;
    border-radius: 25px;
    font-weight: 600;
    margin-bottom: 1rem;
}

    .session-duration i {
        font-size: 1.2rem;
        margin-right: 0.5rem;
    }

.session-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
}

/* Опции сессий */
.session-options {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
   
}

.session-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.0rem;
    border: 2px solid #f0f0f0;
    border-radius: 15px;
    transition: all 0.3s ease;
    position: relative;

}

    .session-option:hover {
        border-color: var(--primary-color);
        background: rgba(109, 123, 212, 0.02);
    }

    .session-option.popular {
        border-color: var(--primary-color);
        background: rgba(109, 123, 212, 0.05);
        transform: scale(1.0);
    }

.option-info {
    flex: 1;
}

.option-name {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 0.5rem 0;
}

.option-desc {
    color: #666;
    font-size: 0.9rem;
    margin: 0;
}

.option-badge {
    display: inline-block;
    background: var(--primary-color);
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 0.5rem;

}

.option-price {
    text-align: center;
}

.price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    display: block;
}

.old-price {
    text-decoration: line-through;
    color: #999;
    font-size: 1rem;
    font-weight: 500;
}

.new-price {
    color: #dc3545;
    font-size: 1.5rem;
}

.price-per-session {
    font-size: 0.9rem;
    color: #666;
    font-weight: 500;
}

/* Срочные сессии */


.urgent-sessions-card {
    background: white;
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    position: relative;
    border: 2px solid #ff6b6b;
    background: linear-gradient(135deg, #fff5f5, #ffe6e6);
    margin-top: 20px; /* Отступ сверху для бейджа */
    overflow: visible; /* Важно! чтобы бейдж не обрезался */
}

.urgent-badge {
    position: absolute;
    top: -20px; /* Увеличиваем отступ сверху */
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
    color: white;
    padding: 0.5rem 2rem;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
    z-index: 20; /* Добавляем z-index чтобы был поверх границы */
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3); /* Добавляем тень для объема */
}


.future-urgent {
    background: linear-gradient(135deg, #dc3545, #e83e8c);
}

.urgent-options {
    display: flex;
    justify-content: space-around;
    gap: 2rem;
    margin: 2rem 0;
}

.urgent-option {
    text-align: center;
    flex: 1;
}

.urgent-duration {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

.urgent-option .urgent-price {
    font-size: 1.8rem;
    font-weight: 700;
    color: #dc3545;
}

.urgent-note {
    text-align: center;
    font-style: italic;
    color: #666;
    padding: 1rem;
    background: rgba(255, 107, 107, 0.1);
    border-radius: 10px;
    margin-top: 1rem;
}

/* CTA блок */
.cta-card {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: 3rem;
    border-radius: 25px;
    box-shadow: 0 20px 60px rgba(109, 123, 212, 0.3);
}

.cta-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.cta-text {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-bottom: 2rem;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

    .cta-buttons .btn {
        padding: 1rem 2rem;
        font-size: 1.1rem;
        font-weight: 600;
        border-radius: 15px;
    }

    .cta-buttons .btn-outline-primary {
        border-color: white;
        color: white;
        background: transparent;
    }

        .cta-buttons .btn-outline-primary:hover {
            background: white;
            color: var(--primary-color);
        }

/* Заголовки секций */
.tariffs-title,
.urgent-title,
.future-title {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 1rem;
}

.urgent-subtitle {
    color: #666;
    font-size: 1.1rem;
}


/* ===== СТИЛИ ДЛЯ УСЛОВИЙ РАБОТЫ ===== */

.conditions-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

/* Сетка условий */
.conditions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.condition-card {
    background: white;
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    border-left: 5px solid var(--primary-color);
}

    .condition-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    }

.condition-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
    font-size: 1.8rem;
}

.condition-content {
    flex: 1;
}

.condition-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 1rem;
}

.condition-text {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-color);
    margin: 0;
}

/* Детали условий */
.condition-details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.condition-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(109, 123, 212, 0.03);
    border-radius: 10px;
    border-left: 3px solid var(--primary-color);
}

.item-label {
    font-size: 0.95rem;
    color: #666;
    font-weight: 500;
}

.item-value {
    font-size: 1rem;
    font-weight: 600;
    padding: 0.3rem 0.8rem;
    border-radius: 8px;
    display: inline-block;
}

    .item-value.warning {
        background: rgba(220, 53, 69, 0.1);
        color: #dc3545;
        border: 1px solid rgba(220, 53, 69, 0.2);
    }

    .item-value.success {
        background: rgba(40, 167, 69, 0.1);
        color: #28a745;
        border: 1px solid rgba(40, 167, 69, 0.2);
    }

/* Список платформ */
.platforms-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.platform-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem;
    background: rgba(109, 123, 212, 0.05);
    border-radius: 10px;
    transition: all 0.3s ease;
}

    .platform-item:hover {
        background: rgba(109, 123, 212, 0.1);
        transform: translateX(5px);
    }

.platform-icon {
    font-size: 1.3rem;
    width: 20px;
    text-align: center;
}

    .platform-icon.zoom {
        color: #2d8cff;
    }

    .platform-icon.meet {
        color: #00897b;
    }

    .platform-icon.telegram {
        color: #0088cc;
    }

    .platform-icon.yandex {
        color: #ffcc00;
    }

.platform-item span {
    font-weight: 500;
    color: var(--text-color);
}

/* Карточка примечания */
.conditions-note {
    max-width: 800px;
    margin: 0 auto;
}

.note-card {
    background: linear-gradient(135deg, #fff3cd, #ffeaa7);
    border: 2px solid #ffc107;
    border-radius: 20px;
    padding: 2.5rem;
    text-align: center;
    box-shadow: 0 10px 30px rgba(255, 193, 7, 0.2);
}

.note-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.note-icon {
    font-size: 2rem;
    color: #856404;
}

.note-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #856404;
    margin: 0;
}

.note-text {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #856404;
    margin: 0;
    font-style: italic;
}



/* Анимации для иконок */
@keyframes pulseIcon {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.condition-card:hover .condition-icon {
    animation: pulseIcon 0.6s ease-in-out;
}

/* Цветовые акценты для разных типов условий */
.condition-card:nth-child(1) {
    border-left-color: #28a745;
}

    .condition-card:nth-child(1) .condition-icon {
        background: linear-gradient(135deg, #28a745, #20c997);
    }

.condition-card:nth-child(2) {
    border-left-color: #dc3545;
}

    .condition-card:nth-child(2) .condition-icon {
        background: linear-gradient(135deg, #dc3545, #e83e8c);
    }

.condition-card:nth-child(3) {
    border-left-color: #ffc107;
}

    .condition-card:nth-child(3) .condition-icon {
        background: linear-gradient(135deg, #ffc107, #ffd54f);
    }

.condition-card:nth-child(4) {
    border-left-color: #6f42c1;
}

    .condition-card:nth-child(4) .condition-icon {
        background: linear-gradient(135deg, #6f42c1, #a78bfa);
    }

.condition-card:nth-child(5) {
    border-left-color: #17a2b8;
}

    .condition-card:nth-child(5) .condition-icon {
        background: linear-gradient(135deg, #17a2b8, #6cb2eb);
    }

.condition-card:nth-child(6) {
    border-left-color: #fd7e14;
}

.condition-card:nth-child(6) .condition-icon {
    background: linear-gradient(135deg, #fd7e14, #ffa94d);
}
.platform-icon.yandex {
    color: #ff0000; /* Красный цвет Яндекс */
}

/* Галерея документов */
.documents-gallery {
    max-width: 1200px;
    margin: 0 auto;
}

.document-item {
    background: white;
    border-radius: 15px;
  
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

    .document-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    }




.document-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.document-item:hover .document-overlay {
    opacity: 1;
}

.document-item:hover .document-image {
    transform: scale(1.05);
}

.btn-view-document {
    background: var(--primary-color);
    color: white;
    border: none;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .btn-view-document:hover {
        background: var(--secondary-color);
        transform: scale(1.1);
    }

.document-info {
    padding: 1.5rem;
}

    .document-info h5 {
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: var(--text-color);
    }

    .document-info p {
        color: #666;
        margin: 0;
        font-size: 0.9rem;
    }

/* Lightbox модальное окно */
.modal-lightbox {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    animation: fadeIn 0.3s ease;
    inset: 0;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.6);
    z-index: 3000;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-content {
    position: relative;
    margin: 2% auto;
    max-width: 90%;
    max-height: 90%;
    background: white;
    border-radius: 10px;

    animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 25px;
    color: white;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1001;
    background: rgba(0,0,0,0.5);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .close-modal:hover {
        background: rgba(0,0,0,0.8);
    }

.modal-image {
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
}

.modal-caption {
    padding: 1.5rem;
    background: white;
}

    .modal-caption h4 {
        margin: 0 0 0.5rem 0;
        color: var(--text-color);
    }

    .modal-caption p {
        margin: 0;
        color: #666;
    }

/* Стили для категорий документов */
.documents-category {
    margin-bottom: 4rem;
}

.category-title {
    font-size: 2rem;
    font-weight: 600;
    color: var(--primary-color);
    padding-bottom: 1rem;
    border-bottom: 3px solid var(--primary-color);
    display: inline-block;
}

.document-year {
    font-size: 0.85rem;
    color: #888;
    font-weight: 500;
    margin: 0.5rem 0 0 0;
}

.modal-year {
    font-size: 0.9rem;
    color: #666;
    margin: 0.5rem 0 0 0;
    font-style: italic;
}



/* Делаем изображения и кнопки более кликабельными */
.document-image {
    cursor: pointer;
    transition: all 0.3s ease;
}

    .document-image:hover {
        transform: scale(1.02);
    }

.btn-view-document {
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Улучшаем overlay */
.document-overlay {
    cursor: pointer;
}

/* Анимация загрузки изображения */
.modal-image {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-image.loaded {
    opacity: 1;
}


.custom-navbar {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    font-family: 'Inter', sans-serif; /* или любой другой шрифт */
    font-size: 1.1rem; /* увеличиваем текст навигации */
    font-weight: 500; /* немного жирнее для читаемости */
    padding: 0.8rem 1rem;

}

.navbar-toggler {
    border: none;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255,255,255,0.9%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/ %3E%3C/svg%3E");
}

.navbar-collapse {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 0 0 16px 16px;
    padding: 1rem;
}

.nav-link {
    color: white !important;
}

.navbar-nav .nav-link {
    color: white;
    margin: 0 10px;
    font-weight: 500;
}

    .navbar-nav .nav-link:hover {
        color: var(--secondary-color) !important; /* при наведении */
    }

.cta-button {
    font-weight: 600;
    background-color: var(--secondary-color);
    border-radius: 20px;
    padding: 0.6rem 1.3rem;
    color: #fff !important;
    transition: all 0.3s ease;
}

    .cta-button:hover {
        background-color: var(--primary-color);
    }


.navbar-collapse {
    background-color: #ffffff; /* фон самого выпадающего меню */
    border-radius: 20px; /* округляем края */
    margin-top: 10px; /* чуть ниже кнопки-гамбургера */
    padding: 1rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    width: 100%; /* чтобы не обрезалось справа */
}

    /* Когда меню открыто — плавное появление */
    .navbar-collapse.show {
        opacity: 1;
        transform: translateY(0);
    }

    .navbar-collapse.collapsing {
        opacity: 0;
        transform: translateY(-10px);
    }

/* Сами ссылки внутри меню */
.nav-link {
    color: #fff !important; /* цвет текста */
    padding: 0.75rem 1.2rem; /* увеличиваем кликабельную область */
    font-size: 1.05rem; /* чуть крупнее шрифт */
    letter-spacing: 0.5px; /* немного воздуха между буквами */
    transition: color 0.3s ease;
}

    .nav-link:hover {
        background-color: var(--primary-color);
        color: #fff !important;
    }

/* Для кнопки-гамбургера — чтобы она сочеталась с меню */
.navbar-toggler {
    border: none;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 0.5rem 0.8rem;
    transition: all 0.3s ease;
}

    .navbar-toggler:hover {
        background-color: rgba(255, 255, 255, 0.5);
    }


 /*Модальное окно */
.modal {
    display: none;
    position: fixed;
    z-index: 3000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    padding-top: 60px;
    inset: 0;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.6);
}


    .modal-content img {
        display: block;
        max-width: 90vw; /* максимум по ширине окна */
        max-height: 90vh; /* максимум по высоте окна */
        width: auto; /* сохраняем оригинальное соотношение */
        height: auto; /* сохраняем оригинальное соотношение */
        object-fit: contain;
    }


    .modal-content:hover {
        transform: scale(1.02); /* чуть увеличиваем при наведении */
    }


    .modal-close:hover {
        color: #ccc;
    }

#modalCaption {
    text-align: center;
    color: #fff;
    margin-top: 1rem;
    font-size: 1rem;
}




/* Кнопка закрытия */
/* Модальное окно */
#documentModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    display: none;
    z-index: 3000;
    inset: 0;
    align-items: center;
    justify-content: center;

}

/* Контент модалки */
.modal-content {
    position: relative;
    margin: 2% auto;
    background: white;
    border-radius: 10px;
    padding: 1rem;
    max-width: 90%;
    max-height: 90%;
}

/* Кнопка закрытия */
.modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.8rem;
    color: #333;
    background: rgba(255,255,255,0.8);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;

}

.modal-close:hover {
    background: rgba(255,255,255,1);
}





.education-item.left {
    left: 0 !important;
}

.education-item.right {
    left: 55% !important;
}

.education-item.left .education-content::before {
    right: -50px !important;
    left: auto !important;
}

.education-item.right .education-content::before {
    left: -50px !important;
    right: auto !important;
}

/* Стили для центрированной навигации */
.nav-centered {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem; /* Равное расстояние между всеми кнопками */
}

    .nav-centered .nav-link {
        white-space: nowrap;
        padding: 0.5rem 1rem;
        flex: 0 0 auto;
        text-align: center;
    }


.nav-link {
    color: #fff !important;
    padding: 0.75rem 1.2rem;
    font-size: 1.05rem;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

    .nav-link:hover {
        background-color: var(--primary-color);
        color: #fff !important;
    }




/* Стили для реальных кейсов */
.cases-section {
    background: #f8f9fa;
}

.real-case {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.08);
    border: 1px solid #e9ecef;
    height: 100%;
    transition: all 0.3s ease;
    position: relative;
}

    .real-case:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 35px rgba(0,0,0,0.12);
    }

.client-info {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f1f3f4;
}

.client-avatar {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 1.2rem;
    margin-right: 1rem;
    flex-shrink: 0;
}

.client-details {
    flex: 1;
}

.client-name {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.25rem;
}

.client-therapy {
    color: #6c757d;
    font-size: 0.9rem;
}

.case-quote {
    font-style: italic;
    color: #444;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    position: relative;
    padding-left: 1.5rem;
}

    .case-quote::before {
        content: '"';
        position: absolute;
        left: 0;
        top: -0.5rem;
        font-size: 3rem;
        color: var(--primary-color);
        opacity: 0.3;
        font-family: serif;
    }

.case-result {
    display: flex;
    align-items: center;
    background: rgba(40, 167, 69, 0.1);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border-left: 3px solid #28a745;
}

    .case-result span {
        color: #155724;
        font-weight: 500;
        font-size: 0.95rem;
    }



/* Стили для секции отзывов */
.reviews-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}



    .review-preview:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    }

.review-thumb {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain; /* Сохраняет пропорции */
}

.review-preview:hover .review-thumb {
    transform: scale(1.05);
}

.review-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);

    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: white;
    font-size: 1.5rem;
    display: none !important;
}

    .review-overlay .fa-search-plus {
        display: none !important;
    }

.review-preview:hover .review-overlay {
    opacity: 1;
    display: none !important;
}

.more-count {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    background: var(--primary-color);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Стили для модального окна */
.modal-content {
    border-radius: 15px;
    border: none;
}

.modal-header {
    border-bottom: 1px solid #e9ecef;
    background: #f8f9fa;
    border-radius: 15px 15px 0 0;
}

.modal-title {
    font-weight: 600;
    color: #2c3e50;
}

.carousel-item img {
    border-radius: 10px;
    max-height: 70vh;
    object-fit: contain;
}

.carousel-indicators {
    bottom: -50px;
}

    .carousel-indicators button {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #6c757d;
    }

        .carousel-indicators button.active {
            background-color: var(--primary-color);
        }

.carousel-control-prev,
.carousel-control-next {
    width: 10px;
    height: 50px;
    background:  none !important;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-20%);
    margin: 0 1rem;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 1.5rem;
    height: 1.5rem;
    filter: invert(1) drop-shadow(1px 0 0 white) drop-shadow(-1px 0 0 white) drop-shadow(0 1px 0 white) drop-shadow(0 -1px 0 white) !important;
}




/* Анимации */
.review-preview {
    animation: fadeInUp 0.6s ease;
    height: 200px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    cursor: pointer;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Скрываем горизонтальные полосы прокрутки на всех элементах */
* {
    scrollbar-width: none; /* Firefox */
}

    *::-webkit-scrollbar {
        height: 0px; /* для горизонтальных */
        width: 0px; /* для вертикальных, на всякий */
        display: none; /* Chrome, Safari, Edge */
    }



/* Альтернатива: только прячем полосу, но не запрещаем прокрутку */
::-webkit-scrollbar:horizontal {
    display: none;
}



/* Контент модалки */
#documentModal .modal-content, .modal-lightbox .modal-content {
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Изображение: сохраняем пропорции, не растягиваем */
.modal-image, .modal-content img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(90vh - 120px);
    margin: 0 auto;
    display: block;
    object-fit: contain;
}

/* Кнопка закрытия — над картинкой и не пересекается */
.modal-close {
    position: absolute;
    top: 12px; /* небольшие адекватные отступы */
    right: 12px;
    font-size: 1.2rem;
    color: #333;
    background: rgba(255,255,255,0.95);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4000;
}


/* Подстраховка: гарантируем корректный расчёт размеров */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Запрещаем горизонтальный скролл у страницы (безопасно если все width = responsive) */
html, body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}






/* Убираем все локальные скроллбары на всех элементах */
* {
    overflow: visible !important;
}

/* Но оставляем скролл для body и html */
html, body {
    overflow-x: hidden;
    overflow-y: auto;
}

/* Для модальных окон оставляем скролл */
.modal,
.modal-lightbox,
.modal-content,
.carousel,
.carousel-inner {
    overflow: visible !important;
}

/* Убеждаемся, что контент не обрезается */
.education-timeline,
.hero-section,
.container,
.row,
.col-* {
    overflow: visible !important;
}

/* Специфично для проблемных секций */
.work-features-section,
.cases-section,
.reviews-section,
.personal-sessions-section,
.conditions-section {
    overflow: visible !important;
}

/* Для карточек и контента */
.feature-card,
.real-case,
.session-type-card,
.condition-card,
.tariff-card {
    overflow: visible !important;
}

/* ===== ВОССТАНАВЛИВАЕМ СТИЛИ ДЛЯ ВИДЕО СЕКЦИИ ===== */

/* Стили для видео секции */
.video-section {
    overflow: visible !important;
}

.video-item {
    overflow: visible !important;
}

.video-wrapper {
    overflow: hidden !important; /* Оставляем hidden для красивого скругления */
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.video-player {
    width: 100%;
    height: auto;
    display: block;
}

/* Большое видео */
.large-video .video-wrapper {
    height: 400px;
}

.large-video .video-player {
    height: 100%;
    object-fit: cover;
}

/* Среднее видео */
.medium-video .video-wrapper {
    height: 300px;
}

.medium-video .video-player {
    height: 100%;
    object-fit: cover;
}

/* Маленькое видео */
.small-video .video-wrapper {
    height: 250px;
}

.small-video .video-player {
    height: 100%;
    object-fit: cover;
}

/* Ховер эффекты */
.video-item:hover .video-wrapper {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.video-caption {
    padding: 1rem 0;
    text-align: center;
    color: var(--text-color);
}



/* ===== УБИРАЕМ OVERLAY ДЛЯ ДОКУМЕНТОВ ===== */

.document-item {
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    overflow: hidden;
}

.document-preview {
    height: 250px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Фон будет установлен через инлайновые стили */
}

.document-image {
    display: none; /* Полностью скрываем img */
}

.document-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.document-preview:hover .document-overlay {
    opacity: 1;
}
/* УБИРАЕМ кнопку просмотра */
.btn-view-document {
    display: none;
}

.document-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

    .document-item:hover .document-image {
        transform: scale(1.05);
    }

.document-info {
    padding: 1.5rem;
}

    .document-info h5 {
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: var(--text-color);
    }

    .document-info p {
        color: #666;
        margin: 0;
        font-size: 0.9rem;
    }

.document-year {
    font-size: 0.85rem;
    color: #888;
    font-weight: 500;
    margin: 0.5rem 0 0 0;
}


* {
    font-family: 'Arial', sans-serif !important;
    font-weight: 600 !important; /* DemiBold / SemiBold */
}

/* Исключаем иконки Font Awesome */
.fas,
.far,
.fal,
.fab,
.fa,
[class*="fa-"] {
    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands' !important;
}




/* Увеличиваем отступ сверху для всей секции */
#about-method .container .row .col-lg-10 {
    padding-top: 2rem;
}

/* Исправляем блок с карточкой подхода */
#about-method .card.border-0.bg-white.shadow-sm {
    margin-top: 2rem !important;
    font-size: 1.1rem !important;
}

    /* Исправляем размеры шрифтов внутри */
    #about-method .card.border-0.bg-white.shadow-sm h4 {
        font-size: 1.5rem !important;
        font-weight: 600 !important;
    }

    #about-method .card.border-0.bg-white.shadow-sm p {
        font-size: 1.1rem !important;
        line-height: 1.6 !important;
        margin-bottom: 1.2rem !important;
    }