@font-face {
    font-family: 'Montserrat regular';
    font-display: swap;
    src: local('Montserrat regular'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}

@font-face {
    font-family: 'Montserrat bold';
    font-display: swap;
    src: local('Montserrat bold'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}


@font-face{
   font-family:'Montserrat regular';
   src:local('Montserrat regular'),   
   url("files/fonts/Montserrat-Regular.ttf");
    ascent-override: 105%;
    descent-override: 35%;
    line-gap-override: 10%;
}

@font-face{
   font-family:'Montserrat bold';
   src:local('Montserrat bold'),
   url("files/fonts/Montserrat-Bold.ttf"); 
    ascent-override: 105%;
    descent-override: 35%;
    line-gap-override: 10%;
}

*/
html,body{
    height:100%;
}


:root {
   --light-dark:#010101;
   --accent-black:#2B3541;
   --special-low-black:rgba(43, 53, 65, 0.3);
   --special-strong-black:rgba(43, 53, 65, 1);
   --special-low-black-line:rgba(43, 53, 65, 0.2);
   --yellow:#FBF138;
   --white:#FEFCFE;
   --new-gradient:linear-gradient(180deg, rgba(251,241,56, .7) 0%, rgba(253, 249, 182, 0.45) 100%);
   --new-gradient2:linear-gradient(180deg, rgba(251,241,56, .3) 0%, rgba(253, 249, 182, .3) 100%);
   --tr:.3s;
   --tr2:.4s;
} 

.logo{
    display: block;
    width: 97px;
    height: 30px;
    background-image: url(files/logo/logo.svg);
    background-repeat: no-repeat;
    background-size: contain;
    margin-bottom: 18px;
}

.header{
    padding-top: 52px;
    padding-bottom: 5px;
    margin-bottom: -35px;
}

.container{
    max-width: 1142px;
    margin: 0 auto;
}

.header-wrapper{
   display: flex;
    align-items: center;
    padding-top: 24px;
    margin-left: 31px;
    margin: 0 auto;
    max-width: 1142px; 
}

.fitness-menu{
    display:none;
    width:29px;
    height:22px;
    background-image: url(./files/icons/fitnessmenu.svg);
    background-size:contain;
    background-color: transparent;
    border:none;
    margin-bottom: 19px;
    position: relative;
    left: 35px;
}

.nav {
    display: flex;
    gap: 51px;
    margin-left: max(6vw, 38px);
}

.cart{
    align-items: flex-start;
    text-decoration: none;
    position: relative;
    font-family: 'Montserrat bold';
    color: var(--accent-black);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    margin-top: -19px;
}

.modal-close{
    display:none;
}
.nav._modal{
    display:none;
}

.elipse{  
    content: '';
    display: flex;
    background-image: url(files/icons/ellipse.svg);
    width: 75px;
    height: 75px;
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    top: 3px;
    left: 37px;
    flex-shrink: 0;
    margin-left: auto;
}


.nav-link{
    display: flex;
    text-decoration: none;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    font-family: 'Montserrat regular';
    color: var(--accent-black);
    white-space: nowrap;
    margin-bottom: 16px;
}

.nav-link:hover {
  	text-decoration: underline;
    color:var(--accent-black);
    height: 1px;
    text-underline-offset: 15px;
}

.button-up{
    position: fixed;
    width: 77px;
    height: 24px;
    right: 25px;
    bottom: 10px;
    padding: 5px 10px;
    border: none;
    /*
    margin-left: 310px;
    margin-top: 317px;
    */
    background: var(--yellow);
    box-shadow: 0px 13px 24px 0px rgba(251, 241, 56, 0.30);
    text-align: center;
    text-transform: uppercase;
    font-family: 'Montserrat bold';
    color: var(--accent-black);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 0.48px;
    cursor: pointer;
    transition: var(--tr);
    text-decoration: none;
}

.button-up:hover {
    background-color: var(--accent-black);
    color: var(--yellow);
    box-shadow: 0px 13px 24px 0px rgba(70, 86, 106, 0.20);
}

.button-up.hidden{
    opacity:0;
}

.button-up.visible{
    opacity:1;
}

.main-content{
    max-width: 1326px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right : 15px
}

.hero{
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
}

.hero-text {
   flex-basis: 62%;
   
}
.hero-text h1 {
   font-size: clamp(26px, 4.5vw ,48px);
}


.hero-bg{
    position: relative;
    height:100%;
    flex-basis:464px;
}

.hero-wrapper{
    position: absolute;
    right: -92px;
    bottom: 0px;
    width: clamp(399px, 65vw, 996px);
    top: 26px;
}

.background-yellow{
    display: block;
    height: 852px;
    flex-basis: calc(68% - 18px);
    opacity: 0.2;
    background: linear-gradient(90deg, #FBF138 0%, rgba(253, 249, 182, 0.45) 120%);
    position: relative;
    left: 262px;
    top: 26px;
}

.text{
    display: inline-block;
    position: absolute;
    color: var(--accent-black);
    top: 222px;
    left: 93px;
    font-family: 'Montserrat bold';
    font-weight: 700;
    line-height: 125%;
    letter-spacing: 1.44px;
    text-transform: uppercase;
}

.text2{
    display: inline-block;
    position: absolute;
    top: 375px;
    left: 93px;
    color: var(--accent-black);
    font-family: 'Montserrat regular';
    font-size: 40px;
    font-weight: 400;
    line-height: 125%;
}

.text3{
    display: inline-block;
    position: absolute;
    font-family: 'Montserrat regular';
    color: var(--accent-black);
    top: 473px;
    left: 183px;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.hero-button{
    width: 196px;
    height: 24px;
    display: block;
    padding: 21px 30px;
    border: none;
    margin-left: 182px;
    margin-top: 362px;
    background: var(--yellow);
    box-shadow: 0px 13px 24px 0px rgba(251, 241, 56, 0.30);
    text-align: center;
    text-transform: uppercase;
    font-family: 'Montserrat bold';
    color: var(--accent-black);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 0.48px;
    cursor: pointer;
    transition: var(--tr);
    text-decoration: none;
}

.hero-button:hover {
    background-color: var(--accent-black);
    color: var(--yellow);
    box-shadow: 0px 13px 24px 0px rgba(70, 86, 106, 0.20);
}

.click{
    position: relative;
    top: -31px;
    left: 91px;
}


.container2{
    max-width: 1142px;
    margin: 0 auto;
    padding-bottom: 109px;
    padding-left: 15px;
    padding-right : 15px
}

.menu{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 107px;
}


.menu-title{
    font-family: 'Montserrat bold';
    color: var(--accent-black);
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 125%;
    margin-top: 18px;
}

.menu-title2{
    align-self: flex-start;
    font-family: 'Montserrat bold';
    color: var(--accent-black);
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 125%;
    white-space: nowrap;
        margin-left:10px;
}

.setka{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 309px 73px 281px;
    grid-template-areas:
        "a b c"
        "d b f"
        "d e f";
    gap: 20px;
    margin: 0 auto;
}

.item{
    border: 1px solid rgba(43,53,65,0.5);
    box-sizing: border-box;
    position:relative;
    transition: .4s;
    display:flex;
    flex-direction: column;
    justify-content: end;
    gap:20px;
    padding:10px;
}

.item:hover {
   border-color:white;
}

.item:nth-child(1){
   grid-area:a;
   cursor: pointer;
}

.item:nth-child(2){
   grid-area:b;
   cursor: pointer;
}

.item:nth-child(3){
   grid-area:c;
   cursor: pointer;
}

.item:nth-child(4){
   grid-area:d;
   cursor: pointer;
}

.item:nth-child(5){
   grid-area:e;
   cursor: pointer;
}

.item:nth-child(6){
   grid-area:f;
   cursor: pointer;
}


.item::before {
   content: '';
   display: block;
   width: 100%;
   height: 100%;
   background:url(files/icons/gradient.png);
   object-fit: cover;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   z-index: -1;
   opacity: 0;
   transition: .4s;
}

.item:hover::before {
   opacity: 0.7;
}

.item-title{
    color:var(--accent-black);
    font-family:'Montserrat bold';
    font-size:18px;
    font-style:normal;
    font-weight:700;
    line-height:125%;
    position: absolute;
    bottom: 17px;
    left: 10px;
}

.item-date{
    color: var(--light-dark);
    white-space: nowrap;
    font-family: 'Montserrat regular';
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    position: absolute;
    top: 10px;
    right:10px;
    opacity: 0.7;
}

span.item-date{
    position: absolute;
    top: 21px;
    right: 28px;
}

span.item-title{
    margin-left:20px;
}


.item-img{
    position: absolute;
    bottom: 81px;
    left: 11px;
}

img.item-img{
    max-width: 100px;
    margin-left:20px;
}

.item-title2{
    color:var(--accent-black);
    font-family:'Montserrat bold';
    font-size:18px;
    font-style:normal;
    font-weight:700;
    line-height:125%;
    position: absolute;
    top: 360px;
    left: 31px;
}

.item-date2{
    color: var(--light-dark);
    white-space: nowrap;
    font-family: 'Montserrat regular';
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%;
    opacity: 0.7;
}

span.item-date2{
    position: absolute;
    top: 21px;
    right: 30px;
}

.item-img2{
    position: absolute;
    bottom: 81px;
    left: 11px;
}


img.item-img2{
    max-width: 100px;
    margin-left:20px;
}


.item-title3{
    color:var(--accent-black);
    font-family:'Montserrat bold';
    font-size:18px;
    font-style:normal;
    font-weight:700;
    line-height:125%;
    position: absolute;
    bottom: 19px;
    left: 37px;
}

.item-date3{
    color: var(--light-dark);
    white-space: nowrap;
    font-family: 'Montserrat regular';
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%;
    opacity: 0.7;
}

span.item-date3{
    position:absolute;
    top: 20px;
    right: 29px;
}

.item-img3{
    position: absolute;
    top: 175px;
    left: 10px;
}

img.item-img3{
    max-width: 100px;
    margin-left:20px;
}

.item-title4{
    color:var(--accent-black);
    font-family:'Montserrat bold';
    font-size:18px;
    font-style:normal;
    font-weight:700;
    line-height:125%;
    position: absolute;
    bottom: 19px;
    left: 31px;
}

.item-date4{
    color: var(--light-dark);
    white-space: nowrap;
    font-family: 'Montserrat regular';
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%;
    opacity: 0.7;
}

span.item-date4{
    position:absolute;
    top: 20px;
    right: 29px;
}

.item-img4{
    position: absolute;
    bottom: 82px;
    left: 10px;
}

img.item-img4{
    max-width: 100px;
    margin-left:20px;
}

.item-title5{
    color:var(--accent-black);
    font-family:'Montserrat bold';
    font-size:18px;
    font-style:normal;
    font-weight:700;
    line-height:125%;
    position: relative;
    top: -9px;
    left: 20px;
}

.item-date5{
    color: var(--light-dark);
    white-space: nowrap;
    font-family: 'Montserrat regular';
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%;
    opacity: 0.7;
}

span.item-date5{
    position: absolute;
    top: 20px;
    right: 30px;
}

.item-img5{
    position: absolute;
    top: 136px;
    left: 10px;
}

img.item-img5{
    max-width: 100px;
    margin-left:20px;
}

.item-title6{
    color:var(--accent-black);
    font-family:'Montserrat bold';
    font-size:18px;
    font-style:normal;
    font-weight:700;
    line-height:125%;
    position: absolute;
    bottom: 19px;
    left: 30px;
}

.item-date6{
    color: var(--light-dark);
    white-space: nowrap;
    font-family: 'Montserrat regular';
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%;
    position: absolute;
    bottom: 30px;
    right: 24px;
    opacity: 0.7;
}


span.item-date6{
    position:absolute;
    top: 20px;
    right: 29px;
}

.item-img6{
    position: absolute;
    bottom: 82px;
    left: 10px;
}

img.item-img6{
    max-width: 100px;
    margin-left:20px;
}

.main-subscribe{
    margin:0 auto;
    max-width: 1920px;
    height:348px;
    background: #f3f3f3;
}

.main-text {
    position: relative;
    display: flex;
    text-align: center;
    left: -49px;
    margin: 0 auto;
    max-width: 687px;
    justify-content: start;
}

.form {
    padding-left: 84px;
    display: flex;
    margin: 0 auto;
    gap: 23px;
    justify-content: center;
    max-width: 1054px;
    padding-right: 62px;
    margin-top: 7px;
}

.form > div {
    flex-basis: calc(80% - 225px - 269px);
}

.background-grey{
    margin: 0 auto;
    max-width: 1920px;
    background-color: #F3F3F3;
    margin-top: 55px;
    padding: 49px 0 90px;
}

.menu-menu{
    margin: 0 auto;
    max-width: 1142px;
}

.mail2{
    display: flex;
    width: 365px;
    height: 62px;
    border: 1px solid #FFFFFF;
    font-family: 'Montserrat regular';
    color: var(--accent-black);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    background: #FFF;
}

.mail2:focus {
    border: 1px solid #FBF138;
    outline-color: #FBF138;
}


.mail2::placeholder {
    position:relative;
    top:0px;
    padding-left: -5px;
    padding-top:10px;
    margin-bottom:-10px;
    color:var(--accent-black);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    opacity:0.3;
    font-family: 'Montserrat regular'; 
}

.title{
    display: block;
    color: var(--accent-black);
    white-space: nowrap;
    font-family: 'Montserrat bold';
    font-size: 40px;
    font-style: normal;
    line-height: normal;
    position: relative;
}

.form .btn22 {
    flex-basis: 225px;
}

.btn22{
display: block;
    top: -58px;
    width: 225px;
    height: 66px;
    background-color: var(--yellow);
    right: -777px;
    box-shadow: 0px 13px 24px 0px rgba(251, 241, 56, 0.20);
    border: none;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Montserrat bold';
    color: var(--accent-black);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 0.48px;
    padding-top: 4px;
    cursor: pointer;
    transition: var(--tr);
}

.btn22:hover{
    background-color: var(--accent-black);
    color: var(--yellow);
    box-shadow: 0px 13px 24px 0px rgba(70, 86, 106, 0.20);
}

.elipse2{
    content:'';
    background-repeat: no-repeat;
    background-size: contain;
}

img.elipse2{
    position: relative;
    right: -41px;
    top: -3px;
    width: 101px;
}

.agreement{
    color: rgba(43, 53, 65, 0.5);
    font-family: 'Montserrat regular';
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin-top: 13px;
}

.checkbox:checked,
.checkbox:not(:checked){
   position: absolute;
   left:-9999px;
}
.checkbox:checked + label,
.checkbox:not(:checked) + label{
position: relative;
    padding-left: 24px;
    cursor: pointer;
}
.syilka{
    color:rgba(43, 53, 65, 0.5);
    font-family: 'Montserrat regular'; 
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 16.5px */
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    cursor: pointer;
    transition: var(--tr);
}

.syilka:hover{
    color: var(--accent-black);
    font-family: 'Montserrat regular';
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}


/* Стили для псевдоэлемента before с фоном и обводкой, когда пункт активен */
.checkbox:checked + label::before{
   content:'';
   position: absolute;
   width: 16px;
   height: 16px;
   left:0;
   top:calc(50% - 10px);
   background-color: #2B3541;
   border: 2px solid #2B3541;
   opacity: 1;
}
/* Стили для псевдоэлемента after с изображением, когда пункт активен */
.checkbox:checked + label::after{
   content:'';
   position: absolute;
   width: 18px;
   height: 18px;
   transition: all .2s ease;
   opacity: 1;
   left: 1px;
   top: calc(50% - 9.5px);
   background-size: cover;
   background-repeat: no-repeat;
   background-image: url(files/icons/check_box.svg);
}
/* Стили для псевдоэлемента before с фоном и обводкой, когда пункт НЕ активен */
.checkbox:not(:checked) + label::before{
   content:'';
   position: absolute;
   width: 16px;
   height: 16px;
   left:0;
   top:calc(50% - 10px);
   background-color: transparent;
   border: 2px solid #2B3541;
}
/* Стили для псевдоэлемента after с изображением, когда пункт НЕ активен */
.checkbox:not(:checked) + label::after{
   content:'';
   position: absolute;
   width: 15px;
   height: 15px;
   transition: all .2s ease;
   opacity: 0;
   left: 4px;
   top: calc(50% - 6px);
   background-position: 0 -12px;
   background-color: transparent;
   background-repeat: no-repeat;
   background-size: cover;
   background-image: url(files/icons/check_box.svg);
}
.radio:checked + label::before{
   border-radius: 100%;
}


.contain{
   position: relative;
   max-width: 1142px;
   margin: 0 auto;
   right:100px;
   top:10px;
}



.about{
    display: flex;
    justify-content: center;
    margin-top: 158px;
    gap: 70px;
    padding-left: 15px;
    padding-right : 15px
}

.about-content{
    display: flex;
    flex-flow: row nowrap;
}

.about-about{
    margin-top: -36px;
}

.company{
    color: var(--accent-black);
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 125%;
    font-family: 'Montserrat bold';
}

.special-text{
    display: inline-block;
    color: var(--accent-black);
    font-family: 'Montserrat regular';
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    padding-bottom: 17px;
    margin-top: -14px;
}

.about-image{
    background-repeat: no-repeat;
    background-size: cover;
    width: clamp(399px, 65vw, 587px);
}



.about-image>img{
    width: 100%;
    height: 335px;
    object-fit: cover;
    object-position: bottom;
}

.btn33{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 225px;
    height: 61px;
    background-color: var(--yellow);
    box-shadow: 0px 13px 24px 0px rgba(251, 241, 56, 0.20);
    border: none;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Montserrat bold';
    color: var(--accent-black);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 0.48px;
    padding-top: 4px;
    cursor: pointer;
    transition: var(--tr);
    text-decoration: none;
}

.btn33:hover{
    background-color: var(--accent-black);
    color: var(--yellow);
    box-shadow: 0px 13px 24px 0px rgba(70, 86, 106, 0.20);
}

.content-main2{
    max-width: 1142px;
    margin: 0 auto;
}

.advantages {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding-top: 49px;
    justify-content: center;
    padding-bottom: 114px;
    max-width: 1142px;
    gap: 45px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right : 15px;
}

.advantages-text1{
    color: var(--accent-black);
    font-family: 'Montserrat bold';
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 125%;
}

.advantages-text2{
    color: var(--accent-black);
    font-family: 'Montserrat bold';
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 125%;
}


.advantages-text3{
    color: var(--accent-black);
    font-family: 'Montserrat bold';
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 125%;
}


.advantages-text4{
    color: var(--accent-black);
    font-family: 'Montserrat bold';
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 125%;
}


.advantages-span1{
    color: var(--accent-black);
    font-family: 'Montserrat regular';
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    opacity: 0.6;
}
.advantages-span2{
    color: var(--accent-black);
    font-family: 'Montserrat regular';
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    opacity: 0.6;
}

.advantages-span3{
    color: var(--accent-black);
    font-family: 'Montserrat regular';
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    opacity: 0.6;
}

.advantages-span4{
    color: var(--accent-black);
    font-family: 'Montserrat regular';
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    opacity: 0.6;
}

/********FOOTER***********/

.footer {
    height: 149px;
    background: #F3F3F3;
    /*margin-left: 1050px;*/
    /*max-width: 1920px;*/
    margin: 0px auto;
}

.container-footer{
    max-width: 1142px;
    margin: 0 auto;
    padding-top: 28px;
    padding-left: 15px;
    padding-right : 15px;
}

.header-wrapper2{
    display: flex;
    align-items: center;
}         



.logo2{
    display: block;
    width: 97px;
    height: 30px;
    background-image: url(files/logo/logo.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

.nav2 {
    display: flex;
    gap: 91px;
    padding-left: min(10vw, 76px);
    justify-content: space-around;
}

.cart2{
    display: flex;
    text-decoration: none;
    position: relative;
    font-family: 'Montserrat bold';
    color: var(--accent-black);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    align-items: center;
}

.elipse22{  
    content: '';
    background-image: url(files/icons/ellipse.svg);
    width: 75px;
    height: 75px;
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    top: 13px;
    left: 40px;
    flex-shrink: 0;
    margin-left: auto;
}

.nav-link2{
    text-decoration: none;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    font-family: 'Montserrat regular';
    color: var(--accent-black);
    white-space: nowrap;
}


.nav-link2:hover {
  	text-decoration: underline;
    color:var(--accent-black);
    text-underline-offset: 15px;
}

.container-agreement{
    display: flex;
    max-width: 1142px;
    margin: 0 auto;
    justify-content: space-between;
    padding-left: 15px;
    padding-right : 15px
}

.agreement22{
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    width: 1142px;
    margin: 0 auto;
}

.prove{
    display: block;
    white-space: nowrap;
    color: var(--accent-black);
    font-family: 'Montserrat regular';
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    opacity: 0.3;
    position: relative;
    top: 0px;
}

.label22{
    font-family: 'Montserrat regular';
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    white-space: nowrap;
    color: var(--special-low-black);
    position: relative;
    display: block;
}


.syilka22{
    color:var(--special-low-black);
    font-family: 'Montserrat regular';
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    cursor: pointer;
    transition: var(--tr);
    
}

.syilka22:hover{
    color:var(--special-strong-black);
    font-family: 'Montserrat regular';
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    opacity:1;
}



/* MEDIA */

@media(max-width:1550px){
    .hero-wrapper{
        position: absolute;
        right: -26px;
        bottom: 0;
        width: clamp(399px, 71vw, 996px);
        top: 2px;
    }

}

@media(max-width:1420px){


    .hero-text h1{
        font-size: clamp(26px, 4.5vw, 40px);
    }

    .text2{
        top: 319px;
    }

    .text3{
        top:410px;
    }

    .hero-button{
        margin-top: 348px;
    } 

    .background-yellow{
        height: 713px;
    }

    .hero-wrapper {
        position: absolute;
        right: 0;
        width: clamp(399px, 71vw, 834px);
        top: 27px;
    }


}


@media(max-width:1230px){

    .hero-wrapper {
        position: absolute;
        right: 0;
        width: clamp(399px, 71vw, 645px);
        top: 25px;
    }

    .background-yellow{
        height: 551px;
        flex-basis: calc(209% - 20px);
        position: relative;
        left: 135px;
    }

    .hero-text h1{
        font-size: clamp(26px, 4.5vw, 30px);
        font-size: 26px;
        top: 140px;
    }

    .text2{
        margin-left: 103px;
        margin-top: -65px;
        font-size: 26px;
    }

    .text3{
        left: 192px;
        font-size: 16px;
        margin-top: -102px;
    }

    .hero-button{
        margin-top: 290px;
        margin-left: 188px;
    }

    .click{
        width: 39.245px;
        height: 40px;
        left:0px;
    }

    .weight{
        object-fit: cover; max-width: 100%; max-height: 100%;
    }

    .heart{
        object-fit: cover; max-width: 100%; max-height: 100%;
        white-space: nowrap;
    }

    .item-title{
        overflow: hidden;
        text-overflow: ellipsis;
    }
}



@media (max-width:1080px){
    .about-image>img{
    width: 100%;
    height: 358px;
    object-fit: cover;
    object-position: bottom;
   }
    
}



@media(max-width:995px){
    .hero-text h1 {
        font-size: 26px;
        top: 140px;
        left: 0px;
    }
    .text2{
        
        left:-105px;
    }

    .text3 {
        left: 0px;
        font-size: 16px;
        margin-top: -103px;
    }

    .hero-button{
        margin-top: 290px;
        margin-left: 0px;
    }

    .click {
        position: relative;
        top: -21px;
        left: -2px;
    }

}


@media (max-width:910px){
    .hero-wrapper {
        position: absolute;
        right: 0;
        width: clamp(399px, 71vw, 452px);
        top: 192px;
    }
}

@media (max-width:885px){
    .nav2 {
        display: flex;
        gap: 68px;
        padding-left: min(10vw, 50px);
        justify-content: space-around;
    }
}

@media (max-width:865px){
    .nav{
        gap: 9px;
        margin-left: max(3vw, 38px);
    }

}


@media (max-width: 820px) {
    .nav2 {
        display: flex;
        gap: 68px;
        padding-left: min(10vw, 4px);
        justify-content: space-around;
    }

    .special-text{
        display: inline-block;
       font-size: 18px;
       font-weight: 400;
       line-height: 22px;
       max-width: 820px;
       text-align: left;
    }

            .advantages{
        align-items: flex-start;
        flex-wrap: wrap;
        padding-top: 6px;
        gap: 30px;
    }

    .advantages-item{
        margin-right:auto;
    }

}


@media (max-width:769px){
    .nav{
        gap: 9px;
        margin-left: max(3vw, 38px);
    }

    .background-yellow {
        height: 497px;
        flex-basis: calc(246% - 184px);
        position: relative;
        left: 108px;
        width: 325px;
        top: 37px;
    }

    .hero-wrapper {
        position: absolute;
        right: 0;
        width: clamp(399px, 71vw, 395px);
        top: 190px;
    }

   .hero-text h1 {
        font-size: 26px;
        top: 52px;
        left: 3px;
    }

    .text2 {
        margin-left: 111px;
        margin-top: -141px;
        font-size: 26px;
    }

    .text3 {
        left: 3px;
        font-size: 16px;
        margin-top: -180px;
    }

    .hero-button {
        margin-top: 201px;
        margin-left: 2px; 
    }

    .click {
        position: relative;
        top: -69px;
        left: 3px;
    }

    .menu {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding-top: 38px;
    }

    

}


@media (max-width:768px){

    .nav{
        display: none;
    }

    .nav._modal {
        display: flex;
        flex-direction: column;
        gap: 46px;
        text-align: start;
        margin-left: -3px;
        margin-top: -46px;
        margin-bottom: -52px;
    }

    .nav-link::after{
        display: none;
    }

    .nav._modal::before{
        position: relative;
        top: 85px;
        content: "";
        display: inline-block;
        border: 1px solid var(--special-low-black-line);
        max-width: 565px;
    }

    .nav._modal::after{
        position: relative;
        top: -86px;
        content: "";
        display: inline-block;
        border: 1px solid var(--special-low-black-line);
        max-width: 565px;
    }

    .fitness-menu{
        display:block;
    }

    .modal{
        width: 100%;
        max-width: 587px;
        background-color: #F3F3F3;
        padding: 40px 14px;
        position: absolute;
        top: 0;
        box-sizing: border-box;
        text-align: start;
        transition: var(--tr2);
        padding-top: 70px;
        padding-bottom: 48px;
    }

    .modal-close{
        display: block;
        width: 20px;
        height: 19px;
        background-image: url(./files/icons/close.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-color: transparent;
        border: none;
        position: absolute;
        top: 32px;
        right: 10px;
    }


    .nav-link{
        display: flex;
        text-decoration:none;
        font-size: 16px;
        font-weight: 400;
        line-height: 20px;
        text-align: left;
        text-decoration-color: black;
        font-style:normal;
        height: 0px;
        background-position: 0% 100%;
        background-repeat: no-repeat;
        background-size: 0% 2px;
        transition: background-size .3s;
    }

    
    .nav-link:hover {
        text-decoration:underline;
        color:var(--accent-black);
        height:0px;
        text-underline-offset: 15px;
    }

    .logo3{
        display: block;
        background-image: url(./files/logo/logo.svg);
        background-repeat: no-repeat;
        background-size: contain;
        width: 78px;
        height: 24px;
        position: relative;
        top: -45px;
        left: -3px;
    }
 
    .container2{
        padding-bottom: 44px;
    }

    .setka {
       grid-template-columns: repeat(2, 1fr);
       grid-template-rows: repeat(3, 224px);
       grid-template-areas: "a d" "b e" "c f";
   }

    .item-title{
        color: var(--dark, rgba(43, 53, 65, 1));
        font-size: 16px;
        font-weight: 700;
        line-height: 20px;
        bottom: 14px;
        left: 5px;
    }

    .item-img{
        bottom: 70px;
        left: 4px;
    }

    .item-title2{
       font-size: 16px;
       font-weight: 700;
       line-height: 20px;
       top: 190px;
       left: 26px;
    }

    .item-img2{
        bottom: 67px;
        left: 11px;
    }

    .item-title3{
        bottom: 10px;
        left: 26px;
        font-size: 18px;
        font-weight: 700;
       line-height: 22px;
    }

    .item-img3{
        top: 111px;
        left: 5px;
    }

    .item-title4{
        bottom: 14px;
        left: 21px;
        font-size: 16px;
        font-weight: 700;
        line-height: 20px;
    }

    .item-img4{
        bottom: 69px;
        left: 0px;
    }

    .item-title5 {
        top: -3px;
        left: 12px;
        font-size: 16px;
        font-weight: 700;
        line-height: 20px;
    }

    .item-img5{
        position: absolute;
        top: 95px;
        left: 0px;
    }

    .item-title6 {
        font-size: 18px;
        font-weight: 700;
        line-height: 22px;
        bottom: 10px;
        left: 21px;
   }

    .item-img6 {
        position: absolute;
        bottom: 63px;
        left: 0px;
    }


    .item-date{
       font-size: 16px;
       font-weight: 400;
       line-height: 20px;
       top: 10px;
       right: 10px;
    }

    .item-date2{
       font-size: 16px;
       font-weight: 400;
       line-height: 20px;
    }

    .item-date3{
       font-size: 16px;
       font-weight: 400;
       line-height: 20px;
    }

    .item-date4{
       font-size: 16px;
       font-weight: 400;
       line-height: 20px;
    }

    .item-date5{
        font-size: 16px;
        font-weight: 400;
        line-height: 20px;
    }

    .item-date6{
        font-size: 16px;
        font-weight: 400;
        line-height: 20px;
    }

    span.item-date {
       position: absolute;
       top: 27px;
       right: 16px;
    }

    span.item-date2 {
       position: absolute;
       top: 27px;
       right: 16px;
    }

    span.item-date3 {
       position: absolute;
       top: 27px;
       right: 20px;
    }

    span.item-date4 {
       position: absolute;
       top: 27px;
       right: 21px;
    }


    span.item-date5 {
       position: absolute;
       top: 27px;
       right: 25px;
    }

    span.item-date6 {
        position: absolute;
        top: 27px;
        right: 20px;
    }
 
    .main-text {
        position: relative;
        display: flex;
        text-align: center;
        left: -56px;
        margin: 0 auto;
        max-width: 687px;
        justify-content: start;
    }

    .form{
        margin-left: -16px;
    }
    
    .about {
       gap: 38px;
       margin-top: 91px;
    }  

    .advantages {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: flex-start;
        flex-wrap: wrap;
        padding-top: 0px;
        gap: 14px;
        padding-bottom: 74px;
        padding-right: 0px;
    }

    .advantages-item{
        margin-right:auto;
    }

    .advantages-span1{
        display:grid;
        font-size: 16px;
        font-weight: 400;
        line-height: 20px;
        width: 208px;
    }

    .advantages-span2{
        display:grid;
        font-size: 16px;
        font-weight: 400;
        line-height: 20px;
        width: 251px;
    }

    .advantages-span3{
        display:grid;
        font-size: 16px;
        font-weight: 400;
        line-height: 20px;
        width: 184px;
    }

    .advantages-span4{
        display:grid;
        font-size: 16px;
        font-weight: 400;
        line-height: 20px;      
        width: 193px; 
    }


    .footer {
        height: 50px;
        background: #F3F3F3;
        margin-left: 1050px;
        max-width: 1920px;
        margin: 0px auto;
        padding: 20px 15px 20px 15px;
    }


    .prove{
        display: none;
        display: block;
        background-image: url(./files/logo/logo.svg);
        background-repeat: no-repeat;
        background-size: contain;
        width: 97px;
        height: 30px;
        opacity: 1;
    }

    .container-agreement {
       display: flex;
       max-width: 1142px;
       margin: 0 auto;
       justify-content: space-between;
    }

    .container-footer{
        display: none;
    }

    .agreement22 {
        display: flex;
        justify-content: space-between;
        margin-top: 5px;
        width: 1142px;
        margin: 0 auto;
        justify-content: space-between;
        align-items: center;
    /* gap: 333px; */
    }

     .label22{
        font-size: 10px;
        font-weight: 400;
        line-height: 12px;
    }

    .syilka22{
        font-size: 10px;
        font-weight: 400;
        line-height: 12px;
    }

    .syilka22:hover{
       font-size: 10px;
        font-weight: 400;
        line-height: 12px;
    }

    .button-up{
        display: none;
    }
}

/**********MOBILE**************/


@media (max-width:680px){

    .background-grey {
        margin: 0 auto;
        max-width: 1920px;
        background-color: #F3F3F3;
        margin-top: 55px;
        padding: 49px 0 90px;
    }

    .main-text {
        position: relative;
        display: flex;
        margin: 0 auto;
        justify-content: center;
        left:0;
    }

    .title{
        white-space: nowrap;
    }

    .form {
        display: grid;
        margin: 0 auto;
        justify-content: center;
        align-items: center;
        padding-left: 84px;
        display: grid;
        margin: 0 auto;
        justify-content: center;
        align-items: center;
        padding: 22px;    
    }

    img.elipse2 {
        width: 31px;
        height: 31px;
        right: -19px;
        top: 30px;
    }

    .mail2 {
        max-width: 330px;
        display: flex;
    }


    .btn22 {
        display: flex;
        width: 330px;
        min-height: 66px;
        justify-content: center;
        align-items: center;
    }

    .company{
        white-space: nowrap;
    }

}


@media (max-width:632px){
    
    .title{
        font-size: 26px;
        font-weight: 700;
        line-height: 100%;
    }

    img.elipse2 {
        width: 31px;
        height: 31px;
        right: -19px;
        top: 16px;
    }
}

@media (max-width:595px){

    .form{
        display:grid;
    }

    .hero-wrapper {
        position: absolute;
        right: -2px;
        top: 190px;
        max-width: 313px;
        top: 268px;
    }

    .hero{
        gap:0px;
    }

}


@media(max-width:575px){
    .hero-wrapper {
        position: absolute;
        right: -2px;
        max-width: 222px;
        top: 343px;
    }

    .background-yellow {
        flex-basis: calc(200% - 359px);
    }
}

@media (max-width:510px){
   
    .about-image>img {
       display:none;
    }

    .about-image{
        display:none
    }

    .special-text br{
        display: none;
    }

}

@media (max-width:490px){
    .advantages {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        align-items: flex-start;
        flex-wrap: wrap;
        padding-top: 0px;
        gap: 14px;
        padding-bottom: 74px;
        padding-right: 0px;
    }

    .hero-wrapper {
        display:none;
    }

    .background-yellow {
        background: transparent;
        flex-basis: calc(50%);
    }
}


@media (max-width:480px){
    .menu-title{
        font-size: 26px;
        font-weight: 700;
        line-height: 100%;
        margin-top: 9px;
    }

    .menu-title2{
        font-size: 16px;
        font-weight: 700;
        line-height: 20px;
    }

    .label22 {
        font-size: 10px;
        font-weight: 400;
        line-height: 12px;
        white-space: normal;
        text-align: right;
    }
}


@media(max-width:430px){

    .main-text{
        position: relative;
        display: flex;
        margin: 0 auto;
        justify-content: flex-end;
        left: 0px;
        align-content: normal;
        white-space: normal;
    }

}


@media(max-width:425px){

    .item-img {
        bottom: 38px;
        left: -9px;
        width: 39px;
        height: 39px;
    }

    .item-img2{
        bottom: 38px;
        left: -9px;
       width: 23px;
       height: 45px;
    }

    .item-img3{
        top: 43px;
        left: -9px;
        width: 46px;
        height: 25px;
    }

    .item-img4{
        bottom: 38px;
        left: -9px;
        width: 34px;
        height: 53px;
    }

    .item-img5{
        top: 36px;
        left: -9px;
        width: 39px;
        height: 37px;
    }

    .item-img6{
        bottom: 46px;
        left: -9px;
        width: 35px;
        height: 40px;
    }

    .item-title{
        font-size: 14px;
        font-weight: 700;
        line-height: 17px;
        top: 81px;
        left: -9px;
    }
    
    .item-title2{
        font-size: 14px;
        font-weight: 700;
        line-height: 17px;
        top: 85px;
        left: 10px;
    }

    .item-title3{
        font-size: 14px;
        font-weight: 700;
        line-height: 17px;
        top: 80px;
        left: 12px;
    }

    .item-title4{
        font-size: 14px;
        font-weight: 700;
        line-height: 17px;
        top: 86px;
        left: 10px;
    }

    .item-title5{
        font-size: 14px;
        font-weight: 700;
        line-height: 17px;
        top: 1px;
        left: 2px;
    }

    .item-title6{
        font-size: 14px;
        font-weight: 700;
        line-height: 17px;
        top: 75px;
        left: 11px;
    }


    .setka {
       grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(6, 114px);
       grid-template-areas: "a" "d" "b" "e" "c" "f";
   }

        .item-date{
            font-size: 14px;
            font-weight: 400;
            margin-top: -11px;
        margin-right: -7px;
        }

        .item-date2{
            position:absolute;
            top: 11px;
        right: 16px;
        }

        .item-date2{
            font-size: 14px;
            font-weight: 400;
            line-height: 17px;
            margin-top: -11px;
            margin-right: -7px;
        }

        .item-date3{
           font-size: 14px;
           font-weight: 400;
           line-height: 17px;
           margin-top: -15px;
           margin-right: -12px;
        }

        .item-date4{
           font-size: 14px;
           font-weight: 400;
           line-height: 17px;
           margin-top: -11px;
          margin-right: -13px;
        }

       .item-date5{
           font-size: 14px;
           font-weight: 400;
           line-height: 17px;
           margin-top: -11px;
           margin-right: -18px;
        }

       .item-date6{
           font-size: 14px;
           font-weight: 400;
           line-height: 17px;
           margin-top: -18px;
           margin-right: -12px;
        }
}

@media(max-width:400px){

    .background-grey {
        margin: 0 auto;
        max-width: 1920px;
        background-color: #F3F3F3;
        margin-top: 27px;
        padding: 22px 0 90px;
        align-items: flex-end;
        justify-content: center;
        align-content: center;
        display: grid;
        justify-content: center;
        align-self: center;
        align-items: baseline;
    }

    .form {
        display: grid;
        position: relative;
        top: 33px;
    }

    .main-text {
        position: relative;
        display: flex;
        margin: 0 auto;
        justify-content: center;
        left: -19px;
        align-content: normal;
        width: 201px;
        top: 20px;
    }

    .title{
        white-space: normal;
    }

    img.elipse2{
        right: -16px;
        top: 16px;
    }
    
}

@media (max-width:390px){

    .background-yellow {
        flex-basis: 0;
    }

    .menu {
        padding-top: 38px;
        margin-top: -89px;
    }

    .header{
        padding-bottom: 0;
    }

    .header-wrapper{
        padding-top:0;
        padding-left: 15px;
        padding-right : 15px;
    }


    .logo{
        width: 78px;
        height: 24px;
    }

    .cart{
        font-size: 14px;
        font-weight: 700;
        line-height: 17px;
    }

    .hero-text h1{
        white-space: nowrap;
        font-size: 24.69px;
        font-weight: 700;
        line-height: 30px;
    }

    .hero-button{
        display: flex;
        min-width: 330px;
        height: 65px;
        padding:0;
        align-items: center;
        justify-content: center;
        margin-top: 183px;
    }

    .click{
        display: none;
    }

}


@media(max-width:360px){

    .hero-text h1{
        top:47px;
        left:0;
    }

    .text2 {
        margin-left: 106px;
        margin-top: -151px;
    }

    .text3 {
        left: 1px;
        margin-top: -191px;
    }

    .company{
        font-size: 26px;
        font-weight: 700;
        line-height: 100%;
    }

    .special-text{
        font-size: 16px;
        font-weight: 400;
        line-height: 22px;
        padding-top: 15px;
    }

    .btn33{
        width: 330px;
        height: 65px;
    }

    .prove{
        /* Group */
       width: 78px;
       height: 24.12px;
    }

    .agreement22{
        gap:5px;
    }

    .advantages {
        gap: 22px;
        padding-bottom: 35px;
        margin-top: 36px;
    }

    .advantages-text1{
        font-size: 16px;
        font-weight: 700;
        line-height: 20px;
    }

    .advantages-text2{
        font-size: 16px;
        font-weight: 700;
        line-height: 20px;
    }

    .advantages-text3{
       font-size: 16px;
       font-weight: 700;
       line-height: 20px;
    }

    .advantages-text4{
       font-size: 16px;
       font-weight: 700;
       line-height: 20px;
    }


    .footer{
        padding-bottom: 0px;
        margin-top: 26px;
    }

    .form>div{
        margin-top: -14px;
    }

}