@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter-Regular.otf');
}

@font-face {
    font-family: 'Inter Thin';
    src: url('../fonts/Inter/Inter-Thin.otf');
}

@font-face {
    font-family: 'Onest';
    src: url('../fonts/Onest/Onest-Regular.ttf');
}

@font-face {
    font-family: 'Onest Thin';
    src: url('../fonts/Onest/Onest-Thin.ttf');
}

:root {
    --main-color: #0223B5;
    --height: 43px;
    --light-blue: rgba(2, 35, 181, .1);
}

* {
    margin: 0;
    padding: 0;
    outline: none;
    border: none;
    font-family: Onest, sans-serif;
    box-sizing: border-box;
    font-size: 16px;
}

html {
    overflow-x: hidden;
}

html, body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.page-wrapper {
    flex-grow: 1;
}

html, body, .page-wrapper {
    width: 100%;
}

a {
    text-decoration: none;
    color: #000;
    font-size: 14px;
}

button {
    background-color: transparent;
    cursor: pointer;
}

ul, li {
    list-style-type: none;
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 30px;
}

.header-wrapper {
    padding: 13px 30px;
    border-radius: 10px;
    box-shadow: 0 0 30px 10px #eee;
    position: sticky;
    margin: 0 auto;
    top: 0;
    background-color: #fff;
    z-index: 135;
    height: 73px;
    width: calc(100% - 200px);
    display: flex;
    align-items: center;
}

.header-wrapper.border-radius-top {
    border-radius: 10px 10px 0 0;
}

.page-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 40px;
    justify-content: space-between;
    height: 43px;
}

.page-header__page-navigation > ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 72px;
}

.page-header__logo-block {
    margin-right: auto;
    min-width: 100px;
    max-width: 100px;
}

.page-header__logo-block img {
    transform: translateY(1px);
}

.page-header__page-navigation {
    margin-left: 12px;
    padding-right: 40px;
    height: 22px;
    overflow: hidden;
}

.page-header__page-navigation button,
.page-header__page-navigation a {
    position: relative;
    transition: color .3s;
    cursor: pointer;
    font-size: 18px;
}

.page-header__page-navigation button:hover,
.page-header__page-navigation a:hover {
    color: var(--main-color);
}

.page-header__page-navigation button:after,
.page-header__page-navigation button.active-nav:after {
    content: '';
    width: 14px;
    height: 14px;
    position: absolute;
    top: 50%;
    transform: translateY(-45%);
    left: calc(100% + 8px);
    display: block;
    background: url('../img/arrows.svg') no-repeat center / 14px;
    transition: .3s;
}

.page-header__page-navigation button.active-nav:after {
    transform-origin: 50% 25%;
    transform: rotateX(180deg);
}

.free-demo-btn {
    border-radius: 9px;
    background-color: var(--main-color);
    color: #fff;
    padding: 13px 20px;
    height: 47px;
    white-space: nowrap;
}

.sub-menu,
.page-footer .footer-container {
    width: 100%;
    padding: 40px 0 20px;
    margin-top: 13px;
}

.sub-menu {
    display: none;
    background-color: #fff;
    left: 0;
    border-radius: 0 0 10px 10px;
    padding: 40px 30px 30px;
}

.header-wrapper .sub-menu {
    position: absolute;
    box-shadow: 0 7px 14px 2px #eee;
    top: 60px;
}

.sub-menu:before {
    content: '';
    display: block;
    width: calc(100% - 60px);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(100, 130, 254, .22);
    height: 1px;
}

.sub-menu > div {
    display: flex;
    justify-content: flex-end;
}

.header-wrapper .sub-menu__how-to-start-items > .articles-keeper > a,
.header-wrapper .sub-menu__about-us-items > .articles-keeper > a {
    flex-grow: 1;
}

.sub-menu__blog-items .cases .cases__list a {
    display: block;
    width: 340px;
}

.sub-menu .articles-keeper,
.page-footer .articles-keeper {
    display: flex;
    width: 100%;
    max-width: 1001px;
    flex-wrap: wrap;
}

.sub-menu .articles-keeper {
    justify-content: flex-start;
    gap: 37px 110px;
}

.page-footer .articles-keeper {
    justify-content: space-between;
    gap: 37px 25px;
}

.sub-menu.blog-items .articles-keeper {
    padding-right: 178px;
}

.sub-menu .articles-keeper article:not(:last-child),
.page-footer .articles-keeper article:not(:last-child) {
    margin-right: 26px;
}

.sub-menu h2,
.page-footer h2 {
    font-size: 18px;
    color: var(--main-color);
    font-weight: 600;
}

.sub-menu .list-img-block,
.page-footer .list-img-block {
    width: 35px;
    padding-top: 5px;
}

.sub-menu .list-img-block > img,
.page-footer .list-img-block > img {
    height: 35px;
    object-fit: contain;
}

.sub-menu span,
.sub-menu .sub-menu-article-list li,
.page-footer span,
.page-footer .sub-menu-article-list li {
    display: block;
    font-family: Inter, sans-serif;
    color: #232323;
    line-height: 22px;
    font-size: 15px;
}

.sub-menu span.sub-title,
.page-footer span.sub-title {
    color: rgba(35, 35, 35, .6);
    font-size: 13px;
    margin-top: 7px;
}

.sub-menu article > div,
.sub-menu .sub-menu-article-list,
.page-footer article > div,
.page-footer .sub-menu-article-list {
    margin-top: 17px;
}

.sub-menu .product-menu-content > a {
    display: block;
}

.sub-menu .product-menu-content > div:not(:first-child),
.page-footer .product-menu-content > div:not(:first-child) {
    margin-top: 25px;
}

.sub-menu .products,
.page-footer .products {
    width: 260px;
}

.sub-menu .details,
.page-footer .details {
    padding-left: 40px;
}

.sub-menu .title-wrapper,
.page-footer .title-wrapper {
    padding-right: 30px;
    position: relative;
    display: block;
}

.sub-menu .title-wrapper:before,
.mobile-menu-platform > article .sub-menu .title-wrapper:before,
.page-footer .title-wrapper:before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 33px;
    height: 33px;
    background: no-repeat center / 33px;
}

.mobile-menu-platform > article .sub-menu .title-wrapper:before {
    background: no-repeat center / 25px;
}

.sub-menu .recruitment-system .title-wrapper:before,
.mobile-menu-platform > article .sub-menu .recruitment-system .title-wrapper:before,
.page-footer .recruitment-system .title-wrapper:before {
    background-image: url('../img/man.svg');
}

.sub-menu .performance .title-wrapper:before,
.mobile-menu-platform > article .sub-menu .performance .title-wrapper:before,
.page-footer .performance .title-wrapper:before {
    background-image: url('../img/dashboard-stats.svg');
}

.sub-menu .talent-management .title-wrapper:before,
.mobile-menu-platform > article .sub-menu .talent-management .title-wrapper:before,
.page-footer .talent-management .title-wrapper:before {
    background-image: url('../img/graduation.svg');
}

.sub-menu a,
.page-footer a {
    font-family: Inter, sans-serif;
}

.page-title {
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden;
    color: #000;
    white-space: nowrap;
}

.sub-menu .sub-menu-article-list li:not(:first-child),
.page-footer .sub-menu-article-list li:not(:first-child) {
    margin-top: 12px;
}

.page-footer .footer-blog-title {
    margin-top: 30px;
}

.active-nav {
    font-weight: 700;
    color: var(--main-color);
}

.sub-menu.showed {
    display: block;
}

.sub-menu .how-to-start-article,
.sub-menu .about-us-article {
    padding: 20px;
    height: 136px;
    transform: translateY(-20px);
    border-radius: 10px;
    position: relative;
    cursor: pointer;
}

.sub-menu .how-to-start-article {
    background: rgba(2, 35, 181, .05) url('../img/girl.svg') no-repeat bottom right / 70% 82%;
}

.sub-menu .about-us-article {
    background: rgba(2, 35, 181, .05) url('../img/girl_3.svg') no-repeat bottom right / 70% 82%;
}

.sub-menu .how-to-start-article:after,
.sub-menu .about-us-article:after {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background: url('../img/arrows.svg') no-repeat center / 20px;
    position: absolute;
    right: 20px;
    bottom: 20px;
    transform: rotate(-90deg);
}

.page-header__btn-block {
    display: flex;
    align-items: center;
    gap: 27px;
    position: relative;
}

.hamburger-place {
    position: relative;
    width: 26px;
    height: 26px;
    display: none;
    cursor: pointer;
}

.hamburger-menu > .menu__btn {
    cursor: pointer;
}

/* hamburger */

#menu__toggle {
    opacity: 0;
}

#menu__toggle:checked + .menu__btn > span {
    transform: rotate(45deg);
}

#menu__toggle:checked + .menu__btn > span::before {
    top: 0;
    transform: rotate(0deg);
}

#menu__toggle:checked + .menu__btn > span::after {
    top: 0;
    transform: rotate(90deg);
}

#menu__toggle:checked ~ .menu__box {
    right: 0 !important;
}

.hamburger-menu {
    display: none;
}

.demo-page__page-modal-wrapper .hamburger-menu {
    display: block;
}

.hamburger-menu,
.demo-page__page-modal-wrapper .hamburger-menu {
    position: fixed;
    top: 28px;
    right: 30px;
    width: 26px;
    height: 26px;
    cursor: pointer;
    z-index: 136;
}

.menu__btn {
    display: block;
    width: 100%;
    height: 100%;
    transform: translateY(-100%);
}

.menu__btn > span {
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #000;
    transition-duration: .25s;
    border-radius: 3px;
}

.menu__btn > span::before {
    content: '';
    top: -8px;
}

.menu__btn > span::after {
    content: '';
    top: 8px;
}



/* mobile-platform */

.mobile-menu-platform-wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(2, 35, 181, .3);
    z-index: 135;
    display: flex;
    justify-content: flex-end;
}

.mobile-menu-platform {
    width: 300px;
    background-color: #fff;
    height: 100%;
    overflow-y: auto;
}

.mobile-menu-platform.not-menu {
    width: 500px;
}

.mobile-menu-platform > article {
    height: 100%;
    padding: 26px 30px 30px;
    display: none;
}

.mobile-menu-platform > article .mobile-title {
    position: relative;
}

.mobile-menu-platform > article .mobile-title h2 {
    font-size: 22px;
    color: var(--main-color);
    position: relative;
    padding-left: 20px;
    display: inline-block;
}

.mobile-menu-platform > article .mobile-title h2:before {
    content: '';
    background: url('../img/arrows.svg') no-repeat center / 13px;
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-41%) rotate(90deg);
    left: 0;
    width: 12px;
    height: 12px;
    font-size: 14px;
}

.mobile-back-btn {
    position: absolute;
    top: 0;
    left: -4px;
    width: calc(100% + 10px);
    height: 28px;
    z-index: 9999;
}

.mobile-menu-platform > article.flex {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.mobile-menu-platform > article.flex .sub-menu,
.mobile-menu-platform .mobile-menu-list {
    margin-top: auto;
}

.mobile-menu-platform > article .sub-menu {
    padding: 20px 0 0;
    border-top: none;
}

.mobile-menu-platform > article .sub-menu.show {
    display: block;
}

.mobile-menu-platform > article .sub-menu .articles-keeper {
    gap: 30px 25px;
}

.mobile-menu-platform > article .sub-menu a.title,
.mobile-menu-platform > article .sub-menu a {
    font-size: 13px;
}

.mobile-menu-platform > article .sub-menu h2 {
    font-size: 15px;
}

.mobile-menu-platform > article .sub-menu span.sub-title {
    margin-top: 3px;
    font-size: 11px;
}

.mobile-menu-platform > article .sub-menu .sub-menu-article-list li:not(:first-child) {
    margin-top: 6px;
}

.mobile-menu-platform > article .sub-menu .product-menu-content > div:not(:first-child) {
    margin-top: 12px;
}

.mobile-menu {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.mobile-menu .free-demo-btn {
    text-align: center;
}

.mobile-menu-list {
    margin-bottom: 50px;
}

.mobile-menu-list > li:not(:first-child) {
    margin-top: 15px;
}

.mobile-menu-list > li > button,
.mobile-menu-list > li > a {
    font-size: 24px;
    display: inline-block;
    position: relative;
}

.mobile-menu-list > li > button:after {
    content: '';
    background: url('../img/arrows.svg') no-repeat center / 13px;
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-39%) rotate(-90deg);
    left: calc(100% + 7px);
    width: 12px;
    height: 12px;
    font-size: 14px;
}

.mobile-menu-platform .articles-keeper {
    flex-direction: column;
}

.mobile-menu-platform .articles-keeper > article {
    width: 100%;
}

.mobile-menu-platform .articles-keeper a {
    margin: 26px 26px 0 0;
}

.mobile-menu-platform .sub-menu .how-to-start-article {
    width: auto;
}

.modal.hide {
    display: none;
}



/* Footer */

.page-footer {
    width: 100%;
    min-height: 282px;
    background-color: var(--light-blue);
    margin-top: auto;
    padding: 0 100px 10px;
}

.page-footer .footer-container {
    width: 100%;
}

.page-footer .footer-logo > figure {
    min-width: 100px;
    max-width: 100px;
}

.page-footer .articles-keeper {
    margin-top: 30px;
}

.page-footer .articles-keeper .contacts {
    width: 249px;
    display: flex;
    flex-direction: column;
}

.page-footer .social-links {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-footer .social-links.mobile {
    display: none;
}

.page-footer .social-link > svg {
    width: 36px;
    height: 36px;
}

.page-footer .social-link path {
    transition: fill .3s;
}

.page-footer .social-link:hover path {
    fill: var(--main-color);
}

.page-footer .articles-keeper .stories {
    width: 300px;
    display: flex;
    flex-direction: column;
}

.page-footer .all-rights-reserved,
.page-footer .all-rights-reserved > span {
    font-size: 14px;
}

.page-footer .all-rights-reserved {
    margin-top: auto;
    font-weight: 400;
    color: #999;
}

.page-footer .all-rights-reserved > span {
    font-weight: 600;
    display: inline;
}

.page-footer .privacy-policy.portable,
.page-footer .all-rights-reserved.portable,
.page-footer .mobile-reserved-and-policy {
    display: none;
}

.page-footer .articles-keeper .privacy-policy.portable,
.page-footer .articles-keeper .stories .all-rights-reserved.portable {
    transform: translateX(-22px);
}

.page-footer .articles-keeper {
    max-width: initial;
    min-height: 403px;
}

.header-wrapper .sub-menu__blog-items .articles-keeper .cases__list li,
.page-footer .articles-keeper .stories li,
.mobile-menu-article .sub-menu__blog-items .services__list li {
    position: relative;
    padding-left: 22px;
}

.about-us-mobile .articles-keeper .services,
.about-us-mobile .articles-keeper .tech-support {
    height: 10px;
}

.how-to-start-mobile .articles-keeper .tech-support {
    height: 13px;
}

.page-footer .articles-keeper .sub-menu-article-list li a:first-child {
    transition: color .3s;
}

.page-footer .articles-keeper .sub-menu-article-list li a:first-child:hover {
    color: var(--main-color);
}

.header-wrapper .sub-menu__blog-items .articles-keeper .cases__list li::before,
.page-footer .articles-keeper .stories li::before,
.mobile-menu-article .sub-menu__blog-items .services__list li::before {
    content: '';
    background: url('../img/arrows.svg') no-repeat center / 13px;
    display: block;
    position: absolute;
    top: 6px;
    left: 0;
    width: 13px;
    height: 13px;
    font-size: 14px;
    transform: rotate(-90deg);
}

.page-footer .privacy-policy {
    color: #999;
    text-decoration: underline;
    display: block;
    margin-top: auto;
}

.main-content section:not(.trust-us, .reviews, .SAAS, .calculator, .slider-conditions) {
    padding: 0 100px;
}

.main-content section:not(:first-child) {
    margin-top: 100px;
}



/* main content */

.main-content {
    width: 100%;
    margin: 72px 0 0;
    flex-grow: 1;
    padding-top: 100px;
}

.main-content .main-block {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 80px;
}

.main-content .main-block .main-title-wrapper {
    max-width: 600px;
}

.english .main-content .main-block .main-title-wrapper {
    min-width: 400px;
}

.turkish .main-content .main-block .main-title-wrapper {
    min-width: 385px;
}

.main-content .main-block .main-title-wrapper.mobile {
    display: none;
}

.main-content .main-block .main-btns-block {
    margin-top: 70px;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.main-content .main-block .logo-preview {
    width: 727px;
    transform: translateX(5%);
}

.main-content .main-block .logo-preview-mobile {
    display: none;
}

.main-btn-view {
    border: 1px solid var(--main-color);
    padding: 12px 22px;
    border-radius: 8px;
    color: #fff;
    background-color: var(--main-color);
    text-align: center;
    font-size: 17px;
}

.main-content .main-block .main-btns-block .main-btn-view:last-child {
    color: var(--main-color);
    background-color: #fff;
}



/* trust us */

.main-content section.trust-us {
    margin-top: 180px;
}

.main-content .title-block.spec {
    padding: 0 100px;
}

.main-content .title-block h2,
.main-content .title-block h2 span {
    text-transform: uppercase;
    font-size: 27px;
}

.main-content .title-block h2 span {
    color: var(--main-color);
}

.main-content .title-block p {
    margin-top: 10px;
}

.main-content .swiper-marquee {
    width: 100%;
    height: var(--height);
    margin-top: 40px;
}

.main-content .swiper-marquee .swiper-slide {
    width: 100px;
    height: var(--height);
}

.main-content .swiper-marquee .swiper-wrapper {
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
}

.main-content .swiper-marquee img {
    object-fit: contain;
}

.main-content .trust-btn-block {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.main-content .mobile-marquee.hide {
    display: none;
}


/* advantages */

.main-content .advantages__content-wrapper .tabs {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.main-content .advantages__content-wrapper {
    margin-top: 30px;
}

.main-content .advantages__content-wrapper .advantages-tab {
    padding: 12px 30px;
    border: 1px solid #ddd;
    border-radius: 23px;
    transition: .3s;
    background-clip: padding-box;
}

.main-content .advantages__content-wrapper .advantages-tab:hover,
.main-content .advantages__content-wrapper .advantages-tab.active-tab {
    color: var(--main-color);
    background-color: var(--light-blue);
    border-color: var(--light-blue);
}

.main-content .advantages__content-wrapper > article {
    background-color: var(--light-blue);
    border-radius: 25px;
    padding: 30px 30px 20px;
    overflow: hidden;
    margin-top: 16px;
}

.main-content .advantages__content-wrapper > article .advantages-title h2 {
    color: var(--main-color);
    font-size: 26px;
    font-weight: 400;
}

.main-content .advantages-article-item {
    display: none;
}

.main-content .advantages-article-item.show {
    display: block;
}

.main-content .advantages-content {
    display: flex;
    justify-content: space-between;
}

.main-content .advantages-article.text {
    padding-bottom: 33px;
    width: 306px;
    display: flex;
    flex-direction: column;
}

.main-content .advantages-article.text p {
    font-size: 14px;
    margin-top: 8px;
}

.main-content .advantages-article.text div:nth-child(2) {
    width: 303px;
}

.main-content .advantages-article.text div:not(.first-child) {
    margin-top: 31px;
}

.main-content .advantages-article.text div:nth-last-child(2) {
    margin-bottom: 22px;
}

.main-content .advantages-article.text div:last-child {
    margin-top: auto;
}



/* achievements */

.main-content .achievements {
    padding: 0 100px;
    display: grid;
    grid: repeat(2, minmax(160px, 1fr)) / repeat(12, 1fr);
    gap: 15px;
}

.main-content .achievements .achievement {
    border: 2px solid #ddd;
    border-radius: 25px;
    padding: 40px;
    display: flex;
    flex-direction: column;
}

.main-content .achievements .achievement span {
    display: block;
}

.main-content .achievements .achievement span:first-child {
    font-size: 50px;
    text-transform: uppercase;
}

.main-content .achievements .achievement.agile span:first-child {
    font-size: 65px;
}

.main-content .achievements .achievement.agile span.special-turkish-1 {
    font-size: 45px;
}

.main-content .achievements .achievement.agile span:last-child {
    width: 123px;
}

.main-content .achievements .achievement.agile span.special-turkish-2 {
    width: 150px;
}

.main-content .achievements .achievement:not(.blue-article) span:first-child {
    color: var(--main-color);
}

.main-content .achievements .achievement.experience {
    grid-column: 1 / 3;
}

.main-content .achievements .achievement.modules {
    grid-column: 3 / 6;
}

.main-content .achievements .achievement.clients {
    grid-column: 6 / 9;
}

.main-content .achievements .achievement.agile {
    background: url('../img/girl_2.svg') no-repeat 80% 85% / 220px;
    grid-area: 1 / 9 / 3 / 13;
}

.main-content .achievements .achievement.licences {
    grid-column: 1 / 5;
}

.main-content .achievements .achievement.hours {
    grid-column: 5 / 9;
}

.main-content .achievements .achievement.blue-article {
    background-color: var(--main-color);
    border-color: var(--main-color);
    color: #fff;
}



/* blog */

.main-content .blog .title-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.main-content .blog .title-block h2 {
    color: var(--main-color);
    font-size: 30px;
}

.main-content .blog .blog__cards {
    display: flex;
    justify-content: space-between;
    gap: 0 15px;
    margin-top: 45px;
}

.main-content .blog .blog__card {
    width: calc(100% / 4);
    height: 320px;
    background-color: var(--light-blue);
    overflow: hidden;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
}

.main-content .blog .blog__card figure {
    border-radius: 30px;
    overflow: hidden;
    max-height: 191px;
}

.main-content .blog .blog__card .card-info {
    padding: 14px 40px 30px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.main-content .blog .blog__card p {
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    font-size: 14px;
    margin-bottom: 15px;
}

.main-content .blog .blog__card .blog-card-link {
    display: block;
    margin-top: auto;
    align-self: flex-end;
    color: var(--main-color);
    text-decoration: underline;
}

.main-content .blog .blog__card.last-card {
    padding: 30px;
    justify-content: flex-end;
}

.main-content .blog .last-card-link {
    text-decoration: underline;
    font-size: 18px;
    display: block;
    position: relative;
}

.main-content .blog .last-card-link.mobile-link {
    padding-right: 30px;
    display: none;
}

.main-content .blog .last-card-link::before {
    content: '';
    background: url('../img/arrows.svg') no-repeat center / 13px;
    display: block;
    position: absolute;
    top: 6px;
    right: 0;
    width: 13px;
    height: 13px;
    font-size: 14px;
    transform: rotate(-90deg);
}

.main-content .webinars {
    margin-top: 21px;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 0;
}

.main-content .webinars .webinars-body {
    width: 57%;
    border: 2px solid var(--light-blue);
    border-radius: 30px;
    padding: 30px;
}

.main-content .webinars h2{
    text-transform: uppercase;
    font-size: 20px;
}

.main-content .webinars .webinars-body .tags-block {
    display: flex;
    flex-wrap: wrap;
    margin-top: 35px;
    gap: 10px;
}

.main-content .webinars .webinars-body .tags-block .tag {
    display: inline-block;
    border: 1.5px solid #ddd;
    border-radius: 20px;
    padding: 6px 16px;
    color: var(--main-color);
    font-size: 14px;
}

.main-content .webinars .webinars-body .webinar-description {
    margin-top: 20px;
    font-size: 17px;
    padding-right: 20px;
}

.main-content .webinars .webinars-body .time-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 50px;
    gap: 10px;
}

.main-content .webinars .webinars-body .time-block time {
    display: inline-block;
    color: #999;
    font-size: 14px;
    position: relative;
    padding-left: 45px;
    height: 100%;
}

.main-content .webinars .webinars-body .time-block time:before {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    background: url('../img/calendar.svg') no-repeat center / 30px;
}

.main-content .webinars .subscribe {
    flex-grow: 1;
    border: 2px solid var(--main-color);
    background-color: var(--main-color);
    border-radius: 30px;
    padding: 30px;
    display: flex;
    flex-direction: column;
}

.main-content .webinars .subscribe .block-header {
    color: #fff;
}

.main-content .webinars .subscribe .block-header span {
    display: block;
    margin-top: 8px;
    font-family: 'Onest Thin', sans-serif;
    font-size: 15px;
}

.main-content .webinars .subscribe .email-input-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: auto;
    position: relative;
}

.main-content .webinars .subscribe .email-input-block:before {
    content: '';
    display: block;
    position: absolute;
    width: 72%;
    height: 200px;
    bottom: calc(100% - 50px);
    left: -10px;
    background: url('../img/post.svg') no-repeat center / 100% 100%;
}

.main-content .webinars .subscribe .email-field {
    flex-grow: 1;
    padding: 12px;
    border: 1.5px solid #fff;
    border-radius: 10px;
}

.main-content .webinars .subscribe .email-field::placeholder {
    font-size: 15px;
    color: #999;
}

.main-content .webinars .subscribe .subscribe-btn {
    border: 1.5px solid #fff;
    flex-grow: 1;
}



/* reviews */

.main-content .reviews .title-block h2 {
    color: var(--main-color);
}

.main-content .reviews .title-block {
    padding: 0 100px;
}

.main-content .reviews .thumbs-slider .swiper-slide {
    width: 110px;
    height: 44px;
    border: 1.5px solid var(--light-blue);
    background-clip: padding-box;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color .3s;
}

.main-content .reviews .slider-container {
    padding-left: 100px;
}

.main-content .reviews .thumbs-slider .swiper-slide:hover,
.main-content .reviews .thumbs-slider .swiper-slide-thumb-active {
    background-color: var(--light-blue);
}

.main-content .reviews .thumbs-slider .swiper-slide img {
    object-fit: contain;
    width: 42%;
}

.main-content .reviews .thumbs-slider {
    margin-top: 60px;
}

.main-content .reviews .thumbs-slider .swiper-wrapper {
    max-width: 900px;
    flex-wrap: wrap;
    margin-left: 0;
    gap: 17px 0;
}

.main-content .reviews .main-slider {
    margin-top: 15px;
}

.main-content .reviews .main-slider .swiper-slide {
    border-radius: 20px;
    background-color: var(--light-blue);
    width: 500px;
    height: 300px;
    padding: 35px;
    display: flex;
}

.main-content .reviews .main-slider .swiper-slide figure {
    max-width: 250px;
    min-width: 250px;
    height: 100%;
    border-radius: 14px;
    overflow: hidden;
}

.main-content .reviews .main-slider .swiper-slide img {
    object-fit: contain;
}

.main-content .reviews .main-slider .swiper-slide .text-block {
    display: flex;
    align-items: flex-end;
    padding-left: 30px;
}

.main-content .reviews .main-slider .swiper-slide .text-block .text-container {
    display: flex;
    flex-direction: column;
    height: 130px;
}

.main-content .reviews .main-slider .swiper-slide .text-block .text-container span {
    display: block;
}

.main-content .reviews .main-slider .swiper-slide .text-block .text-container .person-name {
    color: var(--main-color);
    font-size: 22px;
}

.main-content .reviews .main-slider .swiper-slide .text-block .text-container .person-position {
    font-size: 15px;
    margin-top: 5px;
    margin-bottom: 10px;
}

.main-content .reviews .main-slider .swiper-slide .text-block .text-container p {
    margin-top: auto;
    font-size: 15px;
}

.main-content .reviews .main-slider .swiper-slide .text-block .text-container .quotes {
    color: var(--main-color);
    display: inline;
}



/* SAAS */

.main-content .SAAS {
    border-radius: 50px;
    background-color: var(--light-blue);
    overflow: hidden;
    padding-bottom: 90px;
}

.main-content .SAAS .SAAS-cards {
    display: flex;
    justify-content: center;
    gap: 17px;
    padding: 100px;
}

.main-content .SAAS .SAAS-card {
    width: 100%;
    max-width: 550px;
    background-color: #fff;
    overflow: hidden;
    border-radius: 30px;
    padding: 30px;
    display: flex;
    flex-direction: column;
}

.main-content .SAAS .SAAS-card .card-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.main-content .SAAS .SAAS-card .card-tag {
    display: block;
    padding: 7px 15px;
    border: 1.5px solid #ddd;
    border-radius: 20px;
    font-size: 15px;
}

.main-content .SAAS .SAAS-card h2 {
    color: var(--main-color);
    text-transform: uppercase;
    font-size: 32px;
    margin-top: 80px;
}

.main-content .SAAS .SAAS-card ul {
    margin: 45px 0 80px;
}

.main-content .SAAS .SAAS-card ul li {
    list-style-type: none;
    font-size: 21px;
    font-family: 'Onest Thin', sans-serif;
    font-weight: 600;
}

.main-content .SAAS .SAAS-card ul li:not(:first-child) {
    margin-top: 12px;
}

.main-content .SAAS .SAAS-card .card-btn-block {
    margin-top: auto;
}

.main-content .SAAS .SAAS-card .connect-btn {
    width: 100%;
    color: var(--main-color);
    border: 1px solid var(--main-color);
    border-radius: 7px;
    padding: 10px 20px;
}

.main-content .SAAS .integrations .title-block {
    padding: 0 100px;
    color: var(--main-color);
}

.main-content .SAAS .sliders {
    margin-top: 37px;
}

.main-content .SAAS .swiper-integrations .swiper-slide {
    width: 150px;
    height: 75px;
    background-color: #fff;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-content .SAAS .swiper-integrations .swiper-slide img {
    object-fit: contain;
}

.main-content .SAAS .swiper-messengers .swiper-slide img {
    width: 45px;
}

.main-content .SAAS .swiper-messengers .swiper-slide img.whatsapp-logo {
    width: 53px;
}

.main-content .SAAS .swiper-job-sites .swiper-slide img.superjob-logo {
    width: 110px;
}

.main-content .SAAS .swiper-job-sites .swiper-slide img.linkedin-logo {
    width: 90px;
}

.main-content .SAAS .swiper-job-sites .swiper-slide img.headhunter-logo {
    width: 40px;
}

.main-content .SAAS .swiper-job-sites .swiper-slide img.avito-logo {
    width: 80px;
}

.main-content .SAAS .swiper-services .swiper-slide img.L-logo,
.main-content .SAAS .swiper-services .swiper-slide img.outlook-logo,
.main-content .SAAS .swiper-services .swiper-slide img.mexc-logo {
    width: 45px;
}

.main-content .SAAS .swiper-services .swiper-slide img.yandex-logo {
    width: 100px;
}

.main-content .SAAS .swiper-integrations {
    margin: 13px 0 0 -235px;
}

.main-content .SAAS .slider-title {
    padding: 0 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.main-content .SAAS .slider-title span {
    font-size: 15px;
}

.main-content .SAAS .slider-title > .control-arrows {
    width: 50px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.main-content .SAAS .slider-title .arrow-btn {
    width: 15px;
    height: 15px;
    background: center / 15px;
}

.main-content .SAAS .slider-title .prev-arrow {
    background-image: url('../img/arrows.svg');
    transform: rotate(90deg);
}

.main-content .SAAS .slider-title .next-arrow {
    background-image: url('../img/arrows.svg');
    transform: rotate(-90deg);
}

.main-content .SAAS .slider-wrapper {
    margin-top: 40px;
}



/* request */

.main-content .request .request-wrapper {
    width: 100%;
    background-color: var(--main-color);
    border-radius: 30px;
    overflow: hidden;
    padding: 50px;
    display: flex;
    justify-content: center;
}

.main-content .request .request-wrapper .block-container {
    width: 100%;
    max-width: 500px;
}

.main-content .request .request-wrapper .block-container .request_title-img-mobile {
    display: none;
}

.main-content .request .request-wrapper .request-btn-block {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.main-content .request .request-wrapper .presentation-btn {
    background-color: #fff;
    color: var(--main-color);
    width: 80%;
}



/* mass media */

.main-content .mass-media {
    margin-bottom: 100px;
}

.main-content .mass-media .media-blocks-container {
    width: 100%;
    display: grid;
    grid: repeat(2, 1fr) / repeat(6, minmax(110px, 1fr));
    gap: 17px;
    margin-top: 40px;
}

.main-content .mass-media .media-blocks-container .media-block {
    border-radius: 20px;
    min-height: 170px;
    padding: 30px;
    color: #fff;
    display: flex;
    align-items: flex-end;
}

.main-content .mass-media .media-blocks-container .media-block:first-child {
    grid-column: 1 / 3;
    background: var(--main-color) url('../img/camera.svg') no-repeat 25px 20px / 70px;
}

.main-content .mass-media .media-blocks-container .media-block:not(:first-child) {
    width: 100%;
    background-color: #ddd;
    justify-content: center;
    align-items: center;
}

.main-content .mass-media .media-blocks-container .media-block img {
    object-fit: contain;
    min-width: 70px;
    width: 60%;
}

.main-content .mass-media .media-blocks-container .media-block img.vcru-logo {
    width: 40%;
}



/* language-panel */

.language-keeper {
    min-width: 49px;
    height: 40px;
    position: relative;
    z-index: 3;
}

.language-panel {
    padding: 7px;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    height: 39px;
    transition: .3s;
    background-color: #fff;
    border-radius: 5px;
    overflow: hidden;
}

.language-panel.hide {
    box-shadow: none;
}

.language-panel,
.language-panel.hide:hover {
    box-shadow: 0 0 10px 2px #ddd;
}

.language-panel .lang {
    display: block;
    width: 35px;
    height: 25px;
    cursor: pointer;
}

.language-panel .lang:not(:first-child) {
    margin-top: 17px;
}

.language-panel.english .current-lang,
.language-panel.turkish .available-lang.english {
    background: url('../img/langs/GB.svg') no-repeat center / 35px;
}

.language-panel.turkish .current-lang,
.language-panel.english .available-lang.turkish {
    background: url('../img/langs/TR.svg') no-repeat center / 35px;
}



/* demo page */

.demo-page {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #fff;
    padding: 40px;
    display: none;
    justify-content: center;
    z-index: 9999;
    overflow-y: auto;
}

.demo-page__page-modal-wrapper {
    width: 100%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.demo-page__page-modal-wrapper > h2 {
    font-size: 56px;
    color: var(--main-color);
    text-transform: uppercase;
}

.demo-page__page-modal-wrapper > p {
    text-align: center;
    width: 250px;
    margin-top: 10px;
}

.demo-page .demo-page-form {
    margin-top: 50px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.demo-page .demo-page-form .field-area,
.demo-page .demo-page-form .field-area > input {
    width: 100%;
    position: relative;
}

.demo-page .demo-page-form .field-area {
    height: 63px;
}

.demo-page .demo-page-form .field-area > input[type='checkbox'] {
    display: none;
}

.demo-page .demo-page-form .field-area.checkbox-area > label {
    padding-left: 15px;
    position: relative;
    cursor: pointer;
    pointer-events: all;
}

.demo-page .demo-page-form .field-area.checkbox-area > label:before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    border: 1px solid var(--main-color);
    border-radius: 5px;
    position: absolute;
    right: 100%;
    top: 0;
}

.demo-page .demo-page-form .field-area.checkbox-area > input:checked + label:before {
    background: url('../img/demo-form-tick.svg') no-repeat center / 16px;
}

.demo-page .demo-page-form .field-area:not(:first-child) {
    margin-top: 15px;
}

.demo-page .demo-page-form .field-area > label {
    position: absolute;
    display: block;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    color: #757575;
    z-index: 2;
    pointer-events: none;
    opacity: 1;
    transition: opacity .3s;
}

.demo-page .demo-page-form .field-area > label.required:after {
    content: '*';
    display: block;
    position: absolute;
    top: 0;
    left: calc(100% + 1px);
    font-size: 16px;
    color: #f00;
}

.demo-page .demo-page-form .field-area:nth-last-child(3) {
    margin-top: 40px;
}

.demo-page .demo-page-form .field-area > input {
    padding: 20px;
    background-color: #F1F1F1;
    border-radius: 10px;
}

.get-ready-btn {
    align-self: center;
    width: 100%;
    margin: 30px 0;
}

.flex {
    display: flex;
}

.cross-close-btn {
    position: absolute;
    top: 40px;
    right: 40px;
    width: 20px;
    height: 20px;
    background: url('../img/calculator/cross.svg') no-repeat center / 20px;
    z-index: 9999;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

input[type='number'] {
    -moz-appearance: textfield;
}

h2 {
    text-transform: uppercase;
}

.calculator {
    width: 100%;
    border-radius: 30px;
    background-color: #E6E9F8;
    padding: 100px 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.calculator__title,
.calculator__title > span {
    font-size: 30px;
}

.calc-form-wrapper {
    width: 100%;
    max-width: 844px;
}

.calc-form {
    width: 100%;
}

.calculator__title,
.calc-form-wrapper > span {
    text-align: center;
}

.calculator__title > span {
    color: var(--main-color);
}

.calc-form-wrapper {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.calc-form-wrapper > span {
    display: block;
    font-size: 20px;
}

.form-inputs-wrapper {
    margin-top: 30px;
    display: grid;
    grid: 1fr / repeat(2, minmax(10px, 413px));
    gap: 18px;
}

.form-btns-wrapper {
    margin-top: 35px;
    display: flex;
    justify-content: center;
    gap: 18px;
}

.form-btns-wrapper > * {
    width: 220px;
    padding: 15px;
    border: 1px solid var(--main-color);
    border-radius: 7px;
    display: block;
    text-align: center;
    color: #fff;
    cursor: pointer;
    font-size: 18px;
}

.form-btns-wrapper > .calc-request {
    color: var(--main-color);
    text-decoration: none;
}

.form-btns-wrapper > .calc-btn {
    background-color: var(--main-color);
}

.form-inputs-wrapper input::placeholder {
    color: #aaa;
}

.form-inputs-wrapper input {
    border-radius: 10px;
    padding: 15px 47px 15px 15px;
    width: 100%;
    max-width: 413px;
}

.calc-input-wrapper {
    position: relative;
    width: 100%;
}

.info-mark {
    pointer-events: all;
}

.calc-input-wrapper > .info-mark {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: url('../img/calculator/info.svg') no-repeat center / 20px;
}

.tariffs-and-costs {
    width: 100%;
    max-width: 1300px;
    position: relative;
}

.tariffs-and-costs-title {
    color: var(--main-color);
    font-size: 35px;
}

.tariffs-and-costs-title > span {
    color: #000;
    font-size: 35px;
}

.table-wrapper {
    background-color: #fff;
    padding-top: 40px;
    border-radius: 30px;
    margin-top: 80px;
}

.table-wrapper > h2 {
    padding: 0 30px;
}

.table-wrapper > h2:not(:first-child) {
    padding-top: 60px;
    padding-bottom: 15px;
}

.table-wrapper > div {
    height: 100%;
    padding: 30px 0 30px 30px;
}

.table-wrapper .check {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    white-space: nowrap;
    text-align: center;
}

.turkish .table-wrapper .check {
    white-space: normal;
    padding: 0 10px;
    text-align: center;
}

.table-wrapper .tariff-title {
    position: absolute;
    bottom: calc(100% + 9px);
    width: 100%;
    height: 165px;
    background-color: #fff;
    padding: 20px;
}

.table-wrapper .tariff-title,
.table-sticky-header > .tariff-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px;
    gap: 6px;
}

.table-sticky-header > .tariff-title {
    padding: 19px 30px 0 30px;
}

.table-wrapper .tariff-title > .popular-tariff,
.table-sticky-header > .tariff-title > .popular-tariff {
    position: absolute;
    width: 100%;
    pointer-events: none;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.table-wrapper .tariff-title > .popular-tariff:before {
    content: '';
    display: block;
    width: 100%;
    height: 40px;
    position: absolute;
    background-color: #fff;
}

.table-wrapper .tariff-title > .popular-tariff {
    box-shadow: 0 0 10px 1px #ddd;
    top: -15px;
}

.table-wrapper .tariff-title > .popular-tariff,
.table-sticky-header > .tariff-title > .popular-tariff {
    border-radius: 6px;
}

.table-sticky-header > .tariff-title > .popular-tariff {
    box-shadow: 0 0 5px -1px #555;
    height: calc(100% + 17px);
    background-color: #677BD3;
    z-index: -1;
}

.english .table-sticky-header .tariff-title > h3,
.english .table-wrapper .tariff-title > h3 {
    font-size: 24px;
}

.turkish .table-sticky-header .tariff-title > h3,
.turkish .table-wrapper .tariff-title > h3 {
    font-size: 20px;
}

.table-wrapper .tariff-title > h3 {
    color: var(--main-color);
}

.table-sticky-header .tariff-title > h3,
.table-sticky-header .tariff-title > .tariff-price,
.table-sticky-header .tariff-title > .tariff-period {
    color: #E4E7F6;
}

.table-wrapper .tariff-title > .tariff-price,
.table-sticky-header .tariff-title > .tariff-price {
    font-size: 20px;
}

.table-wrapper .tariff-title > .tariff-period,
.table-sticky-header .tariff-title > .tariff-period {
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.table-wrapper .tariff-title > .tariff-period {
    color: #999;
}

.table-wrapper .tariff-title > .tariff-period > .info-mark,
.table-sticky-header .tariff-title > .tariff-period > .info-mark {
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: relative;
}

.table-wrapper .tariff-title > .tariff-period > .info-mark {
    background: url('../img/calculator/info.svg') no-repeat center / 20px;
}

.table-sticky-header .tariff-title > .tariff-period > .info-mark {
    background: url('../img/calculator/info-bright.svg') no-repeat center / 20px;
}

.info-mark > .hint {
    position: absolute;
    padding: 10px;
    border-radius: 10px;
    background-color: #fff;
    min-width: 300px;
    max-width: 500px;
    top: 100%;
    left: 100%;
    box-shadow: 0 0 10px -1px #000;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
}

.calc-input-wrapper > .info-mark > .hint {
    top: calc(100% + 10px);
    left: -200px;
}

.info-mark:hover > .hint {
    opacity: 1;
}

.table-wrapper .first-tariff {
    border-radius: 12px 0 0 0;
}

.table-wrapper .third-tariff {
    border-radius: 0 12px 0 0;
    width: calc(100% + 1px);
}

.table-wrapper .table-row-title {
    position: relative;
    z-index: 2;
    background-color: #fff;
    display: grid;
    grid: minmax(34px, 1fr) / minmax(200px, 1fr) repeat(3, 200px);
}

.table-wrapper .table-row-title:first-child {
    padding-top: 0;
}

.table-sticky-header .hint,
.table-wrapper .table-row-title:first-child .hint {
    white-space: normal;
    top: calc(100% + 10px);
    left: auto;
    right: 0;
    min-width: 100px;
    max-width: 135px;
    text-align: center;
    color: #000;
}

.white-mask {
    position: absolute;
    width: 57%;
    height: 110px;
    background-color: #fff;
    top: -40px;
    border-radius: 30px 30px 0 0;
    right: 0;
    z-index: 2;
    display: none;
}

.table-wrapper .table-row-title > div:not(.white-mask) {
    position: relative;
    display: flex;
    align-items: center;
}

.table-wrapper .table-row-title .info-mark {
    width: 20px;
    height: 20px;
    background: url('../img/calculator/info.svg') no-repeat center / 20px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.table-wrapper .table-row-title:not(:first-child) .info-mark {
    left: calc(100% + 5px);
}

.table-wrapper .table-row-title:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    width: 96%;
    z-index: -1;
    height: 1px;
    background-color: #ddd;
    left: 50%;
    transform: translateX(-50%);
}

.table-wrapper .table-row-title .row-text > div {
    position: relative;
}

.table-wrapper .table-row-title .row-text {
    padding-right: 68px;
}

.tick {
    background: url('../img/calculator/tick.svg') no-repeat center / 18px;
}

.cross {
    background: url('../img/calculator/cross.svg') no-repeat center / 18px;
}

.dollar {
    background: url('../img/calculator/dollar.svg') no-repeat center / 12px;
}

.table-sticky-header {
    width: 100%;
    height: 130px;
    position: sticky;
    top: 73px;
    background-color: #677BD3;
    z-index: 131;
    display: grid;
    grid: 130px / minmax(200px, 1fr) repeat(3, 200px);
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s;
}

.show-sticky-header {
    opacity: 1;
}

.table-sticky-header > .tariff-title {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}

.table-container {
    max-height: 500px;
    transition: max-height .3s;
    overflow: hidden;
    padding-top: 100px;
    margin-top: -89px;
}

.table-control-btns {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 130;
    gap: 18px;
    margin-top: 40px;
}

.table-control-btns.mist:before {
    content: '';
    display: block;
    width: calc(100% + 30px);
    height: 300px;
    background-image: linear-gradient(to top, #E6E9F8 20%, transparent);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    transform: translateX(-15px);
}

.table-control-btn {
    position: relative;
}

.designations {
    width: 100%;
    grid-column: 1 / 5;
}

.designations > p {
    padding-left: 19px;
    position: relative;
    color: #677BD3;
}

.designations > p:before {
    content: '';
    display: block;
    width: 15px;
    height: 30px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    background: url('../img/calculator/dollar.svg') no-repeat center / 12px;
}

.table-control-btn {
    width: 300px;
    height: 49px;
    padding: 13px 15px;
    border: 1px solid var(--main-color);
    border-radius: 10px;
    cursor: pointer;
}

.table-control-btn.show-table {
    background-color: transparent;
    color: var(--main-color);
}

.table-control-btn.download {
    background-color: var(--main-color);
    color: #fff;
    text-decoration: none;
    text-align: center;
}

/* max-width: 1384px; */