@import url('variables.css');

/*BASE_CSS*/
html {
    scroll-behavior: smooth;
}

html::-webkit-scrollbar {
    width: 12px;
}

html::-webkit-scrollbar-track {
    background-color: var(--menu-color2);
}

html::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: var(--main-color);
}

body {
    width: 100vw;
    display: flex;
    margin: 0px;
    padding: 0px;
    justify-content: center;
    font-family: var(--main-font);
    background-color: var(--white-color);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow-x: hidden;
    overflow-y: auto;
}

.main-page {
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

/*HEADER*/
.main-page-header {
    display: flex;
    justify-content: center;
    width: 100%;
}

.main-page-header-container {
    display: flex;
    width: var(--c-full-width);
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 27px 0px 28px 0px;
    position: relative;
}

.main-page-header-logo {
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
    cursor: pointer;
}

.main-page-header-logo-text {
    width: 83px;
    height: 26px;
}

.main-page-header-navbar img {
    display: none;
    cursor: pointer;
    transition: var(--base-transition);
}

.main-page-header-navbar nav {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
}

.main-page-header-navbar a {
    outline: none;
    cursor: pointer;
    text-decoration: none;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: #000;
}

/*MAIN_PAGE_CONTAINER*/
.main-page-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

/*BASE_INFO_CONTAINER*/
.main-page-container-base {
    display: flex;
    width: var(--c-full-width);
    padding-top: 54px;
    padding-bottom: 56px;
    flex-direction: row;
    gap: 30px;
}

.main-page-container-base-l {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.main-page-container-base-l-1 {
    color: var(--text-color);
    font-size: 60px;
    font-style: normal;
    margin: 0px;
    font-weight: 700;
    line-height: 70px;
    letter-spacing: 0.07px;
    align-items: center;
    display: inline;
    overflow-wrap: break-word;
}

.main-page-container-base-l-1 img {
    width: 159px;
    height: 58px;
    vertical-align: middle;
}

.main-page-container-base-l-2 {
    display: flex;
    flex-direction: row;
    margin-top: 30px;
    gap: 64px
}

.main-page-container-base-l-2-l {
    display: flex;
    flex-direction: column;
    gap: 41px;
}

.main-page-container-base-l-2-l p {
    overflow-wrap: break-word;
}

.main-page-container-base-l-2-l-text-1 {
    color: var(--text-color);
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.07px;
    margin: 0px;
}

.main-page-container-base-l-2-l-text-2 {
    color: var(--text-color);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0px;
    width: 550px;
}

.main-page-container-base-l-2-r {
    display: flex;
    align-items: end;
}

.main-page-container-base-l-2-r img {
    width: 187px;
    height: 225px;
    object-fit: cover;
    border-radius: var(--img-border-radius);
}

.main-page-container-base-r {
    display: flex;
    align-items: end;
}

.main-page-container-base-r img {
    width: 288px;
    height: 358px;
    border-radius: 20px;
    object-fit: cover;
}

/*INSTALL_SECTION*/
.install-section-st {
    display: flex;
    flex-direction: row;
    animation: var(--section-show-in-animation-left);
}

.install-section-stub-1 {
    background-color: var(--menu-color2);
    flex: 1;
}

.install-section-stub-2 {
    flex: 1;
}

.install-section-st-container {
    border-top-right-radius: var(--section-border-radius);
    border-bottom-right-radius: var(--section-border-radius);
    padding-top: 53px;
    padding-bottom: 115px;
    background-color: var(--menu-color2);
    width: var(--c-full-width);
    display: flex;
    flex-direction: row;
    gap: 50px;
    align-items: center;
}

.install-section-st-info {
    display: flex;
    flex-direction: column;
    gap: 65px;
}

.install-section-st-info p {
    margin: 0px;
    overflow-wrap: break-word;
}

.install-section-st-info-text-1 {
    color: var(--text-color);
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.07px;
}

.install-section-st-info-text-2 {
    color: var(--text-color);
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.07px;
    width: 367px;
}

.install-section-st-info-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 50px;
}

.install-section-st-info-links div {
    cursor: pointer;
}

.install-section-st-info-links1 img {
    width: 182px;
    height: 61px;
}

.install-section-st-info-links2 img {
    width: 199px;
    height: 59px;
}

.install-section-st-container-img {
    width: 623px;
    height: 360px;
    object-fit: cover;
}

/*ABOUT_SECTION*/
.about-section-st {
    padding-top: 46px;
    padding-bottom: 66px;
    display: flex;
    justify-content: center;
}

.about-section-st-container {
    width: var(--c-full-width);
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.about-section-st-title {
    margin: 0px;
    color: var(--text-color);
    font-family: var(--sub-font);
    font-size: 25px;
    font-style: normal;
    font-weight: 600;
    line-height: 35px;
    letter-spacing: 0.07px;
    overflow-wrap: break-word;
    width: 437px;
}

.about-section-st-items {
    display: flex;
    flex-direction: row;
    gap: 34px;
    height: 287px;
}

.about-section-st-items-item p {
    overflow-wrap: break-word;
    margin: 0px;
}

.about-section-st-items-item img {
    object-fit: cover;
    position: absolute;
}

.about-section-st-items-item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: var(--small-conatiner-border-radius);
    background-color: var(--menu-color);
    flex: 1;
}

#about-section-st-items-item1 {
    padding: 51px 0px 66px 20px;
}

#about-section-st-items-item2 {
    padding: 51px 0px 42px 18px;
}

#about-section-st-items-item3 {
    padding: 51px 0px 66px 24px;
}

.about-section-st-items-item-title {
    color: var(--text-color);
    font-size: 27px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.07px;
}

#about-section-st-items-item-title1 {
    width: 133px;
}

#about-section-st-items-item-title3 {
    width: 161px;
}

.about-section-st-items-item-desc {
    color: var(--text-color);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.07px;
}

#about-section-st-items-item-desc1 {
    width: 280px;
}

#about-section-st-items-item-desc2 {
    width: 333px;
}

#about-section-st-items-item-desc3 {
    width: 300px;
}

.about-section-st-items-item-img1 {
    width: 162px;
    height: 143px;
    right: 0px;
    top: 0px;
}

.about-section-st-items-item-img2 {
    width: 152px;
    height: 135px;
    top: 0px;
    right: 0px;
}

.about-section-st-items-item-img3 {
    width: 115px;
    height: 122px;
    top: 0px;
    right: 0px;
}

/*STUB_SECTION*/
.stub-section {
    display: flex;
    flex-direction: row;
    animation: var(--section-show-in-animation-right);
}

.stub-section-stub-l {
    flex: 1;
}

.stub-section-stub-r {
    flex: 1;
    background-color: var(--menu-color2);
}

.stub-section-info {
    width: var(--c-full-width);
    background-color: var(--menu-color2);
    border-top-left-radius: var(--section-border-radius);
    border-bottom-left-radius: var(--section-border-radius);
}

.stub-section-info-container {
    padding-top: 70px;
    padding-left: 91px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.stub-section-info-container-img {
    display: flex;
    align-items: end;
}

.stub-section-info-container-img img {
    height: 458px;
    width: 422px;
    object-fit: cover;
}

.stub-section-info-text {
    padding-top: 21px;
    display: flex;
    flex-direction: column;
}

.stub-section-info-text-title {
    width: 560px;
    color: var(--text-color);
    font-size: 35px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.07px;
    margin: 0px;
    padding-bottom: 30px;
}

.stub-section-info-text-desc {
    color: var(--text-color);
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.07px;
    width: 543px;
    margin: 0px;
    padding-bottom: 59px;
}

/*PARTNERS_SECTION*/
.partners-section-st {
    display: flex;
    padding-top: 71px;
    padding-bottom: 71px;
    justify-content: center;
}

.partners-section-st-data {
    background-color: var(--back-color);
    border-radius: var(--big-container-border-radius);
    width: var(--c-full-width);
}

.partners-section-st-data-container {
    padding: 60px 36px 60px 57px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.partners-section-st-data-l {
    display: flex;
    flex-direction: column;
    gap: 46px;
}

.partners-section-st-data-l-title {
    margin: 0px;
    color: var(--text-color);
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.07px;
}

.partners-section-st-data-l-carousel {
    width: 600px;
    overflow: hidden;
    position: relative;
}

.partners-section-st-data-l-carousel-inner {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.partners-section-st-data-l-carousel-item {
    flex: 0 0 200px;
    height: 432px;
    margin: 0 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 20px;
    transition: transform 0.5s;
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: 25px;
    transform: scale(0.8);
}
.partners-section-st-data-l-carousel-item.active {
    transform: scale(1);
}

.partners-section-st-data-l-logo {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 34px;
}

.partners-section-st-data-l-logo img:nth-child(1) {
    width: 237px;
    height: 195px;
}

.partners-section-st-data-l-logo img:nth-child(2) {
    width: 159px;
    height: 58px;
    margin: auto;
}

.partners-section-st-data-form {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 563px;
    padding-bottom: 39px;
}

.partners-section-st-data-form div:last-child {
    margin-top: 17px;
    justify-content: end;
    display: flex;
}

#partners-section-st-data-form-in-1 {
    width: 276px;
}

/*FOOTER*/
.main-page-footer {
    display: flex;
    height: 328px;
    background-color: var(--menu-color);
    justify-content: center;
}

.main-page-footer-container {
    width: var(--c-full-width);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-bottom: 51px;
}

.main-page-footer-l {
    display: flex;
    flex-direction: column;
}

.main-page-footer-l-logo {
    padding-top: 27px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.main-page-footer-l-logo img:nth-child(1) {
    width: 49px;
    height: 40px;
}

.main-page-footer-l-logo img:nth-child(2) {
    width: 83px;
    height: 31px;
}

.main-page-footer-l-docs {
    padding-top: 39px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.main-page-footer-l-docs a {
    outline: none;
    color: var(--text-filter-color);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0px;
    text-decoration: none;
    border-bottom: 2px solid var(--text-filter-color);
    width: fit-content;
}

.main-page-footer-l-docs a:hover {
    transition: var(--base-hover-transition);
    border-color: transparent;
}

.main-page-footer-l-license {
    padding-top: auto;
    color: var(--text-color);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: auto;
    margin-bottom: 0px;
}

.main-page-footer-r {
    display: flex;
    flex-direction: column;
    padding-top: 37px;
}

.main-page-footer-r-nav {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.main-page-footer-r-nav a {
    text-decoration: none;
    outline: none;
    color: #000;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.main-page-footer-r-install-links {
    padding-top: 58px;
    display: flex;
    flex-direction: row;
    gap: 50px;
    align-items: center;
}

.main-page-footer-r-install-links div {
    cursor: pointer;
}