html, body {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

body {
    background-color: #1D1D1D;
}

@font-face {
    font-family: "Unbounded";  
    src: url("Unbounded-VariableFont_wght.ttf"); 
     }

* {
    margin: 0;
    padding: 0;
    font-family: Unbounded, sans-serif;
}

.container {
    margin: 0 auto;
    padding: 0;
    width: 1620px;
}

a:active,
a:hover,
a, h1, h2, h3, h4, span, p, li, button {
  text-decoration: none;
  color: #fff;
  outline: none;
  margin-block-start: 0;
  margin-block-end: 0;
  display: block;
  /* max-width: max-content; */
}

b {
    color: #6930D1;
}

h2 {
    font-size: 50px;
    font-weight: 400;
    letter-spacing: 1.25px;
    text-transform: uppercase;
}

p {
    color: #DFDFDF;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.375px;
}

.header {
     padding-top: 38px;
     background: url(/img/main-bg.png);
     background-repeat: no-repeat;
     background-size: cover ;
     overflow: hidden
}

.container-header {
    display: flex;
    justify-content: space-between;
}

.logo {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 0.75px;
}

.offer-inner-wrapper .to-comand {
    margin-top: 50px;
}

.to-comand {
    padding: 20px 0;
    text-align: center;
    width: 280px;
    border: 2px solid #FFF;
}

.norm {
    border: 2px solid #6930D1;
    background: #6930D1;
}

.offer-outer-wrapper {
    margin-top: 119px;
    display: flex;
    justify-content: space-between;
}

.img-wrapper {
    position: relative;
}

.offer-img {
    width: 543px;
    height: 681px;
    
}

.shadow-block {
    width: 663px;
    height: 172px;
    background: #000;
    filter: blur(35px);
    position: absolute;
    top: 87%;
    left: -12%;
}

h1 {
    width: 1043px;
    font-size: 60px;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.offer-text {
    width: 660px;
}

.btn-wrapper {
    margin-top: 50px;
    display: flex;
    gap: 50px;
}

.btn-wrapper span {
    width: 310px;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.375px;
    display: block;
}

.btn-wrapper span b {
    color: #D13030;
}

.mdb {
    display: none;
}

/*--------------------------------------------- BREAKTHROUGH SECTION STYLES */

.breaktrough {
    padding: 110px 0;
}

.breaktrough-outer-wrapper {
    display: flex;
    justify-content: space-between;
}

.breaktrough-inner-text-wrapper {
    width: 750px;
}

.breakthrough-text {
    width: 528px;
}

.breaktrough-subtitle {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.375px;
    margin: 50px 0 20px;
}
.breakthrough-text:last-of-type{
    margin-top: 15px;
    margin-bottom: 50px;
}

.breakthrough-advantages-list {
    display: flex;
    padding: 30px 0 30px 80px;
    flex-direction: column;
    justify-content: center;
    gap: 32px;
    border-left: 1px solid rgba(255, 255, 255, 0.50);
}
.breakthrough-advantages-item {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 233px;
}
.breakthrough-advantages-item-img {
    width: 40px;
    height: 40px;
}
.breakthrough-advantages-text {
    color: #DFDFDF;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.375px;
}

.breakthrough-img-wrapper {
    position: relative;
    width: 378px;
    height: 545px;
}

.breaktrough-img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 2;
    left: 0;
}

.img-shadow-circle {
    position: absolute;
    border-radius: 1000px;
    background: #6930D1;
    filter: blur(75px);
    width: 361px;
    height: 361px;
    top: 50px;
    left: 0;
    z-index: 1;
}

/*--------------------------------------------- KAIF SECTION STYLES */

.kaif {
    padding-bottom: 110px;
}

.kaif .container {
    display: flex;
    justify-content: space-between;
}

.kaif-text-wrapper {
    width: 530px;
}

.kaif h2 {
    margin-bottom: 50px;
}

.kaif-text {
    margin-bottom: 20px;
}

.kaif .norm {
    margin-top: 50px;
}

.kaif-outer-img-wrapper {
    display: flex;
    gap: 20px;
}

.kaif-inner-img-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.kaif-img {
    width: 527px;
    height: 377px;
}

.kaif-inner-img-wrapper .kaif-img {
    width: 390px;
    height: 179px;
}

/*--------------------------------------------- CONDITIONS SECTION STYLES */

.conditions {
    padding-bottom: 110px;
}

.conditions .container {
    display: flex;
    justify-content: space-between;
}

.conditions h2 {
    margin-bottom: 50px;
}

.conditions-text-wrapper {
    width: 640px;
}
.conditions-text {
    margin-bottom: 20px;
}
.conditions-img {
    width: 937px;
    height: 509px;
}

.conditions .norm {
    margin-top: 50px;
}

/*--------------------------------------------- QUIZ STYLES */

.quiz {
    padding-bottom: 80px;
}

.quiz h2 {
    width: 1090px;
    text-align: center;
}

.quiz-text {
    width: 410px;
    text-align: center;
}

.quiz .container {
    display: flex;
    flex-direction: column;
    gap: 50px;
    align-items: center;
}

/*--------------------------------------------- FOOTER STYLES */

.footer {
    padding: 60px 0;
    background: #171717;
}
footer .df {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}
.footer-logo-wrapper {
    display: flex;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
}

.footer-logo, .footer-logo b {
    margin-right: 5px;
    font-size: 30px;;
    font-weight: 800;
    letter-spacing: 0.75px;
}

.footer-logo-text {
    margin-left: 5px;
    font-size: 30px;
    font-weight: 300;
    letter-spacing: 0.75px;
}

.vk-link img {
    width: 50px;
    height: 50px;
}

/*--------------------------------------------- ADAPTIVES ---------------------------------- */

@media (max-width: 1625px) {
    .container {
        width: 1300px;
    }

    h1 {
        width: 727px;
    }

    .breaktrough-inner-text-wrapper {
        width: 530px;
    }

    .breakthrough-advantages-list {
        padding: 30px 0 30px 45px;
        height: 490px;
    }

    .kaif-img {
        width: 420px;
        height: 377px;
    }

    .kaif-inner-img-wrapper .kaif-img {
        width: 310px;
        height: 179px;
    }

    .conditions-img {
        width: 617px;
        height: 490px;
    }

    .conditions-text {
        margin-bottom: 15px;
    }
}

@media (max-width: 1300px) {
    .container {
        width: auto;
        padding: 0 15px;
    }

    .offer-outer-wrapper {
        margin-top: 119px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-content: center;
        align-items: center;
    }

    h1, .offer-text {
        text-align: center;
        margin: 0 auto;
    }

    .offer-text  {
        margin-top: 30px;
    }

    header .to-comand.norm {
        margin: 0 auto;
        margin-top: 50px;
    }

    .btn-wrapper {
        align-items: center;
    }

    .offer-img {
        margin-top: 60px;
    }

    .breaktrough-outer-wrapper {
        flex-wrap: wrap;
        row-gap: 50px;
        justify-content: space-evenly;
    }

    .breaktrough-outer-wrapper .mdn {
        display: none;
    }

    .breaktrough .mdb {
        display: block;
        margin-top: 40px;
    }

    .breaktrough-inner-text-wrapper {
        width: 100%;
    }

    .breakthrough-text {
        width: 100%;
    }

    .kaif .container {
        flex-wrap: wrap;
        gap: 50px;
        justify-content: center;
    }

    .kaif-text-wrapper {
        width: 100%;
    }

    .kaif-img {
        width: auto;
        height: auto;
    }

    .kaif-inner-img-wrapper .kaif-img {
        width: auto;
        height: auto;
    }

    .conditions .container {
        flex-direction: column;
        gap: 50px;
    }

    .conditions-text-wrapper {
        width: 100%;
    }

    .conditions-img {
        width: 100%;
        height: auto;
    }
}

@media (max-width: 1200px) {
    .quiz h2 {
        width: 100%;
    }

    footer .to-comand {
        visibility: hidden;
        display: none;
    }
}

@media (max-width: 940px) {

    .kaif-img {
        width: 400px;
    }

    .kaif-inner-img-wrapper .kaif-img {
        width: 295px;
    }
}

@media (max-width:768px)  {
    .kaif-outer-img-wrapper {
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
    }

    .kaif-img {
        width: auto;
    }

    .kaif-inner-img-wrapper .kaif-img {
        width: 100%;
    }

    h1 {
        font-size: 50px;
    }

    h1, .offer-text {
        width: auto;
        text-align: left;
    }
}

@media (max-width:730px) {

    .btn-wrapper {
        flex-direction: column;
        gap: 20px;
    }

    .breakthrough-advantages-list {
        padding: 0;
        border: none;
        height: auto;
    }

    .img-wrapper {
        margin-top: 30px;
    }

    .breakthrough-img-wrapper {
        margin: 0 auto;
        height: 582px;
    }

    .breaktrough-outer-wrapper {
        row-gap: 35px;
        flex-direction: column;
    }

    .kaif-img {
        width: 100%;
    }

    .offer-img {
        display: block;
        width: 70%;
        height: auto;
        margin: 0 auto;
    }

}

@media (max-width:570px) {
    .header .ghost {
        visibility: hidden;
        display: none;
    }
}

@media (max-width:520px)  {

    h1 {
        font-size: 26px;
    }

    h2 {
        font-size: 24px;
    }

    .to-comand {
        width: 70%;
        text-align: center;
        margin: 0 auto;
    }

    .img-shadow-circle {
        width: 270px;
        height: 270px;
        left: 45px;
    }

    .quiz-text {
        width: 100%;
    }

    .offer-outer-wrapper {
        margin-top: 70px;
    }

    .breaktrough {
        padding: 80px 0;
    }

    .kaif, .conditions{
        padding-bottom: 80px;
    }

    .quiz {
        padding-bottom: 60px;
    }

    .footer-logo, .footer-logo b, .footer-logo-text {
        font-size: 20px;
    }

}

@media (max-width:480px) {
    .breakthrough-img-wrapper{
        width: 290px;
        height: 480px;
    }

    .img-shadow-circle {
        width: 219px;
        height: 152px;
    }

}

@media (max-width:420px) {
    .to-comand {
        width: 85%;
    }
}