:root {
--color-main: #e90004;
--color-main-secondary: rgba(233, 0, 4, 0.3);
--color-black-secondary: rgba(16, 16, 16, 0.6);
--color-white-secondary: rgba(255, 255, 255, 0.6);
--color-white-quadruple: rgba(255, 255, 255, 0.1);
--color-white-tertiary: rgba(255, 255, 255, 0.3);
--color-blue: #025dc7;
--color-whatsapp: #25d366;
--color-bg-light: #8396be;
--color-bg-card: #353d4e;
--color-gb-dark: #050912;
--color-other-1: #00a0e9;
--color-other-2: #065ea8;
--color-other-3: #e60012;
--color-other-5: #d3242c;
--color-other-8: #00a0e9;
--color-other-6: #aace05;
--font-family: Geometria, sans-serif;
--font-second-family: Unbounded, sans-serif;
}
@font-face {
font-family: Geometria;
src: url(//smart-data.by/wp-content/themes/smart-data-theme/fonts/geometria.woff2) format('woff2'), url(//smart-data.by/wp-content/themes/smart-data-theme/fonts/geometria.woff) format('woff'), url(//smart-data.by/wp-content/themes/smart-data-theme/fonts/geometria.otf) format('otf'), url(//smart-data.by/wp-content/themes/smart-data-theme/fonts/geometria.ttf) format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Geometria;
src: url(//smart-data.by/wp-content/themes/smart-data-theme/fonts/geometria_bold.woff2) format('woff2'), url(//smart-data.by/wp-content/themes/smart-data-theme/fonts/geometria_bold.woff) format('woff'), url(//smart-data.by/wp-content/themes/smart-data-theme/fonts/geometria_bold.otf) format('otf'), url(//smart-data.by/wp-content/themes/smart-data-theme/fonts/geometria_bold.ttf) format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Geometria;
src: url(//smart-data.by/wp-content/themes/smart-data-theme/fonts/geometria_medium.woff2) format('woff2'), url(//smart-data.by/wp-content/themes/smart-data-theme/fonts/geometria_medium.woff) format('woff'), url(//smart-data.by/wp-content/themes/smart-data-theme/fonts/geometria_medium.otf) format('otf'), url(//smart-data.by/wp-content/themes/smart-data-theme/fonts/geometria_medium.ttf) format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Unbounded;
src: url(//smart-data.by/wp-content/themes/smart-data-theme/fonts/unbounded_regular.woff2) format('woff2'), url(//smart-data.by/wp-content/themes/smart-data-theme/fonts/unbounded_regular.woff) format('woff'), url(//smart-data.by/wp-content/themes/smart-data-theme/fonts/unbounded_regular.otf) format('otf'), url(//smart-data.by/wp-content/themes/smart-data-theme/fonts/unbounded_regular.ttf) format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Unbounded;
src: url(//smart-data.by/wp-content/themes/smart-data-theme/fonts/unbounded_medium.woff2) format('woff2'), url(//smart-data.by/wp-content/themes/smart-data-theme/fonts/unbounded_medium.woff) format('woff'), url(//smart-data.by/wp-content/themes/smart-data-theme/fonts/unbounded_medium.otf) format('otf'), url(//smart-data.by/wp-content/themes/smart-data-theme/fonts/unbounded_medium.ttf) format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
body,
div,
dl,
dt,
dd,
ul,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,
img,
abbr {
border: 0;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
font-style: normal;
font-weight: normal;
}
ul li {
list-style: none;
}
caption,
th {
text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal;
}
sup {
vertical-align: text-top;
}
sub {
vertical-align: text-bottom;
}
input,
textarea,
select {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
}
legend {
color: #212121;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
main {
display: block;
}
img,
svg {
width: 100%;
display: block;
height: auto;
}
mark {
background: none;
color: inherit;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 90px;
font-size: 5.56vw;
}
@media (min-width: 990px) and (orientation: landscape), (min-width: 1250px) {
html {
font-size: 1.04vw;
}
}
body {
font-family: var(--font-family);
line-height: 1.3;
color: #fff;
font-weight: 400;
font-style: normal;
font-size: 3.89vw;
background: var(--color-gb-dark);
letter-spacing: -0.04em;
}
@media (min-width: 990px) and (orientation: landscape), (min-width: 1250px) {
body {
font-size: 0.83vw;
}
}
* {
box-sizing: border-box;
}
a {
color: inherit;
outline: none;
text-decoration: none;
text-decoration-thickness: 1px;
-webkit-text-decoration-skip-ink: none;
text-decoration-skip-ink: none;
text-underline-offset: 0.2em;
}
button,
[role="button"] {
cursor: pointer;
outline: none;
}
strong {
font-weight: 700;
}
.main {
min-height: 80vh;
min-width: 360px;
}
.container {
position: relative;
z-index: 1;
padding: 0 4.44vw;
}
@media (min-width: 990px) and (orientation: landscape), (min-width: 1250px) {
.container {
max-width: 89.583vw;
padding: 0;
margin: 0 auto;
}
}
.text-center {
text-align: center;
}
.d-inline-block {
display: inline-block;
}
[hidden],
.hidden {
display: none !important;
}
.d-flex {
display: flex;
flex-wrap: wrap;
}
.justify-between {
justify-content: space-between;
}
.align-center {
align-items: center;
}
.flex-nowrap {
flex-wrap: nowrap !important;
}
.direction-row {
flex-direction: row;
}
.direction-column {
flex-direction: column;
}
.d-grid {
display: grid;
}
@media (max-width: 1250px) and (orientation: portrait), (max-width: 990px) {
.mobile-hidden {
display: none;
}
}
@media (min-width: 990px) and (orientation: landscape), (min-width: 1250px) {
.desktop-hidden {
display: none;
}
}
.svg-fill {
fill: currentColor;
}
.svg-stroke {
stroke: currentColor;
}
.overs {
position: relative;
z-index: 10;
margin-top: -120svh;
min-height: 100svh;
border-radius: 10vw 10vw 0 0;
padding-top: 12vw;
background: var(--color-gb-dark);
}
@media (min-width: 990px) and (orientation: landscape), (min-width: 1250px) {
.overs {
border-radius: 6.25vw 6.25vw 0 0;
padding-top: 5.5vw;
}
}
.overs > .section:first-child {
padding: 0;
}
.width-100 {
width: 100%;
flex: 1;
}
.logo {
max-width: 200px;
}
.phone {
white-space: nowrap;
}
.toggle {
display: block;
width: 11.1vw;
padding: 0;
background: var(--color-white-tertiary);
border: none;
border-radius: 50%;
cursor: pointer;
outline: none;
transition: 0.3s color, 0.3s background;
color: #fff;
}
.close {
display: block;
position: relative;
padding: 0;
background: var(--color-white-tertiary);
border: 0px;
outline: none;
cursor: pointer;
transition: 0.3s color, 0.3s background;
color: #fff;
border-radius: 50%;
}
@media (min-width: 990px) and (orientation: landscape), (min-width: 1250px) {
.close {
width: 2.92vw;
}
}
.fixmenu {
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 100%;
padding-top: 2vw;
transition: 0.5s transform, 0.5s opacity;
transform: translateY(-120%);
}
.fixmenu.active {
transform: translateY(0);
}
.fixmenu .header {
backdrop-filter: blur(4vw);
background: var(--color-white-quadruple);
padding: 2.22vw;
border-radius: 4.44vw;
}
@media (min-width: 990px) and (orientation: landscape), (min-width: 1250px) {
.fixmenu {
padding-top: 0.73vw;
}
.fixmenu .header {
padding: 0.83vw;
border-radius: 1.56vw;
}
}
@media (max-width: 1250px) and (orientation: portrait), (max-width: 990px) {
.fixmenu .header {
margin-left: -2vw;
margin-right: -2vw;
}
}
.header {
position: relative;
padding: 3vw 0;
}
.header__logo {
display: block;
width: 32.5vw;
}
.header__logo a {
transition: 0.6s filter;
}
.header__logo a:hover {
filter: brightness(15);
}
.header__btns,
.header__nav {
display: none;
}
.header__phone {
letter-spacing: -0.04em;
font-size: 3.89vw;
}
.header__phone a {
text-decoration-line: underline;
text-decoration-color: transparent;
transition: 0.3s text-decoration-color;
}
.header__phone a:hover {
text-decoration-color: currentColor;
}
.header__right {
display: block;
margin: 0 4vw 0 auto;
}
@media (min-width: 990px) and (orientation: landscape), (min-width: 1250px) {
.header {
padding: 2.08vw 0;
}
.header__toggle {
display: none;
}
.header__right {
display: flex;
align-items: center;
gap: 0.62vw;
margin: 0 2vw 0 auto;
}
.header__logo {
width: 11.67vw;
}
.header__phone {
font-size: 0.99vw;
}
.header__phone:nth-child(2) {
margin-right: 0.52vw;
}
.header__mess {
width: 2.5vw;
}
.header__nav {
display: flex;
align-items: center;
gap: 1vw;
margin: 0 0 0 3.4vw;
}
.header__menu ul {
display: flex;
}
.header__menu ul li a {
display: inline-block;
padding: 0.48vw 1.04vw 0.58vw;
border-radius: 0.62vw;
font-weight: 500;
font-size: 0.99vw;
letter-spacing: -0.04em;
transition: 0.3s background;
}
.header__menu ul li a:hover {
background: var(--color-white-tertiary);
}
.header__btns {
display: block;
}
}
.footer {
padding: 10vw 0;
position: relative;
overflow: hidden;
}
.footer__col-2 {
margin-top: 6vw;
}
.footer__title {
display: block;
line-height: 1.15;
font-family: var(--font-second-family);
font-size: 1.8em;
letter-spacing: 0;
}
.footer__title strong {
font-weight: normal;
color: var(--color-white-secondary);
}
.footer__nav {
margin-top: 6vw;
}
.footer__nav ul {
display: flex;
flex-wrap: wrap;
gap: 2vw;
}
.footer__nav ul li a {
display: inline-block;
padding: 0.6em 1em;
border-radius: 0.2em;
background: var(--color-white-quadruple);
color: #fff;
font-weight: 500;
font-size: 0.8em;
letter-spacing: -0.04em;
transition: 0.3s background;
border-radius: 2vw;
}
.footer__nav ul li a:hover {
background: var(--color-white-tertiary);
}
.footer__nav ul li a.active {
background: var(--color-main);
}
.footer__mess {
display: flex;
gap: 2vw;
float: right;
}
.footer__mess li a {
display: block;
width: 10vw;
border-radius: 50%;
color: #fff;
background: var(--color-white-tertiary);
transition: 0.3s color, 0.3s background;
}
.footer__mess li a:hover {
background: var(--color-main);
}
.footer__mess li a[aria-label="Telegram"] {
--color-main: #229ED9;
}
.footer__mess li a[aria-label="WhatsApp"] {
--color-main: #25D366;
}
.footer__mess li a[aria-label="Instagram"] {
--color-main: radial-gradient(46.03% 63.89% at 96.77% 46.87%, #ff005f 0%, #fc01d8 100%), radial-gradient(84.69% 79.82% at 26.56% 107.7%, #fc0 0%, #fc0 12.42%, #fe4a05 56.72%, #ff0f3f 69.42%, rgba(254, 6, 87, 0) 100%), radial-gradient(42.97% 33.01% at 52.53% 98.59%, #fc0 0%, rgba(255, 204, 0, 0) 100%), radial-gradient(21.53% 63.19% at 13.57% 4.07%, #780cff 0%, rgba(130, 11, 255, 0) 100%);
}
.footer__t {
margin-bottom: 4vw;
font-weight: 500;
line-height: 1.35;
}
.footer__t a {
text-decoration-line: underline;
text-decoration-color: #fff;
transition: 0.3s text-decoration-color;
}
.footer__t a:hover {
text-decoration-color: transparent;
}
.footer__t a strong {
font-weight: 500;
}
.footer__r {
margin-top: 16vw;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 4vw;
font-size: 0.8em;
line-height: 135%;
letter-spacing: -0.04em;
}
.footer__slogan {
position: relative;
z-index: -1;
margin-top: 6vw;
text-transform: uppercase;
font-weight: 500;
letter-spacing: -0.09em;
line-height: 0.85;
font-size: 15vw;
}
.footer__row-2 {
margin-top: 6vw;
display: flex;
flex-wrap: wrap;
gap: 4vw;
justify-content: space-between;
color: var(--color-white-secondary);
font-size: 0.8em;
}
.footer__row-2 a {
text-decoration-line: underline;
transition: 0.3s text-decoration-color, 0.3s color;
}
.footer__row-2 a:hover {
color: #fff;
}
@media (min-width: 990px) and (orientation: landscape), (min-width: 1250px) {
.footer {
padding: 4vw 0;
}
.overs + .footer__overs {
position: relative;
z-index: 0;
height: 200vh;
margin-top: -100vh;
}
.overs + .footer__overs .footer {
position: sticky;
top: 0;
height: 100vh;
display: flex;
align-items: flex-end;
}
.footer__row {
display: grid;
grid-template-columns: 50vw 1fr;
gap: 3.8vw;
}
.footer__col-2 {
margin-top: 0;
margin-right: 3.2vw;
padding-top: 0.5vw;
}
.footer__title {
font-size: 2.86vw;
}
.footer__nav {
margin-top: 4vw;
}
.footer__nav ul {
gap: 0.4vw;
}
.footer__nav ul li a {
font-size: 0.93vw;
border-radius: 0.63vw;
padding: 0.92em 1.85em;
}
.footer__mess {
float: right;
margin: 0.5vw 0 2vw 2vw;
gap: 0.63vw;
}
.footer__mess li a {
width: 2.5vw;
}
.footer__t {
margin-bottom: 1.6vw;
font-size: 1.875vw;
letter-spacing: -0.04em;
}
.footer__r {
margin-top: 4.2vw;
gap: 3vw;
font-size: 1rem;
}
.footer__slogan {
margin-top: 1.6vw;
font-size: 15.3125vw;
}
.footer__row-2 {
margin-top: 0.5vw;
font-size: 1rem;
}
}
.section {
position: relative;
overflow: hidden;
padding: 3rem 0;
}
.section__title {
display: block;
font-weight: 400;
line-height: 1.15;
font-size: 5.83vw;
font-family: var(--font-second-family);
letter-spacing: 0;
}
.section__title.section__title_smaller {
font-size: 5.2vw;
}
.section__title strong {
color: var(--color-white-secondary);
font-weight: inherit;
}
.section__title + .section__sup {
margin-bottom: 0;
margin-top: 4vw;
}
.section__sup {
display: flex;
align-items: center;
margin-bottom: 4vw;
font-size: 2.5vw;
gap: 1em;
}
.section__sup:not([data-simple])::before {
content: '';
display: block;
aspect-ratio: 52/35;
width: 7.78vw;
background: url(//smart-data.by/wp-content/themes/smart-data-theme/img/home/icon-points-1.svg) center / contain no-repeat;
}
.section__sup span {
display: block;
padding: 0.75em 1.3em 0.65em;
border-radius: 1.5em;
letter-spacing: -0.04em;
color: var(--color-white-secondary);
font-weight: 500;
background: var(--color-white-quadruple);
line-height: 1;
backdrop-filter: blur(8px);
}
.section__advants {
margin-top: 6vw;
display: flex;
flex-direction: column;
gap: 4vw;
font-size: 3.88vw;
line-height: 135%;
}
.section__advants strong {
font-weight: inherit;
color: var(--color-white-secondary);
}
.section__advants li {
display: flex;
align-items: center;
gap: 4vw;
}
.section__advants li > i {
display: block;
flex: 0 0 12.22vw;
width: 12.2vw;
background: var(--color-white-quadruple);
border-radius: 26%;
}
.section__advants li > i img {
aspect-ratio: 1;
}
.section.section_quiz {
background: var(--color-bg-light);
border-radius: 10vw;
padding: 10vw 0;
}
.section.section_news {
padding: 16vw 0 10vw;
}
@media (min-width: 990px) and (orientation: landscape), (min-width: 1250px) {
.section__sup {
margin-bottom: 0.93vw;
font-size: 0.83vw;
}
.section__sup:not([data-simple])::before {
width: 2.71vw;
}
.section__title {
font-size: 3.125vw;
}
.section__title.section__title_smaller {
font-size: 2.6vw;
}
.section__title + .section__sup {
margin-bottom: 0;
margin-top: 0.93vw;
}
.section__advants {
margin-top: 0;
gap: 1.35vw;
font-size: 1rem;
}
.section__advants li {
gap: 1.25vw;
}
.section__advants li > i {
flex-basis: 4.6875vw;
width: 4.6875vw;
border-radius: 1.25vw;
}
.section.section_quiz {
border-radius: 6.25vw;
padding: 5.1vw 0 5.2vw;
}
.section.section_news {
padding: 6.45vw 0 3.8vw;
}
}
.slider__control {
margin-top: 4vw;
position: relative;
display: flex;
justify-content: space-between;
gap: 6vw;
align-items: center;
}
.slider__control .swiper-pagination {
position: relative;
bottom: 0;
flex: 1;
width: 100%;
height: 4px;
border-radius: 2px;
background: var(--color-white-tertiary);
display: flex;
}
.slider__control .swiper-pagination-bullet {
--swiper-pagination-bullet-horizontal-gap: 0;
height: 100%;
flex: 1;
border-radius: inherit;
background: var(--color-main);
opacity: 0;
}
.slider__control .swiper-pagination-bullet.swiper-pagination-bullet-active {
opacity: 1;
}
.slider__navs {
display: flex;
gap: 2vw;
}
.slider__navs .btn-square[aria-label]:hover {
background: var(--color-main);
color: #fff;
}
.slider__navs .btn-square[aria-label="Next slide"] {
background: #fff;
color: var(--color-main);
}
.slider__navs .btn-square[aria-label="Previous slide"] {
backdrop-filter: blur(10px);
background: var(--color-white-tertiary);
color: #fff;
}
@media (min-width: 990px) and (orientation: landscape), (min-width: 1250px) {
.slider__control {
margin-top: 2vw;
gap: 2vw;
}
.slider__control .swiper-pagination {
height: 0.42vw;
border-radius: 0.21vw;
}
.slider__navs {
gap: 0.83vw;
}
}
.nav {
display: none;
position: fixed;
z-index: 100;
width: 100%;
top: 0;
left: 0;
padding: 20px 0 20px;
background: #fff;
transform: translateY(-110%);
opacity: 0;
transition-duration: 0.5s;
transition-property: transform, opacity;
}
.nav.active {
opacity: 1;
transform: translateY(0);
}
.aside {
display: none;
position: fixed;
z-index: 110;
left: 0;
top: 0;
width: 100%;
height: 100%;
transform: translateX(-120%);
opacity: 0;
transition: 0.5s;
background: var(--color-gb-dark);
overflow: auto;
color: #fff;
}
.aside.active {
transform: translateX(0);
opacity: 1;
}
.aside.active + .aside__overlay {
display: block;
}
.aside + .aside__overlay {
position: fixed;
z-index: 109;
display: none;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
}
.aside__wrap {
position: relative;
height: 100%;
padding: 3vw 4.44vw 4.44vw;
display: flex;
flex-direction: column;
}
.aside__head {
margin-bottom: 9.3vw;
display: flex;
align-items: center;
justify-content: space-between;
}
.aside__logo {
width: 32.5vw;
}
.aside__nav {
font-family: var(--font-second-family);
letter-spacing: -0.04em;
font-size: 10.56vw;
}
.aside__nav li {
margin-bottom: 0.5vw;
}
.aside__footer {
margin-top: auto;
padding: 5.56vw;
border-radius: 8.33vw;
background: var(--color-white-quadruple);
}
.aside__btns {
margin-top: 9vw;
}
.aside__mess {
float: right;
display: flex;
gap: 2.22vw;
}
.aside__mess li {
width: 12.2vw;
}
.aside__phones {
font-size: 4.44vw;
}
.aside__phones p {
margin-bottom: 1vw;
}
.aside__emails {
margin-top: 5vw;
font-size: 4.44vw;
}
.messengers {
display: flex;
flex-wrap: wrap;
gap: 1vw;
}
.messengers__btn {
display: flex;
gap: 2vw;
align-items: center;
border: 0;
outline: none;
padding: 0.55em 0.9em 0.55em 0.6em;
border-radius: 2vw;
backdrop-filter: blur(1.5vw);
background: var(--color-white-tertiary);
color: #fff;
font-family: var(--font-family);
font-weight: 400;
font-size: 0.75em;
letter-spacing: -0.04em;
transition: 0.3s color, 0.3s background;
}
.messengers__btn:hover {
background: var(--color-white-secondary);
}
.messengers__btn.active {
background: #fff;
color: #000;
font-weight: 500;
}
.messengers__btn i {
display: block;
width: 6vw;
border-radius: 50%;
aspect-ratio: 1;
overflow: hidden;
}
.messengers__btn span {
display: block;
}
.messengers__btn[data-title="WhatsApp"] i {
background: #25D366;
}
.messengers__btn[data-title="Telegram"] i {
background: linear-gradient(45deg, #2AABEE, #229ED9);
}
@media (min-width: 990px) and (orientation: landscape), (min-width: 1250px) {
.messengers {
gap: 0.43vw;
}
.messengers__btn {
border-radius: 0.8vw;
gap: 0.63vw;
font-size: 1.15vw;
}
.messengers__btn i {
width: 1.875vw;
}
.messengers__btn span {
position: relative;
top: -0.1em;
}
}
.btn1 {
position: relative;
display: flex;
align-items: center;
gap: 3vw;
padding: 1vw 1vw 1vw 4vw;
border: none;
cursor: pointer;
outline: none;
background: var(--color-white-tertiary);
text-align: center;
text-decoration: none;
color: var(--color-main);
font-family: var(--font-family);
transition-duration: 0.3s;
transition-property: background, color;
font-weight: 500;
overflow: hidden;
border-radius: 10vw;
text-align: left;
font-size: 3.66vw;
}
.btn1.btn1_white {
background: #fff;
}
.btn1.btn1_white .btn1__icon {
background: var(--color-main);
color: #fff;
}
.btn1.btn1_red {
background: var(--color-main);
color: #fff;
}
.btn1__icon {
display: block;
border-radius: 50%;
aspect-ratio: 1;
background: #fff;
flex: 0 0 10vw;
color: var(--color-main);
transition: 0.3s background;
}
.btn1__txt {
flex: 1;
}
.btn11 {
display: inline-flex;
justify-content: center;
position: relative;
background-color: var(--color-main);
background-image: url(//smart-data.by/wp-content/themes/smart-data-theme/img/icons/btn-bg-1.png);
background-repeat: no-repeat;
background-size: cover;
color: #fff;
overflow: hidden;
padding: 1.16em 2.9em;
letter-spacing: -0.04em;
text-align: center;
font-family: var(--font-family);
font-weight: 700;
font-size: 5vw;
border: 0;
border-radius: 3.06vw;
transition: 0.4s background;
}
.btn11.btn11_1 {
padding-right: 4.2em;
}
.btn11__icon-1 {
position: absolute;
z-index: 0;
right: 0;
bottom: -1px;
aspect-ratio: 96/90;
height: 77.7%;
background: url(//smart-data.by/wp-content/themes/smart-data-theme/img/icons/btn-1.png) center / contain no-repeat;
}
.btn-square {
position: relative;
width: 12vw;
border-radius: 28%;
background: var(--color-main);
color: #fff;
display: block;
transition: 0.3s color, 0.3s background;
overflow: hidden;
}
.btn-square:hover svg {
transform: translateY(-100%);
}
.btn-square svg {
transition: 0.4s transform;
}
.btn-square svg:nth-child(2) {
position: absolute;
width: 100%;
top: 100%;
left: 0;
}
.btn-circle {
padding: 0;
border: 0;
border-radius: 50%;
background: #fff;
color: var(--color-main);
}
.btn-mess {
border-radius: 50%;
position: relative;
display: block;
overflow: hidden;
background: var(--color-white-tertiary);
}
.btn-mess:hover svg {
transform: translateY(-100%);
}
.btn-mess svg {
transition: 0.4s transform;
}
.btn-mess svg:nth-child(2) {
position: absolute;
width: 100%;
top: 100%;
left: 0;
}
.btn-mess.btn-mess_tg {
background: linear-gradient(45deg, #2AABEE, #229ED9);
}
.btn-mess.btn-mess_wa {
background: #25D366;
}
@media (min-width: 990px) and (orientation: landscape), (min-width: 1250px) {
.btn1 {
padding: 0.3125vw 0.3125vw 0.3125vw 1.25vw;
gap: 0.83vw;
border-radius: 1.67vw;
font-size: 0.99vw;
}
.btn1__icon {
flex-basis: 2.708vw;
}
.btn11 {
border-radius: 1.25vw;
font-size: 1.67vw;
}
.btn-square {
width: 4.375vw;
border-radius: 1.25vw;
}
}
@media (hover: hover) {
.btn1 {
color: transparent !important;
}
.btn1.btn1_white:hover {
background: var(--color-main);
}
.btn1.btn1_white:hover .btn1__txt::after,
.btn1.btn1_white:hover .btn1__txt::before {
color: #fff;
}
.btn1.btn1_white:hover .btn1__icon {
color: var(--color-main);
background: #fff;
}
.btn1.btn1_white .btn1__txt::after,
.btn1.btn1_white .btn1__txt::before {
color: var(--color-main);
}
.btn1:hover {
background: #fff;
}
.btn1:hover .btn1__txt::after {
top: 50%;
color: var(--color-main);
}
.btn1:hover .btn1__txt::before {
top: -50%;
color: var(--color-main);
}
.btn1:hover .btn1__icon {
background: var(--color-main);
color: #fff;
}
.btn1__txt::before {
content: attr(data-content);
position: absolute;
z-index: 4;
top: 50%;
transform: translate(0, -50%);
display: block;
transition: 0.5s top ease;
color: #fff;
}
.btn1__txt::after {
content: attr(data-content);
position: absolute;
z-index: 4;
top: 150%;
transform: translate(0, -50%);
display: block;
transition: 0.5s top ease;
color: #fff;
}
.btn11 {
color: transparent !important;
}
.btn11:hover {
background-color: #FD1418;
}
.btn11:hover .btn11__txt::after {
top: 50%;
}
.btn11:hover .btn11__txt::before {
top: -50%;
}
.btn11__txt::before {
content: attr(data-content);
position: absolute;
z-index: 4;
top: 50%;
transform: translate(0, -50%);
display: block;
transition: 0.5s top ease;
color: #fff;
}
.btn11__txt::after {
content: attr(data-content);
position: absolute;
z-index: 4;
top: 150%;
transform: translate(0, -50%);
display: block;
transition: 0.5s top ease;
color: #fff;
}
}
.form__box {
margin-bottom: 6vw;
position: relative;
}
.form__mess {
margin-bottom: 6vw;
}
.form__input {
width: 100%;
display: inline-block;
color: #fff;
padding: 0.4em 1.1em 0.45em;
border-radius: 2vw;
height: 14vw;
border: 1px solid transparent;
backdrop-filter: blur(1.5vw);
background: var(--color-white-tertiary);
font-family: var(--font-family);
outline: none;
letter-spacing: -0.04em;
font-weight: 500;
font-size: 4.44vw;
transition: 0.3s border-color, 0.3s background;
}
.form__input::-moz-placeholder {
color: var(--color-white-secondary);
}
.form__input::placeholder {
color: var(--color-white-secondary);
}
.form__input:focus {
border-color: #fff;
}
.form__label {
display: block;
margin-bottom: 4vw;
font-weight: 500;
letter-spacing: -0.04em;
font-size: 6vw;
}
.form__submit {
-webkit-appearance: none;
width: 100%;
border: none;
font-family: inherit;
transition: 0.4s background, 0.3s opacity;
}
.form__submit[disabled] {
opacity: 0.65;
cursor: not-allowed;
}
.form__box-policy {
margin-top: 6vw;
margin-bottom: 3vw;
}
.form__policy {
display: flex;
align-items: center;
gap: 2vw;
color: var(--color-white-secondary);
font-size: 0.8em;
}
.form__policy a {
text-decoration-line: underline;
transition: 0.3s color;
}
.form__policy a:hover {
color: #fff;
}
.form__check {
display: block;
position: relative;
cursor: pointer;
color: rgba(255, 255, 255, 0);
backdrop-filter: blur(1.5vw);
background: var(--color-white-tertiary);
width: 4vw;
border-radius: 1vw;
transition: 0.3s color;
}
.form__check:has(input:checked) {
color: #ffffff;
}
.form__check input {
position: absolute;
left: -9999px;
top: 0;
}
@media (min-width: 990px) and (orientation: landscape), (min-width: 1250px) {
.form__box {
margin-bottom: 1.56vw;
}
.form__mess {
margin-bottom: 1.56vw;
}
.form__input {
font-size: 1.15vw;
height: 4.17vw;
border-radius: 1rem;
}
.form__label {
font-size: 1.67vw;
margin-bottom: 0.63vw;
}
.form__box-policy {
margin-top: 4.45vw;
margin-bottom: 1.1vw;
}
.form__policy {
gap: 0.53vw;
font-size: 1rem;
}
.form__check {
width: 1.25vw;
border-radius: 0.15vw;
}
}
.modal {
position: relative;
width: 91.12vw;
background: var(--color-bg-light);
border-radius: 4vw;
color: #fff;
letter-spacing: -0.04em;
padding: 0;
}
.modal__wrap {
padding: 8vw 6vw 6vw;
}
.modal__close {
position: absolute;
z-index: 5;
top: 4vw;
right: 4vw;
}
.modal__subtext {
margin-top: 4vw;
font-size: 0.8em;
}
.modal__subtext strong {
font-weight: normal;
color: var(--color-white-secondary);
}
.modal__benefit {
margin-top: 6vw;
}
.modal__col-1-2 {
margin-top: 10vw;
}
@media (min-width: 990px) and (orientation: landscape), (min-width: 1250px) {
.modal {
width: 78.125vw;
border-radius: 3.12vw;
}
.modal__wrap {
padding: 2.8vw 2.8vw 2.8vw;
}
.modal__close {
top: 1.9vw;
right: 1.9vw;
}
.modal__row-1 {
display: grid;
grid-template-columns: 1fr 28.65vw;
gap: 3vw;
}
.modal__col-1-2 {
margin-top: 0;
padding-top: 0.8vw;
}
.modal__col-1-2 .form__box-policy {
margin-top: 6vw;
}
.modal__col-1-1 {
display: flex;
flex-direction: column;
}
.modal__benefit {
margin-top: auto;
}
.modal__subtext {
margin-top: 1.6vw;
width: 29.12vw;
font-size: 1.15vw;
}
}
.widg {
position: fixed;
z-index: 90;
right: 4.4vw;
bottom: 6vw;
transform: translateX(100vw);
transition: 0.8s transform;
}
.widg.active {
transform: translateX(0);
}
.widg.active.hide {
transform: translateX(100vw);
}
.widg__btn {
display: block;
width: 16vw;
animation: 3s tada linear infinite;
}
.widg__label {
display: none;
position: absolute;
right: 100%;
top: 50%;
transform: translate(-2vw, -50%);
padding: 1em 3.6em 0.9em 1.2em;
border-radius: 1em;
background: #fff;
color: #000;
font-size: 0.8em;
font-weight: 500;
letter-spacing: -0.04em;
line-height: 1.15;
white-space: nowrap;
}
.widg__close {
display: block;
position: absolute;
top: 2vw;
right: 2vw;
width: 3vw;
opacity: 0.4;
}
@media (min-width: 990px) and (orientation: landscape), (min-width: 1250px) {
.widg {
bottom: 3vw;
}
.widg__btn {
width: 4.6875vw;
}
.widg__label {
transform: translate(-0.53vw, -50%);
font-size: 0.83vw;
}
.widg__close {
width: 0.63vw;
top: 0.83vw;
right: 0.73vw;
transition: 0.3s opacity;
}
.widg__close:hover {
opacity: 1;
}
}
@keyframes circle-progress {
0% {
stroke-dashoffset: 170;
}
100% {
stroke-dashoffset: 0;
}
}
@keyframes tada {
0% {
transform: scale(1);
}
55%,
60% {
transform: scale(0.9) rotate(-3deg);
}
65%,
75%,
85%,
95% {
transform: scale(1.1) rotate(3deg);
}
70%,
80%,
90% {
transform: scale(1.1) rotate(-3deg);
}
100% {
transform: scale(1) rotate(0);
}
}
:root {
--iti-hover-color: rgba(255, 255, 255, 0.1);
--iti-icon-color: #fff;
--iti-flag-width: 5.56vw;
}
.iti {
width: 100%;
}
.iti__selected-country-primary {
border-radius: 2vw 0 0 2vw;
}
.iti__selected-dial-code {
font-size: 4vw;
}
.iti__country-list {
color: #000;
}
@media (min-width: 990px) and (orientation: landscape), (min-width: 1250px) {
:root {
--iti-flag-width: 2.08vw;
--iti-arrow-padding: 0.53vw;
--iti-spacer-horizontal: 1.04vw;
}
.iti__selected-country-primary {
border-radius: 1rem 0 0 1rem;
}
.iti__selected-dial-code {
font-size: 1.15vw;
}
.iti__selected-dial-code {
margin-left: 0.73vw;
}
}
.fancybox__dialog {
--f-drag-opacity: 0.5;
}
.fancybox__container {
--fancybox-backdrop-bg: #000;
}
.close_modal.f-button {
padding: 0;
border-radius: 50%;
--f-button-bg: #fff;
--f-button-hover-bg: var(--color-main);
--f-button-color: var(--color-main);
--f-button-hover-color: #fff;
}
.close_modal.f-button svg {
stroke: none !important;
fill: currentColor !important;
}
.ui-slider {
width: 100%;
height: 4vw;
background: var(--color-white-tertiary);
border-radius: 2vw;
margin: 16vw 0 12vw;
}
.ui-slider .ui-slider-range {
background: var(--color-main);
border-radius: inherit;
}
.ui-slider .ui-slider-handle {
aspect-ratio: 1;
box-sizing: content-box;
border-radius: 50%;
border: 1vw solid #fff;
height: 100%;
width: auto;
background: var(--color-main);
top: -1vw;
margin-left: -3vw;
}
.ui-slider .ui-slider-handle::after {
content: attr(data-value) ' $';
display: block;
position: absolute;
bottom: 100%;
left: 50%;
transform: translate(-50%, -40%);
font-size: 3vw;
font-weight: 500;
letter-spacing: -0.04em;
color: var(--color-main);
background: #fff;
border-radius: 2em;
padding: 0.5em 1.2em;
white-space: nowrap;
}
.ui-slider::before,
.ui-slider::after {
position: absolute;
top: 100%;
font-size: 3vw;
font-weight: 500;
letter-spacing: -0.04em;
margin-top: 0.5em;
color: var(--color-white-secondary);
}
.ui-slider::before {
content: attr(data-min) ' $';
left: 0;
}
.ui-slider::after {
content: attr(data-max) ' $';
right: 0;
}
@media (min-width: 990px) and (orientation: landscape), (min-width: 1250px) {
.ui-slider {
height: 1.04vw;
border-radius: 0.53vw;
margin: 2vw 0 2.4vw;
}
.ui-slider::before,
.ui-slider::after {
font-size: 0.73vw;
}
.ui-slider .ui-slider-handle {
border-width: 0.25vw;
top: -0.25vw;
margin-left: -0.75vw;
}
.ui-slider .ui-slider-handle::after {
font-size: 0.83vw;
}
}
.tooltipster-map .tooltipster-box {
border: 0;
background: var(--color-bg-light);
border-radius: 1.25em;
}
.tooltipster-map .tooltipster-content {
padding: 0.75em 1.4em;
font-weight: 500;
letter-spacing: -0.04em;
line-height: 1.35;
font-size: 3.33vw;
}
.tooltipster-map .tooltipster-content ul {
margin-left: 1em;
}
.tooltipster-map .tooltipster-content ul li {
list-style: disc;
}
@media (min-width: 990px) and (orientation: landscape), (min-width: 1250px) {
.tooltipster-map .tooltipster-content {
font-size: 0.83vw;
}
}
.top {
position: relative;
padding-bottom: 10vw;
}
.top__outer {
position: relative;
height: 220svh;
}
.top__inner {
position: sticky;
height: 100svh;
top: 0;
left: 0;
background: url(//smart-data.by/wp-content/themes/smart-data-theme/img/home/top@mob.webp) center / cover no-repeat;
box-sizing: content-box;
padding-bottom: 0.7%;
overflow: hidden;
}
.top__container {
min-height: 100svh;
display: flex;
flex-direction: column;
padding-bottom: 8vw;
}
.top__wrap {
margin-top: 5vw;
}
.top__body {
position: relative;
}
.top__title {
display: block;
line-height: 1.15;
font-family: var(--font-second-family);
font-size: 6.94vw;
letter-spacing: 0;
}
.top__title em {
display: inline-block;
position: relative;
top: 0.1em;
margin-top: -0.2em;
aspect-ratio: 95/59;
background: url(//smart-data.by/wp-content/themes/smart-data-theme/img/home/icon-title-1.svg) center / contain no-repeat;
width: 1.583em;
}
.top__subtitle {
margin-top: 3vw;
display: block;
line-height: 1.35;
font-size: 3.89vw;
margin-right: 20vw;
}
.top__subtitle strong {
font-weight: inherit;
color: var(--color-white-secondary);
}
.top__slogan {
display: none;
margin-top: auto;
text-transform: uppercase;
font-weight: 500;
letter-spacing: -0.09em;
line-height: 0.85;
}
.top__advert {
position: relative;
line-height: 1.35;
font-size: 3.33vw;
}
.top__advert > i {
display: inline-block;
width: 24.44vw;
margin-bottom: 0.7em;
}
.top__advert small {
display: block;
margin-bottom: 0.3em;
font-size: 2.78vw;
color: var(--color-white-secondary);
}
.top__advert small + br {
display: none;
}
.top__benefits {
width: 55vw;
}
.top__benefits .swiper-slide {
height: auto;
display: flex;
align-items: flex-end;
}
.top__benefit {
text-align: right;
width: 100%;
}
.top__benefit.top__benefit_left {
display: flex;
align-items: flex-end;
gap: 4vw;
text-align: left;
}
.top__benefit.top__benefit_left .top__benefit-txt {
padding-bottom: 0.85em;
}
.top__benefit.top__benefit_left .top__benefit-head sup {
right: auto;
left: 80%;
width: -moz-max-content;
width: max-content;
}
.top__benefit-head {
position: relative;
display: block;
font-size: 18.33vw;
line-height: 1.06;
font-family: var(--font-second-family);
}
.top__benefit-head small {
font-size: 0.46em;
}
.top__benefit-head sup {
display: block;
position: absolute;
z-index: 3;
top: 0.2em;
right: 0;
padding: 0.5em 0.95em;
border-radius: 1.5em;
background: var(--color-main);
color: #fff;
font-weight: 500;
font-family: var(--font-family);
font-size: 2.78vw;
}
.top__benefit-txt {
margin-top: -0.1em;
line-height: 1.35;
font-size: 3.33vw;
}
.top__footer {
margin-top: 8.6vw;
margin-bottom: 10vw;
}
.top__aside {
margin-top: auto;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
@media (min-width: 990px) and (orientation: landscape), (min-width: 1250px) {
.top {
padding-bottom: 4vw;
}
.top__inner {
background-image: url(//smart-data.by/wp-content/themes/smart-data-theme/img/home/top.webp);
}
.top__container {
padding-bottom: 2vw;
}
.top__wrap {
width: 45vw;
margin-top: 1.7vw;
}
.top__wrap.top__wrap_v1 {
width: 52vw;
}
.top__title {
font-size: 3.125vw;
}
.top__subtitle {
margin-top: 1.4vw;
width: 22.44vw;
font-size: 1.15vw;
}
.top__footer {
margin: auto 0 0;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.top__slogan {
display: block;
font-size: 10.78125vw;
}
.top__slogan.top__slogan_v1 {
font-size: 13.23vw;
}
.top__slogan.top__slogan_v2 {
font-size: 9.58vw;
}
.top__btns {
padding-bottom: 0.63vw;
}
.top__benefits {
margin: 0;
position: absolute;
z-index: 5;
top: 9.6vw;
right: 0;
font-size: 1rem;
text-align: right;
width: 30vw;
}
.top__benefits small {
font-size: 0.7em;
}
.top__benefit.top__benefit_left {
gap: 1.4vw;
}
.top__benefit-head {
font-size: 6.77vw;
}
.top__benefit-head sup {
font-size: 0.83vw;
padding: 0.6em 1.05em 0.8em;
}
.top__benefit-txt {
font-size: 1rem;
}
.top__aside {
margin: 0;
display: block;
}
.top__advert {
position: absolute;
z-index: 5;
bottom: 12.1vw;
right: 0;
text-align: right;
font-size: 1rem;
}
.top__advert > i {
width: 7.34vw;
}
.top__advert small {
font-size: 0.73vw;
}
}
.prod__grid {
--item-gap: 3vw;
margin-top: var(--item-gap);
display: grid;
gap: var(--item-gap);
grid-template-columns: 100%;
}
.prod__grid.prod__grid_1 {
margin-top: 12vw;
}
.prod__item {
border-radius: 6vw;
padding: 6vw 6vw 6vw;
background: center / cover no-repeat;
display: flex;
flex-direction: column;
width: 100%;
position: relative;
overflow: hidden;
aspect-ratio: 328/316;
}
.prod__item:hover .btn-square svg {
transform: translateY(-100%);
}
.prod__item:hover .prod__bg img {
transform: scale(1.05);
}
.prod__name {
display: block;
margin-bottom: auto;
font-size: 5.56vw;
width: 60%;
line-height: 1.05;
font-weight: 500;
}
.prod__bottom {
display: flex;
align-items: flex-end;
}
.prod__bg {
position: absolute;
inset: 0;
z-index: -1;
}
.prod__bg img {
width: 100%;
height: 100%;
top: 0;
left: 0;
-o-object-fit: cover;
object-fit: cover;
transition: 0.5s transform;
}
.prod__tags {
margin-right: auto;
display: flex;
gap: 2vw;
font-size: 0.7em;
}
.prod__tags li {
display: block;
backdrop-filter: blur(10px);
background: var(--color-white-quadruple);
font-weight: 500;
letter-spacing: -0.04em;
padding: 0.5em 1.3em 0.6em;
border-radius: 1.5em;
}
.prod__tags li strong {
font-weight: inherit;
color: var(--color-white-secondary);
}
.prod__form {
border-radius: 6vw;
padding: 6vw 6vw 6vw;
background: var(--color-bg-light);
}
.prod__form-bottom {
margin-top: 4vw;
}
.prod__form-btns {
margin-top: 8vw;
}
.prod__link {
display: block;
}
@media (min-width: 990px) and (orientation: landscape), (min-width: 1250px) {
.prod__header {
display: flex;
align-items: center;
}
.prod__header .section__head {
width: 52vw;
}
.prod__advants {
margin: 2.8vw 3.4vw 0 auto;
width: 27vw;
}
.prod__grid {
--item-gap: 1.67vw;
grid-template-columns: 1fr 1fr 1fr;
}
.prod__grid.prod__grid_1 {
margin-top: 4.6vw;
grid-template-columns: 1fr 1fr;
grid-template-areas: "one two" "one three";
}
.prod__item {
border-radius: 2.6vw;
padding: 1.56vw 1.8vw 1.56vw 1.56vw;
}
.prod__item[data-item="0"] {
grid-area: one;
aspect-ratio: 844/815;
}
.prod__item[data-item="1"] {
grid-area: two;
}
.prod__item[data-item="2"] {
grid-area: three;
}
.prod__item[data-item="1"],
.prod__item[data-item="2"] {
aspect-ratio: 844/392;
}
.prod__item[data-item="3"],
.prod__item[data-item="4"] {
aspect-ratio: 552/660;
}
.prod__name {
font-size: 2.29vw;
}
.prod__tags {
gap: 0.52vw;
font-size: 0.83vw;
}
.prod__form {
border-radius: 2.6vw;
padding: 2.08vw 2.08vw 1.56vw;
display: flex;
flex-direction: column;
}
.prod__form-bottom {
margin-top: auto;
}
.prod__form-btns {
margin-top: 1.3vw;
}
}
.steps {
position: relative;
z-index: 0;
margin-bottom: -10vw;
padding-bottom: 10vw;
overflow: hidden;
}
.steps__title {
display: block;
font-weight: 400;
line-height: 1.05;
font-size: 5.83vw;
font-family: var(--font-second-family);
letter-spacing: 0;
}
.steps__title strong {
color: var(--color-white-secondary);
font-weight: inherit;
}
.steps__advants {
margin-top: 6vw;
}
.steps__wrapper {
padding: 16vw 0;
}
.steps__bg {
position: absolute;
z-index: 0;
inset: 0;
background: var(--color-white-secondary);
}
.steps__bg::after {
content: '';
display: block;
position: absolute;
z-index: 3;
width: 100%;
left: 0;
top: 0;
height: 25%;
background: linear-gradient(180deg, #050912 0%, rgba(9, 12, 20, 0) 100%);
}
.steps__bg-inner {
position: absolute;
inset: 0;
background: center / cover no-repeat;
z-index: 0;
}
.steps__body {
margin-top: 60vw;
}
.steps__slider {
border-radius: 6vw;
padding: 6vw;
background: var(--color-gb-dark);
}
.steps__slider .swiper-slide {
height: auto;
}
.steps__slide {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
}
.steps__header {
display: block;
font-weight: 500;
line-height: 1.05;
font-size: 1.6em;
}
.steps__txt {
margin-top: 4vw;
margin-bottom: 6vw;
line-height: 1.35;
font-size: 3.88vw;
}
.steps__txt strong {
font-weight: inherit;
color: var(--color-white-secondary);
}
.steps__bottom {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.steps__count {
display: block;
font-weight: 500;
}
.steps__count strong {
font-weight: inherit;
color: var(--color-white-secondary);
}
.steps__thumbs {
margin-top: 4vw;
}
.steps__thumbs .swiper-slide {
padding-right: 1vw;
}
.steps__thumbs .swiper-slide.swiper-slide-active .steps__thumb {
background: #fff;
}
.steps__thumbs .swiper-slide.swiper-slide-active .steps__label {
color: var(--color-black-secondary);
}
.steps__thumbs .swiper-slide.swiper-slide-active .steps__label::first-line {
color: #000;
}
.steps__thumbs .swiper-slide.swiper-slide-active .steps__png {
color: var(--color-main-secondary);
}
.steps__thumbs .swiper-slide.swiper-slide-active .steps__png .circle {
stroke: var(--color-main);
animation: 7s circle-progress linear;
}
.steps__thumb {
border-radius: 4vw;
padding: 2vw;
backdrop-filter: blur(4vw);
background: var(--color-white-tertiary);
display: flex;
align-items: center;
gap: 2vw;
transition: 0.3s background;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.steps__thumb:hover {
background: var(--color-white-secondary);
}
.steps__label {
display: block;
font-weight: 500;
line-height: 1;
transition: 0.3s color;
color: var(--color-white-secondary);
font-size: 0.7em;
}
.steps__label::first-line {
color: #fff;
}
.steps__png {
display: block;
flex: 0 0 10vw;
position: relative;
}
.steps__png svg .circle {
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-dashoffset: 170;
stroke-dasharray: 170;
}
.steps__png img {
position: absolute;
border-radius: 50%;
width: 80%;
height: 80%;
top: 10%;
left: 10%;
-o-object-fit: cover;
object-fit: cover;
}
@media (min-width: 990px) and (orientation: landscape), (min-width: 1250px) {
.steps {
margin-bottom: -6.25vw;
padding-bottom: 6.25vw;
}
.steps__wrapper {
padding: 6.2vw 0 6.3vw;
}
.steps__title {
font-size: 4.0625vw;
width: 54.68vw;
}
.steps__head {
display: flex;
align-items: flex-start;
}
.steps__advants {
width: 21.35vw;
margin: 0 7.3vw 0 auto;
}
.steps__body {
margin-top: 8vw;
}
.steps__slider {
position: relative;
width: 28.65vw;
border-radius: 2.6vw;
padding: 1.4vw 2vw 1.6vw;
margin: 0 0 0 auto;
z-index: 4;
}
.steps__header {
font-size: 2.29vw;
}
.steps__txt {
margin-top: 1vw;
margin-bottom: 2vw;
font-size: 1rem;
}
.steps__count {
margin: 0;
font-size: 1rem;
}
.steps__thumbs {
margin: 0;
position: absolute;
z-index: 0;
bottom: 0;
width: 61vw;
}
.steps__thumbs .swiper-slide {
padding-right: 0.42vw;
}
.steps__thumb {
border-radius: 1.04vw;
padding: 1.04vw 1.25vw 1.04vw 0.83vw;
gap: 0.83vw;
}
.steps__png {
flex: 0 0 3.02vw;
}
.steps__label {
font-size: 1rem;
}
.steps__bg-inner {
background-attachment: fixed;
}
}
.quiz__advants li i {
background: none;
}
.quiz__progressbar {
margin-top: 10vw;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
font-size: 0.7em;
font-weight: 500;
}
.quiz__progressbar strong {
font-weight: inherit;
color: var(--color-white-secondary);
}
.quiz__progress {
margin-top: 2vw;
position: relative;
width: 100%;
height: 2vw;
display: flex;
gap: 1vw;
}
.quiz__progress span {
display: flex;
height: 100%;
flex: 1;
border-radius: 1vw;
background: var(--color-white-quadruple);
transition: 0.3s background;
}
.quiz__progress span.active {
background: #fff;
}
.quiz__items {
margin-top: 10vw;
}
.quiz__labels {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1vw;
}
.quiz__label {
display: block;
position: relative;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
letter-spacing: -0.04em;
}
.quiz__label input {
position: absolute;
left: -9999px;
top: 0;
}
.quiz__label:has(input:checked) .quiz__label-txt svg circle:first-child {
fill: #fff;
stroke-width: 2px;
stroke: var(--color-main);
}
.quiz__label:has(input:checked) .quiz__label-txt svg circle:last-child {
opacity: 1;
}
.quiz__label:hover .quiz__label-txt {
background: var(--color-white-secondary);
}
.quiz__label-pic {
display: block;
position: relative;
overflow: hidden;
border-radius: 3vw;
}
.quiz__label-pic img {
aspect-ratio: 530/370;
-o-object-fit: cover;
object-fit: cover;
}
.quiz__label-txt {
position: absolute;
z-index: 3;
inset: auto 0 0 0;
border-radius: 3vw;
backdrop-filter: blur(1.56vw);
background: var(--color-white-tertiary);
display: flex;
align-items: center;
font-size: 0.8em;
font-weight: 500;
line-height: 1.15;
gap: 3vw;
padding: 2vw 3vw;
transition: 0.3s background;
}
.quiz__label-txt svg {
display: block;
flex: 0 0 4vw;
}
.quiz__label-txt svg circle:first-child {
fill: rgba(161, 174, 200, 0.3);
stroke: rgba(255, 255, 255, 0.5);
transition: 0.3s stroke, 0.3s fill;
}
.quiz__label-txt svg circle:last-child {
opacity: 0;
transition: 0.3s opacity;
}
.quiz__ask {
display: block;
margin-bottom: 4vw;
font-weight: 500;
line-height: 1.15;
color: var(--color-white-secondary);
letter-spacing: -0.04em;
}
.quiz__ask strong {
font-weight: inherit;
color: #fff;
}
.quiz__footer {
margin-top: 10vw;
padding: 6vw;
border-radius: 6vw;
background: #fff;
color: #000;
}
.quiz__footer-btns {
margin-top: 12vw;
}
.quiz__footer-btns > div:last-child {
margin-top: 4vw;
text-align: center;
}
.quiz__footer-desc {
position: relative;
padding-right: 20vw;
}
.quiz__footer-title {
display: block;
margin-bottom: 3vw;
font-size: 1.2em;
font-weight: 500;
line-height: 1.05;
}
.quiz__footer-txt {
font-weight: 500;
line-height: 1.35;
color: var(--color-black-secondary);
}
.quiz__footer-info {
position: absolute;
top: 0;
right: 0;
width: 10vw;
background: rgba(233, 0, 4, 0.2);
border-radius: 50%;
}
.quiz__footer-head {
margin-bottom: 6vw;
display: flex;
align-items: flex-start;
gap: 4vw;
}
.quiz__footer-head > i {
flex: 0 0 10vw;
}
.quiz__footer-title-2 {
display: block;
margin-bottom: 2vw;
font-size: 1.5em;
font-weight: 700;
line-height: 1.05;
}
.quiz__footer-txt-2 {
font-size: 1em;
font-weight: 500;
line-height: 1.35;
}
.quiz__footer-advants {
display: flex;
flex-wrap: wrap;
gap: 5vw;
letter-spacing: -0.04em;
}
.quiz__footer-advants li {
display: flex;
align-items: center;
gap: 1vw;
}
.quiz__footer-advants li > i {
display: block;
flex: 0 0 8vw;
}
.quiz__footer-advants li span {
display: block;
color: var(--color-black-secondary);
font-size: 0.7em;
}
.quiz__footer-advants li strong {
font-weight: 500;
font-size: 0.85em;
}
.quiz__footer-advants li strong sup {
font-size: 0.6em;
}
.quiz__infotext {
margin-top: 6vw;
display: flex;
gap: 3vw;
align-items: center;
font-size: 0.8em;
line-height: 1.35;
}
.quiz__infotext::before {
content: '';
display: block;
aspect-ratio: 1;
flex: 0 0 5vw;
background: url(//smart-data.by/wp-content/themes/smart-data-theme/img/svg/info.svg) center / cover no-repeat;
}
.quiz__slider-row {
margin-top: 4vw;
display: flex;
gap: 2vw;
}
.quiz__slider-input {
flex: 1;
position: relative;
}
.quiz__slider-input::after {
content: attr(data-postfix);
position: absolute;
z-index: 1;
display: block;
pointer-events: none;
top: 50%;
right: 0.7em;
font-weight: 500;
color: var(--color-white-secondary);
letter-spacing: -0.04em;
font-size: 4.44vw;
transform: translateY(-50%);
}
.quiz__slider-input .form__input {
padding-left: 0.6em;
padding-right: 1.6em;
border-radius: 4vw;
}
.quiz__back {
display: inline-flex;
align-items: center;
gap: 2vw;
color: var(--color-main);
}
.quiz__back svg {
width: 1.2em;
}
@media (min-width: 990px) and (orientation: landscape), (min-width: 1250px) {
.quiz__head {
display: flex;
justify-content: space-between;
}
.quiz__head .section__head {
width: 40.625vw;
}
.quiz__aside {
width: 39.28vw;
padding-bottom: 0.63vw;
display: flex;
flex-direction: column;
}
.quiz__advants {
display: grid;
grid-template-columns: 1fr 1.05fr;
}
.quiz__progressbar {
display: flex;
margin-top: auto;
font-size: 0.98vw;
}
.quiz__progress {
height: 0.62vw;
margin-top: 0.53vw;
gap: 0.4vw;
}
.quiz__items {
margin-top: 3.9vw;
}
.quiz__row-1 {
display: grid;
gap: 1.56vw;
grid-template-columns: 1fr 31.77vw;
}
.quiz__row-2 {
display: grid;
gap: 4.56vw;
grid-template-columns: 1fr 43.75vw;
}
.quiz__labels {
grid-template-columns: 1fr 1fr;
gap: 0.83vw;
}
.quiz__footer {
margin: 0;
border-radius: 2.6vw;
padding: 1.98vw 2vw 2.2vw;
display: flex;
flex-direction: column;
}
.quiz__footer.quiz__footer_v2 {
position: absolute;
bottom: 0;
right: 0;
width: 43.75vw;
padding-bottom: 2vw;
}
.quiz__footer.quiz__footer_v2 .quiz__footer-btns {
margin-top: 3.7vw;
}
.quiz__footer-desc {
margin-bottom: auto;
padding-right: 6.5vw;
}
.quiz__footer-title {
margin-bottom: 0.5vw;
font-size: 1.67vw;
letter-spacing: -0.03em;
}
.quiz__footer-txt {
font-size: 1rem;
margin-right: 3.5vw;
}
.quiz__footer-btns {
margin-top: 2vw;
display: flex;
align-items: center;
gap: 3vw;
}
.quiz__footer-btns > div:first-child {
flex: 1;
}
.quiz__footer-btns > div:last-child {
margin: 0 2.6vw 0 0;
}
.quiz__footer-info {
width: 4.17vw;
top: 0.1vw;
right: -0.2vw;
}
.quiz__footer-head {
margin-bottom: 2.4vw;
gap: 1.2vw;
}
.quiz__footer-head > i {
flex-basis: 4.6875vw;
margin-top: 0.2vw;
}
.quiz__footer-title-2 {
margin-bottom: 0.6vw;
font-size: 2.29vw;
}
.quiz__footer-txt-2 {
font-size: 1.15vw;
}
.quiz__footer-advants {
gap: 1.2vw 2.1vw;
}
.quiz__footer-advants li {
gap: 0.83vw;
}
.quiz__footer-advants li > i {
flex-basis: 2.71vw;
}
.quiz__footer-advants li strong {
font-size: 1.15vw;
}
.quiz__footer-advants li span {
font-size: 0.83vw;
}
.quiz__fieldset {
flex: 1;
}
.quiz__fieldset.quiz__fieldset_v3 .form__input,
.quiz__fieldset.quiz__fieldset_v3 .iti {
max-width: 28.65vw;
}
.quiz__fieldset.quiz__fieldset_v2 {
padding-bottom: 6.7vw;
}
.quiz__infotext {
margin-top: 4.4vw;
font-size: 0.83vw;
gap: 0.63vw;
width: 34.375vw;
position: absolute;
left: 0;
bottom: 0;
}
.quiz__infotext::before {
flex: 0 0 1.25vw;
}
.quiz__label-pic {
border-radius: 2.6vw;
}
.quiz__label-txt {
inset: auto 1.25vw 1.25vw 1.25vw;
padding: 1.35vw 0.95vw 1.35vw;
font-size: 1.25vw;
gap: 0.7vw;
border-radius: 1.25vw;
}
.quiz__label-txt svg {
flex-basis: 1.51vw;
}
.quiz__ask {
margin-bottom: 1.7vw;
font-size: 1.67vw;
}
.quiz__ask.quiz__ask_v2 {
width: 32vw;
}
.quiz__slider-row {
margin-top: 1.04vw;
display: flex;
gap: 1vw;
}
.quiz__slider-input {
flex: 1;
}
.quiz__slider-input::after {
font-size: 2.29vw;
}
.quiz__slider-input .form__input {
height: 5.1vw;
border-radius: 1.56vw;
border: 1px solid #fff;
font-size: 2.29vw;
}
.quiz__back {
gap: 0.4vw;
font-size: 1rem;
text-decoration-line: underline;
text-decoration-color: transparent;
transition: 0.3s text-decoration-color;
}
.quiz__back:hover {
text-decoration-color: currentColor;
}
}
@media (max-width: 1250px) and (orientation: portrait), (max-width: 990px) {
.quiz__footer.quiz__footer_v3 .quiz__footer-desc {
padding-right: 12vw;
}
.quiz__progressbar {
display: none !important;
}
}
.demo {
position: relative;
z-index: -1;
overflow: hidden;
margin-top: -10vw;
padding: 20vw 0 20vw;
background: url(//smart-data.by/wp-content/themes/smart-data-theme/img/home/demo-bg.webp) center / cover no-repeat, #4A566E;
}
.demo__items {
margin-top: 10vw;
position: relative;
}
.demo__items .swiper-slide {
height: auto;
}
.demo__item {
position: relative;
padding: 6vw 6vw 8vw;
border-radius: 6vw;
background: var(--color-gb-dark);
height: 100%;
}
.demo__pic {
position: relative;
}
.demo__pic::after {
content: attr(data-content);
display: block;
position: absolute;
font-family: var(--font-second-family);
font-size: 8em;
line-height: 0.9;
letter-spacing: -0.03em;
bottom: -6vw;
right: 0vw;
}
.demo__pic .section__sup {
position: absolute;
z-index: 2;
top: 0;
right: 0;
}
.demo__pic img {
aspect-ratio: 646/575;
border-radius: 4vw;
}
.demo__title {
display: block;
margin-bottom: 6vw;
line-height: 1.15;
font-size: 1.4em;
font-family: var(--font-second-family);
}
.demo__title strong {
font-weight: normal;
color: var(--color-white-secondary);
}
.demo__logos {
display: flex;
margin-bottom: 5vw;
}
.demo__logos div {
width: 12vw;
margin-right: -2vw;
}
@media (min-width: 990px) and (orientation: landscape), (min-width: 1250px) {
.demo {
margin-top: -6.25vw;
padding: 12.5vw 0 14vw;
}
.demo__head {
display: flex;
justify-content: space-between;
}
.demo__head .section__head {
width: 60vw;
}
.demo__advants {
width: 26vw;
}
.demo__items {
margin-top: 4.7vw;
}
.demo__items .swiper-wrapper {
display: block;
}
.demo__items .swiper-slide {
margin: 0;
position: absolute;
top: 0;
left: 0;
transform: translateY(120%);
}
.demo__items .swiper-slide:first-child {
position: relative;
transform: translateY(0%);
}
.demo__item {
display: flex;
justify-content: space-between;
gap: 3vw;
padding: 3.1vw 3.1vw 3.1vw 4.2vw;
border-radius: 4.6875vw;
}
.demo__pic {
flex: 0 0 33.65vw;
order: 2;
padding-bottom: 9.1vw;
}
.demo__pic::after {
bottom: 0;
right: 0.5vw;
font-size: 19.48vw;
}
.demo__pic img {
border-radius: 2.08vw;
}
.demo__desc {
position: relative;
z-index: 5;
margin: 0;
flex: 0 0 45vw;
display: flex;
flex-direction: column;
padding-top: 1vw;
padding-bottom: 1.35vw;
}
.demo__title {
font-size: 3.65vw;
margin-bottom: 2vw;
max-width: 45vw;
}
.demo__row-1 {
display: flex;
align-items: center;
gap: 2vw;
}
.demo__logos {
margin-right: 1.56vw;
margin-bottom: 0;
}
.demo__logos div {
width: 6.25vw;
margin-right: -1.86vw;
}
.demo__footer {
margin-top: auto;
margin-right: -3vw;
}
.demo__footer .section__advants {
flex-direction: row;
}
.demo__footer .section__advants li {
flex-direction: column;
align-items: flex-start;
gap: 1vw;
}
}
@media (max-width: 1250px) and (orientation: portrait), (max-width: 990px) {
.demo__items {
margin-left: -4.4vw;
margin-right: -4.4vw;
}
.demo__items .swiper-slide {
width: 88vw;
box-sizing: content-box;
padding: 0 1vw;
}
.demo__footer {
margin-top: auto;
}
.demo__desc {
margin-bottom: 6vw;
}
.demo__desc .section__sup {
display: none;
}
.demo__desc .section__advants {
margin-top: 10vw;
}
.demo__desc .section__advants li i {
align-self: flex-start;
}
.demo__pic {
order: 2;
margin: auto 0 0;
}
.demo__pic .section__sup {
display: none;
}
.demo__item {
display: flex;
flex-direction: column;
height: 100%;
}
}
.map {
position: relative;
z-index: 3;
margin-top: -10vw;
border-radius: 10vw 10vw 0 0;
background: var(--color-gb-dark);
overflow: hidden;
}
.map__top {
padding-bottom: 10vw;
padding-top: 10vw;
position: relative;
z-index: 3;
}
.map__wrapper {
margin: -20vw 0 -20vw -95vw;
}
.map__wrapper .swiper-slide {
width: 400vw;
}
.map__container {
position: relative;
}
.map__bottom {
padding-bottom: 16vw;
padding-top: 4vw;
background: #1e222b;
}
.map__window {
background: var(--color-bg-card);
border-radius: 6vw;
padding: 6vw;
}
.map__window .swiper-slide {
height: auto;
}
.map__slide {
display: flex;
flex-direction: column;
position: relative;
height: 100%;
}
.map__slide-footer {
margin-top: 6vw;
display: flex;
align-items: center;
justify-content: space-between;
}
.map__slide-link {
display: inline-block;
text-decoration-line: underline;
text-decoration-color: currentColor;
font-size: 0.8em;
transition: 0.3s text-decoration-color;
text-underline-offset: 0.3em;
line-height: 135%;
letter-spacing: -0.04em;
}
.map__slide-link:hover {
text-decoration-color: transparent;
}
.map__slide-body {
margin-top: 6vw;
margin-bottom: auto;
height: 25vh;
font-size: 3.88vw;
line-height: 1.35;
letter-spacing: -0.04em;
color: var(--color-white-secondary);
overflow-y: scroll;
padding-right: 4vw;
}
.map__slide-body::-webkit-scrollbar-track {
border-radius: 6px;
background-color: var(--color-white-quadruple);
}
.map__slide-body::-webkit-scrollbar {
width: 6px;
background-color: var(--color-white-quadruple);
}
.map__slide-body::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color: #fff;
}
.map__slide-body strong {
font-weight: normal;
color: #fff;
}
.map__slide-body p {
margin-bottom: 1.1em;
}
.map__slide-body p:last-child {
margin-bottom: 0;
}
.map__slide-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.map__slide-title {
display: block;
font-size: 1.2em;
line-height: 1.15;
font-family: var(--font-second-family);
}
.map__slide-city {
display: block;
margin-top: 0.3em;
padding: 0.5em 1.3em 0.6em;
border-radius: 1.5em;
background: var(--color-white-quadruple);
font-size: 0.8em;
color: var(--color-white-secondary);
font-weight: 500;
}
.map__link-2 {
position: absolute;
z-index: 10;
width: 1.67%;
top: 0;
left: 0;
--color-fill: var(--color-main);
--color-stroke: #fff;
}
.map__link-2[data-title="Москва"] {
margin: 17.1% 0 0 42.2%;
}
.map__link-2[data-title="Минск"] {
margin: 23% 0 0 31.8%;
}
.map__link-2[data-title="Минск"]::after {
transform: translate(-64%, -60%);
}
.map__link-2[data-title="Скидель"] {
margin: 22.4% 0 0 29.8%;
}
.map__link-2[data-title="Скидель"]::after {
transform: translate(-134%, 120%);
}
.map__link-2[data-title="Казань"] {
margin: 17.6% 0 0 52.2%;
}
.map__link-2[data-title="Казань"]::after {
transform: translate(-110%, -15%);
}
.map__link-2.active,
.map__link-2:hover {
--color-fill: #fff;
--color-stroke: var(--color-main);
}
.map__link-2.active svg,
.map__link-2:hover svg {
transform: scale(1);
}
.map__link-2 svg {
fill: var(--color-fill);
stroke: var(--color-stroke);
transition: 0.3s fill, 0.3s stroke, 0.3s transform;
transform: scale(0.7);
}
.map__point {
position: absolute;
z-index: 8;
width: 0.84%;
border-radius: 50%;
aspect-ratio: 1;
background: var(--color-main);
transition: 0.3s background;
top: 0;
left: 0;
cursor: pointer;
}
.map__point[data-size="2"] {
transform: scale(1.3);
}
.map__point:hover {
background: #fff;
}
.map__point[data-city="Несвиж"] {
margin: 24.2% 0 0 30.9%;
}
.map__point[data-city="Гомель"] {
margin: 25.2% 0 0 34.8%;
}
.map__point[data-city="Брест"] {
margin: 25% 0 0 29.4%;
}
.map__point[data-city="Витебск"] {
margin: 20.8% 0 0 34.2%;
}
.map__point[data-city="Санкт-Петербург"] {
margin: 14.2% 0 0 35.4%;
}
.map__point[data-city="Краснодар"] {
margin: 33.35% 0 0 41.6%;
}
.map__point[data-city="Лермонтов"] {
margin: 34.45% 0 0 44.9%;
}
.map__point[data-city="Барнаул"] {
margin: 25.05% 0 0 74.9%;
}
.map__point[data-city="Иркутск"] {
margin: 25.85% 0 0 92.4%;
}
.map__point[data-city="Логойск"] {
margin: 22.55% 0 0 33.1%;
}
.map__point[data-city="Киров"] {
margin: 11.85% 0 0 55.4%;
}
.map__point[data-city="Елабуга"] {
margin: 18.05% 0 0 56.4%;
}
.map__point[data-city="Нижнекамск"] {
margin: 18.95% 0 0 55.6%;
}
.map__point[data-city="Тула"] {
margin: 21.35% 0 0 42.7%;
}
.map__point[data-city="Ступино"] {
margin: 18.85% 0 0 44.1%;
}
.map__point[data-city="Новосибирск"] {
margin: 23.05% 0 0 75.9%;
}
.map__point[data-city="Арамиль"] {
margin: 19.25% 0 0 59.7%;
}
.map__point[data-city="Пермь"] {
margin: 15.95% 0 0 58.4%;
}
.map__point[data-city="Урюпинск"] {
margin: 26.75% 0 0 44.1%;
}
.map__point[data-city="Борисов"] {
margin: 23.45% 0 0 33.8%;
}
.map__point[data-city="Чехов"] {
margin: 18.65% 0 0 41.3%;
}
.map__point[data-city="Липецк"] {
margin: 23.05% 0 0 45.3%;
}
.map__point[data-city="Волгоград"] {
margin: 28.35% 0 0 46.3%;
}
.map__point[data-city="Новочеркасск"] {
margin: 30.25% 0 0 44.3%;
}
@media (min-width: 990px) and (orientation: landscape), (min-width: 1250px) {
.map {
margin-top: -6.25vw;
border-radius: 6.25vw 6.25vw 0 0;
}
.map__wrapper {
margin: 0;
}
.map__wrapper .swiper-slide {
width: 155.57vw;
}
.map__top {
padding-top: 6.4vw;
padding-bottom: 0;
position: absolute;
width: 100%;
left: 0;
top: 0;
z-index: 10;
pointer-events: none;
}
.map__head {
display: flex;
justify-content: space-between;
}
.map__head .section__head {
width: 60vw;
}
.map__advants {
width: 24.8vw;
padding-top: 2.95vw;
}
.map__bottom {
padding: 0;
background: none;
}
.map__window {
border-radius: 2.6vw;
padding: 2vw 2vw 2vw;
width: 30.94vw;
position: absolute;
left: 0;
bottom: 18vw;
}
.map__slide-footer {
margin-top: 3vw;
}
.map__slide-link {
font-size: 1rem;
}
.map__slide-body {
margin-top: 1.8vw;
height: 10.3vw;
font-size: 1rem;
padding-right: 2vw;
}
.map__slide-body::-webkit-scrollbar-track {
border-radius: 0.2vw;
}
.map__slide-body::-webkit-scrollbar {
width: 0.4vw;
}
.map__slide-body::-webkit-scrollbar-thumb {
border-radius: 0.2vw;
}
.map__slide-title {
font-size: 2.29vw;
}
.map__slide-city {
font-size: 0.83vw;
}
.map__link-2::after {
font-size: 1.51vw;
}
}
@media (max-width: 1250px) and (orientation: portrait), (max-width: 990px) {
.map__window .swiper-slide {
padding-right: 1px;
}
}
.call {
position: relative;
z-index: 5;
margin-top: -10vw;
border-radius: 10vw;
padding: 10vw 0;
background: 80% center / cover no-repeat #020810;
overflow: hidden;
}
.call__form {
margin-top: 4vw;
position: relative;
background: var(--color-bg-light);
padding: 6vw;
border-radius: 6vw;
}
.call__body {
margin-top: 20vw;
}
@media (min-width: 990px) and (orientation: landscape), (min-width: 1250px) {
.call {
margin-top: -11.6vw;
padding: 5.2vw 0 4.1vw;
border-radius: 5.2vw;
background-position: center;
}
.call.call-1 {
background-attachment: fixed;
background-image: url(//smart-data.by/wp-content/themes/smart-data-theme/img/home/call-bg.webp);
}
.call__wrapper {
display: flex;
gap: 3vw;
}
.call__desc {
flex: 1;
display: flex;
flex-direction: column;
}
.call__form {
margin-top: 5.3vw;
flex: 0 0 33.85vw;
border-radius: 3.12vw;
padding: 2.5vw 2.6vw 2.7vw 2.6vw;
}
.call__head .section__sup {
position: absolute;
right: 0;
top: 0;
}
.call__advants {
margin-top: 2vw;
}
.call__advants .section__advants {
margin-right: 5vw;
display: grid;
grid-template-columns: 0.8fr 1.2fr;
}
.call__body {
margin-top: auto;
}
}
.news__slider {
margin-top: 10vw;
}
.news__slider .swiper-slide {
padding: 0 2vw;
width: 84vw;
box-sizing: content-box;
height: auto;
}
.news__slide {
display: block;
position: relative;
height: 100%;
padding: 6vw;
border-radius: 6vw;
background: var(--color-bg-card);
}
.news__pic {
display: block;
position: relative;
overflow: hidden;
border-radius: 4vw;
}
.news__pic img {
-o-object-fit: 432/416;
object-fit: 432/416;
transition: 1s transform;
}
.news__pic:hover img {
transform: scale(1.05);
}
.news__excerpt {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
font-size: 3.66vw;
line-height: 1.35;
color: var(--color-white-secondary);
letter-spacing: -0.04em;
}
.news__title {
display: block;
margin-bottom: 6vw;
font-weight: 500;
line-height: 1.05;
letter-spacing: -0.04em;
transition: 0.3s color;
font-size: 1.2em;
}
.news__title:hover {
color: var(--color-white-secondary);
}
.news__desc {
margin-top: 4vw;
}
@media (min-width: 990px) and (orientation: landscape), (min-width: 1250px) {
.news__header {
display: flex;
justify-content: space-between;
}
.news__header .section__head {
width: 60vw;
}
.news__advants {
margin-top: 3vw;
width: 26vw;
}
.news__slider {
margin-top: 4.6vw;
--cur-offset: 3.66vw;
--cur-width: 52.6vw;
}
.news__slider .swiper {
padding-bottom: 2vw;
}
.news__slider .swiper-slide {
width: var(--cur-width);
padding: var(--cur-offset) 0.83vw 0;
}
.news__slider .swiper-slide.swiper-slide-active .news__slide {
transform: translateY(calc(-1*var(--cur-offset)));
}
.news__slider .slider__control {
margin: 0;
width: var(--cur-width);
position: absolute;
z-index: 10;
bottom: -1.9vw;
left: 50%;
transform: translateX(-50%);
}
.news__slide {
display: flex;
gap: 1.56vw;
padding: 2.08vw;
border-radius: 2.6vw;
transition: 0.3s transform;
}
.news__slide .section__sup {
margin-bottom: 0.5vw;
}
.news__pic {
flex: 0 0 22.5vw;
border-radius: 1.25vw;
}
.news__desc {
margin-top: 0;
flex: 1;
display: flex;
flex-direction: column;
}
.news__excerpt {
margin-top: auto;
font-size: 1rem;
}
.news__title {
margin-bottom: 2vw;
font-size: 1.875vw;
}
}