@font-face {
    font-family: Roboto;
    src: url('/fonts/Roboto/Roboto-Medium.ttf');
    font-weight: 500;
}
@font-face {
    font-family: Roboto;
    src: url('/fonts/Roboto/Roboto-Regular.ttf');
    font-weight: 400;
}
@font-face {
    font-family: Roboto;
    src: url('/fonts/Roboto/Roboto-Bold.ttf');
    font-weight: 700;
}
@font-face {
    font-family: Roboto;
    src: url('/fonts/Roboto/Roboto-Light.ttf');
    font-weight: 300;
}

.newContainer{
    max-width: 1296px;
    margin: auto;
}

.speechWrapper{
    background: #FAFAFA;
}
.speechWrapper *{
    color: #333;
    font: 400 16px Roboto;
}

.speechWrapper h1, .speechWrapper h2.biggest{
    font-size: 57px;
    font-weight: 700;
    line-height: 64px;
    letter-spacing: -0.25px;
    text-transform: inherit;
    text-align: left;
    margin: 0;
}
.speechWrapper h2{
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
    margin: 0;
    text-align: left;
    text-transform: inherit;
}
.speechWrapper h2.center{
    text-align: center;
}
.speechWrapper h3{
    font-size: 22px;
    font-weight: 700;
    line-height: 28px;
    text-align: left;
    margin: 0;
}
.speechWrapper p{
    font-size: 16px;
    font-weight: 400;
    line-height: 24px; /* 150% */
    letter-spacing: 0.5px;
    margin: 0;
}
.speechWrapper p strong{
    font-size: 16px;
    font-weight: 700;
    line-height: 24px; /* 150% */
    letter-spacing: 0.5px;
    margin: 0;
}
.speechHeader{
    display: flex;
    border-radius: 30px;
    border: 1px solid #F2F2F2;
    background: #FFF;
    box-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.24);
    gap: 24px;
    overflow: hidden;
}
.speechHeaderWrapper{
    padding: 48px 0;
    background: linear-gradient(to bottom, #0047FF 85%, #FAFAFA 15%);
}
.speechHeader .text{
    padding: 86px 0 86px 86px;
    width: calc(50% - 12px);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.speechHeader .text .title{
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.speechHeader .text .title .subheader{
    font-size: 28px;
    font-weight: 400;
    line-height: 36px;
    margin: 0;
}
.speechHeader .image{
    display: flex;
    align-items: flex-end;
    width: calc(50% - 12px);
}
.speechHeader .image img{
    max-width: 100%;
}

.speechWrapper .button{
    color: #FFF;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px; /* 150% */
    letter-spacing: 0.15px;
    border-radius: 100px;
    background: #0047FF;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 205px;
    height: 40px;
    text-transform: inherit;
    padding: 0;
}

.speechAbout{
    display: flex;
    gap: 24px;
    padding: 48px 0;
}
.speechAbout .text{
    width: calc(50% - 12px);
    border-radius: 30px;
    border: 1px solid #F2F2F2;
    background: #FFF;
    padding: 48px 48px 12px 48px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.speechAbout .image{
    width: calc(50% - 12px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.speechAbout .image img{
    max-width: 100%;
}
.speechWarranty{
    padding: 48px 0;
}
.speechWarranty > .text{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 24px;
}

.speechWarrantyItems{
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding: 48px 0;
}
.speechWarrantyItems .swItem{
    padding: 24px 32px 32px 32px;
    border-radius: 30px;
    border: 1px solid #F2F2F2;
    background: #FFF;
    box-shadow: 4px 4px 8px 4px rgba(0, 0, 0, 0.04);
    width: calc(100% / 3 - 16px);
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.speechWarrantyItems .swItem .image{
    width: 148px;
}
.speechWarrantyItems .swItem .image img{
    width: 100%;
}
.speechWarrantyItems .swItem .text{
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.selectionSpeechWrapper{
    background-color: #0047FF;
    background-image: url('/img/speech/stroke-ellipse.png');
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: 0 270px;
    padding: 96px 0;
}
.selectionSpeechWrapper h2, .selectionSpeechWrapper p, .selectionSpeechWrapper p strong{
    color: white;
}
.selectionSpeech{
    display: flex;
    gap: 24px;
}
.selectionSpeech > .info{
    width: 584px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.selectionSpeech > .image img{
    max-width: 100%;
}
.selectionSpeech > .info > .text{
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.selectionSpeech > .info .list{
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.selectionSpeech > .info .list .ssListItem{
    padding: 24px 32px;
    border-radius: 30px;
    background: #FFF;
    display: flex;
    gap: 24px;
}
.selectionSpeech > .info .list .ssListItem p{
    color: #333;
}
.selectionSpeech > .info .list .ssListItem .text{
    display: flex;
    gap: 12px;
    flex-direction: column;
}
.selectionSpeech > .info .list .ssListItem .number{
    color: #0047FF;
    font-size: 48px;
    font-weight: 700;
    line-height: 52px;
}

.detailSpeech{
    padding: 96px 0 48px 0;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}
.detailSpeech > .info, .detailSpeech > .therapy{
    width: calc(50% - 12px);
}
.detailSpeech > .info{
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.detailSpeech > .info .image{
    display: flex;
    align-items: center;
    justify-content: center;
}
.detailSpeech > .info .image img{
    max-width: 100%;
}
.detailSpeech > .therapy{
    display: flex;
    flex-direction: column;
    gap: 48px;
}
.detailSpeech > .therapy .list{
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}
.detailSpeech > .therapy .list .therapyItem{
    border-radius: 30px;
    border: 1px solid #F2F2F2;
    background: #FFF;
    padding: 24px;
    width: calc(50% - 12px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.detailSpeech > .therapy .list .therapyItem .header{
    display: flex;
    gap: 12px;
}
.detailSpeech > .therapy .list .therapyItem .header .title{
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.detailSpeech > .therapy .list .therapyItem .plus{
    color: #0047FF;
    font-size: 45px;
    font-weight: 400;
    line-height: 52px;
}
.detailSpeech > .therapy .list .therapyItem ul{
    margin: 0 0 0 26px;
    padding: 0;
    list-style: none;
}
.detailSpeech > .therapy .list .therapyItem ul li{
    color: #333;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px; /* 150% */
    letter-spacing: 0.5px;
    position: relative;
}
.detailSpeech > .therapy .list .therapyItem ul li::before{
    content: "";
    position: absolute;
    display: inline-block;
    width: 4px;
    height: 4px;
    background-color: black;
    border-radius: 50%;
    top: 10px;
    left: -15px;
}
.payToLearn{
    border-radius: 40px;
    border: 1px solid #F2F2F2;
    background-color: #FFF;
    background-image: url('/img/speech/ellipse.png');
    background-repeat: no-repeat;
    background-position: top right;
    padding: 0 73px;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: 48px 0;
}
.payToLearn > .text{
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    justify-content: center;

}
.payToLearn > .image img{
    max-width: 100%;
}
.payToLearn > .image, .payToLearn > .text{
    width: calc(50% - 12px);
}
.howMuchSpeech{
    padding: 48px 0;
    display: flex;
    flex-direction: column;
    gap: 48px;
}
.howMuchSpeech .howMuchBlocks{
    display: flex;
    gap: 24px;
}
.howMuchSpeech .howMuchBlocks .hmItem{
    border-radius: 30px;
    border: 6px solid #E5EDFF;
    background: #FFF;
    padding: 48px;
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: calc(50% - 12px);
    align-items: flex-start;
}
.howMuchSpeech .howMuchBlocks .hmItem.blue{
    border: 1px solid #F2F2F2;
    background: #0047FF;
    gap: 24px;
}
.howMuchSpeech .howMuchBlocks .hmItem.blue h2{
    border-radius: 20px;
    background: #ADFF00;
    padding: 12px 24px;
    display: inline-block;
}
.howMuchSpeech .howMuchBlocks .hmItem p, .howMuchSpeech .howMuchBlocks .hmItem p strong{
    font-size: 22px;
    line-height: 28px;
    letter-spacing: inherit;
}

.howMuchSpeech .howMuchBlocks .hmItem.blue p, .howMuchSpeech .howMuchBlocks .hmItem.blue p strong{
    color: white;
}
.howMuchSpeech .howMuchBlocks .hmItem.blue .button{
    color: #3E4C66;
    background: #ADFF00;
}
.howMuchSpeechDetail{
    padding: 0 0 48px 0;
    display: flex;
    flex-direction: column;
    gap: 48px;
}
.howMuchDetailBlocks{
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}
.howMuchDetailBlocks .hmdItem{
    border-radius: 30px;
    border: 6px solid #E5EDFF;
    background: #FFF;
    padding: 32px;
    width: calc(100% / 4 - 18px);
    display: flex;
    flex-direction: column;
}
.howMuchDetailBlocks .hmdItem h3{
    color: #0047FF;
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
}
.howMuchDetailBlocks .hmdItem hr{
    margin: 12px 0;
    border-color: #808080;
}
.howMuchDetailBlocks .hmdItem .lessonsQty{
    text-align: center;
    font-size: 28px;
    font-weight: 400;
    line-height: 36px;
}
.howMuchDetailBlocks .hmdItem .cost{
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 0;
    border-radius: 20px;
    background: #F5F5F5;
    align-items: center;
    justify-content: center;
    margin: 32px 0;
}
.howMuchDetailBlocks .hmdItem .cost .subCost{
    text-align: center;
    font-size: 22px;
    font-weight: 400;
    line-height: 28px;
}
.howMuchDetailBlocks .hmdItem .cost .mainCost{
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    line-height: 52px;
}
.howMuchDetailBlocks .hmdItem .descCost strong{
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    line-height: 28px;
}
.howMuchDetailBlocks .hmdItem .descCost{
    text-align: center;
    font-size: 22px;
    font-weight: 400;
    line-height: 28px;
}
.howMuchDetailBlocks .hmdItem.selected{
    border: 1px solid #F2F2F2;
    background: #0047FF;
}
.howMuchDetailBlocks .hmdItem.selected h3{
    color: #C3FF43;
}
.howMuchDetailBlocks .hmdItem.selected hr{
    border-color: #CCC;
}
.howMuchDetailBlocks .hmdItem.selected .lessonsQty{
    color: white;
}
.howMuchDetailBlocks .hmdItem.selected .cost{
    background: #ADFF00;
}
.howMuchDetailBlocks .hmdItem.selected .descCost strong{
    color: white;
}
@media (max-width: 1399px) {
    .newContainer {
        max-width: 1116px;
    }
}

@media (max-width: 1199px) {
    .newContainer{
        max-width: 936px;
    }
    .speechWrapper h1, .speechWrapper h2.biggest{
        font-size: 42px;
        line-height: 48px;
    }
    .speechHeader .text .title .subheader{
        font-size: 22px;
        line-height: 28px;
    }
    .speechHeader .text{
        padding: 32px 0 32px 64px;
    }
    .selectionSpeech > .image{
        width: 368px;
    }
    .payToLearn{
        padding: 24px;
    }
    .howMuchDetailBlocks .hmdItem{
        width: calc(100% / 2 - 18px);
    }
}

@media (max-width: 991px) {
    .newContainer {
        max-width: 696px;
    }
    .speechHeader{
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    .speechHeader .text{
        width: 100%;
        padding: 32px 64px 32px 64px;
    }
    .speechHeader .image{
        width: 75%;
    }
    .speechAbout{
        flex-direction: column-reverse;
    }
    .speechAbout .image{
        width: 100%;
    }
    .speechAbout .text{
        width: 100%;
    }
    .speechWarrantyItems .swItem{
        width: calc(100% / 2 - 16px);
    }
    .speechWarrantyItems{
        justify-content: center;
    }
    .selectionSpeech > .image{
        display: none;
    }
    .selectionSpeech > .info{
        width: 100%;
    }
    .detailSpeech{
        flex-direction: column;
    }
    .detailSpeech > .info, .detailSpeech > .therapy{
        width: 100%;
    }
    .payToLearn{
        flex-direction: column;
        background-position: 160px 270px;
        padding: 48px 24px;
        gap: 48px;
    }
    .payToLearn > .image, .payToLearn > .text{
        width: 100%;
    }
    .howMuchSpeech .howMuchBlocks{
        flex-direction: column;
    }
    .howMuchSpeech .howMuchBlocks .hmItem{
        width: 100%;
    }
}

@media (max-width: 767px) {
    .newContainer {
        max-width: 516px;
        padding: 0 24px;
    }
    .speechHeaderWrapper{
        padding: 48px 0 24px 0;
    }
    .speechHeader .text{
        padding: 50px 24px;
    }
    .speechWrapper h1, .speechWrapper h2.biggest{
        font-size: 32px;
        line-height: 40px;
    }
    .speechHeader .text .title .subheader{
        font-size: 24px;
        line-height: 32px;
    }
    .speechWrapper p{
        font-size: 14px;
        line-height: 20px; /* 142.857% */
        letter-spacing: 0.25px;
    }
    .speechWrapper p strong{
        font-size: 14px;
        line-height: 20px; /* 142.857% */
        letter-spacing: 0.25px;
    }
    .speechWrapper .button{
        width: 100%;
        max-width: 264px;
        font-size: 14px;
        line-height: 20px; /* 142.857% */
        letter-spacing: 0.1px;
    }
    .speechHeader .image{
        width: 100%;
    }
    .speechAbout{
        padding: 24px 0;
    }
    .speechAbout .text{
        padding: 24px;
    }
    .speechWarranty h2{
        text-align: center;
    }
    .speechWarranty > .text > p{
        text-align: center;
    }
    .speechWarrantyItems .swItem{
        width: 100%;
        padding: 24px;
    }
    .selectionSpeechWrapper{
        padding: 48px 0;
    }
    .selectionSpeech > .info .list .ssListItem{
        padding: 24px;
        gap: 12px;
    }
    .detailSpeech{
        padding: 24px 0;
    }
    .detailSpeech > .info{
        padding: 0;
    }
    .detailSpeech h2.biggest{
        font-size: 48px;
        line-height: 64px;
    }
    .detailSpeech h2 br{
        display: none;
    }
    .detailSpeech > .therapy .list .therapyItem{
        width: 100%;
    }
    .detailSpeech > .therapy{
        gap: 24px;
    }
    .detailSpeech > .therapy .list .therapyItem ul li{
        font-size: 14px;
        line-height: 20px; /* 142.857% */
        letter-spacing: 0.25px;
    }
    .payToLearn{
        margin: 24px 0;
        padding: 48px 0 0 0;
        background-position: 0 336px;
        background-size: 110%;
    }
    .payToLearn > .text{
        padding: 0 24px;
    }
    .payToLearn > .image{
        padding: 0;
    }
    .howMuchSpeech .howMuchBlocks .hmItem{
        padding: 24px;
        gap: 24px;
    }
    .howMuchSpeech .howMuchBlocks .hmItem p, .howMuchSpeech .howMuchBlocks .hmItem p strong{
        font-size: 16px;
        line-height: 24px;
    }
    .howMuchBlocks .button{
        max-width: 205px;
    }
    .howMuchDetailBlocks .hmdItem{
        width: 100%;
    }
    .howMuchSpeechDetail{
        padding: 0;
    }
}