*,
*::before,
*::after{
    box-sizing: border-box;
}
a{
    display: inline-block;
    text-decoration: none;
    color: inherit;
}
html {
    scroll-behavior: smooth;
}
body{
    line-height: 1.4;
    font-size: 18px;
    font-family: "Montserrat", sans-serif;
    color: #8B9BB4;
    background: #0a131f;
}
h1, h2, h3, h4{
    font-family: "Playfair", serif;
    text-align: center;
    color: #fff;
    margin-bottom: 30px;
    line-height: 1.2em
}
h1{
    font-size: 38px;        
}
p{
    font-family: "Montserrat", sans-serif;
}
.container{
    max-width: 500px;
    margin: 0 auto;
    background-color: #060D16;
}

.title{
    font-size: 30px;
}
.header{
    background:#060D16 url(../img/block1-bg.jpg) no-repeat;
    color: #fff;
    padding: 40px 10px;
}
.raiting{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 12px 10px;
    background-color: #1E232C;
    border: 1px solid #393F4B;
    border-radius: 20px;
    font-size: 16px;
    max-width: 415px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
}
.header-undertitle{
    margin-bottom: 100px;
    font-family: "Playfair", serif;
    font-size: 26px;
    text-align: center;
}
.header>h1{
    background-color: #661F57;
    padding: 10px;
}
.night-detox, .natural{
    width: 125px;
    height: 125px;
    border-radius: 50%;
    border: 2px solid #EDC549;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #060D16;
    text-align: center;
    font-size: 15px;
    padding: 10px;
}
.night-detox{
    margin-left: auto;
    margin-right: 10px;
}
.night-detox>img{
    max-width: 50%;
}
.natural{
    margin-left: 10px;
    margin-bottom: 200px;
}
.main-button{
    width: 380px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 23px;
    font-weight: 600;
    height: 80px;
    background: #D5B038;
    background: linear-gradient(90deg,rgba(213, 176, 56, 1) 0%, rgba(241, 200, 75, 1) 100%);
    border-radius: 40px;
    color: #040811;
    margin: 0 auto;
    margin-bottom: 15px;
    font-family: "Montserrat", sans-serif;
}


.list{
    background-color: #1E232C;
    max-width: 420px;
    display: flex;
    gap: 15px;
    flex-direction: column;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    border-radius: 20px;
    border: 1px solid #393F4B;
}
.list-item{
    padding-left: 20px;
    display: flex;
    gap: 20px;
}
.list-item::before{
    content: "";
    background-image: url(../img/square.png);
    width: 26px;
    height: 26px;
    display: block;
    flex-shrink: 0;
}
.header .list{
    margin-bottom: 30px;
}
.special{
    text-align: center;
    font-size: 16px;
    color: #8B9BB4;
}
/* END BLOCK MAIN */



/* START BLOCK SLEEP */
.undertitle{
    margin-bottom: 30px;
    text-align: center;
}
.sleep .undertitle{
    padding: 0 20px;
}
.sleep>h2{
    padding: 0 15px;
}
.you-sleep{
    position: relative;
}
.you-sleep>img{
    display: block;
}
.fat-no{
    position: absolute;
    padding: 15px;
    font-family: "Playfair", serif;
    background-color: #661F57;
    color: #fff;
    font-weight: 700;
    font-size: 32px;
    max-width: 480px;
    width: 100%;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.your-bio{
    background-color: #1E232C;
    padding:50px 20px 30px;
}
.es-standarts{
    background: url(../img/es-standart.jpg) 50% 0% no-repeat;
    padding: 40px 0 30px;
    min-height: 500px;
}
.standarts{
    display: flex;
    max-width: 415px;
    gap: 15px;    
    align-items: center;
    background-color: #1E232C;
    border-radius: 45px;
    border: 1px solid #393F4B;
    margin: 0 auto;
    color: #fff;
    margin-bottom: 180px;
    font-size: 17px;
}
.list2> .list-item{
    background-color: #060D16;
    padding: 5px 10px;
}
.list2{
    max-width: 315px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* END BLOCK2 SLEEP */



/* START BLOCK3 NIGHT-PROTOCOL */
.night-protocol{
    padding: 30px 0;
}
.components{
    padding: 0 10px;
    margin-bottom: 60px;
}
.faza-item{
    display: flex;
    align-items: center;
    background-color: #1E232C;
    border: 1px solid #393F4B;
    border-radius: 25px;
    margin-bottom: 20px;
}
.faza-item>img{
    border-radius: 25px 0 0 25px;
}
.faza-text{
    padding: 15px;
}
.faza-text>span{
    color: #4FACFE;
    font-family: "Playfair", serif;
    font-size: 22px;
    margin-bottom: 20px;
    display: block;
}
.day-night{
    background: url(../img/night-protocol-bg.jpg) 50% calc(100% + 70px) no-repeat;
    display: flex;
    gap: 10px;
    text-align: center;
    padding: 0 10px 420px;
}
.day>span, .night>span{
    color: #4FACFE;
}
.day, .night{
    border-radius: 25px;
    background-color: #1E232C;
    border: 1px solid #393F4B;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.day>img{
    width: 106px;
    margin: 0 auto;
    margin-top: -50px;
}
.night>img{
    width: 82px;
    margin: 0 auto;
    margin-top: -40px;
}

.price-block{
    width: 420px;
    margin: 0 auto;
    border-radius: 25px;
    border: 1px solid #393F4B;
    background-color: #1E232C;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    overflow: hidden;
    margin-bottom: 30px;
}
.discount{
    background: #4FACFE;
    line-height: 64px;
    color: #fff;
    font-weight: 700;
    padding: 0 10px;
    min-width: 180px;
    text-transform: uppercase;
    text-align: center;
}
.prices{
    display: flex;
    gap: 10px;
    align-items: center;
    min-height: 80px;
    width: 230px;
    justify-content: center;
    
}
.timer{
    flex-basis: 100%;
    display: flex;
    justify-content: center;
    padding: 15px;
    gap: 10px;
}
.timer>span{
    color: #8B9BB4;
    font-weight: 600;
}
.old{
    color: #fff;
    position: relative;
}
.old::before{
    content: "";
    width: 100%;
    height: 2px;
    display: block;
    position: absolute;
    transform: rotate(-10deg);
    background-color: #000000;
    top: 11px;
}

.new{
    color: #4FACFE;
    font-size: 34px;
    font-weight: 700;
}

/* END BLOCK3 NIGHT-PROTOCOL */


/* START BLOCK4 MORNING */
.morning{
    background: url(../img/morning-bg.png) 0% 100% no-repeat;
    padding: 40px 0 10px;
}
.morning>h2{
    padding: 0 100px;
    margin-bottom: 40px;
}
.morning-days-inner{
    max-width:250px;
    display: flex;
    gap: 100px;
    flex-direction: column;
    margin-left: auto;
    padding: 20px 0 20px 30px;
    position: relative;
}
.morning-days-inner::before{
    content: "";
    width: 5px;
    height: 100%;
    background-color: #D5B038;
    border-radius: 10px;
    display: block;
    position: absolute;
    top: 0;
    left: -1px;
}
.morning-item{
    max-width: 190px;
    line-height: 1.6;
    position: relative;
}
.morning-item:before{
    content: "";
    width: 23px;
    height: 23px;
    display: block;
    background-color: #EDC548;
    border-radius: 50%;
    position: absolute;
    top: 5px;
    left: -40px;
}
.morning-item>span{
    color: #4FACFE;
    margin-bottom: 15px;
    display: inline-block;
}
/* END BLOCK4 MORNING  */


/* START BLOCK5 REVIEWS */
.reviews{
    background-color: #1E232C;
    padding: 50px 10px;
}
.reviews>h2{
    margin-bottom: 50px;
}
.reviews-inner{
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.reviews-item{
    display: flex;
    flex-direction: column;
    gap: 30px;
    background-color: #060D16;
    border-radius: 20px;
    padding: 30px;
    text-align: center;
}
.reviews-title{
    font-size: 24px;
}
.reviews-img{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    justify-content: center;
}
.reviews-item>p{
    color: #fff;
}
.reviews-img>img:first-of-type{
    border-radius: 50%;
}
/* END BLOCK5 REVIEWS */



/* START BLOCK6 ORDER */
.order{
    padding: 30px 10px;
    background: url(../img/order.png) 50% 0% no-repeat;
}
.order>h2{
    margin-bottom: 500px;
}
.order-form{
    padding: 30px 15px;
    background-color: #1E232C;
    border-radius: 20px;
    margin-bottom: 20px;
}
.order-title{
    font-size: 24px;
}
.status-text{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 16px;
}
.status-text>p:last-of-type{
    color: #FC1C0A;
    font-weight: 500;
}
.indicator{
    background-color: #808FA6;
    border-radius: 10px;
    margin-bottom: 30px;
}
.indicator-gradient{
    width: 385px;
    height: 12px;
    border-radius: 10px;
    background: #EDC548;
    background: linear-gradient(90deg,rgba(237, 197, 72, 1) 0%, rgba(255, 0, 0, 1) 100%);
}
.oder-prices{
    display: flex;
    justify-content: center;
    gap: 15px;
    align-items: center;
    margin-bottom: 30px;
}

.order-discount{
    text-transform: uppercase;
    padding: 4px;
    background-color: #4FACFE;
    max-width: 260px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-weight: 700;
    margin:  0 auto 30px;
}
.form{
    padding: 0 20px;
}
.form-input{
    width: 100%;
    background-color: #fff;
    height: 80px;
    border: none;
    border-radius: 40px;
    outline: none;
    text-align: center;
    margin-bottom: 20px;
    display: inline-block;
    font-family: "Montserrat", sans-serif;
    font-size: 22px;
}
.form-input::placeholder{
    font-size: 20px;
    color: #8B9BB4;
}
.form>button{
    width: 100%;
}

/* END BLOCK6 ORDER */

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