@font-face {
    font-family: Roboto;
    src: url('/landings/fonts/Roboto/Roboto-Medium.ttf');
    font-weight: 500;
}
@font-face {
    font-family: Roboto;
    src: url('/landings/fonts/Roboto/Roboto-Regular.ttf');
    font-weight: 400;
}
@font-face {
    font-family: Roboto;
    src: url('/landings/fonts/Roboto/Roboto-Regular.ttf');
    font-weight: 400;
}
@font-face {
    font-family: Roboto;
    src: url('/landings/fonts/Roboto/Roboto-Bold.ttf');
    font-weight: 700;
}
@font-face {
    font-family: Roboto;
    src: url('/landings/fonts/Roboto/Roboto-Light.ttf');
    font-weight: 300;
}
body,html{
    overflow-x: hidden;
}
h2{
    font-weight: 700;
    font-size: 28px;
    line-height: 36px;
}
body *{
    color: #333;
    font-family: Roboto, sans-serif;
}
body.pcs{
    background: #EDF1F7;
}
body{
    padding: 24px 0;
    margin: 0;
}
.main-wrapper{
    max-width: 1136px;
    display: block;
    margin: 0 auto;
}
.header{
    background: #8939FD;
    display: flex;
    padding: 16px 73px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-radius: 40px;
    height: 122px;
}
.header .menu{
    gap: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header .gamburger{
    display: none;
}
.menu a{
    color: #FFF;
    text-align: justify;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
    letter-spacing: 0.15px;
    padding: 8px 12px;
    gap: 10px;
    border-radius: 30px;
    border: 1px solid #FFF;
    text-decoration: none;
    transition: all .1s ease-in-out;
}
.menu a:hover{
    background: white;
    color: #8939FD;
}
.phone{
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.phoneImage img{
    width: 28px;
    height: 28px;
}
.phoneImage{
    display: flex;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 1px solid #FFF;
    background: #FFF;
}
.phoneNumber{
    margin-left: 12px;
    color: #FFF;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
    letter-spacing: 0.15px;
}
.primaryButton, .secondaryButton{
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px; /* 127.273% */
    padding: 15px 48px;
    border-radius: 40px;
    text-decoration: none;
    text-align: center;
    display: inline-block;
}
.secondaryButton{
    border: 1px solid #F50882;
    background: #FFF5FA;
    color: #F50882;
}
.primaryButton{
    border: 1px solid #F50882;
    background: #F50882;
    color: #FFF;
}
.primaryButton:hover{
    background: #FF2796;
}
.secondaryButton:hover{
    background: #FDCEE6;
}
.mainBlock{
    padding: 64px 72px;
    border-radius: 40px;
    background: #FFF;
    margin: 24px 0;
    position: relative;
}
.mainBlock .blockContent, .mainBlock .logoContainer{
    width: 483px;
}
.mainBlock .blockContent{
    margin: 60px 0;
}
.mainBlock .blockContent > p{
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
}
.mainBlock .logoContainer p{
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.15px;
    margin: 0;
}
.mainBlock .logoContainer img{
    margin: 0 0 12px 0;
}
.mainBlock h2{
    color: #8939FD;
    font-size: 57px;
    line-height: 64px;
    letter-spacing: -0.25px;
    margin: 0 0 24px 0;
}
.mainBlock .blockButton{
    display: inline-flex;
    padding: 24px 48px;
    align-items: center;
    justify-content: center;
    gap: 24px;
    border-radius: 40px;
    background: #FFF;
    box-shadow: 8px 8px 24px 0 rgba(0, 0, 0, 0.10);
    position: relative;
    z-index: 20;
}
.mainBlock .blockButton p{
    font-size: 22px;
    font-weight: 400;
    line-height: 28px;
}
.mainBlock .blockButton p strong{
    font-weight: 700;
}
.mainBlock .primaryButton{
    width: 364px;
}
.mainBlock .imageContainer{
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 10;
}

.countersBlock{
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 24px;
    align-self: stretch;
}
.countersBlock .counter{
    display: flex;
    padding: 24px 48px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    flex: 1 0 0;
    border-radius: 40px;
    background: #FFF;
}
.countersBlock .counter h3{
    color: #8939FD;
    font-size: 45px;
    font-style: normal;
    font-weight: 700;
    line-height: 52px; /* 115.556% */
    margin: 0 0 4px 0;
}
.countersBlock .counter h3 span{
    font-size: 36px;
    color: inherit;
    line-height: 44px;
}
.countersBlock .counter p{
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.15px;
    margin: 0;
}
.advantagesBlock{
    border-radius: 40px;
    background: url('/landings/images/pcs/well-teach-ellipse.png') #FFF;
    background-repeat: no-repeat;
    background-position: top left;
    padding: 0 73px 64px 73px;
    margin: 24px 0;
}
.advantagesBlock .wellTeach{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}
.advantagesBlock .wellTeach .wellTeachImage, .advantagesBlock .wellTeach .wellTeachContent{
    width: 100%;
}
.advantagesBlock .wellTeach .wellTeachImage{
    padding-top: 56px;
}
.advantagesBlock .wellTeach .wellTeachContent{
    padding: 45px 0;
}
.advantagesBlock .wellTeach .wellTeachContent h2{
    margin: 0 0 24px 0;
}
.advantagesBlock .wellTeach .wellTeachContent p{
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.15px;
    margin: 0 0 10px 0;
}
.advantagesBlock .wellTeach .wellTeachContent .list{
    margin: 10px 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.advantagesBlock .wellTeach .wellTeachContent .list p{
    border-radius: 20px;
    background: #FAE234;
    padding: 8px 16px 8px 30px;
    display: inline-flex;
    width: auto;
    position: relative;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
    letter-spacing: 0.15px;
    margin: 0;
}

.advantagesBlock .wellTeach .wellTeachContent .list p:before{
    content: '•';
    font-size: 24px;
    position: absolute;
    left: 16px;
    top: 9px;
}

.advantagesBlock .afterTeach h2{
    text-align: center;
    margin: 48px 0;
}
.advantagesBlock .afterTeach .listAfterTeach{
    margin: 48px 0;
    padding: 0 24px;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
}
.advantagesBlock .afterTeach .listAfterTeach .item{
    display: flex;
    padding: 24px 40px;
    align-items: center;
    gap: 36px;
    align-self: stretch;
    border-radius: 40px;
    background: #FFF;
    box-shadow: 8px 8px 24px 0 rgba(0, 0, 0, 0.10);
    width: calc(50% - 12px);
}
.advantagesBlock .afterTeach .listAfterTeach .item .icon{
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}
.advantagesBlock .afterTeach .listAfterTeach .item .icon img{
    width: 100%;
}
.advantagesBlock .blockButton{
    text-align: center;
}

.howLessonsBlock{
    margin: 64px 0;
    padding: 24px 0 0 24px;
    display: flex;
}

.howLessonsBlock .blockContent{
    width: 532px;
}

.howLessonsBlock .blockContent .steps{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    margin: 24px 0;
}
.howLessonsBlock .blockContent .steps .step{
    display: flex;
    padding: 24px 32px;
    align-items: center;
    gap: 24px;
    align-self: stretch;
    border-radius: 30px;
    background: #FFF;
}
.howLessonsBlock .blockContent .steps .step p{
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.5px;
}
.howLessonsBlock .blockContent .steps .step .counter{
    color: #0047FF;
    font-size: 45px;
    font-style: normal;
    font-weight: 900;
    line-height: 52px;
}
.howLessonsBlock .blockImage{
    position: relative;
}
.howLessonsBlock .blockImage img{
    position: absolute;
    width: 659px;
    max-width: 659px;
    left: -40px;
    top: 30px;
    z-index: -1;
}
.howLessonsBlock .blockImage .aboutCourse{
    padding: 16px 55px 16px 24px;
    width: 336px;
    border-radius: 20px;
    background: #FFF;
    position: absolute;
    bottom: 130px;
    left: 75px;
}
.howLessonsBlock .blockImage .aboutCourse h3{
    color: #F50882;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
}
.howLessonsBlock .blockImage .aboutCourse p{
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.1px;
}
.howLessonsBlock .blockImage .aboutCourse:before{
    content: '';
    width: 160px;
    height: 140px;
    background: url('/landings/images/pcs/icons/darts.png') center center;
    position: absolute;
    right: -95px;
    top: -5px;
}
.feedBackBlock{
    margin: 64px 0;
    display: flex;
    align-items: center;
}
.feedBackBlock .blockForm{
    padding: 48px;
    border-radius: 40px;
    background: #FFF;
    width: 532px;
}

.fourBlock{
    display: flex;
    padding: 48px 73px;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    align-self: stretch;
    border-radius: 40px;
    background: #0047FF;
    margin: 88px 0 24px 0;
}
.fourBlock h2{
    color: #FFF;
    text-align: center;

}
.fourBlock .items{
    display: flex;
    padding: 0 24px;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    flex-wrap: wrap;
}
.fourBlock .items .item{
    flex-shrink: 0;
    width: calc(25% - 18px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
}
.fourBlock .items .item .imageContainer{
    width: 128px;
    height: 128px;
}
.fourBlock .items .item .contentContainer h3{
    color: #FFF;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px; /* 127.273% */
    margin: 0 0 12px 0;
}
.fourBlock .items .item .contentContainer p{
    color: #FFF;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 24px; /* 150% */
    letter-spacing: 0.5px;
}
.onlineTrainerBlock{
    margin: 24px 0;
    display: flex;
    padding: 0 0 0 73px;
    justify-content: center;
    align-items: center;
    gap: 24px;
    align-self: stretch;
    border-radius: 40px;
    background: url('/landings/images/pcs/online-trainer-ellipse.png') #FFF;
    background-repeat: no-repeat;
    background-position: top right;
}
.onlineTrainerBlock .blockContent{
    display: flex;
    padding: 64px 24px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 483px;
    gap: 48px;
}

.onlineTrainerBlock .blockContent p{
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    letter-spacing: 0.5px;
}
.onlineTrainerBlock .blockContent .primaryButton{
    width: 360px;
}
.citiesBlock{
    position: relative;
    width: calc(100vw - 17px);
    left: 50%;
    overflow: hidden;
    transform: translate(-50%, 0);
    margin: 24px 0;
}
.citiesBlockWrapper{
    width: 2450px;
    position: relative;
    left: 50%;
    padding: 34px 0;
    transform: translate(-50%, 0);
}
.citiesBlock p{
    color: #60749C;
    font-size: 36px;
    font-style: normal;
    font-weight: 300;
    line-height: 72px;
}
.joinFamilyBlock{
    display: flex;
    padding: 0 73px;
    justify-content: center;
    align-items: flex-end;
    gap: 24px;
    border-radius: 40px;
    background: #FFF;
}
.joinFamilyBlock .blockImage{
    text-align: center;
}
.joinFamilyBlock .blockContent{
    display: flex;
    padding: 64px 24px 64px 0;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 48px;
}

.joinFamilyBlock .blockContent .blockButtons{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 24px;
}
.joinFamilyBlock .blockContent .blockButtons a{
    width: 364px;
}
.inputWrapper input{
    width: 100%;
    height: 56px;
    padding: 17px 24px 17px 24px;
    color: #666;
    font-weight: 400;
    border-radius: 10px;
    border: 1px solid #B1B1B1;
    background: #FFF;
    font-size: 16px;
    line-height: 24px; /* 150% */
    letter-spacing: 0.5px;
}
.inputWrapper p.errorText{
    display: none;
    color: #EB2525;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
    padding: 5px 0 0 10px;
}
.inputWrapper input.error{
    border: 1px solid #FF8080;
}
.inputWrapper input:hover, .inputWrapper input:focus{
    border: 1px solid #4A4B56;
    background: rgba(211, 213, 218, 0.30);
}
.inputWrapper input::placeholder{
    color: #999;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px; /* 150% */
    letter-spacing: 0.5px;
}
.popup{
    position: fixed;
    display: none;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, .3);
}
.popupWrapper{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 10px 0;
    background: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
}
.popupRequest{
    padding: 48px;
    border-radius: 20px;
    background: #FFF;
    width: 532px;
    position: relative;
    margin: auto;
}
.popupRequest [data-close-popup]{
    position: absolute;
    width: 20px;
    height: 20px;
    right: 24px;
    top: 24px;
    cursor: pointer;
}
.popupRequest [data-close-popup]:hover img{
    filter: grayscale(0);
}
.popupRequest [data-close-popup] img{
    width: 100%;
    filter: grayscale(1);
}
.successForm{
    display: none;
}
.successForm h2{
    margin-bottom: 15px;
}
.hidden{
    display: none;
}

@media(max-width: 1439px){
    .main-wrapper{
        max-width: 840px;
    }
    .header{
        padding: 16px 24px;
        height: auto;
        position: relative;
    }
    .header .menu.hidden-mobile{
        display: none;
    }
    .header .menu{
        position: absolute;
        height: auto;
        padding: 24px;
        z-index: 1000;
        bottom: -70px;
        left: 24px;
        gap: 0;
        right: 24px;
        background: #8939FD;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }
    .header .menu a{
        padding: 6px 12px;
    }
    .header .phoneImage img{
        width: 26px;
        height: 26px;
    }
    .header .phoneImage{
        width: 32px;
        height: 32px;
    }
    .header .gamburger{
        display: inline-block;
        width: 40px;
        height: 40px;
        cursor: pointer;
    }
    .mainBlock .blockContent, .mainBlock .logoContainer{
        width: 336px;
    }
    .mainBlock .imageContainer{
        width: 408px;
    }
    .mainBlock h2{
        font-size: 45px;
        line-height: 52px;
    }
    .mainBlock .blockContent > p{
        font-size: 28px;
        line-height: 36px;
    }
    .mainBlock .blockContent{
        margin: 64px 0;
    }
    .primaryButton, .secondaryButton{
        font-size: 16px;
        line-height: 24px;
        padding: 12px 48px;
    }
    .mainBlock .primaryButton {
        width: auto;
    }
    .mainBlock .blockButton p{
        font-size: 16px;
        line-height: 24px;
    }
    .countersBlock .counter h3{
        font-size: 36px;
        line-height: 44px;
    }
    .countersBlock .counter{
        padding: 24px;
    }
    .advantagesBlock{
        background-position: -140px 0;
        background-size: 514px 415px;
    }
    .advantagesBlock .wellTeach .wellTeachContent{
        padding: 32px 0;
    }
    .advantagesBlock .afterTeach .listAfterTeach .item{
        box-shadow: none;
        padding: 24px;
        gap: 24px;
    }
    .advantagesBlock .afterTeach .listAfterTeach{
        padding: 0;
        margin: 24px 0;
    }
    .afterTeach p{
        font-size: 14px;
        line-height: 20px;
    }
    .advantagesBlock .afterTeach h2{
        margin: 48px 0 24px 0;
    }
    .howLessonsBlock .blockContent{
        width: 408px;
    }
    .howLessonsBlock .blockImage img{
        width: 531px;
        left: 30px;
        top: 140px;
    }
    .howLessonsBlock .blockImage .aboutCourse h3 {
        font-size: 17px;
        line-height: 21px;
    }
    .howLessonsBlock .blockImage .aboutCourse p{
        font-size: 11px;
        line-height: 15px;
        letter-spacing: 0.075px;
    }
    .howLessonsBlock .blockImage .aboutCourse{
        width: 252px;
        padding: 12px 42px 12px 20px;
        bottom: 200px;
        left: 65px;
    }
    .howLessonsBlock .blockImage .aboutCourse:before{
        width: 115px;
        height: 117px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        right: -60px;
        top: -13px;
    }
    .howLessonsBlock .blockContent .steps{
        margin: 24px 0 0 0;
    }
    .fourBlock{
        margin-top: 64px;
    }
    .fourBlock .items{
        flex-wrap: wrap;
        padding: 0;
    }
    .fourBlock .items .item{
        width: calc(50% - 12px);
    }
    .fourBlock .items .item .contentContainer{
        padding: 0 12px;
    }
    .onlineTrainerBlock .blockContent{
        width: 383px;
    }
    .onlineTrainerBlock{
        background: url(/landings/images/pcs/online-trainer-ellipse-md.png) #FFF;
        background-repeat: no-repeat;
        background-position: top right;
        justify-content: space-between;
    }
    .onlineTrainerBlock .blockImage{
        position: relative;
    }
    .onlineTrainerBlock .blockImage img{
        max-width: inherit;
        width: 430px;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(0, -50%);
    }
    .citiesBlock p {
        font-size: 24px;
        line-height: 60px;
    }
    .citiesBlockWrapper{
        width: 1700px;
        padding: 12px 0;
    }
    .joinFamilyBlock .blockContent{
        width: 360px;
    }
    .joinFamilyBlock .blockContent .blockButtons a{
        width: 235px;
    }
    .feedBackBlock .blockForm{
        width: 408px;
    }
    .feedBackBlock .blockImage{
        width: 432px;
    }
}
@media(max-width: 905px){
    h2{
        font-size: 24px;
        line-height: 32px;
    }
    body{
        padding: 16px 0;
    }
    .show-mobile{
        display: block;
    }
    .main-wrapper{
        max-width: 536px;
    }
    .header{
        padding: 12px 24px;
        border-radius: 20px;
    }
    .header .gamburger{
        width: 32px;
        height: 32px;
    }
    .header .phoneImage{
        width: 24px;
        height: 24px;
    }
    .header .phoneImage img{
        width: 17px;
        height: 17px;
    }
    .phoneNumber{
        font-size: 14px;
    }
    .header .menu{
        bottom: -134px;
        left: 18px;
        right: 18px;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }
    .header .menu a{
        font-size: 14px;
    }
    .mainBlock {
        padding: 32px 53px;
        border-radius: 20px;
    }
    .mainBlock .logoContainer img{
        width: 138px;
        margin: 0 0 8px 0;
    }
    .mainBlock .logoContainer p{
        font-size: 14px;
        line-height: 20px;
    }
    .mainBlock .blockContent, .mainBlock .logoContainer{
        width: 207px;
    }
    .mainBlock .blockContent{
        margin: 32px 0;
    }
    .mainBlock h2{
        font-size: 32px;
        line-height: 40px;
        margin: 0 0 12px 0;
    }
    .mainBlock .blockContent > p{
        font-size: 16px;
        line-height: 24px;
    }
    .mainBlock .imageContainer {
        width: 310px;
        right: -35px;
        top: calc(50% - 20px);
    }
    .mainBlock .blockButton{
        padding: 16px;
        border-radius: 20px;
    }
    .mainBlock .blockButton p{
        width: 100px;
        font-size: 14px;
        line-height: 20px;
    }
    .primaryButton, .secondaryButton{
        font-size: 14px;
        line-height: 20px;
    }
    .countersBlock .counter h3, .countersBlock .counter h3 span{
        font-size: 24px;
        line-height: 32px;
    }
    .countersBlock .counter{
        padding: 16px;
        border-radius: 20px;
        gap: 0;
    }
    .countersBlock{
        gap: 16px;
    }
    .countersBlock .counter p{
        font-size: 14px;
        line-height: 20px;
    }
    .advantagesBlock{
        border-radius: 20px;
        background: url(/landings/images/pcs/well-teach-ellipse-sm.png) #FFF;
        background-repeat: no-repeat;
        background-position: top center;
    }
    .advantagesBlock .wellTeach{
        flex-direction: column;
    }
    .advantagesBlock .wellTeach .wellTeachImage {
        padding-top: 24px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .advantagesBlock .wellTeach .wellTeachImage img{
        width: 310px;
    }
    .advantagesBlock{
        padding: 0 69px 24px 69px;
    }
    .advantagesBlock .wellTeach .wellTeachContent{
        padding: 0;
    }
    .advantagesBlock .afterTeach .listAfterTeach{
        flex-direction: column;
        gap: 16px;
    }
    .advantagesBlock .afterTeach .listAfterTeach .item{
        padding: 16px;
        gap: 16px;
        width: 100%;
    }
    .howLessonsBlock{
        margin: 0;
        padding: 24px 0 0 0;
        flex-direction: column;
    }
    .howLessonsBlock h2{
        text-align: center;
    }
    .howLessonsBlock .blockContent{
        order: 3;
        padding: 0;
        width: 100%;
    }
    .howLessonsBlock .blockImage{
        width: 100%;
        height: 225px;
        order: 2;
        position: relative;
        margin: 16px 0;
    }
    .howLessonsBlock .blockImage img{
        position: relative;
        left: auto;
        top: auto;
        width: 260px;
    }
    .howLessonsBlock .blockImage .aboutCourse{
        left: auto;
        top: auto;
        right: 45px;
        bottom: 25px;
    }
    .howLessonsBlock .blockImage .aboutCourse{
        padding: 12px 41px 12px 18px;
    }
    .howLessonsBlock .blockImage .aboutCourse h3{
        font-size: 14px;
        line-height: 21px;
    }
    .howLessonsBlock .blockContent .steps{
        margin: 0;
    }
    .howLessonsBlock .blockContent .steps .step .counter{
        font-size: 36px;
        line-height: 44px;
    }
    .howLessonsBlock .blockContent .steps .step p{
        font-size: 14px;
        line-height: 20px;
    }
    .feedBackBlock{
        flex-direction: column;
        margin: 16px 0;
    }
    .feedBackBlock .blockForm{
        width: 100%;
    }
    .feedBackBlock .blockImage{
        width: 340px;
        height: 300px;
    }
    .fourBlock{
        margin-top: 48px;
        padding: 48px 44px;
        border-radius: 20px;
    }
    .fourBlock .items .item .contentContainer h3{
        font-size: 16px;
        line-height: 24px;
    }
    .fourBlock .items .item .contentContainer p{
        font-size: 14px;
        line-height: 20px;
    }
    .onlineTrainerBlock{
        background: url(/landings/images/pcs/online-trainer-ellipse-sm.png) #FFF;
        background-repeat: no-repeat;
        background-position: top center;
        flex-direction: column-reverse;
        padding: 0 73px 32px 73px;
        gap: 0;
        border-radius: 20px;
    }
    .onlineTrainerBlock .blockImage img{
        position: relative;
        transform: none;
        top: auto;
    }
    .onlineTrainerBlock .blockContent{
        width: 100%;
        padding: 0;
        gap: 24px;
    }
    .joinFamilyBlock{
        padding: 0 44px;
        gap: 16px;
        border-radius: 20px;
    }
    .joinFamilyBlock .blockContent{
        width: 50%;
        padding: 32px 0;
        gap: 24px;
    }
    .joinFamilyBlock .blockContent .blockButtons{
        gap: 12px;
        width: 100%;
    }
    .joinFamilyBlock .blockContent .blockButtons a {
        width: 100%;
        padding: 8px 16px;
    }
}

@media(max-width: 599px){
    .main-wrapper{
        max-width: 328px;
    }
    .header .menu{
        bottom: -236px;
        gap: 12px;
    }
    .header .menu a{
        width: 100%;
    }
    .mainBlock{
        margin: 16px 0;
        padding: 32px 24px;
        border-radius: 20px;
        display: flex;
        flex-direction: column;
    }
    .mainBlock .blockContent{
        width: 100%;
    }
    .mainBlock .imageContainer{
        width: 100%;
        top: auto;
        right: auto;
        position: relative;
        transform: none;
        order: 2;
        height: 180px;
    }
    .mainBlock .blockContent, .mainBlock .logoContainer{
        width: 100%;
    }
    .mainBlock .blockContent, .mainBlock .logoContainer{
        order: 1;
    }
    .mainBlock .blockButton{
        order: 3;
        padding: 16px;
        flex-direction: column-reverse;
        gap: 8px;
    }
    .mainBlock .blockButton p{
        width: 100%;
        text-align: center;
    }
    .countersBlock{
        flex-direction: column;
    }
    .countersBlock .counter{
        align-items: center;
        justify-content: center;
        padding: 16px 24px;
    }
    .countersBlock .counter p{
        text-align: center;
    }
    .countersBlock .counter h3{
        margin: 0;
    }
    .advantagesBlock{
        margin: 16px 0;
        background-position: 50% -30px;
        padding: 0 24px 24px 24px;
    }
    .advantagesBlock .wellTeach .wellTeachImage{
        padding-top: 12px;
    }
    .advantagesBlock .wellTeach{
        gap: 8px;
    }
    .advantagesBlock .wellTeach .wellTeachContent h2{
        margin: 0 0 12px 0;
    }
    .advantagesBlock .wellTeach .wellTeachContent .list p{
        font-size: 14px;
        width: 100%;
    }
    .advantagesBlock .afterTeach .listAfterTeach .item{
        padding: 16px 0;
    }
    .afterTeach p{
        font-size: 12px;
        line-height: 16px;
    }
    .advantagesBlock .afterTeach .listAfterTeach .item .icon {
        width: 40px;
        height: 40px;
    }
    .primaryButton, .secondaryButton {
        padding: 12px 18px;
    }
    .advantagesBlock .blockButton .primaryButton{
        margin: 0 -16px 0 -16px;
    }
    .howLessonsBlock .blockImage{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .howLessonsBlock .blockImage .aboutCourse h3{
        font-size: 11px;
        line-height: 16px;
    }
    .howLessonsBlock .blockImage .aboutCourse p{
        font-size: 8px;
        line-height: 11px;
    }
    .howLessonsBlock .blockImage .aboutCourse{
        padding: 9px 32px 9px 14px;
        width: 166px;
        bottom: 5px;
    }
    .howLessonsBlock .blockImage .aboutCourse:before{
        width: 82px;
        height: 84px;
    }
    .howLessonsBlock .blockImage .aboutCourse:before{
        right: -46px;
        top: -8px;
    }
    .howLessonsBlock .blockContent .steps .step p{
        font-size: 12px;
        line-height: 16px;
    }
    .howLessonsBlock .blockContent .steps .step{
        padding: 12px 32px;
        border-radius: 20px;
    }
    .feedBackBlock .blockImage{
        width: 290px;
        height: 260px;
    }
    .feedBackBlock .blockForm{
        padding: 32px;
    }
    form.form p{
        font-size: 14px;
        line-height: 20px;
    }
    .inputWrapper input{
        padding: 15px;
        height: 48px;
        font-size: 12px;
        line-height: 16px;
        border-radius: 8px;
    }
    .inputWrapper input::placeholder{
        font-size: 12px;
        line-height: 16px;
    }
    form.form p.agreement{
        font-size: 12px;
        line-height: 16px;
    }
    .fourBlock{
        margin-top: 40px;
        padding: 48px 32px;
    }
    .fourBlock .items .item{
        width: 100%;
    }
    .onlineTrainerBlock{
        padding: 0 32px 32px 32px;
        margin: 24px 0 0 0;
    }
    .onlineTrainerBlock .blockContent .primaryButton{
        width: 100%;
    }
    .onlineTrainerBlock .blockContent p{
        font-size: 14px;
        line-height: 20px;
    }
    .citiesBlock{
        margin: 12px 0;
    }
    .joinFamilyBlock{
        flex-direction: column-reverse;
        padding: 0 32px;
    }
    .joinFamilyBlock .blockContent{
        width: 100%;
    }
    .popupRequest{
        padding: 24px;
        width: 328px;
    }
}



/*Hidden queries*/
@media (max-width: 599px) {
    .hidden-xs {
        display: none !important;
    }
}
@media (min-width: 600px) and (max-width: 904px) {
    .hidden-sm {
        display: none !important;
    }
}
@media (min-width: 905px) and (max-width: 1239px) {
    .hidden-md {
        display: none !important;
    }
}
@media (min-width: 1240px) {
    .hidden-lg {
        display: none !important;
    }
}
/*Hidden queries*/