html, body {
    margin: 0;
    padding:0;
}
body {
    font-weight: 400;
    font-family: "Rubik", Arial, sans-serif;
    font-size: 20px;
    color: #474A52;
}
a {
    color: #3F76FF;
    text-decoration: none;
}
.container {
    width: 1360px;
    margin-left: auto;
    margin-right: auto;
}
header {    
    display: block;
    position:fixed;    
    width: 100%;   
    padding-top: 14px;
    padding-bottom: 14px;
    background-color:white;
    z-index:1;
}
.header {
    display:flex;    
    align-items: center;
    justify-content: space-between;
}
nav {
    display:flex;
    align-items: center;
    width: 85%;
}
nav ul {
    list-style-type: none;
    display: flex;  
    margin: 0;
    padding: 0;  
}
nav ul li {
    padding-left: 14px;
    padding-right: 14px;
}
nav ul li a {
    font-size: 16px;
    color: #474A52;
    text-decoration:none;
}
nav ul li a:hover {    
    color: #3F76FF;    
}
.header__entry {
    margin-left: 20px;
    display: inline-block;
    border: 1px solid #3F76FF;
    color: #3F76FF;
    padding: 10px 12px;
    border-radius:8px;
    text-decoration:none;
    font-size:16px;
}
.header__register {
    margin-left: 20px;
    display: inline-block;
    border: 1px solid #3F76FF;
    color: white;
    background-color:#3F76FF;
    padding: 10px 12px;
    border-radius:8px;
    text-decoration:none;
    font-size:16px;
}
.header__gap {
    flex-grow: 1;
}
.nav-button {
    display: none;
}
.section__based {
    padding-top:220px;
    padding-bottom: 200px;
    background: url("../images/cloud.svg") no-repeat;
    background-position-x: center;
    background-position-y: -170px;
}
h1 {
    font-size: 72px;
    font-weight: 600;    
    line-height: 1;
    margin-top: 0;
    margin-bottom:40px;
}
h2 {
    font-size:48px;
    font-weight: 700;
    text-align: center;
}
.based {
    display:flex;
    align-items: center;
}
.based__text {
    width: 50%;
}
.based__text_p {
    font-size: 28px;
    font-weight:300;
    width: 85%;
    line-height: 1.3;
}
.based__text_link {
    letter-spacing: 1px;
    color: white;
    padding: 16px 20px;
    background-color: #3F76FF;
    outline: none;
    border: 1px solid #3F76FF;
    border-radius: 12px;
    display: inline-flex;
}
.based__text_link img {
    margin-left: 12px;
}
.based__image {
    width: 50%;
}
.based__image img {
    width: 840px;
}
.bg-light {
    background-color: #D6E2FF;
}
.bg-pale {
    background-color: #F0F4FF;
}
.pt-60 {
    padding-top: 60px;
}
.pt-100 {
    padding-top: 100px;
}
.pb-100 {
    padding-bottom: 100px;
}
.line-capabilities {
    background: url('../images/bg_line_cap.svg') no-repeat;
    background-position-x: center;
    text-align: center;
    padding-top:13px;
    padding-bottom: 12px;
}
.line-capabilities {
    cursor: pointer;
}
.capabilities {
    display: flex;
    padding-bottom: 100px;
    padding-top: 30px;
}
.arrow-left {
    width: 9%;
}
.arrow-right {
    width: 9%;    
    text-align: right;   
}
.arrow-left img, .arrow-right img {
    margin-top: 300%;
    cursor: pointer;
}
.disabled {
    opacity: 0.4;
    cursor: text;
}
.capabilities__sliders {
    width: 82%;   
}
.capabilities__slide {
    border-radius: 24px;
    text-align: center;
    background-color: white;
    padding-top: 40px;    
    display: none;   
}
.capabilities__slide.active {    
    display: block;
}
.capabilities__tasks-list {
    display: flex;
    flex-wrap: wrap;
    align-self: center;
    width: 75%;
    margin-left: auto;
    margin-right: auto;
}
.capabilities__tasks-list li {
    width: 200px;
    text-align: left;
    padding-top: 5px;
    padding-bottom: 12px;
}
.capabilities__slide img {
    width: 1000px;
    margin-bottom: -5px;
}
.slide__p_2 {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.4;
    padding-bottom: 40px;
}
.slide__p_3 {
    padding-top: 35px;
    padding-bottom: 65px;
}
.slide__p_4 {
    line-height: 1.45;
    padding-top: 15px;
    padding-bottom: 50px;
}
.tabs {
    text-align: center;
}
.tab {
    display: inline-block;    
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    padding: 24px 32px 20px;
    font-weight: 600;
    cursor: pointer;
}
.tab.active {
    background-color: white;
    cursor: text;
}
.tasks {
    display: flex;
    padding-bottom: 80px;
    padding-top: 15px;
}
.tasks__image {
    width: 60%;
    box-sizing: border-box;
}
.tasks__image img {
    width: 777px;
}
.tasks__text {
    width: 40%;
    box-sizing: border-box;
    padding-left: 2%;
}
.tasks__list {
    list-style-type: none;
    margin:0;
    padding:0;
}
.tasks__list li {
    background-color: white;
    padding: 24px 18px 24px 22px;
    border-radius: 24px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}
.tasks__list li.flex-start {  
    align-items: flex-start;
}
.tasks__list li img {
    margin-right: 12px;
}
.tasks__list li span {
    line-height:1.4;
}
.spaces {
    display: flex;
    padding-bottom: 80px;
    padding-top: 15px;
}
.spaces__text {
    width:40%;
    box-sizing: border-box;
    padding-right:7%;
    padding-top: 10px;
    line-height: 1.4;
}
.spaces__image {
    width:60%;
    box-sizing: border-box;
    display: flex;  
    justify-content: flex-end;
}
.spaces__image img {
    width: 777px;
}
.api {  
    padding-bottom: 140px;
    padding-top: 15px;
}
.api__top {
    display: flex;
    justify-content: space-between;
}
.api__top img {
    width: 903px;
}
.api__top p {
    width: 30%;
    line-height: 1.5;
}
.api__bottom {
    display: flex;
    margin-top: -170px;
    align-items: end;
}
.api__bottom p {
    line-height: 1.5;
    padding-left: 60px;
    margin-bottom:0;
}
/*.api__left {
    width: 36%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;    
    justify-content: space-between;
}
.api__left p {
    line-height: 1.4;
}
.api__left img {
    width: 100%;
    max-width: 395px;   
}
.api__right {
    width: 64%;
    box-sizing: border-box;
}
.api__right p {
    line-height: 1.4;
    margin-bottom:0;
}
.api__right img {
    margin-left: 3%;
    width: 856px;
}*/
.technology {
    width: 100%;
    max-width: 896px;
    margin-left: auto;
    margin-right: auto;
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
    padding-top: 30px;
    padding-bottom: 70px;
}
.technology__block {
    background-color:#F0F4FF;
    padding:28px 24px 36px 24px;
    border-radius:24px;
    width: 43%;
    margin-bottom: 4%;
    text-align:center;
    line-height:1.5;
}
.technology__block img {
    margin-bottom: 18px;
}
.form {
    width: 100%;
    max-width: 896px;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;  
    background-color: white;
    padding: 24px 28px;
    border-radius: 24px;
}
.form h2 {
    margin-top:0;
}
.form input {
    width: 100%;
    box-sizing: border-box;
    font-family: "Rubik", sans-serif;
    font-size: 20px;
    color: #474A52;
    border-radius: 12px;
    border: 1px solid #DDE2EA;
    padding: 16px;
    outline: none;
    margin-bottom: 30px;
}
.form textarea {
    width: 100%;
    height: 168px;
    box-sizing: border-box;
    font-family: "Rubik", sans-serif;
    font-size: 20px;
    color: #474A52;
    border-radius: 12px;
    border: 1px solid #DDE2EA;
    padding: 16px;
    outline: none;
    margin-bottom: 28px;
}
.form button {
    font-family: "Rubik", sans-serif;
    font-size: 20px;
    letter-spacing: 1px;
    color: white;
    padding:16px 20px;
    background-color: #3F76FF;
    outline: none;
    border: 1px solid #3F76FF;
    border-radius:12px;
    display: flex;  
    cursor: pointer;
}
.form button img {
    margin-left: 12px;
}
.form p {
    margin-top:28px;
    margin-bottom: 12px;
}
.help-btn {
    position:fixed;
    display: flex;
    right: 50px;
    bottom:20px;
    z-index:10;
}
.help-btn__open {
    cursor: pointer;
}
.help-btn__open.close {
    display:none;
}
.help-btn__inner {
    display: flex;
    flex-direction: column;
}
.help-btn__inner.close {
    display: none;
}
.help-btn__inner a {
    margin-bottom: 10px;
}
.help-btn__close {
    cursor: pointer;
}
footer{
    background-color:#001447;
}
.footer {
    padding-top:35px;
    padding-bottom:80px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.footer__list {
    list-style-type: none;
    margin: 0;
    padding:0;
    padding-right: 80px;
}
.footer__list li {
    padding-bottom: 20px;
}
.footer__list li a{
    color: white;
    font-size: 16px;
}
.footer__nav {
    display: flex;
}
.under-logo-item {
    padding-bottom: 20px !important;
}
.capabilities-mobile {
    display: none;
}

@media (max-width: 1799px) {
    .based__image img {
        width: 740px;
    }
}
@media (max-width: 1559px) {
    .based__image img {
        width: 680px;
    }
}
@media (max-width: 1440px) {
    body {     
        font-size: 18px;  
    }
    .container {
        width: 1300px;
    }
    nav ul li a {
        font-size: 14px;
    }
    .header__entry {    
        font-size: 14px;
    }
    .header__register {
        font-size: 14px;
    } 
    h1 {
        font-size: 68px;      
    } 
    .based__image img {
        width: 640px;
    } 
    .based__text_p {
        font-size: 26px;    
    }  
    .capabilities__slide img {
        width: 900px;        
    }
    .capabilities__tasks-list {       
        width: 80%;      
    }
    .api__right img {       
        width: 800px;
    } 
    .tasks__image img {
        width: 748px;
    }  
    .tasks__list li {      
        padding: 24px 24px 24px 24px;       
    }
    .spaces__text {        
        padding-right: 9%;       
    }
    .api__top img {
        width: 846px;
    }
    .help-btn { 
        right: 20px;      
    }
}
@media (max-width: 1359px) {
    .container {
        width: 1220px;
    }
    .section__based {
        padding-top: 180px;
        padding-bottom: 200px;      
        background-position-x: center;
        background-position-y: -250px;
    }
    .api__right img {
        width: 760px;
    }
    .tasks__image img {
        width: 700px;
    }
    h1 {
        font-size: 58px;
        margin-bottom: 22px;
    }
    .based__image img {
        width: 610px;
    } 
    .based__text_p {
        font-size: 22px;
    }
    .spaces__text {        
        padding-right: 4%;       
    }
    .spaces__image img {
        width: 700px;
    }
    .api__top img {
        width: 766px;
    }
}
@media (max-width: 1279px) {
    body {     
        font-size: 16px;  
    }
    .container {
        width: 980px;
    }
    .header__logo {
        width: 120px;
    }
    .header__entry {
        font-size: 12px;
    }
    .header__register {
        font-size: 12px;
    }
    nav ul li {
        padding-left: 7px;
        padding-right: 7px;
    }
    nav ul li a {
        font-size: 12px;
    }
    h1 {
        font-size: 42px;
    }
    .section__based {
        padding-top: 160px;
        padding-bottom: 110px;
        background-position-x: center;
        background-position-y: -340px;
        background-size: 2221px;
    }
    .based__text {        
        padding-right: 50px;
    }
    .based__text_p {
        font-size: 16px;
        margin-bottom: 24px;
    }
    .based__image img {
        width: 448px;
        margin-left: 30px;
    }
    .based__text_link {      
        padding: 16px 20px 12px;     
    }
    .tasks__image img {
        width: 460px;
    }
    .spaces__image img {
        width: 580px;
    }
    .api__right img {
        width: 600px;
    }
    .api__left img {
        width: 100%;
        max-width: 300px;
    }
    .capabilities__slide img {
        width: 700px;       
    }
    .slide__p_2 {
        width: 80%;       
    }
    .capabilities__tasks-list li {
        width: 150px;     
    }  
    .tasks__image {
        width: 50%;  
    }
    .tasks__text {
        width: 50%;      
    }
    .api__top img {
        width: 600px;
    }
    .api__bottom {      
        margin-top: -140px;       
    }
    .api__bottom img {
        width: 320px;
    }
    .under-logo-item {
        padding-bottom: 16px !important;
    }
}
@media (max-width: 999px) {
    .container {
        width: 900px;
    }
    nav {
        display: none;
        position: absolute;
        top: 60px;
        left: 0;   
        padding-bottom: 18px;   
        z-index: 1000;
        width: 100%;
        background-color: white;
        border-bottom: 1px solid lightgray;
    }
    .nav-button {
        display: flex;
    }
    .nav-button__lines {
        width: 24px;
        height: 20px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .nav-button__lines span {
        font-size:2px;
        border-bottom: 2px solid #3F76FF;
    }
    .nav-button__cross {
        display:none;
        width: 20px;
        transform: scaleX(1.4);
        font-size: 22px;
        color:#3F76FF;
        font-weight: 300;
    }
    nav ul {     
        flex-direction: column; 
        padding-bottom: 12px;     
    }
    nav ul li  {
        padding-left:0;
        padding-right:0;
    }
    nav ul li a {
        display: block;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    nav ul li a:hover {
        background-color: #F0F4FF;
    }
    nav ul li a:active {
        background-color: #F0F4FF;
    }
    nav ul li a span {
        display: block;
        width: 900px;
        margin-left: auto;
        margin-right: auto;
    }
    nav ul li a {
        font-size: 16px;
    }
    .header__entry {
        display: block;   
        box-sizing: border-box;     
        margin-left: auto;  
        margin-right: auto;  
        margin-bottom: 12px;    
        width: 900px;     
        font-size: 16px;  
        text-align: center;
    }
    .header__register {
        display: block;   
        box-sizing: border-box;         
        margin-left: auto;  
        margin-right: auto;      
        width: 900px;     
        font-size: 16px;  
        text-align: center;
    } 
    .based__text_link {
        line-height: 1.4;
    }
    .based__text_link img {
        display: none;
    } 
    .based__image img{
        margin-left:0;
    }
    .based__text_p {     
        width: 100%;      
    }
    .tasks {        
        padding-bottom: 40px;   
        flex-direction:column;   
    }
    .tasks__text {
        width: 100%;
        padding-left:0;
    }
    .tasks__image {
        width: 100%;
        padding-bottom: 22px;
    }
    .tasks__image img {
        width: 100%;
    }
    .spaces {      
        padding-bottom: 40px;        
    }
    .spaces__image img {
        width: 520px;
    }
    .api {
        flex-direction: column;
        padding-bottom: 40px;        
    }
    .api__top img {
        width: 522px;
    }
    .api__bottom {
        margin-top: -100px;
    }
    /*.api__right img {
        display: none;
    }
    .api__left img {
        display: none;
    }*/
    /*.api__left, .api__right {
        width: 100%;
    }*/
    .capabilities {
        display: none;
    }
    .capabilities-mobile {
        padding-bottom: 22px;
        display: block;
    }
    .capabilities-list-mobile {
        list-style-type: none;
        margin: 0;
        padding:0;
    }
    .capabilities-item-mobile {
        background-color: white;
        border-radius: 24px;
        padding:24px 24px 24px 24px;
        margin-bottom: 24px;
    }
    .capabilities-item-mobile__text img {
        width: 100%;
    }
    .capabilities-item-mobile__text.hidden {
        display: none;
    }
    .capabilities-item-mobile__title {
        font-weight: 600;
        font-size: 22px;
        position: relative;
        width: 100%;
        display: inline-block;
    }
    .capabilities-item-mobile__title:after {
        content: ' ';
        position: absolute;
        z-index: 1;
        right: 0;
        top: 50%;
        display: block;
        width: 8px;
        height: 8px;
        -webkit-transform: translateY(-75%) rotate(45deg);
        -ms-transform: translateY(-75%) rotate(45deg);
        transform: translateY(-75%) rotate(45deg);
        border-bottom: 1.5px solid #474A52;
        border-right: 1.5px solid #474A52;
    }
    .capabilities-item-mobile__title.open:after {
        -webkit-transform: translateY(-0%) rotate(225deg);
        -ms-transform: translateY(-0%) rotate(225deg);
        transform: translateY(-0%) rotate(225deg);       
    }
    .capabilities__tasks-list {
        width: 100%;
        margin: 0;
        padding: 0 0 0 14px;
    }
    .capabilities__tasks-list li {
        width: 130px;
    }
    .slide__p_2 {
        width: 100%;
        padding-top: 16px;
        padding-bottom:10px;
    }
    .slide__p_3 {
        padding-top: 5px;
        padding-bottom: 10px;
    }
    .slide__p_4 {   
        padding-bottom: 10px;
    }
    .help-btn {
        right:10px;
    }
    .help-btn img { 
        width: 56px;
        height:56px;    
    }
}
@media (max-width: 910px) { 
    .container {
        width: 720px;
    }
    nav ul li a span {     
        width: 720px;     
    }
    .header__entry {     
        width: 720px; 
    }
    .header__register {      
        width: 720px;
    } 
    h2 {
        font-size: 32px;
    }
    .based__text {
        padding-right: 0;
        width: 55%;
    }
    .based__image {
        width: 45%;
    }
    .based__image img {
        margin-left: 0;
        width: 320px;
    }
    .spaces {        
        flex-direction: column;
    }
    .spaces__text {
        width: 100%;
        order:2; 
    }
    .spaces__image {
        width: 100%;  
        order:1;    
    }
    .spaces__image img {
        width: 100%;
    }
    .api__top {       
        flex-direction: column;
    }
    .api__top img {
        order:1;
        width: 100%;
    }       
    .api__top p {
        order:12;
        width: 100%;
        margin-bottom: 30px;
    }
    .api__bottom {
        margin-top: 0;
        flex-direction: column;
        align-items: baseline;
    }
    .api__bottom img {       
        width: 100%;
    }
    .api__bottom p {
        padding-left: 0;     
    }
    .technology {
        max-width: 700px;
    }
    .technology__block {      
        width: 41%;      
    }
    .form {
        max-width: 700px;
    }
    .footer__nav {       
        flex-direction: column;
    }
}
@media (max-width: 749px) { 
    .container {
        width: 500px;
    }
    nav ul li a span {     
        width: 500px;     
    }
    .header__entry {     
        width: 500px; 
    }
    .header__register {      
        width: 500px;
    } 
    .section__based {
        padding-top: 100px;
        padding-bottom: 60px;  
        background: url("../images/cloud_mobile.svg") no-repeat;
        background-position-x: center;
        background-position-y: -36px;
    }
    .based {      
        flex-direction: column;
    }
    .based__image {
        order:1;
        width:100%;
        text-align: center;
        padding-bottom:40px;
    }
    .based__text {
        order:2;
        width:100%;
    }
    .based__text_link-box {
        text-align: center;
        width: 100%;
        display: inline-block;
    }
    .based__text_link {
        display: block;  
        box-sizing: border-box; 
        width: 100%;
        font-size: 20px;       
        text-align: center;           
        padding: 16px 20px;
    } 
    .pt-60 {
        padding-top: 20px;
    }
    .technology {
        max-width: 460px;
    }
    .form {
        max-width: 460px;
    }
    .technology__block {
        width: 100%;
    }
    .footer__list {       
        padding-right: 0;
    }  
} 
@media (max-width: 520px) { 
    .container {
        width: 328px;
    }
    nav ul li a span {     
        width: 328px;     
    }
    .header__entry {     
        width: 328px; 
    }
    .header__register {      
        width: 328px;
    } 
    .section__based {
        padding-top: 100px;
        padding-bottom: 40px;
    }
    h1 {
        font-size: 40px;
    }
    .pb-100 {
        padding-bottom: 36px;
    }    
    .pt-100 {
        padding-top: 36px;
    }
    .technology {       
        padding-bottom: 36px;
    }
    .technology__block {  
        padding: 28px 14px 36px 14px; 
    }
    .form {
        width: 328px;
    }
    .footer {        
        flex-direction: column;
        padding-bottom: 30px;
    }
    .footer__nav {
        padding-top: 0px;
    }
    .under-logo-item { 
        padding-bottom: 20px !important;
    }
}
@media (max-width: 359px) { 
    .container {
        width: 300px;
    } 
    nav ul li a span {     
        width: 300px;     
    }
    .header__entry {     
        width: 300px; 
    }
    .header__register {      
        width: 300px;
    } 
    .based__image img {
        width: 300px;
    }
    .based__text_link {
        font-size: 18px;
    }
    .form {
        width: 300px;
    }
}