@font-face{
    font-family:Rubik;
    src:url(/assets/fonts/rubik-woff/Rubik-Light.woff2) format("woff2"),url(/assets/fonts/Rubik/static/Rubik-Light.ttf) format("ttf");
    font-weight:300;
    font-style:normal;
    font-display:swap
}
@font-face{
    font-family:Rubik;
    src:url(/assets/fonts/rubik-woff/Rubik-Medium.woff2) format("woff2"),url(/assets/fonts/Rubik/static/Rubik-Medium.ttf) format("ttf");
    font-weight:500;
    font-style:normal;
    font-display:swap
}
@font-face{
    font-family:Rubik;
    src:url(/assets/fonts/rubik-woff/Rubik-Regular.woff2) format("woff2"),url(/assets/fonts/Rubik/static/Rubik-Regular.ttf) format("ttf");
    font-weight:400;
    font-style:normal;
    font-display:swap
}
@font-face{
    font-family:Rubik;
    src:url(/assets/fonts/rubik-woff/Rubik-SemiBold.woff2) format("woff2"),url(/fonts/Rubik/static/Rubik-SemiBold.ttf) format("ttf");
    font-weight:600;
    font-style:normal;
    font-display:swap
}
:root{
    --c-white: hsl(0, 0%, 100%);
    --c-black: black;
    --c-grey: #edf1f1;
    --c-grey-light: hsl(0, 0%, 82%);
    --c-grey-blue: #4b5161;
    --c-text-dark: hsl(210, 6%, 12%);
    --c-text-light: var(--c-white);
    --c-text: var(--c-text-dark);
    --c-text-ghost: hsl(0, 0%, 44%);
    --c-bg: var(--c-white);
    --c-accent: var(--main-color);
    --edges: 20px;
    --edges-middle: 5vw;
    --w-container: 1920px;
    --w-container-s: 1170px;
    --w-wrapper: min( var(--w-container), 100vw - max(calc(var(--edges) * 2), var(--edges-middle)) );
    --w-wrapper-s: min( var(--w-container-s), 100vw - max(calc(var(--edges) * 2), var(--edges-middle)) );
    color:var(--c-text);
    background-color:var(--c-bg);
    font-family:Rubik,system-ui,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";
    text-rendering:optimizeSpeed;
    -moz-text-size-adjust:none;
    -webkit-text-size-adjust:none;
    text-size-adjust:none
}
*,*:before,*:after{
    box-sizing:border-box;
    margin:0;
    padding:0
}
html{
    overflow-x:hidden
}
body{
    display:flex;
    flex-direction:column;
    position:relative;
    min-height:100svh;
    font-size:100%;
    overflow-x:hidden
}
a{
    color:currentColor
}
ul,ol{
    list-style-position:inside
}
ul[role],ol[role]{
    list-style:none
}
input,button,textarea,select{
    font-family:inherit;
    font-size:inherit
}
textarea:not([rows]){
    min-height:10em
}
:target{
    scroll-margin-block:5ex
}
.header{
    background:var(--c-grey);
    padding:29px 0 0;
    @media screen and (width <= 1230px){
        visibility:hidden;
        display:none
    }
}
.header-nav{
    width:var(--w-wrapper-s);
    margin:27px auto 0
}
.header-nav__list{
    display:flex;
    justify-content:space-between;
    border-top:1px solid var(--c-grey-light);
    border-bottom:1px solid var(--c-grey-light);
    padding:11px;
    & li{
        flex:1;
        display:flex;
        align-items:center;
        justify-content:center;
        height:30px;
        padding:0 10px;
        &:not(:last-child){
            border-right:1px solid var(--c-grey-light)
        }
    }
    .unlink{
        font-size:14px;
        font-weight:500;
        text-transform:uppercase;
        &.active,&:hover{
            color:var(--c-accent)
        }
    }
}
.chevron-down{
    height:1em;
    width:1em;
    margin-left:1em
}
.header-mobile{
    display:none;
    background:var(--c-grey);
    padding:14px 0;
    border-bottom:1px solid var(--c-grey-light);
    z-index:99;
    .logo{
        font-size:24px;
        font-weight:500
    }
    @media screen and (width <= 1230px){
        display:flex
    }
}
.header-mobile__wrapper{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:var(--w-wrapper-s);
    margin:0 auto
}
.mobile-menu{
    position:relative;
    width:20px;
    height:14px
}
.mobile-menu__list{
    display:flex;
    flex-direction:column;
    gap:15px;
    background:var(--c-white);
    position:absolute;
    top:calc(100% + 20px);
    right:0;
    border-radius:8px;
    padding:20px;
    box-shadow:#959da533 0 8px 24px;
    white-space:nowrap;
    transform:translate(calc(100% + var(--edges-middle)));
    transition:all .3s ease-in-out;
    & li{
        display:flex;
        align-items:center
    }
    .unlink{
        font-size:14px;
        font-weight:500;
        text-transform:uppercase;
        &.active,&:hover{
            color:var(--c-accent)
        }
    }
    &.active{
        transform:translate(0)
    }
}
[name=mobileMenu]{
    width:100%;
    height:100%;
    border:none;
    cursor:pointer;
    & svg{
        width:100%;
        height:100%;
        pointer-events:none
    }
}
.footer{
    margin-top:auto;
    background:var(--c-grey);
    padding:46px 0 30px;
    display:flex;
    flex-direction:column;
    gap:clamp(25px,3vw,65px)
}
.footer-container{
    width:var(--w-wrapper-s);
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    gap:20px;
    @media screen and (width <= 1200px){
        justify-content:space-evenly;
        flex-wrap:wrap
    }
    @media screen and (width <= 560px){
        justify-content:flex-start
    }
}
.footer-nav__container{
    display:flex;
    flex-direction:column;
    gap:20px;
    & h2{
        font-size:17px;
        font-weight:500
    }
}
.footer-list{
    display:flex;
    flex-direction:column;
    gap:15px;
    font-size:17px;
    font-weight:300;
    color:var(--c-text-ghost)
}
.footer-social{
    display:flex;
    gap:14px;
    & a{
        display:flex;
        align-items:center;
        justify-content:center;
        width:39px;
        height:39px;
        border:1px solid var(--c-accent);
        border-radius:50%;
        padding:9px
    }
    .icon{
        width:100%;
        height:100%
    }
    @media screen and (width <= 1200px){
        display:none;
        &.mobile{
            display:flex
        }
    }
}
.footer-data{
    display:flex;
    flex-direction:column;
    gap:20px;
    & *{
        font-size:17px;
        font-weight:300;
        color:var(--c-text-ghost)
    }
    @media screen and (width <= 1200px){
        display:none
    }
}
.footer__bottom{
    max-width:864px;
    font-size:13px;
    font-weight:300;
    color:var(--c-text-ghost);
    text-align:center;
    margin:0 auto
}
.footer-contacts__mobile{
    display:none;
    @media screen and (width <= 1200px){
        display:flex;
        justify-content:center;
        align-items:flex-start;
        flex-wrap:wrap;
        gap:20px;
        margin:0 auto;
        width:var(--w-wrapper-s)
    }
}
.footer-contacts__tel{
    flex:1 1 350px;
    display:flex;
    gap:15px;
    font-size:16px;
    font-weight:500;
    max-width:350px
}
.footer-contacts__container{
    display:flex;
    gap:20px
}
.footer-data__mobile{
    margin-top:10px;
    display:grid;
    gap:3px;
    color:var(--c-text-ghost);
    font-size:14px;
    font-weight:300
}
.hf-top{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:var(--w-wrapper-s);
    margin:0 auto;
    .logo{
        font-size:clamp(24px,4vw,30px);
        font-weight:500
    }
    @media screen and (width <= 1200px){
        justify-content:space-around;
        gap:20px
    }
}
.header-contacts{
    display:flex;
    align-items:center;
    gap:30px;
    .unlink{
        font-size:20px;
        font-weight:500
    }
    @media screen and (width <= 1200px){
        display:none
    }
}
.pin-address__container{
    display:flex;
    align-items:center;
    gap:.9em;
    font-size:15px;
    &.mobile{
        align-items:flex-start
    }
}
.pin-address__icon{
    height:2em;
    width:1.3em
}
.pin-address{
    display:grid;
    >span{
        font-size:10px;
        color:var(--c-text-ghost)
    }
}
.logo{
    text-transform:uppercase;
    font-weight:500;
    & span{
        color:var(--c-accent)
    }
}
.unlink{
    display:flex;
    align-items:center;
    text-decoration:none;
    color:currentColor;
    line-height:1;
    .icon{
        width:1.3em;
        height:1.3em;
        margin-right:.8ch
    }
}
.button{
    background:var(--c-accent);
    border:none;
    border-radius:100px;
    padding:0 2.5rem;
    min-height:51px;
    color:var(--c-text-light);
    text-transform:uppercase;
    font-size:14px;
    font-weight:500;
    cursor:pointer;
    &.mobile{
        font-size:clamp(12px,3vw,14px);
        min-height:clamp(40px,4vw,51px);
        padding:0 1.5em
    }
}
input[type=checkbox]{
    cursor:pointer;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    outline:0;
    background:var(--c-white);
    height:16px;
    min-width:16px;
    aspect-ratio:1 / 1;
    border:1px solid var(--c-grey-light);
    border-radius:4px;
    color:#fff;
    &:checked{
        background:var(--c-accent)
    }
}
.title__section{
    display:flex;
    flex-direction:column;
    font-size:clamp(26px,4vw,39px);
    font-weight:600;
    &:after{
        content:"";
        width:170px;
        height:3px;
        margin-top:30px;
        background:var(--c-accent)
    }
}
.hero__list{
    display:flex;
    flex-direction:column;
    gap:20px;
    font-size:17px;
    margin:32px 0 30px;
    & li{
        display:flex;
        align-items:center;
        gap:22px
    }
    & svg{
        width:20px;
        height:15px
    }
}
.hero__description{
    font-size:17px;
    font-weight:300;
    color:var(--c-text-ghost);
    margin:40px 0;
    @media screen and (width <= 1100px){
        &.price{
            margin-bottom:10px
        }
    }
}
.hero-list{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
    gap:30px;
    margin:70px 0 30px;
    @media screen and (width <= 620px){
        display:flex;
        overflow-y:auto;
        padding-bottom:10px
    }
}
.hero-list__item{
    background:var(--c-white);
    border-radius:20px;
    box-shadow:0 4px 24px #0000001c;
    min-height:170px;
    padding:30px 20px;
    & h2{
        font-size:17px;
        font-weight:500;
        color:var(--c-accent);
        text-transform:uppercase;
        border-bottom:2px solid var(--c-accent);
        padding-bottom:10px;
        margin-bottom:10px
    }
    & p{
        font-size:17px;
        color:var(--c-text-ghost);
        font-weight:300
    }
    @media screen and (width <= 620px){
        min-width:clamp(200px,50vw,400px)
    }
}
.hero{
    position:relative;
    padding:80px 0 100px;
    background-image:url(/assets/svg/mask-top.svg);
    background-size:cover;
    &.mask--price{
        background-image:none;
        padding-bottom:0;
        background:var(--c-grey);
        mask-image:url(/assets/svg/mask-top-min.svg);
        mask-size:cover
    }
    &.mask{
        background-image:none;
        background:var(--c-grey);
        mask-image:url(/assets/svg/mask-top-min.svg);
        mask-size:cover
    }
    &.guarantee{
        padding-bottom:20px;
        background-image:url(/assets/svg/mask-top-min.svg)
    }
    @media screen and (width <= 620px){
        padding-bottom:0;
        &.mask{
            padding-bottom:50px
        }
    }
}
.hero-img__wrapper{
    &.guarantee{
        background-image:url(/assets/svg/ellipse_guarantee.svg);
        background-repeat:no-repeat;
        background-size:580 580;
        background-position:top center;
        max-width:580px
    }
    &.team{
        max-width:580px
    }
    @media screen and (width <= 1100px){
        position:absolute;
        right:-15%;
        filter:blur(3px);
        opacity:50%;
        &.price,&.model,&.team{
            display:none
        }
    }
}
.hero-img{
    &.mask--price{
        transform:translateY(-50px)
    }
}
.hero-img__mobile{
    display:none;
    @media screen and (width <= 1100px){
        &.price,&.model,&.team{
            display:block;
            width:clamp(269px,40vw,450px);
            align-self:flex-end;
            z-index:-1
        }
        &.model{
            min-width:360px;
            align-self:center
        }
        &.team{
            margin-bottom:30px;
            align-self:center
        }
    }
}
.hero-sale__container{
    @media screen and (width <= 1100px){
        &.price{
            transform:translateY(-50px)
        }
    }
}
.hero__wrapper{
    width:var(--w-wrapper-s);
    margin:0 auto
}
.hero-bg{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    object-fit:cover;
    z-index:-1
}
.hero__container{
    display:flex;
    justify-content:space-between;
    gap:40px;
    &.contacts{
        flex-wrap:wrap;
        @media screen and (width <= 1180px){
            justify-content:center
        }
    }
}
.hero__data{
    display:flex;
    flex-direction:column;
    max-width:642px;
    z-index:+1;
    & h1{
        font-size:clamp(36px,4vw,46px);
        font-weight:600
    }
    @media screen and (width <= 1100px){
        max-width:100%
    }
    &.contacts{
        flex:1 1 400px;
        max-width:400px
    }
}
.hero-sale__title{
    font-size:17px;
    font-weight:500;
    >span{
        color:var(--c-accent)
    }
}
.hero-map{
    flex:1 1 670px;
    background-color:#d9d9d9;
    border-radius:20px;
    max-width:670px;
    height:450px
}
.hero-contacts__list{
    margin-top:60px;
    display:flex;
    flex-direction:column;
    gap:30px
}
.hero-contacts__item{
    display:flex;
    flex-direction:column;
    & h2{
        font-size:17px;
        font-weight:500;
        color:var(--c-accent);
        margin-bottom:10px
    }
    & a,strong{
        font-size:20px;
        font-weight:500;
        text-decoration:none
    }
    & span{
        font-size:17px;
        font-weight:300;
        color:var(--c-text-ghost)
    }
}
.dual_tel{
    display:flex;
    gap:10px 30px;
    flex-wrap:wrap
}
#formOrder{
    display:flex;
    flex-direction:column
}
.form__dual{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    gap:10px 30px;
    margin:20px 0 10px;
    .button{
        flex:1 1 260px
    }
}
.form__label{
    flex:1 1 260px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--c-white);
    border:solid 1px var(--c-grey-light);
    border-radius:100px;
    padding:.5rem 2rem;
    min-height:51px;
    & input{
        font-size:17px;
        border:none;
        width:100%;
        height:100%;
        padding:0 12px
    }
}
.form__label-check{
    display:inline-flex;
    align-items:flex-start;
    gap:1em;
    font-size:12px;
    font-weight:300;
    line-height:1.17;
    color:var(--c-text-ghost);
    max-width:470px
}
.problem{
    width:var(--w-wrapper-s);
    margin:100px auto clamp(1px,2vw,50px)
}
.problem__title{
    display:flex;
    flex-direction:column;
    gap:20px;
    font-size:39px;
    font-weight:600;
    max-width:590px;
    &:after{
        content:"";
        width:170px;
        height:3px;
        background:var(--c-accent)
    }
}
.problem__container{
    display:flex;
    justify-content:space-between;
    gap:60px;
    flex-wrap:wrap
}
#formProblem{
    flex:1 1 455px;
    display:flex;
    flex-direction:column;
    width:100%;
    margin-top:30px;
    & header{
        width:100%;
        display:flex;
        justify-content:space-between
    }
    .button{
        margin-left:auto
    }
    @media screen and (width <= 500px){
        .button{
            width:100%
        }
    }
}
.problem-list{
    display:flex;
    flex-direction:column;
    margin:22px 0 45px;
    & li{
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:10px 0 10px 10px;
        font-size:17px;
        &:not(:last-child){
            border-bottom:1px solid var(--c-grey-light)
        }
    }
    & label{
        display:flex;
        align-items:center;
        gap:.5em
    }
    .active{
        color:var(--c-accent)
    }
}
.problem-footer{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:clamp(20px,4vw,40px);
    margin:clamp(10px,4vw,50px) 0;
    padding:30px clamp(20px,4vw,70px);
    border-radius:20px;
    box-shadow:0 4px 38.7px #0000000d;
    .form__dual{
        margin-top:0
    }
}
.problem-footer__data{
    flex:1 1 387px;
    display:flex;
    flex-direction:column;
    gap:clamp(10px,3vw,20px);
    text-align:center;
    & h2{
        font-size:clamp(20px,4vw,22px);
        font-weight:500;
        text-transform:uppercase
    }
    & span{
        font-size:clamp(14px,3vw,17px)
    }
}
.problem-aside{
    flex:1 1 440px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:center;
    gap:40px;
    width:100%
}
.problem-aside__circle{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    width:444px;
    height:444px;
    box-shadow:0 4px 38.7px #0000000d;
    border-radius:50%;
    padding:10px 67px 59px;
    font-size:17px;
    text-align:center;
    & img{
        margin-bottom:12px;
        width:100%;
        max-height:289px;
        object-fit:contain
    }
    >span{
        font-weight:300;
        color:var(--c-text-ghost);
        margin:8px 0 12px
    }
}
.problem-aside__title{
    font-size:15px;
    font-weight:500;
    text-transform:uppercase;
    & span{
        color:var(--c-accent)
    }
}
.problem-aside__container{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    >img{
        width:100%;
        max-height:183px;
        object-fit:contain;
        margin-bottom:27px
    }
    >span{
        font-size:17px;
        font-weight:300;
        color:var(--c-text-ghost);
        margin:8px 0 51px
    }
}
.sale{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:var(--w-wrapper-s);
    margin:100px auto 50px;
    border-radius:20px;
    background:var(--c-grey);
    padding:0 clamp(40px,4vw,70px);
    @media screen and (width <= 1040px){
        flex-direction:column;
        justify-content:center;
        align-items:center;
        margin:50px auto
    }
}
.sale-container{
    width:100%;
    padding:50px 0;
    z-index:+1;
    & p{
        font-size:17px;
        margin:20px 0 30px;
        max-width:420px
    }
}
.sale-title{
    font-size:30px;
    font-weight:700;
    max-width:380px;
    & strong{
        color:var(--c-accent);
        text-transform:uppercase
    }
}
.sale-img__wrapper{
    position:relative;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    width:100%;
    max-width:453px;
    align-self:flex-end;
    &:after{
        position:absolute;
        top:10px;
        content:"";
        background-image:linear-gradient(to bottom,#fffc,#fff0);
        border-radius:50%;
        width:calc(100% + 20px);
        height:calc(100% + 20px);
        height:auto;
        aspect-ratio:1/1;
        min-width:330px;
        min-height:330px
    }
    @media screen and (width <= 1040px){
        align-self:center
    }
}
.sale-img{
    height:100%;
    width:clamp(264px,50vw,370px);
    object-fit:contain;
    z-index:+1
}
.models{
    width:var(--w-wrapper-s);
    margin:50px auto
}
.models-list{
    margin-top:50px;
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
    gap:clamp(10px,2vw,30px)
}
.models-list__item{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:15px;
    & strong{
        font-size:17px
    }
}
.models-img{
    width:100%;
    height:auto;
    aspect-ratio:1;
    background:var(--c-grey);
    border-radius:50%;
    padding:20px
}