/* ==========================================
   CONTAINER
========================================== */

.container{

    width:min(
        var(--container-width),
        calc(100% - 2 * var(--container-padding))
    );

    margin-inline:auto;

}

/* ==========================================
   BODY
========================================== */

body{

    font-family:var(--font-main);

    color:var(--color-text);

    background:var(--color-background);

    line-height:var(--line-height);

}

/* ==========================================
   SECTIONS
========================================== */

section{

    position:relative;

    padding:
        var(--space-3xl)
        0;

}

section:first-of-type{

/*    padding-top:0;*/

}

/* ==========================================
   HEADER
========================================== */

.header{

    position:fixed;

    inset:0 0 auto 0;

    height:var(--header-height);

    background:
        rgba(255,255,255,.88);

    backdrop-filter:blur(16px);

    border-bottom:
        1px solid
        rgba(229,231,235,.7);

    z-index:var(--z-header);

}

.header__wrapper{

    height:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

}

/* ==========================================
   LOGO
========================================== */

.logo{

    display:flex;

    flex-shrink:0;

}

.logo__title{

    font-size:1.15rem;

    font-weight:700;

}

.logo__subtitle{

    font-size:.82rem;

    color:var(--color-text-muted);

}

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

.navigation{

    margin-left:auto;

}

.navigation ul{

    display:flex;

    gap:34px;

}

.navigation a{

    font-size:.95rem;

    font-weight:500;

    transition:
        color
        var(--transition);

}

.navigation a:hover{

    color:var(--color-primary);

}

/* ==========================================
   MOBILE MENU
========================================== */

.mobile-navigation{

    display:none;

}

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

.hero{

    overflow:hidden;

    padding-top:var(--hero-padding-top);

    padding-bottom:var(--hero-padding-bottom);

    background:
        var(--gradient-light);

}

.hero__wrapper{

    display:grid;

    grid-template-columns:

        1.1fr

        .9fr;

    align-items:center;

    gap:70px;

}

/* ==========================================
   HERO CONTENT
========================================== */

.hero__content{

    position:relative;

    z-index:2;

}

.hero__actions{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-top:42px;

}

.hero__features{

    display:grid;

    gap:16px;

    margin-top:34px;

}

.hero-feature{

    display:flex;

    align-items:center;

    gap:12px;

}

/* ==========================================
   HERO PHOTO
========================================== */

.hero__photo{

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

}

.photo-card{

    position:relative;

    width:100%;

    max-width:420px;

    margin-inline:auto;

}

.photo-card img{

    width:100%;

    border-radius:28px;

    box-shadow:

        0 35px 80px

        rgba(15,23,42,.18);

}

.photo-card__badge{

    position:absolute;

    right:-20px;

    bottom:30px;

}

/* ==========================================
   HERO DECORATION
========================================== */

.hero__background{

    position:absolute;

    inset:0;

    overflow:hidden;

}

.hero__blur{

    position:absolute;

    width:480px;

    aspect-ratio:1;

    border-radius:50%;

    filter:blur(120px);

    opacity:.25;

}

.hero__blur--left{

    top:-180px;

    left:-180px;

    background:#60A5FA;

}

.hero__blur--right{

    right:-140px;

    bottom:-100px;

    background:#FBBF24;

}

.hero__wave{

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    fill:white;

}

/* ==========================================
   SECTION HEADER
========================================== */

.section-header{

    max-width:760px;

    margin-inline:auto;

    margin-bottom:70px;

    text-align:center;

}

.section-header span{

    display:inline-block;

    margin-bottom:12px;

}

/* ==========================================
   GRID
========================================== */

.about__grid,
.results__grid,
.contacts__grid{

    display:grid;

    grid-template-columns:

        repeat(2,1fr);

    gap:70px;

}

.statistics__grid{

    display:grid;

    grid-template-columns:

        repeat(4,1fr);

    gap:30px;

}

.formats__grid{

    display:grid;

    grid-template-columns:

        repeat(2,1fr);

    gap:34px;

}

.advantages__grid{

    display:grid;

    grid-template-columns:

        repeat(3,1fr);

    gap:30px;

}

.price__grid{

    display:grid;

    grid-template-columns:

        repeat(2,1fr);

    gap:36px;

}

/* ==========================================
   TIMELINE
========================================== */

.timeline{

    display:grid;

    gap:34px;

    max-width:900px;

    margin-inline:auto;

}

.timeline__item{

    display:grid;

    grid-template-columns:

        80px

        1fr;

    gap:28px;

    align-items:flex-start;

}

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

.cta__wrapper{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:50px;

}

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

.footer{

    padding:

        60px

        0;

    background:#0F172A;

    color:white;

}

.footer__grid{

    display:grid;

    grid-template-columns:

        1.2fr

        1fr

        1fr;

    gap:60px;

}

.footer nav{

    display:grid;

    gap:14px;

}

/* ==========================================
   SCROLL BAR
========================================== */

.scroll-progress{

    position:fixed;

    top:0;

    left:0;

    height:3px;

    width:0;

    background:var(--gradient-primary);

    z-index:1000;

}