/* ==========================================
БАЗОВЫЕ СТИЛИ И ПЕРЕМЕННЫЕ
========================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
@supports (display: grid) {
/* Все стили остаются без изменений */
}
:root {
--primary: #3498db;
--secondary: #2ecc71;
--accent: #e74c3c;
--dark: #2c3e50;
--light: #ecf0f1;
--gray: #95a5a6;
--light-gray: #bdc3c7;
--dark-gray: #7f8c8d;
--white: #ffffff;
--black: #000000;
--transition: all 0.3s ease;
--shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
--shadow-hover: 0 4px 15px rgba(0, 0, 0, 0.15);
--border-radius: 8px;
--border-radius-lg: 12px;
--border-radius-full: 50%;
}
html, body {
width: 100%;
overflow-x: hidden !important;
}
body {
font-family: 'Open Sans', sans-serif;
background-color: var(--light);
color: var(--dark);
line-height: 1.6;
position: relative;
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
z-index: -1;
}
img {
max-width: 100%;
height: auto;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
line-height: 1.2;
margin-bottom: 1rem;
color: var(--dark);
}
/* ==========================================
НАВИГАЦИЯ И ГАМБУРГЕР-МЕНЮ
========================================== */
nav {
background: rgba(255, 255, 255, 0.452);
backdrop-filter: blur(48px);
padding: 0 40px;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
border-bottom: 1px solid var(--light-gray);
padding: 1rem 5%;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: var(--shadow);
box-sizing: border-box;
}
.logo {
color: var(--dark);
display: flex;
align-items: center;
line-height: .9;
gap: 1.4rem;
font-family: 'Montserrat', sans-serif;
font-size: 1rem;
font-weight: 600;
letter-spacing: -0.5px;
text-decoration: none;
}
body > nav > div > a > img {width: 50px;}
.nav-links {
display: flex;
list-style: none;
gap: 1.8rem;
}
.nav-links a {
color: var(--dark);
text-decoration: none;
font-weight: 600;
font-size: 1rem;
transition: var(--transition);
position: relative;
padding: 0.5rem 0;
}
.nav-links a:hover,
.nav-links a.active {
color: var(--primary);
}
.nav-links a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--primary);
transition: var(--transition);
}
.nav-links a:hover::after {
width: 100%;
}
/* Подменю "Клиентам" для десктопа */
.clients-dropdown {
position: relative;
cursor: pointer;
}
.clients-menu {
position: absolute;
top: 100%;
left: 0;
background-color: var(--white);
border-radius: var(--border-radius);
min-width: 200px;
padding: 0.8rem 0;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: var(--transition);
z-index: 1001;
box-shadow: var(--shadow);
border: 1px solid var(--light-gray);
}
.clients-dropdown:hover .clients-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.clients-menu a {
display: block;
padding: 0.8rem 1.5rem;
color: var(--dark);
text-decoration: none;
transition: var(--transition);
font-weight: 400;
font-size: 0.95rem;
}
.clients-menu a:hover {
background-color: var(--light);
color: var(--primary);
padding-left: 1.7rem;
}
/* ГАМБУРГЕР-МЕНЮ (ИСПРАВЛЕНА АНИМАЦИЯ КРЕСТИКА) */
.hamburger {
/* Полностью скрыт в десктопной версии на ВСЕХ страницах */
display: none !important;
background: var(--primary);
border: none;
cursor: pointer;
width: 50px;
height: 50px;
border-radius: var(--border-radius-full);
position: relative;
z-index: 2000;
flex-shrink: 0;
user-select: none;
box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
overflow: hidden;
}
/* Иконка гамбургера - три линии */
.hamburger span {
position: absolute;
width: 26px;
height: 3px;
background-color: white;
border-radius: 2px;
transition: all 0.35s ease;
left: 50%;
transform: translateX(-50%);
}
.hamburger span:nth-child(1) {
top: 12px;
}
.hamburger span:nth-child(2) {
top: 24px;
width: 22px; /* Средняя линия короче */
}
.hamburger span:nth-child(3) {
top: 36px;
}
/* Эффект при наведении */
.hamburger:hover {
background: #2980b9;
box-shadow: 0 5px 15px rgba(41, 128, 185, 0.4);
transform: scale(1.05);
}
/* Состояние "активно" - превращается в крестик (ИСПРАВЛЕНО) */
.hamburger.active {
background: #1a5276;
box-shadow: 0 6px 20px rgba(26, 82, 118, 0.55);
transform: scale(1);
}
.hamburger.active span:nth-child(1) {
transform: translateX(-50%) rotate(45deg);
top: 24px;
width: 26px;
}
.hamburger.active span:nth-child(2) {
opacity: 0;
transform: translateX(-50%) scale(0.2);
}
.hamburger.active span:nth-child(3) {
transform: translateX(-50%) rotate(-45deg);
top: 24px;
width: 26px;
}
/* ==========================================
СЕКЦИЯ ГЕРОЙ
========================================== */
#hero {
padding: 10rem 5% 6rem;
min-height: 100vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
background: linear-gradient(to right, #00000000 0%, rgb(0 0 0 / 14%) 0), url(img/STON1.jpg);
background-size: cover;
background-position: center;
}
.hero-content {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 3rem;
width: 100%;
max-width: 1500px;
margin: 0 auto;
align-items: center;
position: relative;
z-index: 2;
}
.hero-left {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
.hero-left h1 {
font-size: 5.5rem;
margin-bottom: 1.2rem;
color: var(--dark);
position: relative;
line-height: 1;
}
.hero-left h1::after {
content: '';
position: absolute;
bottom: -15px;
left: 0;
width: 85%;
height: 3px;
background: linear-gradient(to bottom, transparent, var(--primary), transparent);
box-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
border-radius: 2px;
}
.hero-left h2 {
font-size: 2.5rem;
font-weight: 300;
color: var(--dark-gray);
margin-bottom: 2.5rem;
line-height: 1.3;
max-width: 650px;
}
.contact-btn {
background: var(--primary);
color: var(--white);
border: none;
padding: 1.2rem 2.8rem;
border-radius: 50px;
font-family: 'Montserrat', sans-serif;
font-size: 1.2rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
width: fit-content;
box-shadow: var(--shadow);
letter-spacing: 0.5px;
position: relative;
overflow: hidden;
}
.contact-btn:hover {
background: #2980b9;
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
}
.contact-btn:active {
transform: translateY(1px);
}
.hero-center {
display: flex;
justify-content: center;
align-items: center;
position: relative;
border-radius: var(--border-radius-lg);
overflow: hidden;
box-shadow: var(--shadow-hover);
width: 100%;
max-width: 600px;
background: var(--white);
border: 3px solid var(--primary);
}
.hero-center img {
width: 100%;
height: auto;
display: block;
transition: var(--transition);
}
.hero-center:hover img {
transform: scale(1.03);
}
/* Сайдбар контактов */
.contacts-sidebar {
background: rgba(255, 255, 255, .2);
backdrop-filter: blur(48px);
border-radius: 40px;
position: absolute;
right: 0.75%;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
align-items: center;
z-index: 10;
}
.contacts-divider {
position: absolute;
right: 85px;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 900px;
background: linear-gradient(to bottom, transparent, var(--primary), transparent);
box-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
}
.contact-icon-btn {
background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 70%);
width: 60px;
height: 60px;
border-radius: var(--border-radius-full);
border: none;
margin: 15px 0;
font-size: 1.8rem;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
position: relative;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
text-decoration: none;
color: var(--white);
font-weight: bold;
overflow: hidden;
z-index: 2;
}
.contact-icon-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
transition: var(--transition);
}
.contact-icon-btn::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 70%);
z-index: -1;
transition: var(--transition);
opacity: 0;
}
.contact-icon-btn:hover::after {
opacity: 1;
transform: scale(1.2);
}
.contact-icon-btn:hover {
transform: scale(1.15) translateY(-3px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
}
.contact-icon-btn.phone:hover::before {
background: linear-gradient(135deg, #2980b9, #154360);
box-shadow: 0 0 15px rgba(41, 128, 185, 0.6);
}
.contact-icon-btn.email:hover::before {
background: linear-gradient(135deg, #2980b9, #154360);
box-shadow: 0 0 15px rgba(39, 174, 96, 0.6);
}
.contact-icon-btn.telegram:hover::before {
background: linear-gradient(135deg, #2980b9, #154360bd);
box-shadow: 0 0 15px rgba(39, 174, 96, 0.6);
}
.tooltip {
display: none;
position: absolute;
left: -145px;
background: var(--dark);
color: var(--white);
padding: 8px 15px;
border-radius: var(--border-radius);
font-size: 0.95rem;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: var(--transition);
box-shadow: var(--shadow);
font-weight: 500;
letter-spacing: 0.5px;
z-index: 100;
}
.tooltip::after {
content: '';
position: absolute;
right: -8px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid var(--dark);
}
.contact-icon-btn:hover .tooltip {
opacity: 1;
visibility: visible;
left: -155px;
animation: pulse 0.3s ease;
}
@keyframes pulse {
0% { transform: translateX(0); }
50% { transform: translateX(5px); }
100% { transform: translateX(0); }
}
/* ==========================================
ОБЩИЕ СТИЛИ СЕКЦИЙ
========================================== */
section {
padding: 6rem 5%;
position: relative;
}
.section-title {
font-size: 3.2rem;
font-weight: 700;
margin-bottom: 3rem;
position: relative;
display: inline-block;
color: var(--dark);
}
.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 70px;
height: 4px;
background: var(--primary);
border-radius: 2px;
}
/* ==========================================
СЕКЦИЯ УСЛУГ - ИСПРАВЛЕННАЯ ВЕРСТКА
========================================== */
#services {
background-color: var(--white);
padding-top: 5rem;
padding-bottom: 5rem;
position: relative;
border-top: 1px solid var(--light-gray);
border-bottom: 1px solid var(--light-gray);
}
.section-title {
font-size: 3.2rem;
font-weight: 700;
margin-bottom: 3rem;
position: relative;
display: inline-block;
color: var(--dark);
text-align: center;
width: 100%;
}
.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 70px;
height: 4px;
background: var(--primary);
border-radius: 2px;
}
.services-grid {
display: grid;
grid-template-columns: repeat(50, 1fr); /* 50 колонок для точных пропорций 48%+26%+26% */
grid-template-rows: repeat(2, 285px); /* 2 ряда по 300px */
gap: 10px;
max-width: 1500px;
margin: 0 auto 2.5rem;
padding: 0 20px;
}
/* ==========================================
РАСПРЕДЕЛЕНИЕ БЛОКОВ ПО СЕТКЕ
========================================== */
/* БЛОК 1: Услуга 1 - 48% ширины (24 колонки из 50), 1-й ряд */
.service-card.first {
grid-column: 1 / 33; /* 24 колонки = 48% */
grid-row: 1 / 2;
}
/* БЛОК 2: Услуга 2 - 24% ширины (12 колонки), 2-й ряд, ЛЕВАЯ ЧАСТЬ */
.service-card.second {
grid-column: 1 / 13; /* 12 колонок = 24% */
grid-row: 2 / 3;
}
/* БЛОК 3: Услуга 3 - 24% ширины (12 колонки), 2-й ряд, ПРАВАЯ ЧАСТЬ */
.service-card.third {
grid-column: 13 / 25; /* 12 колонок = 24% */
grid-row: 2 / 3;
}
/* БЛОК 4: Услуга 4 - 26% ширины (13 колонок), 2 ряда (высокая) */
.service-card.fourth {
grid-column: 51 / 33; /* 13 колонок = 26% */
grid-row: 1 / 3; /* Занимает оба ряда */
}
/* БЛОК 5: Услуга 5 - 26% ширины (13 колонок), 1-й ряд */
.service-card.fifth {
grid-column: 1 / 18; /* 13 колонок = 26% */
grid-row: 2 / 2;
}
/* БЛОК 6: Услуга 6 - 26% ширины (13 колонок), 2-й ряд */
.service-card.sixth {
grid-column: 33 / 18; /* 13 колонок = 26% */
grid-row: 3 / 2;
}
/* ==========================================
ОБЩИЕ СТИЛИ КАРТОЧЕК
========================================== */
.service-card {
border-radius: 5%;
overflow: hidden;
transition: var(--transition);
display: flex;
flex-direction: column;
position: relative;
box-shadow: var(--shadow);
background: linear-gradient(181deg, #e1e1e2 33%, #b0afae 100%);
}
#services > div.services-grid > article.service-card.fourth.animate.delay-3{border-radius: 30px 30px 125px 30px;}
#services > div.services-grid > article.service-card.first.animate{border-radius: 125px 30px 30px 30px;}
/* ====================================
Подгонка картинок в УСЛУГИ СТО
=======================================*/
.forImg{display: flex;}
#services > div.services-grid > article.service-card.first.animate > div > div > img{position: relative;height: 80%;bottom: 4rem;left: 2rem;}
#services > div.services-grid > article.service-card.third.animate.delay-2.service-card-overlay > div > div > img {position: relative;height: 100%;bottom: 4rem;left: 2rem;}
#services > div.services-grid > article.service-card.fourth.animate.delay-3 > img{position:relative;height: 43%;left: 7rem;overflow:visible;}
#services > div.services-grid > article.service-card.fifth.animate.delay-3 > div > img{position: relative;height: 61%;width:63%;bottom: 4vh;left: 8vw;overflow:visible;}
#services > div.services-grid > article.service-card.sixth.animate.delay-3 > div > img{position: relative;height: 100%;width: 48%;bottom: 3rem;left: 5rem;}
#services > div.services-grid > article.service-card.second.animate.delay-1 > div > img{overflow:visible;}
@media (max-width: 650px) {.service-card img {display: none !important;} .service-card p {word-break:break-all;font-size: 1.1rem !important;}.work-types-header{margin-left:-6% !important;}#services > div.services-grid > article.service-card.fourth.animate.delay-3 > div > h3{font-size:1.5rem !important;}}
/*=====================================*/
.service-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-hover);
border-color: var(--primary);
}
/* Карточки с изображением */
.service-card img {
width: 100%;
height: 160px;
object-fit: cover;
display: block;
transition: var(--transition);
}
.service-card:hover img {
transform: scale(1.05);
}
/* Контент карточки */
.service-content {
padding: 1.8rem;
/*flex-grow: 1;*/
display: flex;
flex-direction: column;
justify-content: center;
}
.service-card h3 {
font-size: 2.2rem;
margin-bottom: 0px;
color: #1b5296;
font-weight:900;
margin-left:1vw;
}
.service-card p {
color: black;
font-weight: 900;
margin-bottom: 1.2rem;
font-size: 1.25rem;
line-height: 1.6;
margin-left:1vw;
}
/* Средняя высокая карточка - особые стили */
.service-card.fourth .service-content {
padding: 2.5rem;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: start;
}
.service-card.fourth h3 {
font-size: 2.2rem;
}
.service-card.fourth p {
font-size: 1.35rem;
}
/* Кнопка */
.book-btn {
display: block;
width: 185px;
height: 65px;
background: var(--primary);
color: var(--white);
border: none;
border-radius: 8px;
font-family: 'Montserrat', sans-serif;
font-size: 1.3rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
margin: 0 auto;
box-shadow: var(--shadow);
letter-spacing: 0.5px;
}
.book-btn:hover {
background: #2980b9;
transform: translateY(-3px);
box-shadow: var(--shadow-hover);
}
.book-btn:active {
transform: translateY(1px);
}
/* ==========================================
АДАПТИВНОСТЬ
========================================== */
/* Большие планшеты */
@media (max-width: 1400px) {
.services-grid {
grid-template-columns: repeat(50, 1fr);
gap: 20px;
max-width: 80vw;
}
}
/* Планшеты */
@media (max-width: 1200px) {
.services-grid {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
gap: 20px;
}
.service-card.first,
.service-card.second,
.service-card.third,
.service-card.fourth,
.service-card.fifth,
.service-card.sixth {
grid-column: auto;
grid-row: auto;
width: 100%;
height:23vh;
}
.service-card.fourth {
grid-column: 1 / -1; /* На всю ширину */
}
}
/* Мобильные устройства */
@media (max-width: 950px) {
.services-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.service-card.first,
.service-card.second,
.service-card.third,
.service-card.fourth,
.service-card.fifth,
.service-card.sixth {
grid-column: 1 / 3;
grid-row: auto;
width: 100%;
height: 30vh;
border-radius: 30px;
}
}
@media (max-width: 650px) {
.services-grid {
gap: 15px;
padding: 0 10px;
}
.service-card h3 {
font-size: 1.5rem;
margin-left:10vw;
}
.service-card p {
font-size: .8rem;
margin-left:10vw;
}
.book-btn {
width: 165px;
height: 58px;
font-size: 1.2rem;
}
}
/* ==========================================
СЕКЦИЯ ВИДЫ РАБОТ
========================================== */
#work-types {
padding-top: 2rem;
background-color: #f8f9fa;
}
.work-types-header {
margin-bottom: 1.5rem;
max-width: 63vw;
left: 13%;
position:relative;
}
.work-types-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.3rem;
max-width: 1242px;
margin: 0 auto;
}
.work-type-card {
    background: #e7e7e7;
    border-radius: 50px;
    padding: 0.7rem 1.8rem;
    text-align: center;
    transition: var(--transition);
    box-shadow: var(--shadow);
    border: 1px solid #e7e7e779;
    position: relative;
    overflow: hidden;
    }
    .work-type-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        
        /* Направление: из нижнего левого угла в правый верхний */
        background: linear-gradient(
            45deg, 
            transparent 40%, 
            rgba(255, 255, 255) 50%, 
            transparent 60%
        );
        
        transform: skewX(-25deg);
        transition: left 0.7s ease;
        z-index: 10; /* Поверх всего контента */
        pointer-events: none;
    }
    
    /* 3. Запускаем блик при наведении */
    .work-type-card:hover::before {
        left: 100%;
    }
    
    /* 4. Контент остаётся под бликом (z-index не нужен или меньше 10) */
    .work-type-card .worknewImg {
        position: relative;
        /* z-index убран или можно поставить z-index: 1 */
    }
.work-type-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-hover);
border-color: var(--primary);
}
    .work-type-card h3 {
    font-size: clamp(1.3rem, 1.5rem - 0.5vw, 1.8rem);
    margin: 0.2rem 0 0.5rem;
    color: #00628f;
    font-weight: 700;
    }
.work-type-card img {
width: 100%;
object-fit: cover;
transition: var(--transition);
}
.work-type-card:hover img {
border-color: var(--primary);
transform: scale(1.03);
}
/* ==========================================
СЕКЦИЯ ПРЕИМУЩЕСТВА
========================================== */
#advantages {
background-color: var(--white);
padding-top: 5rem;
position: relative;
border-top: 1px solid var(--light-gray);
border-bottom: 1px solid var(--light-gray);
}
.advantages-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
max-width: 1340px;
margin: 0 auto;
}
.advantages-text h2 {
font-size: 2.4rem;
margin-bottom: 1.8rem;
color: var(--dark);
}
.advantages-text h2::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 65px;
height: 4px;
background: var(--primary);
border-radius: 2px;
}
.advantages-text p {
color: var(--dark-gray);
font-size: 1.15rem;
margin-bottom: 1.5rem;
line-height: 1.7;
max-width: 650px;
}
.advantages-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.7rem;
}
.advantage-card {
background: var(--white);
border-radius: var(--border-radius);
padding: 0.8rem;
text-align: center;
transition: var(--transition);
box-shadow: var(--shadow);
border: 1px solid var(--light-gray);
}
.advantage-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
border-color: var(--primary);
}
.advantage-icon {
font-size: 3.5rem;
margin-bottom: 1.2rem;
display: block;
color: var(--primary);
}
.advantage-card h3 {
font-size: 1.3rem;
margin-bottom: 0.8rem;
color: var(--primary);
font-weight: 700;
}
.advantage-card p {
color: var(--dark-gray);
font-size: .95rem;
line-height: 1.6;
}
/* ==========================================
СЕКЦИЯ КОНТАКТЫ
========================================== */
#contacts {
padding: 2rem 5% 6rem;
background-color: #f8f9fa;
}
.contacts-container {
display: flex;
justify-content: space-between;
max-width: 1400px;
margin: 0 auto 4rem;
padding: 0 1.5rem;
}
.contact-col {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
padding: 0 1.5rem;
position: relative;
}
.contact-col:not(:last-child)::after {
content: '';
position: absolute;
right: 0;
top: 20%;
height: 65%;
width: 1px;
background: linear-gradient(to bottom, transparent, var(--primary), transparent);
box-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
}
.contact-col h3 {
font-size: 1.9rem;
margin-bottom: 1.6rem;
color: var(--dark);
font-weight: 700;
}
.contact-col h3::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 45px;
height: 3px;
background: var(--primary);
border-radius: 2px;
}
.contact-col a {
color: var(--primary);
text-decoration: none;
font-family: 'Montserrat', sans-serif;
font-size: 1.65rem;
display: block;
transition: var(--transition);
font-weight: 600;
position: relative;
padding: 6px 12px;
}
.contact-col a:hover {
color: #2980b9;
transform: scale(1.05);
}
.qr-code {
width: 150px;
height: 150px;
background: var(--white);
border-radius: 12px;
margin: 1.5rem auto;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--primary);
font-weight: 700;
color: var(--primary);
font-size: 0.85rem;
box-shadow: var(--shadow);
position: relative;
overflow: hidden;
font-family: 'Montserrat', sans-serif;
}
.schedule {
background: var(--white);
border-radius: var(--border-radius);
padding: 1.5rem 1.7rem;
margin: -0.1rem 0;
text-align: center;
width: 100%;
max-width: 360px;
border: 1px solid var(--light-gray);
box-shadow: var(--shadow);
}
.schedule p {
margin: 0.65rem 0;
color: var(--dark-gray);
font-size: 1.1rem;
}
.schedule p strong {
color: var(--primary);
font-weight: 600;
}
.map-container {
width: 100%;
max-width: 400px;
height: 260px;
border-radius: var(--border-radius-lg);
overflow: hidden;
border: 2px solid var(--primary);
background: linear-gradient(45deg, #e3f2fd 25%, #bbdefb 50%, #e3f2fd 75%);
position: relative;
box-shadow: var(--shadow);
margin-top: 0.8rem;
}
/* ==========================================
МОДАЛЬНОЕ ОКНО
========================================== */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.75);
z-index: 2000;
justify-content: center;
align-items: center;
padding: 2rem;
}
.modal.active {
display: flex;
animation: fadeIn 0.4s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.modal-content {
line-height: 1;
background: var(--white);
border-radius: var(--border-radius-lg);
width: 80%;
max-width: 580px;
position: relative;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
transform: translateY(30px);
opacity: 0;
transition: all 0.5s ease;
overflow: hidden;
}
.modal.active .modal-content {
transform: translateY(0);
opacity: 1;
}
.close-modal {
position: absolute;
top: 20px;
right: 25px;
font-size: 2.2rem;
background: none;
border: none;
color: var(--dark-gray);
cursor: pointer;
transition: var(--transition);
width: 40px;
height: 40px;
border-radius: var(--border-radius-full);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Montserrat', sans-serif;
font-weight: 300;
}
.close-modal:hover {
background: var(--light);
color: var(--accent);
transform: rotate(90deg);
}
.modal-form {
padding: 2rem;
}
.modal-form h3 {
text-align: center;
font-size: 1.4rem;
margin-bottom: 1.5rem;
color: var(--dark);
font-weight: 700;
}
.modal-form h3::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: var(--primary);
border-radius: 2px;
}
.form-group {
margin-bottom: .7rem;
}
.form-group label {
display: block;
margin-bottom: 0.8rem;
font-weight: 600;
color: var(--dark);
font-size: 1rem;
}
.form-control {
width: 100%;
padding: .7rem 1rem;
background: var(--white);
border: 1px solid var(--light-gray);
border-radius: 8px;
color: var(--dark);
font-size: 1.05rem;
font-family: 'Open Sans', sans-serif;
transition: var(--transition);
}
.form-control:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}
select.form-control {
appearance: none;
background-image: url("image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232c3e50' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1.2rem center;
background-size: 1.2em;
}
.submit-btn {
background: var(--primary);
color: var(--white);
border: none;
width: 100%;
padding: 1rem;
border-radius: 8px;
font-family: 'Montserrat', sans-serif;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
margin-top: 0.1rem;
box-shadow: var(--shadow);
}
.submit-btn:hover {
background: #2980b9;
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
}
.submit-btn:active {
transform: translateY(1px);
}
.submit-btn:disabled {
opacity: 0.8;
cursor: not-allowed;
transform: none;
}
.success-message {
background: #e8f5e9;
border: 1px solid var(--secondary);
color: #2e7d32;
padding: 1.2rem;
border-radius: 8px;
margin-top: 1.3rem;
text-align: center;
font-weight: 600;
font-size: 1.15rem;
display: none;
font-family: 'Open Sans', sans-serif;
}
.error-message {
background: #ffebee;
border: 1px solid var(--accent);
color: #c62828;
padding: 1.2rem;
border-radius: 8px;
margin-top: 1.3rem;
text-align: center;
font-weight: 600;
font-size: 1.15rem;
display: none;
font-family: 'Open Sans', sans-serif;
}
/* ==========================================
ФУТЕР
========================================== */
footer {
background: var(--dark);
padding: 1.4rem 5%;
text-align: center;
color: var(--white);
margin-top: 5rem;
}
footer p {
font-family: 'Open Sans', sans-serif;
font-size: 1.1rem;
margin-bottom: 1.5rem;
opacity: 0.9;
}
.footer-links {
display: flex;
justify-content: center;
gap: 2.5rem;
margin-top: 1.2rem;
}
.footer-links a {
color: var(--light);
text-decoration: none;
transition: var(--transition);
font-family: 'Open Sans', sans-serif;
font-size: 1rem;
position: relative;
padding: 0.5rem 0;
}
.footer-links a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--primary);
transition: var(--transition);
}
.footer-links a:hover {
color: var(--primary);
}
.footer-links a:hover::after {
width: 100%;
}
/* ==========================================
АНИМАЦИИ
========================================== */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate {
animation: fadeInUp 0.7s ease forwards;
}
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }
.delay-6 { animation-delay: 0.6s; }
/* ==========================================
СТИЛИ ДЛЯ СТРАНИЦЫ СОГЛАСИЯ И ОФЕРТЫ
========================================== */
.legal-page {
padding: 10rem 5% 5rem;
max-width: 900px;
margin: 0 auto;
}
.page-title {
text-align: center;
font-size: 3.2rem;
margin-bottom: 3rem;
position: relative;
display: inline-block;
}
.page-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 70px;
height: 4px;
background: var(--primary);
border-radius: 2px;
}
.legal-content {
background: var(--white);
border-radius: var(--border-radius-lg);
padding: 3rem;
box-shadow: var(--shadow);
line-height: 1.8;
}
.legal-content p {
margin-bottom: 1.2rem;
font-size: 1.05rem;
}
.legal-content h2 {
font-size: 2rem;
margin-top: 2.5rem;
margin-bottom: 1.5rem;
position: relative;
padding-bottom: 0.5rem;
}
.legal-content h2::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 3px;
background: var(--primary);
border-radius: 2px;
}
.legal-content h3 {
font-size: 1.6rem;
margin-top: 2rem;
margin-bottom: 1rem;
color: var(--primary);
}
.legal-content ul,
.legal-content ol {
margin-left: 2rem;
margin-bottom: 1.5rem;
}
.legal-content li {
margin-bottom: 0.7rem;
}
.highlight {
background: rgba(52, 152, 219, 0.1);
border-left: 4px solid var(--primary);
padding: 1.5rem;
border-radius: 0 var(--border-radius) var(--border-radius) 0;
margin: 2rem 0;
}
.signature-block {
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid var(--light-gray);
}
.signature-line {
height: 1px;
background: var(--dark);
margin: 3rem 0 1rem;
position: relative;
width: 300px;
}
.signature-label {
position: absolute;
bottom: -25px;
left: 0;
font-weight: 600;
color: var(--dark-gray);
}
.form-field {
margin: 1.5rem 0;
}
.form-field label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
}
.form-field input,
.form-field textarea {
width: 100%;
padding: 0.8rem 1.2rem;
border: 1px solid var(--light-gray);
border-radius: var(--border-radius);
font-family: 'Open Sans', sans-serif;
font-size: 1rem;
}
.form-field textarea {
min-height: 100px;
resize: vertical;
}
.checkbox-group {
display: flex;
align-items: flex-start;
margin: 1.5rem 0;
}
.checkbox-group input {
width: auto;
margin-right: 10px;
margin-top: 4px;
}
.checkbox-group label {
margin-bottom: 0;
font-weight: normal;
cursor: pointer;
}
.back-to-main {
display: inline-block;
margin-top: 2rem;
background: var(--primary);
color: var(--white);
padding: 0.8rem 2rem;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
transition: var(--transition);
box-shadow: var(--shadow);
margin-right: 1rem;
}
.back-to-main:hover {
background: #2980b9;
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
}
/* ==========================================
КНОПКА "ВВЕРХ"
========================================== */
.scroll-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background: var(--primary);
color: var(--white);
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 15px rgba(52, 152, 219, 0.4);
transition: var(--transition);
opacity: 0;
visibility: hidden;
z-index: 999;
}
.scroll-to-top:hover {
background: #2980b9;
transform: translateY(-3px) scale(1.1);
box-shadow: 0 6px 20px rgba(52, 152, 219, 0.6);
}
.scroll-to-top:active {
transform: translateY(-1px);
}
.scroll-to-top.show {
opacity: 1;
visibility: visible;
}
.scroll-to-top svg {
width: 24px;
height: 24px;
stroke-width: 2.5;
}
/* ==========================================
АДАПТИВНОСТЬ
========================================== */
/* Планшеты и большие экраны */
@media (max-width: 1400px) {
.hero-content {
grid-template-columns: 1fr 1fr;
}
.hero-left h1 {
font-size: 4.8rem;
}
.hero-left h2 {
font-size: 2.2rem;
}
.services-grid {
grid-template-columns: repeat(1, 100%);
grid-template-rows: repeat(2, 250px);
}
#services > div.services-grid > article.service-card.first.animate{border-radius:30px;}
#services > div.services-grid > article.service-card.fourth.animate.delay-3{border-radius:30px;}
.service-card{border-radius:30px;}
.contacts-sidebar {
right: 3%;
}
.contacts-divider {
right: 75px;
height: 180px;
}
.contact-icon-btn {
width: 55px;
height: 55px;
font-size: 1.7rem;
}
}
/* Планшеты */
@media (max-width: 1200px) {
.contacts-sidebar, .contacts-divider {
display: none !important;
}
.work-types-grid {
grid-template-columns: repeat(3, 1fr);
}
.advantages-container {
grid-template-columns: 1fr;
text-align: center;
}
.advantages-text h2::after {
left: 50%;
transform: translateX(-50%);
}
.advantages-text p {
margin-left: auto;
margin-right: auto;
max-width: 700px;
}
.advantages-grid {
grid-template-columns: repeat(2, 1fr);
}
.contacts-container {
flex-direction: column;
gap: 3rem;
padding: 0;
}
.contact-col:not(:last-child)::after {
display: none;
}
.contact-col {
padding: 0;
margin-bottom: 1.5rem;
}
.map-container {
max-width: 100%;
}
}
/* МОБИЛЬНАЯ ВЕРСИЯ - ИСПРАВЛЕНО ПОВЕДЕНИЕ "КЛИЕНТЫ" */
@media (max-width: 950px) {
/* Скрыть сайдбар контактов */
.contacts-sidebar, .contacts-divider {
display: none !important;
}
body > nav > div > a > img{width:100px !important;}
/* Показать гамбургер ТОЛЬКО в мобильной версии */
.hamburger {
display: flex !important;
margin-left: 15px;
justify-content: center;
align-items: center;
}
/* Скрыть обычное меню навигации */
.nav-links {
position: fixed;
top: 0;
left: -100%;
width: 88%;
max-width: 320px;
height: 100vh;
background: linear-gradient(135deg, #1a2a6c, #2c3e50, #1a2a6c);
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding-top: 100px;
gap: 0.1rem;
transition: left 0.45s cubic-bezier(0.23, 1, 0.32, 1);
box-shadow: 5px 0 40px rgba(0, 0, 0, 0.35);
z-index: 1999;
overflow-y: auto;
border-right: 4px solid var(--primary);
padding-bottom: 40px;
}
.nav-links.active {
left: 0;
}
.nav-links li {
width: 85%;
margin: 0;
}
.nav-links a {
width: 100%;
padding: 16px 20px;
font-size: 1.45rem;
font-weight: 600;
border-radius: 14px;
text-align: center;
color: white;
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.18);
transition: all 0.3s ease;
position: relative;
margin: 4px 0;
letter-spacing: 0.5px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.nav-links a::before {
content: "→";
font-size: 1.6rem;
opacity: 0;
transform: translateX(-5px);
transition: all 0.3s ease;
}
.nav-links a:hover,
.nav-links a.active {
background: rgba(52, 152, 219, 0.35);
transform: translateX(5px);
color: white;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}
.nav-links a:hover::before,
.nav-links a.active::before {
opacity: 1;
transform: translateX(0);
}
.nav-links a::after {
display: none;
}
/* Подменю "Клиентам" - ПОЛНОСТЬЮ ПЕРЕДЕЛАНО */
.clients-dropdown {
width: 100%;
position: relative;
}
/* Стрелка ВНУТРИ ссылки "Клиентам" */
.clients-dropdown > a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
position: relative !important;
gap: 10px !important;
}
.clients-dropdown.active > a::after {
transform: rotate(180deg) !important;
}
/* Подменю - кликабельное, с правильными размерами */
.clients-menu {
position: static !important;
width: calc(100% - 20px) !important; /* Учитываем отступы родителя */
max-height: 200px !important; /* Ограничиваем высоту */
overflow-y: auto !important; /* Добавляем прокрутку */
margin: 10px auto 0 !important; /* Центрируем и добавляем отступ сверху */
display: none !important;
background: rgba(0, 30, 60, 0.85) !important;
border: 1px solid rgba(52, 152, 219, 0.5) !important;
border-radius: 14px !important;
padding: 10px !important;
backdrop-filter: blur(10px) !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
z-index: 2001 !important;
animation: slideDownMenu 0.3s ease !important;
box-sizing: border-box !important;
}
.clients-menu.active {
display: block !important;
}
/* Ссылки в подменю - крупные, кликабельные, не выходят за границы */
.clients-menu a {
display: block !important;
padding: 14px 16px !important;
font-size: 1.25rem !important;
color: #e3f2fd !important;
background: rgba(255, 255, 255, 0.12) !important;
margin: 6px 8px !important;
border-radius: 10px !important;
text-align: center !important;
transition: all 0.25s ease !important;
text-decoration: none !important;
font-weight: 500 !important;
letter-spacing: 0.3px !important;
position: relative !important;
z-index: 2002 !important;
width: calc(100% - 16px) !important; /* Учитываем отступы */
box-sizing: border-box !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.clients-menu a:hover {
color: white !important;
background: rgba(52, 152, 219, 0.55) !important;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2) !important;
transform: none !important; /* Убираем сдвиг */
}
.clients-menu a:active {
transform: scale(0.98) !important;
}
/* Анимация появления подменю */
@keyframes slideDownMenu {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Адаптация главного экрана */
#hero {
padding: 8rem 4% 5rem;
background-position: 78% center;
background-size: cover;
}
.hero-content {
grid-template-columns: 1fr;
max-width: 100%;
text-align: center;
}
.hero-left {
align-items: center;
margin-bottom: 2rem;
}
.hero-left h1 {
font-size: 4.2rem;
}
.hero-left h2 {
font-size: 2rem;
margin-left: auto;
margin-right: auto;
}
.hero-center {
order: 2;
margin-top: 2rem;
max-width: 100%;
}
/* Адаптация сетки услуг */
.services-grid {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto;
gap: 20px;
justify-content: center;
}
.service-card.first,
.service-card.second {
width: 100%;
}
.service-card.third {
grid-area: auto;
grid-column: span 2;
}
.service-card.fourth {
grid-area: auto;
grid-column: span 2;
grid-row: span 1;
}
/* Адаптация видов работ */
.work-types-grid {
grid-template-columns: repeat(2, 1fr);
}
/* Улучшение адаптации секции преимуществ */
.advantages-container {
grid-template-columns: 1fr;
text-align: center;
gap: 2.5rem;
}
.advantages-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.advantages-text h2 {
text-align: center;
}
.advantages-text h2::after {
left: 50%;
transform: translateX(-50%);
}
/* Уменьшение отступов секций */
section {
padding: 5rem 4%;
}
.section-title {
font-size: 2.8rem;
text-align: center;
display: block;
width: 100%;
}
.section-title::after {
left: 50%;
transform: translateX(-50%);
}
/* Стили ТОЛЬКО для страницы согласия и оферты */
.legal-page .nav-links {
display: none !important;
}
.legal-page .hamburger {
display: flex !important;
}
.legal-page {
padding: 8rem 4% 4rem;
}
.legal-content {
padding: 2rem;
}
.page-title {
font-size: 2.6rem;
}
.signature-line {
width: 100%;
}
/* Контакты в мобильном меню с оригинальными иконками */
.mobile-contacts {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
align-items: center !important;
gap: 10px !important;
margin-top: 25px !important;
padding: 12px 0 !important;
border-top: 1px solid rgba(52, 152, 219, 0.35) !important;
width: 100% !important;
background: rgba(0, 30, 60, 0.55) !important;
backdrop-filter: blur(10px) !important;
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
z-index: 2000 !important;
}
.mobile-contacts .contact-icon-btn {
width: 52px !important;
height: 52px !important;
margin: 0 3px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 50% !important;
background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 70%) !important;
transition: all 0.25s ease !important;
position: relative !important;
overflow: hidden !important;
}
.mobile-contacts .contact-icon-btn img {
width: 28px !important;
height: 28px !important;
object-fit: contain !important;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)) !important;
}
.mobile-contacts .contact-icon-btn:hover {
transform: scale(1.08) !important;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45) !important;
background: radial-gradient(circle, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 70%) !important;
}
.mobile-contacts .tooltip {
display: none !important;
}
}
/* Маленькие планшеты */
@media (max-width: 768px) {
nav {
padding: 1rem 4%;
}
.logo {
font-size: 1.6rem;
}
.hero-left h1 {
font-size: 3.8rem;
}
.hero-left h2 {
font-size: 1.9rem;
}
.contact-btn {
padding: 1rem 2.2rem;
font-size: 1.1rem;
}
.work-types-grid {
grid-template-columns: 1fr;
}
.book-btn {
width: 170px;
height: 60px;
font-size: 1.25rem;
}
}
/* Мобильные устройства */
@media (max-width: 650px) {
.section-title {
font-size: 1.8rem;
}
#services > div.services-grid > article.service-card.sixth.animate.delay-3{border-radius:5% !important;}
.form-group label {
font-size: .8rem !important;
}
.modal-content {
width:100% !important;
}
.hero-left h1 {
font-size: 3rem;
}
.hero-left h2 {
font-size: 1.3rem;
}
section {
padding: 3.5rem 4%;
}
.modal-form {
padding: 2rem;
}
.modal-form h3 {
font-size: 1.3rem !important;
}
.close-modal {
top: 15px;
right: 20px;
font-size: 1.8rem;
width: 35px;
height: 35px;
}
.qr-code {
width: 135px;
height: 135px;
font-size: 0.8rem;
}
.book-btn {
width: 165px;
height: 58px;
font-size: 1.2rem;
}
.contact-btn {
padding: 1rem 2.2rem;
font-size: 1.1rem;
}
.map-container {
height: 220px;
}
footer p {
font-size: 1rem;
}
.footer-links {
gap: 1.8rem;
flex-wrap: wrap;
}
/* Убрать все потенциальные источники горизонтального скролла */
.services-grid, .work-types-grid, .advantages-container, .contacts-container {
width: 100%;
max-width: 100%;
padding-left: 12px;
padding-right: 12px;
box-sizing: border-box;
}
.service-card, .work-type-card, .advantage-card, .contact-col {
max-width: 100%;
box-sizing: border-box;
}
/* Стили для страницы согласия */
.legal-page {
padding: 7rem 4% 3rem;
}
.page-title {
font-size: 2.3rem;
}
.legal-content h2 {
font-size: 1.8rem;
}
.legal-content h3 {
font-size: 1.5rem;
}
.legal-content p {
font-size: 1rem;
}
.back-to-main, .submit-btn {
padding: 0.7rem 1.7rem;
font-size: 0.95rem;
width: 100%;
text-align: center;
}
.checkbox-group {
flex-direction: column;
align-items: flex-start;
}
}
/* Дополнительные стили для логотипа */
.logo > a {
text-decoration: none;
color: var(--primary);
}
/* Секция услуг: критически важно для больших шестерён */
#services {
position: relative;
overflow: visible !important; /* Запрещаем обрезку */
padding: 10px 0 150px; /* Увеличенные отступы для размещения */
background-color: #ffffff;
margin-top: 50px; /* Доп. отступ сверху для верхней шестерни */
}
/* Общие стили шестерён */
.gear {
position: absolute;
width: 1100px;
height: 1100px;
pointer-events: none;
opacity: 0.32;
z-index: 1; /* Ниже контента */
transform-origin: center; /* Вращение вокруг центра */
}
/* Верхняя левая шестерня: ЧАСТИЧНО ВНЕ СЕКЦИИ (стильный эффект) */
.left-top-gear {
top: -20px;   /* Центр шестерни над секцией */
left: -220px;  /* Центр шестерни левее секции */
}
/* Нижняя правая шестерня: ЧАСТИЧНО ВНЕ СЕКЦИИ */
.right-bottom-gear {
bottom: -60px; /* Центр шестерни под секцией */
right: -220px;  /* Центр шестерни правее секции */
}
/* Изображение внутри шестерни */
.gear img {
width: 85%;
height: 85%;
display: block;
object-fit: contain;
filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.55));
}
/* КРИТИЧЕСКИ ВАЖНО: контент ВСЕГДА поверх шестерён */
#services > .section-title,
#services > .services-grid,
#services > .book-btn {
position: relative;
z-index: 10; /* Выше шестерён (z-index:1) */
}
/* Адаптивность: скрываем на всех кроме десктопов */
@media (max-width: 1400px) {
.gear {
display: none !important;
}
#services {
padding: 80px 0 100px !important;
margin-top: 0 !important;
}
}
/* Для очень широких экранов: оптимизация позиционирования */
@media (min-width: 2000px) {
.left-top-gear { top: -250px; left: -250px; }
.right-bottom-gear { bottom: -250px; right: -250px; }
}
@media (min-width: 1400px) {
#services > .section-title{
right: 31%;
}
}
/* ====== СПЕЦИАЛЬНЫЕ СТИЛИ ДЛЯ ТРЕТЬЕЙ КАРТОЧКИ (КАРТИНКА 80% + ТЕКСТ ПОВЕРХ) ====== */
.service-card-overlay {
padding: 0 !important;
overflow: hidden !important;
position: relative !important;
}
.service-card-overlay .overlay-container {
position: relative;
width: 100%;
height: 100%;
}
.service-card-overlay .overlay-img {
position: absolute;
top: 0;
left: 0;
width: 36%; /* Картинка занимает 80% ширины */
height: 100%;
object-fit: cover;
z-index: 1;
transition: transform 0.3s ease;
}
/*
.service-card-overlay .overlay-text {
position: absolute;
top: 0;
left: 56%;
width: 45%;
height: 67%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 2rem 1.5rem;
color: white;
z-index: 2;
box-sizing: border-box;
transition: background 0.3s ease;
}
*/
/* Адаптивность: на мобильных устройствах возвращаем обычное расположение */
@media (max-width: 950px) {
.service-card-overlay {
padding: 0;
}
.service-card-overlay .overlay-container {
display: block !important;
}
.service-card-overlay .overlay-img {
position: relative !important;
width: 100% !important;
height: 180px !important;
left: auto !important;
top: auto !important;
margin-bottom: 1.5rem !important;
transform: none !important;
}
.service-card-overlay .overlay-text {
position: relative !important;
width: 100% !important;
height: auto !important;
left: auto !important;
top: auto !important;
background: none !important;
color: var(--dark) !important;
padding: 0 !important;
text-align: center !important;
}
.service-card-overlay .overlay-text p {
font-size: 1.2rem !important;
text-shadow: none !important;
}
.service-card-overlay:hover .overlay-text {
background: none !important;
}
}
#work-types p {font-size:1.25rem;margin-left: 5rem;text-align: center;}
/*----------------------------------*/
/* ==========================================
🔆🌙 THEME TOGGLE + DARK MODE
========================================== */
/* Кнопка переключения */
.theme-toggle {
position: fixed;
top: 20px;
right: 20px;
width: 44px;
height: 44px;
border-radius: 50%;
background: #fff;
border: 2px solid #e0e0e0;
cursor: pointer;
z-index: 10001;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.theme-toggle:hover {
transform: scale(1.1);
border-color: #3390ec;
}
.theme-icon {
position: absolute;
transition: all 0.3s ease;
}
.theme-icon.sun { opacity: 1; transform: rotate(0) scale(1); }
.theme-icon.moon { opacity: 0; transform: rotate(-90deg) scale(0.5); }
/* Состояние: тёмная тема активна */
.dark-theme .theme-icon.sun { opacity: 0; transform: rotate(90deg) scale(0.5); }
.dark-theme .theme-icon.moon { opacity: 1; transform: rotate(0) scale(1); }
.dark-theme .theme-toggle {
background: #1a1a2e;
border-color: #3390ec;
}
/* ==========================================
🌙 ТЁМНАЯ ТЕМА — ПЕРЕМЕННЫЕ
========================================== */
:root {
/* Светлая тема (по умолчанию) */
--bg-primary: #ffffff;
--bg-secondary: #f8f9fa;
--text-primary: #1a1a2e;
--text-secondary: #666666;
--card-bg: #ffffff;
--border-color: #e0e0e0;
--shadow-color: rgba(0, 0, 0, 0.08);
}
.dark-theme {
/* Тёмная тема */
--bg-primary: #0f0f1a;
--bg-secondary: #1a1a2e;
--text-primary: #e0e0e0;
--text-secondary: #a0a0b0;
--card-bg: #16213e;
--border-color: #2a2a4a;
--shadow-color: rgba(0, 0, 0, 0.3);
}
/* ==========================================
🌙 ПРИМЕНЕНИЕ ТЁМНОЙ ТЕМЫ
========================================== */
/* Основной фон и текст */
.dark-theme body {
background: var(--bg-primary);
color: var(--text-primary);
}
/* Навигация */
.dark-theme nav {
background: var(--card-bg);
border-bottom-color: var(--border-color);
}
/* Карточки услуг и преимуществ */
.dark-theme .service-card,
.dark-theme .advantage-card,
.dark-theme .work-type-card {
background: var(--card-bg);
border-color: var(--border-color);
box-shadow: 0 4px 20px var(--shadow-color);
}
.dark-theme .service-card:hover,
.dark-theme .advantage-card:hover,
.dark-theme .work-type-card:hover {
box-shadow: 0 12px 40px rgba(51, 144, 236, 0.2);
}
/* Секции */
.dark-theme #services,
.dark-theme #advantages,
.dark-theme #contacts {
background: var(--bg-secondary);
}
/* Форма и инпуты */
.dark-theme .form-control,
.dark-theme textarea {
background: var(--bg-primary);
border-color: var(--border-color);
color: var(--text-primary);
}
.dark-theme .form-control::placeholder,
.dark-theme textarea::placeholder {
color: var(--text-secondary);
}
/* Модальное окно */
.dark-theme .modal-content {
background: var(--card-bg);
color: var(--text-primary);
}
/* Футер */
.dark-theme footer {
background: var(--card-bg);
border-top-color: var(--border-color);
}
/* Кнопки */
.dark-theme .contact-btn,
.dark-theme .book-btn,
.dark-theme .submit-btn {
background: linear-gradient(135deg, #3390ec 0%, #00d4ff 50%, #3390ec 100%);
}
/* Мобильное меню */
.dark-theme .mobile-bottom-nav {
background: var(--card-bg);
box-shadow: 0 -2px 10px var(--shadow-color);
}
.dark-theme .mobile-bottom-nav .nav-item {
color: var(--text-secondary);
}
.dark-theme .mobile-bottom-nav .nav-item:hover,
.dark-theme .mobile-bottom-nav .nav-item.primary {
color: #3390ec;
}
/* Гамбургер меню */
.dark-theme .hamburger span {
background: var(--text-primary);
}
/* Тултипы */
.dark-theme .tooltip {
background: var(--card-bg);
color: var(--text-primary);
border: 1px solid var(--border-color);
}
/* Плавный переход для всех элементов */
body, nav, section, .service-card, .advantage-card,
.form-control, .modal-content, footer, .mobile-bottom-nav {
transition: background-color 0.3s ease, color 0.3s ease,
border-color 0.3s ease, box-shadow 0.3s ease;
}
/* Адаптив: сдвигаем кнопку, если есть мобильное меню */
@media (max-width: 768px) {
.theme-toggle {
top: 16px;
right: 16px;
width: 40px;
height: 40px;
font-size: 18px;
}
}
.cookie-content {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.cookie-content p {
margin: 0;
font-size: 14px;
line-height: 1.4;
color: #e0e0e0;
}
.cookie-btn {
background: #3390ec;
color: #fff;
border: none;
padding: 10px 24px;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
white-space: nowrap;
}
.cookie-btn:hover {
background: #2578c9;
}
/* Адаптив для мобильных */
@media (max-width: 768px) {
.cookie-content {
flex-direction: column;
text-align: center;
}
.cookie-content p {
font-size: 13px;
}
.cookie-btn {
width: 100%;
max-width: 200px;
}
}
.cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #1a1a2ec4;
color: #fff;
padding: 16px 20px;
z-index: 10000;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
animation: slideUp 0.3s ease;
}
@keyframes slideUp {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
#contacts > div > div:nth-child(2) > h3{margin-bottom:0px !important;}
/*#work-types > div.work-types-grid > article.work-type-card.animate.delay-1{background: url(img/vid1.png);height:265px;width:400px;}
#work-types > div.work-types-grid > article.work-type-card.animate.delay-3{background: url(img/vid2.png);height:265px;width:400px;background-position: left;}
#work-types > div.work-types-grid > article.work-type-card.animate.delay-4{background: url(img/vid3.png);height:265px;width:400px;}
#work-types > div.work-types-grid > article.work-type-card.animate.delay-2{background: url(img/vid4.png);height:265px;width:400px;}
#work-types > div.work-types-grid > article.work-type-card.animate.delay-5{background: url(img/vid5.png);height:265px;width:400px;}
#work-types > div.work-types-grid > article.work-type-card.animate.delay-6{background: url(img/vid6.png);height:265px;width:400px;}*/
@media screen and ((min-width: 1100px) and (max-width: 1600px)) {
.work-types-header{margin-left:0px !important;}
#services > .section-title{right: 31%;}
}
@media screen and ((min-width: 900px) and (max-width: 1100px)) {
.work-types-header{margin-left:-5vw !important;}
}
@media screen and ((min-width: 1200px) and (max-width: 1400px)) {
.services-grid{grid-template-columns: auto;grid-template-rows: auto;max-width:90vw;}
.service-card img {width:34% !important;}.service-card h3 {font-size:1.5rem;}.service-card.fourth h3{font-size:1.5rem;}
#services > div.services-grid > article.service-card.first.animate > div > div > img {height:90%;bottom:1vh;left:1vw;}
#services > div.services-grid > article.service-card.fourth.animate.delay-3 > img {height:35%;left:13vw;}
#services > div.services-grid > article.service-card.second.animate.delay-1 > div > img {position:relative;left:4vw;}
#services > div.services-grid > article.service-card.third.animate.delay-2.service-card-overlay > div > div > img {overflow:visible;left:1vw;}
#services > div.services-grid > article.service-card.sixth.animate.delay-3 > div > img {width: 48% !important;}
#services > div.services-grid > article.service-card.fifth.animate.delay-3 > div > img {position: absolute; height: 55%; overflow: visible; z-index: 10;bottom:-4vh;left:9vw;}
#services > div.services-grid > article.service-card.fifth.animate.delay-3 > div > p {z-index:100}
}
@media screen and ((min-width: 651px) and (max-width: 900px)) {
.work-types-header{margin-left:-5vw !important;}
}
@media screen and ((min-width: 520px) and (max-width: 770px)) {
#work-types > div.work-types-grid > article.work-type-card.animate.delay-1{background-size:cover;}
#work-types > div.work-types-grid > article.work-type-card.animate.delay-3{background-size:cover;}
#work-types > div.work-types-grid > article.work-type-card.animate.delay-4{background-size:cover;}
#work-types > div.work-types-grid > article.work-type-card.animate.delay-2{background-size:cover;}
#work-types > div.work-types-grid > article.work-type-card.animate.delay-5{background-size:cover;}
#work-types > div.work-types-grid > article.work-type-card.animate.delay-6{background-size:cover;}
}
@media screen and ((min-width: 651px) and (max-width: 1199px)) {
#services > div.services-grid > article.service-card.third.animate.delay-2.service-card-overlay > div > div > img{display:none;}
#services > div.services-grid > article.service-card.first.animate > div > div > img {display:none;}
#services > div.services-grid > article.service-card.second.animate.delay-1 > div > img {display:none;}
#services > div.services-grid > article.service-card.fourth.animate.delay-3 > img{display:none;}
#services > div.services-grid > article.service-card.fifth.animate.delay-3 > div > img{display:none;}
#services > div.services-grid > article.service-card.sixth.animate.delay-3 > div > img{display:none;}
}
/* ==========================================
ДОПОЛНИТЕЛЬНАЯ АДАПТИВНОСТЬ (ИСПРАВЛЕНИЯ)
========================================== */
/* Исправление жесткой ширины карточек видов работ на планшетах и телефонах */
@media (max-width: 1199px) {
    #work-types > div.work-types-grid > article.work-type-card {
        width: 100% !important;
        max-width: 100%;
    }
}

/* Дополнительная адаптация для очень маленьких экранов (менее 480px) */
@media (max-width: 480px) {
    .hero-left h1 {
        font-size: 2.5rem !important;
    }
    .hero-left h2 {
        font-size: 1.1rem !important;
    }
    .section-title {
        font-size: 1.8rem !important;
    }
    .theme-toggle {
        top: 10px;
        right: 10px;
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
    .work-types-header {
        margin-left: 0 !important;
        text-align: center;
    }
    #work-types p {
        margin-left: 0 !important;
        font-size: 1rem !important;
    }
    .cookie-content p {
        font-size: 12px;
    }
    .cookie-btn {
        padding: 8px 16px;
        font-size: 12px;
    }
}
.worknewImg{display: flex;align-items: center;flex-direction: row-reverse;width: 40%;height: 100%;text-align: start;justify-content: flex-end;gap: clamp(1rem, 3vw, 2rem);}
    /* === 📱 Плавающая кнопка телефона (только мобильные) === */
.mobile-phone-fab {
    position: fixed;
    bottom: 100px;
    right: 20px;
    width: 56px;
    height: 56px;
    background: var(--primary, #00628f);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 98, 143, 0.4);
    z-index: 9999;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    /* Скрыто по умолчанию — покажем только на мобильных */
    display: none;
}

.mobile-phone-fab img {
    width: 28px;
    height: 28px;
    filter: brightness(0) invert(1); /* Делаем иконку белой */
    pointer-events: none;
}

/* Всплывающая подсказка (опционально) */
.mobile-phone-fab .fab-tooltip {
    position: absolute;
    bottom: 70px;
    right: 0;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
}

.mobile-phone-fab:hover .fab-tooltip,
.mobile-phone-fab:active .fab-tooltip {
    opacity: 1;
    transform: translateY(0);
}

/* Эффект нажатия */
.mobile-phone-fab:active {
    transform: scale(0.95);
    box-shadow: 0 2px 12px rgba(0, 98, 143, 0.3);
}

/* Пульсация для привлечения внимания (опционально) */
@keyframes fabPulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(0, 98, 143, 0.4); }
    50% { box-shadow: 0 4px 32px rgba(0, 98, 143, 0.7); }
}
.mobile-phone-fab {
    animation: fabPulse 2s infinite;
}

/* === 🖥️ Показываем ТОЛЬКО на мобильных (до 768px) === */
@media (max-width: 768px) {
    .mobile-phone-fab {
        display: flex; /* Включаем кнопку */
    }
    
    /* Опционально: скрываем десктопный сайдбар контактов на мобильных, чтобы не дублировать */
    .contacts-sidebar {
        display: none;
    }
}

/* === 🌙 Адаптация под тёмную тему (если есть) === */
.dark-theme .mobile-phone-fab {
    background: var(--primary-dark, #3498dbb0);
    box-shadow: 0 4px 20px rgba(52, 152, 219, 0.5);
}
.dark-theme .mobile-phone-fab:active {
    box-shadow: 0 2px 12px rgba(52, 152, 219, 0.4);
}