*,
*::before,
*::after{
    box-sizing: border-box;
}

body,html{
    overflow-x: hidden;
    scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6{
    font-family: 'Adderley', sans-serif;
}
a{
    text-decoration: none;
    color: inherit;
}
section{
    padding: 60px 0;
}
body{
    font-family: 'Gilroy', sans-serif;
    line-height: 1.3;
    color: #0E0E0E;
    font-size: 20px;
}

.btn, .btn-link, .header__btn{
    transition: box-shadow 0.3s ease;
}

.btn, .btn-link, .header__btn:hover {
    animation: pulseGlow 1s ease-in-out infinite;
}

@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
    }
}
.container{
    max-width: 1500px;
    padding: 0 10px;
    margin: 0 auto;
}


/* START BLOCK #1 MAIN */
.main-block{
    padding: 40px 0;
    background:
    url(../img/main-bg-2.png) calc(50% - 820px) 0% no-repeat,
    url(../img/background-main.jpg) no-repeat 50% 100%, #e8e9ed;
    overflow-x: hidden;
}
.header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    border-radius: 20px;
    padding: 0 25px;
    margin-bottom: 85px;
}

.header__list{
    display: flex;
    gap: 40px;
    align-items: center;
}
.header__item{
    font-size: 22px;
    padding: 30px 15px;
}
.header__item>a{
    padding: 30px 15px;
}
.header__item:nth-of-type(odd){
    background-color: #FAFAFA;
}

.header__btn, .btn-link{
    display: inline-block;
    font-size: 32px;
    padding: 10px 30px;
    border-radius: 35px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;
    border: none;
    color: #fff;
    font-family: 'Adderley', sans-serif;
    background: #E91B1E;
    background: linear-gradient(90deg,rgba(233, 27, 30, 1) 0%, rgba(181, 15, 17, 1) 50%);
}

.main-title{
    color: #101010;
    font-size: 75px;
    line-height: 1;
    margin-bottom: 30px;
}
.main-subtitle{
    margin-bottom: 50px;
}
.main-title>span{
    color: #5587BD;
}


.main-benefits{
    max-width: 305px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    background-color: #fff;
    border-radius: 15px;
    margin-bottom: 25px;
    color: #2AA3DD;
}
.benefits-wrapper{
    display: flex;
    gap: 10px;
    align-items: start;
}
.main-benefits:last-of-type{
    color: #fff;
    background-color: #2AA3DD;
    margin-bottom: 0;
}
.additional{
    font-size: 16px;
    margin-top: -50px;
    max-width: 305px;
}
.main-left{
    max-width: 830px;
}
.main-content{
    display: flex;
    gap: 40px;
    position: relative;
    align-items: end;
}
.img-product{
    max-width: 500px;
}
.order__form{
    position: relative;
    border-radius: 25px;
    background-color: #fff;
}
.order__form::after{
    content: "";
    background-image: url(../img/man.png);
    display: block;
    width: 476px;
    height: 886px;
    position: absolute;
    bottom: -40px;
    right: -440px;
}
.timer{
    display: flex;
    align-items: center;
    gap: 20px;
}
.timer-box{
    border-radius: 25px 25px 0 0;
    background-color: #2AA3DD;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 180px;
    position: relative;
}
.timer>span{
    background-color: #fff;
    border-radius: 15px;
    padding: 10px;
    font-weight: 900;
    font-size: 25px;
    display: block;
    position: relative;
}
.timer>span::after{
    content: ":";
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    right: -12px;
    position: absolute;
}
.timer>span:last-child::after{
    display: none;
}
.timer-text{
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 15px;
    text-align: center;
}
.discount-decor{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 20px;
    background-color: #FFC600;
    border-radius: 25px;
    font-weight: 900;
    top: -25px;
    right: -30px;
    transform: rotate(6deg);
}
.form-content{
    padding: 0 45px 35px;
}
.prices{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 35px 0;
    line-height: 1.1;
}

.old-price{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.old-price>p{
    font-size: 16px;
}
.old-price .price-num{
    position: relative;
}
.old-price .price-num::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;        
    height: 2px;  
    background: rgb(0, 0, 0);
    transform: rotate(-5deg);
    transform-origin: center;
}
.old-price .price-num>small{
    font-size: 25px;
}
.price-num{
    font-weight: 900;
}
.old-price .price-num>span{
    font-size: 24px;
}
.new-price{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.new-price .price-num>span{
    font-size: 42px;
}
.new-price>p{
    color: #B91818;
    font-weight: 700;
}
.new-price .price-num>small{
    font-size: 42px;
}

.form ::-webkit-input-placeholder {
    color: #333;
}
.form ::-moz-placeholder {
    color: #333;
}
.form :-moz-placeholder {
    color: #333;
}
.form :-ms-input-placeholder {
    color: #333;
}
.form ::placeholder{
    color: #333;
}
.form :focus::-webkit-input-placeholder {
    color: transparent;
}
.form :focus::-moz-placeholder {
    color: transparent;
}
.form :focus:-moz-placeholder {
    color: transparent;
}
.form :focus:-ms-input-placeholder {
    color: transparent;
}


.form-input{
    width: 100%;
    border: none;
    height: 90px;
    background-color: #F5F5F5;
    margin-bottom: 30px;
    border-radius: 30px;
    outline: none;
    text-align: center;
    font-size: 20px;
    font-family: 'Gilroy', sans-serif;
}
.btn{
    display: block;
    width: 100%;
    border: none;
    height: 90px;
    margin-bottom: 30px;
    border-radius: 50px;
    outline: none;
    text-align: center;
    font-size: 40px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
    font-family: 'Adderley', sans-serif;
    background: #E91B1E;
    background: linear-gradient(90deg,rgba(233, 27, 30, 1) 0%, rgba(181, 15, 17, 1) 50%);
}

.underform{
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fake-counter{
    display: flex;
    align-items: center;
    gap: 10px;
}
.fake-counter:before{
    content: '';
    width: 10px;
    height: 10px;
    display: block;
    background-color: #4DC710;
    border-radius: 50%;
}

.title{
    font-size: 50px;
    text-align: center;
    margin-bottom: 30px;
}
.title>span{
    color: #E21A1C;
}
.undertitle{
    text-align: center;
    margin-bottom: 90px;
}
/* END BLOCK #1 MAIN */



/* START BLOCK #2 FOR-WHOM */
.for-whom{
    background: url(../img/for-whom-bg1.png) 0% 0% no-repeat,
                url(../img/for-whom-bg2.png) 100% 100% no-repeat;
}
.for-whom-wrapper{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.for-whom-item{
    flex-basis: calc((100% - 40px) / 3);
    padding: 30px;
    flex-shrink: 0;
    flex-grow: 0;
    background-color: #EEF5FF;
    border-radius: 25px;
}
.for-whom-item:last-of-type{
    flex-basis: calc(
        ((100% - 40px) / 3) * 2 + 20px
    );
    background-color: #2AA3DD;
    color: #fff;
}

.for-whom-img{
    width: 106px;
    height: 106px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 50%;
    margin-left: auto;
    margin-bottom: 10px;
}
.for-whom-item>span{
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    display: block;
    margin-bottom: 10px;
}
/* END BLOCK #2 FOR-WHOM */

/* START BLOCK #3 FEEL */
.feel{
    background-color: #F9F9F9;
    padding-bottom: 0;
}
.feel .container>h2{
    margin-bottom: 60px;
}
.feel .container>h2>span{
    color: #2AA3DD;
}
.feel-wrapper{
    display: flex;
    gap: 40px;
    align-items: end;
}
.feel-item{
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
    padding: 35px;
    background-color: #fff;
    border-radius: 25px;
    box-shadow: 0 0px 30px rgba(0, 0, 0, 0.1)
}
.feel-item-box>span{
    font-weight: 700;
    font-size: 24px;
}
.feel-item:last-of-type{
    margin-bottom: 60px;
}

.feel-undertext{
    font-size: 16px;
    padding-bottom: 60px;
}
.feel-undertext>span{
    font-weight: 700;
}
.feel-item-img>img{
    display: block;
}
/* END BLOCK #3 FEEL */


/* START BLOCK #4 WHY */
.why{
   background: #2AA3DD url(../img/pattern1.png) 50% 50%;
   overflow: hidden;

}
.white-title{
    color: #fff;
    margin-bottom: 50px;
}
.why-content{
    position: relative;
}
.why-wrapper{
    display: flex;
    gap: 30px;
    max-width: 70%;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}
.why-item{
    padding: 40px;
    background-color: #fff;
    border-radius: 25px;
    max-width: 365px;;
}
.why-number{
    display: block;
    color: #2AA3DD;
    font-weight: 700;
    font-size: 50px;
    margin-bottom: 20px;
}
.why-title-text{
    font-weight: 700;
    text-transform: uppercase;
    font-size: 22px;
    margin-bottom: 20px;
    display: block;
}

.why-bg{
    position: absolute;
    right: -215px;
    top: 50%;
    transform: translateY(-50%);
}
/* END BLOCK #4 WHY */


/* START BLOCK #5 HOW WORKS */
.how-works{
    padding-top: 100px;
}
.how-works__wrapper{
    display: flex;
    gap: 80px;
    align-items: center;
    margin-bottom: 40px;
}
.how-works-prod{
    position: relative;
    width: 700px;
}
.how-works-prod>img{
    z-index: 5;
    position: relative;
    display: block;
    margin: 0 auto;
}
.how-works-prod::before{
    content: "";
    display: block;
    width: 240px;
    height: 400px; 
    position: absolute;
    background: url(../img/how-it-works-before.png) 50% 50% / cover no-repeat;
    left: -90px;
    top: 0;
}
.how-works-prod::after{
    content: "";
    display: block;
    position: absolute;
    width: 240px;
    height: 400px;
    background: url(../img/how-it-works-after.png) 50% 50% / cover no-repeat;
    right: -85px;
    top: 0;
}
.how-works .container .title>span{
    color: #2AA3DD;
}
.ingredient-item{
    display: flex;
    gap: 40px;
    align-items: center;
    margin-bottom: 40px;
}
.ingredient-item:last-of-type{
    margin-bottom: 0;
}
.ingredient-img{
    max-width: 260px;
    border-radius: 20px;
    position: relative;
}
.ingredient-img>img{
    border-radius: 20px;
    position: relative;
}
.list__item{
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.list__item:last-child{
    margin-bottom: 0;
}
.list__item.true:before{
    content: "";
    background: url(../img/feel-svg.svg) center / contain no-repeat;
    width: 36px;
    height: 36px;
    display: block;
    flex-shrink: 0;
}

.how-works-label{
    background-color: #4DC710;
    display: flex;
    gap: 10px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    width: 240px;
    height: 240px;
    text-align: center;
    padding: 10px;
    border-radius: 50%;
    position: absolute;
    bottom: 15px;
    left: 5px;
    z-index: 6;
}
.how-works-label>span{
    text-transform: uppercase;
    font-size: 24px;
    font-weight: 700;
    font-family: 'Adderley', sans-serif;
    letter-spacing: 1.3px;
}
.how-works-label>p{
    font-size: 16px;
    padding: 0 40px;
}
.ingredient-text{
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    background-color: #2AA3DD;
    opacity: 0.8;
    width: 256px;
    padding: 12px 15px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    color: #fff;
    font-weight: 700;
    font-size: 30px;
    font-family: 'Adderley', sans-serif;
}
.how-works-btn{
    text-align: center;
}
.how-works .container .btn-link{
   display: inline-block ;
}
/* END BLOCK #5 HOW WORKS */


/* START BLOCK #6 DYNAMIC */
.dynamic{
    background-color: #F9F9F9;
}
.dynamic__wrapper{
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
}
.dynamic-item{
    max-width: 461px;
    display: flex;
    flex-direction: column;
}
.dynamic-img{
    position: relative;
    border-radius: 20px;
    margin-bottom: 25px;
    
}
.dynamic-img>img{
    border-radius: 20px;
    width: 100%;
}
.dymamic-days{
    padding: 15px 10px;
    display: flex;
    min-width: 210px;
    justify-content: center;
    align-items: center;
    background-color: #4DC710;
    border-radius: 15px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    z-index: 3;
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 23px;
    font-family: 'Adderley', sans-serif;
    text-align: center;
}

.dynamic-item:first-of-type .dymamic-days{
    background-color: #B91818;
}

.dynamic-item>ul{
    background-color: #fff;
    padding: 30px;
    border-radius: 20px;
    height: 100%;
}

.dynamic-advice{
    display: flex;
    align-items: center;
    gap: 40px;
    background-color: #fff;
    border-radius: 20px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;

}
.dynamic-advice-box{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #B91818;
    padding: 15px 25px;
    border-radius: 15px;
}
.dynamic-advice>p>span{
    font-weight: 700;
}
/* END BLOCK #6 DYNAMIC */


/* START BLOCK #7 convenience */
.convenience{
    padding-top: 100px;
    background:  url(../img/convenience-gb1.png) calc(50% + 600px) 0% / 596px no-repeat, 
    url(../img/convenience-bg2.jpg) calc(50% - 870px) 0% / 158px no-repeat, 
    url(../img/convenience-bg3.jpg) 50% calc(50% + 300px) / 481px no-repeat,
    #fefefe;
}
.convenience-wrapper{
    display: flex;
    gap: 40px;
}
.convenience .title{
    text-align: left;
    margin-bottom: 50px;
}
.compare{
    box-shadow: 0 0px 30px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    margin-bottom: 40px;
}
.convenience-left{
    max-width: 870px;
}
.compare-head{
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: space-between;
    padding: 30px 50px;
    background-color: #2AA3DD;
    color: #fff;
    font-weight: 700;
    font-size: 30px;
    font-family: 'Adderley', sans-serif;
    border-radius: 20px 20px 0 0;
}
.compare-recommended{
    display: flex;
    align-items: center;
    gap: 20px;
}
.compare .label{
    padding: 10px 15px;
    background-color: #FFC600;
    border-radius: 15px;
    color: #000;
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 900;
}
.list__item.false::before{
    content: "";
    background: url(../img/close.svg) center / contain no-repeat;
    width: 35px;
    height: 35px;
    display: block;
    flex-shrink: 0;
}

.compare-content{
    display: flex;
    gap: 100px;
    align-items: center;
    padding: 30px 60px;
    background-color: #fff;
    border-radius: 0 0 20px 20px ;
}
.convenience-left-btn{
    text-align: center;
}

.convenience-left-btn>a{
    padding: 15px 45px;
}

.convenience-right{
   width: 450px;
}
.convenience-right-img{
    width: 69px;
}
.convenience-right-box{
    text-transform: uppercase;
}
.convenience-right-box>span{
    font-weight: 700;
    font-size: 22px;
}
.convenience-right-item{
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 30px 20px 30px 20px;
    width: 100%;
    box-shadow: 0 0px 30px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    margin-bottom: 40px;
    background-color: #fff;
}
.convenience-right-item:last-child{
    margin-bottom: 0;
}
/* END BLOCK #7 convenience */


/* START BLOCK reviews #8 */
.reviews{            
    background: #2AA3DD url(../img/pattern1.png) 50% 50%;
    overflow: hidden;
}
.reviews-wrapper{
    display: flex;
    /* justify-content: space-between; */
    justify-content: center;
    flex-wrap: wrap;
    gap: 60px;
}
.reviews-item{
    max-width: 675px;
    background-color: #fff;
    border-radius: 25px;
    display: flex;
    align-items: center;
    gap: 30px;
}
.reviews-item-img{
    height: 280px;
}
.reviews-item-img>img{
    border-radius: 25px 0 0 25px;
}
.reviews-item-box{
    padding: 10px 20px 10px 0;
}
.reviews-names{
    display: flex;
    gap: 20px;
    align-items: center;
}
.reviews-names>img{
    border-radius: 50%;
}
.reviews-item-text{
    margin-bottom: 20px;
}
.reviews-city>span{
    font-weight: 700;
}
/* END BLOCK8 REVIEWS */



/* START BLOCK9 QUESTIONS */
.question-wrapper{
    position: relative;
}
.question-wrapper>h2{
    padding-left: 250px;
}
.questions-content{
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.question-img{
    position: absolute;
    left: -200px;
    z-index: -1;
}

.faq-item{
    max-width: 750px;
    box-shadow: 0 0px 30px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    margin-bottom: 20px;
    margin-left: auto;
    background-color: #fff;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  font-family: 'Gilroy', sans-serif;
  text-transform: uppercase;
  font-weight: 700;
}
.arrow {
  width: 8px;
  height: 8px;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  transform: rotate(45deg);
  transition: 0.3s;
}

.faq-item.active .arrow {
  transform: rotate(225deg);
}


.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.faq-answer-inner { 
  padding: 0 20px 20px;
}
/* END BLOCK9 QUESTIONS */


/* START BLOCK10 FOOTER */
.footer{
    background: #2AA3DD;
    position: relative;
}
.footer::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;   /* вот здесь ограничиваешь высоту */
  background: #fff;
}
.footer-logo{
    margin-bottom: 30px;
}
.footer-right{
    max-width: 750px;
}
.footer-right>h1{
    color: #fff;
}
.footer-undertitle{
    color: #fff;
    margin-bottom: 50px;
}
.footer-prod{
    padding-left: 100px;
    position: relative;
    z-index: 3;
}
.footer-wraper{
    display: flex;
    gap: 60px;
}
.footer-wraper .main-right .timer-box{
    background-color: #1F769F;
}

.footer .order__form::after{
    display: none;
}
.footer-bg{
    position: absolute;
    bottom: 0;
    right: 100px;
}

.cpu{
    padding: 10px 0;
    text-align: center;
}
.cpu img{
    display:block;
    margin: 0 auto;
    width: auto;
}
.cpu a{
    display: inline-block;
    margin: 5px;
    color: #333;
    font-size: 14px;
}



@media(max-width: 1499px){
    .container{
        max-width: 1200px;
    }
    body{
        font-size: 18px;
    }
    .header__item{
        font-size: 20px;
    }
    .img-product{
        max-width: 400px;
    }
    .form-content{
        padding: 0 30px 35px;
    }
    .main-right{
        flex-shrink: 0;
        flex-basis: 450px;
    }
    .feel-item:last-of-type{
        margin-bottom: 50px;
    }
    .why-bg{
        max-width: 600px;
    }
    .dynamic__wrapper{
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }
    .reviews-item{
        max-width: 550px;
    }
    .dynamic-item{
        max-width: 350px;
    }
    .dymamic-days{
        font-size: 20px;
    }
    .question-wrapper > h2{
        padding-left: 0;
    }
}


@media(max-width: 1199px){
    .container{
        max-width: 1024px;
    }
    .main-content{
        display: block;
    }
    .main-title{
        text-align: center;
    }
    .benefits-wrapper{
        justify-content: center;
        margin-bottom: 20px;
        align-items: center;
    }
    .order__form{
        max-width: 650px;
        margin-left: auto;
        margin-right: auto;
    }
    .header__list{
        gap: 15px;
    }
    .main-subtitle{
        text-align: center;
    }
    .additional{
        margin-top: 0;
        margin-bottom: 30px;
        text-align: center;
        max-width: 100%;
    }
    .main-left{
        margin: 0 auto;
    }
    .for-whom-item{
        text-align: center;
    }
    .for-whom-img{
        margin-right: auto;
    }
    .feel-wrapper>img{
        max-width: 400px;
        height: 600px;
    }
    .feel-item{
        padding: 20px;
        margin-bottom: 15px;
    }
    .feel-item:last-of-type{
        margin-bottom: 40px;
    }
    .why-wrapper{
        max-width: 100%;
        justify-content: center;
    }
    .why-bg{
        position: static;
        display: block;
        margin: 80px auto 0;
        transform: rotate(90deg);
    }
    .feel-item-img>img{
        max-width: 40px;
    }
    .how-works__wrapper{
        display: block;
    }
    .how-works-prod{
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50px;
    }
    .how-works-prod::before{
        left: -25px;
    }
    .how-works-prod::after{
        right: -25px;
    }
    .ingredient-item{
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
    .how-works-label{
        left: 70px;
    }
    .compare-head{
        padding: 30px;
    }
    .convenience-right-item{
        padding: 20px;
    }
    .compare-content{
        padding: 30px;
    }
    .compare-recommended{
        display: block;
    }
    .reviews-item{
        margin-left: auto;
        margin-right: auto;
        max-width: 675px;
    }
    .reviews-wrapper{
        gap: 40px;
    }
    .questions-content > h2{
        padding: 0;
    }
    .faq-item{
        margin-right: auto;
        margin-bottom: 5px;
    }
    .question-img{
        position: static;
    }
    .footer-wraper{
        display: block;
    }
    .footer-bg{
        display: none;
    }
    .footer::before{
        display: none;
    }
    .footer-right{
        margin-bottom: 30px;
        margin-left: auto;
        margin-right: auto;
    }
    .footer-logo{
        text-align: center;
    }
    .footer-prod{
        padding: 0;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
    .footer-logo{
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
    .footer-undertitle{
        text-align: center;
    }
    .dynamic-item{
        max-width: 320px;
    }

}

@media(max-width: 1023px){
    .container{
        max-width: 768px;
    }
    .header{
        padding: 10px 25px;
        margin-bottom: 40px;
    }
    .header__nav{
        display: none;
    }
    .order__form{
        max-width: 510px;
    }
    .main-title{
        font-size: 62px;
    }
    .img-product{
        max-width: 360px;
    }
    .for-whom-img{
        width: 80px;
        height: 80px;
    }
    .for-whom-img>img{
        width: calc(100% - 50%);
    }
    .feel-wrapper{
        display: block;
    }
    .feel-wrapper>img{
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
    .why-item{
        padding: 30px;
        max-width: 350px;
    }
    .why-wrapper{
        gap: 15px;
    }

    .why-bg{
        max-width: 490px;
    }
    section{
        padding: 40px 0;
    }
    .how-works-prod > img{
        max-width: 300px;
    }
    .how-works-prod::before{
        width: 175px;
        height: 345px;
        left: 60px;
    }
    .how-works-prod::after{
        right: 75px;
        width: 175px;
        height: 345px;
    }
    .how-works-label{
        width: 220px;
        height: 220px;
        bottom: 12px;
        left: 110px;
    }
    .dynamic-img{
        margin-bottom: 15px;
    }
    .dynamic__wrapper{
        gap: 40px;
    }
    .dynamic-item > ul{
        padding: 20px;
    }
    .convenience-wrapper{
        display: block;
    }
    .convenience-right{
        margin-left: auto;
        margin-right: auto;
    }
    .convenience-left{
        margin-bottom: 50px;
    }
    .convenience-left>h2{
        text-align: center;
    }
    .convenience .title{
        text-align: center;
    }
    .convenience {
        background: 
    url(../img/convenience-bg2.jpg) calc(50% - 170px) 0% / 158px no-repeat, 
    url(../img/convenience-bg3.jpg) 65% calc(50% + 300px) / 481px no-repeat,
    #fefefe;
    }
    .convenience .title{
        margin-bottom: 30px;
    }
    .compare-head{
        justify-content: space-around;
        text-align: center;
    }
    .undertitle{
        margin-bottom: 50px;
    }
    .convenience-right-inner{
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        justify-content: center;
    }
    .convenience-right-item{
        max-width: 350px;
        margin-bottom: 0;
        gap: 20px;
    }
    .convenience-right{
        width: 100%;
    }
}




@media(max-width: 743px){
    .for-whom-item{
        flex-basis:  calc(50% - 15px);
        padding: 20px;
    }
    .for-whom-item:last-of-type{
        flex-basis:  calc(50% - 15px);
    }
    .for-whom-wrapper{
        justify-content: center;
    }
    .for-whom-img{
        width: 60px;
        height: 60px;
    }
    .title{
        font-size: 42px;
    }
    .undertitle{
        margin-bottom: 40px;
    }
    .for-whom{
        padding: 40px 0 60px;
    }
    .how-works-prod{
        max-width: 100%;
    }
    .wow {
        animation: none !important;
        visibility: visible !important;
    }
        
}


@media(max-width: 659px){
    .order__form::after{
        display: none;
    }
    .main-benefits{
        position: absolute;
        max-width: 240px;
        padding: 10px;
        z-index: 4;
    }
    .main-benefits>img{
        max-width: 30px;
    }
    .main-benefits:first-of-type{
        top: 50px;
        left: 0;

    }
    .benefits-wrapper{
        position: relative;
    }
    .main-benefits:nth-of-type(2){
        top: 50%;
        right: 0;
    }
    .main-benefits:nth-of-type(3){
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .main-title{
        font-size: 48px;
    }
    .header__btn{
        font-size: 24px;
        padding: 10px 15px;
    }
    .btn{
        font-size: 30px;
    }
    .additional{
        margin-bottom: 45px;
    }
    .feel-wrapper > img{
        max-width: 350px;
        height: 450px;
    }
    .why-item{
        padding: 25px;
    }
    .why-number{
        margin-bottom: 10px;
    }
    .why-title-text{
        margin-bottom: 10px;
    }

    .why-bg{
        max-width: 360px;
        margin: 70px auto 0;
    }

    .why{
        padding-bottom: 40px;
    }
    .ingredient-img{
        margin-left: auto;
        margin-right: auto;
    }
    .ingredient-item{
        display: block;
        margin-bottom: 40px;
    }
    .how-works-prod > img{
        max-width: 250px;
    }
    .ingredient-item>ul{
        padding: 0 30px;
    }
    .how-works-prod{
        max-width: 250px;
        margin-bottom: 35px;
    }
    .ingredient-img{
        margin-bottom: 15px;
    }
    .how-works-prod::before{
        width: 140px;
        height: 270px;
        left: -110px;
    }
    .how-works-prod::after{
        width: 140px;
        height: 270px;
        right: -110px;
    }
    .how-works-label{
        gap: 5px;
        width: 175px;
        height: 175px;
        left: -70px;
    }
    .how-works-label > p{
        font-size: 14px;
    }
    .how-works-label > span{
        font-size: 20px;
    }
    .how-works-label>img{
        max-width: 45px;
    }
    .compare-content{
        padding: 30px 15px;
        gap: 40px;
    }

    .convenience {
      padding-top: 40px;
    }
    .footer-prod{
        max-width: 400px;
    }

}  

@media(max-width: 560px){
    .reviews-item{
        padding: 20px;
        flex-direction: column;
        max-width: 100%;
        gap: 15px;
    }
    .reviews-item-img{
        display: flex;
        justify-content: center;
    }
    .reviews-item-img > img{
        border-radius: 15px;
    }
    .reviews-item-box{
        padding: 0;
    }
    .reviews-wrapper{
        gap: 20px;
    }
    .underform{
        flex-direction: column;
        gap: 10px;
    }
}


@media(max-width: 480px){
    .form-content{
        padding: 0 15px 30px;
    }
    .form-input{
        height: 70px;
        margin-bottom: 20px;
    }
    .btn{
        height: 70px;
    }
    .for-whom-item > span{
        font-size: 20px;
    }
    .for-whom-item{
        flex-basis: 100%;
    }
    .for-whom-item:last-of-type{
        flex-basis: 100%;
    }
    .feel-item-box > span{
        font-size: 20px;
    }
    .feel-item-img>img{
        width: 40px;
    }
    .feel-item:last-of-type{
        margin-bottom: 25px;
    }
    .why-title-text{
        font-size: 18px;
    }
    .btn-link{
        font-size: 26px;
    }
    .how-works-label{
        position: relative;
        margin: -60px 0 0;
        top: auto;
        left: auto;
    }
    .list__item.true::before{
        width: 20px;
        height: 20px;
        margin-top: 5px;
    }
    .list__item.false::before{
        width: 20px;
        height: 20px;
        margin-top: 5px;
    }
    .dynamic-advice{
        font-size: 16px;
        gap: 20px;
    }
    .dynamic-advice-box{
        padding: 10px 25px;
    }
    .dynamic-item .list .list__item{
        margin-bottom: 10px;
    }
    .compare-content{
        padding: 15px 15px;
        gap: 15px;
    }
    .compare-head{
        padding: 15px;
        font-size: 24px;
    }
    .convenience-right{
        max-width: 100%;
    }
    .compare-content{
        align-items: start;
    }
    .convenience-right-box > span{
        font-size: 20px;
    }
    .convenience-right-item{
        padding: 20px 0 20px 20px;
        margin-bottom: 20px;
    }
    .convenience-right > h2{
        margin-bottom: 20px;
    }
    .convenience .list__item{
        gap: 8px;
        font-size: 16px;
        align-items: start;
    }
    .convenience .title{
        margin-bottom: 20px;
    }
    .footer-logo{
        max-width: 120px;
    }
    .main-benefits{
        gap: 15px;
    }
}

@media(max-width: 410px){
    
    .footer-prod{
        max-width: 300px;
    }
}