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

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

}
img{
    display: block;
}
h1, h2, h3, h4, h5, h6{
      font-family: "Gilroy", sans-serif;
      font-weight: 700;
      line-height: 1.2;
}
button{
    font-family: "Gilroy", sans-serif;
    border: none;
    cursor: pointer;
}   

.shadow{
    box-shadow: 0 0 38px rgba(9, 27, 46, 0.2);
}
:root{
    --white: #fff;
    --purple: #8374C7;
    --title:#131313;
    --yellow:#FBD56E;
}
section{
    padding: 60px 0;
}
.white{
    color: var(--white);
}
.title{
    font-size: 30px;
    text-transform: uppercase;
    color: var(--title);
}
body{
    font-family: "Gilroy", sans-serif;
    line-height: 1.3;
    color: var(--title);
    font-size: 20px;
}
a{
    text-decoration: none;
    color: inherit;
}
.container{
    max-width: 1300px;
    padding: 0 10px;
    margin: 0 auto;
    width: 100%;
}

.header{
    
}
.header-inner{
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.header-ostatok{
    display: flex;
    gap: 15px;
    align-items: center;
    font-size: 18px;
}
.header-ostatok-right{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.header-disk{
    display: flex;
    gap: 10px;
    align-items: center;
}
.header-disk>p:first-of-type{
    color: var(--purple);
    font-weight: 900;
    text-transform: uppercase;
}
.header-disk>p:last-of-type{
    font-weight: 700;
    color: var(--white);
    background-color: var(--title);
    border-radius: 10px;
    padding: 5px 10px;
}
.header-logo{
    background-color: var(--purple);
    border-radius: 0 0 10px 10px;
    padding: 25px 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.header-reviews{
    display: flex;
    gap: 10px;
    align-items: center;
}
.header-reviews>img{
    max-width: 100px;
}
.header-reviews>p>span{
    color: var(--purple);
    font-size: 22px;
    text-transform: uppercase;
    font-weight: 900;
}















/* START BLOCK HERo */
.hero{
    background: url(../images/hero-bg2.png) calc(50% - 480px) calc(50% + 150px) no-repeat,
                url(../images/hero-bg.png) 50% 100% no-repeat;
}

.hero-title{
    font-size: 38px;
    margin-bottom: 50px;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.2;
}
.hero-title>span{
    color: var(--purple);
}
.hero-inner{
    display: flex;
    justify-content: space-between;
    position: relative;
}
.tetya{
    position: absolute;
    top: calc(50% - 345px);
    left: calc(50% - 190px);
    max-width: 400px;
}
.hero-product{
    display: flex;
    align-items: center;
    max-width: 350px;
    margin-top: auto;
    z-index: 22;
}
.hero-product>img:last-of-type{
    margin-left: -65px;
    max-width: 125px;
    
}

.hero-right{
    display: flex;
    flex-direction: column;
    margin-left: auto;
}
.hero-list{
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 420px;
    margin-left: auto;
    margin-bottom: 100px;
    z-index: 99;
}
.hero-list-item{
    display: flex;
    align-items: center;
    gap: 20px;
}
.hero-list-img{
    padding: 10px;
    border-radius: 50%;
    background-color: var(--purple);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}
.hero-list-item>p>span{
    color: var(--purple);
    font-weight: 700;
}
.hero-text{
    max-width: 620px;
    padding: 30px 30px 30px 100px;
    background-color: var(--purple);
    color: var(--white);
    border-radius: 15px;
    margin-bottom: 55px;
    margin-left: auto;
}
.hero-price-block{
    display: flex;
    align-items: center;
    gap: 45px;
    margin-bottom: 20px;
    z-index: 99;
    justify-content: end;
}
.hero-price{
    display: flex;
    align-items: center;
    padding-left: 25px;
    gap: 20px;
    max-width: 315px;
    width: 100%;
    background-color: var(--white);
    border-radius: 45px;
    height: 90px;
    text-align: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.hero-price>div{
    width: 50%;
}
.price-old{
    font-size: 18px;
}
.price-new{
    background-color: var(--purple);
    color: var(--white);
    padding: 10px 25px;
    border-radius: 45px;
    font-size: 24px;
    font-weight: 700;
    height: 90px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 180px;
    width: 100%;
}
.btn{
    padding: 10px 35px;
    border-radius: 45px;
    background-color: var(--yellow);
    max-width: 480px;
    text-align: center;
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 25px;
    transition: 0.25s;
    flex-shrink: 0;
}
.btn:hover{
    background-color: #f5bf2c;
}
.hero-delivery{
    display: flex;
    gap: 30px;
    align-items: center;
    font-size: 16px;
    margin-left: auto;
}
.hero-delivery>div{
    display: flex;
    align-items: center;
    gap: 10px;
}
/* END BLOCK HERO */

/* START BLOCK FLAWS */
.flaws-top{
    display: flex;
    border-radius: 15px;
    margin-bottom: 50px;
    
}
.flaws-top>div{
    width: 50%;
}
.flaws-top-left{
    background-color: var(--purple);
    padding: 10px 30px;
    display: flex;
    font-size: 30px;
    text-transform: uppercase;
    justify-content: center;
    align-items: center;
    color: var(--white);
    border-radius: 15px 0 0 15px;
    line-height: 1.4;
}
.flaws-top-right{
    background-color: var(--white);
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: start;
    border-radius: 0 15px 15px 0;
}

.flaws-inner{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 40px;
}
.flaws-item{
    max-width: 630px;
    display: flex;
    align-items: center;
    gap: 40px;
    border-radius: 20px;
}
.flaws-item>img{
    border-radius: 20px 0 0 20px;
}
.flaws-text{
    padding: 20px 20px 20px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.flaws-text>p:first-of-type{
    color: var(--purple);
    font-weight: 700;
    font-size: 22px;
}
.flaws .note{
    font-size: 30px;
    text-align: center;
    font-weight: 900;
}
.flaws .note>span{
    color: var(--purple);
}
/* END BLOCK FLAWS */




/* START BLOCK WHY */
.why{
    background: url(../images/why-bg2.png) 70% 100% no-repeat,
    url(../images/why-bg.png) 50% 50% no-repeat;
    padding: 150px 0 390px;
}
.why h2{
    color: var(--white);
}
.why .container{
    position: relative;
}
.why-img{
    position: absolute;
    top: 57px;
    left: calc(50% - 700px);
}
.why-block{
    display: flex;
    flex-direction: column;
    max-width: 865px;
    margin-left: auto;
}
.why-top{
    background-color: var(--purple);
    padding: 35px;
    border-radius: 15px 15px 0 0;

}
.why-text{
    display: flex;
    flex-direction: column;
    padding: 40px;
    gap: 30px;
    border-radius: 0 0 15px 15px;
    background-color: var(--white);
}

/* END BLOCK WHY */


/* START Block sostav */
.sostav{
    background:
    linear-gradient(rgba(67, 13, 155, 0.6), rgba(37, 25, 35, 0.7)),
     url(../images/sostav-bg.png) 50% 100% no-repeat;
}
.sostav-inner{
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
}
.sostav-item{
    display: flex;
    max-width: 300px;
    flex-direction: column;
    gap: 20px;
    color: var(--white);
    text-align: center;
}
.sostav-item>img{
    max-width: 280px;
    border-radius: 50%;
    margin: 0 auto;
}
.sostav-order{
    padding: 40px;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    align-items: center;
    background-color: var(--white);
    border-radius: 20px;
}
.sostav-order>p{
    max-width: 800px;
}
.sostav-order>p>span{
    color: var(--purple);
    font-weight: 900;
}
/* END Block sostav */
.carousel_section{
    padding: 0;
}
img.panorama{
    display: inline-block;
}



/* START BLOCK EXPERT */
.expert{
    padding-bottom: 0;
}
.expert-inner{
    border-radius: 15px ;
}
.expert-top{
    display: flex;
    gap: 70px;
    padding: 30px;
}
.expert-left{
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.expert-left>img{
    border-radius: 50%;
}
.opinion{
    padding: 15px;
    background-color: var(--purple);
    color: var(--white);
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 8px;
}
.expert-right{
    display: flex;
    flex-direction: column;
    gap: 30px;
    line-height: 1.4;
}
.expert-right>div{
    padding: 15px;
    background-color: #C7EBB7;
    font-weight: 700;
    border-radius: 8px;
}
.doctor-name{
    background-color: var(--purple);
    color: var(--white);
    border-radius: 15px;
    padding: 30px;
    padding-left: 340px;
}

/* END BLOCK EXPERT */

.result{
    background: url(../images/results-bg.png) 50% calc(50% - 25px) no-repeat;
}
.result-block{
    display: flex;
    border-radius: 15px;
    margin-bottom: 35px;

}
.result-left{
    padding: 30px;
    color: var(--white);
    width: 40%;
    background-color: var(--purple);
    border-radius: 15px 0 0 15px;
}
.result-left h2{
    color: var(--white);
}
.results-right{
    padding: 30px;
    width: 60%;
    background-color: var(--white);
    border-radius: 0 15px 15px 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.result-inner{
    display: flex;
    flex-direction: column;
    gap: 50px;
}
.result-item{
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 450px;
}
.result-num{
    display: flex;
    font-weight: 700;
    justify-content: center;
    align-items: center;
    width: 76px;
    height: 76px;
    background-color: #C7EBB7;
    border: 6px solid #E0EED9;  
    border-radius: 50%;
    flex-shrink: 0;
}
.result-item:nth-child(1){
    margin-left: 60px;
}
.result-item:nth-child(2){
    margin-left: auto;
}
.result-item:nth-child(4){
    margin-left: auto;
    max-width: 400px;
}
.result-item:nth-child(3){
    text-align: right;
    max-width: 400px;
    margin-left: 50px;
}
.result-item:nth-child(5){
    text-align: right;
}



.reviews h2{
    text-align: center;
    margin-bottom: 50px;
}
.reviews h2>span{
    color: var(--purple);
}
.swiper {
      width: 100%;
    }
    .swiper-slide {
      display: flex;
      justify-content: center;
      align-items: center;
      background: #fff;
      border-radius: 10px;
      font-size: 24px;
      font-weight: bold;
      color: #333;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      overflow: hidden;
    }
    .swiper-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }





/* START BLOCK ORDER */
.order-inner{
    display: flex;
    align-items: center;
    gap: 100px;
    justify-content: space-between;
    position: relative;
}
.order-block{
    background-color: var(--purple);
}
.order-left{
    display: flex;
    flex-direction: column;
    gap: 35px;
    max-width: 505px;
    z-index: 99;
}
.order-left h2{
    color: var(--white);
}
.attencion{
    background-color: var(--white);
    color: var(--purple);
    font-weight: 700;
    padding: 15px ;
    border-radius: 15px;
    text-align: center;
}
.order-disc{
    display: flex;
    align-items:center ;
    gap: 10px;
    color: var(--white);
    flex-direction: column;
}
.order-disc>div{
    background-color: var(--yellow);
    font-weight: 700;
    padding: 10px;
    border-radius: 10px;
    color: var(--title);
    font-size: 16px;
    text-align: center;
}
.order-benefits{
    background-color: var(--white);
    padding: 20px;
    border-radius: 15px;
}
.order-benefits .hero-list{
    margin-left: 0;
    margin-bottom: 0;
}
.order-benefits>p{
    font-weight: 900;
    margin-bottom: 20px;
    font-size: 18px;
    text-align: center;
}


.order-right{
    max-width: 500px;
    background-color: var(--white);
    padding: 30px;
    border-radius: 20px;
    z-index: 99;
}
.timer{
    background-color: var(--purple);
    color: var(--white);
    text-align: center;
    padding: 10px;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 10px;
    margin-bottom: 30px;
}
.price-block{
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: center;
    margin-bottom: 30px;
}
.old-price{
    font-weight: 900;
    text-align: center;
}
.new-price{
    text-align: center;
}
.new-price>span{
    color: var(--purple);
    font-weight: 900;
    font-size: 26px;
}
.form{
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}
.form-input{
    height: 90px;
    border-radius: 45px;
    width: 100%;
    display: block;
    background-color: #EDEDED;
    padding: 25px;
    font-size: 20px;
    text-align: center;
    font-family: "Gilroy", sans-serif;
    border: none;
    color: var(--title);
}
.form-input::placeholder{
    color: var(--title);
}
.order-right .note{
    font-size: 16px;
}

.product{
    position: absolute;
    top: calc(50% - 272px);
    left: calc(50% - 273px );
    z-index: 0;
    max-width: 600px;
}


/* END BLOCK ORDER */



.cpu{
padding: 10px 0;
text-align: center;
}
.cpu img{
display:block;
margin: 0 auto;
width: auto;
}
.cpu a{
display: inline-block;
margin: 5px;
color: var(--purple);
font-size: 16px;
}





















@media(max-width:1299px){
    .container{
        max-width: 1024px;
    }
    .hero-price-block{
        flex-direction: column;
        gap: 30px;
        margin-left: auto;
    }
    .hero-list{
        margin-bottom: 50px;
    }
    .hero-text{
        margin-bottom: 35px;
    }
    .tetya{
        top: calc(50% - 185px);
        left: calc(50% - 140px);
        max-width: 280px;
    }
    .hero-text{
        padding: 30px;
    }
    .header-ostatok-right{
        gap: 0;
    }
    .header-logo{
        padding: 18px;
    }
    .header-reviews{
        text-align: right;
        gap: 0;
    }
    .header-reviews>p{
        max-width: 150px;
    }
    .flaws-item{
        max-width: 100%;
    }
    .flaws-item>img{
        max-height: 230px;
    }
    .why{
        padding: 40px 0 330px;
    }
    .why-top{
        z-index: 99;
    }
    .why-text{
        z-index: 99;
    }
    .why-img{
        top: -3px;
    }
    .product{
        left: calc(50% - 180px );
    }
}


@media(max-width:1023px){
    .container{
        max-width: 768px;
    }
    .hero{
    background: url(../images/hero-bg2.png) calc(50% - 430px) calc(50% + 100px) no-repeat,
                url(../images/hero-bg.png) 50% 100%;
    }
    .hero-inner{
        gap: 40px;
    }
    .header-reviews{
        display: none;
    }
    .hero-title{
        font-size: 33px;
    }
    .hero-product{
        max-width: 280px;
        margin-top: 0;
    }
    .tetya{
        display: none;
    }
    .hero-product > img:last-of-type{
        margin-top: 150px;
        margin-left: -90px;
    }
    .hero-list{
        margin-bottom: 30px;
    }
    .why{
        background:  url(../images/why-bg.png) 50% 50% no-repeat;
        padding: 50px 0;
    }
    .why-block{
        width: 70%;
    }
    .why-img{
        max-width: 400px;
        left: calc(50% - 502px);
        bottom: -50px;
        top: auto;
    }
    .sostav-inner{
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }
    .result-item{
        max-width: 275px;
    }
    .result-inner{
        gap: 30px;
    }
    .result-item:nth-child(3){
        max-width: 350px;
        margin-left: 0;
    }
    .result-item:nth-child(1){
        margin-left: 0;
    }
    .result-item:nth-child(4){
        max-width: 300px;
    }
    .order-inner{
        gap: 20px;
    }
    .order-right{
        margin-top: auto;
    }
    .product{
        top: calc(50% - 450px);
        left: calc(50% - -18px );
        max-width: 150px;
    }
    .order-left{
        gap: 25px;
    }
    .order-disc{
        flex-direction: column;
    }
    
}

@media(max-width:767px){
    .container{
        max-width: 480px;
    }
    .hero{
        background:url(../images/hero-bg.png) 50% 0% no-repeat;
    }
    .hero-inner{
        flex-direction: column;
    }
    .tetya {
        display: block;
        top: calc(50% - 601px);
        left: calc(50% - -9px);
    }
    .header-ostatok{
        display: none;
    }
    .header-logo{
        margin: 0 auto;
    }
    .hero-price-block{
        gap: 18px;
        margin: 0 auto 20px;
    }
    .hero-delivery{
        flex-direction: column;
        gap: 15px;
        margin: 0 auto;
    }
    .flaws-top{
        flex-direction: column;
    }
    .flaws-top>div{
        width: 100%;
    }
    .flaws-top-left{
        border-radius: 15px;
        font-size: 25px;
        padding: 30px;
    }
    .flaws-top-right{
        border-radius: 0 0 15px 15px;
    }
    .flaws-item{
        flex-direction: column;
        gap: 20px;
        padding: 20px;
    }
    .flaws-item > img{
        border-radius: 20px;
        max-height: 100%;
    }
    .flaws-text{
        padding: 5px;
    }
    .why-block{
        width: 100%;
    }
    .sostav-item{
        max-width: 100%;
    }
    .sostav-order{
        flex-direction: column;
    }
    .expert-top{
        flex-direction: column;
        gap: 35px;
    }
    .expert-left > img{
        max-width: 220px;
        margin: 0 auto;
    }
    .doctor-name{
        padding-left: 30px;
    }
    .result-left{
        padding: 20px;
    }
    .result-right{
        padding: 20px;
    }
    .result-item{
        margin: 0 auto;
        max-width: 100%;
        font-weight: 700;
    }
    .result-block{
        flex-direction: column;
    }
    .result-left{
        width: 100%;
        border-radius: 15px 15px 0 0;
    }
    .results-right{
        width: 100%;
        border-radius: 0 0 15px 15px;
    }
    .result{
        background: url(../images/results-bg.png) 50% calc(50% - -132px) no-repeat;
        background-size: 1000px;
    }
    .order-inner{
        flex-direction: column;
    }
    .order-right{
        padding: 20px;
    }
    .product{
        position: static;
        max-width: 250px;
    }

    
}


@media(max-width:480px){
    section{
        padding: 40px 0;
    }
    .hero-title{
        font-size: 30px;
    }
    .tetya{
        top: calc(50% - 654px);
        left: calc(50% - -17px);
    }
    .hero-delivery{
        align-items: start;
    }
    .why{
        padding: 40px 0;
    }
    .why-top{
        padding: 20px;
    }
    .title{
        font-size: 26px;
    }
    .why-text{
        padding: 20px;
    }
    .why-img{
        display: none;
    }
    .result {
        background:
            linear-gradient(
                rgba(255,255,255,0.7),
                rgba(255,255,255,0.7)
            ),
            url(../images/results-bg.png) 50% calc(50% + 132px) no-repeat;

        background-size: cover, 1000px;
    }
    .result-item:nth-child(1){
        text-align: start;
    }
    .result-num{
        order: 1;
    }
    .result-item>p{
        order: 2;
        text-align: start;
    }
    .result-item{
        margin-left: 0;
    }
    .result-item:nth-child(4){
        max-width: 100%;
    }
    .result-item:nth-child(3){
        max-width: 100%;
    }
    .expert-top{
        padding: 20px;
    }
    .doctor-name{
        padding: 20px;
    }
    .sostav-order{
        padding: 25px;
    }
    
}