*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: 100%;
overflow-x: hidden;
scroll-behavior: smooth;
}
body {
font-family: 'Inter', Arial, Helvetica, sans-serif;
line-height: 1.5;
color: #1e2939;
overflow-x: hidden;
padding-top: 66px;
}
@media (min-width: 1024px) {
body {
padding-top: 57px;
}
}
#pricing {
scroll-margin-top: 66px;
}
@media (min-width: 1024px) {
#pricing {
scroll-margin-top: 57px;
}
}
html.is-menu-open,
body.is-menu-open,
html.is-modal-open,
body.is-modal-open {
overflow-y: hidden;
}
ul {
list-style: none;
}
a {
color: inherit;
text-decoration: none;
}
img {
display: block;
max-width: 100%;
}
button {
font: inherit;
color: inherit;
background: none;
border: none;
cursor: pointer;
} .header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 50;
background-color: #ffffff;
border-bottom: 1px solid #f3f4f6;
box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.1);
}
.header__container {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1152px;
margin: 0 auto;
padding: 10px 18px 11px;
}
@media (min-width: 1024px) {
.header__container {
height: 56px;
padding: 0 16px;
}
}
.header__logo {
width: 110px;
height: 24px;
}
.header__nav {
display: none;
}
@media (min-width: 1024px) {
.header__nav {
display: block;
}
}
.header__nav-list {
display: flex;
align-items: center;
gap: 24px;
}
.header__nav-item {
position: relative;
}
.header__nav-link {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 14px;
line-height: 20px;
color: #364153;
}
.header__nav-icon {
width: 9.5px;
height: 9.5px;
transition: transform 0.2s ease;
}
.header__nav-link[aria-expanded="true"] .header__nav-icon {
transform: rotate(180deg);
}
.header__dropdown {
display: none;
position: absolute;
top: calc(100% + 8px);
left: 0;
width: 300px;
background-color: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
padding: 8px;
z-index: 20;
}
.header__dropdown--open {
display: block;
}
.header__dropdown--scroll {
max-height: 320px;
overflow-y: auto;
}
.header__dropdown-link {
display: block;
padding: 8px 12px;
border-radius: 6px;
font-size: 14px;
line-height: 20px;
color: #364153;
}
.header__dropdown-link:hover {
background-color: #f3f4f6;
}
.header__dropdown-item {
position: relative;
}
.header__dropdown-flyout {
display: none;
position: absolute;
top: 0;
left: calc(100% + 8px);
}
.header__dropdown-item:hover > .header__dropdown-flyout,
.header__dropdown-item--open > .header__dropdown-flyout {
display: block;
}
.header__actions {
display: none;
align-items: center;
gap: 12px;
}
@media (min-width: 1024px) {
.header__actions {
display: flex;
}
}
.header__phone-wrap {
position: relative;
}
.header__phone {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
line-height: 20px;
font-weight: 500;
color: #1e2939;
}
.header__phone-icon {
width: 16px;
height: 16px;
}
.header__phone-dropdown {
display: none;
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 160px;
background-color: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
padding: 8px;
z-index: 20;
}
.header__phone-wrap:hover .header__phone-dropdown,
.header__phone-wrap--open .header__phone-dropdown {
display: block;
}
.header__phone-dropdown-link {
display: block;
padding: 8px 12px;
border-radius: 6px;
font-size: 14px;
line-height: 20px;
color: #364153;
}
.header__phone-dropdown-link:hover {
background-color: #f3f4f6;
}
.header__button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 16px;
border-radius: 8px;
background-color: #155dfc;
font-size: 14px;
line-height: 20px;
font-weight: 600;
color: #ffffff;
}
.header__lang {
position: relative;
}
.header__lang-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
height: 36px;
padding: 12px;
border: 1px solid #e5e7eb;
border-radius: 12px;
font-size: 14px;
line-height: 20px;
font-weight: 500;
color: #1e2939;
}
.header__lang-icon {
transition: transform 0.2s ease;
}
.header__lang-toggle[aria-expanded="true"] .header__lang-icon {
transform: rotate(180deg);
}
.header__lang-dropdown {
display: none;
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 80px;
background-color: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
padding: 4px;
z-index: 20;
}
.header__lang-dropdown--open {
display: block;
}
.header__lang-option {
display: block;
width: 100%;
text-align: left;
padding: 8px 12px;
border-radius: 6px;
font-size: 14px;
line-height: 20px;
color: #364153;
}
.header__lang-option:hover {
background-color: #f3f4f6;
}
.header__lang-option--active {
color: #155dfc;
font-weight: 600;
}
.header__burger {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 8px;
background-color: #155dfc;
flex-shrink: 0;
}
@media (min-width: 1024px) {
.header__burger {
display: none;
}
} .mobile-menu {
position: fixed;
inset: 0;
z-index: 100;
}
.mobile-menu[hidden] {
display: none;
}
@media (min-width: 1024px) {
.mobile-menu {
display: none !important;
}
}
.mobile-menu__backdrop {
position: absolute;
inset: 0;
background-color: rgba(17, 24, 39, 0.5);
}
.mobile-menu__panel {
position: absolute;
top: 0;
right: 0;
width: min(327px, 100%);
max-width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: 25px;
background-color: #ffffff;
box-shadow: 0 1px 13.35px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.1);
padding: 10px 18px 24px;
overflow-y: auto;
}
.mobile-menu__top {
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
}
.mobile-menu__logo {
width: 110px;
height: 24px;
}
.mobile-menu__close {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 8px;
background-color: #155dfc;
flex-shrink: 0;
}
.mobile-menu__list {
display: flex;
flex-direction: column;
gap: 24px;
}
.mobile-menu__link {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
font-size: 14px;
line-height: 20px;
color: #364153;
text-align: left;
}
.mobile-menu__icon {
transition: transform 0.2s ease;
}
.mobile-menu__link[aria-expanded="true"] .mobile-menu__icon {
transform: rotate(180deg);
}
.mobile-menu__dropdown {
display: none;
flex-direction: column;
gap: 12px;
margin-top: 12px;
padding-left: 12px;
border-left: 1px solid #e5e7eb;
}
.mobile-menu__dropdown--open {
display: flex;
}
.mobile-menu__dropdown-link {
font-size: 14px;
line-height: 20px;
color: #364153;
}
.mobile-menu__dropdown-link:hover {
color: #155dfc;
} .hero {
position: relative;
background-color: #f9fafb;
overflow: hidden;
background-image: linear-gradient(to bottom, #f9fafb 0%, #f9fafb 75%, rgba(249, 250, 251, 0) 100%), url(//vremont.mk.ua/wp-content/themes/vremonte-new/assets/new-design/img/hero/banner-mob.webp);
background-repeat: no-repeat, no-repeat;
background-position: center top, center bottom;
background-size: 100% 100%, cover;
}
.hero__container {
position: relative;
z-index: 2;
max-width: 1152px;
margin: 0 auto;
padding: 24px 16px 134px;
}
.hero__title {
font-size: 30px;
line-height: 36px;
font-weight: 700;
color: #101828;
}
.hero__features {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 16px;
}
.hero__feature {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
line-height: 20px;
color: #6a7282;
}
.hero__feature-icon {
flex-shrink: 0;
}
.hero__actions {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 16px;
}
.hero__btn {
display: flex;
align-items: center;
justify-content: center;
height: 44px;
padding: 12px 24px;
border-radius: 8px;
font-size: 14px;
line-height: 24px;
font-weight: 600;
}
.hero__btn--primary {
background-color: #155dfc;
color: #ffffff;
}
.hero__btn--secondary {
background-color: #ffffff;
border: 1px solid #d1d5dc;
color: #364153;
}
.hero__rating {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 12px;
margin-top: 16px;
padding-bottom: 16px;
}
.hero__rating-card {
display: inline-flex;
align-items: center;
gap: 8px;
height: 32px;
padding: 8px 10px;
background-color: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 16px;
box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.1);
}
.hero__stars {
display: flex;
gap: 2px;
}
.hero__rating-value {
font-size: 14px;
line-height: 24px;
font-weight: 700;
color: #101828;
}
.hero__rating-text {
font-size: 14px;
line-height: 20px;
color: #6a7282;
}
.hero__clients {
display: flex;
}
.hero__client {
width: 28px;
height: 28px;
border-radius: 50%;
border: 2px solid #ffffff;
object-fit: cover;
margin-left: -8px;
}
.hero__clients .hero__client:first-child {
margin-left: 0;
}
@media (min-width: 1024px) {
.hero {
min-height: 512px;
display: flex;
align-items: center;
background-image: linear-gradient(to right, #f9fafb 0%, #f9fafb 40%, rgba(249, 250, 251, 0) 70%), url(//vremont.mk.ua/wp-content/themes/vremonte-new/assets/new-design/img/hero/hero-desktop.webp);
background-repeat: no-repeat, no-repeat;
background-position: left center, right center;
background-size: 100% 100%, cover;
}
.hero__container {
width: 100%;
padding: 0 16px;
}
.hero__content {
max-width: 544px;
}
.hero__title {
font-size: 48px;
line-height: 60px;
}
.hero__actions {
flex-direction: row;
gap: 12px;
}
.hero__btn {
height: auto;
font-size: 16px;
}
.hero__rating {
padding-bottom: 0;
}
.hero__rating-card {
height: 37px;
padding: 9px 14px;
}
} .categories {
padding: 32px 0;
border-bottom: 1px solid #f3f4f6;
}
.categories__container {
max-width: 1152px;
margin: 0 auto;
padding: 0 16px;
}
.categories__title {
font-size: 20px;
line-height: 28px;
font-weight: 700;
color: #101828;
text-align: center;
}
.categories__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px 20px;
margin-top: 16px;
}
.categories__card {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
height: 184px;
padding: 5px 12px 12px;
border: 1px solid #e5e7eb;
border-radius: 12px;
}
.categories__media-area {
display: flex;
flex: 1;
min-height: 0;
width: 100%;
align-items: center;
justify-content: center;
}
.categories__media {
position: relative;
overflow: hidden;
margin: 0 auto;
}
.categories__media--fridge { width: 115px; height: 121px; }
.categories__media--washer { width: 83px; height: 108px; }
.categories__media--dishwasher { width: 79px; height: 107px; }
.categories__media--boiler { width: 72px; height: 123px; }
.categories__media--ac { width: 111px; height: 44px; }
.categories__media--other { width: 103px; height: 67px; }
.categories__image {
position: absolute;
max-width: none;
}
.categories__image--fridge { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.categories__image--washer { top: 0; left: -15.08%; width: 130.16%; height: 100%; }
.categories__image--dishwasher { top: 0; left: -17.63%; width: 135.54%; height: 100%; }
.categories__image--boiler { top: -5.23%; left: -83.78%; width: 266.51%; height: 111.63%; }
.categories__image--ac { top: 0; left: 0; width: 100%; height: 250.91%; }
.categories__image--other { top: -63.38%; left: -23.39%; width: 147.71%; height: 226.76%; }
.categories__name {
font-size: 12px;
line-height: 15px;
font-weight: 700;
color: #364153;
text-align: center;
}
@media (min-width: 1024px) {
.categories {
padding: 48px 0;
}
.categories__title {
font-size: 25px;
line-height: 28px;
text-align: left;
}
.categories__list {
display: flex;
gap: 30px;
margin-top: 24px;
}
.categories__item {
flex: 1 0 0;
min-width: 0;
}
.categories__card {
height: 226px;
padding: 12px;
}
.categories__media--fridge { width: 139px; height: 151px; }
.categories__media--washer { width: 112px; height: 146px; }
.categories__media--dishwasher { width: 95px; height: 128px; }
.categories__media--boiler { width: 91px; height: 155px; }
.categories__media--ac { width: 138px; height: 55px; }
.categories__media--other { width: 109px; height: 71px; }
} .why {
background-color: #f9fafb;
border-bottom: 1px solid #f3f4f6;
padding: 32px 0;
}
.why__container {
max-width: 1152px;
margin: 0 auto;
padding: 0 16px;
}
.why__title {
font-size: 20px;
line-height: 28px;
font-weight: 700;
color: #101828;
}
.why__list {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 20px;
}
.why__item {
background-color: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 16px;
padding: 16px;
box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.1);
}
.why__icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 12px;
background-color: #fff7ed;
}
.why__icon img {
width: 22px;
height: 22px;
}
.why__item-title {
font-size: 14px;
line-height: 20px;
font-weight: 600;
color: #101828;
margin-top: 12px;
}
.why__item-text {
font-size: 12px;
line-height: 19.5px;
color: #6a7282;
margin-top: 4px;
}
@media (min-width: 1024px) {
.why {
padding: 48px 0;
}
.why__title {
font-size: 25px;
line-height: 28px;
}
.why__list {
flex-direction: row;
gap: 24px;
margin-top: 32px;
}
.why__item {
flex: 1 0 0;
min-width: 0;
padding: 24px;
}
.why__icon {
width: 44px;
height: 44px;
}
.why__icon img {
width: 28px;
height: 28px;
}
} .pricing-reviews {
padding: 32px 0;
border-bottom: 1px solid #f3f4f6;
}
.pricing-reviews__container {
max-width: 1152px;
margin: 0 auto;
padding: 0 16px;
display: flex;
flex-direction: column;
gap: 48px;
}
.pricing__title {
font-size: 20px;
line-height: 28px;
font-weight: 700;
color: #101828;
}
.pricing__table {
width: 100%;
margin-top: 16px;
border: 1px solid #e5e7eb;
border-radius: 12px;
overflow: hidden;
}
.pricing__cell {
padding: 12px 16px;
border-bottom: 1px solid #e5e7eb;
font-size: 14px;
line-height: 20px;
color: #364153;
text-align: left;
}
.pricing__cell--head {
background-color: #f9fafb;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #6a7282;
}
.pricing__cell--price {
text-align: right;
white-space: nowrap;
font-weight: 600;
color: #155dfc;
}
.pricing__table tbody tr:last-child .pricing__cell {
border-bottom: none;
}
.pricing__link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 16px;
font-size: 14px;
line-height: 20px;
font-weight: 600;
color: #155dfc;
}
.pricing__link-icon {
transform: rotate(-90deg);
}
.reviews__title {
font-size: 20px;
line-height: 28px;
font-weight: 700;
color: #101828;
}
.reviews__summary {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
margin-top: 16px;
}
.reviews__satisfaction {
display: flex;
align-items: baseline;
gap: 12px;
}
.reviews__satisfaction-value {
font-size: 32px;
line-height: 1;
font-weight: 700;
color: #00a63e;
}
.reviews__satisfaction-text {
font-size: 14px;
line-height: 20px;
color: #6a7282;
max-width: 220px;
}
.reviews__rating {
display: flex;
flex-direction: column;
align-items: flex-start; }
.reviews__stars {
display: flex;
gap: 2px;
}
.reviews__rating-text {
font-size: 14px;
line-height: 20px;
color: #6a7282;
}
.reviews__list {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 24px;
}
.reviews__card {
background-color: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 16px;
padding: 16px;
box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.1);
}
.reviews__card-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.reviews__author {
display: flex;
align-items: baseline;
gap: 8px;
}
.reviews__name {
font-size: 14px;
line-height: 20px;
font-weight: 600;
color: #101828;
}
.reviews__city {
font-size: 12px;
line-height: 16px;
color: #6a7282;
}
.reviews__card-stars {
display: flex;
gap: 2px;
}
.reviews__text {
margin-top: 12px;
font-size: 14px;
line-height: 20px;
color: #4a5565;
}
.reviews__date {
display: block;
margin-top: 12px;
font-size: 12px;
line-height: 16px;
color: #99a1af;
}
.reviews__link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 20px;
font-size: 14px;
line-height: 20px;
font-weight: 600;
color: #155dfc;
}
.reviews__link-icon {
transform: rotate(-90deg);
}
@media (min-width: 1024px) {
.pricing-reviews {
padding: 48px 0;
}
.pricing-reviews__container {
flex-direction: row;
align-items: start;
gap: 64px;
}
.pricing,
.reviews {
flex: 1 0 0;
min-width: 0;
}
.pricing__title,
.reviews__title {
font-size: 25px;
line-height: 28px;
}
.pricing__cell {
padding: 14px 24px;
font-size: 16px;
}
.reviews__summary {
flex-direction: row;
align-items: flex-start;
gap: 32px;
}
.reviews__card {
min-width: 0;
}
} .how-repair {
background-color: #101828;
padding: 40px 0;
}
.how-repair__container {
max-width: 1152px;
margin: 0 auto;
padding: 0 16px;
}
.how-repair__title {
font-size: 20px;
line-height: 28px;
font-weight: 700;
color: #ffffff;
text-align: center;
}
.how-repair__steps {
display: flex;
flex-direction: column;
gap: 24px;
margin-top: 32px;
}
.how-repair__step {
display: flex;
gap: 16px;
align-items: flex-start;
position: relative;
}
.how-repair__step:not(:last-child)::after {
content: '';
position: absolute;
left: 19px;
top: 40px;
width: 2px;
height: 24px;
background-color: #d1d5dc;
opacity: 0.3;
}
.how-repair__step-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #155dfc;
flex-shrink: 0;
}
.how-repair__step-body {
flex: 1 0 0;
min-width: 0;
}
.how-repair__step-title {
display: block;
font-size: 14px;
line-height: 20px;
font-weight: 600;
color: #ffffff;
}
.how-repair__step-text {
display: block;
margin-top: 2px;
font-size: 12px;
line-height: 16px;
color: #6a7282;
}
.how-repair__card {
margin-top: 32px;
background-color: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 16px;
padding: 20px 15px 24px;
box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.1);
}
.how-repair__card-title {
font-size: 20px;
line-height: 28px;
font-weight: 700;
color: #101828;
}
.how-repair__card-text {
margin-top: 4px;
font-size: 12px;
line-height: 20px;
color: #6a7282;
}
.how-repair__form {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 20px;
}
.how-repair__field {
display: flex;
flex-direction: column;
}
.how-repair__label {
margin-bottom: 6px;
font-size: 12px;
line-height: 16px;
font-weight: 500;
color: #4a5565;
}
.how-repair__input {
height: 42px;
padding: 0 12px;
border: 1px solid #d1d5dc;
border-radius: 8px;
font-family: inherit;
font-size: 14px;
color: #364153;
}
.how-repair__input::placeholder {
color: #364153;
opacity: 0.5;
}
.how-repair__input:focus {
outline: 2px solid #155dfc;
outline-offset: 1px;
}
.how-repair__submit {
padding: 12px 0;
background-color: #155dfc;
border-radius: 8px;
color: #ffffff;
font-size: 16px;
font-weight: 600;
text-align: center;
}
@media (min-width: 1024px) {
.how-repair {
padding: 48px 0;
}
.how-repair__container {
display: flex;
align-items: flex-start;
gap: 48px;
}
.how-repair__content,
.how-repair__card {
flex: 1 0 0;
min-width: 0;
}
.how-repair__title {
font-size: 25px;
line-height: 28px;
text-align: left;
}
.how-repair__step:not(:last-child)::after {
left: 21px;
top: 44px;
}
.how-repair__step-icon {
width: 44px;
height: 44px;
}
.how-repair__card {
margin-top: 0;
padding: 24px;
}
.how-repair__card-title {
font-size: 25px;
line-height: 28px;
}
.how-repair__card-text {
font-size: 14px;
line-height: 20px;
}
.how-repair__input {
height: 41px;
}
} .masters {
padding: 32px 0;
border-bottom: 1px solid #f3f4f6;
}
.masters__container {
max-width: 1152px;
margin: 0 auto;
padding: 0 16px;
}
.masters__header {
display: flex;
align-items: center;
justify-content: space-between;
}
.masters__title {
font-size: 20px;
line-height: 28px;
font-weight: 700;
color: #101828;
}
.masters__link {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 14px;
line-height: 20px;
font-weight: 500;
color: #155dfc;
white-space: nowrap;
}
.masters__link-icon {
transform: rotate(-90deg);
}
.masters__list {
display: flex;
gap: 10px;
margin-top: 24px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.masters__list::-webkit-scrollbar {
display: none;
}
.masters__card {
flex: 0 0 220px;
background-color: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}
.masters__progress {
position: relative;
height: 7px;
margin-top: 19px;
background-color: #e5e7eb;
border-radius: 999px;
overflow: hidden;
}
.masters__progress-bar {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0%;
background-color: #155dfc;
border-radius: 999px;
transition: width 0.2s ease;
}
.masters__photo {
width: 100%;
height: 132px;
object-fit: cover;
}
.masters__body {
display: flex;
flex-direction: column;
padding: 12px 15px 16px;
}
.masters__name {
font-size: 14px;
line-height: 20px;
font-weight: 700;
color: #101828;
}
.masters__specialty {
margin-top: 2px;
font-size: 12px;
line-height: 16px;
color: #6a7282;
}
.masters__stats {
margin-top: 4px;
}
.masters__stats li {
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
line-height: 16px;
color: #99a1af;
}
.masters__rating {
display: flex;
align-items: center;
gap: 4px;
margin-top: 8px;
}
.masters__stars {
display: flex;
gap: 2px;
}
.masters__rating-value {
font-size: 12px;
line-height: 16px;
font-weight: 600;
color: #101828;
}
@media (min-width: 1024px) {
.masters {
padding: 48px 0;
}
.masters__title {
font-size: 25px;
line-height: 28px;
}
.masters__list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 24px;
overflow-x: visible;
}
.masters__card {
flex: initial;
}
.masters__progress {
display: none;
}
.masters__photo {
height: 176px;
}
.masters__body {
padding: 16px;
}
} .masters-archive {
padding: 32px 0 48px;
}
.masters-archive__container {
max-width: 1152px;
margin: 0 auto;
padding: 0 16px;
}
.masters-archive__heading {
font-size: 20px;
line-height: 28px;
font-weight: 700;
color: #101828;
}
.masters-archive__list {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin-top: 16px;
list-style: none;
}
.masters-archive__card-link {
display: block;
color: inherit;
text-decoration: none;
}
.masters-archive__empty {
margin-top: 16px;
font-size: 14px;
color: #6a7282;
}
.masters-archive__pagination {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 32px;
}
.masters-archive__pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
min-width: 36px;
height: 36px;
padding: 0 8px;
border: 1px solid #e5e7eb;
border-radius: 8px;
background-color: #ffffff;
font-size: 14px;
font-weight: 600;
color: #364153;
}
.masters-archive__pagination .page-numbers.current {
background-color: #155dfc;
border-color: #155dfc;
color: #ffffff;
}
.masters-archive__pagination .page-numbers.dots {
border: none;
background: none;
}
.master-profile {
padding: 32px 0 48px;
}
.master-profile__container {
max-width: 1152px;
margin: 0 auto;
padding: 0 16px;
display: flex;
flex-direction: column;
gap: 32px;
}
.master-profile__main {
min-width: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.master-profile__card {
background-color: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.1);
}
.master-profile__photo {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
}
.master-profile__body {
padding: 16px;
}
.master-profile__rating {
display: flex;
align-items: center;
gap: 8px;
}
.master-profile__stars {
display: flex;
gap: 2px;
}
.master-profile__rating-value {
font-size: 14px;
line-height: 20px;
font-weight: 700;
color: #101828;
}
.master-profile__reviews-count {
margin-top: 4px;
font-size: 12px;
line-height: 16px;
color: #6a7282;
}
.master-profile__name {
margin-top: 8px;
font-size: 20px;
line-height: 28px;
font-weight: 700;
color: #101828;
}
.master-profile__years {
margin-top: 2px;
font-size: 14px;
line-height: 20px;
color: #6a7282;
}
.master-profile__cta {
display: block;
width: 100%;
margin-top: 16px;
border: none;
cursor: pointer;
text-align: center;
}
.master-profile__section {
background-color: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 16px;
padding: 16px;
}
.master-profile__section-title {
font-size: 16px;
line-height: 24px;
font-weight: 700;
color: #101828;
}
.master-profile__section-text {
margin-top: 8px;
font-size: 14px;
line-height: 20px;
color: #4a5565;
}
.master-profile__specialty-list {
margin-top: 8px;
display: flex;
flex-direction: column;
gap: 8px;
list-style: none;
}
.master-profile__specialty-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
line-height: 20px;
color: #364153;
}
.master-profile__specialty-item img {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.master-profile__aside {
min-width: 0;
}
.master-profile__reviews-heading {
font-size: 20px;
line-height: 28px;
font-weight: 700;
color: #101828;
}
.master-profile__reviews-text {
margin-top: 4px;
font-size: 14px;
line-height: 20px;
color: #6a7282;
}
.master-profile__reviews-cta {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 44px;
margin-top: 16px;
padding: 12px 24px;
background-color: #ffffff;
border: 1px solid #d1d5dc;
border-radius: 8px;
font-size: 14px;
line-height: 24px;
font-weight: 600;
color: #364153;
cursor: pointer;
}
.master-profile__reviews-list {
margin-top: 20px;
display: flex;
flex-direction: column;
gap: 16px;
list-style: none;
}
@media (min-width: 768px) {
.masters-archive__list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.masters-archive {
padding: 48px 0 64px;
}
.masters-archive__heading {
font-size: 25px;
line-height: 28px;
}
.masters-archive__list {
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.master-profile {
padding: 48px 0 64px;
}
.master-profile__container {
flex-direction: row;
align-items: start;
gap: 64px;
}
.master-profile__main {
width: 360px;
flex-shrink: 0;
}
.master-profile__aside {
flex: 1 1 0;
}
.master-profile__reviews-heading {
font-size: 25px;
line-height: 28px;
}
} .brands {
background-color: #f9fafb;
padding: 32px 0;
border-bottom: 1px solid #f3f4f6;
}
.brands__container {
max-width: 1152px;
margin: 0 auto;
padding: 0 16px;
}
.brands__header {
display: flex;
align-items: center;
justify-content: space-between;
}
.brands__title {
font-size: 20px;
line-height: 28px;
font-weight: 700;
color: #101828;
}
.brands__link {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 14px;
line-height: 20px;
font-weight: 500;
color: #155dfc;
white-space: nowrap;
}
.brands__link-icon {
transform: rotate(-90deg);
}
.brands__list {
display: flex;
gap: 12px;
margin-top: 24px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.brands__list::-webkit-scrollbar {
display: none;
}
.brands__item {
flex: 0 0 150px;
}
.brands__item img {
display: block;
width: 100%;
height: auto;
}
.brands__progress {
position: relative;
height: 7px;
margin-top: 19px;
background-color: #e5e7eb;
border-radius: 999px;
overflow: hidden;
}
.brands__progress-bar {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0%;
background-color: #155dfc;
border-radius: 999px;
transition: width 0.2s ease;
}
@media (min-width: 1024px) {
.brands {
padding: 48px 0;
}
.brands__title {
font-size: 25px;
line-height: 28px;
}
.brands__list {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 20px;
margin-top: 24px;
overflow-x: visible;
}
.brands__item {
flex: initial;
}
.brands__progress {
display: none;
}
} .price-categories {
padding: 32px 0;
border-bottom: 1px solid #f3f4f6;
}
.price-categories__container {
max-width: 1152px;
margin: 0 auto;
padding: 0 16px;
}
.price-categories__title {
font-size: 20px;
line-height: 28px;
font-weight: 700;
color: #101828;
}
.price-categories__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 16px;
list-style: none;
}
.price-categories__card {
display: block;
overflow: hidden;
border: 1px solid #e5e7eb;
border-radius: 12px;
}
.price-categories__image {
display: block;
width: 100%;
aspect-ratio: 291 / 375;
object-fit: cover;
}
.price-categories__name {
display: block;
padding: 12px;
font-size: 14px;
line-height: 20px;
font-weight: 600;
color: #101828;
text-align: center;
}
@media (min-width: 768px) {
.price-categories__list {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 1024px) {
.price-categories {
padding: 48px 0;
}
.price-categories__title {
font-size: 25px;
line-height: 28px;
}
} .reviews-archive {
padding: 32px 0 48px;
}
.reviews-archive__container {
max-width: 1152px;
margin: 0 auto;
padding: 0 16px;
display: flex;
flex-direction: column;
gap: 32px;
}
.reviews-archive__main {
min-width: 0;
}
.reviews-archive__heading {
font-size: 20px;
line-height: 28px;
font-weight: 700;
color: #101828;
}
.reviews-archive__list {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 16px;
}
.reviews-archive__card {
background-color: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 16px;
padding: 16px;
box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.1);
}
.reviews-archive__stars {
display: flex;
gap: 2px;
}
.reviews-archive__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-top: 8px;
}
.reviews-archive__name {
font-size: 14px;
line-height: 20px;
font-weight: 600;
color: #101828;
}
.reviews-archive__date {
font-size: 12px;
line-height: 16px;
color: #99a1af;
}
.reviews-archive__text {
margin-top: 8px;
font-size: 14px;
line-height: 20px;
color: #4a5565;
}
.reviews-archive__empty {
margin-top: 16px;
font-size: 14px;
color: #6a7282;
}
.reviews-archive__pagination {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 32px;
}
.reviews-archive__pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
min-width: 36px;
height: 36px;
padding: 0 8px;
border: 1px solid #e5e7eb;
border-radius: 8px;
background-color: #ffffff;
font-size: 14px;
font-weight: 600;
color: #364153;
}
.reviews-archive__pagination .page-numbers.current {
background-color: #155dfc;
border-color: #155dfc;
color: #ffffff;
}
.reviews-archive__pagination .page-numbers.dots {
border: none;
background: none;
}
.reviews-archive__aside {
min-width: 0;
}
.reviews-archive__stat {
background-color: #f0fdf4;
border-radius: 16px;
padding: 20px;
}
.reviews-archive__stat-top {
display: flex;
align-items: center;
gap: 12px;
}
.reviews-archive__stat-value {
font-size: 32px;
line-height: 1;
font-weight: 700;
color: #00a63e;
}
.reviews-archive__stat-label {
font-size: 12px;
line-height: 16px;
font-weight: 700;
text-transform: uppercase;
color: #00a63e;
}
.reviews-archive__stat-text {
margin-top: 12px;
font-size: 14px;
line-height: 20px;
color: #4a5565;
}
.reviews-archive__stat-text strong {
color: #101828;
font-weight: 700;
}
.reviews-archive__cta {
display: block;
width: 100%;
margin-top: 16px;
border: none;
cursor: pointer;
}
@media (min-width: 1024px) {
.reviews-archive {
padding: 48px 0 64px;
}
.reviews-archive__container {
flex-direction: row;
align-items: start;
gap: 64px;
}
.reviews-archive__main {
flex: 1 1 0;
}
.reviews-archive__heading {
font-size: 25px;
line-height: 28px;
}
.reviews-archive__aside {
width: 320px;
flex-shrink: 0;
position: sticky;
top: 88px;
}
.reviews-archive__stat-value {
font-size: 40px;
}
} .geo-faq {
padding: 32px 0;
border-bottom: 1px solid #f3f4f6;
}
.geo-faq__container {
max-width: 1152px;
margin: 0 auto;
padding: 0 16px;
display: flex;
flex-direction: column;
gap: 40px;
}
.geo__title,
.faq__title {
font-size: 20px;
line-height: 28px;
font-weight: 700;
color: #101828;
text-align: center;
}
.geo__text {
margin-top: 8px;
font-size: 12px;
line-height: 20px;
color: #6a7282;
text-align: center;
}
.geo__map {
display: block;
width: 100%;
height: auto;
margin-top: 10px;
}
.geo__link,
.faq__link {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 20px;
font-size: 14px;
line-height: 20px;
font-weight: 500;
color: #155dfc;
}
.geo__link-icon,
.faq__link-icon {
transform: rotate(-90deg);
}
.faq__list {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 20px;
}
.faq__item {
border: 1px solid #e5e7eb;
border-radius: 12px;
overflow: hidden;
}
.faq__question {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 12px;
font-size: 14px;
line-height: 20px;
font-weight: 500;
color: #101828;
cursor: pointer;
list-style: none;
}
.faq__question::-webkit-details-marker {
display: none;
}
.faq__question::marker {
display: none;
}
.faq__icon {
flex-shrink: 0;
transition: transform 0.2s ease;
}
.faq__item[open] .faq__icon,
.faq__item--open .faq__icon {
transform: rotate(180deg);
}
.faq__answer {
display: grid;
grid-template-rows: 0fr;
font-size: 14px;
line-height: 20px;
color: #6a7282;
transition: grid-template-rows 0.25s ease;
}
.faq__answer > p {
overflow: hidden;
padding: 0 12px 16px;
}
.faq__item[open] .faq__answer,
.faq__item--open .faq__answer {
grid-template-rows: 1fr;
}
@media (min-width: 1024px) {
.geo-faq {
padding: 48px 0;
}
.geo-faq__container {
flex-direction: row;
align-items: start;
gap: 40px;
}
.geo,
.faq {
flex: 1 0 0;
min-width: 0;
}
.geo__title,
.faq__title {
font-size: 25px;
line-height: 28px;
text-align: left;
}
.geo__text {
text-align: left;
}
} .cta {
background-color: #155dfc;
padding: 40px 0;
}
.cta__container {
max-width: 576px;
margin: 0 auto;
padding: 0 16px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.cta__avatar {
width: 112px;
height: auto;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.cta__title {
margin-top: 24px;
font-size: 24px;
line-height: 32px;
font-weight: 700;
color: #ffffff;
}
.cta__text {
margin-top: 8px;
font-size: 14px;
line-height: 20px;
color: #ffffff;
}
.cta__button {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 24px;
padding: 12px 32px;
background-color: #ffffff;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
color: #155dfc;
}
@media (min-width: 1024px) {
.cta {
padding: 64px 0;
}
} .footer {
background-color: #101828;
padding: 48px 0 30px;
}
.footer__container {
max-width: 1152px;
margin: 0 auto;
padding: 0 16px;
}
.footer__top {
display: flex;
flex-direction: column;
gap: 0;
}
.footer__about {
margin-bottom: 32px;
}
.footer__logo-badge {
display: inline-flex;
align-items: center;
}
.footer__description {
margin-top: 12px;
font-size: 12px;
line-height: 19.5px;
color: #99a1af;
}
.footer__socials {
display: flex;
align-items: center;
gap: 12px;
margin-top: 16px;
}
.footer__col {
border-top: 1px solid #1e2939;
}
.footer__heading {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 16px 0;
font-size: 14px;
line-height: 20px;
font-weight: 600;
color: #ffffff;
cursor: pointer;
}
.footer__heading-icon {
flex-shrink: 0;
transition: transform 0.2s ease;
}
.footer__col--open .footer__heading-icon {
transform: rotate(180deg);
}
.footer__list {
display: none;
flex-direction: column;
gap: 6px;
margin-top: 12px;
padding-bottom: 16px;
}
.footer__col--open .footer__list {
display: flex;
}
.footer__list a {
font-size: 12px;
line-height: 16px;
color: #99a1af;
}
.footer__contacts {
display: none;
flex-direction: column;
gap: 8px;
margin-top: 12px;
padding-bottom: 16px;
}
.footer__col--open .footer__contacts {
display: flex;
}
.footer__contacts li {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 12px;
line-height: 16px;
color: #ffffff;
}
.footer__contacts img {
flex-shrink: 0;
margin-top: 2px;
}
.footer__contacts a {
font-size: 12px;
line-height: 16px;
color: #ffffff;
text-decoration: underline;
}
.footer__bottom {
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid #1e2939;
text-align: center;
}
.footer__copyright {
font-size: 12px;
line-height: 16px;
color: #6a7282;
}
@media (min-width: 1024px) {
.footer__top {
flex-direction: row;
gap: 32px;
}
.footer__about,
.footer__col {
flex: 1 0 0;
min-width: 0;
}
.footer__about {
margin-bottom: 0;
}
.footer__col {
border-top: none;
}
.footer__heading {
padding: 0;
cursor: default;
pointer-events: none;
}
.footer__heading-icon {
display: none;
}
.footer__list,
.footer__contacts {
display: flex !important;
padding-bottom: 0;
}
} .breadcrumb {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
line-height: 16px;
color: #6a7282;
}
.breadcrumb__link {
color: #6a7282;
}
@media (min-width: 1024px) {
.breadcrumb {
display: none;
}
} .page-hero {
position: relative;
background-color: #f9fafb;
overflow: hidden;
background-image: linear-gradient(to bottom, #f9fafb 0%, #f9fafb 70%, rgba(249, 250, 251, 0) 100%), url(//vremont.mk.ua/wp-content/themes/vremonte-new/assets/new-design/img/hero/service-washer-mob.png);
background-repeat: no-repeat, no-repeat;
background-position: center top, center bottom;
background-size: 100% 100%, cover;
padding: 16px 0 100px;
}
.page-hero--compact {
background-image: none;
padding: 16px 0;
min-height: 0;
}
.page-hero__container {
position: relative;
z-index: 2;
max-width: 1152px;
margin: 0 auto;
padding: 0 16px;
}
.page-hero__title {
margin-top: 16px;
font-size: 30px;
line-height: 36px;
font-weight: 700;
color: #101828;
}
.page-hero__text {
margin-top: 12px;
font-size: 14px;
line-height: 20px;
color: #6a7282;
}
.page-hero__text p {
margin: 0 0 8px;
}
.page-hero__text p:last-child {
margin-bottom: 0;
}
.page-hero__actions {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 20px;
}
.page-hero__btn {
display: flex;
align-items: center;
justify-content: center;
height: 44px;
padding: 12px 24px;
border-radius: 8px;
font-size: 14px;
line-height: 24px;
font-weight: 600;
}
.page-hero__btn--primary {
background-color: #155dfc;
color: #ffffff;
}
.page-hero__btn--secondary {
background-color: #ffffff;
border: 1px solid #d1d5dc;
color: #364153;
}
@media (min-width: 1024px) {
.page-hero {
min-height: 512px;
display: flex;
align-items: center;
padding: 0;
background-image: linear-gradient(to right, #f9fafb 0%, #f9fafb 40%, rgba(249, 250, 251, 0) 70%), url(//vremont.mk.ua/wp-content/themes/vremonte-new/assets/new-design/img/hero/service-washer-desktop.png);
background-repeat: no-repeat, no-repeat;
background-position: left center, right center;
background-size: 100% 100%, cover;
}
.page-hero--compact {
min-height: 0;
display: block;
padding: 24px 0;
background-image: none;
}
.page-hero__container {
width: 100%;
}
.page-hero__content {
max-width: 544px;
}
.page-hero__title {
margin-top: 0;
font-size: 48px;
line-height: 60px;
}
.page-hero__actions {
flex-direction: row;
gap: 12px;
}
.page-hero__btn {
height: auto;
font-size: 16px;
}
} .job-single__city {
margin-top: 8px;
font-size: 14px;
line-height: 20px;
color: #6a7282;
}
.job-single__city span {
color: #101828;
font-weight: 600;
}
.job-single {
padding: 8px 0 48px;
}
.job-single__container {
max-width: 768px;
margin: 0 auto;
padding: 0 16px;
}
.job-single__heading {
font-size: 20px;
line-height: 28px;
font-weight: 700;
color: #101828;
}
.job-single__content.entry-content {
max-width: none;
margin: 16px 0 0;
padding: 0;
}
.job-single__cta {
margin-top: 24px;
width: fit-content;
border: none;
cursor: pointer;
font-family: inherit;
}
@media (min-width: 1024px) {
.job-single {
padding: 16px 0 64px;
}
.job-single__heading {
font-size: 25px;
line-height: 28px;
}
} .services-pricing {
padding: 40px 0;
border-bottom: 1px solid #f3f4f6;
}
.services-pricing__container {
max-width: 1152px;
margin: 0 auto;
padding: 0 16px;
}
.services-pricing__header {
display: flex;
flex-direction: column;
gap: 16px;
}
.services-pricing__title {
font-size: 20px;
line-height: 28px;
font-weight: 700;
color: #101828;
}
.services-pricing__tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.services-pricing__tab {
height: 44px;
padding: 0 20px;
border: 1px solid #155dfc;
border-radius: 8px;
background-color: transparent;
color: #155dfc;
font-family: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
.services-pricing__tab--active {
background-color: #155dfc;
color: #ffffff;
}
.services-pricing__panel[hidden] {
display: none;
}
.services-pricing__grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin-top: 24px;
}
.services-pricing__card {
border: 1px solid #e5e7eb;
border-radius: 12px;
overflow: hidden;
}
.services-pricing__card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 20px;
background-color: #f9fafb;
border-bottom: 1px solid #e5e7eb;
}
.services-pricing__card-name {
font-size: 12px;
line-height: 16px;
font-weight: 600;
letter-spacing: 0.3px;
text-transform: uppercase;
color: #101828;
}
.services-pricing__card-label {
font-size: 12px;
line-height: 16px;
font-weight: 600;
letter-spacing: 0.3px;
text-transform: uppercase;
color: #4a5565;
}
.services-pricing__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 20px;
background-color: #ffffff;
}
.services-pricing__row--alt {
background-color: rgba(249, 250, 251, 0.6);
}
.services-pricing__row-label {
font-size: 14px;
line-height: 20px;
color: #364153;
}
.services-pricing__row-value {
font-size: 14px;
line-height: 20px;
font-weight: 700;
color: #155dfc;
}
.jobs {
padding: 40px 0;
}
.jobs__container {
max-width: 1152px;
margin: 0 auto;
padding: 0 16px;
}
.jobs__title {
font-size: 20px;
line-height: 28px;
font-weight: 700;
color: #101828;
}
.jobs__list {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 24px;
}
.jobs__card {
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 20px;
}
.jobs__city {
font-size: 12px;
line-height: 16px;
color: #6a7282;
}
.jobs__city span {
font-weight: 600;
color: #364153;
}
.jobs__card-title {
display: block;
margin-top: 8px;
font-size: 18px;
line-height: 24px;
font-weight: 700;
color: #101828;
}
.jobs__card-text {
margin-top: 8px;
font-size: 14px;
line-height: 20px;
color: #6a7282;
}
.jobs__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 16px;
}
.certificates {
padding: 40px 0;
}
.certificates__container {
max-width: 1152px;
margin: 0 auto;
padding: 0 16px;
}
.certificates__grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin-top: 24px;
}
.certificates__grid a {
display: block;
border: 1px solid #e5e7eb;
border-radius: 12px;
overflow: hidden;
}
.certificates__grid img {
display: block;
width: 100%;
height: auto;
}
@media (min-width: 768px) {
.certificates__grid {
grid-template-columns: repeat(3, 1fr);
}
}
.entry-content {
max-width: 768px;
margin: 0 auto;
padding: 40px 16px;
font-size: 15px;
line-height: 1.7;
color: #364153;
}
.entry-content h2,
.entry-content h3 {
margin-top: 32px;
margin-bottom: 12px;
font-weight: 700;
color: #101828;
}
.entry-content h2 {
font-size: 22px;
line-height: 28px;
}
.entry-content h3 {
font-size: 18px;
line-height: 24px;
}
.entry-content p {
margin-bottom: 16px;
}
.entry-content ul,
.entry-content ol {
margin: 0 0 16px;
padding-left: 20px;
}
.entry-content ul {
list-style: disc;
}
.entry-content ol {
list-style: decimal;
}
.entry-content li {
margin-bottom: 6px;
}
.entry-content a {
color: #155dfc;
text-decoration: underline;
}
.entry-content strong {
font-weight: 700;
}
.entry-content img {
display: block;
max-width: 100%;
height: auto;
margin: 8px 0 16px;
border-radius: 12px;
} .blog-card {
display: block;
background-color: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.1);
color: inherit;
text-decoration: none;
}
.blog-card__photo {
display: block;
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
}
.blog-card__body {
padding: 16px;
}
.blog-card__category {
display: inline-block;
font-size: 12px;
line-height: 16px;
font-weight: 600;
color: #155dfc;
text-decoration: none;
}
.blog-card__title {
display: block;
margin-top: 8px;
font-size: 16px;
line-height: 24px;
font-weight: 700;
color: #101828;
text-decoration: none;
}
.blog-card__excerpt {
margin-top: 8px;
font-size: 14px;
line-height: 20px;
color: #6a7282;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-card__date {
margin-top: 12px;
font-size: 12px;
line-height: 16px;
color: #99a1af;
} .blog-archive {
padding: 24px 0 48px;
}
.blog-archive__container {
max-width: 1152px;
margin: 0 auto;
padding: 0 16px;
}
.blog-archive__filters {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 24px;
}
.blog-archive__select {
height: 44px;
padding: 0 16px;
border: 1px solid #d1d5dc;
border-radius: 8px;
background-color: #ffffff;
font-family: inherit;
font-size: 14px;
color: #364153;
}
.blog-archive__grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.blog-archive__empty {
font-size: 14px;
color: #6a7282;
}
.blog-archive__heading {
margin-bottom: 16px;
font-size: 20px;
line-height: 28px;
font-weight: 700;
color: #101828;
}
.blog-archive__pagination {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 32px;
}
.blog-archive__pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
min-width: 36px;
height: 36px;
padding: 0 8px;
border: 1px solid #e5e7eb;
border-radius: 8px;
background-color: #ffffff;
font-size: 14px;
font-weight: 600;
color: #364153;
}
.blog-archive__pagination .page-numbers.current {
background-color: #155dfc;
border-color: #155dfc;
color: #ffffff;
}
.blog-archive__pagination .page-numbers.dots {
border: none;
background: none;
}
@media (min-width: 640px) {
.blog-archive__filters {
flex-direction: row;
}
.blog-archive__select {
flex: 1;
}
}
@media (min-width: 768px) {
.blog-archive__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.blog-archive {
padding: 32px 0 64px;
}
.blog-archive__grid {
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
} .blog-single {
padding: 8px 0 48px;
}
.blog-single__container {
max-width: 1152px;
margin: 0 auto;
padding: 0 16px;
display: flex;
flex-direction: column;
gap: 24px;
}
.blog-single__category {
display: inline-block;
}
.blog-single__title {
margin-top: 12px;
font-size: 25px;
line-height: 32px;
font-weight: 700;
color: #101828;
}
.blog-single__content.entry-content {
max-width: none;
margin-top: 16px;
padding: 0;
}
.blog-single__share {
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid #e5e7eb;
text-align: center;
}
.blog-single__share-text {
font-size: 14px;
color: #6a7282;
}
.blog-single__share-icons {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 12px;
}
.blog-single__share-icons img {
width: 36px;
height: 36px;
}
.blog-single__aside {
display: flex;
flex-direction: column;
gap: 16px;
}
.blog-single__date-card {
padding: 16px;
background-color: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 16px;
font-size: 14px;
font-weight: 600;
color: #364153;
}
.blog-single__widget {
padding: 16px;
background-color: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 16px;
}
.blog-single__widget-title {
font-size: 16px;
line-height: 24px;
font-weight: 700;
color: #101828;
}
.blog-single__widget-list {
margin-top: 12px;
display: flex;
flex-direction: column;
gap: 10px;
list-style: none;
}
.blog-single__widget-list a {
font-size: 14px;
line-height: 20px;
color: #364153;
text-decoration: none;
}
.blog-single__widget-list a:hover {
color: #155dfc;
}
.blog-single__author {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
background-color: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 16px;
}
.blog-single__author-photo {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.blog-single__author-name {
display: block;
font-size: 14px;
font-weight: 700;
color: #101828;
text-decoration: none;
}
.blog-single__author-label {
margin-top: 2px;
font-size: 12px;
color: #6a7282;
}
.blog-single__related {
padding-top: 0;
}
@media (min-width: 1024px) {
.blog-single {
padding: 16px 0 64px;
}
.blog-single__container {
flex-direction: row;
align-items: start;
gap: 48px;
}
.blog-single__main {
flex: 1;
min-width: 0;
}
.blog-single__title {
font-size: 34px;
line-height: 40px;
}
.blog-single__aside {
width: 320px;
flex-shrink: 0;
}
}
.contacts__map {
margin-top: 24px;
border-radius: 12px;
overflow: hidden;
border: 1px solid #e5e7eb;
}
.contacts__map iframe {
display: block;
width: 100%;
height: 360px;
}
@media (min-width: 1024px) {
.contacts__map iframe {
height: 450px;
}
}
@media (min-width: 1024px) {
.services-pricing {
padding: 48px 0;
}
.services-pricing__header {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.services-pricing__title {
font-size: 25px;
line-height: 28px;
}
.services-pricing__grid {
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
} .promo {
background-color: #155dfc;
padding: 32px 0;
}
.promo__container {
max-width: 1152px;
margin: 0 auto;
padding: 0 16px;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
text-align: center;
}
.promo__avatar {
width: 85px;
height: auto;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
flex-shrink: 0;
}
.promo__body {
min-width: 0;
}
.promo__title {
font-size: 20px;
line-height: 28px;
font-weight: 700;
color: #ffffff;
}
.promo__text {
margin-top: 8px;
font-size: 14px;
line-height: 20px;
color: #ffffff;
}
.promo__button {
display: inline-flex;
align-items: center;
justify-content: center;
height: 48px;
padding: 0 24px;
background-color: #ffffff;
border-radius: 8px;
color: #155dfc;
font-size: 16px;
font-weight: 600;
flex-shrink: 0;
}
@media (min-width: 1024px) {
.promo__container {
flex-direction: row;
text-align: left;
gap: 32px;
}
.promo__avatar {
width: 112px;		
}
.promo__body {
flex: 1 0 0;
}
} .diagnostics {
background-color: #101828;
padding: 40px 0;
}
.diagnostics__container {
max-width: 1152px;
margin: 0 auto;
padding: 0 16px;
}
.diagnostics__title {
font-size: 20px;
line-height: 28px;
font-weight: 700;
color: #ffffff;
}
.diagnostics__text {
margin-top: 12px;
font-size: 14px;
line-height: 20px;
color: #d1d5dc;
}
.diagnostics__list {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
margin-top: 32px;
list-style: none;
}
.diagnostics__item {
display: flex;
gap: 16px;
align-items: flex-start;
position: relative;
}
.diagnostics__item:not(:last-child)::after {
content: '';
position: absolute;
left: 21px;
top: 44px;
width: 2px;
height: 105%;
background-color: #d1d5dc;
opacity: 0.3;
}
.diagnostics__number {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background-color: #155dfc;
color: #ffffff;
font-size: 22px;
font-weight: 700;
flex-shrink: 0;
}
.diagnostics__item-text {
padding-top: 8px;
font-size: 14px;
line-height: 20px;
font-weight: 600;
color: #ffffff;
}
.diagnostics__form {
margin-top: 32px;
background-color: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 16px;
padding: 24px;
box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.1);
}
.diagnostics__form-title {
font-size: 20px;
line-height: 28px;
font-weight: 700;
color: #101828;
}
.diagnostics__form-text {
margin-top: 4px;
font-size: 12px;
line-height: 20px;
color: #6a7282;
}
.diagnostics__fields {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 20px;
}
.diagnostics__field {
display: flex;
flex-direction: column;
}
.diagnostics__label {
margin-bottom: 6px;
font-size: 12px;
line-height: 16px;
font-weight: 500;
color: #4a5565;
}
.diagnostics__input {
height: 42px;
padding: 0 12px;
border: 1px solid #d1d5dc;
border-radius: 8px;
font-family: inherit;
font-size: 14px;
color: #364153;
}
.diagnostics__input::placeholder {
color: #364153;
opacity: 0.5;
}
.diagnostics__input:focus {
outline: 2px solid #155dfc;
outline-offset: 1px;
}
.diagnostics__submit {
padding: 12px 0;
background-color: #155dfc;
border: none;
border-radius: 8px;
color: #ffffff;
font-family: inherit;
font-size: 16px;
font-weight: 600;
text-align: center;
cursor: pointer;
}
@media (min-width: 1024px) {
.diagnostics {
padding: 48px 0;
}
.diagnostics__title {
font-size: 25px;
line-height: 28px;
}
.diagnostics__list {
grid-template-columns: none;
grid-template-rows: repeat(2, auto);
grid-auto-flow: column;
grid-auto-columns: 1fr;
column-gap: 64px;
row-gap: 32px;
}
.diagnostics__item:nth-child(2n)::after {
display: none;
}
.diagnostics__fields {
flex-direction: row;
align-items: flex-end;
gap: 16px;
}
.diagnostics__field {
flex: 1 0 0;
min-width: 0;
}
.diagnostics__submit {
flex: 1 0 0;
min-width: 0;
}
} .modal {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.modal[hidden] {
display: none;
}
.modal__backdrop {
position: absolute;
inset: 0;
background-color: rgba(17, 24, 39, 0.5);
}
.modal__panel {
position: relative;
width: 100%;
max-width: 400px;
max-height: calc(100vh - 32px);
overflow-y: auto;
background-color: #ffffff;
border-radius: 16px;
padding: 24px;
box-shadow: 0 1px 13.35px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.1);
}
.modal__close {
position: absolute;
top: 16px;
right: 16px;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 8px;
background-color: #f3f4f6;
flex-shrink: 0;
}
.modal__title {
padding-right: 32px;
font-size: 20px;
line-height: 28px;
font-weight: 700;
color: #101828;
}
.modal__text {
margin-top: 4px;
font-size: 12px;
line-height: 20px;
color: #6a7282;
}
.modal__form {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 20px;
}
.modal__field {
display: flex;
flex-direction: column;
}
.modal__label {
margin-bottom: 6px;
font-size: 12px;
line-height: 16px;
font-weight: 500;
color: #4a5565;
}
.modal__input {
height: 42px;
padding: 0 12px;
border: 1px solid #d1d5dc;
border-radius: 8px;
font-family: inherit;
font-size: 14px;
color: #364153;
}
.modal__input::placeholder {
color: #364153;
opacity: 0.5;
}
.modal__input:focus {
outline: 2px solid #155dfc;
outline-offset: 1px;
}
.modal__submit {
padding: 12px 0;
background-color: #155dfc;
border: none;
border-radius: 8px;
color: #ffffff;
font-family: inherit;
font-size: 16px;
font-weight: 600;
text-align: center;
} .how-repair__form .title-b,
.how-repair__form .title-b + p,
.modal__form .title-b,
.modal__form .title-b + p,
.diagnostics__fields .title-b,
.diagnostics__fields .title-b + p {
display: none;
}
.how-repair__form .wpcf7-form,
.modal__form .wpcf7-form,
.diagnostics__fields .wpcf7-form {
display: flex;
flex-direction: column;
gap: 16px;
} .modal__form .title {
font-size: 20px;
line-height: 28px;
font-weight: 700;
color: #101828;
}
.modal__form .text {
font-size: 14px;
line-height: 20px;
color: #6a7282;
}
.modal__form .accept {
font-size: 12px;
line-height: 16px;
color: #6a7282;
}
.modal__form .accept a {
color: #155dfc;
text-decoration: underline;
}
.how-repair__form input.wpcf7-form-control,
.modal__form input.wpcf7-form-control,
.diagnostics__fields input.wpcf7-form-control {
width: 100%;
height: 42px;
padding: 0 12px;
border: 1px solid #d1d5dc;
border-radius: 8px;
font-family: inherit;
font-size: 14px;
color: #364153;
}
.how-repair__form input.wpcf7-form-control::placeholder,
.modal__form input.wpcf7-form-control::placeholder,
.diagnostics__fields input.wpcf7-form-control::placeholder {
color: #364153;
opacity: 0.5;
}
.how-repair__form input.wpcf7-form-control:focus,
.modal__form input.wpcf7-form-control:focus,
.diagnostics__fields input.wpcf7-form-control:focus {
outline: 2px solid #155dfc;
outline-offset: 1px;
}
.how-repair__form input.wpcf7-submit,
.modal__form input.wpcf7-submit,
.diagnostics__fields input.wpcf7-submit {
width: 100%;
padding: 12px 0;
background-color: #155dfc;
border: none;
border-radius: 8px;
color: #ffffff;
font-family: inherit;
font-size: 16px;
font-weight: 600;
text-align: center;
cursor: pointer;
}
.how-repair__form .wpcf7-response-output,
.modal__form .wpcf7-response-output,
.diagnostics__fields .wpcf7-response-output {
margin: 8px 0 0;
padding: 8px 12px;
border-radius: 8px;
font-size: 13px;
}
.how-repair__form .wpcf7-not-valid-tip,
.modal__form .wpcf7-not-valid-tip,
.diagnostics__fields .wpcf7-not-valid-tip {
display: block;
margin-top: 4px;
font-size: 12px;
color: #e7000b;
}
.how-repair__form .wpcf7-spinner,
.modal__form .wpcf7-spinner,
.diagnostics__fields .wpcf7-spinner {
margin: 8px auto 0;
}
@media (min-width: 1024px) {
.modal__panel {
padding: 32px;
}
.modal__title {
font-size: 25px;
line-height: 28px;
}
.modal__text {
font-size: 14px;
line-height: 20px;
}
} .equipment {
padding: 40px 0;
border-bottom: 1px solid #f3f4f6;
}
.equipment__container {
max-width: 1152px;
margin: 0 auto;
padding: 0 16px;
}
.equipment__title {
font-size: 20px;
line-height: 28px;
font-weight: 700;
color: #101828;
}
.equipment__text {
margin-top: 12px;
font-size: 14px;
line-height: 20px;
color: #364153;
}
.equipment__list {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
margin-top: 24px;
list-style: none;
}
.equipment__item {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
background-color: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 12px;
font-size: 14px;
line-height: 20px;
color: #364153;
box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.1);
}
.equipment__item-icon {
flex-shrink: 0;
margin-top: 1px;
}
.equipment__note {
margin-top: 24px;
padding: 16px;
background-color: #f9fafb;
border: 1px solid #e5e7eb;
border-left: 3px solid #155dfc;
border-radius: 16px;
}
.equipment__note-title {
font-size: 14px;
line-height: 20px;
font-weight: 700;
color: #101828;
}
.equipment__note-text {
margin-top: 4px;
font-size: 14px;
line-height: 20px;
color: #364153;
} .services-pricing__included {
margin-top: 24px;
padding: 16px;
background-color: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 16px;
}
.services-pricing__included-title {
font-size: 14px;
line-height: 20px;
font-weight: 700;
color: #101828;
}
.services-pricing__included-list {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
margin-top: 12px;
list-style: none;
}
.services-pricing__included-item {
display: flex;
gap: 12px;
align-items: flex-start;
font-size: 14px;
line-height: 20px;
color: #364153;
}
.services-pricing__included-item img {
flex-shrink: 0;
margin-top: 1px;
}
@media (min-width: 1024px) {
.equipment__title {
font-size: 25px;
line-height: 28px;
}
.equipment__list {
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.equipment__item {
padding: 16px 20px;
}
.equipment__note {
margin-top: 32px;
padding: 20px 24px;
}
.services-pricing__included {
margin-top: 32px;
padding: 20px 24px;
}
.services-pricing__included-list {
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
} .footer__logo { filter: brightness(0) invert(1); }