html {
font-size: calc(100vw / 1440 * 10);
}
body {
font-family: 'Inter';
font-weight: 400;
transition: all .2s linear !important;
min-height: 100vh;
font-size: 1.6rem;
color: #070707;
background: #FFF;
}
a, h1, h2, h3, h4, h5, p, span, button, ul, li {
padding: 0;
margin: 0;
background: transparent;
text-decoration: none;
border: none;
transition: all .2s linear;
}
input, textarea, select {
padding: 0;
margin: 0;
background: transparent;
border: none;
outline: none;
transition: all .2s linear;
}
.container {
max-width: 120rem;
width: 100%;
padding-left: 0;
padding-right: 0;
}
div {
transition: all .2s linear;
}
path, rect, circle {
transition: all .2s linear;
}
/* header */
header {
display: flex;
flex-direction: column;
border-bottom: 0.1rem solid #DAE1EB;
position: relative;
z-index: 3;
background: #FFF;
}
.header-top {
border-bottom: 0.1rem solid rgba(218, 225, 235, 0.21);
background: #061C3D;
padding: 1rem 0;
}
.header-top__container {
display: flex;
justify-content: space-between;
align-items: center;
}
.header-top__description {
color: #808080;
font-size: 1.4rem;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.header-social {
display: flex;
align-items: center;
gap: 1.5rem;
}
.header-social a {
display: flex;
}
.header-social a svg {
width: 2.4rem;
height: auto;
}
.header-social a svg:hover path{
fill:#0093D3;
}
.header-second {
background: #061C3D;
padding: 2.85rem 0;
}
.header-second__container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
}
.logo img {
width: 22rem;
}
.header-second__row {
padding: 0 7.35rem;
display: flex;
gap: 5rem;
border-left: 0.1rem solid rgba(218, 225, 235, 0.21);
border-right: 0.1rem solid rgba(218, 225, 235, 0.21);
}
.header-second__block {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.8rem;
}
.header-second__block-name {
display: flex;
align-items: center;
gap: 1rem;
}
.header-second__block-name p {
color: #808080;
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.048rem;
}
.header-second__block-name::before {
content: '';
width: 0.8rem;
height: 0.8rem;
background: #15B507;
border-radius: 100%;
display: flex;
}
.header-second__block > p, .header-second__block > a {
color: #FFF;
font-size: 2rem;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 0.06rem;
}
.header-second__links {
display: flex;
gap: 1.2rem;
}
.header-second__link {
display: flex;
padding: 1.6rem;
border: 0.1rem solid rgba(212, 212, 212, 0.37);
color: #FFF;
text-align: center;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.048rem;
position: relative;
}
.header-second__link svg {
width: 2.4rem;
height: auto;
}
.header-second__link .header-cart-count {
position: absolute;
color: #FFF;
text-align: center;
font-size: 0.8rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.024rem;
width: 1.2rem;
height: 1.2rem;
background: #0093D3;
border: 0.1rem solid #061C3D;
border-radius: 100%;
right: 1rem;
top: 1.25rem;
}
.header-bottom {
border-top: 0.1rem solid #DAE1EB;
padding: 2.55rem 0;
}
.header-bottom__container nav ul {
display: flex;
justify-content: space-between;
align-items: center;
}
.header-bottom__container nav ul li {
display: flex;
list-style: none;
}
.header-bottom__container nav ul li a {
color: #070707;
font-size: 1.6rem;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: 0.048rem;
}
.header-second__container > .header-second__link {
display: none;
}
.burger-open {
display: none;
}
.menu-mobile {
display: none;
}
@media screen and (max-width: 992px) {
html {
font-size: calc(100vw / 375 * 10);
}
.container {
max-width: 34.3rem;
}
.header-top {
display: none;
}
.header-bottom {
display: none;
}
.header-second__row {
display: none;
}
.header-second__link:first-child {
display: none;
}
.header-second {
padding: 1.6rem 0;
}
.logo img {
width: 15.7rem;
}
.header-second__container > .header-second__link {
display: block;
width: 100%;
text-align: center;
}
.header-second__container {
gap: 1.6rem;
flex-wrap: wrap;
}
.burger-open {
display: flex;
flex-direction: column;
gap: 0.5rem;
width: 2.25rem;
z-index: 99999;
}
.burger-open .bar {
width: 100%;
height: 0.2rem;
border-radius: 1rem;
background: #FFF;
}
.change .bar:nth-child(1) {
transform: rotate(-45deg) translate(-0.6rem, 0.5rem);
}
.change .bar:nth-child(2) {
opacity: 0;
}
.change .bar:nth-child(3) {
transform: rotate(45deg) translate(-0.5rem, -0.3rem);
}
.header-second__links .header-second__link {
background: transparent;
border: none;
padding: 0;
}
.header-second__links {
align-items: center;
gap: 2.4rem;
}
.header-second__link .header-cart-count {
right: -0.42rem;
top: -0.42rem;
}
header {
border-color: rgba(218, 225, 235, 0.21);
}
.menu-mobile.active {
display: flex;
flex-direction: column;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow-y: auto;
z-index: 9999;
background: #FFF;
padding-bottom: 2rem;
}
body.hidden {
overflow: hidden;
}
.burger-open.change .bar {
background: #070707;
}
.burger-open.change {
position: absolute;
top: 1.5rem;
}
.menu-mobile__name {
padding: 1.5rem 1.6rem;
}
.menu-mobile__title {
color: #070707;
font-size: 2rem;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.menu-mobile__menu {
padding: 1.6rem 0;
border-top: 0.1rem solid #DAE1EB;
border-bottom: 0.1rem solid #DAE1EB;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.menu-mobile__menu ul {
display: flex;
flex-direction: column;
gap: 2rem;
align-items: center;
}
.menu-mobile__menu ul li {
display: flex;
list-style: none;
}
.menu-mobile__menu ul li a {
color: #070707;
text-align: center;
font-size: 1.6rem;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: 0.048rem;
}
.menu-mobile .header-second__row {
display: flex;
gap: 2.4rem;
padding: 0;
flex-direction: column;
align-items: center;
}
.menu-mobile__info {
padding-top: 1.6rem;
display: flex;
gap: 2.4rem;
flex-direction: column;
align-items: center;
margin-top: auto;
}
.header-second__block {
align-items: center;
}
.header-second__block > p, .header-second__block > a {
color: #070707;
}
.header-second__block-name p {
color: #494949;
}
}
/* footer */
footer {
padding: 10rem 0 3.2rem 0;
background: #061C3D;
}
.footer-container {
display: flex;
flex-direction: column;
gap: 4rem;
}
.footer_text {
color: rgba(255, 255, 255, 0.62);
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: normal;
text-align: center;
margin-bottom: -3rem;
}
.footer-main {
display: flex;
align-items: flex-start;
gap: 2.4rem;
}
.footer-description {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2.4rem;
width: 100%;
max-width: 37.1rem;
}
.footer-description p {
color: #B4BBC5;
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: 2.4rem;
max-width: 28.6rem;
}
.footer-description div a{
color: #fff;
font-size: 1.2rem;
font-style: normal;
font-weight: 400;
}
.footer-logo {
display: flex;
}
.footer-logo img {
width: 22rem;
}
.footer-menu {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2.4rem;
min-width: 20rem;
}
.footer-menu__title {
color: #FFF;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: 100%;
letter-spacing: 0.016rem;
text-transform: uppercase;
}
.footer-menu ul {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.footer-menu ul li {
display: flex;
list-style: none;
}
.footer-menu ul li a {
color: #838E9E;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: 2.4rem;
display: flex;
padding: 0.6rem 0 0.6rem 0;
align-items: center;
gap: 0.8rem;
}
.footer-menu ul li a::before {
content: '';
width: 1.6rem;
display: flex;
height: 0.1rem;
background: #FFF;
display: none;
}
.footer-menu ul li a.active::before {
display: flex;
}
.footer-menu ul li a.active {
color: #FFF;
}
.footer-social {
display: flex;
flex-direction: column;
gap: 1.2rem;
margin-left: auto;
}
.footer-social a {
border-radius: 0.5rem;
background: rgba(255, 255, 255, 0.08);
color: #FFF;
font-size: 1.4rem;
font-style: normal;
font-weight: 500;
line-height: 2rem;
display: flex;
align-items: center;
gap: 1rem;
padding: 1.2rem;
}
.footer-social a::before {
content: '';
width: 0.1rem;
height: 2rem;
opacity: 0.15;
background: #FFF;
display: flex;
order: 2;
}
.footer-social a svg {
width: 2rem;
height: auto;
}
.footer-social a p {
order: 3;
}
.footer-copyright {
padding-top: 3.2rem;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 0.1rem solid #243752;
}
.footer-copyright p {
color: rgba(255, 255, 255, 0.62);
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: 2.4rem;
}
.footer-links {
display: flex;
align-items: center;
gap: 2rem;
}
.footer-links a {
color: rgba(255, 255, 255, 0.62);
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: normal;
}
@media screen and (max-width: 992px) {
footer {
padding: 3rem 0;
}
.footer-container {
gap: 3rem;
}
.footer-main {
flex-direction: column;
align-items: center;
}
.footer-description {
align-items: center;
max-width: none;
}
.footer-description p {
text-align: center;
}
.footer-menu {
align-items: center;
min-width: auto;
}
.footer-menu__title {
text-align: center;
}
.footer-menu ul {
align-items: center;
}
.footer-social {
margin-left: 0;
}
.footer-copyright {
justify-content: center;
flex-direction: column;
gap: 2rem;
}
.footer-copyright p {
color: #FFF;
}
.footer-links {
flex-direction: column;
gap: 1rem;
}
.footer-menu ul li a {
text-align: center;
max-width: 26.6rem;
justify-content: center;
}
}
/* banner */
.banner {
position: relative;
height: 62.6rem;
display: flex;
margin-bottom: 10.4rem;
}
.banner-swiper {
position: absolute;
left: 0;
top: 0;
z-index: -1;
width: 100%;
height: 100%;
}
.banner-swiper .swiper-slide {
height: auto;
}
.banner-swiper .swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.banner-img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
.banner-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.banner-subtitle {
color: #FFF;
font-size: 2.4rem;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: 0.072rem;
margin-bottom: 0.4rem;
max-width: 50.2rem;
}
.banner-title {
color: #FFF;
font-size: 4.8rem;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: 0.144rem;
margin-bottom: 1.2rem;
max-width: 50.2rem;
}
.banner-title span {
color: #46C7FF;
}
.banner-description {
color: #FFF;
font-size: 2rem;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.06rem;
margin-bottom: 3.6rem;
max-width: 50.2rem;
}
.banner-link {
color: #FFF;
text-align: center;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.048rem;
padding: 1.6rem;
background: #0093D3;
}
@media screen and (max-width: 992px) {
.banner {
height: auto;
padding: 6.9rem 0 12rem 0;
margin-bottom: 6.4rem;
}
.banner::before {
content: '';
background: linear-gradient(2deg, rgba(6, 28, 61, 0.00) -35.2%, #061C3D 86.13%);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.banner-container {
align-items: center;
max-width: 32.5rem;
position: relative;
z-index: 2;
}
.banner-subtitle {
font-size: 1.4rem;
text-align: center;
letter-spacing: normal;
}
.banner-title {
font-size: 3.6rem;
letter-spacing: 0.108rem;
text-align: center;
}
.banner-description {
font-size: 1.6rem;
letter-spacing: 0.048rem;
text-align: center;
}
}
/* solutions */
.solutions {
margin-bottom: 20rem;
}
.solutions-container {
display: flex;
flex-direction: column;
gap: 5.6rem;
}
.name {
display: flex;
align-items: center;
justify-content: space-between;
}
.title {
color: #070707;
font-size: 4rem;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 0.12rem;
padding-left: 4rem;
border-left: 1rem solid #0093D3;
}
.solutions .title {
max-width: 53.3rem;
}
.slider-buttons {
display: flex;
gap: 1rem;
}
.slider-prev, .slider-next {
display: flex;
width: 7rem;
height: 7rem;
justify-content: center;
align-items: center;
border: 1px solid #808080;
background: #FFF;
}
.slider-prev svg, .slider-next svg {
width: 1rem;
height: auto;
}
.solutions-slider {
width: 100%;
}
.solutions-slider .swiper {
width: 100%;
}
.solutions-slider .swiper-slide {
height: auto;
}
.product {
display: flex;
padding: 3rem;
flex-direction: column;
align-items: flex-start;
gap: 2rem;
background: #F7F7F7;
height: auto;
}
.product-img {
height: 29.1rem;
min-height: 29.1rem;
width: 100%;
}
.product-img img {
width: 100%;
height: 100%;
object-fit: contain;
}
.product-content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.8rem;
width: 100%;
height: 100%;
}
.product-title {
color: #070707;
font-size: 2rem;
font-style: normal;
font-weight: 600;
line-height: 150%;
}
.product-row {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin-top: auto;
}
.product-price {
color: #0093D3;
font-size: 2.4rem;
font-style: normal;
font-weight: 600;
line-height: 150%;
}
.product-add {
color: #0093D3;
text-align: center;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.048rem;
padding: 1.6rem;
border: 1px solid #D4D4D4;
background: #FFF;
}
.product-add.yes {
display: flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
color: #15B507;
}
.product-add.yes img {
width: 1.6rem;
}
@media screen and (max-width: 992px) {
.solutions {
margin-bottom: 7.3rem;
}
.solutions-container {
gap: 1rem;
}
.title {
font-size: 2.4rem;
letter-spacing: 0.072rem;
padding-left: 0;
border-left: none;
text-align: center;
display: flex;
flex-direction: column;
gap: 1.6rem;
align-items: center;
}
.title::before {
content: '';
width: 9.6rem;
height: 1rem;
background: #0093D3;
display: flex;
}
.slider-buttons {
display: none;
}
.product-img {
height: 18rem;
min-height: 18rem;
margin: 0 auto;
}
.product-title {
font-size: 1.6rem;
text-align: center;
}
.product-row {
flex-direction: column;
gap: 1rem;
}
.product-price {
font-size: 2rem;
}
.product-add {
width: 100%;
}
.solutions-slider .swiper-wrapper {
padding: 0 1.6rem;
}
}
/* selection */
.selection {
margin-bottom: 19.6rem;
}
.selection-container {
display: flex;
flex-direction: column;
gap: 7rem;
}
.selection-name {
display: flex;
align-items: flex-end;
}
.selection-column {
max-width: 90.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.selection-description {
padding-left: 5rem;
color: #4B5557;
font-size: 2rem;
font-style: normal;
font-weight: 400;
line-height: 150%;
letter-spacing: 0.06rem;
}
.selection-button {
background: #0093D3;
padding: 1.6rem;
color: #FFF;
text-align: center;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.048rem;
}
.selection-slider {
display: flex;
flex-direction: column;
position: relative;
}
.selection-swiper {
width: 100%;
}
.selection-slider .swiper-slide {
height: auto;
}
.selection-slide {
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 8.4rem;
}
.selection-slide__img {
width: 120rem;
height: 58.2rem;
object-fit: cover;
}
.selection-slide__block {
position: absolute;
left: 0;
bottom: 0;
z-index: 2;
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
max-width: 60.3rem;
background: #061C3D;
padding: 8rem 12rem;
overflow: hidden;
}
.selection-slide__block::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
background-image: url('../images/selection-slide.png');
width: 43.7rem;
height: 49.5rem;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.selection-slide__title {
color: #FFF;
font-size: 2.4rem;
font-style: normal;
font-weight: 600;
line-height: normal;
position: relative;
z-index: 2;
}
.selection-slide__description {
color: #FFF;
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: 150%;
position: relative;
z-index: 2;
}
.selection-navigation {
display: flex;
align-items: center;
position: relative;
margin-top: -7rem;
z-index: 3;
}
.selection-pagination {
width: auto !important;
position: absolute;
left: 0 !important;
right: 0;
margin: 0 auto;
justify-content: center;
align-items: center;
display: flex;
gap: 1rem;
bottom: auto !important;
}
.selection-pagination .swiper-pagination-bullet {
width: 1rem;
height: 1rem;
background: #BFC5CE;
opacity: 1;
border-radius: 0;
margin: 0 !important;
}
.selection-pagination .swiper-pagination-bullet-active {
width: 9.6rem;
background: #0093D3;
}
.selection-navigation .slider-buttons {
position: relative;
z-index: 4;
margin-left: auto;
}
@media screen and (max-width: 992px) {
.selection {
margin-bottom: 6.3rem;
}
.selection-container {
gap: 1.6rem;
}
.selection-name {
flex-direction: column;
align-items: center;
gap: 1.6rem;
}
.selection-column {
gap: 1.6rem;
}
.selection-description {
padding-left: 0;
font-size: 1.6rem;
letter-spacing: normal;
text-align: center;
}
.selection-slider {
gap: 1.6rem;
padding: 0 1.6rem;
}
.selection-slide {
flex-direction: column;
gap: 1.6rem;
padding-bottom: 0;
}
.selection-slide__img {
width: 100%;
height: 31.4rem;
}
.selection-slide__block {
position: relative;
max-width: none;
padding: 2.4rem;
}
.selection-slide__block::before {
background-image: url('../images/slide__block.png');
width: 100%;
height: 34.7rem;
}
.selection-slide__title {
font-size: 2rem;
text-align: center;
}
.selection-slide__description {
font-size: 1.4rem;
text-align: center;
}
.selection-navigation {
margin-top: 0;
}
.selection-pagination .swiper-pagination-bullet {
height: 0.2rem;
}
.selection-navigation .slider-buttons {
display: flex;
width: 100%;
justify-content: space-between;
position: initial;
}
.selection-pagination {
z-index: 5;
}
.slider-prev, .slider-next {
width: 4rem;
height: 4rem;
}
}
/* advantages */
.advantages {
margin-bottom: 19.6rem;
position: relative;
}
.advantages-container {
display: flex;
flex-direction: column;
gap: 7rem;
padding-top: 5.4rem;
}
.advantages-name {
display: flex;
flex-direction: column;
gap: 1rem;
max-width: 58.5rem;
}
.advantages-description {
padding-left: 5rem;
color: #4B5557;
font-size: 2rem;
font-style: normal;
font-weight: 400;
line-height: 150%;
letter-spacing: 0.06rem;
}
.advantages-main {
display: flex;
flex-wrap: wrap;
max-width: 120rem;
}
.advantages-item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
padding: 3rem;
background: #FFF;
width: 29.7rem;
height: 29.7rem;
}
.advantages-item__img {
width: 8rem;
margin-bottom: auto;
}
.advantages-item__title {
color: #070707;
font-size: 2rem;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.advantages-item__description {
color: #4B5557;
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: 150%;
}
.advantages-img {
width: 70.5rem;
height: 78.8rem;
position: absolute;
top: 0;
right: 0;
z-index: -1;
}
.advantages-item:last-child {
background: #061C3D;
}
.advantages-item:last-child .advantages-item__title {
color: #FFF;
}
.advantages-item:last-child .advantages-item__description {
color: #BAC5C8;
}
.advantages-item:nth-child(4), .advantages-item:nth-child(5), .advantages-item:nth-child(6) {
padding: 5rem;
width: 39.54rem;
height: 34.9rem;
}
@media screen and (max-width: 992px) {
.advantages {
margin-bottom: 7.6rem;
}
.advantages-container {
gap: 1.6rem;
padding-top: 0;
}
.advantages-name {
gap: 1.6rem;
max-width: none;
}
.advantages-description {
padding-left: 0;
font-size: 1.6rem;
letter-spacing: normal;
text-align: center;
}
.advantages-main {
flex-direction: column;
gap: 1.6rem;
}
.advantages-item {
align-items: center;
padding: 5rem;
width: 100%;
height: auto;
border: 1px solid #DBDDE8;
}
.advantages-item__img {
margin-bottom: 1.4rem;
}
.advantages-item__title {
text-align: center;
}
.advantages-item__description {
text-align: center;
}
.advantages-img {
display: none;
}
.advantages-item:nth-child(4), .advantages-item:nth-child(5), .advantages-item:nth-child(6) {
width: 100%;
height: auto;
}
}
/* questions */
.questions {
margin-bottom: 17.5rem;
}
.questions-container {
position: relative;
display: flex;
gap: 9.3rem;
align-items: center;
padding: 6.6rem 0 5.9rem 0;
}
.questions-container::before {
content: '';
position: absolute;
width: 53.3rem;
height: 0.2rem;
background: #0093D3;
top: 0;
right: 10.9rem;
}
.questions-container::after {
content: '';
position: absolute;
width: 35.4rem;
height: 0.2rem;
background: #0093D3;
bottom: 0;
right: 7.2rem;
}
.questions-name {
background: #061C3D;
box-shadow: 0 5rem 10rem 0 rgba(1, 17, 34, 0.29);
padding: 5.1rem 8.2rem 7rem 17.4rem;
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
max-width: 65.6rem;
margin-left: -2.7rem;
}
.questions-name::before {
content: '';
position: absolute;
width: 19.2rem;
height: 0.2rem;
background: #0093D3;
top: 0;
left: 5.1rem;
}
.questions-name::after {
content: '';
position: absolute;
width: 0.2rem;
height: 13.2rem;
background: #0093D3;
top: 0;
left: 5.1rem;
}
.questions .title {
color: #FFF;
}
.questions .title::before {
content: '';
position: absolute;
width: 25rem;
height: 0.2rem;
background: #0093D3;
bottom: 0;
left: 5.1rem;
}
.questions .title::after {
content: '';
position: absolute;
width: 0.2rem;
height: 1.7rem;
background: #0093D3;
bottom: 0;
left: 5.1rem;
}
.questions-description {
color: #C2D0D3;
font-size: 2rem;
font-style: normal;
font-weight: 400;
line-height: 150%;
letter-spacing: 0.06rem;
padding-left: 5rem;
}
.questions-form {
display: flex;
flex-direction: column;
gap: 1.2rem;
width: 100%;
max-width: 36rem;
}
.questions-form::before {
content: '';
position: absolute;
width: 1.8rem;
height: 0.2rem;
background: #0093D3;
bottom: 0;
right: 0;
}
.questions-form::after {
content: '';
position: absolute;
width: 0.2rem;
height: 31.75rem;
background: #0093D3;
bottom: 0;
right: 0;
}
.questions-form input {
background: #F7F7F7;
padding: 1.6rem;
width: 100%;
color: #000;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.048rem;
}
.questions-form input::placeholder {
color: #9EA4AD;
}
.questions-form textarea {
background: #F7F7F7;
padding: 1.6rem;
width: 100%;
color: #000;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.048rem;
height: 7.7rem;
min-height: 7.7rem;
}
.questions-form textarea::placeholder {
color: #9EA4AD;
}
.questions-submit {
background: #0093D3;
padding: 1.6rem;
color: #FFF;
text-align: center;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.048rem;
}
@media screen and (max-width: 992px) {
.questions {
margin-bottom: 7.2rem;
}
.questions-container {
gap: 2.9rem;
flex-direction: column;
padding: 0 0 4.4rem 0;
align-items: center;
}
.questions-container::before {
width: 19.2rem;
top: 0;
right: auto;
left: 0;
}
.questions-container::after {
width: 0.2rem;
height: 28rem;
bottom: auto;
right: 0;
top: 23.6rem;
}
.questions-name {
box-shadow: 0px -2rem 10rem 0px rgba(10, 1, 34, 0.22);
padding: 7rem 0 5rem 0;
gap: 2rem;
max-width: 28.5rem;
margin-left: 0;
margin-top: -3.8rem;
}
.questions-name::before {
display: none;
}
.questions .title {
font-size: 3.2rem;
}
.questions-name::after {
height: 13.2rem;
left: 0;
}
.questions .title::before {
width: 9.6rem;
height: 1rem;
position: relative;
left: 0;
}
.questions .title::after {
left: 0;
}
.questions-description {
font-size: 1.6rem;
line-height: 2.5rem;
letter-spacing: normal;
padding-left: 0;
text-align: center;
}
.questions-form {
max-width: 28.5rem;
}
.questions-form::before {
display: none;
}
.questions-form::after {
width: 25rem;
height: 0.2rem;
bottom: 0;
right: auto;
left: 0;
}
.questions-submit {
padding: 1.6rem 1.2rem;
}
}
/* news */
.news {
margin-bottom: 11rem;
}
.news-container {
display: flex;
flex-direction: column;
gap: 5.6rem;
}
.news .title {
max-width: 70.9rem;
}
.news-slider {
width: 100%;
}
.news-swiper {
width: 100%;
}
.news-slider .swiper-slide {
height: auto;
}
.news-item {
display: flex;
align-items: flex-end;
padding: 3.2rem;
position: relative;
height: 47.6rem;
}
.news-item__img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.news-item__img::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 33.1rem;
opacity: 0.8;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 64.65%);
}
.news-item__img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.news-item__content {
display: flex;
flex-direction: column;
gap: 1.2rem;
align-items: flex-start;
position: relative;
z-index: 2;
}
.news-item__row {
display: flex;
align-items: center;
gap: 1.6rem;
}
.news-item__category {
padding: 0.6rem 1.2rem;
background: #0093D3;
color: #FFF;
text-align: center;
font-size: 1.2rem;
font-style: normal;
font-weight: 500;
line-height: 100%;
letter-spacing: 0.012rem;
text-transform: uppercase;
}
.news-item__date {
display: flex;
align-items: center;
gap: 0.6rem;
}
.news-item__date svg {
width: 2.4rem;
height: auto;
}
.news-item__date p {
color: #FFF;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: 2.4rem;
}
.news-item__title {
color: #FFF;
font-size: 2rem;
font-style: normal;
font-weight: 500;
line-height: 2.8rem;
}
.news-item__link {
display: flex;
padding: 0.4rem 0rem;
justify-content: center;
align-items: center;
gap: 0.8rem;
color: #FFF;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: 2.4rem;
}
.news-item__link svg {
width: 2.4rem;
height: auto;
}
.news-mobile-grid {
display: none;
}
@media screen and (max-width: 992px) {
.news {
margin-bottom: 5.4rem;
}
.news-container {
gap: 2.4rem;
}
.news-slider {
display: none;
}
.news-mobile-grid {
display: flex;
flex-direction: column;
gap: 1.6rem;
}
}
/* work */
.work {
margin-bottom: 12.7rem;
}
.work-container {
display: flex;
flex-direction: column;
gap: 4.9rem;
}
.work-name {
max-width: 76rem;
display: flex;
flex-direction: column;
gap: 1rem;
position: relative;
}
.work-name::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 1rem;
height: 9.6rem;
background: #0093D3;
display: flex;
}
.work .title {
border-left: none;
padding-left: 5rem;
}
.work-description {
color: #4B5557;
font-size: 2rem;
font-style: normal;
font-weight: 400;
line-height: 150%;
letter-spacing: 0.06rem;
padding-left: 5rem;
}
.work-main {
width: 100%;
}
.work-main img {
width: 100%;
}
@media screen and (max-width: 992px) {
.work {
margin-bottom: 9.2rem;
}
.work-container {
gap: 1.6rem;
}
.work-name {
gap: 1.6rem;
}
.work-name::before {
display: none;
}
.work .title {
padding-left: 0;
}
.work-description {
font-size: 1.6rem;
letter-spacing: normal;
padding-left: 0;
text-align: center;
}
}
/* video */
.video {
margin-bottom: 9rem;
}
.video-container {
display: flex;
flex-direction: column;
gap: 7rem;
}
.video-name {
display: flex;
flex-direction: column;
gap: 1rem;
}
.video .title {
max-width: 90.5rem;
}
.video-description {
color: #4B5557;
font-size: 2rem;
font-style: normal;
font-weight: 400;
line-height: 150%;
letter-spacing: 0.06rem;
max-width: 90.5rem;
padding-left: 5rem;
}
.video-main {
width: 100%;
height: 58.2rem;
}
.video-main iframe {
width: 100%;
height: 100%;
}
#map {
width: 100%;
height: 100%;
}
@media screen and (max-width: 992px) {
.video {
margin-bottom: 5.6rem;
}
.video-container {
gap: 1.6rem;
}
.video-name {
gap: 1.6rem;
}
.video-description {
font-size: 1.6rem;
letter-spacing: normal;
padding-left: 0;
text-align: center;
}
.video-main {
height: 16.6rem;
}
}
/* catalog */
.catalog {
margin-bottom: 12.5rem;
}
.catalog-container {
display: flex;
flex-direction: column;
gap: 5.6rem;
}
.catalog-main {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3rem;
}
@media screen and (max-width: 992px) {
.catalog {
margin-bottom: 8.3rem;
}
.catalog-container {
gap: 1rem;
}
.catalog-main {
grid-template-columns: repeat(1, 1fr);
gap: 1.2rem;
}
}
/* banner-catalog */
.banner-catalog {
margin-bottom: 8.3rem;
height: 47.9rem;
position: relative;
}
.breadcrumbs {
display: flex;
align-items: center;
gap: 0.5rem;
}
.banner-catalog .breadcrumbs {
position: absolute;
left: 0;
right: 0;
top: 3rem;
}
.breadcrumbs a, .breadcrumbs p {
color: rgba(7, 7, 7, 0.64);
font-feature-settings: 'ss01' on, 'cv01' on, 'cv11' on;
font-size: 1.4rem;
font-style: normal;
font-weight: 400;
line-height: 2rem;
}
.breadcrumbs p:last-child {
color: #070707;
text-align: center;
font-feature-settings: 'ss01' on, 'cv01' on, 'cv11' on;
font-size: 1.4rem;
font-style: normal;
font-weight: 400;
line-height: 2rem;
}
.banner-catalog .breadcrumbs a, .banner-catalog .breadcrumbs p {
color: rgba(255, 255, 255, 0.64);
}
.banner-catalog .breadcrumbs p:last-child {
color: #FFF;
}
.banner-catalog .banner-title {
max-width: 84.7rem;
}
.banner-catalog .banner-description {
max-width: 84.7rem;
}
.banner-catalog .banner-container {
justify-content: flex-end;
padding-bottom: 10.5rem;
}
@media screen and (max-width: 992px) {
.banner-catalog {
margin-bottom: 6rem;
height: auto;
padding: 6.1rem 0;
}
.banner-catalog .breadcrumbs {
display: none;
}
.banner-catalog .banner-container {
justify-content: center;
padding-bottom: 0;
}
}
/* product_page */
.product_page {
display: flex;
flex-direction: column;
gap: 5.5rem;
margin: 3.4rem 0 10.2rem 0;
position: relative;
}
.product_page-container {
display: flex;
flex-direction: column;
gap: 3.4rem;
}
.product_page-name {
display: flex;
flex-direction: column;
gap: 1rem;
}
.product_page .title {
max-width: 58.5rem;
}
.product_page-description {
color: #070707;
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.048rem;
max-width: 58.5rem;
padding-left: 5rem;
}
.product_page-img {
position: absolute;
width: 70.3rem;
height: 64.2rem;
object-fit: contain;
right: 0;
bottom: 0;
z-index: 1;
}
.product_page-images {
display: flex;
flex-direction: column;
gap: 2rem;
position: absolute;
width: 58rem;
height: 64.2rem;
right: 12rem;
bottom: 0;
z-index: 1;
}
.product_page-images .swiper {
width: 100%;
}
.product_page-swiper img {
width: 100%;
height: 53.6rem;
object-fit: contain;
}
.product_page-thumbs .swiper-slide {
cursor: pointer;
border: 0.1rem solid transparent;
transition: .3s all;
}
.product2_tabs {
margin-bottom: 12rem;
}
.product2_tabs-container {
display: flex;
flex-direction: column;
gap: 5rem;
}
.product2_tabs-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.product2_tab {
background: #F7F7F7;
padding: 1.6rem;
text-align: center;
font-size: 1.4rem;
line-height: normal;
color: #070707;
font-weight: 500;
}
.product2_tab.active {
box-shadow: 0px 20px 40px 0px rgba(1,12,31,0.24);
}
.product2_content {
display: none;
}
.product2_content.active {
display: flex;
flex-direction: column;
}
.product_page-thumbs .swiper-slide-thumb-active {
border: 0.1rem solid #0093D3;
}
.product_page-thumbs img {
width: 100%;
height: 7.4rem;
object-fit: contain;
}
.product_page-main {
width: 100%;
max-width: 58.5rem;
display: flex;
flex-direction: column;
gap: 5rem;
padding: 5rem 8rem;
position: relative;
background: #061C3D;
overflow: hidden;
}
.product_page-main::before {
content: '';
background-image: url('../images/product_page-main.svg');
width: 66.7rem;
height: 54.8rem;
display: flex;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
bottom: 0;
right: 0;
}
.product_page-column {
display: flex;
flex-direction: column;
gap: 1.6rem;
position: relative;
z-index: 2;
}
.product_page-row {
display: flex;
justify-content: space-between;
}
.product_page-quantity {
display: flex;
gap: 1rem;
}
.product_page-quantity input {
width: 5rem;
height: 5rem;
padding: 1.1rem 1rem;
background: rgba(255, 255, 255, 0.14);
color: #FFF;
text-align: center;
font-size: 2.4rem;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.product_page-quantity input::-webkit-outer-spin-button,
.product_page-quantity input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.product_page-quantity input[type=number] {
-moz-appearance: textfield;
}
.product_page-quantity button {
display: flex;
width: 5rem;
height: 5rem;
padding: 1.1rem 1rem;
flex-direction: column;
justify-content: center;
align-items: center;
border: 1px solid rgba(212, 212, 212, 0.37);
}
.product_page-quantity button svg {
width: 2.4rem;
height: auto;
}
.product_page-price {
color: #FFF;
font-size: 4rem;
font-style: normal;
font-weight: 700;
line-height: normal;
min-width: 17rem;
}
.product_page-add {
color: #FFF;
text-align: center;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.048rem;
display: flex;
width: 17rem;
height: 5.2rem;
padding: 1.6rem;
justify-content: center;
align-items: center;
gap: 0.4rem;
border: 1px solid rgba(212, 212, 212, 0.37);
}
.product_page-add svg {
width: 2.5rem;
height: auto;
}
.product_page-order {
background: #0093D3;
padding: 1.6rem;
color: #FFF;
text-align: center;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.048rem;
}
.product_page-text {
display: flex;
flex-direction: column;
max-width: 52.2rem;
position: relative;
z-index: 2;
color: #FFF;
font-size: 1.4rem;
font-style: normal;
font-weight: 400;
line-height: 150%;
}
.product_page-text__block {
display: flex;
flex-direction: column;
gap: 1rem;
}
.product_page-text h3 {
color: #FFF;
font-size: 2rem;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.product_page-text p {
color: #FFF;
font-size: 1.4rem;
font-style: normal;
font-weight: 400;
line-height: 150%;
}
@media screen and (max-width: 992px) {
.product_page {
gap: 4.6rem;
margin: 1.6rem 0 5.9rem 0;
}
.product_page-container {
gap: 0;
}
.product_page-name {
gap: 1.6rem;
margin-bottom: 1rem;
}
.product_page-description {
text-align: center;
padding-left: 0;
}
.product_page-img {
position: relative;
width: 100%;
height: 34rem;
margin-bottom: -8rem;
}
.product_page-main {
width: 100vw;
margin-left: -1.6rem;
padding: 15.4rem 1.6rem 4.8rem 1.6rem;
}
.product_page-main::before {
background-image: url('../images/product_page-main-mob.svg');
width: 37.5rem;
height: 72.8rem;
bottom: auto;
top: 0;
}
.product_page-column {
gap: 1.6rem;
align-items: center;
}
.product_page-row {
flex-direction: column;
gap: 1.6rem;
}
.product_page-price {
min-width: auto;
}
.product_page-text h3 {
font-size: 1.6rem;
text-align: center;
}
.product_page-text p {
font-size: 1.2rem;
text-align: center;
}
}
/* questions-product */
.questions-product .questions-description a {
color: #46C7FF;
}
.questions-product .questions-name {
max-width: 68.6rem;
}
.questions-product .questions-container {
gap: 7.3rem;
}
@media screen and (max-width: 992px) {
.questions-product .questions-name {
max-width: 28.5rem;
}
}
/* appointment */
.appointment {
margin-bottom: 14.3rem;
}
.appointment-container {
display: flex;
flex-direction: column;
gap: 5.6rem;
position: relative;
}
.appointment-img::before {
content: '';
background-image: url('../images/product__aqua.svg');
position: absolute;
width: 57.4rem;
height: 61.5rem;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
right: 0;
bottom: -6rem;
}
.appointment-name {
max-width: 68.9rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.appointment-description {
color: #070707;
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.048rem;
padding-left: 5rem;
}
.appointment-main_all {
display: flex;
align-items: flex-end;
}
.appointment-blocks {
display: flex;
flex-direction: column;
gap: 2.4rem;
max-height: 55rem;
overflow-y: auto;
padding-left: 2rem;
direction: rtl;
text-align: left;
padding-right: 5rem;
}
.appointment-blocks::-webkit-scrollbar {
width: 1rem;
}
.appointment-blocks::-webkit-scrollbar-track {
background: #909090;
}
.appointment-blocks::-webkit-scrollbar-thumb {
background: #0093D3;
}
.appointment-main {
display: flex;
flex-direction: column;
gap: 2.4rem;
align-items: flex-start;
max-width: 69rem;
min-width: 69rem;
width: 100%;
padding: 8rem;
background: #F7F7F7;
min-height: 71.9rem;
}
.appointment-block {
display: flex;
flex-direction: column;
gap: 1rem;
}
.appointment-main span {
color: #070707;
font-size: 2rem;
font-style: normal;
font-weight: 600;
line-height: normal;
direction: ltr;
}
.appointment-main p {
color: #070707;
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: 150%;
direction: ltr;
}
.appointment-button {
color: #FFF;
text-align: center;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.048rem;
padding: 1.6rem;
background: #0093D3;
}
.appointment-img {
z-index: 1;
width: 77.8rem;
min-width: 77.8rem;
margin-left: -16rem;
position: relative;
}
.appointment-img img {
width: 100%;
z-index: 2;
position: relative;
}
@media screen and (max-width: 992px) {
.appointment {
margin-bottom: 6.3rem;
}
.appointment-blocks {
padding-right: 0;
}
.appointment-container {
gap: 2.5rem;
}
.appointment-name {
max-width: none;
gap: 1.6rem;
}
.appointment-description {
text-align: center;
padding-left: 0;
}
.appointment-main {
max-width: none;
padding: 2.4rem 1.6rem;
min-height: auto;
min-width: auto;
}
.appointment-main span {
font-size: 1.6rem;
}
.appointment-main p {
font-size: 1.4rem;
}
.appointment-button {
width: 100%;
text-align: center;
}
.appointment-img {
display: none;
}
.breadcrumbs {
flex-wrap: wrap;
justify-content: center;
}
.appointment-container::before {
display: none;
}
}
/* header */
.works {
margin-bottom: 10rem;
}
.works-container {
display: flex;
flex-direction: column;
gap: 5.6rem;
}
.works-slider {
width: 100%;
}
.works-swiper {
width: 100%;
}
.works-slider .swiper-slide {
height: auto;
}
.works-item {
display: flex;
}
.works-item img {
height: 49rem;
width: 100%;
object-fit: cover;
}
.product_page-solutions .title {
max-width: 71.3rem;
}
.works-navigation {
display: none;
}
@media screen and (max-width: 992px) {
.works {
margin-bottom: 11rem;
}
.works .name {
justify-content: center;
}
.works-container {
gap: 1.6rem;
}
.works-item img {
height: 44.7rem;
}
.works-navigation {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 1.6rem;
}
.works-pagination {
width: auto !important;
display: none;
gap: 1rem;
align-items: center;
justify-content: center;
}
.works-pagination .swiper-pagination-bullet {
background: #BFC5CE;
opacity: 1;
margin: 0 !important;
width: 1rem;
height: 0.2rem;
}
.works-pagination .swiper-pagination-bullet-active {
width: 9.6rem;
background: #0093D3;
}
}
/* procedure */
.procedure {
margin-bottom: 13.3rem;
}
.procedure-container {
display: flex;
flex-direction: column;
}
.procedure-name {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 5.6rem;
}
.procedure-description {
color: #070707;
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.048rem;
padding-left: 5rem;
}
.procedure-top {
display: flex;
flex-direction: column;
gap: 2.4rem;
margin-bottom: 2.4rem;
}
.procedure-grid {
display: flex;
border: 1px solid #D7D7D7;
background: #FFF;
}
.procedure-item {
display: flex;
height: 29.7rem;
padding: 5rem;
flex-direction: column;
gap: 1rem;
align-items: flex-start;
background: #FFF;
max-width: 39.95rem;
}
.procedure-item:nth-child(2) {
border-left: 1px solid #D7D7D7;
max-width: 42.1rem;
}
.procedure-item img {
width: 8rem;
margin-bottom: auto;
}
.procedure-item span {
color: #070707;
font-size: 2rem;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.procedure-item p {
color: #4B5557;
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: 150%;
}
.procedure-item2 {
background: #061C3D;
display: flex;
height: 29.7rem;
padding: 5rem;
flex-direction: column;
gap: 1rem;
align-items: flex-start;
max-width: 39.95rem;
}
.procedure-item2__title {
color: #FFF;
font-size: 2rem;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.procedure-item2__title span {
color: #46C7FF;
}
.procedure-item2__description {
color: #E0E0E0;
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: 150%;
}
.procedure-item2__link {
color: #FFF;
text-align: center;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.048rem;
background: #0093D3;
padding: 1.6rem;
margin-top: auto;
}
.procedure-row {
display: flex;
gap: 1.6rem;
}
.procedure-tabs {
display: flex;
flex-direction: column;
gap: 2rem;
width: 100%;
max-width: 38.4rem;
}
.procedure-tab {
background: #F7F7F7;
padding: 1.6rem 3.6rem;
color: #070707;
text-align: left;
font-size: 1.4rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.042rem;
}
.procedure-tab span {
opacity: 0;
}
.procedure-tab.active {
color: #FFF;
background: #061C3D;
}
.procedure-tab.active span {
opacity: 1;
}
.procedure-button {
background: #0093D3;
padding: 1.6rem;
color: #FFF;
text-align: center;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.048rem;
}
.procedure-content {
display: none;
width: 100%;
max-width: 81.1rem;
padding: 5rem 8rem;
border: 1px solid #D7D7D7;
}
.procedure-content.active {
display: flex;
flex-direction: column;
}
.procedure-content__block {
display: flex;
flex-direction: column;
gap: 1rem;
}
.procedure-content h3 {
color: #070707;
font-size: 3.2rem;
font-style: normal;
font-weight: 700;
line-height: 150%;
margin-bottom: 2.6rem;
}
.procedure-content h4 {
color: #070707;
font-size: 2rem;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.procedure-content p {
color: #070707;
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: 150%;
}
@media screen and (max-width: 992px) {
.procedure {
margin-bottom: 7.5rem;
}
.procedure-name {
gap: 1.6rem;
margin-bottom: 2.3rem;
}
.procedure-description {
text-align: center;
padding-left: 0;
}
.procedure-top {
margin-bottom: 2.9rem;
}
.procedure-grid {
flex-direction: column;
}
.procedure-item {
align-items: center;
max-width: none;
}
.procedure-item:nth-child(2) {
border-left: none;
border-top: 1px solid #D7D7D7;
max-width: none;
}
.procedure-item span {
text-align: center;
}
.procedure-item p {
text-align: center;
}
.procedure-item2 {
align-items: center;
max-width: none;
}
.procedure-item2__title {
text-align: center;
}
.procedure-item2__description {
text-align: center;
}
.procedure-row {
flex-direction: column;
gap: 2.9rem;
}
.procedure-tabs {
gap: 0.8rem;
flex-direction: row;
max-width: none;
overflow-x: auto;
padding: 0 1.6rem;
min-width: 100vw;
margin-left: -1.6rem;
}
.procedure-tab {
padding: 1.6rem 1.2rem;
text-wrap: nowrap;
}
.procedure-button {
text-wrap: nowrap;
}
.procedure-content {
padding: 3.2rem 1.6rem;
}
.procedure-content h3 {
font-size: 2.4rem;
}
.procedure-content h4 {
font-size: 1.6rem;
}
.procedure-content p {
font-size: 1.4rem;
}
}
/* cart */
.cart {
margin-bottom: 14.6rem;
display: flex;
flex-direction: column;
gap: 9.6rem;
}
.cart-name {
background: #F7F7F7;
padding: 3.2rem 0 6.2rem 0;
}
.cart-name__container {
display: flex;
flex-direction: column;
gap: 9.6rem;
}
.cart-main {
display: flex;
gap: 3rem;
}
.cart-products {
display: flex;
flex-direction: column;
gap: 1.2rem;
width: 100%;
max-width: 68.8rem;
}
.cart-product {
padding: 3rem;
background: #F7F7F7;
display: flex;
gap: 2rem;
align-items: flex-end;
}
.cart-product__img {
width: 11.8rem;
min-width: 11.8rem;
height: 10.8rem;
}
.cart-product__img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cart-product__column {
display: flex;
flex-direction: column;
gap: 0.8rem;
align-items: flex-start;
width: 100%;
}
.cart-product__title {
color: #070707;
font-size: 2rem;
font-style: normal;
font-weight: 600;
line-height: 150%;
}
.cart-product__row {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.cart-product__quantity {
display: flex;
gap: 1rem;
}
.cart-product__quantity button {
display: flex;
display: flex;
width: 4rem;
height: 4rem;
flex-direction: column;
justify-content: center;
align-items: center;
border: 1px solid rgba(178, 174, 174, 0.37);
}
.cart-product__quantity button svg {
width: 2.5rem;
height: auto;
}
.cart-product__quantity input {
width: 4rem;
height: 4rem;
background: rgba(7, 7, 7, 0.05);
padding: 1.1rem 0;
color: #070707;
text-align: center;
font-size: 2.4rem;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.cart-product__quantity input::-webkit-outer-spin-button,
.cart-product__quantity input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.cart-product__quantity input[type=number] {
-moz-appearance: textfield;
}
.cart-product__buttons {
display: flex;
gap: 1rem;
align-items: center;
}
.cart-product__price {
color: #0093D3;
font-size: 2.4rem;
font-style: normal;
font-weight: 600;
line-height: 150%;
}
.cart-product__delete {
display: flex;
}
.cart-product__delete svg {
width: 2.4rem;
height: auto;
}
.cart-column {
position: sticky;
top: 5rem;
display: flex;
flex-direction: column;
gap: 2.4rem;
}
.cart-content {
width: 100%;
max-width: 48.2rem;
}
.cart-total {
display: flex;
flex-direction: column;
gap: 1rem;
padding-left: 3rem;
border-left: 1rem solid #0093D3;
}
.cart-total h4 {
color: #070707;
font-size: 4rem;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 0.12rem;
}
.cart-total p {
color: #4B5557;
font-size: 2rem;
font-style: normal;
font-weight: 400;
line-height: 150%;
letter-spacing: 0.06rem;
}
.cart-form {
display: flex;
flex-direction: column;
gap: 2.4rem;
margin-top: 0 !important;
}
.cart-form input {
padding: 1.6rem;
border: 1px solid #D4D4D4;
color: #000;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.048rem;
width: 100%;
}
.cart-form input::placeholder {
color: #9EA4AD;
}
.cart-form textarea {
padding: 1.6rem;
border: 1px solid #D4D4D4;
color: #000;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.048rem;
width: 100%;
height: 12.7rem;
min-height: 12.7rem;
}
.cart-form textarea::placeholder {
color: #9EA4AD;
}
.cart-submit {
padding: 1.6rem;
background: #0093D3;
color: #FFF;
text-align: center;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.048rem;
}
@media screen and (max-width: 992px) {
.cart {
margin-bottom: 6.3rem;
gap: 4.9rem;
}
.cart-name {
padding: 1.6rem 0 7rem 0;
}
.cart-name__container {
gap: 7.7rem;
}
.cart-main {
flex-direction: column;
gap: 6.3rem;
}
.cart-product {
flex-direction: column;
align-items: center;
position: relative;
}
.cart-product__img {
width: 19.3rem;
height: 17.6rem;
min-width: 19.3rem;
}
.cart-product__column {
align-items: center;
}
.cart-product__row {
flex-direction: column;
align-items: center;
gap: 1.6rem;
}
.cart-product__delete-block {
position: absolute;
top: 1.8rem;
right: 2.4rem;
}
.cart-column {
position: relative;
top: 0;
gap: 1.6rem;
}
.cart-content {
max-width: none;
}
.cart-total {
gap: 1.6rem;
align-items: center;
padding-left: 0;
border-left: none;
}
.cart-total::before {
content: '';
width: 9.6rem;
height: 1rem;
background: #0093D3;
display: flex;
}
.cart-total h4 {
font-size: 3.6rem;
letter-spacing: 0.108rem;
}
.cart-form {
gap: 1.6rem;
}
}
/* requisites */
.requisites {
margin-bottom: 15.4rem;
}
.requisites-container {
display: flex;
flex-direction: column;
gap: 5rem;
}
.requisites-name {
display: flex;
flex-direction: column;
gap: 1rem;
}
.requisites-name p {
color: #070707;
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: normal;
padding-left: 5rem;
max-width: 76.7rem;
}
.requisites-main {
display: flex;
flex-direction: column;
border-radius: 0.8rem;
border: 1px solid #C2C9D1;
}
.requisites-row {
display: flex;
border-bottom: 1px solid #F0F1F3;
}
.requisites-block {
max-width: 41.9rem;
width: 100%;
padding: 1.6rem;
background: rgba(218, 225, 235, 0.21);
display: flex;
align-items: center;
}
.requisites-block:last-child {
max-width: 78.1rem;
border-left: 1px solid #F0F1F3;
}
.requisites-row:nth-child(2n) .requisites-block {
background: #FFF;
}
.requisites-row:last-child {
border-bottom: none;
}
.requisites-block p {
color: #070707;
font-feature-settings: 'liga' off, 'clig' off;
font-size: 1.4rem;
font-style: normal;
font-weight: 400;
line-height: 1.6rem;
}
.requisites-row:first-child .requisites-block p {
color: #070707;
font-feature-settings: 'liga' off, 'clig' off;
font-size: 1.6rem;
font-style: normal;
font-weight: 600;
line-height: 1.6rem;
}
@media screen and (max-width: 992px) {
.requisites {
margin-bottom: 6.6rem;
}
.requisites-container {
gap: 1.6rem;
}
.requisites-name {
gap: 1.6rem;
align-items: center;
}
.requisites-name p {
text-align: center;
padding-left: 0;
}
.requisites-row:first-child {
display: none;
}
.requisites-main {
border-radius: 0;
}
.requisites-row {
flex-direction: column;
align-items: center;
gap: 0.8rem;
padding: 1.6rem;
}
.requisites-block {
max-width: none;
padding: 0;
flex-direction: column;
background: transparent;
}
.requisites-row:nth-child(2n) .requisites-block {
background: transparent;
}
.requisites-block:last-child {
max-width: none;
border-left: none;
}
.requisites-block p {
text-align: center;
font-weight: 500;
}
.requisites-block:first-child p {
color: rgba(7, 7, 7, 0.60);
font-weight: 400;
}
.requisites-row:nth-child(2n-1) {
background: #F7F8FA;
}
}
/* pickup */
.pickup {
margin-bottom: 12.8rem;
}
.pickup-container {
display: flex;
flex-direction: column;
gap: 5.1rem;
}
.pickup-main {
display: flex;
flex-direction: column;
gap: 2.1rem;
}
.pickup-select {
display: flex;
flex-direction: column;
gap: 1rem;
max-width: 48.3rem;
}
.pickup-select p {
color: #070707;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.pickup-select select {
-webkit-appearance: none;
-moz-appearance: none;
background-image: url('../images/chevrondown.svg');
background-position: center right 1.6rem;
background-repeat: no-repeat;
background-size: 2.4rem;
color: #070707;
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.048rem;
border: 1px solid #D4D4D4;
padding: 1.6rem;
width: 100%;
cursor: pointer;
}
.pickup-content {
display: none;
gap: 3rem;
}
.pickup-content.active {
display: flex;
}
.pickup-block {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.7rem;
padding: 3rem;
background: #F7F7F7;
min-width: 33.5rem;
}
.pickup-block:first-child {
max-width: 46.9rem;
width: 100%;
}
.pickup-block p {
color: #061C3D;
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: 150%;
}
.pickup-block img {
width: 4rem;
}
.pickup-block a {
color: #061C3D;
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: 150%;
opacity: 0.8;
}
@media screen and (max-width: 992px) {
.pickup {
margin-bottom: 12.6rem;
}
.pickup-container {
gap: 1.6rem;
}
.pickup-main {
gap: 1.6rem;
}
.pickup-select {
max-width: none;
}
.pickup-select p {
text-align: center;
}
.pickup-content {
flex-direction: column;
gap: 1.6rem;
}
.pickup-block {
align-items: center;
gap: 1.6rem;
min-width: 100%;
}
.pickup-block:first-child {
max-width: 100%;
}
.pickup-block p {
text-align: center;
}
.pickup-block a {
text-align: center;
}
}
/* addresses */
.addresses {
margin-bottom: 9.6rem;
}
.addresses-container {
display: flex;
flex-direction: column;
gap: 3.9rem;
}
.addresses-main {
position: relative;
height: 55.9rem;
width: 100%;
}
.addresses-main iframe {
height: 100%;
width: 100%;
}
.addresses-block {
position: absolute;
z-index: 2;
right: 7.5rem;
bottom: 5.5rem;
display: flex;
flex-direction: column;
background: #FFF;
box-shadow: 0 0.4rem 15rem 0 rgba(1, 28, 13, 0.17);
padding: 6rem 5rem;
width: 100%;
max-width: 48.3rem;
}
.addresses-block > span {
color: #061C3D;
font-size: 2.4rem;
font-style: normal;
font-weight: 600;
line-height: 150%;
margin-bottom: 0.5rem;
}
.addresses-block > p {
color: #061C3D;
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: 150%;
margin-bottom: 3rem;
}
.addresses-column {
display: flex;
flex-direction: column;
gap: 3rem;
}
.addresses-row {
display: flex;
gap: 1rem;
align-items: flex-start;
}
.addresses-icon {
background: rgba(0, 147, 211, 0.08);
width: 4.4rem;
min-width: 4.4rem;
height: 4.4rem;
display: flex;
justify-content: center;
align-items: center;
}
.addresses-icon svg {
width: 2.4rem;
height: auto;
}
.addresses-contacts {
display: flex;
gap: 0.5rem;
flex-direction: column;
align-items: flex-start;
}
.addresses-contacts p {
color: #061C3D;
font-size: 1.4rem;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.addresses-contacts a {
color: #061C3D;
font-size: 1.8rem;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.addresses-contacts span {
color: #061C3D;
font-size: 1.6rem;
font-style: normal;
font-weight: 600;
line-height: normal;
}
@media screen and (max-width: 992px) {
.addresses {
margin-bottom: 12.6rem;
}
.addresses-container {
gap: 1.6rem;
}
.addresses-main {
height: auto;
display: flex;
flex-direction: column;
gap: 1.6rem;
}
.addresses-main iframe {
height: 55.9rem;
}
.addresses-block {
position: relative;
right: 0;
bottom: 0;
padding: 3rem;
max-width: none;
align-items: center;
}
.addresses-block > span {
text-align: center;
}
.addresses-block > p {
text-align: center;
}
.addresses-column {
align-items: center;
}
.addresses-row {
flex-direction: column;
align-items: center;
}
.addresses-contacts {
align-items: center;
}
.addresses-contacts p {
text-align: center;
}
.addresses-contacts a {
text-align: center;
}
.addresses-contacts span {
text-align: center;
}
}
/* contact_team */
.contact_team {
margin-bottom: 14.6rem;
}
.contact_team-container {
display: flex;
gap: 3rem;
}
.contact_team-left {
width: 100%;
max-width: 48.2rem;
display: flex;
flex-direction: column;
gap: 2.4rem;
}
.contact_team-form {
display: flex;
flex-direction: column;
gap: 2.4rem;
}
.contact_team-form input {
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.048rem;
width: 100%;
color: #000;
border: 1px solid #D4D4D4;
padding: 1.6rem;
}
.contact_team-form input::placeholder {
color: #9EA4AD;
}
.contact_team-form textarea {
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.048rem;
width: 100%;
color: #000;
border: 1px solid #D4D4D4;
padding: 1.6rem;
height: 12.7rem;
min-height: 12.7rem;
}
.contact_team-form textarea::placeholder {
color: #9EA4AD;
}
.contact_team-submit {
color: #FFF;
text-align: center;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.048rem;
padding: 1.6rem;
background: #0093D3;
}
.contact_team-right {
width: 100%;
max-width: 69rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2.4rem 3rem;
}
.contact_team-item {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 3rem;
background: #F7F7F7;
}
.contact_team-item img {
width: 4rem;
margin-bottom: 1.7rem;
}
.contact_team-item span {
color: #061C3D;
font-size: 2rem;
font-style: normal;
font-weight: 600;
line-height: normal;
margin-bottom: 1.7rem;
}
.contact_team-item a {
color: #061C3D;
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: 150%;
opacity: 0.8;
}
@media screen and (max-width: 992px) {
.contact_team {
margin-bottom: 12.6rem;
}
.contact_team-container {
flex-direction: column;
gap: 1.6rem;
}
.contact_team-left {
max-width: none;
gap: 1.6rem;
}
.contact_team-form {
gap: 1.6rem;
}
.contact_team-right {
max-width: none;
grid-template-columns: repeat(1, 1fr);
gap: 1.6rem;
}
.contact_team-item {
align-items: center;
}
.contact_team-item span {
text-align: center;
}
.contact_team-item a {
text-align: center;
}
}
/* contacts */
.contacts {
display: flex;
flex-direction: column;
gap: 5rem;
margin-bottom: 10rem;
background: #F7F7F7;
padding: 3rem 0 6.4rem 0;
}
.contacts-container {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: flex-start;
}
.contacts-button {
margin-left: 5rem;
color: #FFF;
text-align: center;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.048rem;
padding: 1.6rem;
background: #0093D3;
}
.contacts-container p {
color: #070707;
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: normal;
padding-left: 5rem;
max-width: 76.7rem;
}
@media screen and (max-width: 992px) {
.contacts {
gap: 7.7rem;
margin-bottom: 6rem;
padding: 1.6rem 0 4.7rem 0;
}
.contacts-container {
gap: 1.6rem;
align-items: center;
}
.contacts-button {
margin-left: 0;
}
.contacts-container p {
text-align: center;
padding-left: 0;
max-width: none;
}
}
/* about */
.about {
background: #F7F7F7;
position: relative;
display: flex;
flex-direction: column;
gap: 5rem;
padding: 3rem 0 9.6rem 0;
}
.about-container {
display: flex;
flex-direction: column;
gap: 1rem;
}
.about-container p {
max-width: 58.5rem;
padding-left: 5rem;
color: #070707;
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.048rem;
}
.about .title {
max-width: 58.5rem;
}
.about-img {
position: absolute;
width: 81rem;
right: 2rem;
top: 0.8rem;
z-index: 2;
}
@media screen and (max-width: 992px) {
.about {
gap: 7rem;
padding: 1.6rem 0 6.2rem 0;
}
.about-container {
gap: 1.6rem;
align-items: center;
}
.about-container p {
max-width: none;
padding-left: 0;
text-align: center;
}
.about .title {
max-width: none;
}
.about-img {
display: none;
}
}
/* journey */
.journey {
padding: 9.6rem 0;
background: #061C3D;
margin-bottom: 12rem;
}
.journey-container {
display: flex;
flex-direction: column;
gap: 6.4rem;
}
.journey-name {
display: flex;
flex-direction: column;
gap: 1rem;
}
.journey-name p {
max-width: 78.8rem;
color: #BEBEBE;
font-size: 2rem;
font-style: normal;
font-weight: 400;
line-height: 150%;
letter-spacing: 0.06rem;
padding-left: 5rem;
}
.journey .title {
color: #FFF;
max-width: 53.2rem;
}
.journey-main {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 3.2rem;
}
.journey-block {
display: flex;
flex-direction: column;
gap: 1.2rem;
}
.journey-block span {
color: #46C7FF;
font-size: 6rem;
font-style: normal;
font-weight: 600;
line-height: 7.2rem;
letter-spacing: -0.12rem;
}
.journey-block p {
color: #D3D3D3;
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: 2.4rem;
}
@media screen and (max-width: 992px) {
.journey {
margin-bottom: 6rem;
}
.journey-name {
gap: 1.6rem;
}
.journey-name p {
font-size: 1.6rem;
padding-left: 0;
text-align: center;
}
.journey .title {
max-width: none;
}
.journey-main {
grid-template-columns: repeat(1, 1fr);
gap: 4.8rem;
}
.journey-block {
align-items: center;
}
.journey-block span {
font-size: 5.8rem;
letter-spacing: -0.116rem;
text-align: center;
}
.journey-block p {
text-align: center;
}
}
/* assortment */
.assortment {
margin-bottom: 37.6rem;
}
.assortment-container {
display: flex;
flex-direction: column;
gap: 4rem;
}
.assortment-name {
display: flex;
flex-direction: column;
gap: 1rem;
max-width: 88.5rem;
}
.assortment-name p {
color: #070707;
font-size: 2rem;
font-style: normal;
font-weight: 400;
line-height: 150%;
letter-spacing: 0.06rem;
padding-left: 5rem;
}
.assortment-main {
position: relative;
height: 58.2rem;
}
.assortment-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.assortment-block {
position: absolute;
z-index: 2;
bottom: -25.7rem;
left: 8.3rem;
display: flex;
width: 100%;
max-width: 60.3rem;
min-height: 54.8rem;
padding: 8rem 12rem;
justify-content: center;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
background: #F7F7F7;
}
.assortment-title {
color: #070707;
font-size: 2.4rem;
font-style: normal;
font-weight: 600;
line-height: 150%;
max-width: 31.6rem;
position: relative;
z-index: 3;
}
.assortment-block p {
color: #070707;
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: 150%;
position: relative;
z-index: 3;
}
.assortment-block::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
background-image: url('../images/assortment-block.svg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 43.7rem;
height: 49.5rem;
}
@media screen and (max-width: 992px) {
.assortment {
margin-bottom: 7rem;
}
.assortment-container {
gap: 1.6rem;
}
.assortment-name {
gap: 1.6rem;
align-items: center;
}
.assortment-name p {
text-align: center;
font-size: 1.6rem;
letter-spacing: normal;
padding-left: 0;
}
.assortment-main {
display: flex;
flex-direction: column;
gap: 1.6rem;
height: auto;
}
.assortment-img {
height: 34.4rem;
}
.assortment-block {
position: relative;
bottom: 0;
left: 0;
max-width: none;
min-height: auto;
padding: 3rem;
align-items: center;
}
.assortment-title {
text-align: center;
font-size: 2rem;
max-width: none;
}
.assortment-block p {
text-align: center;
}
.assortment-block::before {
background-image: url('../images/assortment-blockmob.svg');
width: 34.3rem;
height: 26.9rem;
}
}
/* specialists */
.specialists {
margin-bottom: 14rem;
}
.specialists-container {
display: flex;
flex-direction: column;
gap: 5.6rem;
}
.specialists-slider {
width: 100%;
}
.specialists-swiper {
width: 100%;
}
.specialists-slider .swiper-slide {
height: auto;
}
.specialists-item {
display: flex;
padding: 3rem;
flex-direction: column;
align-items: flex-start;
gap: 2rem;
background: #F7F7F7;
height: 100%;
}
.specialists-item img {
width: 100%;
height: 29.1rem;
object-fit: cover;
}
.specialists-item__content {
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.specialists-item__link {
padding: 1.6rem;
border: 1px solid #D4D4D4;
background: #FFF;
color: #0093D3;
text-align: center;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.048rem;
}
.specialists-item__content span {
color: #070707;
font-size: 2rem;
font-style: normal;
font-weight: 600;
line-height: 150%;
}
.specialists-item__content p {
color: #4B5557;
font-size: 2rem;
font-style: normal;
font-weight: 400;
line-height: 150%;
}
.specialists-navigation {
display: none;
}
@media screen and (max-width: 992px) {
.specialists {
margin-bottom: 15.7rem;
}
.specialists-container {
gap: 1.6rem;
}
.specialists-slider {
padding: 0 1.6rem;
}
.specialists-item {
align-items: center;
}
.specialists-item img {
height: 26.6rem;
}
.specialists-item__content span {
text-align: center;
}
.specialists-item__content p {
text-align: center;
}
.specialists .name {
justify-content: center;
}
.specialists-navigation {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 1.6rem;
}
.specialists-pagination {
width: auto !important;
display: flex;
gap: 1rem;
align-items: center;
justify-content: center;
}
.specialists-pagination .swiper-pagination-bullet {
background: #BFC5CE;
opacity: 1;
margin: 0 !important;
width: 1rem;
height: 0.2rem;
}
.specialists-pagination .swiper-pagination-bullet-active {
width: 9.6rem;
background: #0093D3;
}
}
/* banner-mounting */
.banner-mounting {
margin-bottom: 10.9rem;
}
.banner-mounting .banner-title {
max-width: 46.1rem;
}
.banner-buttons {
display: flex;
gap: 1rem;
}
.banner-link-2 {
padding: 1.6rem;
border: 1px solid rgba(212, 212, 212, 0.37);
color: #FFF;
text-align: center;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.048rem;
}
@media screen and (max-width: 992px) {
.banner-mounting {
margin-bottom: 4.9rem;
}
.banner-mounting .banner-title {
max-width: none;
}
.banner-buttons {
flex-direction: column;
}
}
/* mounting */
.mounting {
margin-bottom: 5.6rem;
}
.mounting-container {
display: flex;
flex-direction: column;
gap: 5.6rem;
}
.title span {
color: #46C7FF;
font-size: 2.4rem;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 0.072rem;
}
.mounting-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 3rem;
}
.mounting-column {
display: flex;
flex-direction: column;
gap: 2.4rem;
}
.mounting-block {
background: #F7F7F7;
display: flex;
padding: 3rem;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 1.7rem;
}
.mounting-block img {
width: 4rem;
}
.mounting-block span {
color: #061C3D;
font-size: 2rem;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.mounting-block p, .mounting-block li {
color: #061C3D;
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: 150%;
opacity: 0.8;
}
.mounting-block ul {
padding-left: 2.5rem;
display: flex;
flex-direction: column;
}
.mounting-main {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.mounting-item {
display: flex;
padding: 3rem;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
border-right: 1px solid #D4D4D4;
border-bottom: 1px solid #D4D4D4;
}
.mounting-item h4 {
color: #0093D3;
font-size: 9.6rem;
font-style: normal;
font-weight: 600;
line-height: normal;
margin-bottom: 3rem;
}
.mounting-item span {
color: #070707;
font-size: 2rem;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.mounting-item p {
color: #4B5557;
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: 150%;
}
.mounting-item:nth-child(3n) {
border-right: none;
}
.mounting-item:nth-child(4n), .mounting-item:nth-child(5n), .mounting-item:nth-child(6n) {
border-bottom: none;
}
@media screen and (max-width: 992px) {
.mounting {
margin-bottom: 5.1rem;
}
.mounting-container {
gap: 1.6rem;
}
.title span {
font-size: 2rem;
letter-spacing: 0.06rem;
}
.mounting-row {
grid-template-columns: repeat(1, 1fr);
gap: 1.6rem;
}
.mounting-column {
gap: 1.6rem;
}
.mounting-block {
align-items: center;
}
.mounting-block ul {
align-items: flex-start;
}
.mounting-block p, .mounting-block span {
text-align: center;
}
.mounting-block li {
text-align: left;
}
.mounting-main {
grid-template-columns: repeat(1, 1fr);
}
.mounting-item {
align-items: center;
border-right: none;
}
.mounting-item h4 {
text-align: center;
}
.mounting-item span {
text-align: center;
}
.mounting-item p {
text-align: center;
}
.mounting-item:nth-child(4n), .mounting-item:nth-child(5n), .mounting-item:nth-child(6n) {
border-bottom: 1px solid #D4D4D4;
}
.mounting-item:last-child {
border-bottom: none;
}
}
/* mounting_needed */
.mounting_needed {
margin-bottom: 10.9rem;
position: relative;
padding-top: 5.4rem;
}
.mounting_needed-container {
display: flex;
}
.mounting_needed-main {
display: flex;
flex-direction: column;
gap: 5.7rem;
max-width: 58.5rem;
}
.mounting_needed-column {
display: flex;
flex-direction: column;
padding-left: 3rem;
}
.mounting_needed-item {
display: flex;
padding: 3rem;
flex-direction: column;
align-items: flex-start;
gap: 4rem;
background: #FFF;
}
.mounting_needed-item span {
color: #0093D3;
font-size: 12.8rem;
font-style: normal;
font-weight: 600;
line-height: 8rem;
}
.mounting_needed-item p {
color: #070707;
font-size: 2rem;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.mounting_needed-img {
width: 70.5rem;
height: 78.8rem;
object-fit: cover;
position: absolute;
right: 0;
top: 0;
}
.mounting_needed-block {
position: absolute;
z-index: 2;
right: 0;
top: 61rem;
background: #F7F7F7;
padding: 8.2rem 8.9rem 11rem 9rem;
width: 100%;
max-width: 43.9rem;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4rem;
}
.mounting_needed-block img {
width: 8rem;
}
.mounting_needed-block p {
color: #070707;
font-size: 2.4rem;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.mounting_needed-link {
background: #0093D3;
padding: 1.6rem;
color: #FFF;
text-align: center;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.048rem;
}
.mounting_needed-img.mob {
display: none;
}
@media screen and (max-width: 992px) {
.mounting_needed {
margin-bottom: 7.8rem;
padding-top: 5.4rem;
}
.mounting_needed-container {
flex-direction: column;
gap: 5.6rem;
}
.mounting_needed-img.mob {
display: block;
}
.mounting_needed-main {
gap: 1.6rem;
max-width: none;
}
.mounting_needed-column {
padding-left: 0;
}
.mounting_needed-item {
align-items: center;
}
.mounting_needed-item span {
text-align: center;
}
.mounting_needed-item p {
text-align: center;
}
.mounting_needed-img {
width: 100vw;
height: 21rem;
position: relative;
display: none;
margin-left: -1.6rem;
}
.mounting_needed-block {
position: relative;
padding: 4.8rem;
top: auto;
max-width: none;
align-items: center;
margin-top: -4rem;
}
.mounting_needed-block p {
text-align: center;
}
}
/* installation */
.installation {
margin-bottom: 5.6rem;
}
.installation-container {
display: flex;
flex-direction: column;
gap: 5.6rem;
}
.installation-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 3rem;
}
.installation-block {
display: flex;
padding: 3rem;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 1.7rem;
background: #F7F7F7;
}
.installation-block img {
width: 4rem;
}
.installation-block p, .installation-block li {
color: #061C3D;
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: 150%;
opacity: 0.8;
}
.installation-block span {
color: #061C3D;
font-size: 2rem;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.installation-block ol, .installation-block ul {
margin: 0;
padding: 0;
padding-left: 2.5rem;
display: flex;
flex-direction: column;
}
.installation-main {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.installation-item {
display: flex;
padding: 3rem;
flex-direction: column;
align-items: flex-start;
gap: 4rem;
border-right: 1px solid #D4D4D4;
background: #FFF;
}
.installation-item:nth-child(2n) {
border-right: none;
}
.installation-item h4 {
color: #0093D3;
font-size: 9.6rem;
font-style: normal;
font-weight: 600;
line-height: 8rem;
}
.installation-item span {
color: #070707;
font-size: 2rem;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.installation-item p, .installation-item li {
color: #4B5557;
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: 150%;
}
.installation-item ol, .installation-item ul {
margin: 0;
padding: 0;
padding-left: 2.5rem;
display: flex;
flex-direction: column;
}
.installation-item .price {
margin-top: auto;
}
.installation-link {
color: #FFF;
text-align: center;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.048rem;
padding: 1.6rem;
background: #0093D3;
}
@media screen and (max-width: 992px) {
.installation {
margin-bottom: 5.6rem;
}
.installation-container {
display: flex;
flex-direction: column;
gap: 5.6rem;
}
.installation-row {
grid-template-columns: repeat(1, 1fr);
gap: 3rem;
}
.installation-block {
display: flex;
padding: 3rem;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 1.7rem;
background: #F7F7F7;
}
.installation-block img {
width: 4rem;
}
.installation-block p, .installation-block li {
color: #061C3D;
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: 150%;
opacity: 0.8;
}
.installation-block span {
color: #061C3D;
font-size: 2rem;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.installation-block ol, .installation-block ul {
margin: 0;
padding: 0;
padding-left: 2.5rem;
display: flex;
flex-direction: column;
}
.installation-main {
display: grid;
grid-template-columns: repeat(1, 1fr);
}
.installation-item {
display: flex;
padding: 3rem;
flex-direction: column;
align-items: flex-start;
gap: 4rem;
border-right: 1px solid #D4D4D4;
background: #FFF;
}
.installation-item:nth-child(2n) {
border-right: none;
}
.installation-item h4 {
color: #0093D3;
font-size: 9.6rem;
font-style: normal;
font-weight: 600;
line-height: 8rem;
}
.installation-item span {
color: #070707;
font-size: 2rem;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.installation-item p, .installation-item li {
color: #4B5557;
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: 150%;
}
.installation-item ol, .installation-item ul {
margin: 0;
padding: 0;
padding-left: 2.5rem;
display: flex;
flex-direction: column;
}
.installation-item .price {
margin-top: auto;
}
.installation-link {
color: #FFF;
text-align: center;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.048rem;
padding: 1.6rem;
background: #0093D3;
}
}
/* banner-consumables */
.banner-consumables .banner-title {
max-width: 68.2rem;
margin: 0;
}
.banner-consumables .banner-container {
padding-bottom: 16.4rem;
}
@media screen and (max-width: 992px) {
.banner-consumables .banner-container {
padding-bottom: 0;
}
}
/* consumables */
.consumables {
margin-bottom: 17.8rem;
}
.consumables-container ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3rem;
}
.consumables-container-2 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3rem;
}
@media screen and (max-width: 992px) {
.consumables {
margin-bottom: 7.7rem;
}
.consumables-container ul {
grid-template-columns: repeat(1, 1fr);
gap: 1.6rem;
}
.consumables-container-2 {
grid-template-columns: repeat(1, 1fr);
gap: 1.6rem;
}
}
/* banner-universal-systems */
.banner-universal-systems .banner-container {
padding-bottom: 13.5rem;
}
@media screen and (max-width: 992px) {
.banner-universal-systems .banner-container {
padding-bottom: 0;
}
}
/* universal_systems */
.universal_systems {
margin-bottom: 15.1rem;
}
.universal_systems-container {
display: flex;
flex-direction: column;
gap: 5.6rem;
}
.universal_systems-name {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: flex-start;
padding-left: 4rem;
border-left: 1rem solid #0093D3;
}
.universal_systems .title {
border-left: none;
padding: 0;
}
.universal_systems-description {
color: #4B5557;
font-size: 2rem;
font-style: normal;
font-weight: 400;
line-height: 150%;
letter-spacing: 0.06rem;
}
.universal_systems-link {
color: #FFF;
text-align: center;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.048rem;
padding: 1.6rem;
background: #0093D3;
}
.universal_systems-main {
display: flex;
flex-direction: column;
gap: 2.4rem;
}
.universal_systems-title {
color: #070707;
font-size: 3.6rem;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 0.108rem;
}
.universal_systems-content {
display: flex;
flex-direction: column;
gap: 3rem;
}
.universal_systems-top {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
border-radius: 0.8rem;
background: #061C3D;
padding: 2.4rem 3rem;
}
.universal_systems-block {
display: flex;
flex-direction: column;
gap: 1rem;
}
.universal_systems-block__row {
display: flex;
align-items: center;
gap: 1rem;
}
.universal_systems-block__row img {
width: 2.4rem;
}
.universal_systems-block__row p {
color: #FFF;
font-size: 2rem;
font-style: normal;
font-weight: 700;
line-height: 150%;
}
.universal_systems-products {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3rem;
}
.universal_systems-block > p {
color: #9AA7AB;
font-size: 2rem;
font-style: normal;
font-weight: 400;
line-height: 150%;
}
.universal_systems-block > span {
color: #FFF;
font-size: 2.4rem;
font-style: normal;
font-weight: 700;
line-height: normal;
}
@media screen and (max-width: 992px) {
.universal_systems {
margin-bottom: 8.8rem;
}
.universal_systems-container {
gap: 4.9rem;
}
.universal_systems-name {
gap: 1.6rem;
align-items: center;
padding-left: 0;
border-left: none;
}
.universal_systems .title {
border-left: none;
padding: 0;
}
.universal_systems-description {
font-size: 1.6rem;
text-align: center;
letter-spacing: 0.048rem;
}
.universal_systems-main {
gap: 2.3rem;
}
.universal_systems-title {
font-size: 2.4rem;
text-align: center;
letter-spacing: 0.072rem;
}
.universal_systems-top {
grid-template-columns: repeat(2, 1fr);
gap: 0.8rem;
background: transparent;
padding: 0;
}
.universal_systems-block {
padding: 1.6rem;
border-radius: 0.8rem;
background: #061C3D;
gap: 1.6rem;
}
.universal_systems-block__row p {
font-size: 1.6rem;
}
.universal_systems-products {
grid-template-columns: repeat(1, 1fr);
gap: 1.2rem;
}
.universal_systems-block > span {
font-size: 2rem;
}
}
/* add_system */
.add_system {
background: #F7F7F7;
padding: 8rem 0;
margin-bottom: 17.3rem;
}
.add_system-container {
display: flex;
flex-direction: column;
gap: 5.6rem;
}
.add_system-main {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3rem;
}
.add_system .product {
background: #FFF;
}
.product-description {
color: #4B5557;
font-size: 1.4rem;
font-style: normal;
font-weight: 400;
line-height: 150%;
}
@media screen and (max-width: 992px) {
.add_system {
padding: 3rem 0;
margin-bottom: 10rem;
}
.add_system-container {
gap: 2.3rem;
}
.add_system-main {
grid-template-columns: repeat(1, 1fr);
gap: 1.2rem;
}
.product-description {
text-align: center;
}
}
/* banner-water */
.banner-water {
margin-bottom: 0;
}
.banner-water .banner-container {
padding-bottom: 6.2rem;
}
.banner-water .banner-title {
max-width: 78.8rem;
}
.banner-column {
display: flex;
flex-direction: column;
gap: 1.2rem;
margin-bottom: 3.6rem;
max-width: 78.8rem;
}
.banner-row {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.banner-row img {
width: 2.4rem;
min-width: 2.4rem;
}
.banner-row p {
color: #FFF;
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: 150%;
letter-spacing: 0.048rem;
}
@media screen and (max-width: 992px) {
.banner-water .banner-container {
padding-bottom: 0;
}
.banner-water .banner-title br {
display: none;
}
}
/* mounting_systems */
.mounting_systems {
background: #F7F7F7;
padding: 16.7rem 0 14.2rem 0;
position: relative;
margin-bottom: 14.4rem;
overflow: hidden;
}
.mounting_systems::before {
content: '';
background-image: url('../images/mounting_systems.svg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 68.5rem;
height: 57.8rem;
position: absolute;
left: 0;
bottom: 0;
}
.mounting_systems-container {
display: flex;
justify-content: flex-end;
}
.mounting_systems-img {
position: absolute;
z-index: 2;
width: 57.5rem;
left: 12.6rem;
bottom: 0;
}
.mounting_systems-main {
width: 100%;
max-width: 58.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
align-items: flex-start;
position: relative;
padding-left: 4rem;
}
.mounting_systems-main::before {
content: '';
display: flex;
width: 1rem;
height: 9.6rem;
left: 0;
top: 0;
background: #0093D3;
position: absolute;
}
.mounting_systems .title {
padding: 0;
border: none;
}
.mounting_systems-description {
color: #4B5557;
font-size: 2rem;
font-style: normal;
font-weight: 400;
line-height: 150%;
letter-spacing: 0.06rem;
}
.mounting_systems-buttons {
display: flex;
gap: 1rem;
}
.mounting_systems-button {
padding: 1.6rem;
background: #0093D3;
color: #FFF;
text-align: center;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.048rem;
}
.mounting_systems-button-2 {
padding: 1.6rem;
border: 1px solid #D4D4D4;
background: #FFF;
color: #0093D3;
text-align: center;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.048rem;
}
@media screen and (max-width: 992px) {
.mounting_systems {
padding: 7.45rem 0;
margin-bottom: 6.9rem;
}
.mounting_systems::before {
display: none;
}
.mounting_systems-img {
display: none;
}
.mounting_systems-main {
max-width: none;
gap: 1.6rem;
align-items: center;
padding-left: 0;
}
.mounting_systems-main::before {
display: none;
}
.mounting_systems-description {
text-align: center;
}
.mounting_systems-buttons {
flex-direction: column;
width: 100%;
max-width: 29.7rem;
}
}
/* water_steps */
.water_steps {
margin-bottom: 10.3rem;
}
.water_steps-container {
display: flex;
flex-direction: column;
gap: 5.6rem;
}
.water_steps-main {
display: flex;
flex-direction: column;
gap: 3rem;
}
.water_steps-content {
display: flex;
flex-direction: column;
gap: 10.6rem;
padding: 5rem;
background: #F7F7F7;
}
.water_steps-name {
display: flex;
justify-content: space-between;
align-items: center;
}
.water_steps-title {
color: #061C3D;
font-size: 2.4rem;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: 0.072rem;
}
.water_steps-title span {
color: #0093D3;
font-size: 1.6rem;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: 0.048rem;
}
.water_steps-button {
background: #0093D3;
padding: 1.6rem;
color: #FFF;
text-align: center;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.048rem;
}
.water_steps-column {
display: flex;
flex-direction: column;
gap: 3.4rem;
}
.water_steps-row {
display: flex;
align-items: flex-start;
gap: 2.4rem;
align-self: stretch;
}
.water_steps-block {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
flex: 1 0 0;
position: relative;
}
.water_steps-block-punkt {
position: absolute;
width: 4.1rem;
height: 4.1rem;
top: -7.55rem;
}
.water_steps-block-punkt img {
width: 100%;
height: 100%;
object-fit: cover;
position: relative;
z-index: 2;
}
.water_steps-info {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 1.2rem 1.6rem;
border-radius: 0.8rem;
background: rgba(234, 249, 255, 0.46);
}
.water_steps-info svg {
width: 2.4rem;
height: auto;
}
.water_steps-info p {
color: #0093D3;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.water_steps-block img {
width: 4rem;
height: 4rem;
margin-bottom: 1.3rem;
}
.water_steps-block span {
color: #061C3D;
text-align: center;
font-size: 1.6rem;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.water_steps-block p, .water_steps-block li {
color: #061C3D;
text-align: center;
font-size: 1.4rem;
font-style: normal;
font-weight: 400;
line-height: 150%;
opacity: 0.8;
}
.water_steps-block ul, .water_steps-block ol {
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
padding: 0;
}
.water_steps-row {
position: relative;
}
.water_steps-row::before {
content: '';
background: rgba(70, 199, 255, 0.53);
height: 0.1rem;
width: 100%;
top: -5.45rem;
left: 0;
position: absolute;
display: flex;
}
.water_steps-block:first-child .water_steps-block-punkt::before {
content: '';
left: -197%;
position: absolute;
background: #F7F7F7;
width: 224%;
height: 1rem;
top: 2rem;
}
.water_steps-block:last-child .water_steps-block-punkt::before {
content: '';
right: -197%;
position: absolute;
background: #F7F7F7;
width: 224%;
height: 1rem;
top: 2rem;
}
@media screen and (max-width: 992px) {
.water_steps {
margin-bottom: 6.8rem;
}
.water_steps-container {
gap: 1.6rem;
}
.water_steps-main {
gap: 1.6rem;
}
.water_steps-content {
gap: 3rem;
padding: 3rem;
}
.water_steps-name {
gap: 1rem;
flex-direction: column;
}
.water_steps-title {
text-align: center;
}
.water_steps-row {
flex-direction: column;
align-items: center;
}
.water_steps-block-punkt {
display: none;
}
.water_steps-info {
align-items: flex-start;
}
.water_steps-info svg {
min-width: 2.4rem;
}
.water_steps-row::before {
display: none;
}
.water_steps-block:first-child .water_steps-block-punkt::before {
display: none;
}
.water_steps-block:last-child .water_steps-block-punkt::before {
display: none;
}
.water_steps-block ul, .water_steps-block ol {
padding-left: 2.5rem;
}
}
/* water_needed */
.water_needed {
margin-bottom: 11.4rem;
}
.water_needed .mounting_needed-main {
gap: 1.8rem;
}
.water_needed .mounting_needed-item {
gap: 1rem;
}
.water_needed .mounting_needed-item span {
margin-bottom: 3rem;
}
.water_needed .mounting_needed-item > p, .water_needed .mounting_needed-item li {
color: #4B5557;
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: 150%;
}
.water_needed .mounting_needed-item .water_needed-title {
color: #070707;
font-size: 2rem;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.water_needed .mounting_needed-item ul {
padding-left: 2.5rem;
}
.water_needed .title {
max-width: 51rem;
}
@media screen and (max-width: 992px) {
.water_needed {
margin-bottom: 6.9rem;
}
.water_needed .mounting_needed-main {
gap: 1.6rem;
}
.water_needed .mounting_needed-item > p, .water_needed .mounting_needed-item li {
text-align: center;
}
.water_needed .mounting_needed-item .water_needed-title {
text-align: center;
}
.water_needed .mounting_needed-item ul {
display: flex;
flex-direction: column;
align-items: center;
}
.water_needed .title {
max-width: none;
}
}
/* request */
.request {
background: #F7F7F7;
display: flex;
flex-direction: column;
gap: 5.5rem;
padding: 3rem 0 12.5rem 0;
}
.request-container {
display: flex;
flex-direction: column;
gap: 1rem;
}
.request .title {
max-width: 54rem;
}
.request-description {
color: #070707;
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.048rem;
padding-left: 5rem;
max-width: 54rem;
}
@media screen and (max-width: 992px) {
.request {
gap: 5.7rem;
padding: 1.6rem 0 8.7rem 0;
margin-bottom: 4.1rem;
}
.request-container {
gap: 1.6rem;
}
.request .title {
max-width: none;
}
.request-description {
text-align: center;
padding-left: 0;
max-width: none;
}
}
/* quiz */
.quiz {
margin-top: -6rem;
margin-bottom: 7.5rem;
}
.quiz-main {
padding: 8rem;
background: #061C3D;
display: flex;
min-height: 67.2rem;
}
.quiz-slide {
display: none;
flex-direction: column;
gap: 5rem;
width: 100%;
}
.quiz-slide.active {
display: flex;
}
.quiz-name {
display: flex;
flex-direction: column;
gap: 1rem;
}
.quiz-number {
color: #46C7FF;
font-size: 1.4rem;
font-style: normal;
font-weight: 500;
line-height: 150%;
}
.quiz-title {
color: #FFF;
font-size: 4rem;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.quiz-content {
display: flex;
}
.quiz-row {
display: flex;
gap: 3rem;
align-self: stretch;
width: 100%;
}
.quiz-block {
position: relative;
display: flex;
flex: 1 0 0;
}
.quiz-block label {
display: flex;
padding: 3rem;
flex-direction: column;
align-items: flex-start;
gap: 2.4rem;
flex: 1 0 0;
background: rgba(255, 255, 255, 0.06);
position: relative;
cursor: pointer;
}
.quiz-block label img {
width: 8rem;
height: 8rem;
}
.quiz-block input {
position: absolute;
visibility: hidden;
}
.quiz-source-check {
position: absolute;
right: 3rem;
top: 3.7rem;
width: 2.4rem;
height: 2.4rem;
border: 0.2rem solid #B7D9F8;
border-radius: 100%;
transition: .3s all;
}
.quiz-block input:checked+label .quiz-source-check {
background-image: url('../images/Radio.svg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border: none;
}
.quiz-source {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.quiz-source span {
color: #FFF;
font-size: 2rem;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.quiz-source p {
color: #FFF;
font-size: 1.4rem;
font-style: normal;
font-weight: 400;
line-height: 150%;
max-width: 23.1rem;
}
.quiz-bottom {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
}
.quiz-buttons {
display: flex;
gap: 1.2rem;
}
.quiz-next {
background: #0093D3;
width: 15.5rem;
padding: 1.6rem;
color: #FFF;
text-align: center;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.048rem;
}
.quiz-callback {
color: #FFF;
text-align: center;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.048rem;
padding: 1.6rem;
border: 1px solid rgba(212, 212, 212, 0.37);
}
.quiz-prev {
color: #FFF;
text-align: center;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.048rem;
width: 15.5rem;
padding: 1.6rem;
border: 1px solid rgba(212, 212, 212, 0.37);
}
.quiz-checkbox-column {
display: flex;
flex-direction: column;
gap: 1.2rem;
width: 100%;
}
.quiz-checkbox-row {
display: flex;
align-self: stretch;
gap: 1.2rem;
}
.quiz-checkbox {
display: flex;
flex: 1 0 0;
position: relative;
}
.quiz-checkbox input {
position: absolute;
visibility: hidden;
}
.quiz-checkbox label {
position: relative;
display: flex;
padding: 3rem;
align-items: flex-start;
gap: 1rem;
flex: 1 0 0;
background: rgba(255, 255, 255, 0.06);
cursor: pointer;
}
.quiz-checkbox-check {
transition: .3s all;
width: 2.4rem;
height: 2.4rem;
border-radius: 0.5rem;
border: 0.2rem solid #B7D9F8;
}
.quiz-checkbox label p {
color: #FFF;
font-size: 2rem;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.quiz-checkbox input:checked+label .quiz-checkbox-check {
background-image: url('../images/quiz.svg');
background-position: center;
background-repeat: no-repeat;
background-size: 2.4rem;
border-color: #46C7FF;
}
.quiz-checkbox-2 .quiz-checkbox-check {
border-radius: 100%;
}
.quiz-checkbox-2 input:checked+label .quiz-checkbox-check {
background-image: url('../images/Radio.svg');
border-color: #46C7FF;
}
.quiz-data {
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 3rem;
}
.quiz-data-column {
display: flex;
flex-direction: column;
gap: 3rem;
}
.quiz-data-block {
display: flex;
flex-direction: column;
gap: 1rem;
}
.quiz-data-block label {
color: #D4D8DE;
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.048rem;
}
.quiz-data-block input {
color: #000;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.048rem;
width: 100%;
padding: 1.6rem;
background: #F7F7F7;
}
.quiz-data-block input::placeholder {
color: #9EA4AD;
}
.quiz-data-question {
background: rgba(255, 255, 255, 0.06);
padding: 3rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.quiz-data-question > p {
color: #FFF;
font-size: 2rem;
font-style: normal;
font-weight: 400;
line-height: 150%;
}
.quiz-data-question__main {
display: flex;
flex-direction: column;
gap: 2.4rem;
align-items: flex-start;
}
.quiz-data-question__block {
position: relative;
}
.quiz-data-question__block input {
position: absolute;
visibility: hidden;
}
.quiz-data-question__block label {
position: relative;
display: flex;
align-items: center;
gap: 1rem;
cursor: pointer;
}
.quiz-data-check {
transition: .3s all;
width: 2.4rem;
height: 2.4rem;
border-radius: 100%;
border: 0.2rem solid #B7D9F8;
}
.quiz-data-question__block label p {
color: #FFF;
font-size: 2rem;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.quiz-data-question__block input:checked+label .quiz-data-check {
background-image: url('../images/Radio.svg');
background-position: center;
background-repeat: no-repeat;
background-size: 2.4rem;
border-color: #46C7FF;
}
.quiz-file {
width: 100%;
position: relative;
}
.quiz-file input {
position: absolute;
visibility: hidden;
}
.quiz-file label {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.8rem;
cursor: pointer;
padding: 3rem;
border: 1px dashed #FFF;
background: rgba(255, 255, 255, 0.06);
}
.quiz-file label img {
width: 4.1rem;
margin-bottom: 1.6rem;
}
.quiz-file label h4 {
color: #FFF;
text-align: center;
font-size: 2rem;
font-style: normal;
font-weight: 400;
line-height: 143%;
letter-spacing: 0.017rem;
}
.quiz-file label h4 span {
color: #46C7FF;
font-weight: 500;
}
.quiz-file label p {
color: rgba(255, 255, 255, 0.60);
text-align: center;
font-size: 1.4rem;
font-style: normal;
font-weight: 400;
line-height: 166%;
letter-spacing: 0.04rem;
max-width: 45.1rem;
}
.quiz-submit {
padding: 1.6rem;
background: #0093D3;
color: #FFF;
text-align: center;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.048rem;
}
.popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999999;
}
.popup-fon {
background: rgba(0, 0, 0, 0.50);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.popup-quiz__main {
position: relative;
margin: auto;
padding: 5rem;
width: 100%;
max-width: 71.3rem;
background: #FFF;
display: flex;
flex-direction: column;
gap: 5rem;
}
.popup-quiz__name {
display: flex;
align-items: center;
justify-content: space-between;
}
.popup-quiz__title {
color: #061C3D;
font-size: 3.2rem;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.popup-close {
display: flex;
}
.popup-close svg {
width: 3rem;
height: auto;
}
.popup-quiz__form {
display: flex;
flex-direction: column;
gap: 1.4rem;
}
.popup-quiz__block {
display: flex;
flex-direction: column;
gap: 1rem;
}
.popup-quiz__block input {
color: #000;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.048rem;
padding: 1.6rem;
background: #F7F7F7;
width: 100%;
}
.popup-quiz__block input::placeholder {
color: #9EA4AD;
}
.popup-quiz__block textarea {
color: #000;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.048rem;
padding: 1.6rem;
background: #F7F7F7;
width: 100%;
height: 8.7rem;
min-height: 8.7rem;
}
.popup-quiz__block textarea::placeholder {
color: #9EA4AD;
}
.popup-quiz__block select {
color: #000;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.048rem;
padding: 1.6rem;
background: #F7F7F7;
width: 100%;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url('../images/select.svg');
background-position: center right 1.6rem;
background-repeat: no-repeat;
background-size: 2.4rem;
}
.popup-quiz__block label {
color: #070707;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.048rem;
}
.popup-quiz__submit {
padding: 1.6rem;
background: #0093D3;
color: #FFF;
text-align: center;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.048rem;
}
@media screen and (max-width: 992px) {
.quiz {
margin-top: 0;
margin-bottom: 6.2rem;
}
.quiz-container {
max-width: none;
}
.quiz-main {
padding: 4.8rem 2.4rem;
min-height: auto;
}
.quiz-slide {
gap: 2.4rem;
}
.quiz-title {
font-size: 2.4rem;
}
.quiz-row {
flex-direction: column;
}
.quiz-source-check {
right: 3rem;
top: 3rem;
}
.quiz-bottom {
flex-direction: column;
gap: 1.2rem;
}
.quiz-buttons {
width: 100%;
}
.quiz-next {
width: 100%;
}
.quiz-callback {
width: 100%;
}
.quiz-prev {
width: 100%;
}
.quiz-checkbox-row {
flex-direction: column;
}
.quiz-data {
grid-template-columns: repeat(1, 1fr);
gap: 1.2rem;
}
.quiz-data-question {
padding: 0.9rem 3rem;
}
.quiz-slide-6 .quiz-prev {
width: auto;
padding: 1.6rem 2.8rem;
}
.popup-quiz__main {
padding: 3.4rem;
max-width: 34.3rem;
gap: 2.4rem;
}
.popup-quiz__name {
gap: 1rem;
}
.popup-quiz__title {
font-size: 1.8rem;
}
.popup-quiz__close svg {
min-width: 3rem;
}
.popup-quiz__block input {
font-size: 1.4rem;
letter-spacing: 0.042rem;
}
.popup-quiz__block textarea {
font-size: 1.4rem;
letter-spacing: 0.042rem;
}
.popup-quiz__block select {
font-size: 1.4rem;
letter-spacing: 0.042rem;
}
.popup-quiz__block label {
font-size: 1.4rem;
letter-spacing: 0.042rem;
}
}
/* stages_purification */
.stages_purification {
margin-bottom: 16rem;
}
.stages_purification-container {
display: flex;
flex-direction: column;
gap: 5.6rem;
}
.stages_purification-name {
display: flex;
flex-direction: column;
gap: 1rem;
}
.stages_purification-description {
color: #070707;
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.048rem;
padding-left: 5rem;
}
.stages_purification-main {
position: relative;
}
.stages_purification-img {
position: relative;
max-width: 85.8rem;
margin: 0 auto;
}
.stages_purification-img > img {
width: 100%;
}
.stages_purification-punkt {
position: absolute;
display: flex;
align-items: center;
}
.stages_purification-punkt.hint .stages_purification-punkt__button {
opacity: 0;
}
.stages_purification-punkt__button {
display: flex;
}
.stages_purification-punkt__button svg{
width: 4.6rem;
height: auto;
}
.stages_purification-punkt__content {
position: absolute;
display: none;
border-radius: 1.6rem;
background: rgba(0, 0, 0, 0.80);
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
padding: 3rem;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 1rem;
width: 33.6rem;
left: 100%;
margin-left: 1rem;
z-index: 9;
}
.stages_purification-punkt__content span {
color: #FFF;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.048rem;
}
.stages_purification-punkt__content p, .stages_purification-punkt__content li {
color: #FFF;
font-size: 1.4rem;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.042rem;
}
.stages_purification-punkt__content ul {
display: flex;
flex-direction: column;
padding-left: 2.5rem;
}
.stages_purification-content {
position: absolute;
bottom: 3rem;
right: 0;
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
max-width: 43.7rem;
}
.stages_purification-content-2 {
position: relative;
bottom: auto;
}
.stages_purification-content-2::-webkit-scrollbar {
width: 1rem;
}
.stages_purification-content-2::-webkit-scrollbar-track {
background: #f1f1f1;
}
.stages_purification-content-2::-webkit-scrollbar-thumb {
background: #0093D3;
transition: .3s all;
}
.stages_purification-content-2::-webkit-scrollbar-thumb:hover {
background: #061C3D;
}
.stages_purification-button {
background: #0093D3;
padding: 1.6rem;
color: #FFF;
text-align: center;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.048rem;
margin-top: 1.4rem;
}
.stages_purification-content span {
color: #070707;
font-size: 2rem;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.stages_purification-content p {
color: #070707;
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: 150%;
margin-bottom: 1.4rem;
}
.stages_purification-content ul {
display: flex;
flex-direction: column;
padding-left: 2.5rem;
}
.stages_purification-content li {
color: #070707;
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: 150%;
}
.stages_purification-punkt:hover .stages_purification-punkt__content {
display: flex;
}
@media screen and (max-width: 992px) {
.stages_purification {
margin-bottom: 7rem;
}
.stages_purification-container {
gap: 3.4rem;
}
.stages_purification-name {
gap: 1.6rem;
}
.stages_purification-description {
text-align: center;
padding-left: 0;
}
.stages_purification-img {
position: relative;
}
.stages_purification-punkt__button svg{
width: 1.5rem;
}
.stages_purification-punkt__content {
position: relative;
display: none;
width: 100%;
left: 0;
margin-left: 0;
}
.stages_purification-punkt__content span {
font-size: 1.4rem;
letter-spacing: 0.042rem;
}
.stages_purification-punkt__content p, .stages_purification-punkt__content li {
font-size: 1.2rem;
letter-spacing: 0.036rem;
}
.stages_purification-punkt__content ul {
padding-left: 2rem;
}
.stages_purification-content {
position: relative;
bottom: 0;
max-width: none;
margin-top: 2.6rem;
}
.stages_purification-content span {
font-size: 1.6rem;
}
.stages_purification-content p {
font-size: 1.4rem;
}
.stages_purification-content ul {
padding-left: 2rem;
}
.stages_purification-content li {
font-size: 1.4rem;
}
.stages_purification-punkt:hover .stages_purification-punkt__content {
display: none;
}
.stages_purification-punkt__content.active {
display: flex;
margin-top: 3.5rem;
}
}
/* news_detail */
.news_detail {
margin-bottom: 10rem;
}
.news_detail-container {
display: flex;
flex-direction: column;
gap: 6.2rem;
}
.news_detail-main__container {
background: #F7F7F7;
padding: 3.5rem 0 8rem 0;
}
.news_detail-main {
display: flex;
flex-direction: column;
gap: 7.3rem;
}
.news_detail-name {
display: flex;
flex-direction: column;
gap: 1rem;
}
.news_detail-name > p {
color: #070707;
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.048rem;
padding-left: 5rem;
}
.news_detail-name > span {
padding-left: 5rem;
color: #9EA4AD;
font-size: 2rem;
font-style: normal;
font-weight: 500;
line-height: 150%;
text-transform: uppercase;
opacity: 0.8;
}
.news_detail-sosial {
padding-left: 5rem;
display: flex;
gap: 1.2rem;
}
.news_detail-sosial a {
border-radius: 0.5rem;
background: rgba(0, 147, 211, 0.10);
padding: 1.2rem;
display: flex;
}
.news_detail-sosial a svg {
width: 2rem;
height: auto;
}
.news_detail-content {
display: flex;
flex-direction: column;
}
.news_detail-content p {
line-height: 150%;
}
.news_detail-content img {
width: 100%;
object-fit: cover;
margin: 3rem 0;
}
.news_detail-news {
background: #F7F7F7;
padding: 12rem 0;
margin: 0;
}
@media screen and (max-width: 992px) {
.news_detail {
margin-bottom: 5rem;
}
.news_detail-container {
gap: 3rem;
}
.news_detail-main__container {
padding: 3rem 0 4rem 0;
}
.news_detail-main {
gap: 2rem;
}
.news_detail-name > p {
text-align: center;
padding-left: 0;
}
.news_detail-name > span {
padding-left: 0;
font-size: 1.6rem;
text-align: center;
}
.news_detail-sosial {
padding-left: 0;
justify-content: center;
}
.news_detail-content img {
margin: 2rem 0;
}
.news_detail-news {
padding: 6rem 0;
}
}
/* news_page */
.news_page {
margin-bottom: 8rem;
}
.news_page-container {
display: flex;
flex-direction: column;
gap: 4rem;
}
.news_page-main-all {
background: #F7F7F7;
padding: 3rem 0 6.4rem 0;
}
.news_page-main {
display: flex;
flex-direction: column;
gap: 1rem;
}
.news_page-main .title {
margin-top: 4rem;
max-width: 58.5rem;
}
.news_page-tabs {
display: flex;
flex-wrap: wrap;
gap: 2rem;
padding-left: 5rem;
}
.news_page-tab {
font-size: 1.6rem;
line-height: normal;
color: #070707;
padding: 1.6rem;
background: #FFFFFF;
border-radius: 0.8rem;
}
.news_page-tab.active {
background: #0093D3;
color: #FFFFFF;
}
.news_page-content {
display: flex;
flex-wrap: wrap;
gap: 3rem;
}
.news_page-content .news-item {
width: 100%;
max-width: 38rem;
}
.news_page-content .news-item:nth-child(1) {
max-width: 78.9rem;
}
.news_page-content .news-item:nth-child(3) {
max-width: 58.5rem;
}
.news_page-content .news-item:nth-child(4) {
max-width: 58.5rem;
}
@media screen and (max-width: 992px) {
.news_page {
margin-bottom: 5.5rem;
}
.news_page-container {
gap: 2rem;
}
.news_page-main-all {
padding: 1.6rem 0;
}
.news_page-main {
gap: 2.4rem;
}
.news_page-tabs {
gap: 0.8rem;
padding-left: 0;
justify-content: center;
}
.news_page-tab {
font-size: 1.2rem;
}
.news_page-content {
gap: 1.6rem;
}
.news_page-content .news-item {
max-width: none;
}
.news_page-content .news-item:nth-child(1) {
max-width: none;
}
.news_page-content .news-item:nth-child(3) {
max-width: none;
}
.news_page-content .news-item:nth-child(4) {
max-width: none;
}
}
/* header */
@media screen and (max-width: 992px) {
.product_page-images {
position: relative;
width: 100%;
margin-bottom: 3rem;
right: 0;
}
.product_page-swiper img {
height: 34rem;
}
.product_page-thumbs img {
height: 9.9rem;
}
.appointment-main_all {
flex-direction: column-reverse;
}
.appointment-img::before {
display: none;
}
.appointment-img {
display: block;
width: 100%;
min-width: auto;
margin: 0;
}
}
/* header */
@media screen and (max-width: 992px) {
}
/* hover */
.slider-prev:hover, .slider-next:hover {
background: #0093D3;
border-color: #0093D3;
}
.slider-prev:hover path, .slider-next:hover path {
fill: #FFF;
}
.footer-social a:hover {
background: #0093D3;
}
.questions-submit:hover, .contacts-button:hover, .contact_team-submit:hover, .selection-button:hover {
background: #061C3D;
}
.banner-link {
border: 0.1rem solid transparent;
}
.banner-link:hover {
border-color: rgba(212, 212, 212, 0.37);
color: #FFF;
background: transparent;
}
.header-bottom__container nav ul li a:hover, .header-second__block > a:hover {
color: #0093D3;
}
.header-bottom__container nav ul li.active a, .menu-mobile__menu ul li.active a {
color: #0093D3;
}
.header-second__link:hover {
background: #0093D3;
}
.product_page-quantity button:hover, .product_page-add:hover {
background: #0093D3;
}
.product_page-order {
border: 1px solid rgba(212, 212, 212, 0.37);
}
.product_page-order:hover {
border-color: rgba(212, 212, 212, 0.37);
color: #FFF;
background: transparent;
}
.stages_purification-button:hover, .appointment-button:hover, .popup-quiz__submit:hover {
background: #061C3D;
}
.quiz-callback:hover {
background: #0093D3;
}
.quiz-next {
border: 1px solid rgba(212, 212, 212, 0.37);
}
.quiz-next:hover {
border-color: rgba(212, 212, 212, 0.37);
color: #FFF;
background: transparent;
}
.product-add:hover {
background: #0093D3;
color: #FFF;
}
.product-title:hover {
color: #0093D3;
}
.product {
transition: .3s all;
}
.product:hover {
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.10);
}
.procedure-button:hover, .mounting_systems-button:hover, .water_steps-button:hover, .mounting_needed-link:hover {
background: #061C3D;
}
.procedure-item2__link {
border: 1px solid rgba(212, 212, 212, 0.37);
}
.procedure-item2__link:hover {
border-color: rgba(212, 212, 212, 0.37);
color: #FFF;
background: transparent;
}
.mounting_systems-button-2:hover {
background: #0093D3;
color: #FFF;
}
.banner-link-2:hover {
color: #FFF;
background: #0093D3;
}
.installation-link:hover {
background: #061C3D;
}
.footer-menu ul li a:hover {
color: #FFF;
}
.product-add.yes:hover {
background: #FFF;
color: #15B507;
}
.universal_systems-link:hover {
background: #061C3D;
}
.footer-links a:hover {
color: #FFF;
}
.news-wrap{
}
.news-wrap h2{
padding:0 0 0 40px;
border-left:10px solid #0093D3;
color:#000;
font-size:40px;
font-weight:700;
font-family: 'Inter';
margin:60px 0 0 0;
}
.news-wrap table{
border-collapse:collapse;
/*border:2px solid #0093D3;*/
width:100%;
margin:50px 0 0 0;
}
.news-wrap table td{
padding:10px;
/*border:2px solid #0093D3;*/
}
.news-wrap table tr:nth-child(even) td{
background:#fff;
}
.news-wrap table tr:nth-child(odd) td{
background:rgba(0,147,211,0.15);
}
.news-wrap table td p{
margin:0;
}
.news-wrap .d-flex h2{
margin:0;
}
.news-wrap h3{
padding:0;
color:#000;
font-size:30px;
font-weight:700;
font-family: 'Inter';
margin:30px 0 0 0;
}
.news-wrap p{
color:#000;
font-size:16px;
font-weight:400;
font-family: 'Inter';
margin:30px 0 0 0;
line-height:150%;
}
.news-wrap img{
margin:56px 0 0 0;
max-width:100%;
}
.news-wrap .d-flex img{
margin:0;
}
.news-wrap .d-flex ol{
padding:0;
}
.news-wrap .d-flex h3 + ol,
.news-wrap .d-flex p+ ol{
padding:30px 0 0 0;
}
.news-wrap ol {
list-style-type: none;
counter-reset: num;
margin:0;
padding:0;
display:flex;
flex-direction:column;
gap:32px;
padding:30px 0;
}
.news-wrap ol li {
position: relative;
margin: 0;
padding: 0 0 0 50px;
font-size:16px;
font-weight:400;
font-family: 'Inter';
}
.news-wrap ul {
list-style-type: none;
margin:0;
padding:0;
display:flex;
flex-direction:column;
gap:32px;
padding:30px 0 0 0;
}
.news-wrap ul li {
position: relative;
margin: 0;
padding: 8px 0 8px 50px;
font-size:16px;
font-weight:400;
font-family: 'Inter';
}
.news-wrap ul li:before {
content: '';
display: inline-block;
position: absolute;
width:40px;
height:40px;
left:0;
top:0;
background:url('../images/check.png') no-repeat;
color:#fff;
font-size:16px;
font-weight:600;
font-family: 'Inter';
}
.news-wrap ol li strong,
.news-wrap ol li b{
font-weight:600;
}
.news-wrap ol > li:before {
content: counter(num);
counter-increment: num;
display: inline-block;
position: absolute;
width:40px;
height:40px;
left:0;
top:0;
background:#0093D3;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:16px;
font-weight:600;
font-family: 'Inter';
}
.news-wrap ol li:after{
content:'';
top:40px;
width:40px;
height:36px;
background:#EBF9FF;
left:0;
position: absolute;
top:40px;
}
.news-wrap .d-flex{
display:flex;
gap:30px;
align-items:center;
margin:60px 0 0 0;
}
.news-wrap .d-flex div{
width:calc(50% - 15px);
}
.news-wrap .d-flex img{
max-width:585px;
flex:1;
}
.news-wrap .d-flex h3 + ol{
padding:30px 0 0 0;
}
.news-wrap blockquote{
margin:56px 0 0 0;
border:1px solid #0093D3;
padding:32px 32px 32px 96px;
background:#EBF9FF;
position:relative;
}
.news-wrap blockquote p{
font-size:16px;
color:#000;
font-size:16px;
font-weight:400;
font-family: 'Inter';
line-height:150%;
margin:0;
}
.news-wrap blockquote p + p{
margin:10px 0 0 0;
}
.news-wrap blockquote p b,
.news-wrap blockquote p strong{
font-size:18px;
font-weight:600;
}
.news-wrap blockquote::before{
content:'';
width:40px;
height:40px;
background:url('../images/check.png') no-repeat;
left:32px;
top:32px;
position:absolute;
}
.news-wrap blockquote::after{
content:'';
width:40px;
height:19px;
background:#fff;
left:32px;
top:72px;
position:absolute;
}
@media screen and (max-width: 640px) {
.d-flex{
flex-direction:column;
align-items: flex-start;
}
.news-wrap .d-flex div{
width:100%;
}
}
/*Автополив*/
.banner-autopoliv {
margin-bottom: 6.38rem;
height: 36.84rem;
position: relative;
}
.banner-autopoliv .banner-title{
max-width:73.92rem;
letter-spacing: 0.03em;
font-size:3.69rem;
margin:0;
}
.banner-autopoliv h1 + p{
font-weight: 400;
font-size: 1.2rem;
margin-top:1rem;
line-height: 150%;
letter-spacing: 0.03em;
color: #fff;
}
.banner-autopoliv .banner-container{
padding-bottom:7.3rem;
}
.banner-tabs{
margin-top:2.76rem;
display:flex;
justify-content:space-between;
gap:1.531rem;
}
.banner-tabs li{
display:flex;
align-items:center;
justify-content:center;
}
.banner-tabs li a{
font-weight: 600;
font-size: 1.1rem;
letter-spacing: 0.03em;
text-align: center;
color: #fff;
padding:1.25rem 2.75rem;
display:flex;
backdrop-filter: blur(7px);
background: rgba(255, 255, 255, 0.09);
border-radius:8px;
}
.banner-tabs li.active a{
box-shadow: 0 20px 40px 0 rgba(1, 12, 31, 0.24);
background: #0093d3;
}
.system_installation{
margin-bottom:4.3rem;
}
.system_installation .title{
font-size: 3.1rem;
max-width: 89rem;
}
.system_installation .universal_systems-description{
font-size:1.5rem;
}
.system_installation .universal_systems-link{
padding:1.2rem;
font-size: 1.2rem;
}
.etaps .mounting_needed-item{
gap:0.75rem;
}
.etaps .mounting_needed-item span{
font-size:9.85rem;
}
.etaps .mounting_needed-item p.water_needed-title {
font-weight: 600;
font-size: 1.55rem;
color: #070707;
margin-top:2.3rem;
}
.etaps .mounting_needed-item > p{
font-size: 1.25rem;
font-weight: 400;
line-height: 150%;
color: #4b5557;
}
.etaps .title{
font-weight: 700;
font-size: 3.1rem;
letter-spacing: 0.03em;
color: #070707;
}
.etaps .mounting_needed-main{
gap:6.86rem;
}
.about-avtopoliv{
padding:14.15rem 0;
}
.about-avtopoliv ul{
padding:1rem 0 0 7rem;
}
.about-avtopoliv ul li{
font-weight: 400;
font-size: 1.5rem;
line-height: 150%;
letter-spacing: 0.03em;
color: #070707;
}
.about-avtopoliv .title {
border-left: none;
padding: 0;
max-width:75rem;
}
.about-text{
max-width:70.15rem;
padding:6.15rem;
margin:-19.2rem auto 0;
position:relative;
background:#fff;
}
.about-text::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
background-image: url(../images/assortment-block.svg);
background-position: center;
background-repeat: no-repeat;
background-size: 40.7rem 41.5rem;
width: 40.7rem;
height: 41.5rem;
}
.about-text h3{
font-weight: 600;
font-size: 1.85rem;
line-height: 150%;
text-transform: uppercase;
color: #070707;
}
.about-text h3 + p{
margin-top:0.75rem;
}
.about-text p{
font-weight: 400;
font-size: 1.25rem;
line-height: 150%;
color: #070707;
margin-top:2.3rem;
}
.about-text ul{
padding:2.3rem 0 0 0;
margin:0;
}
.about-text ul li{
font-weight: 400;
font-size: 1.25rem;
line-height: 150%;
color: #070707;
list-style:none;
}
.about-image{
position: relative;
height: 58.2rem;
margin:3.7rem auto 0;
}
.about-image img{
width: 100%;
height: 100%;
object-fit: cover;
}
.features {
margin-top: 7.25rem;
position: relative;
padding-top:5.3rem;
overflow:hidden;
}
.features .title {
font-weight: 700;
font-size: 3.1rem;
letter-spacing: 0.03em;
color: #070707;
max-width:42rem;
padding-left: 2.1rem;
}
.features-main{
margin-bottom:7.7rem;
}
.features-main p{
margin-top:0.75rem;
padding-left:3.1rem;
font-weight: 400;
font-size: 1.55rem;
line-height: 150%;
letter-spacing: 0.03em;
color: #4b5557;
}
.features-flex{
display:flex;
max-width:89.3rem;
}
.features-flex.big{
max-width:118.6rem;
}
.features-flex.big .item{
padding:3.85rem;
}
.features-flex .item{
flex:1;
background:#fff;
padding:2.3rem;
display:flex;
flex-direction:column;
z-index:1;
}
.features-flex .item svg{
margin-bottom:5.7rem;
}
.features-flex .item span{
font-weight: 600;
font-size: 20px;
color: #070707;
}
.features-flex .item p{
font-weight: 400;
font-size: 16px;
line-height: 150%;
color: #4b5557;
margin-top:0.77rem;
}
.features-flex .item:hover{
background: #061c3d;
}
.features-flex .item:hover span,
.features-flex .item:hover p{
color:#fff;
}
.features-flex .item:hover path{
fill:#fff;
}
.features-img.mob {
display: none;
}
.features-img {
width: 70.5rem;
height: 78.8rem;
object-fit: cover;
position: absolute;
right: 0;
top: 0;
}
.preims{
margin-top:10rem;
margin-bottom:24.4rem;
position:relative;
}
.preims-project{
margin-bottom:8rem;
}
.preims-img {
width: 57.5rem;
height: 60.6rem;
object-fit: cover;
position: absolute;
left: 0;
top: 0;
}
.preims-project .preims-img {
width: 64.5rem;
}
.preims .flex-end{
display:flex;
justify-content:flex-end;
}
.preims-main{
background: #f7f7f7;
padding:8rem;
max-width:69rem;
}
.preims-main h3{
font-weight: 600;
font-size: 2rem;
color: #070707;
margin:0 0 1rem 0;
}
.preims-main ul{
padding:0 0 0 2rem;
margin:0;
}
.preims-main ul li{
font-weight: 400;
font-size: 1.6rem;
line-height: 150%;
color: #070707;
}
.preims-main .universal_systems-link{
margin-top:2.4rem;
display: inline-block;
}
.tab-wrap{
display:none;
}
.tab-wrap.active{
display:block;
}
.sxema .title {
border-left: none;
padding: 0;
max-width: 75rem;
}
.sxema .container{
position:relative;
}
.sxema-block{
margin:5rem 0 0 9rem;
}
.sxema-block{
width:77.8rem;
/* max-width:8.6rem;*/
position:relative;
}
.sxema-block img{
width: 100%;
height: 100%;
object-fit: cover;
}
.sxema-block span{
background:url('../images/plus.svg') no-repeat;
width:32px;
height:32px;
position:absolute;
cursor:pointer;
z-index:1;
}
.sxema-block span.active{
background:url('../images/plus-active.svg') no-repeat;
width:42px;
height:42px;
margin:-5px 0 0 -5px;
}
.plus-1{
top:11.9rem;
left:24.6rem;
}
.plus-2{
top: 16.7rem;
left: 22.1rem;
}
.plus-3{
top: 19.1rem;
left: 18.9rem;
}
.plus-4{
top: 24.3rem;
left: 19.6rem;
}
.plus-5{
top: 20.7rem;
left: 25.4rem;
}
.plus-6{
top: 31.5rem;
left: 21.2rem;
}
.plus-7{
top: 27.1rem;
left: 24.5rem;
}
.plus-8{
top: 25.5rem;
left: 31.8rem;
}
.plus-9{
top: 17.8rem;
left: 45.2rem;
}
.plus-10{
top: 34.2rem;
left: 35rem;
}
.plus-11{
top: 39.2rem;
left: 35rem;
}
.sxema + .about-avtopoliv{
padding:8.3rem 0;
}
.sxema-descr{
position:absolute;
right:9.1rem;
top:17.3rem;
padding:5.4rem;
background: #f7f7f7;
display:none;
z-index:2;
width:34rem;
text-align:center;
}
.sxema-descr.active{
display:block;
}
.sxema-descr img{
max-width:100%;
}
.sxema-descr p.name{
font-weight: 600;
font-size: 2.4rem;
line-height: 150%;
text-transform: uppercase;
color: #070707;
margin-top:4rem;
display:block;
}
.sxema-descr p.text{
font-weight: 400;
font-size: 1.6rem;
line-height: 150%;
color: #070707;
margin-top:2rem;
}
.uppercase{
text-transform:uppercase;
}
.maintenance{
padding:1.1rem 0 12.3rem 0;
}
.maintenance .d-flex{
display:flex;
gap:3rem;
}
.left-maintenance{
width:60.1%;
display:flex;
flex-direction:column;
gap:2.4rem;
}
.right-maintenance{
width:37.3%;
background: #f7f7f7;
}
.maintenance h3{
font-weight: 600;
font-size: 20px;
color: #061c3d;
margin:0;
}
.maintenance img{
margin:0 0 1.7rem 0;
}
.maintenance p{
font-weight: 400;
font-size: 16px;
line-height: 150%;
color: #061c3d;
margin:1.7rem 0 0 0;
opacity: 0.8;
}
.maintenance .left-maintenance div,
.maintenance .right-maintenance div{
background: #f7f7f7;
padding:3rem;
}
.about-cap{
padding-top:6.3rem;
padding-bottom:9.2rem;
position:relative;
}
.capel-text{
background: #f7f7f7;
padding:8rem 8rem 14rem 8rem;
margin-top:5.6rem;
max-width:69rem;
}
.capel-text h3{
font-weight: 600;
font-size: 20px;
color: #070707;
margin:0 0 1rem 0;
}
.capel-text p{
font-weight: 400;
font-size: 16px;
line-height: 150%;
color: #070707;
margin:0 0 2.4rem 0;
}
.capel-text .universal_systems-link{
display:inline-block;
}
.about-capel {
width: 83.8rem;
height: 76.2rem;
object-fit: cover;
position: absolute;
right: 0;
bottom: 0;
z-index: -1;
}
.about-cap .title{
border:none;
padding:0;
}
.why-capel{
padding-bottom:7.25rem;
}
.why-capel img{
max-width:100%;
margin:0 auto;
}
.why-capel .container{
position:relative;
}
.why-capel .text{
position:absolute;
background: #061c3d url('../images/why-capel-image.jpg') no-repeat left bottom;
left:-12rem;
bottom:-8.4rem;
padding:12rem;
max-width:60.3rem;
}
.why-capel .text h2{
font-weight: 600;
font-size: 24px;
color: #fff;
margin:0;
}
.why-capel .text p{
margin:1rem 0 0 0;
font-weight: 400;
font-size: 16px;
line-height: 150%;
color: #fff;
}
.why-image{
height: 58.2rem;
margin: 3.7rem auto 0px;
}
.why-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.form-req input[type="checkbox"] {
position: absolute;
visibility: hidden;
left: -9999px;
}
.form-req input[type="checkbox"] + label {
position: relative;
padding: 0 3rem;
background: rgba(255, 255, 255, 0.06);
cursor: pointer;
font-size:12px;
}
.quiz-main .form-req input[type="checkbox"] + label{
position: relative;
padding: 0 3rem;
background: none;
cursor: pointer;
font-size:12px;
color:#fff;
}
.form-req input[type="checkbox"].error + label:before{
border: 0.2rem solid #ff0000;
}
.form-req input[type="checkbox"] + label:before {
content:'';
transition: .3s all;
width:25px;
height:25px;
border-radius: 0.5rem;
border: 0.2rem solid #B7D9F8;
position:absolute;
left:0px;
top:0px;
}
.form-req input[type="checkbox"]:checked + label:after {
content:'';
background-image: url('../images/quiz.svg');
background-position: center;
background-repeat: no-repeat;
background-size: 2.4rem;
border-color: #46C7FF;
position:absolute;
left: 5px;
top: 6px;
width:14px;
height:14px;
}