html,
body, p, ul {
margin: 0;
padding: 0;
}
body {
/*font-family: 'Roboto', 'Arila', sans-serif;*/
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a {
text-decoration: none;
color: #fff;
transition: 0.5s;
}
a:hover {
text-decoration: none;
color: #fed204;
transition: 0.5s;
}
button {
border: none;
text-align: center;
cursor: pointer;
transition: 0.5s;
}
button:hover {
transition: 0.5s;
}
:root {
--main-orange: #FED204;
--main-blue: #1A3972;
/*--main-site-name: "http://sg-calc.ru/";*/
}
/* Animations */
.line-anim {
position: relative;
overflow: hidden;
}
.line-anim:after {
content: '';
display: block;
width: 30px;
height: 300px;
margin-left: 60px;
background: #fff;
position: absolute;
left: -40px;
top: -150px;
z-index: 1;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.1s;
transition: all 0.1s;
-webkit-animation-name: slideme;
animation-name: slideme;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-delay: 0.05s;
animation-delay: 0.05s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/* ALL */
.section__title {
display: inline-block;
font-size: 34px;
font-weight: 700;
border-bottom: 2px solid var(--main-orange);
margin-top: 50px;
margin-bottom: 30px;
}
/* OTHER */
.container {
width: 90%;
height: 100%;
margin: 0 auto;
}
.btn {
width: 100%;
border: none;
background-color: #fed204;
cursor: pointer;
font-weight: 700;
padding: 5px 0;
transition: 0.5s;
}
.btn:hover {
background-color: #000;
color: #fff;
transition: 0.5s;
}
.icon {
display: block;
width: 20px;
height: 20px;
background-size: cover;
}
.icon {
display: inline-block;
width: 20px;
height: 20px;
}
/* HEADER */
.header {
height: 100px;
}
.header-wrap {
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.header-item:not(:first-child) {
margin-top: 22px;
}
.header-item__logo {
display: block;
height: 90px;
aspect-ratio: 2.25 / 1;
}
.header-item__text {
font-size: 18px;
font-weight: 700;
text-align: center;
line-height: 1.4;
}
.header-tel__btn {
margin-top: 0px;
}
.header-item.last .header-item__text {
line-height: 1;
margin-bottom: 5px;
}
/* NAV */
.nav {
width: 100%;
height: 45px;
border-bottom: 2px solid #fed204;
box-sizing: border-box;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 100px;
transition: height 0.5s;
z-index: 100;
}
.nav.scroll {
position: fixed;
top: 0;
}
.nav.scroll .nav-menu__li.anim {
position: relative;
overflow: hidden;
}
.nav.scroll .nav-menu__li.anim a {
color: var(--main-orange);
}
.nav.scroll .nav-menu__li.anim a:hover {
color: #fff;
}
.nav.scroll .nav-menu__li.anim:after {
content: "";
display: block;
width: 30px;
height: 300px;
margin-left: 60px;
background: #fff;
position: absolute;
left: -40px;
top: -150px;
z-index: 1;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.1s;
transition: all 0.1s;
-webkit-animation-name: slideme;
animation-name: slideme;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-delay: 0.05s;
animation-delay: 0.05s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.nav-wrap {
height: 100%;
position: relative;
}
.nav-menu {
width: 100%;
height: 100%;
list-style-type: none;
display: flex;
justify-content: space-between;
align-items: center;
color: #fff;
font-size: 16px;
font-weight: 700;
}
/*.nav.scroll .nav-menu {
height: 100vh;
}*/
.header-item__icon.icon {
width: 14px;
height: 14px;
margin-right: 2px;
background: url('../images/icons/phone-green.svg');
background-size: cover;
}
.nav-menu__a.icon {
background: url('../images/icons/home_white.svg');
background-size: cover;
}
.nav-hidden {
height: 100%;
display: none;
justify-content: space-between;
align-items: center;
}
.nav-hidden__toggle.icon {
background: url('../images/icons/hamb_white.svg');
background-size: cover;
width: 45px;
height: 45px;
border: none;
outline: none;
transition: 0s;
}
.nav-hidden__toggle.icon.close {
background: url('../images/icons/close_white.svg');
background-size: cover;
width: 35px;
height: 35px;
margin-right: 5px;
margin-left: 5px;
}
/* item 1 */
.nav-menu-item.svg {
width: 30px;
height: 30px;
}
.nav-menu-item.svg svg {
width: 100%;
height: 100%;
fill: #fff;
}
/* item 2 */
.nav-menu-item__whatsup {
width: 35px;
height: 35px;
background: url('../images/icons/whatsup.png');
background-size: cover;
}
.social-icon {
width: 30px;
height: 30px;
background-color: transparent;
background-image: none;
background-size: cover;
border: none;
outline: none;
margin-left: 12px;
}
.social-icon__whatsup {
background-image: url('../images/icons/whatsup.png');
}
.social-icon__telegram {
background-image: url('/images/icons/telegram.png');
}
.nav-menu-item__telegram {
width: 40px;
height: 37px;
background: url('../images/icons/telegram.png');
background-size: auto;
background-size: cover;
margin-top: 2px;
}
.header-item.last .nav-menu-item__telegram {
height: 40px;
margin: 0 20px 0 0;
}
/* item 3 */
.nav-menu-item:nth-child(3) {
height: 100%;
}
.nav-menu-item__btn {
height: 100%;
width: 100%;
font-weight: 700;
background-color: #fed204;
margin: 0 auto;
}
/* SLIDER */
.slider {
height: 100vh;
height: calc((var(--vh, 1vh) * 100) - 100px);
position: relative;
overflow: hidden;
}
.slider:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
z-index: 3;
background-color: rgba(0, 0, 0, 0.3);
}
.slider-first {
background-image: url('../images/slider/header1.jpeg');
}
.slider-first,
.slider-last {
background-size: cover;
height: 100%;
width: 100%;
position: absolute;
z-index: 0;
}
.slider-last {
z-index: 1;
transform: translateX(0);
transition: 1s;
}
.slider-last.right {
transform: translateX(100%);
transition: 0s;
}
.slider-last.left {
transform: translateX(-100%);
transition: 0s;
}
.slider-wrap {
height: 100%;
position: relative;
}
.slider-text {
width: 100%;
/*margin-top: 0;
opacity: 1;*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
color: #fff;
font-weight: 400;
text-align: center;
transition: 0.25s;
}
.slider-text.down {
margin-top: 200px;
opacity: 0;
transition: 0.25s;
}
.slider-test__title {
font-size: 44px;
font-family: Arial, sans-serif;
font-weight: 400;
}
.slider-test_desc {
font-size: 20px;
line-height: 30px;
}
.slider-arrows {
width: 100%;
padding: 0 20px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
z-index: 10;
}
.slider-arrows_btn {
display: block;
width: 38px;
height: 38px;
background-color: #111;
border-radius: 50%;
border: none;
cursor: pointer;
box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
position: relative;
transition: 0.25s;
}
.slider-arrows_btn:hover {
background-color: #111;
transition: 0.25s;
}
.slider-arrows_btn:after {
content: '';
display: block;
width: 12px;
height: 12px;
background: transparent;
border: solid #fff;
border-width: 0 3px 3px 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-42%, -50%) rotate(135deg);
z-index: 10;
}
.slider-arrows_btn.right:after {
transform: translate(-58%, -50%) rotate(-45deg);
}
.slider-arrows_btn:focus {
outline: none;
}
.slider-status {
display: flex;
justify-content: space-between;
width: 90px;
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
}
.slider-status__item {
width: 20px;
height: 20px;
padding: 0;
background-color: transparent;
border: 2px solid #fff;
border-radius: 50%;
cursor: pointer;
position: relative;
transition: 0.5s;
}
.slider-status__item:after {
content: '';
width: 10px;
height: 10px;
background-color: transparent;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: 0.5s;
}
.slider-status__item:hover {border-color: orange;}
.slider-status__item:hover:after {background-color: orange;}
.slider-status__item.active:after {background-color: #fff;}
.slider-status__item.active:hover:after {background-color: orange;}
.slider__btn {
border: none;
padding: 15px 30px;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
color: #000;
background-color: #fed204;
position: absolute;
bottom: 100px;
left: 50%;
z-index: 10;
transform: translateX(-50%);
cursor: pointer;
}
.slider__btn:hover {
background-color: #000;
color: #fff;
}
/* benefits */
.benefits {
text-align: center;
}
.benefits-content {
display: flex;
flex-wrap: wrap;
justify-content: center; /* new*/
}
.benefits-item {
width: calc(100%/3);
/*background-color: var(--main-orange);*/
box-shadow: 4px 4px 13px #000000;
padding-bottom: 90px;
transition: 0.25s;
position: relative;
}
.benefits-content .benefits-item {
margin-right: 8px;
box-shadow: 0px 0px 8px var(--main-orange) !important;
width: calc(100%/3.5) !important;
background-color: #fff;
}
.benefits-content .benefits-item:nth-child(1),
.benefits-content .benefits-item:nth-child(2),
.benefits-content .benefits-item:nth-child(3) {
margin-bottom: 20px;
}
.benefits__inner .benefits-item {
padding-bottom: 0px;
}
.benefits-item:hover {
transform: scale(1.12);
z-index: 3;
transition: 0.25s;
}
.benefits-item:nth-child(2n) {
/*background-color: #1A3972;
color: #fff;*/
color: #000;
box-shadow: 0px 0px 8px #1A3972 !important;
}
.benefits-item__title {
font-size: 20px;
font-weight: 700;
margin-bottom: 1rem;
margin-top: 2rem;
}
.benefits-item__text {
font-size: 14px;
margin-bottom: 1rem;
}
.benefits-item__icon {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
/* services */
.services {
text-align: center;
}
.services-content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.services-content.hidden {
height: 0;
overflow: hidden;
display: none;
}
.services-item {
width: 23%;
margin-bottom: 30px;
position: relative;
}
.services-item:after {
display: block;
content: '';
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 5px;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
.services-item__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 5px;
aspect-ratio: 4 / 3;
}
.services-item__text {
text-transform: uppercase;
color: #fff;
font-size: 18px;
font-weight: 700;
padding: 0 5px;
box-sizing: border-box;
width: 100%;
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
transform: translate(-50%, -50%);
}
.services-item__btn {
background-color: #fff;
padding: 0 22px;
font-size: 16px;
color: #000;
height: 40px;
line-height: 34px;
position: absolute;
left: 50%;
z-index: 1;
transform: translateX(-50%);
bottom: -20px;
cursor: pointer;
width: max-content;
box-sizing: border-box;
border: 3px solid lightblue;
border-radius: 20px;
}
.services-item__btn:hover {
color: #fff;
background-color: var(--main-orange);
}
.services__btn {
width: 40%;
height: 50px;
background-color: transparent;
border: 3px solid lightblue;
border-radius: 50px;
font-size: 24px;
margin: 20px 0 0;
margin-bottom: 40px;
}
.services__btn:hover {
background-color: var(--main-orange);
}
.works_btn {
background-color: #fff;
border: 5px solid lightblue;
}
.works_btn-img {
height: 90%;
margin-bottom: 2px;
}
.works_btn:hover {
color: #fff;
background-color: #000;
}
/* MASTERS */
.masters {
text-align: center;
background-size: cover;
background-image: url(../images/bg/mramor.jpg);
background-repeat: no-repeat;
padding-bottom: 40px;
margin-top: 0;
}
.masters-wrap {
padding: 0;
/*background-image: url('../images/bg/mramor.jpg');*/
margin-top: 10px;
background-repeat: no-repeat;
background-size: cover;
}
.masters-content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.masters-item {
width: 12%;
color: #000;
text-decoration: underline;
}
.masters-item:hover {
transform: scale(1.2);
color: #3066be;
text-decoration: underline;
}
.masters-item_img {
width: 100%;
box-shadow: 4px 4px 13px #000000;
margin-bottom: 10px;
border-radius: 50%;
border: 2px solid var(--main-orange);
aspect-ratio: 1 / 1;
}
.masters-item__name {
text-decoration: underline;
display: inline-block;
line-height: 20px;
font-size: 22px;
}
.masters-item__time {
font-size: 14px;
}
/* ABOUT */
.about {
/*margin-top: 50px;*/
}
.about-wrap {
padding: 0 30px 30px;
/*border: 2px solid var(--main-orange);*/
}
.about__title {
display: inline-block;
font-size: 28px;
margin-bottom: 10px;
border-bottom: 2px dashed var(--main-orange);
}
.about__text {
font-size: 20px;
text-align: left;
margin-top: 20px;
}
.about__text:nth-child(1) {
margin-top: 0;
}
/* TOOLS */
.tools {
text-align: center;
}
/* tools-slider */
.tools-slider {
width: 45%;
aspect-ratio: 1.5 / 1;
background-image: url('../images/tools/benefits-1.jpg');
background-size: cover;
position: relative;
}
.tools-slider-buttons {
display: flex;
width: 95%;
justify-content: space-between;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%);
cursor: pointer;
}
.tools-slider__btn {
width: 25px;
height: 40px;
position: relative;
}
.tools-slider__btn:before {
content: '';
width: 3px;
height: 25px;
background-color: var(--main-orange);
transform: rotate(45deg) translateY(-45%);
position: absolute;
top: 25%;
}
.tools-slider__btn:after {
content: '';
width: 3px;
height: 25px;
background-color: var(--main-orange);
transform: rotate(-45deg) translateY(45%);
position: absolute;
top: 25%;
}
.tools-slider__btn.right {
transform: scaleX(-1.0);
}
.tools-slider__btn:hover:before,
.tools-slider__btn:hover:after {
background-color: #000;
}
/* START */
/* Map Modal Form */ /* +FILTER */
.map-modal {
opacity: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
z-index: 999;
pointer-events: none;
cursor: pointer;
transition: 0.25s;
}
.map-modal.active {
opacity: 1;
pointer-events: auto;
transition: 0.25s;
}
.map-modal__content {
display: block;
width: 600px;
height: auto;
padding: 40px;
box-sizing: border-box;
background-color: #fff;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
cursor: default;
}
.map-modal__content-title {
font-weight: 700;
font-size: 30px;
line-height: 1.2;
}
.map-modal__content-info {
color: #999999;
margin: 20px 0;
}
.map-modal__close {
width: 24px;
height: 24px;
border: none;
border-radius: 0;
background: none;
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
position: absolute;
top: 40px;
right: 40px;
z-index: 3;
cursor: pointer;
}
.map-modal__close:after,
.map-modal__close:before {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 24px;
margin-left: -12px;
height: 2px;
background: #777;
-webkit-transition: background 0.3s;
-o-transition: background 0.3s;
transition: background 0.3s;
}
.map-modal__close:after {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.map-modal__close:before {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.map-modal__send {
color: #000;
background-color: var(--main-orange);
border: none;
padding: 10px 60px !important;
font-size: 18px;
cursor: pointer;
transition: 0.25s;
margin-top: 0px !important;
}
.map-modal__send:hover {
background-color: #000;
color: #fff;
transition: 0.25s;
}
.map-modal__input {
font-size: 14px;
line-height: 20px;
padding: 15px 25px;
box-sizing: border-box;
border: 1px solid #dcdcdc;
display: block;
width: 100%;
border-radius: 0;
color: #000;
-webkit-transition: border-color 0.3s;
-o-transition: border-color 0.3s;
transition: border-color 0.3s;
background: #fff;
font-family: inherit;
margin-bottom: 20px;
}
.map-modal__success,
.form-control__success {
margin-top: 5px;
opacity: 0;
color: green;
transition: 0.25s;
text-align: center;
}
.map-modal__success.active,
.form-control__success.active {
opacity: 1;
transition: 0.25s;
}
.modal-presonal {
color: #000;
text-decoration: underline;
}
.map-modal__send-wrap {
width: 100%;
text-align: center;
}
/* END */
.works__button {
border: 3px solid lightblue;
background-color: #fff;
margin-bottom: 5px;
}
.works__button:hover {
background-color: var(--main-orange);
}
.works__button.btn-active {
border: 3px solid var(--main-orange);
}
.benefits__inner {
display: flex;
text-align: left;
}
.our-tools__text-inner {
width: 95%;
font-size: 20px;
margin-top: 30px;
}
.footer-logo {
height: 80%;
margin-top: 5px;
}
@media screen and (max-width: 960px) {
.section__title {
margin-top: 50px;
margin-bottom: 20px;
}
/* HEADER */
.header-wrap {
justify-content: space-around;
}
.header-item.hide960 {
display: none;
}
.benefits__inner {
display: flex;
flex-direction: column;
}
.our-tools__text {
margin-bottom: 30px;
}
/* NAV */
.nav .container {
width: 100%;
}
.nav-menu {
display: none;
height: calc(100vh - 145px);
height: 450px;
position: absolute;
bottom: -2px;
left: 0;
padding: 20px 0;
box-sizing: border-box;
transform: translateY(100%);
background-color: rgba(0, 0, 0, 0.7);
flex-direction: column;
justify-content: space-between;
}
.nav-hidden {
padding: 0 20px;
display: flex;
}
/* SECTION */
.slider-test__title {
font-size: 26px;
}
.slider-test_desc {
font-size: 20px;
}
/* benefits */
.benefits-item {
padding-bottom: 100px;
}
.benefits-item__text {
width: 80%;
margin: 0 auto;
}
/* MASTERS */
.masters-item {
width: 30%;
margin-bottom: 40px;
}
/* MODAL */
}
@media screen and (max-width: 720px) {
/* OTHER */
.section__title {
margin-top: 40px;
margin-bottom: 15px;
}
.header-tel__btn,
.nav-menu-item__btn {
font-size: 14px!important;
}
.nav-menu-item:nth-child(2),
.nav-menu-item:nth-child(4) {
padding: 0px 0 0;
}
.benefits-item:nth-child(4) {
margin-bottom: 20px;
}
/* SLIDER */
.slider-test__title {
font-size: 24px;
}
.slider-test_desc {
font-size: 18px;
}
.slider-test_desc br {
display: none;
}
.slider-arrows {
padding: 0 5px;
}
.slider-text {
width: 80%;
top: 25%;
transform: translate(-50%, 0%);
}
/* benefits */
.benefits-item
{
width: 50%;
padding-bottom: 100px;
}
.benefits-content .benefits-item {
width: 45% !important;
}
/* services */
.services-item {
width: 47%;
}
.services__btn {
width: 90%;
}
/* ABOUT */
.about__title {
font-size: 24px;
}
.about__text {
font-size: 18px;
}
/* MODAL */
.map-modal__content {
width: 90%;
}
.map-modal__close {
top: 20px;
right: 20px;
}
}
@media screen and (max-width: 480px) {
.benefits-item__icon.logos{
bottom: 0px !important;
}
.benefits-item__icon.logos .petrovich{
z-index: 11;
width:120px;
height:50px;
}
.benefits-item__icon.logos .maxidom{
width:70px;
height:50px;
}
.benefits-item__icon.logos .leroy{
width:70px;
height:70px;
margin-top: -20px;
}
.tovar img,.tovar, video{
border-radius: 20px !important;
}
.tovar{
height:auto !important;
}
.btn_master{
width: 100%;
border: none;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
color: #000;
background-color: #fed204;
}
.section__title {
margin-top: 30px;
margin-bottom: 10px;
}
.container {
width: 95%;
}
/* ALL */
.section__title {
font-size: 28px;
}
.our-tools__text-inner {
font-size: 16px;
}
.masters-item__name {
font-size: 20px;
}
/* HEADER */
.header-wrap {
justify-content: space-between;
}
.header-item__logo {
height: 80px;
}
.header-item__text.hide480 {
display: none;
}
.header-tel__btn {
padding: 10px 0px;
background-color: #fff;
border: 1px solid #000;
border-radius: 0;
}
.header-item.last {
width: 40%;
margin-top: 16px
}
.nav-hidden {
padding: 0 20px;
}
/* SECTION */
.slider-text {
width: 100%;
top: 22%;
}
.slider-test__title {
width: 75%;
margin: 0 auto;
margin-bottom: 20px;
/*font-size: 22px;*/
}
.mobile{
font-size: 16px !important;
text-decoration: line-through;
}
.slider-test_desc {
width: 70%;
margin: 0 auto;
font-size: 16px;
line-height: 18px;
}
.slider__btn {
width: 80%;
height: 50px;
bottom: 80px;
padding: 0;
}
/* benefits */
.benefits-item {
width: 50%;
padding-bottom: 100px;
}
.benefits-content .benefits-item {
width: 45% !important;
}
.benefits-item__title {
font-size: 16px;
}
.benefits-item__text {
font-size: 12px;
}
/* services */
.services-item__text {
font-size: 12px;
}
.services-item__btn {
font-size: 14px;
height: 30px;
line-height: 25px;
bottom: -15px;
padding: 0 12px;
}
/* ABOUT */
.about-wrap {
padding: 10px;
}
.about__title {
font-size: 20px;
}
.about__text {
font-size: 16px;
}
/* MODAL */
.map-modal__content {
padding: 10px 20px;
}
.map-modal__close {
top: 10px;
right: 10px;
}
.map-modal__content-info {
font-size: 12px;
}
.map-modal__send {
margin: 10px auto 0;
}
.map-modal__input {
padding: 10px 25px;
}
.map-modal__success,
.form-control__success {
font-size: 15px;
}
}
@media screen and (max-width: 480px) and (min-height: 550px) {
.slider-text {
top: 50%;
transform: translate(-50%, -50%);
}
}
@media screen and (min-width: 1481px) {
.works__buttons {
width: 100%;
justify-content: space-between;
}
.works__buttons li {
width: calc(100%/8);
}
.works__buttons li a {
width: 100%;
padding: 15px 10px;
height: 100%;
}
.works-slider__item-img img {
max-width: 100%;
height: auto;
max-height: 300px;
}
}
.btn_master{
border: none;
padding: 15px 30px;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
color: #000;
background-color: #fed204;
position: absolute;
left: 50%;
z-index: 10;
transform: translateX(-50%);
}
.footer{
/*margin-top: 120px;*/
}
.btn_master:hover {
background-color: #000;
color: #fff;
}
.nav-menu-item .social-icon.social-icon__vk{
width: 35px;
height: 35px;
margin: 0;
}
.fives {
position: relative;
padding: 53px 0px 0px 0px;
}
.wrap_step {
text-align: center;
padding-top: 35px;
font-size: 0;
padding-left: 16px;
}
.wrap_step::after {
display: inline-block;
content: '';
width: 100%;
}
.step_item {
display: inline-block;
vertical-align: top;
width: 381px;
position: relative;
margin-bottom: 53px;
}
.step_item_down::after {
content: '';
display: inline-block;
background: url(../images/step_donw.png) repeat-y 0px 0px;
width: 6px;
height: 249px;
position: absolute;
left: 60px;
top: 64px;
}
.step_item span {
display: inline-block;
vertical-align: top;
text-align: center;
font-size: 48px;
background-color: var(--main-orange);
color: #fff;
width: 52px;
line-height: 52px;
border-radius: 15px;
}
.step_item p {
display: inline-block;
vertical-align: top;
text-align: left;
/*color: #fff;*/
font-size: 16px;
width: 250px;
padding-left: 10px;
}
.step_item_r + .step_item_r::before {
content: '';
display: inline-block;
background: url(../images/step_r.png) no-repeat 0px 0px;
width: 105px;
height: 6px;
position: absolute;
left: -85px;
top: 25px;
}
.step_item_l + .step_item_l::before {
content: '';
display: inline-block;
background: url(../images/step_l.png) no-repeat 0px 0px;
width: 95px;
height: 6px;
position: absolute;
left: -72px;
top: 25px;
}
.step-inner{
display: inline-block;
text-align: left;
width: 70%;
}
.step-inner h8{
font-size: 17px;
font-weight: 700;
text-align: left;
padding-left: 10px;
}
.four2{
display:none;
}
.step_item.step_item_l.five::before {
display:none;
}
@media screen and (max-width: 810px) {
.callback__content{
padding: 50px 0px !important;
}
.callback__inner{
display: flex !important;
flex-direction: column !important;
flex-wrap: wrap !important;
}
.callback__info, .callback__form{
width: 100% !important;
}
.callback__info{
text-align: center !important;
}
.callback__form{
margin-top: 20px !important;
padding: 30px 20px 0 20px !imprtant;
}
.step_item.step_item_l.five::before {
display:inline-block;
}
.four2{
display:inline-block;
}
.four, .six{
display:none;
}
.step_item_r + .step_item_r::before {
background: url(../images/step_donw.png) no-repeat 0px 0px;
left: 55px;
top: -68px;
height: 64px;
}
.step_item_r + .step_item_r:nth-child(odd)::before {
left: 55px;
top: -108px;
height: 100px;
background: url(../images/step_donw.png) no-repeat 0px 0px;
}
.step_item_r + .step_item_r:nth-child(odd)::after {
height: 80px;
left: 58px;
}
.step_item_r + .step_item_r:nth-child(odd)::before {
left: 55px;
top: -260px;
height: 255px;
background: url(../images/step_donw.png) repeat-y 0px 0px;
}
.step_item_l + .step_item_l::before{
background: url(../images/step_donw.png) no-repeat 0px 0px;
height: 60px;
left: 58px;
top: -65px;
}
.step_item{
width: 100%;
}
}
.callback__content {
/*background: linear-gradient(180deg, #167FB7 0%, #7CD1FF 100%);*/
padding: 90px 0px;
}
.callback__inner {
max-width: 1390px;
margin: 0 auto;
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.callback__info {
width: 600px;
margin-right: 30px;
}
.callback__form {
width: 60%;
padding: 40px 50px 0 50px;
/*background: #167FB7;*/
box-shadow: 0px 0px 8px #1A3972;
border-radius: 30px;
}
#reviews .benefits-item__slider {
box-shadow: none !important;
}
#reviews .benefits__item.benefits-item{
width: 80% !important;
border: none !important;
box-shadow: unset !important;
}
#reviews .benefits-item:hover {
transform: unset;
}
#reviews .benefits-item__slider::before {
display: none;
}
#reviews {
margin-bottom: 50px;
}
.navigation__prev, .navigation__next {
width: 37px;
height: 37px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid #000000;
flex: 0 0 auto;
background: none;
}
.tovars__container {
overflow: hidden;
max-width: 1654px;
margin: 0 auto;
margin-top: 0px;
margin-top: 70px;
position: relative;
padding: 20px;
}
.tovars__nav-inner {
display: flex;
align-items: center;
margin-top: 34px;
}
.tovars__container .swiper-pagination-progressbar.swiper-pagination-horizontal {
height: 8px;
background: #F5F5F5;
}
.tovars__container .swiper-pagination-progressbar-fill {
background: var(--main-orange);
}
.navigation {
display: flex;
align-items: center;
}
.tovars__content {
position: relative;
}
.tovar {
/*width: 350.5px !important;*/
margin-right: 20px;
box-shadow: 1px 6px 32px rgba(0, 0, 0, 0.25);
height: auto;
border-radius: 40px;
}
.swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
width: 100%;
height: 4px;
left: 0;
top: 0;
}
.swiper-pagination-progressbar {
position: relative;
}
.tovars-pogination {
position: relative;
flex-grow: 1;
margin-right: 61px;
}
.tovar img{
width: 100%;
border-radius: 40px;
}
.map-modal__content-info.master{
text-align: center;
font-size: 24px;
}
.tovar iframe{
width: 100%;
height: 100%;
border-radius: 40px;
}
.tovar .ytp-title-enable-channel-logo .ytp-title{
display: none !important;
}
video {
position: absolute;
z-index: 0;
object-fit: cover;
width:100%;
height:100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius:40px;
&::-webkit-media-controls {
display:none !important;
}
}
.tovar{
position: relative;
display: grid;
place-items: center;
height: 70vh;
}
@media (max-width: 450px){
.works__button {
padding: 0 !important;
}
a#mosaic{
min-height: 56px !important;
padding-top: 12% !important;
}
}
@media (max-width: 1000px){
.header-item.last a{
display:none;
}
}
.header-item.last{
display: flex;
align-items: center;
}
.header-item.last .social-icon__whatsup{
margin: 0 20px 0 0;
}
/* 2026 mobile/menu/media updates */
.nav-services-panel {
display: none;
}
@media screen and (max-width: 960px) {
.nav-wrap {
position: relative;
}
.nav-services-panel {
position: absolute;
left: 0;
bottom: -2px;
z-index: 30;
display: none;
width: 100%;
min-height: min(78vh, 620px);
max-height: calc(100vh - 118px);
padding: 22px 42px 30px;
box-sizing: border-box;
overflow-y: auto;
transform: translateY(100%);
background: rgba(64, 64, 64, 0.78);
color: #fff;
backdrop-filter: blur(5px);
}
.nav-services-panel.is-open {
display: block;
}
.nav-services-panel__back {
display: inline-flex;
align-items: center;
min-height: 38px;
margin: 0 0 20px;
padding: 0;
border: 0;
background: transparent;
color: #fff;
font-size: 20px;
line-height: 1;
cursor: pointer;
}
.nav-services-panel__title {
margin: 0 0 10px;
color: #fff;
font-size: 22px;
line-height: 1.2;
text-transform: uppercase;
}
.nav-services-panel__list {
margin: 0;
padding: 0;
list-style: none;
}
.nav-services-panel__list li {
border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
.nav-services-panel__list a {
display: block;
padding: 16px 0;
color: #fff;
font-size: 19px;
line-height: 1.3;
text-decoration: none;
}
.nav-services-panel__phone {
display: block;
margin-top: 26px;
color: #fff;
font-size: 28px;
line-height: 1.1;
text-decoration: none;
}
.nav-services-panel__cta {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 54px;
margin-top: 22px;
border: 0;
border-radius: 28px;
background: #2d9cdb;
color: #fff;
font-size: 18px;
font-weight: 700;
cursor: pointer;
}
}
.works {
padding: 64px 0 72px;
background: #fff;
border-radius: 0;
color: #1a1a1a;
overflow: hidden;
text-align: left;
}
.works__badge {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 28px;
margin: 0 0 14px max(5%, calc((100% - 1120px) / 2));
padding: 5px 12px;
border: 1px solid #e0e0e0;
border-radius: 4px;
color: #858585;
background: #f5f5f5;
font-size: 12px;
line-height: 1;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.works__badge-icon {
width: 6px;
height: 6px;
border-radius: 1px;
background: #fed204;
color: transparent;
font-size: 0;
line-height: 0;
}
.works .section__title {
display: block;
width: min(1120px, 90%);
margin: 0 auto 8px;
border-bottom: 0;
color: #111;
font-family: Arial, Helvetica, sans-serif;
font-size: clamp(34px, 4vw, 52px);
font-weight: 900;
line-height: 1.08;
text-shadow: none;
}
.works .section__title::after,
.works .section__title:after {
content: "";
display: block;
width: min(300px, 100%);
height: 3px;
margin-top: 4px;
background: #fed204;
}
.works__subtitle {
width: min(1120px, 90%);
max-width: 1120px;
margin: 0 auto 28px;
padding: 0;
color: #666;
font-size: 16px;
line-height: 1.45;
}
.works > .container {
max-width: 1120px;
}
#tabs {
width: 100%;
padding-top: 0;
overflow: hidden;
}
.works__buttons {
display: flex !important;
flex-wrap: nowrap !important;
justify-content: flex-start !important;
gap: 14px;
width: fit-content;
max-width: 100%;
margin: 0 0 24px !important;
padding: 0 !important;
border: 0;
border-radius: 0;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.works__buttons::-webkit-scrollbar {
display: none;
}
.works__buttons li {
display: flex;
flex: 1 1 0 !important;
width: auto !important;
min-width: 0;
scroll-snap-align: start;
}
.works__button {
display: flex !important;
align-items: center;
justify-content: center;
width: 100% !important;
min-width: 0;
min-height: 42px;
height: 100%;
margin: 0 !important;
padding: 9px 18px !important;
border: 1px solid #1a1a1a !important;
border-radius: 0 !important;
background: #fff !important;
color: #1a1a1a !important;
font-size: 14px;
line-height: 1.2;
font-weight: 800;
text-align: center;
white-space: normal;
box-shadow: none;
transition: background-color 0.18s ease, color 0.18s ease;
}
.works__button:hover {
background: #f6f6f6 !important;
color: #1a1a1a !important;
}
.works__button.btn-active {
height: 100% !important;
min-height: 42px !important;
background: #fed204 !important;
color: #111 !important;
}
.works__tab {
max-width: 1060px;
margin: 0 auto;
position: relative;
}
.works__item {
height: auto !important;
border-radius: 6px;
overflow: hidden;
background: #fff;
}
.works__item-thumbs {
margin-top: 12px;
overflow: hidden;
}
.works__item-thumbs .swiper-wrapper {
align-items: stretch;
}
.works-slider__item-img,
.works-slider-thumbs__item {
border-radius: 6px;
overflow: hidden;
}
.works-slider__item {
height: auto !important;
}
.works__slider {
height: auto !important;
}
.works-slider__item-img {
display: block;
aspect-ratio: 16 / 9;
}
.works-slider-thumbs__item {
aspect-ratio: 1 / 1;
height: auto !important;
background: #f2f2f2;
}
.works-slider__item-img img,
.works-slider-thumbs__item img {
display: block;
width: 100%;
height: 100%;
min-height: 0 !important;
object-fit: cover;
box-sizing: border-box;
}
.works-slider__item-img img {
max-height: none !important;
min-height: 0 !important;
}
.works-button-next,
.works-button-prev {
width: 42px;
height: 42px;
border: 0;
border-radius: 50%;
background: #111;
color: #fff;
box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}
.works-button-next,
.swiper-container-rtl .works-button-prev {
right: 14px;
}
.works-button-prev,
.swiper-container-rtl .works-button-next {
left: 14px;
}
.works-button-next::after,
.works-button-prev::after {
color: #fff;
font-size: 18px;
font-weight: 700;
}
.works-button-next:hover,
.works-button-prev:hover {
background: #111;
color: #111;
}
.works-button-next:hover::after,
.works-button-prev:hover::after {
color: #fff;
}
.works__all-projects {
position: relative;
z-index: 4;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-width: 0;
min-height: 48px;
margin: 28px 0 0 max(5%, calc((100% - 1120px) / 2));
padding: 0 28px;
border: 1px solid #fed204;
border-radius: 4px;
background: #fed204;
color: #111;
font-size: 14px;
line-height: 1;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.04em;
text-decoration: none;
box-shadow: none;
transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.works__all-projects:hover,
.works__all-projects:focus-visible {
color: #111;
text-decoration: none;
border-color: #1a1a1a;
background: #fff;
transform: translateY(-2px);
box-shadow: none;
outline: none;
}
.works__all-projects i {
font-size: 15px;
}
.reviews-section {
padding: 64px 0 76px;
background: #fff;
}
.reviews-section .section__title {
max-width: 980px;
margin-left: auto;
margin-right: auto;
margin-bottom: 28px;
}
.reviews-filter {
display: flex;
gap: 10px;
max-width: 860px;
margin: 0 auto 34px;
padding: 4px 2px 10px;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.reviews-filter::-webkit-scrollbar {
display: none;
}
.reviews-filter__btn {
flex: 0 0 auto;
min-height: 44px;
padding: 0 18px;
border: 2px solid rgba(254, 210, 4, 0.55);
border-radius: 999px;
background: #fff;
color: #20242b;
font-size: 15px;
line-height: 1;
font-weight: 800;
cursor: pointer;
}
.reviews-filter__btn.is-active {
background: #fed204;
border-color: #fed204;
color: #111;
}
.reviews-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
max-width: 1180px;
margin: 0 auto;
}
.review-card {
position: relative;
display: flex;
flex-direction: column;
min-height: 360px;
padding: 18px;
box-sizing: border-box;
background: #fff;
border-radius: 34px !important;
overflow: hidden;
box-shadow: 0 16px 42px rgba(0, 0, 0, 0.16);
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.review-card:hover,
.review-card:focus-visible {
transform: translateY(-3px);
box-shadow: 0 22px 54px rgba(0, 0, 0, 0.2);
outline: none;
}
.review-card.is-hidden {
display: none;
}
.review-card__type {
display: inline-flex;
align-self: flex-start;
margin-bottom: 14px;
padding: 7px 12px;
border-radius: 999px;
background: #fed204;
color: #111;
font-size: 13px;
font-weight: 800;
line-height: 1;
}
.review-card__media {
position: relative;
display: block;
width: 100%;
margin: 0 -4px -4px;
border-radius: 20px;
overflow: hidden;
background: #000;
}
.review-card__media img {
display: block;
width: 100%;
max-height: 520px;
object-fit: cover;
border-radius: 20px !important;
}
.review-card__media--video {
aspect-ratio: 9 / 16;
max-height: 420px;
}
.review-card__media--video img {
height: 100%;
min-height: 320px;
}
.review-card__play {
position: absolute !important;
left: 50%;
top: 48%;
z-index: 2;
transform: translate(-50%, -50%) !important;
pointer-events: none;
}
.review-card__open-note {
position: absolute;
left: 50%;
bottom: 16px;
z-index: 3;
min-width: 118px;
padding: 9px 16px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.66);
color: #fff;
font-size: 15px;
font-weight: 800;
line-height: 1;
text-align: center;
transform: translateX(-50%);
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
.review-card--photo .review-card__media {
background: #f7f7f7;
}
.review-card--photo .review-card__media img {
object-fit: contain;
border-radius: 24px !important;
}
.review-card__text,
.review-card__quote {
margin: 14px 0 0;
color: #20242b;
font-size: 18px;
line-height: 1.45;
}
.review-card__quote {
font-size: 22px;
font-weight: 700;
}
.review-card__author {
margin: auto 0 0;
padding-top: 24px;
color: #6b7280;
font-size: 16px;
font-weight: 700;
}
.review-modal.review-modal--video .review-modal__inner {
display: flex;
width: min(960px, calc(100vw - 48px));
max-height: calc(100svh - 48px);
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0;
border-radius: 22px;
background: transparent;
box-shadow: none;
}
.review-modal.review-modal--video .review-modal__viewer {
position: relative;
display: block;
width: 100%;
max-width: 920px;
margin: 0 auto;
border-radius: 20px;
overflow: hidden;
background: #000;
box-shadow: 0 26px 70px rgba(0, 0, 0, .48);
}
.review-modal .reel-modal__title {
display: none;
}
.review-modal .reel-modal__close {
top: 22px;
right: 22px;
z-index: 10;
width: 48px;
height: 48px;
border: 2px solid rgba(255, 215, 0, .72);
background: rgba(0, 0, 0, .78);
color: #fff;
box-shadow: 0 12px 30px rgba(0, 0, 0, .34);
}
.review-modal .reel-modal__close::before {
content: "×";
color: currentColor;
font-size: 28px;
font-weight: 900;
line-height: 1;
}
.review-modal #reviewModalVideo {
position: relative !important;
inset: auto !important;
z-index: 1 !important;
display: block !important;
flex: 0 1 auto;
width: 100% !important;
height: auto !important;
max-height: 82vh;
aspect-ratio: 16 / 9;
object-fit: contain;
transform: none !important;
border-radius: 0 !important;
background: #000;
}
.review-modal .review-modal__caption {
left: 24px;
right: 220px;
bottom: 74px;
}
.review-modal .reel-modal__caption-title {
margin-bottom: 6px;
font-size: 24px;
}
.review-modal .reel-modal__caption-text {
font-size: 16px;
}
.review-modal .reel-modal__volume {
left: 18px;
bottom: 14px;
}
.review-modal .reel-modal__progress {
left: 70px;
right: 118px;
bottom: 16px;
}
.review-modal .reel-modal__time {
right: 24px;
bottom: 22px;
}
.review-modal__nav {
position: absolute;
top: 50%;
z-index: 11;
display: grid;
width: 50px;
height: 50px;
place-items: center;
border: 0;
border-radius: 50%;
background: #111;
color: #fff;
cursor: pointer;
box-shadow: 0 14px 34px rgba(0, 0, 0, .34);
transform: translateY(-50%);
transition: background-color .2s ease, color .2s ease, transform .2s ease, opacity .2s ease;
}
.review-modal__nav span {
display: none;
}
.review-modal__nav::before {
content: "";
display: block;
width: 13px;
height: 13px;
border: solid currentColor;
border-width: 0 3px 3px 0;
}
.review-modal__nav--prev {
left: 18px;
}
.review-modal__nav--prev::before {
margin-left: 5px;
transform: rotate(135deg);
}
.review-modal__nav--next {
right: 18px;
}
.review-modal__nav--next::before {
margin-right: 5px;
transform: rotate(-45deg);
}
.review-modal__nav:hover,
.review-modal__nav:focus-visible {
background: var(--main-orange, var(--brand-yellow));
color: #111;
outline: none;
transform: translateY(-50%) scale(1.05);
}
.review-modal__nav:disabled {
opacity: .35;
pointer-events: none;
}
.review-modal.review-modal--controls-hidden .review-modal__caption,
.review-modal.review-modal--controls-hidden .reel-modal__volume,
.review-modal.review-modal--controls-hidden .reel-modal__progress,
.review-modal.review-modal--controls-hidden .reel-modal__time,
.review-modal.review-modal--controls-hidden .reel-modal__toggle,
.review-modal.review-modal--controls-hidden .review-modal__nav {
opacity: 0;
pointer-events: none;
}
.review-modal--photo .review-modal__viewer,
.review-modal--text .review-modal__viewer {
position: relative;
overflow: visible;
}
.review-modal--photo .review-modal__nav--prev,
.review-modal--text .review-modal__nav--prev {
left: -72px;
}
.review-modal--photo .review-modal__nav--next,
.review-modal--text .review-modal__nav--next {
right: -72px;
}
.review-modal__photo,
.review-modal__text-panel {
display: none;
}
.review-modal--photo .review-modal__photo {
display: block;
width: min(760px, calc(100vw - 48px));
max-height: 82vh;
object-fit: contain;
border-radius: 18px !important;
background: #fff;
}
.review-modal--text .review-modal__text-panel {
display: block;
width: min(720px, calc(100vw - 48px));
max-height: 78vh;
overflow-y: auto;
padding: 34px;
border-radius: 24px;
background: #fff;
color: #20242b;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.review-modal__quote {
margin: 0;
font-size: 28px;
line-height: 1.35;
font-weight: 800;
}
.review-modal__author {
margin: 24px 0 0;
color: #6b7280;
font-size: 18px;
font-weight: 800;
}
.review-modal--photo #reviewModalVideo,
.review-modal--text #reviewModalVideo,
.review-modal--photo .reel-modal__toggle,
.review-modal--photo .reel-modal__volume,
.review-modal--photo .reel-modal__time,
.review-modal--photo .reel-modal__progress,
.review-modal--photo .review-modal__caption,
.review-modal--text .reel-modal__toggle,
.review-modal--text .reel-modal__volume,
.review-modal--text .reel-modal__time,
.review-modal--text .reel-modal__progress,
.review-modal--text .review-modal__caption {
display: none !important;
}
.review-modal--video .review-modal__photo,
.review-modal--video .review-modal__text-panel {
display: none !important;
}
@media (max-width: 760px) {
.works {
padding: 42px 0 56px;
border-radius: 0;
}
.works__badge {
min-height: 28px;
margin-bottom: 14px;
margin-left: 5%;
padding: 5px 12px;
font-size: 12px;
}
.works .section__title {
margin-bottom: 8px;
font-size: 34px;
}
.works__subtitle {
max-width: none;
margin-bottom: 24px;
padding: 0;
font-size: 15px;
line-height: 1.4;
}
#tabs {
padding-top: 0;
}
.works__buttons {
gap: 0;
width: 100%;
max-width: 100%;
margin-left: 0 !important;
margin-bottom: 24px !important;
padding: 0 0 10px !important;
border: 0;
border-radius: 0;
transform: none;
}
.works-slider-thumbs__item {
aspect-ratio: 1 / 1;
height: auto !important;
border-radius: 16px;
}
.works-slider-thumbs__item img {
height: 100% !important;
min-height: 0 !important;
border-radius: 16px !important;
object-fit: cover;
border: 0 !important;
}
.works__buttons li {
flex: 0 0 calc((100vw - 56px) / 4) !important;
max-width: calc((100vw - 56px) / 4);
}
.works__button {
min-height: 42px;
padding: 8px 14px !important;
border: 1px solid #1a1a1a !important;
border-right: 0 !important;
border-radius: 0 !important;
font-size: 12px;
line-height: 1.25;
}
.works__buttons li:last-child .works__button {
border-right: 1px solid #1a1a1a !important;
}
.works-slider__item-img img {
min-height: 300px;
}
.works__all-projects {
width: auto;
min-width: 0;
max-width: 390px;
min-height: 48px;
margin-left: 5%;
margin-top: 20px;
padding: 0 24px;
font-size: 13px;
}
.reviews-section {
padding: 46px 0 64px;
}
.reviews-section .section__title {
max-width: 92vw;
margin-bottom: 24px;
font-size: 34px;
line-height: 1.12;
}
.reviews-filter {
width: 100vw;
max-width: 100vw;
margin-left: 50%;
margin-bottom: 24px;
padding-left: 16px;
padding-right: 16px;
transform: translateX(-50%);
}
.reviews-grid {
grid-template-columns: 1fr;
gap: 22px;
max-width: min(94vw, 460px);
}
.review-card {
min-height: 0;
padding: 22px;
border-radius: 28px !important;
}
.review-card__type {
padding: 9px 16px;
font-size: 15px;
}
.review-card__media {
margin-right: 0;
margin-left: 0;
}
.review-card__media--video img {
height: 100%;
min-height: 440px;
max-height: none;
object-fit: cover;
}
.review-card__play {
width: 70px;
height: 70px;
}
.review-card__open-note {
min-width: 104px;
padding: 8px 12px;
font-size: 14px;
}
.review-card__quote {
font-size: 19px;
}
.review-card__text {
font-size: 20px;
line-height: 1.45;
}
.review-modal.review-modal--video .review-modal__inner {
width: 100%;
max-height: none;
min-height: 100svh;
justify-content: center;
padding: 72px 8px 92px;
border-radius: 0;
}
.review-modal.review-modal--photo .review-modal__inner,
.review-modal.review-modal--text .review-modal__inner {
display: flex;
width: 100%;
min-height: 100svh;
align-items: center;
justify-content: center;
padding: 54px 16px 76px;
border-radius: 0;
}
.review-modal.review-modal--photo .review-modal__viewer,
.review-modal.review-modal--text .review-modal__viewer {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
}
.review-modal.review-modal--video .review-modal__viewer {
width: 100%;
max-width: none;
height: auto !important;
min-height: 0 !important;
border-radius: 16px;
box-shadow: 0 18px 46px rgba(0, 0, 0, .45);
}
.review-modal #reviewModalVideo {
width: 100% !important;
height: auto !important;
min-height: 0;
max-height: none;
aspect-ratio: 16 / 9;
object-fit: contain;
border-radius: 0 !important;
}
.review-modal .reel-modal__toggle {
width: 74px;
height: 74px;
border: 0;
border-radius: 50%;
background: rgba(254, 210, 4, .92);
color: #111;
box-shadow:
0 14px 30px rgba(0, 0, 0, .34),
0 0 0 12px rgba(254, 210, 4, .16);
}
.review-modal .reel-modal__toggle::before {
left: 29px;
top: 22px;
border-top-width: 15px;
border-bottom-width: 15px;
border-left-width: 23px;
}
.review-modal .reel-modal__toggle.is-playing::before,
.review-modal .reel-modal__toggle.is-playing::after {
top: 22px;
width: 9px;
height: 30px;
border-radius: 3px;
background: #111;
}
.review-modal .reel-modal__toggle.is-playing::before {
left: 25px;
}
.review-modal .reel-modal__toggle.is-playing::after {
left: 41px;
}
.review-modal .reel-modal__title {
display: none;
}
.review-modal .reel-modal__close {
top: 16px;
right: 16px;
width: 46px;
height: 46px;
}
.review-modal .review-modal__caption {
left: 16px;
right: 16px;
bottom: 70px;
}
.review-modal .reel-modal__caption-title {
font-size: 20px;
}
.review-modal .reel-modal__caption-text {
font-size: 14px;
}
.review-modal .reel-modal__volume {
left: 12px;
bottom: 12px;
}
.review-modal .reel-modal__progress {
left: 62px;
right: 92px;
bottom: 14px;
}
.review-modal .reel-modal__time {
right: 12px;
bottom: 20px;
}
.review-modal__nav {
display: grid;
width: 42px;
height: 42px;
opacity: .9;
transition: background-color .2s ease, color .2s ease, transform .2s ease, opacity .2s ease;
}
.review-modal__nav::before {
width: 12px;
height: 12px;
border-width: 0 3px 3px 0;
}
.review-modal__nav--prev {
left: 12px;
}
.review-modal__nav--next {
right: 12px;
}
.review-modal--photo .review-modal__nav,
.review-modal--text .review-modal__nav {
display: none;
}
.review-modal--photo .review-modal__photo {
width: calc(100vw - 32px);
max-height: calc(100svh - 96px);
border-radius: 14px !important;
}
.review-modal--text .review-modal__text-panel {
width: calc(100vw - 32px);
max-height: calc(100svh - 96px);
padding: 24px;
border-radius: 18px;
}
.review-modal__quote {
font-size: 22px;
}
.review-modal__author {
font-size: 16px;
}
}
/* Focused mobile polish for the works block */
@media (max-width: 760px) {
.works {
padding: 42px 0 56px;
border-radius: 0;
overflow-x: hidden;
}
.works__badge {
min-height: 28px;
margin-bottom: 14px;
margin-left: 5%;
padding: 5px 12px;
font-size: 12px;
}
.works .section__title {
display: block;
width: 90%;
max-width: 90vw;
margin-left: auto;
margin-right: auto;
margin-bottom: 8px;
font-size: clamp(32px, 9vw, 38px);
line-height: 1.08;
text-align: left;
white-space: normal;
overflow-wrap: normal;
}
.works__subtitle {
max-width: none;
margin-bottom: 24px;
padding: 0;
font-size: 15px;
line-height: 1.4;
}
#tabs {
padding-top: 0;
}
.works__buttons {
gap: 0;
width: 100%;
max-width: 100%;
margin-left: 0 !important;
margin-bottom: 24px !important;
padding: 0 0 10px !important;
border: 0;
border-radius: 0;
transform: none;
}
.works__buttons li {
flex: 0 0 auto !important;
width: auto !important;
max-width: none !important;
min-width: 118px;
}
.works__button {
min-height: 42px;
padding: 8px 14px !important;
border: 1px solid #1a1a1a !important;
border-right: 0 !important;
border-radius: 0 !important;
font-size: 12px;
line-height: 1.2;
}
.works__buttons li:last-child .works__button {
border-right: 1px solid #1a1a1a !important;
}
.works__all-projects {
width: auto;
max-width: calc(100vw - 64px);
min-height: 48px;
margin-left: 5%;
margin-top: 22px;
padding: 0 24px;
font-size: 13px;
}
}
/* Unified visual system */
:root {
--brand-dark: #1a1a1a;
--brand-accent: #f5c518;
--brand-accent-strong: #fed204;
--brand-bg: #ffffff;
--brand-surface: #f5f5f5;
--brand-muted: #666666;
--brand-border: #d9d9d9;
--brand-success: #2e7d32;
--main-orange: var(--brand-accent);
--main-blue: var(--brand-dark);
}
body {
color: var(--brand-dark);
background: var(--brand-bg);
}
.section__title {
display: inline-block;
margin-top: 50px;
margin-bottom: 30px;
border-bottom: 0 !important;
color: var(--brand-dark) !important;
font-family: Arial, Helvetica, sans-serif !important;
font-weight: 900;
line-height: 1.12;
}
.section__title::after,
.section__title:after {
content: "";
display: block;
width: 48px;
height: 3px;
margin-top: 8px;
background: var(--brand-accent);
}
.nav-menu__a {
font-size: 12px;
letter-spacing: 0.08em;
}
.hero-price {
color: var(--brand-accent) !important;
font-weight: 900;
text-shadow: 0 3px 16px rgba(0, 0, 0, 0.78), 0 1px 2px rgba(0, 0, 0, 0.92) !important;
}
.slider-test__title,
.slider-test_desc {
color: #fff !important;
text-shadow: 0 3px 18px rgba(0, 0, 0, 0.86), 0 1px 2px rgba(0, 0, 0, 0.96) !important;
}
.slider-test__title span,
.slider-test_desc span {
color: var(--brand-accent) !important;
text-shadow: 0 3px 16px rgba(0, 0, 0, 0.78), 0 1px 2px rgba(0, 0, 0, 0.92) !important;
}
.slider__btn,
.header-tel__btn,
.btn_master,
.nav-menu-item__btn,
.services__btn,
.services-item__btn,
.atuin-btn,
.map-modal__send,
.submit_calc,
.nav-services-panel__cta {
border-radius: 4px !important;
}
.slider__btn,
.header-tel__btn,
.btn_master,
.nav-menu-item__btn,
.map-modal__send,
.submit_calc,
.nav-services-panel__cta {
background: var(--brand-accent) !important;
color: #111 !important;
border: 1px solid var(--brand-accent) !important;
font-weight: 900;
}
.slider__btn:hover,
.header-tel__btn:hover,
.btn_master:hover,
.nav-menu-item__btn:hover,
.map-modal__send:hover,
.submit_calc:hover,
.nav-services-panel__cta:hover {
background: #fff !important;
color: var(--brand-dark) !important;
border-color: var(--brand-dark) !important;
}
.services.container {
width: 100%;
max-width: none;
padding: 64px 5% 68px;
box-sizing: border-box;
background: var(--brand-surface);
}
.services .section__title,
.services .grid,
.services .services-content,
.services .services__btn {
max-width: 1120px;
margin-left: auto;
margin-right: auto;
}
.services .grid {
align-items: stretch;
}
.grid-item {
overflow: hidden;
border: 1px solid #ececec;
border-radius: 6px;
background: #fff;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.grid-item:hover {
transform: translateY(-4px);
border-color: rgba(245, 197, 24, 0.55);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
}
.grid-item .image {
background: #e9e9e9;
}
.grid-item .image img {
object-fit: cover;
}
.info h2 {
color: var(--brand-dark) !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 22px;
font-weight: 900;
line-height: 1.16;
}
.info-text p {
color: var(--brand-muted);
font-family: Arial, Helvetica, sans-serif !important;
}
.service-price {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 2px 8px;
border-radius: 4px;
background: rgba(245, 197, 24, 0.22);
color: var(--brand-dark);
font-weight: 900;
white-space: nowrap;
}
.service-gift {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 4px;
padding: 6px 10px;
border-radius: 4px;
background: rgba(46, 125, 50, 0.1);
color: var(--brand-success) !important;
font-weight: 800;
}
.service-gift::before {
content: "+";
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--brand-success);
color: #fff;
font-size: 12px;
line-height: 1;
}
.atuin-btn,
.services-item__btn,
.services__btn {
background: #fff !important;
color: var(--brand-dark) !important;
border: 1px solid var(--brand-dark) !important;
box-shadow: none !important;
font-family: Arial, Helvetica, sans-serif !important;
font-weight: 800;
}
.atuin-btn:hover,
.services-item__btn:hover,
.services__btn:hover {
background: var(--brand-accent) !important;
color: var(--brand-dark) !important;
border-color: var(--brand-accent) !important;
}
.callback {
background: #fff;
}
.callback__content {
padding: 72px 0;
}
.callback__form,
.map-modal__content {
border-radius: 8px !important;
background: #fff !important;
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1) !important;
}
.map-modal__input,
.form-control {
min-height: 46px;
border: 1px solid var(--brand-border) !important;
border-radius: 4px !important;
background: #fff !important;
color: var(--brand-dark) !important;
box-shadow: none !important;
}
.map-modal__input:focus,
.form-control:focus {
border-color: var(--brand-accent) !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.18) !important;
}
.map-modal__send,
.submit_calc {
width: 100% !important;
min-height: 52px;
font-size: 16px !important;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.reviews-section {
background: #fff;
}
/* Anchor/spacing fixes for the fixed navigation */
html {
scroll-padding-top: 0;
}
#about,
#masters,
#usluga,
#work,
#works,
#reviews,
#calc,
#contacts {
scroll-margin-top: 48px;
}
.fives .section__title,
.reviews-section .section__title,
.callback__title {
margin-top: 0;
}
.reviews-section {
padding-top: 44px;
}
.works {
padding-bottom: 56px;
}
.calc {
margin-top: 40px !important;
margin-bottom: 34px !important;
}
.reviews-grid {
align-items: start;
}
.review-card {
min-height: 0;
}
.review-card__author {
margin-top: 24px;
}
.review-card--photo .review-card__media {
display: flex;
flex-direction: column;
margin-bottom: 0;
background: #fff;
}
.review-card--photo .review-card__open-note {
position: static;
align-self: center;
display: inline-flex;
align-items: center;
justify-content: center;
width: max-content;
min-width: 118px;
margin: 12px auto 0;
transform: none;
text-shadow: none;
}
@media (max-width: 760px) {
.section__title {
margin-top: 34px;
margin-bottom: 22px;
}
.services.container {
padding: 44px 4% 52px;
}
.info h2 {
font-size: 20px;
}
}