@import 'variables'; @import '_mixins'; html { scroll-behavior: smooth; scroll-padding-top: 105px; } strong { font-weight: 700; } p { &:last-child { margin-bottom: 0; } } .main-page { padding: 0; } .breadcrumbs { margin: 14px 0; } .section-title { position: relative; margin-bottom: 0; &::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #878787; transform: translateY(-50%); } span { position: relative; display: inline-block; color: $cTxtBlack; font-size: 32px; font-family: $font3; font-weight: 500; letter-spacing: 2px; margin-bottom: 0; text-transform: uppercase; padding-right: 30px; padding-top: 3px; background: $cWhite; @include respond-below(md) { font-size: 26px; } } } .box-1 { display: flex; flex-direction: column; @include respond-below(md) { margin-top: 30px; } ._row { &-1 { display: flex; flex-direction: row; align-items: center; gap: 30px; @include respond-below(md) { flex-direction: column; } ._col { &-1 { width: 100%; max-width: 430px; @include respond-below(md) { text-align: center; } h1 { position: relative; color: $cTxtBlack; font-family: $font3; font-size: 64px; letter-spacing: 2px; line-height: 1.1; font-weight: 700; text-transform: uppercase; margin-bottom: 25px; padding-bottom: 15px; &::before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: $cTxtBlack; @include respond-above(md) { max-width: 390px; } } @include respond-below(sm) { font-size: 44px; } } h2 { color: $cTxtBlack; font-family: $font3; font-size: 30px; letter-spacing: 2px; line-height: 1.2; font-weight: 300; text-transform: uppercase; @include respond-below(sm) { font-size: 24px; } } } &-2 { line-height: 0; video { width: 100%; height: 100%; } } } } &-2 { margin-top: 34px; margin-bottom: 72px; @include respond-below(sm) { font-size: 42px; } ._col { &-1 { position: relative; height: 64px; &::before { content: ''; position: absolute; top: 50%; left: 0; width: calc(50% - 50px); height: 1px; background: #878787; } &::after { content: ''; position: absolute; top: 50%; right: 0; width: calc(50% - 50px); height: 1px; background: #878787; } .img_box { position: relative; width: 56px; height: 64px; border-radius: 100%; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); z-index: 1; display: flex; align-items: center; justify-content: center; background: $cWhite; margin-left: auto; margin-right: auto; img { } } } } } } } .box-2 { background-image: url('/upload/filemanager/Pages/O-nas/box-bg-1.png'); background-position: center; background-repeat: no-repeat; background-size: cover; padding: 86px 0 90px; @include respond-below(sm) { padding: 50px 0 90px; } ._row { &-1 { margin-bottom: 50px; ._col { &-1 { width: 100%; max-width: 850px; p { color: $cTxtBlack; font-family: $font3; font-size: 22px; font-weight: 300; letter-spacing: -0.04px; line-height: 1.5; strong { font-weight: 600; } @include respond-below(md) { font-size: 20px; } @include respond-below(sm) { font-size: 18px; } } } &-2 { } } } &-2 { ._col { &-1 { display: flex; flex-direction: row; column-gap: 70px; align-items: flex-end; @include respond-above(md) { margin-left: 70px; } @include respond-below(md) { flex-direction: column; align-items: center; gap: 15px; } ._col-img { } ._col-data { @include respond-below(md) { text-align: center; } p { color: $cTxtBlack; font-family: $font3; font-size: 20px; font-weight: 600; letter-spacing: 2px; line-height: 1; text-transform: uppercase; margin-bottom: 10px; @include respond-above(md) { margin-left: 44px; } @include respond-below(md) { font-size: 18px; } } h3 { color: $cWhite; font-size: 32px; font-family: $font3; font-weight: 700; letter-spacing: 2px; line-height: 1; margin-bottom: 0; text-transform: uppercase; display: inline-block; padding: 16px 44px 9px; border-radius: 50px; background: rgba(#2e2d2c, 0.8); @include respond-below(md) { font-size: 24px; line-height: 1.3; } @include respond-below(sm) { font-size: 18px; } } } } } } } } .box-3 { margin-top: -50px; margin-bottom: 130px; @include respond-below(sm) { margin-bottom: 100px; } ._row { &-1 { ._col { &-1 { ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: row; gap: 32px; @include respond-below(md) { flex-wrap: wrap; } li { border-radius: 20px; background: $cWhite; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 10px; box-shadow: 4px 3px 22px 3px rgba(0, 0, 0, 0.25); width: calc(100% / 4); @include respond-below(md) { width: calc(100% / 2 - (32px / 2)); } img { width: 100%; max-width: fit-content; margin-bottom: 17px; } h3 { color: $cTxtBlack; font-size: 18px; font-family: $font3; font-weight: 600; margin-bottom: 3px; text-transform: uppercase; @include respond-below(md) { font-size: 16px; } } p { color: $cTxtBlack; font-size: 18px; font-family: $font3; font-weight: 300; text-transform: uppercase; @include respond-below(md) { font-size: 16px; } } } } } } } } } .box-4 { margin-bottom: 160px; @include respond-below(sm) { margin-bottom: 100px; } ._row { &-1 { margin-bottom: 100px; @include respond-below(sm) { margin-bottom: 60px; } ._col { &-1 { } } } &-2 { #history-timeline { #timeline-nav { position: relative; padding-left: 80px; padding-right: 80px; margin-bottom: 60px; .timeline-nav--wrapper { &::before { content: ''; position: absolute; bottom: 17px; height: 3px; width: 100%; background: #000000; transform: translateY(-50%); } .swiper-wrapper { align-items: end; min-height: 140px; } .swiper-slide { cursor: pointer; flex: 0 0 calc(100% / 8); transition: all 0.3s ease; &.active { flex: 0 0 calc((100% / 8) * 2); // flex: 0 0 200px; span { font-size: 64px; } .slide-dot { background: #fff246; border-color: #fff246; } } span { color: #181c1d; font-size: 36px; font-weight: 700; font-family: $font3; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 30px; transition: all 0.3s ease; } .slide-dot { width: 40px; height: 40px; display: block; border: 2px solid #181c1d; background: #fff; border-radius: 100px; transition: all 0.3s ease; } } } .timeline-next, .timeline-prev { position: absolute; width: 44px; min-width: 44px; height: 44px; background: #181c1d; display: flex; align-items: center; justify-content: center; border-radius: 100%; bottom: 47px; cursor: pointer; transition: all 0.3s ease; &.swiper-button-disabled { opacity: 0.3; } } .timeline-prev { left: 0; } .timeline-next { right: 0; img { transform: scale(-1); } } } .timeline-content { width: 100%; max-width: 900px; margin-left: auto; margin-right: auto; .swiper-slide { p { color: $cTxtBlack; font-size: 20px; font-family: $font3; font-weight: 300; } > img { margin-top: 40px; width: 100%; max-width: fit-content; } ul.logos { padding: 0; margin: 0; list-style: none; display: flex; flex-direction: row; align-items: center; column-gap: 80px; row-gap: 20px; flex-wrap: wrap; } } } } } } } .box-5 { padding-bottom: 75px; margin-bottom: 100px; border-bottom: 1px solid #878787; ._row { &-1 { margin-bottom: 70px; @include respond-below(sm) { margin-bottom: 40px; } } &-2 { width: 100%; max-width: 1070px; margin-left: auto; margin-right: auto; margin-bottom: 70px; ._col { &-1 { p { color: #1d1d1e; font-size: 20px; font-family: $font3; font-weight: 300; @include respond-below(md) { font-size: 18px; } strong { font-weight: 600; } } } } } &-3 { ._col { &-1 { .offer-tiles { display: flex; flex-direction: row; column-gap: 30px; @include respond-below(md) { flex-wrap: wrap; justify-content: center; row-gap: 30px; } .offer-tile { width: calc(100% / 5 - (30px - (30px / 5))); @include respond-below(md) { width: calc(100% / 2 - (30px - (30px / 2))); max-width: 240px; } @include respond-below(xs) { width: 100%; max-width: 300; text-align: center; } img { display: block; margin-left: auto; margin-right: auto; margin-bottom: 70px; } h3 { color: #181c1d; font-size: 25px; font-family: $font3; font-weight: 400; letter-spacing: 2px; text-align: center; text-transform: uppercase; margin-bottom: 20px; @include respond-between(md, lg) { font-size: 19px; } } ul { list-style: none; padding: 0; margin: 0 18px; li { color: #878787; font-size: 18px; font-family: $font3; font-weight: 400; letter-spacing: 2px; line-height: 1.5; } } .offer-color-line { position: relative; display: block; height: 11px; width: 100%; max-width: 228px; margin-left: auto; margin-right: auto; margin-bottom: 35px; &-1 { background: #e2e2e2; } &-2 { background: #d5c1a9; } &-3 { background: linear-gradient(90deg, #d5c1a9 70%, #9ba9b7 70%); } &-4 { background: #9ba9b7; } &-5 { background: linear-gradient(90deg, #e2e2e2 70%, #9ba9b7 70%); } } } } } } } } } .box-6 { position: relative; margin-bottom: 120px; @include respond-below(xs) { margin-bottom: 100px; } &::before { content: ''; position: absolute; top: 60px; bottom: 60px; left: 0; right: 0; background: #f4f4f4; } &::after { content: ''; position: absolute; top: 50%; left: 70px; background-image: url('/upload/filemanager/icon/Group.svg'); background-position: center; background-size: contain; background-repeat: no-repeat; width: 440px; height: 420px; transform: translate(-50%, -50%); } ._row { position: relative; z-index: 1; &-1 { display: flex; flex-direction: row; column-gap: 30px; align-items: center; @include respond-below(xs) { flex-direction: column-reverse; row-gap: 50px; } ._col { width: 50%; @include respond-below(xs) { width: 100%; } &-1 { h3 { color: #181c1d; font-size: 25px; font-family: $font3; letter-spacing: 2px; font-weight: 300; text-transform: uppercase; margin-bottom: 40px; @include respond-below(md) { font-size: 23px; } strong { font-weight: 800; display: block; } } p { color: #181c1d; font-size: 20px; font-family: $font3; font-weight: 300; max-width: 370px; @include respond-below(md) { font-size: 18px; } } } &-2 { ul { padding: 0; margin: 0; list-style: none; display: flex; flex-direction: column; row-gap: 11px; li { padding: 19px 40px 14px; background: #2e2d2c; border-radius: 5px; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); color: $cWhite; font-size: 18px; font-weight: 400; font-family: $font3; line-height: 26px; text-transform: uppercase; @include respond-below(md) { font-size: 14px; padding: 16px 30px 11px; } strong { display: block; font-size: 25px; font-weight: 700; @include respond-below(md) { font-size: 20px; } } &:first-child { color: $cTxtBlack; background: #ffed00; } } } } } } } } .box-7 { margin-bottom: 145px; @include respond-below(sm) { margin-bottom: 100px; } ._row { &-1 { margin-bottom: 70px; @include respond-below(xs) { margin-bottom: 40px; } } &-2 { width: 100%; max-width: 1070px; margin-left: auto; margin-right: auto; margin-bottom: 70px; ._col { &-1 { p { color: #1d1d1e; font-size: 20px; font-family: $font3; font-weight: 300; @include respond-below(md) { font-size: 18px; } strong { font-weight: 600; } } } } } &-3 { width: 100%; max-width: 1220px; margin-left: auto; margin-right: auto; display: flex; flex-direction: row; gap: 26px; @include respond-below(md) { gap: 16px; } @include respond-below(xs) { flex-direction: column; } ._col { &-1 { } &:nth-child(2n + 1) { @include respond-below(xs) { ul.img-tiles { li.img-tile { &:nth-child(1) { width: 70%; } &:nth-child(2) { width: 30%; } } } } } &:nth-child(2n) { @include respond-below(xs) { ul.img-tiles { li.img-tile { &:nth-child(1) { width: 30%; } &:nth-child(2) { width: 70%; } } } } } ul.img-tiles { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 26px; @include respond-below(md) { gap: 16px; } @include respond-below(xs) { flex-direction: row; } li.img-tile { position: relative; img { width: 100%; height: 100%; object-fit: cover; @include respond-below(xs) { height: 300px; } } p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: $cWhite; font-size: 25px; font-family: $font3; font-weight: 400; letter-spacing: 2px; text-align: center; text-transform: uppercase; @include respond-below(md) { font-size: 20px; } @include respond-below(sm) { font-size: 18px; } strong { display: block; font-size: 35px; font-weight: 700; @include respond-below(md) { font-size: 25px; } @include respond-below(sm) { font-size: 20px; } } } } } } } } } .box-8 { padding-bottom: 150px; ._row { &-1 { margin-bottom: 70px; } &-2 { width: 100%; max-width: 1070px; margin-left: auto; margin-right: auto; margin-bottom: 100px; ._col { &-1 { p { color: #1d1d1e; font-size: 20px; font-family: $font3; font-weight: 300; @include respond-below(md) { font-size: 18px; } strong { font-weight: 600; } } } } } &-3 { .partners-icons { .swiper-wrapper { align-items: center; } .swiper-slide { width: fit-content; img { max-height: 70px; max-width: 100px; } } &:hover { .swiper-button-next, .swiper-button-prev { opacity: 1; visibility: visible; } } .swiper-button-next, .swiper-button-prev { opacity: 0; visibility: hidden; } } } } } .box-9 { margin-bottom: 70px; } .box-10 { padding: 70px 0; background: #eeeeee; ._row { &-1 { display: flex; flex-direction: row; align-items: center; gap: 40px; @include respond-below(md) { flex-direction: column; } ._col { width: 100%; &-1 { max-width: 540px; img { width: 100%; max-width: 540px; @include respond-below(md) { display: block; max-width: 300px; margin-left: auto; margin-right: auto; } } } &-2 { h2 { color: $cTxtBlack; font-size: 34px; font-family: $font3; font-weight: 300; text-transform: uppercase; margin-bottom: 25px; @include respond-below(md) { font-size: 26px; text-align: center; } strong { display: block; } } p { text-align: justify; color: $cTxtBlack; font-size: 18px; font-family: $font3; font-weight: 300; line-height: 2; &:not(:last-child) { margin-bottom: 25px; } @include respond-below(md) { font-size: 16px; } } } } } } } .box-11 { margin-top: -20px; margin-bottom: 150px; @include respond-below(mb) { margin-bottom: 100px; } ._row { &-1 { ._col { &-1 { ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: row; gap: 32px; @include respond-below(md) { flex-wrap: wrap; } li { border-radius: 20px; background: #2e2d2c; display: flex; flex-direction: column; align-items: center; // justify-content: center; padding: 20px 10px 10px; box-shadow: 4px 3px 22px 3px rgba(0, 0, 0, 0.25); width: calc(100% / 4); @include respond-below(md) { width: calc(100% / 2 - (32px - (32px / 2))); } img { width: 100%; max-width: fit-content; margin-bottom: 17px; } h3 { color: $cWhite; font-size: 18px; font-family: $font3; font-weight: 600; margin-bottom: 3px; text-transform: uppercase; @include respond-below(xs) { font-size: 16px; } } p { color: $cWhite; font-size: 18px; font-family: $font3; font-weight: 300; text-transform: uppercase; text-align: center; @include respond-below(xs) { font-size: 14px; } } } } } } } } } .box-12 { margin-bottom: 120px; ._row { &-1 { display: flex; flex-direction: row; gap: 60px; @include respond-below(md) { flex-direction: column-reverse; } ._col { &-1 { h3 { color: #1d1d1e; font-size: 20px; font-family: $font3; font-weight: 600; letter-spacing: 2px; margin-bottom: 15px; text-transform: uppercase; text-align: right; @include respond-above(md) { margin-right: 45px; } @include respond-below(md) { text-align: center; } } h2 { color: #fff; font-size: 32px; font-family: $font3; font-weight: 700; line-height: 1; letter-spacing: 2px; text-transform: uppercase; display: flex; flex-direction: row; align-items: center; gap: 20px; padding: 18px 45px 14px; margin-bottom: 50px; margin-left: auto; margin-right: 0; background: #2e2d2c; border-radius: 100px; width: fit-content; @include respond-below(md) { font-size: 26px; margin-right: auto; } @include respond-below(xs) { font-size: 20px; text-align: center; line-height: 1.2; } } .texts { p { font-size: 18px; font-weight: 300; font-family: $font3; line-height: 1; } ul { padding: 0; margin: 0; list-style: none; li { font-size: 18px; font-weight: 300; font-family: $font3; &:not(:last-child) { margin-bottom: 12px; } @include respond-below(md) { font-size: 16px; } strong { font-weight: 700; } } } } } &-2 { ul { padding: 0; margin: 40px 0 0 0; list-style: none; @include respond-below(md) { display: flex; flex-direction: row; justify-content: center; gap: 20px; flex-wrap: wrap; } li { &:not(:last-child) { @include respond-above(md) { margin-bottom: 20px; } } @include respond-below(md) { width: calc(100% / 2 - (20px - (20px / 2))); } @include respond-below(xs) { width: 100%; text-align: center; } img { width: 100%; max-width: fit-content; } } } } } } } } .box-13 { margin-bottom: 100px; ._row { &-1 { margin-bottom: 70px; ._col { &-1 { } } } &-2 { display: flex; flex-direction: row; gap: 25px; @include respond-below(xs) { flex-direction: column; row-gap: 75px; } ._col { width: 50%; @include respond-below(xs) { width: 100%; text-align: center; } &-1 { } &-2 { } .preview_box { .preview_img { margin-bottom: 50px; @include respond-below(md) { margin-bottom: 30px; } img { width: 100%; max-width: fit-content; height: 400px; object-fit: cover; @include respond-below(md) { height: 240px; } } } .preview_data { h3 { color: $cTxtBlack; font-size: 24px; font-family: $font3; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; position: relative; margin-bottom: 45px; padding-bottom: 45px; &::before { content: ''; position: absolute; bottom: 0; left: 0; width: 90%; height: 1px; background-color: #000000; @include respond-below(xs) { width: 50%; left: 50%; transform: translateX(-50%); } } @include respond-below(md) { font-size: 18px; margin-bottom: 35px; padding-bottom: 25px; } } ul { padding: 0; margin: 0; list-style: none; li { &.mini { font-size: 16px; text-transform: uppercase; @include respond-below(md) { font-size: 15px; } } color: $cTxtBlack; font-size: 20px; font-family: $font3; font-weight: 300; @include respond-below(md) { font-size: 16px; } } } } } } } } } .box-14 { margin-bottom: 150px; @include respond-below(md) { margin-bottom: 100px; } ._row { &-1 { margin-bottom: 70px; } &-2 { ._col { &-1 { ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; column-gap: 60px; row-gap: 30px; li { img { width: 100%; max-width: fit-content; @include respond-below(xs) { max-width: 50px; } } } } } } } } } .box-15 { margin-bottom: 150px; ._row { &-1 { ._col { &-1 { h2 { color: #1d1d1e; font-family: $font3; font-weight: 300; font-size: 34px; letter-spacing: 2px; text-align: center; text-transform: uppercase; margin-bottom: 35px; } p { color: #1d1d1e; font-family: $font3; font-weight: 300; font-size: 20px; letter-spacing: 2px; text-align: center; text-transform: uppercase; margin-bottom: 35px; } ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; li { &:nth-child(1) { a { color: #ffffff; background: #1d1d1e; } } &:nth-child(2) { a { color: #1d1d1e; background: #fff246; } } a { font-family: $font3; font-weight: 700; font-size: 14px; letter-spacing: 1px; padding: 20px 36px 16px; border-radius: 5px; line-height: 1; text-transform: uppercase; display: flex; flex-direction: row; align-items: end; justify-content: center; gap: 10px; } } } } } } } } .box-16 { padding-top: 120px; border-top: 1px solid $cBlack; margin-bottom: 80px; ._row { &-1 { ._col { &-1 { h2 { color: $cTxtBlack; font-family: $font3; font-weight: 300; font-size: 34px; letter-spacing: 2px; margin-bottom: 40px; text-transform: uppercase; } p { color: $cTxtBlack; font-size: 20px; font-family: $font3; font-weight: 300; margin-bottom: 40px; } a { color: $cTxtBlack; font-size: 14px; font-family: $font3; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-decoration: underline; } } } } } }