/* ==========================================
   NAVIGATION
========================================== */

.navigation{

    display:flex;

    align-items:center;

}

.navigation ul{

    display:flex;

    align-items:center;

    gap:34px;

}

.navigation li{

    list-style:none;

}

/* ==========================================
   MOBILE NAVIGATION
========================================== */

/* ==========================================
   Mobile drawer menu
========================================== */

.mobile-navigation{

    position:fixed;

    top:0;

    right:0;

    width:min(360px,100%);

    height:100vh;

    background:#fff;

    display:flex;

    flex-direction:column;

    transform:translateX(100%);

    transition:transform .35s ease;

    z-index:1200;

    box-shadow:-16px 0 40px rgba(15,23,42,.15);

}

.mobile-navigation.active{

    transform:translateX(0);

}

.mobile-navigation__header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    padding:26px;

    border-bottom:1px solid #edf2f7;

}

.mobile-navigation__logo{

    display:flex;

    flex-direction:column;

    gap:4px;

}

.mobile-navigation__logo img{

    width:44px;

    height:44px;

    flex-shrink:0;

}

.mobile-navigation__close{

    width:46px;
    height:46px;

    border:none;
    border-radius:14px;

    background:#f3f6fb;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    color:var(--color-heading);

    transition:.25s;

}

.mobile-navigation__close:hover{

    background:#e8eef9;

}

.mobile-navigation__close svg{

    width:22px;
    height:22px;

    display:block;

}

.mobile-navigation__links{

    display:flex;

    flex-direction:column;

    padding:24px;

    gap:8px;

    flex:1;

}

.mobile-navigation__links a{

    display:block;

    padding:14px 18px;

    border-radius:14px;

    color:var(--color-heading);

    text-decoration:none;

    font-weight:600;

    transition:.2s;

}

.mobile-navigation__links a:hover{

    background:#eef5ff;

    color:var(--color-primary);

}

.mobile-navigation__footer{

    padding:24px;

    border-top:1px solid #edf2f7;

}

.mobile-navigation__footer .button{

    width:100%;
	
	display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

}

.mobile-overlay{

    position:fixed;

    inset:0;

    background:rgba(15,23,42,.45);

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:1100;

}

.mobile-overlay.active{

    opacity:1;

    visibility:visible;

}

/* ==========================================
   HERO FEATURES
========================================== */

.hero-feature{

    display:flex;

    align-items:center;

    gap:14px;

    padding:16px 20px;

    background:white;

    border-radius:18px;

    box-shadow:0 10px 30px rgba(15,23,42,.05);

}

.hero-feature::before{

    content:"";

    width:12px;

    height:12px;

    border-radius:50%;

    background:var(--color-success);

    flex-shrink:0;

}

/* ==========================================
   SECTION SPACING
========================================== */

.about__content{

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:20px;

}

.about__image img{

    border-radius:28px;

    box-shadow:var(--color-shadow);

}

/* ==========================================
   FORM
========================================== */

.contacts__form input,
.contacts__form textarea{

    width:100%;

    padding:18px 20px;

    border:1px solid var(--color-border);

    border-radius:16px;

    background:#fff;

    transition:
        border-color var(--transition),
        box-shadow var(--transition);

}

.contacts__form input:focus,
.contacts__form textarea:focus{

    border-color:var(--color-primary);

    box-shadow:

        0 0 0 4px

        rgba(37,99,235,.10);

}

.contacts__form textarea{

    min-height:160px;

}

/* ==========================================
   FAQ
========================================== */

.faq__list{

    max-width:900px;

    margin:0 auto;

    display:grid;

    gap:18px;

}

.faq__list details{

    background:white;

    border:1px solid var(--color-border);

    border-radius:20px;

    overflow:hidden;

    transition:
        border-color var(--transition),
        box-shadow var(--transition);

}

.faq__list details[open]{

    border-color:rgba(37,99,235,.25);

    box-shadow:var(--color-shadow);

}

.faq__list summary{

    padding:24px 28px;

    cursor:pointer;

    list-style:none;

    position:relative;

}

.faq__list summary::-webkit-details-marker{

    display:none;

}

.faq__list summary::after{

    content:"+";

    position:absolute;

    right:28px;

    top:50%;

    transform:translateY(-50%);

    font-size:1.5rem;

    font-weight:300;

    color:var(--color-primary);

    transition:transform .3s ease;

}

.faq__list details[open] summary::after{

    content:"?";

}

.faq__list details p{

    padding:

        0 28px 24px;

}

.faq__list details > div{

    overflow:hidden;

    height:0;

    opacity:0;

    transition:
        height .28s ease,
        opacity .22s ease;

}

.faq__list details[open] > div{

    opacity:1;

}

/* ==========================================
   CONTACTS
========================================== */

.contacts__list{

    display:grid;

    gap:14px;

    margin-top:28px;

}

.contacts__list li{

    display:flex;

    align-items:center;

    gap:14px;

}

/* ==========================================
   CTA
========================================== */

.cta{

    padding-top:80px;

    padding-bottom:80px;

}

.cta__wrapper{

    align-items:center;

}

.cta__actions{

    display:flex;

    justify-content:center;

    align-items:center;

}

/* ==========================================
   FOOTER
========================================== */

.footer{

    margin-top:0px;

}

.footer nav{

    display:grid;

    gap:14px;

}

.footer nav a{

    opacity:.85;

    transition:opacity .25s ease;

}

.footer nav a:hover{

    opacity:1;

}

.footer p{

    margin-bottom:10px;

}

/* ==========================================
   SCROLL PROGRESS
========================================== */

.scroll-progress{

    transition:width .1s linear;

}

/* ==========================================
   ANIMATION PREP
========================================== */

.fade-up{

    opacity:0;

    transform:translateY(30px);

}

.fade-up.visible{

    opacity:1;

    transform:none;

    transition:

        opacity .7s ease,

        transform .7s ease;

}

/* ======================================================
   Блок помощи с выбором формата занятий
====================================================== */

.formats__note{

    max-width:820px;

    margin:50px auto 0;

    padding:30px 34px;

    display:flex;

    align-items:flex-start;

    gap:22px;

    background:#f8fbff;

    border:1px solid rgba(37,99,235,.12);

    border-left:5px solid var(--color-primary);

    border-radius:18px;

    box-shadow:0 12px 28px rgba(15,23,42,.06);

}

.formats__note__icon{

    flex:0 0 56px;

    width:56px;

    height:56px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(37,99,235,.10);

    font-size:28px;

}

.formats__note__body{

    flex:1;

}

.formats__note__title{

    margin:0 0 12px;

    font-size:1.35rem;

    font-weight:700;

    color:var(--color-heading);

}

.formats__note__text{

    margin:0;

    line-height:1.75;

    color:var(--color-text);

}

.formats__note__actions{

    margin-top:22px;

}

@media (max-width:768px){

    .formats__note{

        flex-direction:column;

        padding:24px;

        gap:18px;

    }

    .formats__note__icon{

        width:48px;

        height:48px;

        flex-basis:48px;

        font-size:24px;

    }

}

/* ======================================================
   CONDITIONS
====================================================== */

.conditions-list{

    margin-top:36px;

    display:flex;

    flex-direction:column;

    gap:18px;

}

.conditions-item{

    position:relative;

    padding-left:38px;

    font-size:1.05rem;

    line-height:1.7;

    color:var(--color-text);

}

.conditions-item::before{

    content:"✓";

    position:absolute;

    left:0;

    top:3px;

    width:22px;

    height:22px;

    border-radius:50%;

    background:var(--color-primary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:.78rem;

    font-weight:700;

    box-shadow:0 4px 10px rgba(37,99,235,.25);

}

/* ==========================================
   CONTACTS
========================================== */

.contacts-card{

    max-width:720px;

    margin:60px auto 0;

    background:#fff;

    border-radius:28px;

    overflow:hidden;

    border:1px solid rgba(37,99,235,.08);

    box-shadow:0 18px 50px rgba(15,23,42,.08);

}

.contacts-card__section{

    padding:30px;

}

.contacts-card__title{

    margin:0 0 20px;

    font-size:1.25rem;

    font-weight:700;

    color:var(--color-heading);

}

.contacts-card__divider{

    height:1px;

    background:#edf2f7;

}

.contact-item{

    display:grid;

    grid-template-columns:68px 1fr;

    align-items:center;

    column-gap:24px;

    padding:24px 32px;

    min-height:120px;

    text-decoration:none;

    color:inherit;

    transition:
        background .25s ease,
        transform .25s ease;

}

.contact-item + .contact-item{

    border-top:1px solid #edf2f7;

}

.contact-item:hover{

    transform:translateX(6px);

}

.contact-icon{

    width:68px;

    height:68px;

    display:flex;

    justify-content:center;

    align-items:center;

    justify-self:center;

    align-self:center;

    border-radius:20px;

    background:#EEF4FF;

    color:#2563EB;

}

.contact-icon svg{

    width:38px;

    height:38px;

    display:block;

}

.contact-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:6px;

    min-height:68px;

}

.contact-title{

    font-size:.92rem;

    font-weight:700;

    color:#64748B;

    margin-bottom:4px;

    text-transform:uppercase;

    letter-spacing:.05em;

}

.contact-text{

    font-size:1.08rem;

    font-weight:600;

    color:var(--color-heading);

    transition:color .25s ease;

}

.contact-item:hover .contact-text{

    color:var(--color-primary);

}

body.menu-open{

    overflow:hidden;

}

.logo{

    display:flex;

    align-items:center;

    gap:16px;

}

.logo__image{

    width:52px;

    height:52px;

    flex-shrink:0;

    transition:transform .25s ease;

}

.logo:hover .logo__image{

    transform:scale(1.05);

}

.logo__text{

    display:flex;

    flex-direction:column;

}

/* ==========================================
   Полезные материалы
========================================== */

.resource-link{

    display:grid;

    grid-template-columns:56px 1fr;

    align-items:center;

    gap:18px;

    min-height:84px;

    padding:14px 20px;

    background:#fff;

    border-radius:20px;

    text-decoration:none;

    color:var(--color-text);

    box-shadow:0 8px 24px rgba(15,23,42,.06);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}

.resource-link:hover{

    transform:translateY(-3px);

    box-shadow:0 16px 36px rgba(37,99,235,.12);

}

.resource-link__icon{

    width:56px;

    height:56px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    background:#EEF4FF;

    color:#2563EB;

}

.resource-link__icon svg{

    width:28px;

    height:28px;

}

.resource-link__text{

    display:block;

    margin:0;

    padding:0;

    background:none !important;

    border:none;

    border-radius:0;

    box-shadow:none;

    font-size:1.05rem;

    font-weight:600;

    line-height:1.3;

    color:#1E293B;

}

.resource-link__arrow{

    display:none;

}