*,
::before,
::after {
box-sizing: border-box; border-width: 0; border-style: solid; border-color: currentColor; } html {
line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; font-family:
ui-sans-serif,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
"Helvetica Neue",
Arial,
"Noto Sans",
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Noto Color Emoji"; font-feature-settings: normal; font-variation-settings: normal; } body {
margin: 0; line-height: inherit; } hr {
height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) {
text-decoration: underline dotted;
} h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
} a {
color: inherit;
text-decoration: inherit;
} b,
strong {
font-weight: bolder;
} code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace; font-size: 1em; } small {
font-size: 80%;
} sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
} table {
text-indent: 0; border-color: inherit; border-collapse: collapse; } button,
input,
optgroup,
select,
textarea {
font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; } button,
select {
text-transform: none;
} button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button; background-color: transparent; background-image: none; } :-moz-focusring {
outline: auto;
} :-moz-ui-invalid {
box-shadow: none;
} progress {
vertical-align: baseline;
} ::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
} [type="search"] {
-webkit-appearance: textfield; outline-offset: -2px; } ::-webkit-search-decoration {
-webkit-appearance: none;
} ::-webkit-file-upload-button {
-webkit-appearance: button; font: inherit; } summary {
display: list-item;
} blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}
fieldset {
margin: 0;
padding: 0;
}
legend {
padding: 0;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
dialog {
padding: 0;
} textarea {
resize: vertical;
} input::placeholder,
textarea::placeholder {
opacity: 1; } button,
[role="button"] {
cursor: pointer;
} :disabled {
cursor: default;
} img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block; vertical-align: middle; } img,
video {
max-width: 100%;
height: auto;
} [hidden] {
display: none;
}@font-face {
font-family: 'icomoon';
src:  url(//xmk-russia.com/app/themes/holvent-china/fonts/icomoon/fonts/icomoon.eot?v2xo2o);
src:  url(//xmk-russia.com/app/themes/holvent-china/fonts/icomoon/fonts/icomoon.eot?v2xo2o#iefix) format('embedded-opentype'),
url(//xmk-russia.com/app/themes/holvent-china/fonts/icomoon/fonts/icomoon.ttf?v2xo2o) format('truetype'),
url(//xmk-russia.com/app/themes/holvent-china/fonts/icomoon/fonts/icomoon.woff?v2xo2o) format('woff'),
url(//xmk-russia.com/app/themes/holvent-china/fonts/icomoon/fonts/icomoon.svg?v2xo2o#icomoon) format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
[class^="icon-"], [class*=" icon-"] { font-family: 'icomoon' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-map:before {
content: "\e900";
}
.icon-mail:before {
content: "\e901";
}
.icon-downarrow:before {
content: "\e902";
}
.icon-uniE903:before {
content: "\e903";
}
.icon-uniE904:before {
content: "\e904";
}
.icon-vk:before {
content: "\e905";
}
.icon-download:before {
content: "\e906";
}
.icon-arrow:before {
content: "\e907";
}
.icon-phone:before {
content: "\e908";
}
.icon-arrowscroll:before {
content: "\e909";
}
.icon-search:before {
content: "\e90a";
}
.icon-file:before {
content: "\e90b";
}.navigation {
display: flex;
gap: 30px;
justify-content: space-between;
align-items: center;
}
@media (max-width: 992px) {
.navigation {
flex-direction: column;
gap: 16px;
align-items: flex-start;
}
}
.navigation__item {
position: relative;
}
.navigation__item--active .navigation__link span {
transform: rotate(180deg);
}
.navigation__link {
color: #384050;
font-size: 14px;
font-weight: 400;
line-height: 16px;
display: flex;
flex-direction: row;
gap: 10px;
justify-content: space-between;
align-items: center;
}
@media (max-width: 992px) {
.navigation__link {
font-size: 18px;
line-height: 27px;
justify-content: flex-start;
}
}
.navigation__link span {
font-size: 16px;
color: #448fff;
font-weight: 500;
transition: 0.38s ease-in-out;
}
.navigation__dropdown {
padding-top: 28px;
position: absolute;
display: none;
animation-duration: 0.38s;
animation-fill-mode: backwards;
animation-name: animate-fade;
animation-timing-function: ease-in-out;
z-index: 11;
left: -15px;
}
.navigation__dropdown--open {
opacity: 1;
visibility: visible;
}
.navigation__dropdown--flex {
display: flex;
}
@media (max-width: 992px) {
.navigation__dropdown {
position: static;
padding-top: 10px;
transition: 0.38s ease-in-out;
}
}
.navigation__dropdown-list {
background-color: #f1f4f6;
border: 1px solid;
border-color: #d8dfe4;
border-radius: 10px;
padding: 16px;
width: max-content;
color: #384050;
font-size: 14px;
font-weight: 400;
line-height: 16.41px;
text-align: left;
gap: 10px;
display: flex;
flex-direction: column;
}
@media (max-width: 992px) {
.navigation__dropdown-list {
width: 100%;
background-color: transparent;
border: none;
font-size: 15px;
line-height: 22px;
padding: 0;
color: #606773;
}
}
@media (hover: hover) {
.navigation__item:hover .navigation__dropdown {
display: block;
}
}
@media (hover: hover) {
.navigation__dropdown:hover {
display: block;
}
}
.SearchForm {
color: #384050;
width: clamp(15.625rem, 79.618vw + -35.231rem, 31.25rem);
font-weight: 400;
line-height: 19px;
text-align: left;
display: flex;
padding: 16px;
border-radius: 10px;
justify-content: space-between;
background-color: #f1f4f6;
display: flex;
flex-direction: row;
align-items: center;
}
.SearchForm--full {
width: 100%;
}
.SearchForm::placeholder {
color: #999fae;
}
@media (max-width: 992px) {
.SearchForm {
display: none;
}
.SearchForm--full {
display: flex;
}
}
.SearchForm input {
background-color: #f1f4f6;
width: 98%;
}
.SearchForm__btn {
color: #999fae;
font-size: 20px;
}
.download {
display: flex;
gap: 10px;
padding-top: 16px;
padding-bottom: 16px;
padding-left: 24px;
padding-right: 24px;
background-color: #393185;
color: #ffffff;
border-radius: 10px;
font-size: 16px;
font-weight: 400;
line-height: 19px;
text-align: left;
white-space: nowrap;
}
@media (max-width: 992px) {
.download {
display: none;
}
}
.download span {
font-size: 20px;
}
.contacts {
display: flex;
flex-direction: row;
gap: 18px;
font-size: 14px;
font-weight: 400;
line-height: 16px;
text-align: left;
white-space: nowrap;
color: #384050;
}
@media (max-width: 992px) {
.contacts {
flex-direction: column;
gap: 15px;
}
}
.contacts--ft {
flex-direction: column;
}
@media (max-width: 992px) {
.contacts--header {
display: none;
}
}
.contacts__link {
color: #384050;
display: flex;
gap: 10px;
align-items: center;
white-space: nowrap;
font-size: 14px;
font-weight: 400;
line-height: 16px;
text-align: left;
font-weight: 600;
}
@media (max-width: 992px) {
.contacts__link {
gap: 15px;
font-size: 18px;
line-height: 21px;
}
}
.contacts__link span {
color: #448fff;
font-size: 20px;
}
@media (max-width: 992px) {
.contacts__link span {
font-size: 24px;
}
}
.contacts__link--ft {
gap: 15px;
font-size: 16px;
font-weight: 600;
line-height: 19px;
text-align: left;
}
.contacts__link--ft span {
font-size: 24px;
}
.contacts--ft {
flex-direction: column-reverse;
}
.burger {
display: none;
position: relative;
width: 35px;
height: 20px;
}
.burger::before,
.burger::after {
content: "";
background: #393185;
border-radius: 10px;
position: absolute;
width: 100%;
height: 2px;
right: 0;
top: 10px;
transition: 0.38s ease-in-out;
}
.burger::after {
top: 20px;
}
.burger::before {
width: 100%;
}
.burger span {
content: "";
background: #393185;
border-radius: 10px;
position: absolute;
right: 0;
width: 100%;
height: 2px;
transition: 0.38s ease-in-out;
}
.burger--open::before {
opacity: 0;
}
.burger--open::after {
width: 100%;
transform: rotate(-45deg) translate(5px, -10px);
}
.burger--open span {
width: 100%;
transform: rotate(45deg) translate(4px, 9px);
}
@media (max-width: 992px) {
.burger {
display: block;
}
}
.menu {
--container-width: 1306px;
display: grid;
grid-template-columns: [full-start left-start] minmax(15px, 1fr) [right-start center-start] minmax(
0,
var(--container-width)
) [left-end center-end] minmax(15px, 1fr) [full-end right-end];
grid-template-rows: [full-start left-start center-start right-start] auto [full-end left-end center-end right-end];
background-color: #fff;
position: fixed;
left: -100%;
top: 0px;
width: 100%;
height: 100vh;
padding-bottom: 50px;
padding-top: 90px;
z-index: 20;
transition: 0.38s ease-in-out;
overflow: auto;
}
@media (max-width: 992px) {
.menu {
--container-width: 920px;
}
}
@media (max-width: 768px) {
.menu {
--container-width: 640px;
}
}
@media (max-width: 576px) {
.menu {
--container-width: 100%;
}
}
.menu--open {
left: 0;
}
.menu .SearchForm {
display: flex;
width: 100%;
}
.menu .download {
display: flex;
align-self: flex-start;
}
.menu__container {
grid-area: center;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 40px;
}
.menu__container-top {
display: flex;
flex-direction: column;
gap: 25px;
}
.menu__container-bottom {
display: flex;
flex-direction: column;
gap: 40px;
}
.menu__text {
color: #999fae;
font-size: 12px;
line-height: 18px;
}
@media (max-width: 768px) {
.menu__container {
grid-area: full;
padding-left: 16px;
padding-right: 16px;
}
}
.header {
--container-width: 1306px;
display: grid;
grid-template-columns: [full-start left-start] minmax(15px, 1fr) [right-start center-start] minmax(
0,
var(--container-width)
) [left-end center-end] minmax(15px, 1fr) [full-end right-end];
grid-template-rows: [full-start left-start center-start right-start] auto [full-end left-end center-end right-end];
}
@media (max-width: 992px) {
.header {
--container-width: 920px;
}
}
@media (max-width: 768px) {
.header {
--container-width: 640px;
}
}
@media (max-width: 576px) {
.header {
--container-width: 100%;
}
}
@media (max-width: 992px) {
.header {
position: fixed;
z-index: 21;
width: 100%;
background-color: #ffffff;
}
}
.header__case {
grid-area: center;
display: flex;
gap: 24px;
flex-direction: column;
padding-top: 24px;
padding-bottom: clamp(1.875rem, 5.732vw + -1.787rem, 3rem);
}
@media (max-width: 992px) {
.header__case {
padding-top: 10px;
padding-bottom: 10px;
}
}
.header__wrapper {
display: flex;
flex-direction: row;
gap: 10px;
justify-content: space-between;
align-items: center;
}
.header__bottom {
background-color: #f1f4f6;
border-radius: 15px;
display: flex;
flex-direction: row;
gap: 40px;
justify-content: space-between;
align-items: center;
padding-left: 16px;
padding-top: 18px;
padding-bottom: 18px;
padding-right: 16px;
}
@media (max-width: 992px) {
.header__bottom {
display: none;
}
}
.header__logo {
width: clamp(7.188rem, 20.701vw + -6.035rem, 11.25rem);
height: clamp(3.125rem, 9.554vw + -2.978rem, 5rem);
object-fit: contain;
}
.header__left {
display: flex;
flex-direction: row;
gap: 20px;
align-items: center;
}
.header__container {
display: flex;
flex-direction: row;
gap: clamp(1.875rem, 3.185vw + -0.159rem, 2.5rem);
justify-content: space-between;
align-items: center;
}
.modal {
display: none;
background-color: #f1f4f6;
border-radius: 30px;
padding: clamp(1.25rem, 3.185vw + -0.784rem, 1.875rem);
width: clamp(34.375rem, 15.924vw + 24.204rem, 37.5rem);
}
.modal__container {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 30px;
}
.modal__container .btn {
width: 100%;
text-align: center;
}
.modal__text {
color: #606773;
font-size: clamp(1rem, 0.637vw + 0.593rem, 1.125rem);
line-height: 1.5;
}
.fancybox__backdrop {
background: rgba(56, 64, 80, 0.7);
}
.fancybox__content > .f-button.is-close-btn {
width: 30px;
height: 30px;
top: 20px;
right: 20px;
opacity: 1;
}
.fancybox__content > .f-button.is-close-btn::after {
content: url('data:image/svg+xml,<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 10L20 20M10 20L20 10M28.5 15C28.5 22.4558 22.4558 28.5 15 28.5C7.54416 28.5 1.5 22.4558 1.5 15C1.5 7.54416 7.54416 1.5 15 1.5C22.4558 1.5 28.5 7.54416 28.5 15Z" stroke="%23999FAE" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/></svg>');
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.f-button svg {
display: none;
}
@media (max-width: 768px) {
.is-compact .fancybox__content > .f-button.is-close-btn {
top: 15px;
}
.f-button {
background: transparent;
}
}
.scroll-to-top {
width: 64px;
height: 64px;
padding: 16px;
background-color: #393185;
color: #ffffff;
border-radius: 10px;
position: fixed;
font-size: 32px;
bottom: 20px;
right: 20px;
display: flex;
align-items: center;
justify-content: center;
z-index: 19;
}
.scroll-to-top span {
vertical-align: top;
font-size: 32px;
}
@media (max-width: 992px) {
.scroll-to-top {
width: 48px;
height: 48px;
}
.scroll-to-top span {
font-size: 24px;
}
}
.footer {
--container-width: 1306px;
display: grid;
grid-template-columns: [full-start left-start] minmax(15px, 1fr) [right-start center-start] minmax(
0,
var(--container-width)
) [left-end center-end] minmax(15px, 1fr) [full-end right-end];
grid-template-rows: [full-start left-start center-start right-start] auto [full-end left-end center-end right-end];
padding-bottom: 24px;
}
@media (max-width: 992px) {
.footer {
--container-width: 920px;
}
}
@media (max-width: 768px) {
.footer {
--container-width: 640px;
}
}
@media (max-width: 576px) {
.footer {
--container-width: 100%;
}
}
.footer__top {
justify-content: space-between;
display: flex;
flex-direction: row;
gap: clamp(5rem, 6.369vw + 0.932rem, 6.25rem);
}
.footer__left {
justify-content: space-between;
display: flex;
flex-direction: row;
gap: clamp(6.25rem, 49.682vw + -25.484rem, 16rem);
}
.footer__medium {
justify-content: space-between;
display: flex;
flex-direction: row;
padding-right: 95px;
align-items: flex-start;
padding-bottom: 6px;
}
.footer__medium--left {
display: flex;
flex-direction: column;
color: #999fae;
font-size: 12px;
font-weight: 400;
line-height: 15px;
text-align: left;
max-width: 330px;
}
.footer__links {
display: flex;
align-items: center;
gap: clamp(1.875rem, 45.223vw + -27.011rem, 10.75rem);
}
.footer__link {
font-weight: 400;
font-size: 14px;
line-height: 1;
color: #448fff;
padding-bottom: 23px;
display: flex;
align-items: center;
gap: clamp(1.875rem, 9.554vw + -4.228rem, 3.75rem);
}
.footer__branding {
color: #999fae;
font-size: 12px;
font-weight: 400;
line-height: 15px;
text-align: left;
display: flex;
padding-bottom: 23px;
gap: clamp(0.5rem, 2.229vw + -0.924rem, 0.938rem);
}
.footer__container {
display: flex;
flex-direction: column;
border-radius: 30px;
background-color: #f1f4f6;
grid-area: center;
padding-top: 40px;
padding-bottom: clamp(1.25rem, 3.185vw + -0.784rem, 1.875rem);
grid-area: center;
padding: 30px;
}
.footer__bottom {
display: flex;
justify-content: space-between;
gap: 16px;
}
.footer__nav {
display: flex;
gap: clamp(3.125rem, 3.822vw + 0.684rem, 3.875rem);
}
.footer__menu {
width: clamp(9.063rem, 4.777vw + 6.011rem, 10rem);
font-size: 16px;
font-weight: 400;
line-height: 19px;
text-align: left;
color: #384050;
display: flex;
flex-direction: column;
gap: 6px;
}
.footer__text {
font-size: 14px;
font-weight: 400;
line-height: 21px;
text-align: left;
color: #999fae;
font-size: clamp(0.75rem, 0.637vw + 0.343rem, 0.875rem);
line-height: clamp(1.375rem, 0.637vw + 0.968rem, 1.5rem);
}
.footer__text--link {
transition: color 0.38s ease-in-out;
}
.footer__text--link:hover {
color: #448fff;
}
.footer__text--mb {
margin-bottom: clamp(0.625rem, 9.554vw + -5.478rem, 2.5rem);
}
.footer__logo {
width: 160px;
height: 72px;
object-fit: contain;
}
.footer__list {
display: flex;
gap: clamp(0.625rem, 9.554vw + -5.478rem, 2.5rem);
}
.footer__list-link {
font-size: clamp(0.875rem, 0vw + 0.875rem, 0.875rem);
line-height: clamp(1.375rem, 1.274vw + 0.561rem, 1.625rem);
transition: color 0.38s ease-in-out;
}
.footer__contacts {
display: flex;
align-items: flex-end;
flex-direction: column;
}
.footer__contacts-links {
font-size: 20px;
display: flex;
gap: clamp(1.875rem, 9.554vw + -4.228rem, 3.75rem);
margin-bottom: clamp(1.563rem, 7.325vw + -3.116rem, 3rem);
}
.footer__contacts-adress {
width: 80%;
text-align: right;
font-size: clamp(0.875rem, 0.637vw + 0.468rem, 1rem);
line-height: clamp(1.375rem, 1.274vw + 0.561rem, 1.625rem);
margin-bottom: clamp(0.938rem, 5.414vw + -2.521rem, 2rem);
}
.footer__bottom {
display: flex;
align-items: center;
justify-content: space-between;
}
.footer__bottom-box {
display: flex;
align-items: center;
gap: clamp(8.438rem, 36.624vw + -14.956rem, 15.625rem);
}
.footer__develop {
display: flex;
align-items: center;
gap: 10px;
}
@media (max-width: 992px) {
.footer__links {
flex-direction: column;
gap: 10px;
align-items: flex-start;
}
.footer__link {
flex-direction: column;
gap: 10px;
align-items: flex-start;
padding-right: 0;
}
.footer__top {
flex-direction: column;
gap: 30px;
padding-bottom: 30px;
}
.footer__left {
flex-direction: column;
gap: 30px;
}
.footer__medium {
flex-direction: column-reverse;
gap: 30px;
padding-right: 0px;
align-items: flex-start;
}
.footer__bottom {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 576px) {
.footer {
padding-bottom: 0;
}
.footer__container {
border-radius: 0;
grid-area: full;
padding: 20px;
}
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
input,
textarea {
outline: none;
}
html {
height: 100%;
scroll-behavior: smooth;
}
@font-face {
font-family: "Roboto Flex";
src: url(//xmk-russia.com/app/themes/holvent-china/fonts/RobotoFlex-VariableFont.ttf) format("truetype-variations");
font-weight: 100 900;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
font-family: "Roboto Flex";
}
.section {
padding-bottom: clamp(4.063rem, 9.554vw + -2.04rem, 5.938rem);
}
.textError {
font-size: 16px;
line-height: 1.2;
text-align: left;
}
.social {
display: flex;
flex-direction: row;
gap: 10px;
justify-content: start;
align-items: center;
text-align: left;
color: #606773;
font-size: 16px;
font-weight: 400;
line-height: 16px;
}
@media (max-width: 992px) {
.social {
font-size: 16px;
line-height: 20px;
}
}
.social span {
color: #999fae;
font-size: 24px;
}
.btn {
display: block;
position: relative;
padding-top: 16px;
padding-bottom: 16px;
padding-left: clamp(1.25rem, 3.822vw + -1.191rem, 2rem);
padding-right: clamp(1.25rem, 3.822vw + -1.191rem, 2rem);
font-size: 14px;
font-weight: 600;
line-height: 20px;
background-color: #448fff;
color: #ffffff;
border-radius: 10px;
text-align: center;
width: fit-content;
z-index: 1;
transition: all 0.38s ease-in-out;
padding: 16px 32px 16px 32px;
font-size: 16px;
font-weight: 400;
line-height: 19px;
text-align: left;
}
@media (max-width: 992px) {
.btn--full {
width: 100%;
height: fit-content;
text-align: center;
}
}
.input {
width: 100%;
padding: 15px;
border-radius: 10px;
border: 1px solid #d8dfe4;
font-family: "Roboto Flex";
font-size: 16px;
font-weight: 400;
line-height: 1.1;
color: #384050;
}
.input::placeholder {
color: #999fae;
}
.input--checkbox {
padding: 0;
appearance: none;
border-radius: 5px;
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.38s ease-in-out;
background-color: #ffffff;
border: 1px solid #d8dfe4;
}
.input--checkbox::before {
font-size: 7px;
color: #ffffff;
}
.input--checkbox:checked {
border: 1px solid #448fff;
background-color: #448fff;
background-size: 12px;
background-position: center;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml,<svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.02406 2.09917C7.31738 1.80661 7.31737 1.33148 7.02406 1.03893C6.73183 0.74745 6.25883 0.74744 5.96658 1.0389L3.62512 3.37411L2.03342 1.78667C1.74117 1.49521 1.26817 1.49522 0.975938 1.7867C0.682625 2.07925 0.682622 2.55438 0.975931 2.84694L2.99739 4.86322C3.34433 5.20928 3.9059 5.20928 4.25285 4.86323L7.02406 2.09917Z" fill="white"/></svg>');
}
.input--textarea {
resize: none;
height: clamp(6.25rem, 8.28vw + 0.961rem, 7.875rem);
}
.input--textarea::-webkit-scrollbar {
width: 10px;
}
.input--textarea::-webkit-scrollbar-track {
background: #ffffff;
border-radius: 5px;
}
.input--textarea::-webkit-scrollbar-thumb {
background-color: #448fff;
border-radius: 5px;
border: 3px solid #ffffff;
}
.form {
display: flex;
row-gap: 30px;
column-gap: 25px;
flex-wrap: wrap;
width: 80%;
}
.form--column {
width: 100%;
flex-direction: column;
}
.form--column .form__input {
width: 100%;
}
@media (max-width: 992px) {
.form {
width: 100%;
}
}
.form__input {
width: calc(29% - 5px);
display: flex;
flex-direction: column;
gap: 10px;
}
.form__input label {
color: #384050;
font-size: clamp(0.875rem, 0.637vw + 0.468rem, 1rem);
font-weight: 600;
line-height: 1.1;
text-align: left;
}
@media (max-width: 992px) {
.form__input {
width: 100%;
}
.form__input label {
font-size: 16px;
}
}
.form__wrapper {
display: flex;
align-items: center;
gap: 15px;
}
.form__text {
width: 75%;
text-align: left;
font-size: clamp(0.75rem, 0.637vw + 0.343rem, 0.875rem);
line-height: 1.2;
color: #606773;
}
.form__text a {
color: #384050;
position: relative;
}
.form__text a::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: #384050;
transition: 0.38s ease-in-out;
}
@media (max-width: 992px) {
.form__text {
width: 80%;
}
}
.title {
color: #384050;
font-size: clamp(2.188rem, 4.14vw + -0.457rem, 3rem);
font-weight: 700;
line-height: 41px;
}
@media (max-width: 992px) {
.title {
font-size: 32px;
line-height: 30px;
}
}
.mainTitle {
color: #384050;
text-align: left;
font-size: clamp(3.438rem, 2.866vw + 1.607rem, 4rem);
font-weight: 700;
line-height: 54px;
}
@media (max-width: 992px) {
.mainTitle {
font-size: 42px;
line-height: 1.1;
}
}
.text {
--container-width: 1306px;
display: grid;
grid-template-columns: [full-start left-start] minmax(15px, 1fr) [right-start center-start] minmax(
0,
var(--container-width)
) [left-end center-end] minmax(15px, 1fr) [full-end right-end];
grid-template-rows: [full-start left-start center-start right-start] auto [full-end left-end center-end right-end];
padding-bottom: clamp(5rem, 5.096vw + 1.745rem, 6rem);
}
@media (max-width: 992px) {
.text {
--container-width: 920px;
}
}
@media (max-width: 768px) {
.text {
--container-width: 640px;
}
}
@media (max-width: 576px) {
.text {
--container-width: 100%;
}
}
.text--small {
padding-bottom: 48px;
}
.text__container {
position: relative;
display: flex;
flex-direction: column;
gap: clamp(2.125rem, 4.459vw + -0.723rem, 3rem);
grid-area: center;
}
@media (max-width: 576px) {
.text__container {
align-items: center;
}
}
.text__block {
display: flex;
flex-direction: column;
gap: 20px;
color: #606773;
font-size: 18px;
font-weight: 400;
line-height: 27px;
text-align: left;
}
.certificates {
--container-width: 1306px;
display: grid;
grid-template-columns: [full-start left-start] minmax(15px, 1fr) [right-start center-start] minmax(
0,
var(--container-width)
) [left-end center-end] minmax(15px, 1fr) [full-end right-end];
grid-template-rows: [full-start left-start center-start right-start] auto [full-end left-end center-end right-end];
padding-bottom: clamp(7.5rem, 8.28vw + 2.211rem, 9.125rem);
}
@media (max-width: 992px) {
.certificates {
--container-width: 920px;
}
}
@media (max-width: 768px) {
.certificates {
--container-width: 640px;
}
}
@media (max-width: 576px) {
.certificates {
--container-width: 100%;
}
}
.certificates__container {
position: relative;
display: flex;
flex-direction: column;
gap: 48px;
grid-area: center;
}
.certificates__top {
display: inline-flex;
justify-content: space-between;
align-items: baseline;
}
.certificates__slide {
width: 18.5%;
background-color: #f1f4f6;
padding: 15px;
border: 1px solid #d8dfe4;
border-radius: 15px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.certificates__image {
border-radius: 10px;
object-fit: cover;
}
.certificates__buttons {
display: flex;
gap: 10px;
}
.certificates__buttons-btnNext,
.certificates__buttons-btnPrev {
font-size: 32px;
color: #448fff;
}
.certificates__buttons-btnNext:hover,
.certificates__buttons-btnPrev:hover {
cursor: pointer;
}
.certificates__buttons-btnPrev {
transform: rotate(180deg);
}
.certificates__pagination {
z-index: 2;
}
.certificates__pagination.swiper-pagination-bullets.swiper-pagination-horizontal {
bottom: -68px;
}
.certificates__pagination.swiper-pagination-horizontal.swiper-pagination-bullets
.swiper-pagination-bullet {
margin: 0 4px;
}
.certificates__pagination .swiper-pagination-bullet {
opacity: 1;
background-color: #d8dfe4;
}
.certificates__pagination .swiper-pagination-bullet-active {
background-color: #448fff;
}
.feedback {
--container-width: 1306px;
display: grid;
grid-template-columns: [full-start left-start] minmax(15px, 1fr) [right-start center-start] minmax(
0,
var(--container-width)
) [left-end center-end] minmax(15px, 1fr) [full-end right-end];
grid-template-rows: [full-start left-start center-start right-start] auto [full-end left-end center-end right-end];
padding-bottom: clamp(5rem, 5.096vw + 1.745rem, 6rem);
}
@media (max-width: 992px) {
.feedback {
--container-width: 920px;
}
}
@media (max-width: 768px) {
.feedback {
--container-width: 640px;
}
}
@media (max-width: 576px) {
.feedback {
--container-width: 100%;
}
}
.feedback__container {
position: relative;
display: flex;
flex-direction: column;
display: flex;
flex-direction: column;
gap: clamp(1.875rem, 6.369vw + -2.193rem, 3.125rem);
border-radius: 30px;
background-color: #f1f4f6;
grid-area: center;
padding: clamp(1.563rem, 1.592vw + 0.545rem, 1.875rem);
}
@media (max-width: 992px) {
.feedback__container {
gap: 30px;
text-align: center;
}
}
.feedback__handphone {
position: absolute;
right: 30px;
bottom: 0;
object-fit: cover;
width: clamp(15rem, 25.796vw + -1.477rem, 20.063rem);
height: clamp(22.5rem, 28.662vw + 4.192rem, 28.125rem);
}
@media (max-width: 992px) {
.feedback__handphone {
display: none;
}
}
.feedback__wrapper {
display: flex;
flex-direction: column;
gap: clamp(1.563rem, 1.592vw + 0.545rem, 1.875rem);
}
.feedback__text {
max-width: clamp(42.5rem, 12.739vw + 34.363rem, 45rem);
font-size: 18px;
font-weight: 400;
line-height: 27px;
color: #606773;
}
@media (max-width: 992px) {
.feedback__text {
width: 100%;
}
}
.heroCard {
width: 30%;
border-radius: 15px;
border: 1px solid #d8dfe4;
padding: 20px;
display: flex;
flex-direction: column;
gap: 15px;
background-color: rgba(241, 244, 246, 0.8509803922);
backdrop-filter: blur(5px);
}
@media (max-width: 768px) {
.heroCard {
width: 100%;
}
}
.heroCard__title {
color: #448fff;
font-size: clamp(2rem, 5.096vw + -1.255rem, 3rem);
font-weight: 700;
line-height: 0.8;
}
.heroCard__text {
color: #606773;
font-size: clamp(1rem, 0.637vw + 0.593rem, 1.125rem);
font-weight: 400;
line-height: 1.1;
}
.hero {
--container-width: 1306px;
display: grid;
grid-template-columns: [full-start left-start] minmax(15px, 1fr) [right-start center-start] minmax(
0,
var(--container-width)
) [left-end center-end] minmax(15px, 1fr) [full-end right-end];
grid-template-rows: [full-start left-start center-start right-start] auto [full-end left-end center-end right-end];
}
@media (max-width: 992px) {
.hero {
--container-width: 920px;
}
}
@media (max-width: 768px) {
.hero {
--container-width: 640px;
}
}
@media (max-width: 576px) {
.hero {
--container-width: 100%;
}
}
@media (max-width: 992px) {
.hero {
margin-top: 70px;
}
}
@media (max-width: 992px) {
.hero--about {
margin-top: 0px;
}
}
.hero__case {
grid-area: center;
}
@media (max-width: 576px) {
.hero__case {
grid-area: full;
}
}
.hero__container {
display: grid;
grid-area: 1/1/-1/-1;
}
.hero__list {
margin-top: -50px;
align-self: end;
justify-content: center;
display: flex;
gap: 15px;
z-index: 6;
}
@media (max-width: 768px) {
.hero__list {
flex-direction: column;
gap: 10px;
padding-left: 20px;
padding-right: 20px;
}
}
.hero__image {
grid-area: 1/1/-1/-1;
border-radius: 30px;
height: 0;
min-height: 100%;
width: 100%;
z-index: -1;
object-fit: cover;
filter: contrast(0.65) brightness(0.7);
}
@media (max-width: 576px) {
.hero__image {
border-radius: 0;
}
}
.hero__wrapper {
grid-area: 1/1/-1/-1;
max-width: 540px;
display: flex;
flex-direction: column;
gap: 60px;
padding-left: 60px;
padding-top: 100px;
padding-bottom: 100px;
z-index: 9;
}
@media (max-width: 992px) {
.hero__wrapper {
padding-top: 64px;
padding-left: 20px;
padding-right: 20px;
max-width: 100%;
gap: 50px;
}
}
@media (max-width: 768px) {
.hero__wrapper {
padding-bottom: 150px;
}
}
.hero__top {
display: flex;
flex-direction: column;
gap: 30px;
z-index: 9;
}
.hero__title {
color: #ffffff;
font-size: clamp(3.438rem, 2.866vw + 1.607rem, 4rem);
font-weight: 700;
line-height: 54.4px;
}
@media (max-width: 992px) {
.hero__title {
font-size: 42px;
line-height: 35px;
}
}
.hero__description {
color: #d8dfe4;
font-size: 24px;
font-weight: 400;
line-height: 20.4px;
}
.card {
position: relative;
display: flex;
flex-direction: column;
width: 33%;
padding: 10px;
gap: 16px;
border-radius: 15px;
border: 1px solid #d8dfe4;
text-align: left;
}
.card__wrapper {
display: flex;
flex-direction: column;
gap: 16px;
padding-left: 10px;
padding-bottom: 10px;
}
.card__img {
border-radius: 10px;
object-fit: cover;
width: 390px;
}
.card__date {
color: #999fae;
font-size: 12px;
font-weight: 400;
line-height: 14px;
}
.card__name {
color: #384050;
font-size: 18px;
font-weight: 600;
line-height: 21px;
width: 90%;
}
.card__description {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
color: #606773;
font-size: 14px;
font-weight: 400;
line-height: 21px;
width: 90%;
}
.card__link {
position: absolute;
bottom: 20px;
right: 20px;
}
@media (max-width: 992px) {
.card {
width: 45%;
}
}
@media (max-width: 576px) {
.card {
width: 99%;
}
}
.factories {
--container-width: 1306px;
display: grid;
grid-template-columns: [full-start left-start] minmax(15px, 1fr) [right-start center-start] minmax(
0,
var(--container-width)
) [left-end center-end] minmax(15px, 1fr) [full-end right-end];
grid-template-rows: [full-start left-start center-start right-start] auto [full-end left-end center-end right-end];
padding-bottom: clamp(5rem, 5.096vw + 1.745rem, 6rem);
}
@media (max-width: 992px) {
.factories {
--container-width: 920px;
}
}
@media (max-width: 768px) {
.factories {
--container-width: 640px;
}
}
@media (max-width: 576px) {
.factories {
--container-width: 100%;
}
}
.factories__container {
position: relative;
display: flex;
flex-direction: column;
gap: clamp(1.875rem, 5.732vw + -1.787rem, 3rem);
background-color: #ffffff;
grid-area: center;
}
@media (max-width: 768px) {
.factories__container {
align-items: center;
}
}
.factories__list {
display: flex;
gap: clamp(1.5rem, 1.911vw + 0.279rem, 1.875rem);
justify-content: center;
}
@media (max-width: 992px) {
.factories__list {
flex-wrap: wrap;
}
}
@media (max-width: 576px) {
.factories__list {
flex-direction: column;
align-items: center;
gap: 24px;
}
}
.breadcrumb {
--container-width: 1306px;
display: grid;
grid-template-columns: [full-start left-start] minmax(15px, 1fr) [right-start center-start] minmax(
0,
var(--container-width)
) [left-end center-end] minmax(15px, 1fr) [full-end right-end];
grid-template-rows: [full-start left-start center-start right-start] auto [full-end left-end center-end right-end];
padding-bottom: clamp(1.875rem, 6.369vw + -2.193rem, 3.125rem);
}
@media (max-width: 992px) {
.breadcrumb {
--container-width: 920px;
}
}
@media (max-width: 768px) {
.breadcrumb {
--container-width: 640px;
}
}
@media (max-width: 576px) {
.breadcrumb {
--container-width: 100%;
}
}
.breadcrumb__wrapper {
color: #999fae;
font-size: 14px;
font-weight: 400;
line-height: 21px;
text-align: left;
grid-area: center;
}
.breadcrumb__wrapper span {
padding-right: 13px;
}
.breadcrumb_last {
color: #606773;
}
@media (max-width: 992px) {
.breadcrumb {
padding-top: 100px;
}
}
.contact {
display: flex;
align-items: center;
gap: 15px;
}
.contact--big .contact__text {
font-size: clamp(1.25rem, 1.274vw + 0.436rem, 1.5rem);
font-weight: 700;
}
.contact__icon {
color: #448fff;
font-size: 24px;
}
.contact__text {
font-weight: 600;
font-size: 16px;
line-height: 1.1;
color: #384050;
transition: color 0.38s ease-in-out;
}
.contactSection {
--container-width: 1306px;
display: grid;
grid-template-columns: [full-start left-start] minmax(15px, 1fr) [right-start center-start] minmax(
0,
var(--container-width)
) [left-end center-end] minmax(15px, 1fr) [full-end right-end];
grid-template-rows: [full-start left-start center-start right-start] auto [full-end left-end center-end right-end];
}
@media (max-width: 992px) {
.contactSection {
--container-width: 920px;
}
}
@media (max-width: 768px) {
.contactSection {
--container-width: 640px;
}
}
@media (max-width: 576px) {
.contactSection {
--container-width: 100%;
}
}
.contactSection__container {
grid-area: center;
display: flex;
justify-content: space-between;
}
.contactSection__info {
width: 40%;
display: flex;
flex-direction: column;
gap: clamp(1.875rem, 6.369vw + -2.193rem, 3.125rem);
}
.contactSection__wrapper {
display: flex;
flex-direction: column;
gap: 20px;
}
.contactSection__map {
width: 57%;
height: clamp(21.25rem, 31.847vw + 0.908rem, 27.5rem);
}
.contactSection__map ymaps,
.contactSection__map iframe {
border-radius: 20px; }
.contactSection__map .ymaps3x0--map-copyrights__container {
display: none !important;
}
.contactSection__text {
display: flex;
flex-wrap: wrap;
gap: 20px;
color: #999fae;
font-size: 16px;
line-height: 24px;
}
@media (max-width: 992px) {
.contactSection__container {
flex-direction: column;
gap: 30px;
}
.contactSection__info {
width: 100%;
}
.contactSection__map {
width: 100%;
height: 300px;
}
}
.about {
--container-width: 1306px;
display: grid;
grid-template-columns: [full-start left-start] minmax(15px, 1fr) [right-start center-start] minmax(
0,
var(--container-width)
) [left-end center-end] minmax(15px, 1fr) [full-end right-end];
grid-template-rows: [full-start left-start center-start right-start] auto [full-end left-end center-end right-end];
}
@media (max-width: 992px) {
.about {
--container-width: 920px;
}
}
@media (max-width: 768px) {
.about {
--container-width: 640px;
}
}
@media (max-width: 576px) {
.about {
--container-width: 100%;
}
}
@media (max-width: 576px) {
.about .btn {
width: 100%;
text-align: center;
}
}
.about__container {
grid-area: center;
position: relative;
display: flex;
padding: 15px;
gap: 60px;
border-radius: 30px;
background-color: #f1f4f6;
}
@media (max-width: 992px) {
.about__container {
flex-direction: column;
gap: 25px;
}
}
.about__photo {
border-radius: 15px;
object-fit: cover;
width: clamp(31.25rem, 41.401vw + 4.805rem, 39.375rem);
height: 100%;
}
@media (max-width: 992px) {
.about__photo {
width: 100%;
height: 350px;
}
}
@media (max-width: 576px) {
.about__photo {
height: 250px;
}
}
.about__wrapper {
display: flex;
flex-direction: column;
gap: 48px;
padding-top: 42px;
padding-bottom: 42px;
}
@media (max-width: 992px) {
.about__wrapper {
padding-top: 0;
padding-bottom: 10px;
gap: 25px;
}
}
.about__text {
font-size: 18px;
font-weight: 400;
line-height: 27px;
text-align: left;
color: #606773;
}
@media (max-width: 992px) {
.about__text {
font-size: 16px;
}
}
.about__title {
font-size: 24px;
font-weight: 400;
line-height: 20px;
text-align: left;
color: #606773;
}
@media (max-width: 992px) {
.about__title {
font-size: 20px;
line-height: 20px;
}
}
.about__block {
display: flex;
flex-direction: column;
gap: 15px;
}
.benefits {
--container-width: 1306px;
display: grid;
grid-template-columns: [full-start left-start] minmax(15px, 1fr) [right-start center-start] minmax(
0,
var(--container-width)
) [left-end center-end] minmax(15px, 1fr) [full-end right-end];
grid-template-rows: [full-start left-start center-start right-start] auto [full-end left-end center-end right-end];
}
@media (max-width: 992px) {
.benefits {
--container-width: 920px;
}
}
@media (max-width: 768px) {
.benefits {
--container-width: 640px;
}
}
@media (max-width: 576px) {
.benefits {
--container-width: 100%;
}
}
.benefits__container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
gap: 32px;
grid-area: center;
align-content: center;
justify-content: center;
}
.benefits__item {
display: flex;
flex-direction: column;
gap: 32px;
align-items: center;
}
.benefits__circle {
border: 1px solid #d8dfe4;
background-color: #f1f4f6;
width: clamp(6.25rem, 12.739vw + -1.887rem, 8.75rem);
height: clamp(6.25rem, 12.739vw + -1.887rem, 8.75rem);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.benefits__description {
max-width: 230px;
color: #384050;
font-size: 16px;
font-weight: 600;
line-height: 19px;
text-align: center;
}
.benefits__image {
width: clamp(3.125rem, 4.459vw + 0.277rem, 4rem);
height: clamp(3.125rem, 4.459vw + 0.277rem, 4rem);
object-fit: contain;
}
@media (max-width: 992px) {
.benefits__circle {
width: 80px;
height: 80px;
}
.benefits__item {
gap: 15px;
}
.benefits__image {
width: 40px;
height: 40px;
}
.benefits__description {
font-size: 14px;
line-height: 17px;
max-width: 160px;
word-break: break-word;
}
}
@media (max-width: 576px) {
.benefits__container {
grid-area: full;
}
}
.documents {
--container-width: 1306px;
display: grid;
grid-template-columns: [full-start left-start] minmax(15px, 1fr) [right-start center-start] minmax(
0,
var(--container-width)
) [left-end center-end] minmax(15px, 1fr) [full-end right-end];
grid-template-rows: [full-start left-start center-start right-start] auto [full-end left-end center-end right-end];
padding-bottom: clamp(5rem, 5.096vw + 1.745rem, 6rem);
}
@media (max-width: 992px) {
.documents {
--container-width: 920px;
}
}
@media (max-width: 768px) {
.documents {
--container-width: 640px;
}
}
@media (max-width: 576px) {
.documents {
--container-width: 100%;
}
}
.documents__container {
display: flex;
flex-direction: column;
gap: clamp(2.188rem, 4.14vw + -0.457rem, 3rem);
background-color: #ffffff;
grid-area: center;
}
@media (max-width: 576px) {
.documents__container {
align-items: center;
}
}
.documents__wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
gap: clamp(0.625rem, 1.592vw + -0.392rem, 0.938rem);
}
.documents__item {
width: 32%;
background-color: #f1f4f6;
flex-direction: row;
padding: 15px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
@media (max-width: 992px) {
.documents__item {
width: 49%;
}
}
@media (max-width: 576px) {
.documents__item {
width: 98%;
}
}
.documents__item--title {
color: #384050;
font-size: 16px;
font-weight: 600;
line-height: 19px;
text-align: left;
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
}
.documents__item--file {
font-size: 32px;
color: #448fff;
}
.documents__item--arrow {
font-size: 20px;
color: #999fae;
}
.gallery {
display: flex;
flex-direction: column;
gap: 15px;
}
.gallery img {
width: 100%;
height: 100%;
object-fit: contain;
}
.gallery__modal {
border: 1px solid #d8dfe4;
width: clamp(28.75rem, 50.955vw + -3.798rem, 38.75rem);
height: clamp(28.75rem, 50.955vw + -3.798rem, 38.75rem);
border-radius: 15px;
}
@media (max-width: 576px) {
.gallery__modal {
width: 100%;
height: 350px;
}
}
.gallery__modal img {
border-radius: 15px;
}
.gallery__wrapper {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.gallery__image {
cursor: pointer;
width: clamp(3.313rem, 6.369vw + -0.756rem, 4.563rem);
height: clamp(3.313rem, 6.369vw + -0.756rem, 4.563rem);
border-radius: 5px;
border: 1px solid #d8dfe4;
padding: 5px;
transition: 0.38s ease-in-out;
}
.gallery__image--active {
border-color: #448fff;
}
.gallery__image img {
border-radius: 5px;
}
.equipment {
--container-width: 1306px;
display: grid;
grid-template-columns: [full-start left-start] minmax(15px, 1fr) [right-start center-start] minmax(
0,
var(--container-width)
) [left-end center-end] minmax(15px, 1fr) [full-end right-end];
grid-template-rows: [full-start left-start center-start right-start] auto [full-end left-end center-end right-end];
margin-bottom: clamp(1.875rem, 6.369vw + -2.193rem, 3.125rem);
}
@media (max-width: 992px) {
.equipment {
--container-width: 920px;
}
}
@media (max-width: 768px) {
.equipment {
--container-width: 640px;
}
}
@media (max-width: 576px) {
.equipment {
--container-width: 100%;
}
}
.equipment__container {
grid-area: center;
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(1.875rem, 6.369vw + -2.193rem, 3.125rem);
}
@media (max-width: 992px) {
.equipment__container {
grid-template-columns: 1fr;
}
}
.equipment__description {
display: flex;
flex-direction: column;
gap: clamp(1.875rem, 6.369vw + -2.193rem, 3.125rem);
}
.equipment__description-text {
color: #606773;
font-size: clamp(1rem, 0.637vw + 0.593rem, 1.125rem);
line-height: 1.5;
display: flex;
flex-direction: column;
gap: clamp(0.625rem, 3.185vw + -1.409rem, 1.25rem);
}
@media (max-width: 992px) {
.equipment__description {
order: -1;
}
}
.tablePhoto {
overflow: auto;
}
.tablePhoto::-webkit-scrollbar {
width: 13px;
}
.tablePhoto::-webkit-scrollbar-track {
background: #ffffff;
}
.tablePhoto::-webkit-scrollbar-thumb {
background-color: #448fff;
border-radius: 10px;
border: 5px solid #ffffff;
}
.tablePhoto img {
width: 100%;
min-width: 1306px;
height: auto;
object-fit: contain;
}
.characteristics {
display: flex;
flex-direction: column;
gap: clamp(1.875rem, 6.369vw + -2.193rem, 3.125rem);
}
.characteristics__wrapper {
display: flex;
flex-direction: column;
gap: 15px;
}
.characteristics__item {
font-size: clamp(1rem, 0.637vw + 0.593rem, 1.125rem);
line-height: 1.5;
color: #606773;
}
.characteristics__item b,
.characteristics__item strong {
font-weight: 700;
color: #384050;
}
.characteristics__name {
color: #384050;
font-size: clamp(1.125rem, 1.274vw + 0.311rem, 1.375rem);
font-weight: 700;
line-height: 1.5;
}
.characteristics__text {
font-size: clamp(1rem, 0.637vw + 0.593rem, 1.125rem);
line-height: 1.5;
color: #384050;
}
.models {
display: flex;
flex-direction: column;
gap: clamp(1.875rem, 6.369vw + -2.193rem, 3.125rem);
}
.models__item {
display: flex;
flex-direction: column;
gap: 10px;
}
.models__name {
background-color: #f1f4f6;
padding: 15px;
border-radius: 10px;
color: #384050;
font-size: clamp(1rem, 0.637vw + 0.593rem, 1.125rem);
font-weight: 700;
line-height: 1.5;
}
.models__wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 992px) {
.models__wrapper {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
}
@media (max-width: 576px) {
.models__wrapper {
grid-template-columns: 1fr;
}
}
.models__list {
display: flex;
flex-direction: column;
gap: clamp(0.625rem, 3.185vw + -1.409rem, 1.25rem);
color: #606773;
font-size: clamp(1rem, 0.637vw + 0.593rem, 1.125rem);
line-height: 1.5;
}
.models__list ul li {
padding-left: 35px;
position: relative;
}
.models__list ul li:before {
content: "";
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #606773;
}
.tabs {
--container-width: 1306px;
display: grid;
grid-template-columns: [full-start left-start] minmax(15px, 1fr) [right-start center-start] minmax(
0,
var(--container-width)
) [left-end center-end] minmax(15px, 1fr) [full-end right-end];
grid-template-rows: [full-start left-start center-start right-start] auto [full-end left-end center-end right-end];
}
@media (max-width: 992px) {
.tabs {
--container-width: 920px;
}
}
@media (max-width: 768px) {
.tabs {
--container-width: 640px;
}
}
@media (max-width: 576px) {
.tabs {
--container-width: 100%;
}
}
.tabs__container {
grid-area: center;
}
.tabs__wrapper {
display: flex;
align-items: center;
gap: clamp(1.875rem, 11.146vw + -5.245rem, 4.063rem);
border-bottom: 1px solid #d8dfe4;
margin-bottom: 25px;
}
.tabs__item {
cursor: pointer;
color: #384050;
position: relative;
padding-bottom: 15px;
font-weight: 700;
font-size: clamp(1.125rem, 1.274vw + 0.311rem, 1.375rem);
line-height: 1.5;
}
.tabs__item--active::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
height: 2px;
width: 100%;
background-color: #448fff;
}
.tabs__content {
height: inherit;
}
.tabs__content-item {
opacity: 0;
transition: opacity 0.38s ease-in-out;
display: none;
height: inherit;
}
.tabs__content-item--active {
display: block;
}
.tabs__content-item--opacity {
opacity: 1;
}
@media (max-width: 992px) {
.tabs__wrapper {
overflow-y: hidden;
overflow-x: scroll;
}
.tabs__item {
white-space: nowrap;
}
}
.error {
--container-width: 1306px;
display: grid;
grid-template-columns: [full-start left-start] minmax(15px, 1fr) [right-start center-start] minmax(
0,
var(--container-width)
) [left-end center-end] minmax(15px, 1fr) [full-end right-end];
grid-template-rows: [full-start left-start center-start right-start] auto [full-end left-end center-end right-end];
height: 50vh;
padding-top: clamp(4.063rem, 9.554vw + -2.04rem, 5.938rem);
margin-bottom: clamp(5rem, 35.032vw + -17.377rem, 11.875rem);
}
@media (max-width: 992px) {
.error {
--container-width: 920px;
}
}
@media (max-width: 768px) {
.error {
--container-width: 640px;
}
}
@media (max-width: 576px) {
.error {
--container-width: 100%;
}
}
.error__container {
grid-area: center;
display: flex;
justify-content: space-between;
}
.error__info {
width: 50%;
position: relative;
display: flex;
flex-direction: column;
gap: clamp(1.875rem, 6.369vw + -2.193rem, 3.125rem);
}
.error__title {
font-size: clamp(3rem, 5.096vw + -0.255rem, 4rem);
font-weight: 700;
line-height: clamp(2.188rem, 6.369vw + -1.881rem, 3.438rem);
color: #384050;
width: 70%;
}
.error__text {
width: 80%;
color: #606773;
font-size: 18px;
line-height: 28px;
}
.error__icon {
object-fit: contain;
height: 270px;
width: 49%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
@media (max-width: 992px) {
.error {
padding-top: 135px;
height: auto;
}
}
@media (max-width: 768px) {
.error {
padding-top: 110px;
}
.error__container {
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 30px;
}
.error__info {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.error__icon {
width: 100%;
}
}
.newsCard {
position: relative;
display: flex;
flex-direction: column;
padding: 10px;
gap: 16px;
border-radius: 15px;
border: 1px solid #d8dfe4;
text-align: left;
}
.newsCard--between {
justify-content: space-between;
}
.newsCard__wrapper {
display: flex;
flex-direction: column;
gap: 16px;
padding-left: 10px;
padding-bottom: 10px;
}
.newsCard__wrapper--end {
flex-direction: row;
align-items: flex-end;
}
.newsCard__wrapper--end .newsCard__link {
position: static;
}
.newsCard__img {
border-radius: 10px;
object-fit: contain;
width: 100%;
height: 220px;
}
.newsCard__date {
color: #999fae;
font-size: 12px;
font-weight: 400;
line-height: 14px;
}
.newsCard__name {
color: #384050;
font-size: 18px;
font-weight: 600;
line-height: 21px;
width: 80%;
}
.newsCard__description {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
color: #606773;
font-size: 14px;
font-weight: 400;
line-height: 21px;
width: 90%;
}
@media (max-width: 992px) {
.newsCard__description {
-webkit-line-clamp: 5;
}
}
.newsCard__link {
position: absolute;
bottom: 20px;
right: 20px;
font-size: 20px;
color: #999fae;
}
.pageNavigation {
display: flex;
align-items: center;
gap: 10px;
line-height: 1;
justify-content: center;
font-size: 16px;
font-weight: 400;
line-height: 19px;
text-align: left;
color: #606773;
}
@media (max-width: 576px) {
.pageNavigation {
gap: 8px;
}
}
.pageNavigation__prev,
.pageNavigation__next {
font-size: 20px;
transition: color 0.38s ease-in-out;
color: #448fff;
cursor: pointer;
}
@media (hover: hover) {
.pageNavigation__prev:hover,
.pageNavigation__next:hover {
color: #448fff;
}
}
.pageNavigation__prev {
transform: rotate(180deg);
}
:where(.pageNavigation a:not(.pageNavigation__prev, .pageNavigation__next)) {
width: 24px;
height: 24px;
transition: all 0.38s ease-in-out;
transition-property: color, border, background;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
}
@media (max-width: 576px) {
:where(.pageNavigation a:not(.pageNavigation__prev, .pageNavigation__next)) {
font-size: 14px;
height: 35px;
width: 35px;
}
}
:where(
.pageNavigation a:not(.pageNavigation__prev, .pageNavigation__next)
):hover {
border-color: #448fff;
}
.pageNavigation .active {
color: #448fff;
}
.catalog {
--container-width: 1306px;
display: grid;
grid-template-columns: [full-start left-start] minmax(15px, 1fr) [right-start center-start] minmax(
0,
var(--container-width)
) [left-end center-end] minmax(15px, 1fr) [full-end right-end];
grid-template-rows: [full-start left-start center-start right-start] auto [full-end left-end center-end right-end];
}
@media (max-width: 992px) {
.catalog {
--container-width: 920px;
}
}
@media (max-width: 768px) {
.catalog {
--container-width: 640px;
}
}
@media (max-width: 576px) {
.catalog {
--container-width: 100%;
}
}
.catalog__container {
grid-area: center;
display: flex;
flex-direction: column;
gap: clamp(1.875rem, 6.369vw + -2.193rem, 3.125rem);
}
.catalog__description {
display: flex;
flex-direction: column;
gap: clamp(0.625rem, 3.185vw + -1.409rem, 1.25rem);
color: #606773;
font-size: 18px;
line-height: 1.5;
}
.catalog__wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
@media (max-width: 992px) {
.catalog__wrapper {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.catalog__wrapper {
grid-template-columns: 1fr;
}
}
.newsBlock {
--container-width: 1306px;
display: grid;
grid-template-columns: [full-start left-start] minmax(15px, 1fr) [right-start center-start] minmax(
0,
var(--container-width)
) [left-end center-end] minmax(15px, 1fr) [full-end right-end];
grid-template-rows: [full-start left-start center-start right-start] auto [full-end left-end center-end right-end];
padding-bottom: clamp(5rem, 5.096vw + 1.745rem, 6rem);
}
@media (max-width: 992px) {
.newsBlock {
--container-width: 920px;
}
}
@media (max-width: 768px) {
.newsBlock {
--container-width: 640px;
}
}
@media (max-width: 576px) {
.newsBlock {
--container-width: 100%;
}
}
.newsBlock__container {
display: flex;
flex-direction: column;
gap: clamp(1.875rem, 5.732vw + -1.787rem, 3rem);
background-color: #ffffff;
grid-area: center;
}
@media (max-width: 576px) {
.newsBlock__container {
align-items: center;
}
}
.newsBlock__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
@media (max-width: 992px) {
.newsBlock__list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.newsBlock__list {
grid-template-columns: repeat(1, 1fr);
}
}
.content {
--container-width: 1306px;
display: grid;
grid-template-columns: [full-start left-start] minmax(15px, 1fr) [right-start center-start] minmax(
0,
var(--container-width)
) [left-end center-end] minmax(15px, 1fr) [full-end right-end];
grid-template-rows: [full-start left-start center-start right-start] auto [full-end left-end center-end right-end];
padding-bottom: clamp(5rem, 5.096vw + 1.745rem, 6rem);
}
@media (max-width: 992px) {
.content {
--container-width: 920px;
}
}
@media (max-width: 768px) {
.content {
--container-width: 640px;
}
}
@media (max-width: 576px) {
.content {
--container-width: 100%;
}
}
.content__container {
grid-area: center;
}
.content__container h1 {
margin-bottom: clamp(1.875rem, 6.369vw + -2.193rem, 3.125rem);
}
.content__container h2,
.content__container h3 {
color: #384050;
font-size: clamp(1.563rem, 2.229vw + 0.139rem, 2rem);
font-weight: 700;
line-height: 32px;
text-align: left;
margin-bottom: clamp(1.25rem, 1.592vw + 0.233rem, 1.563rem);
margin-top: clamp(1.875rem, 6.369vw + -2.193rem, 3.125rem);
}
.content__container p {
color: #606773;
font-size: clamp(1rem, 0.637vw + 0.593rem, 1.125rem);
font-weight: 400;
line-height: 27px;
text-align: left;
margin-bottom: clamp(1.25rem, 1.592vw + 0.233rem, 1.563rem);
}
.content__container p span,
.content__container p b {
color: #384050;
font-weight: 700;
}
.content__container ul {
color: #384050;
font-size: clamp(1rem, 0.637vw + 0.593rem, 1.125rem);
font-weight: 600;
line-height: 27px;
text-align: left;
list-style-type: disc;
list-style-position: inside;
}
.content__container:last-child {
margin-bottom: 0;
}
.content__image {
object-fit: cover;
border-radius: 30px;
height: 525px;
width: 100%;
margin-bottom: clamp(1.875rem, 6.369vw + -2.193rem, 3.125rem);
}
.content__date {
color: #999fae;
font-size: 18px;
font-weight: 400;
line-height: 27px;
text-align: left;
margin-bottom: clamp(1.875rem, 6.369vw + -2.193rem, 3.125rem);
}
.link {
font-size: 16px;
font-weight: 400;
line-height: 19px;
text-align: left;
color: #448fff;
display: flex;
flex-direction: row;
align-items: center;
gap: 15px;
}
.link span {
font-size: 20px;
}
@media (max-width: 768px) {
.link {
display: none;
}
}
.link--mobile {
display: none;
}
@media (max-width: 768px) {
.link--mobile {
display: flex;
justify-content: center;
}
}
.titleLink {
display: inline-flex;
justify-content: space-between;
}
@media (max-width: 768px) {
.titleLink {
justify-content: center;
}
}
.news {
--container-width: 1306px;
display: grid;
grid-template-columns: [full-start left-start] minmax(15px, 1fr) [right-start center-start] minmax(
0,
var(--container-width)
) [left-end center-end] minmax(15px, 1fr) [full-end right-end];
grid-template-rows: [full-start left-start center-start right-start] auto [full-end left-end center-end right-end];
padding-bottom: clamp(5rem, 5.096vw + 1.745rem, 6rem);
}
@media (max-width: 992px) {
.news {
--container-width: 920px;
}
}
@media (max-width: 768px) {
.news {
--container-width: 640px;
}
}
@media (max-width: 576px) {
.news {
--container-width: 100%;
}
}
.news__container {
display: flex;
flex-direction: column;
gap: clamp(1.875rem, 5.732vw + -1.787rem, 3rem);
background-color: #ffffff;
grid-area: center;
}
@media (max-width: 576px) {
.news__container {
align-items: center;
}
}
.news__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
@media (max-width: 992px) {
.news__list {
grid-template-columns: 1fr;
}
}
.searchResult {
--container-width: 1306px;
display: grid;
grid-template-columns: [full-start left-start] minmax(15px, 1fr) [right-start center-start] minmax(
0,
var(--container-width)
) [left-end center-end] minmax(15px, 1fr) [full-end right-end];
grid-template-rows: [full-start left-start center-start right-start] auto [full-end left-end center-end right-end];
}
@media (max-width: 992px) {
.searchResult {
--container-width: 920px;
}
}
@media (max-width: 768px) {
.searchResult {
--container-width: 640px;
}
}
@media (max-width: 576px) {
.searchResult {
--container-width: 100%;
}
}
.searchResult__container {
grid-area: center;
}
.searchResult__wrapper {
display: flex;
flex-direction: column;
gap: clamp(1.875rem, 6.369vw + -2.193rem, 3.125rem);
margin-bottom: clamp(1.875rem, 6.369vw + -2.193rem, 3.125rem);
}
.searchResult__text {
margin-bottom: 25px;
font-size: clamp(1rem, 0.637vw + 0.593rem, 1.125rem);
line-height: 1.5;
color: #999fae;
}
.searchResult__text span {
color: #384050;
}
.searchResult__link {
border-radius: 20px;
border: 1px solid #d8dfe4;
padding: 25px;
margin-bottom: 15px;
display: flex;
flex-direction: column;
gap: 16px;
}
.searchResult__link:last-child {
margin-bottom: clamp(1.875rem, 6.369vw + -2.193rem, 3.125rem);
}
@media (hover: hover) {
.searchResult__link:hover .searchResult__link-title {
color: #448fff;
}
}
.searchResult__link-title {
font-size: 20px;
font-weight: 700;
line-height: 22px;
color: #384050;
transition: color 0.38s ease-in-out;
}
.searchResult__link-text {
font-size: 14px;
line-height: 1.4;
color: #606773;
-webkit-line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.geography {
--container-width: 1306px;
display: grid;
grid-template-columns: [full-start left-start] minmax(15px, 1fr) [right-start center-start] minmax(
0,
var(--container-width)
) [left-end center-end] minmax(15px, 1fr) [full-end right-end];
grid-template-rows: [full-start left-start center-start right-start] auto [full-end left-end center-end right-end];
}
@media (max-width: 992px) {
.geography {
--container-width: 920px;
}
}
@media (max-width: 768px) {
.geography {
--container-width: 640px;
}
}
@media (max-width: 576px) {
.geography {
--container-width: 100%;
}
}
.geography__container {
grid-area: right;
}
.geography__wrapper {
margin-bottom: clamp(1.875rem, 6.369vw + -2.193rem, 3.125rem);
}
.geography__text {
width: 17%;
color: #606773;
font-size: clamp(1rem, 0.637vw + 0.593rem, 1.125rem);
line-height: clamp(1.5rem, 1.274vw + 0.686rem, 1.75rem);
}
.geography__content {
display: flex;
align-items: flex-start;
}
.geography__map {
width: clamp(43.75rem, 121.019vw + -33.551rem, 67.5rem);
position: relative;
height: clamp(31.25rem, 73.248vw + -15.537rem, 45.625rem);
}
.geography__map-svg {
position: absolute;
left: 0;
top: 0;
object-fit: contain;
width: 100%;
height: 100%;
z-index: 1;
}
.geography__map-line {
width: clamp(33.75rem, 84.713vw + -20.361rem, 50.375rem);
height: clamp(16.875rem, 34.076vw + -4.891rem, 23.563rem);
object-fit: contain;
top: clamp(6.25rem, 19.108vw + -5.955rem, 10rem);
right: clamp(2.5rem, 12.739vw + -5.637rem, 5rem);
position: absolute;
z-index: 1;
}
.geography__map-local {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 7px;
position: absolute;
min-width: 65px;
max-width: 65px;
z-index: 2;
transform: translateY(0px);
transition: 0.38s ease-in-out;
}
.geography__map-local:hover {
transform: translateY(-5px);
}
.geography__map-local:hover .geography__map-city {
opacity: 1;
}
.geography__map-local:hover .geography__map-wrapper {
width: clamp(1.25rem, 4.777vw + -1.801rem, 2.188rem);
height: clamp(1.25rem, 4.777vw + -1.801rem, 2.188rem);
}
.geography__map-local:hover .geography__map-circle {
width: clamp(0.625rem, 1.592vw + -0.392rem, 0.938rem);
height: clamp(0.625rem, 1.592vw + -0.392rem, 0.938rem);
}
.geography__map-local:first-of-type {
top: clamp(11.875rem, 27.07vw + -5.416rem, 17.188rem);
left: clamp(5.625rem, 22.293vw + -8.615rem, 10rem);
}
.geography__map-local:nth-of-type(2) {
top: clamp(14.063rem, 33.439vw + -7.297rem, 20.625rem);
left: clamp(8.438rem, 30.255vw + -10.888rem, 14.375rem);
}
.geography__map-local:nth-of-type(3) {
top: clamp(17.188rem, 44.586vw + -11.292rem, 25.938rem);
left: clamp(9.063rem, 31.847vw + -11.28rem, 15.313rem);
}
.geography__map-local:nth-of-type(4) {
top: clamp(22.188rem, 54.14vw + -12.395rem, 32.813rem);
left: clamp(8.625rem, 30.892vw + -11.107rem, 14.688rem);
}
.geography__map-local:nth-of-type(5) {
top: clamp(16.875rem, 41.401vw + -9.57rem, 25rem);
left: clamp(10.625rem, 36.624vw + -12.769rem, 17.813rem);
}
.geography__map-local:nth-of-type(6) {
top: clamp(16.563rem, 39.809vw + -8.865rem, 24.375rem);
left: clamp(13.75rem, 44.586vw + -14.729rem, 22.5rem);
}
.geography__map-local:nth-of-type(7) {
top: clamp(15.625rem, 38.217vw + -8.786rem, 23.125rem);
left: clamp(20rem, 60.51vw + -18.65rem, 31.875rem);
}
.geography__map-local:nth-of-type(8) {
top: clamp(10.938rem, 27.07vw + -6.354rem, 16.25rem);
left: clamp(23.125rem, 66.879vw + -19.594rem, 36.25rem);
}
.geography__map-local:nth-of-type(9) {
top: clamp(6.25rem, 15.924vw + -3.921rem, 9.375rem);
left: clamp(39.063rem, 106.688vw + -29.084rem, 60rem);
}
.geography__map-local:nth-of-type(10) {
top: clamp(15rem, 38.217vw + -9.411rem, 22.5rem);
left: clamp(28.75rem, 84.395vw + -25.157rem, 45.313rem);
}
.geography__map-local:nth-of-type(11) {
top: clamp(13.438rem, 33.439vw + -7.922rem, 20rem);
left: clamp(13.438rem, 42.994vw + -14.025rem, 21.875rem);
}
.geography__map-local:nth-of-type(12) {
top: clamp(6.875rem, 15.924vw + -3.296rem, 10rem);
left: clamp(17.5rem, 54.14vw + -17.082rem, 28.125rem);
}
.geography__map-wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: clamp(0.938rem, 1.592vw + -0.08rem, 1.25rem);
height: clamp(0.938rem, 1.592vw + -0.08rem, 1.25rem);
transition: 0.38s ease-in-out;
}
.geography__map-circle {
width: clamp(0.313rem, 0.955vw + -0.298rem, 0.5rem);
height: clamp(0.313rem, 0.955vw + -0.298rem, 0.5rem);
background-color: #448fff;
border-radius: 50%;
z-index: 2;
transition: 0.38s ease-in-out;
}
.geography__map-blur {
position: absolute;
width: 100%;
height: 100%;
background: rgba(22, 143, 233, 0.2509803922);
border-radius: 50%;
z-index: 1;
border: 2px solid #448fff;
}
.geography__map-city {
padding: 5px 10px 5px 10px;
border-radius: 5px;
background-color: #ffffff;
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1019607843);
z-index: 3;
text-align: center;
color: #606773;
font-size: 12px;
line-height: 20px;
opacity: 0;
transition: opacity 0.38s ease-in-out;
}
@media (max-width: 992px) {
.geography__content {
flex-direction: column;
gap: 40px;
}
.geography__text {
width: 100%;
}
}
@media (max-width: 768px) {
.geography__container {
grid-area: center;
overflow: hidden;
}
.geography__map {
width: 598px;
height: 330px;
}
.geography__map-line {
width: 350px;
height: 300px;
top: 10px;
left: 140px;
}
.geography__map-local:first-of-type {
left: 105px;
top: 125px;
}
.geography__map-local:nth-of-type(2) {
left: 135px;
top: 150px;
}
.geography__map-local:nth-of-type(3) {
left: 145px;
top: 190px;
}
.geography__map-local:nth-of-type(4) {
left: 140px;
top: 235px;
}
.geography__map-local:nth-of-type(5) {
left: 160px;
top: 180px;
}
.geography__map-local:nth-of-type(6) {
left: 190px;
top: 175px;
}
.geography__map-local:nth-of-type(7) {
left: 260px;
top: 165px;
}
.geography__map-local:nth-of-type(8) {
left: 290px;
top: 120px;
}
.geography__map-local:nth-of-type(9) {
left: 460px;
top: 70px;
}
.geography__map-local:nth-of-type(10) {
left: 350px;
top: 160px;
}
.geography__map-local:nth-of-type(11) {
left: 190px;
top: 145px;
}
.geography__map-local:nth-of-type(12) {
left: 233px;
top: 75px;
}
}
@media (max-width: 576px) {
.geography__container {
grid-area: full;
}
.geography__wrapper,
.geography__text {
padding-left: 16px;
padding-right: 16px;
}
.geography__content {
gap: 20px;
}
.geography__map {
width: 800px;
height: 539px;
margin-left: -100px;
}
.geography__map-blur {
border: 1px solid #448fff;
}
.geography__map-line {
width: 600px;
height: 250px;
top: 125px;
left: 100px;
}
.geography__map-local:first-of-type {
left: 100px;
top: 200px;
}
.geography__map-local:nth-of-type(2) {
left: 145px;
top: 240px;
}
.geography__map-local:nth-of-type(3) {
left: 160px;
top: 295px;
}
.geography__map-local:nth-of-type(4) {
left: 150px;
top: 365px;
}
.geography__map-local:nth-of-type(5) {
left: 185px;
top: 285px;
}
.geography__map-local:nth-of-type(6) {
left: 230px;
top: 280px;
}
.geography__map-local:nth-of-type(7) {
left: 330px;
top: 265px;
}
.geography__map-local:nth-of-type(8) {
left: 380px;
top: 190px;
}
.geography__map-local:nth-of-type(9) {
display: none;
}
.geography__map-local:nth-of-type(10) {
display: none;
}
.geography__map-local:nth-of-type(11) {
left: 225px;
top: 235px;
}
.geography__map-local:nth-of-type(12) {
left: 295px;
top: 120px;
}
}
.products {
--container-width: 1306px;
display: grid;
grid-template-columns: [full-start left-start] minmax(15px, 1fr) [right-start center-start] minmax(
0,
var(--container-width)
) [left-end center-end] minmax(15px, 1fr) [full-end right-end];
grid-template-rows: [full-start left-start center-start right-start] auto [full-end left-end center-end right-end];
}
@media (max-width: 992px) {
.products {
--container-width: 920px;
}
}
@media (max-width: 768px) {
.products {
--container-width: 640px;
}
}
@media (max-width: 576px) {
.products {
--container-width: 100%;
}
}
.products__container {
grid-area: center;
display: flex;
flex-direction: column;
gap: clamp(1.563rem, 4.777vw + -1.489rem, 2.5rem);
}
.products__wrapper {
display: flex;
gap: clamp(0.938rem, 6.369vw + -3.131rem, 2.188rem);
}
@media (max-width: 768px) {
.products__wrapper {
flex-direction: column;
align-items: center;
}
}
.products__box {
position: relative;
}
.products__box:last-child .products__circle:first-of-type {
top: clamp(8.75rem, 15.924vw + -1.421rem, 11.875rem);
left: 85px;
}
.products__box:last-child
.products__circle:first-of-type
.products__circle-text {
max-width: clamp(9.375rem, 47.771vw + -21.139rem, 18.75rem);
min-width: clamp(9.375rem, 47.771vw + -21.139rem, 18.75rem);
}
@media (max-width: 768px) {
.products__box:last-child .products__circle:first-of-type {
left: 120px;
top: 160px;
}
}
@media (max-width: 576px) {
.products__box:last-child .products__circle:first-of-type {
left: 60px;
top: 120px;
}
}
.products__box:last-child .products__circle:nth-of-type(2) {
left: clamp(17.188rem, 28.662vw + -1.121rem, 22.813rem);
top: clamp(12.813rem, 20.701vw + -0.41rem, 16.875rem);
}
.products__box:last-child
.products__circle:nth-of-type(2)
.products__circle-text {
max-width: clamp(8.125rem, 40.446vw + -17.71rem, 16.063rem);
min-width: clamp(8.125rem, 40.446vw + -17.71rem, 16.063rem);
}
@media (max-width: 768px) {
.products__box:last-child .products__circle:nth-of-type(2) {
left: 320px;
}
}
@media (max-width: 576px) {
.products__box:last-child .products__circle:nth-of-type(2) {
top: 160px;
left: 220px;
z-index: 3;
}
}
.products__box:last-child .products__circle:nth-of-type(3) {
z-index: 2;
left: clamp(22.5rem, 44.586vw + -5.979rem, 31.25rem);
top: clamp(7.5rem, 12.739vw + -0.637rem, 10rem);
}
.products__box:last-child
.products__circle:nth-of-type(3)
.products__circle-text {
max-width: clamp(9.375rem, 47.771vw + -21.139rem, 18.75rem);
min-width: clamp(9.375rem, 47.771vw + -21.139rem, 18.75rem);
}
@media (max-width: 992px) {
.products__box:last-child .products__circle:nth-of-type(3) {
left: 310px;
}
}
@media (max-width: 768px) {
.products__box:last-child .products__circle:nth-of-type(3) {
left: 430px;
}
}
@media (max-width: 576px) {
.products__box:last-child .products__circle:nth-of-type(3) {
left: 270px;
top: 100px;
}
}
.products__box:last-child .products__circle:last-of-type {
top: clamp(4.375rem, 4.777vw + 1.324rem, 5.313rem);
left: clamp(24.375rem, 44.586vw + -4.104rem, 33.125rem);
}
.products__box:last-child
.products__circle:last-of-type
.products__circle-text {
max-width: clamp(6.25rem, 50vw + -25.688rem, 16.063rem);
min-width: clamp(6.25rem, 50vw + -25.688rem, 16.063rem);
}
@media (max-width: 992px) {
.products__box:last-child .products__circle:last-of-type {
left: 320px;
}
}
@media (max-width: 768px) {
.products__box:last-child .products__circle:last-of-type {
left: 450px;
}
}
@media (max-width: 576px) {
.products__box:last-child .products__circle:last-of-type {
left: 280px;
top: 65px;
}
}
.products__img {
width: clamp(32.5rem, 36.624vw + 9.106rem, 39.688rem);
height: clamp(16.25rem, 27.07vw + -1.041rem, 21.563rem);
object-fit: contain;
}
@media (max-width: 576px) {
.products__img {
width: 335px;
height: 200px;
}
}
.products__circle {
cursor: pointer;
z-index: 1;
position: absolute;
margin-top: -5px;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.products__circle:hover span,
.products__circle:focus span {
transform: rotate(45deg);
}
.products__circle:hover span:last-child,
.products__circle:focus span:last-child {
transform: rotate(135deg);
}
.products__circle:hover .products__circle-text,
.products__circle:focus .products__circle-text {
opacity: 1;
visibility: visible;
}
@media (max-width: 992px) {
.products__circle {
width: 20px;
height: 20px;
padding: 20px;
}
}
.products__circle:first-of-type {
top: clamp(1.875rem, 6.369vw + -2.193rem, 3.125rem);
left: 35px;
}
.products__circle:first-of-type .products__circle-text {
max-width: clamp(6.25rem, 50vw + -25.688rem, 16.063rem);
min-width: clamp(6.25rem, 50vw + -25.688rem, 16.063rem);
}
@media (max-width: 768px) {
.products__circle:first-of-type {
top: 50px;
left: 85px;
}
}
@media (max-width: 576px) {
.products__circle:first-of-type {
left: 40px;
}
}
.products__circle:nth-of-type(2) {
z-index: 2;
left: clamp(3.125rem, 9.554vw + -2.978rem, 5rem);
top: clamp(6.25rem, 15.924vw + -3.921rem, 9.375rem);
}
@media (max-width: 768px) {
.products__circle:nth-of-type(2) {
top: 120px;
left: 80px;
}
}
@media (max-width: 576px) {
.products__circle:nth-of-type(2) {
top: 95px;
left: 45px;
}
}
.products__circle:nth-of-type(3) {
left: clamp(11.875rem, 25.478vw + -4.399rem, 16.875rem);
top: clamp(6.25rem, 9.554vw + 0.147rem, 8.125rem);
}
@media (max-width: 768px) {
.products__circle:nth-of-type(3) {
left: 230px;
top: 110px;
}
}
@media (max-width: 576px) {
.products__circle:nth-of-type(3) {
top: 80px;
left: 140px;
}
}
.products__circle:last-of-type {
top: clamp(6.25rem, 6.369vw + 2.182rem, 7.5rem);
left: clamp(21.25rem, 44.586vw + -7.229rem, 30rem);
}
.products__circle:last-of-type .products__circle-text {
max-width: clamp(9.375rem, 47.771vw + -21.139rem, 18.75rem);
min-width: clamp(9.375rem, 47.771vw + -21.139rem, 18.75rem);
}
@media (max-width: 768px) {
.products__circle:last-of-type {
left: 380px;
}
}
@media (max-width: 576px) {
.products__circle:last-of-type {
left: 260px;
top: 80px;
}
}
.products__circle span {
transition: transform 0.38s ease-in-out;
width: 15px;
height: 3px;
background-color: #ffffff;
border-radius: 4px;
position: absolute;
}
.products__circle span:last-child {
transform: rotate(90deg);
}
@media (max-width: 992px) {
.products__circle span {
width: 10px;
height: 2px;
}
}
.products__circle::after {
content: "";
z-index: -1;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #448fff;
}
@media (max-width: 992px) {
.products__circle::after {
position: absolute;
width: 20px;
height: 20px;
}
}
.products__circle-text {
visibility: hidden;
z-index: -1;
max-width: clamp(9.375rem, 34.076vw + -12.391rem, 16.063rem);
min-width: clamp(9.375rem, 34.076vw + -12.391rem, 16.063rem);
top: -55px;
position: absolute;
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1490196078);
background-color: #ffffff;
padding: clamp(0.625rem, 0.637vw + 0.218rem, 0.75rem)
clamp(0.625rem, 4.459vw + -2.223rem, 1.5rem);
border-radius: 5px;
font-size: clamp(0.75rem, 1.274vw + -0.064rem, 1rem);
font-weight: 600;
line-height: clamp(0.875rem, 1.592vw + -0.142rem, 1.188rem);
text-align: center;
color: #384050;
opacity: 0;
transition: opacity 0.38s ease-in-out;
}
@media (max-width: 992px) {
.products__circle-text {
top: -45px;
opacity: 1;
}
}
.cookie-banner {
display: none;
background: #ffffff;
box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.2509803922);
border-radius: 8px;
position: fixed;
z-index: 200;
bottom: 30px;
right: 40px;
width: 100%;
max-width: 410px;
padding-top: 5px;
padding-bottom: 4px;
}
.cookie-banner__container {
display: grid;
gap: 30px;
padding-inline: 30px;
padding-bottom: 30px;
}
.cookie-banner__container--text {
display: grid;
gap: 10px;
}
.cookie-banner__title {
font-weight: 700;
font-size: 24px;
line-height: 85%;
}
.cookie-banner__text {
font-weight: 500;
font-size: 14px;
line-height: 1.5;
color: #999fae;
text-wrap: pretty;
}
.cookie-banner__text a {
text-decoration: underline;
text-decoration-style: solid;
color: #606773;
}
.cookie-banner__buttons {
width: 100%;
display: grid;
cursor: pointer;
}
.cookie-banner__button {
width: 100%;
text-align: center;
}
.cookie-banner__close {
width: 100%;
height: 16px;
padding-top: 15px;
padding-right: 16px;
padding-bottom: 14px;
display: flex;
justify-content: flex-end;
}
.cookie-banner__close-cross {
border: unset;
background: unset;
width: 16px;
height: 100%;
}
@media (max-width: 768px) {
.cookie-banner {
right: 10px;
left: 10px;
bottom: 10px;
width: auto;
max-width: unset;
}
}