.elementor-18 .elementor-element.elementor-element-0944a6c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-18 .elementor-element.elementor-element-791e99c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-18 .elementor-element.elementor-element-fcd3791{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-18 .elementor-element.elementor-element-fb59c1b{margin:-3% 0% calc(var(--kit-widget-spacing, 0px) + 0%) 0%;}.elementor-18 .elementor-element.elementor-element-e5042da{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-18 .elementor-element.elementor-element-0e84741{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-93f9794 *//* Основна секція */
.hero-centered {
    position: relative;
    width: 100%;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
    overflow: hidden;
    padding: 80px 20px 60px; /* Більше зверху для дихання */
}

/* Ефект м'якого сяйва на фоні */
.hero-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 196, 159, 0.1) 0%, rgba(0, 0, 0, 0) 70%);
    filter: blur(60px);
    z-index: 1;
}

.hero-container {
    position: relative;
    z-index: 2;
    max-width: 1000px; /* Трохи ширше для довгого H1 */
    text-align: center;
}

/* Заголовки — ЗМЕНШЕНО для довшого тексту */
.hero-title {
    font-size: clamp(28px, 5.5vw, 64px); /* Менший max, бо текст довший */
    font-weight: 900;
    color: #fff;
    line-height: 1.1; /* Було 1, тепер трохи більше для читабельності */
    margin: 0;
    letter-spacing: -1px; /* Було -2px, заслабко на мобільному */
}

.hero-title .accent {
    color: #00C49F;
}

.hero-subtitle {
    font-size: clamp(16px, 2.5vw, 26px); /* Зменшено */
    color: #fff;
    font-weight: 400;
    line-height: 1.3;
    margin: 16px auto 20px;
    max-width: 800px; /* Щоб не розтягувався на десктопі */
}

/* Лінія-розділювач */
.hero-divider {
    width: 60px;
    height: 4px;
    background: #00C49F;
    margin: 0 auto 30px;
    border-radius: 2px;
}

/* Основний текст */
.hero-text {
    font-size: clamp(15px, 1.8vw, 18px);
    color: #ccc;
    line-height: 1.7; /* Збільшено для довгого тексту */
    margin-bottom: 40px;
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
}

/* Кнопки */
.hero-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap; /* Щоб не зламались на мобільному горизонталі */
}

.btn-primary {
    background: #00C49F;
    color: #000; /* БУЛО #fff — змінено для контрасту WCAG AA */
    padding: 16px 40px;
    border-radius: 5px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
    display: inline-block;
    font-size: 16px;
}

.btn-secondary {
    border: 2px solid #fff;
    color: #fff;
    padding: 14px 40px;
    border-radius: 5px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
    display: inline-block;
    font-size: 16px;
}

.btn-primary:hover { 
    background: #fff; 
    color: #000; 
    transform: translateY(-3px); 
}
.btn-secondary:hover { 
    background: #00C49F; 
    border-color: #00C49F; 
    color: #000; /* Додано для контрасту */
    transform: translateY(-3px); 
}

/* Мобільна адаптація */
@media (max-width: 768px) {
    .hero-centered {
        padding: 60px 16px 40px;
        min-height: auto; /* На мобільному не треба 70vh */
    }
    
    .hero-title {
        letter-spacing: -0.5px; /* Ще менше на мобільному */
    }
    
    .hero-text {
        margin-bottom: 30px;
    }
    
    .hero-actions {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    
    .btn-primary, .btn-secondary {
        width: 100%;
        max-width: 320px;
    }
}

/* Маленькі телефони */
@media (max-width: 380px) {
    .hero-title {
        font-size: 26px;
    }
    .hero-subtitle {
        font-size: 15px/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-791e99c */@media (max-width: 767px) {
    /* Налаштування фону Hero для мобілки */
    .hero-truck {
        min-height: 100vh; /* Робимо на весь екран смартфона */
        background-position: 70% center; /* Зміщуємо фото, щоб кабіну було краще видно */
        background-attachment: scroll; /* Вимикаємо паралакс для стабільності на iOS */
        align-items: flex-start; /* Піднімаємо текст трохи вище центра */
        padding-top: 40px;
    }

    /* Накладання (оверлей) стає щільнішим для читабельності */
    .hero-overlay {
        background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.5) 100%);
    }

    /* Контент Hero по центру */
    .hero-content {
        text-align: center;
        width: 100%;
    }

    /* Головний заголовок MOBILE TRUCK */
    .hero-content h1 {
        font-size: 48px !important;
        line-height: 0.9;
        margin-bottom: 10px;
    }

    /* Підзаголовок Detailing & Wrap */
    .hero-content h2 {
        font-size: 24px !important;
        margin-bottom: 15px;
        font-weight: 600;
    }

    /* Опис послуг */
    .hero-content p {
        font-size: 15px !important;
        line-height: 1.4;
        margin-bottom: 25px;
        color: #ddd;
    }

    /* Кнопки одна під одною */
    .hero-btns {
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }

    .btn-main, .btn-outline {
        width: 100%;
        max-width: 280px;
        padding: 14px 0 !important;
        font-size: 16px;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-b5822dc *//* --- КОМПАКТНА ВБУДОВАНА ФОРМА --- */

/* 1. Обмежуємо ширину контейнера форми */
.inline-form-container {
    max-width: 420px !important; /* Вузька форма */
    margin: 20px auto 0;         /* Центрування */
}

/* 2. Сама обгортка форми (рамка і фон) */
.embedded-form-wrapper {
    padding: 20px !important;    /* Менше відступів всередині */
    background: rgba(0, 0, 0, 0.4); 
    border: 1px solid rgba(0, 196, 159, 0.2);
    border-radius: 12px;
}

/* 3. Сітка: поля в один рядок */
.inline-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.inline-half {
    width: 50%;
}

/* 4. Стиль полів (робримо їх маленькими) */
.inline-compact-form input,
.inline-compact-form textarea {
    background: #000 !important;
    border: 1px solid #333 !important;
    color: #fff !important;
    border-radius: 6px !important;
    font-size: 13px !important; /* Акуратний шрифт */
    padding: 0 12px !important;
    width: 100%;
}

/* Висота для текстових полів (Input) */
.inline-compact-form input {
    height: 40px !important; /* Компактна висота */
    margin-bottom: 0 !important;
}

/* Висота для повідомлення (Textarea) */
.inline-compact-form textarea {
    height: 55px !important; /* Невисоке поле повідомлення */
    padding-top: 10px !important;
    margin-bottom: 10px !important;
}

/* Ефект фокусу */
.inline-compact-form input:focus,
.inline-compact-form textarea:focus {
    border-color: #00C49F !important;
}

/* 5. Кнопка */
.inline-btn {
    width: 100%;
    background: #00C49F !important;
    color: #000 !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 14px !important;
    padding: 10px !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer;
    transition: 0.3s;
    margin-top: 0 !important;
}

.inline-btn:hover {
    background: #fff !important;
    transform: translateY(-2px);
}

/* Розділювач "OR" (робимо меншим) */
.cta-divider {
    margin: 15px 0 !important;
}

/* Мобільна адаптація: на телефоні поля одне під одним */
@media (max-width: 450px) {
    .inline-row {
        flex-direction: column;
        gap: 10px;
    }
    .inline-half {
        width: 100%;
    }
}

.inline-form-container {
    max-width: 500px;
    margin: 30px auto 0;
    text-align: center;
}

/* Фон та відступи для блоку форми */
.embedded-form-wrapper {
    background: rgba(0, 0, 0, 0.3); /* Легке затемнення під формою */
    padding: 25px;
    border-radius: 15px;
    border: 1px solid rgba(0, 196, 159, 0.15);
}

/* Стилізація полів форми саме в цьому блоці */
.embedded-form-wrapper .wpcf7-form-control:not(.wpcf7-submit) {
    background: #000 !important; /* Чорний фон полів */
    border: 1px solid #333 !important;
    color: #fff !important;
    padding: 12px 15px !important;
    border-radius: 8px !important;
    margin-bottom: 10px !important;
    font-size: 14px;
}

.embedded-form-wrapper .wpcf7-form-control:focus {
    border-color: #00C49F !important;
}

/* Кнопка відправки форми */
.embedded-form-wrapper .wpcf7-submit {
    width: 100%;
    background: #00C49F !important;
    color: #000 !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    padding: 15px !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer;
    margin-top: 10px;
    transition: 0.3s;
}

.embedded-form-wrapper .wpcf7-submit:hover {
    background: #fff !important;
    transform: translateY(-2px);
}

/* Розділювач "OR" */
.cta-divider {
    margin: 25px 0;
    position: relative;
    text-align: center;
}

.cta-divider span {
    background: #000; /* Колір фону вашого сайту, щоб перекрити лінію */
    padding: 0 15px;
    color: #666;
    font-size: 12px;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
}

.cta-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: #222;
    z-index: 1;
}

/* Кнопка WhatsApp */
.cta-btn-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #fff;
    border: 2px solid #25D366;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
    width: 100%; /* На всю ширину, як і форма */
    box-sizing: border-box;
}

.cta-btn-whatsapp:hover {
    background: #25D366;
    color: #fff;
}

.cta-btn-whatsapp i {
    font-size: 18px;
}

/* Загальний контейнер секції */
.before-after-gallery-section {
    padding: 20px 20px;
    max-width: 1200px;
    margin: 40px auto;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
}

/* Заголовок галереї */
.gallery-header h2 {
    font-size: clamp(32px, 5vw, 48px);
    color: #fff;
    font-weight: 800;
    margin-bottom: 10px;
}

.gallery-header .accent {
    color: #00C49F;
}

.gallery-header p {
    font-size: 16px;
    color: #aaa;
    margin-bottom: 40px;
}

/* Сітка для фото */
.before-after-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px; /* Відстань між фото */
}

/* Кожен елемент галереї */
.gallery-item {
    position: relative;
    border: 2px solid rgba(0, 196, 159, 0.2);
    border-radius: 15px;
    overflow: hidden;
    background-color: #0f0f0f;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}

.gallery-item:hover {
    border-color: #00C49F;
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 196, 159, 0.3);
}

/* Обгортка для зображень */
.image-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* Пропорції 4:3 для всіх зображень */
    height: 0;
}

.image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Ефект "Before/After" при наведенні */
.image-wrapper .img-after {
    opacity: 0; /* Спочатку приховане зображення "Після" */
    transition: opacity 0.4s ease;
}

.gallery-item:hover .img-after {
    opacity: 1; /* Зображення "Після" з'являється при наведенні */
}

/* Підписи "Before" та "After" */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 15px;
    box-sizing: border-box;
    pointer-events: none; /* Щоб не блокувати взаємодію */
}

.overlay span {
    background-color: rgba(0, 196, 159, 0.8);
    color: #000;
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.gallery-item:hover .overlay span {
    opacity: 1;
}

/* Мобільна адаптація */
@media (max-width: 768px) {
    .before-after-grid {
        grid-template-columns: 1fr; /* Один стовпчик на мобільних */
    }
}

/* Контейнер CTA */
.gallery-cta {
    max-width: 900px;
    margin: 40px auto;
    padding: 50px 30px;
    background: radial-gradient(circle at center, #0f0f0f 0%, #000000 100%);
    border: 3px solid #00C49F; /* Груба бірюзова обводка */
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 196, 159, 0.1);
}

.cta-inner h3 {
    font-size: 32px;
    color: #fff;
    font-weight: 800;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.cta-inner .accent {
    color: #00C49F;
}

.cta-inner p {
    font-size: 18px;
    color: #ccc;
    margin-bottom: 35px;
}

/* Кнопки */
.cta-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.cta-btn-main {
    background-color: #00C49F;
    color: #000;
    padding: 16px 35px;
    border-radius: 8px;
    font-weight: 800;
    text-decoration: none;
    font-size: 16px;
    transition: 0.3s;
    text-transform: uppercase;
}

.cta-btn-main:hover {
    background-color: #fff;
    transform: translateY(-3px);
}

.cta-or {
    color: #888;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
}

.cta-btn-whatsapp {
    background-color: transparent;
    color: #fff;
    border: 2px solid #25D366; /* Зелений колір WhatsApp */
    padding: 14px 30px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
}

.cta-btn-whatsapp:hover {
    background-color: #25D366;
    color: #fff;
}

/* Адаптивність */
@media (max-width: 768px) {
    .cta-action {
        flex-direction: column;
        width: 100%;
    }
    .cta-btn-main, .cta-btn-whatsapp {
        width: 100%;
    }
    .cta-inner h3 {
        font-size: 24px;
    }
}

/* --- МОБІЛЬНА АДАПТАЦІЯ ПОПАПІВ (Щоб влазило в екран) --- */
@media (max-width: 600px) {

    /* 1. Зменшуємо саме вікно і відступи */
    .popup-content {
        padding: 15px 15px !important; /* Менше повітря по краях */
        max-height: 85vh; /* Максимум 85% висоти екрана */
        width: 90% !important;
    }

    /* 2. Зменшуємо заголовок, щоб не займав пів екрана */
    .popup-content h3 {
        font-size: 20px !important;
        margin-bottom: 5px !important;
    }
    
    .popup-content p {
        font-size: 12px !important;
        margin-bottom: 1px !important;
        line-height: 1.2;
    }

    /* 3. Робимо поля вводу компактними */
    .compact-form input {
        height: 40px !important;
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }

    /* ОКРЕМО ВИПРАВЛЕННЯ ДЛЯ СПИСКУ (SELECT), ЩОБ ТЕКСТ НЕ РІЗАЛО */
    .compact-form select {
        height: 46px !important; /* Трохи вище за звичайні поля */
        line-height: 46px !important; /* Центрування тексту по вертикалі */
        font-size: 14px !important;
        margin-bottom: 8px !important;
        padding: 0 10px !important;
        background-color: #000 !important; /* Чорний фон, щоб перекрити системний */
        -webkit-appearance: none; /* Вимикаємо стандартний вигляд iPhone */
        appearance: none;
    }

    /* 4. Поле повідомлення (Textarea) */
    .compact-form textarea {
        height: 50px !important; /* Низеньке поле */
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }

    /* 5. Кнопка "Get Quote" */
    .compact-form .cta-form-btn {
        padding: 10px !important; /* Тонша кнопка */
        font-size: 14px !important;
        margin-top: 5px !important;
    }

    /* 6. Виправлення чекбоксів для Apparel на телефоні */
    .checkbox-row {
        margin-top: 5px !important;
        margin-bottom: 10px !important;
    }
    .wpcf7-list-item-label {
        font-size: 13px !important;
    }
    .compact-form input[type="checkbox"] {
        transform: scale(1.2) !important; /* Трохи менші галочки, ніж на ПК */
    }
}/* End custom CSS */