#sc_fixed_contact_button, .sc-fixed-contact-pulsation, .form-check-input:checked, .ocf-theme-light-block .ocf-search-btn-static, .ocf-theme-light-block .ocf-search-btn-popover, .ocf-theme-light-block .ocf-search-btn-static.ocf-disabled, .ocf-theme-light-block .ocf-search-btn-popover.ocf-disabled, .header-buttons .sc-btn-icon-catalog, #sc_fixed_contact_button, .sc-fixed-contact-pulsation, .header-buttons .sc-btn:hover .sc-btn-icon, .sc-product-options .radio label.selected, .sc-footer-socials-item:hover, #sc-search-button:hover .sc-btn-icon, .oct-checkout-block #button-confirm, .oct-checkout-block ul.dropdown-address li:hover, #loginTabs .nav-link.active:before {background:rgb(10, 51, 38);}
.ocf-theme-light-block .ocf-search-btn-static, .ocf-theme-light-block .ocf-search-btn-popover, .ocf-theme-light-block .ocf-search-btn-static.ocf-disabled, .ocf-theme-light-block .ocf-search-btn-popover.ocf-disabled, .ocf-noUi-connect:before, .ocf-noUi-handle, .swiper-pagination-bullet-active {background-color:rgb(10, 51, 38) !important;}
.form-check-input:checked, .sc-btn-outline-primary:not([disabled]), .sc-product-options .radio label.radio-img.selected {border-color:rgb(10, 51, 38);}
.sc-product-tab.active {border-bottom-color:rgb(10, 51, 38);}
.sc-btn-outline-primary:not([disabled]), .header-buttons .sc-btn.header-buttons-catalog, .header-buttons .sc-btn:hover {color:rgb(10, 51, 38);}
.header-buttons-catalog path {stroke:rgb(10, 51, 38);}
body {background-color:rgb(255, 255, 255);}
.sc-slideshow-plus-specials-block-title:hover, .sc-module-title:hover, .sc-contact-us .form-check-label a, .sc-subcategories-item:hover span:hover, .content-block-text a, .blue-link, .blue-link:hover, .sc-category-wall-item:hover span, .sc-megamenu-children-item a:hover, #oct-menu-ul .group-title a, .sc-last-reviews-item:hover .sc-last-reviews-item-title, .sc-module-item:hover .sc-module-title > a, .sc-module-item:hover .sc-module-title > a:visited, .sc-last-news-title:hover, .sc-livesearch-list-item-name a, .sc-fixed-contact-item:hover, .category-landing-links-item-link span, .sc-manufacturer-item a:hover .sc-manufacturer-item-title:hover, .table td a, .sc-alert-text a, .sc-day-discounts-item:hover a, .sc-header-phones-list-item:hover, .sc-header-location-phones a .sc-footer-phones-link, .sc-megamenu-child-narrow li:not(.sc-menu-list-landings) .sc-menu-list-landings-link:hover, .sc-footer-mail-link:hover, .collapse-value > button, .collapse-value > button:focus, .collapse-value > button:active, .collapse-value > button:active:focus, .sc-contact-location a, .modal-content a, .sc-product-tags a, .sc-category-wall-title:hover, .oct-checkout-block a {color:rgb(55, 71, 108);}
.sc-btn-primary:not([disabled]), button[data-target="#ocfilter-hidden-options"], #ocfilter .btn-primary, #ocfilter .btn-primary:active, #ocfilter .btn-primary:focus, .simplecheckout-cart-buttons .button:hover, .simplecheckout-button-right .button:hover, #simplecheckout_button_login:hover, .pagination li.active span, .pagination li:hover a, #sc_livesearch_close, .simplecheckout-cart-buttons .button, .sc-header-location.active .sc-btn, .sc-btn-secondary:not([disabled]).clicked, .sc-btn-secondary:not([disabled]):hover, .sc-category-sort button.active, .sc-btn-outline-secondary:not(#oct-blog-search-button, #sc-search-button, [disabled]):hover, .header-search .sc-btn-with-icon:hover .sc-btn-icon, .sc-blog-search .sc-btn-with-icon:hover .sc-btn-icon, .sc-btn.sc-btn-secondary:not([disabled]):hover, .sc-switcher, .sidebar-main-menu-item-catalog .sidebar-main-menu-item-icon, .sc-btn-outline-primary:not([disabled]):hover, .sc-location.active .sc-btn-secondary {background-color:rgb(10, 51, 38);}
.sc-btn-outline-primary:not([disabled]) {border-color:rgb(10, 51, 38);}
.sc-btn-outline-primary:not([disabled]) {color:rgb(10, 51, 38);}
.sc-btn.primary, .sc-btn-primary:not([disabled]), .sc-btn.primary .sc-btn-text, .sc-btn-primary:not([disabled]).sc-btn-text, .sc-btn.sc-btn-secondary:not([disabled]):hover .sc-btn-text, .sc-btn.sc-btn-secondary:not([disabled]).clicked .sc-btn-text, .sc-btn-outline-primary:not([disabled]):hover {color:rgb(255, 255, 255);}
.sc-btn-primary:not([disabled]) .sc-btn-icon {background:rgb(255, 255, 255);}
.sc-btn.sc-btn-secondary:not([disabled]):hover .sc-btn-icon {background:rgb(255, 255, 255);}
.sc-btn-secondary:not([disabled]) {background-color:rgb(242, 244, 248);}
.sc-btn-secondary, .sc-btn-secondary .sc-btn-text {color:rgb(10, 51, 38);}
.sc-btn-secondary .sc-btn-icon {background:rgb(10, 51, 38);}
#top {background:rgb(10, 51, 38);}
.top-left li a, #top .sc-dropdown-toggle, .top-right .popup-call-trigger {color:rgb(255, 255, 255);}
.top-left li a:hover, #top .sc-dropdown-toggle:hover, .top-right .popup-call-trigger:hover {color:rgb(255, 255, 255);}
.sc-footer {background-color:rgb(10, 51, 38);}
.sc-footer, .sc-footer-subscribe .form-check-label, .sc-footer-credits {color:rgb(199, 201, 217);}
.sc-footer-phones, .sc-footer-list a, .sc-footer-email {color:rgb(199, 201, 217);}
.sc-footer-phones a:hover, .sc-footer-list a:hover, .sc-footer-email:hover {color:rgb(255, 255, 255);}
.sc-column-categories-item {background:rgb(252, 252, 252);}
.sc-column-categories-item {color:rgb(10, 51, 38);}
.sc-column-categories-item.active > span, .sc-column-categories-item .sc-categories-3 .active, .sc-column-categories-item a:hover, .sc-column-categories .sc-categories-3 li.active a {color:rgb(10, 120, 191);}
.modal-header {background:rgb(242, 244, 248);}
.modal-title {color:rgb(10, 51, 38);}
.modal-header .btn-close {color:rgb(119, 119, 119);}
@media (max-width: 767px) {.header {background:rgb(255, 255, 255);}}
.oct_dynamic_stylesheet_begin{display: none;}
/* 1. Делаем основной контейнер на всю ширину экрана */
#ocdbanner-55 {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
}

/* 2. Настройка обертки изображения */
.item-banner .no-link {
    position: relative;
    display: block;
    width: 100%;
}

/* 3. Растягиваем само изображение и немного затемняем его */
#ocdbanner-46 .item-banner img {
    width: 100%;
    height: auto;
    display: block;
    /* Эффект легкого затемнения, чтобы текст читался лучше */
    filter: brightness(0.8) contrast(1.1);
}

/* Опционально: добавляем градиент поверх фото для читаемости текста */
#ocdbanner-46 .item-banner .no-link::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 50%);
    pointer-events: none;
}

/* 4. Позиционирование блока с текстом */
#ocdbanner-46 .block-desc {
    position: absolute;
    bottom: 15%; /* Отступ снизу */
    left: 10%;   /* Отступ слева */
    z-index: 10;
    max-width: 800px;
    color: #fff;
    font-family: sans-serif; /* Поменяйте на ваш шрифт */
}

/* 5. Стиль заголовка */
#ocdbanner-46 .title-banner {
    font-size: 42px; /* Размер как на макете */
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
    text-transform: none;
}

/* 6. Стиль подзаголовка с синим фоном */
#ocdbanner-46 .banner-desc {
    font-size: 18px;
    font-weight: 600;
    display: inline; /* Чтобы фон облегал текст */
    background-color: #0B2A1E; /* Тот самый синий цвет */
    padding: 5px 10px;
    box-shadow: 5px 0 0 #0B2A1E, -5px 0 0 #0B2A1E; /* Небольшой вылет фона по бокам */
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    #ocdbanner-46 .title-banner {
        font-size: 24px;
    }
    #ocdbanner-46 .banner-desc {
        font-size: 14px;
    }
    #ocdbanner-46 .block-desc {
        left: 5%;
        bottom: 10%;
    }
}/* ==========================================================================
   1. ГЛОБАЛЬНЫЕ НАСТРОЙКИ И СКРЫТИЕ СИСТЕМНЫХ ЭЛЕМЕНТОВ
   ========================================================================== */
body, html {
    margin: 0;
    padding: 0;
}



@media (min-width: 769px) {
	header, 
	.sidebar-main-menu-item-catalog, 
	.sidebar-main-menu-item-account, 
	.sidebar-main-menu-item-viewed, 
	.sidebar-main-menu-item-title { 
		display: none !important; 
	}
}
@media (max-width: 768px) {
	.sidebar-main-menu-item-account, 
	.sidebar-main-menu-item-viewed, 
		display: none !important; 
	}
}

.block-calculator { 
    display: none !important; 
}

.content-block {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    border-top-width: 0 !important;
    border-bottom-width: 0 !important;
}

.sc-html-module { 
    padding-top: 0 !important; 
}
.top-left-links a {
	text-decoration: none !important;
}
@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1200px !important;
    }
    #top { position: relative; }
    .top-left-links {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}

.top-left li a { font-size: 14px; }

/* ==========================================================================
   2. СЕТКА ТОВАРОВ (3 В РЯД — ПК, 2 — ПЛАНШЕТ, 1 — МОБИЛКА)
   ========================================================================== */
.sc-module-col { width: 100%; }

@media (min-width: 992px) { .sc-module-col { flex: 0 0 33.333%; max-width: 33.333%; } }
@media (min-width: 576px) and (max-width: 991px) { .sc-module-col { flex: 0 0 50%; max-width: 50%; } }
@media (max-width: 575px) { .sc-module-col { flex: 0 0 100%; max-width: 100%; } }

.sc-module-img img { width: 100%; height: auto; display: block; }
.sc-module-title { font-size: 1.275rem; text-transform: uppercase; }
.sc-module-caption { margin-bottom: 10px; }
.sc-module-cart { margin-bottom: 16px; padding-top: 0px !important; }
.sc-module-cart-absolute { position: static; }

/* Кнопки товаров */
.sc-module-open-btn {
    background: #2b2b2b;
    border-color: #2b2b2b;
    width: 100%;
    justify-content: center;
    min-width: 110px;
    padding: 8px 14px;
    display: inline-flex;
    align-items: center;
}
.sc-module-open-btn:hover { background: #000; border-color: #000; }
.sc-btn:not(.sc-btn-with-icon) .sc-btn-text { display: none; }
.sc-module-open-btn .sc-btn-text,
.sc-module-cart .sc-module-open-btn .sc-btn-text { 
    display: inline-block !important; 
    white-space: nowrap;
}

/* ==========================================================================
   3. БАННЕР #40 (ПЕРВЫЙ ЭКРАН - FULLSCREEN)
   ========================================================================== */
#ocdbanner-40 {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    margin-left: -50vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    overflow: hidden !important;
    padding: 0 !important;
}

#ocdbanner-40 .banner-group, #ocdbanner-40 .row, 
#ocdbanner-40 .item-banner, #ocdbanner-40 .no-link {
    height: 100vh !important; width: 100% !important; margin: 0 !important; padding: 0 !important;
}

#ocdbanner-40 .no-link {
    background-image: linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0) 100%), 
                      url('https://dom.shopbuilders.online/image/cache/webp/catalog/banner/photo-1680x900.webp') !important;
    background-attachment: fixed !important;
    background-position: center !important;
    background-size: cover !important;
}

#ocdbanner-40 .no-link img { display: none !important; }

#ocdbanner-40 .block-desc {
    display: flex !important; flex-direction: column !important; justify-content: center !important;
    height: 100% !important; margin-left: 25% !important; max-width: 650px !important; text-align: left !important;
}

#ocdbanner-40 .title-banner.html-title {
    font-size: 3.5rem !important; font-weight: 800 !important; color: #fff !important;
    text-transform: uppercase !important; margin-bottom: 20px !important; text-shadow: 2px 2px 15px rgba(0,0,0,0.5) !important;
}

#ocdbanner-40 .banner-desc {
    font-size: 1.3rem !important; color: #fff !important; line-height: 1.5 !important; text-shadow: 1px 1px 10px rgba(0,0,0,0.5) !important;
}

@media (max-width: 768px) {
    #ocdbanner-40 .no-link { background-attachment: scroll !important; }
    #ocdbanner-40 .block-desc { margin-left: 0 !important; align-items: center !important; text-align: center !important; padding: 0 20px !important; }
    #ocdbanner-40 .title-banner.html-title { font-size: 2rem !important; }
}

/* ==========================================================================
   4. БЛОК FULLWIDTH SECTION (ВТОРОЙ БЛОК)
   ========================================================================== */
.fullwidth-section {
    background: #5B6E78; padding: 80px 0; position: relative; left: 50%; margin-left: -50vw; width: 100vw;
}
.fullwidth-inner { max-width: 1200px; margin: 0 auto; }
.t-container { text-align: center; }
.t482__descr { margin-top: 40px; color: #ffffff; }
.t482__title { margin-bottom: 40px; color: #ffffff !important; }
#rec268911675 .t482__title { color: #ffffff; }
.hero-content { margin-left: 8%; }

/* ==========================================================================
   5. БАННЕР #43 (ПРЕИМУЩЕСТВА)
   ========================================================================== */
#ocdbanner-43 {
    width: 100vw !important; position: relative !important; left: 50% !important; margin-left: -50vw !important;
    height: 100vh !important; min-height: 100vh !important; overflow: hidden !important; padding: 0 !important; margin-top: 20px;
}
#ocdbanner-43 .banner-group, #ocdbanner-43 .row, #ocdbanner-43 .item-banner, #ocdbanner-43 .no-link {
    height: 100vh !important; width: 100% !important; margin: 0 !important; padding: 0 !important;
}
#ocdbanner-43 .no-link {
    background-image: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0) 100%), 
                      url('https://dom.shopbuilders.online/image/catalog//banner/banner2.jpg') !important;
    background-attachment: fixed !important; background-position: center !important; background-size: cover !important;
}
#ocdbanner-43 .no-link > img { display: none !important; }

#ocdbanner-43 .block-desc {
    display: flex !important; flex-direction: column !important; justify-content: center !important;
    height: 100% !important; margin-left: 22% !important; max-width: 700px !important; z-index: 10;
}
#ocdbanner-43 .title-banner.html-title {
    font-size: 3.5rem !important; font-weight: 800 !important; color: #fff !important;
    text-transform: uppercase !important; margin-bottom: 20px !important; text-shadow: 2px 2px 15px rgba(0,0,0,0.5) !important;
}

/* Преимущества внутри 43 */
#ocdbanner-43 .advantages { margin-top: 30px; }
#ocdbanner-43 .adv-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 40px; }
#ocdbanner-43 .adv-item { display: flex; flex-direction: column; align-items: flex-start; }
#ocdbanner-43 .adv-icon { width: 50px !important; height: 50px !important; margin-bottom: 15px !important; display: block !important; }
#ocdbanner-43 .adv-icon img { display: block !important; width: 100% !important; height: auto !important; filter: brightness(0) invert(1); }
#ocdbanner-43 .adv-content h3 { color: #fff; font-size: 18px; font-weight: 700; margin-bottom: 5px; text-transform: uppercase; }
#ocdbanner-43 .adv-content p { color: rgba(255,255,255,0.8); font-size: 14px; line-height: 1.4; margin: 0; }

@media (max-width: 768px) {
    #ocdbanner-43 .no-link { background-attachment: scroll !important; background-position: 35% center !important; }
    #ocdbanner-43 .block-desc { margin-left: 0 !important; padding: 0 20px !important; justify-content: flex-start !important; padding-top: 20px !important; }
    #ocdbanner-43 .title-banner.html-title { font-size: 1.8rem !important; text-align: center; }
    #ocdbanner-43 .adv-container { grid-template-columns: 1fr; gap: 20px; }
    #ocdbanner-43 .adv-item { flex-direction: row; align-items: center; text-align: left; gap: 15px; }
    #ocdbanner-43 .adv-icon { width: 40px !important; margin-bottom: 0 !important; flex-shrink: 0; }
}

/* ==========================================================================
   6. ЭТАПЫ РАБОТЫ (#ocdsteps-43)
   ========================================================================== */
#ocdsteps-43 { max-width: 900px; margin: 50px auto; padding: 20px; }
#ocdsteps-43 .step-item { display: flex; gap: 30px; }
#ocdsteps-43 .step-left { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 50px; }
#ocdsteps-43 .step-number {
    width: 50px; height: 50px; border: 1px solid #000; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 18px; background: #fff; z-index: 2;
}
#ocdsteps-43 .step-line { width: 1px; background-color: #ccc; flex-grow: 1; min-height: 50px; margin: 5px 0; }
#ocdsteps-43 .step-content { padding-bottom: 50px; }
#ocdsteps-43 .step-content h3 { margin: 0 0 10px 0; font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
#ocdsteps-43 .step-content p { margin: 0; font-size: 15px; line-height: 1.6; color: #333; }
#ocdsteps-43 .step-item:last-child .step-content { padding-bottom: 0; }

@media (max-width: 768px) {
    #ocdsteps-43 .step-item { gap: 20px; }
    #ocdsteps-43 .step-number, #ocdsteps-43 .step-left { width: 40px; height: 40px; font-size: 16px; }
    #ocdsteps-43 .step-content h3 { font-size: 17px; }
    #ocdsteps-43 .step-content p { font-size: 14px; }
}

/* ==========================================================================
   7. CTA БЛОК (#ocdcta-43)
   ========================================================================== */
#ocdcta-43 { padding: 80px 20px; text-align: center; color: #fff; display: flex; justify-content: center; align-items: center; }
#ocdcta-43 .cta-container { max-width: 800px; width: 100%; display: flex; flex-direction: column; align-items: center; }
#ocdcta-43 .cta-title { font-size: 48px; font-weight: 800; line-height: 1.1; text-transform: uppercase; margin-bottom: 20px; color: white; }
#ocdcta-43 .cta-subtitle { font-size: 20px; margin-bottom: 40px; text-transform: uppercase; opacity: 0.9; }
#ocdcta-43 .cta-button {
    display: inline-block; background-color: #5d6d7e; color: #fff; padding: 18px 45px;
    font-weight: 700; text-transform: uppercase; text-decoration: none; min-width: 280px; transition: 0.3s;
}
#ocdcta-43 .cta-button:hover { background-color: #4a5765; }
#ocdcta-43 .cta-arrow { margin-bottom: 15px; }
#ocdcta-43 .arrow-mobile { display: block; }
#ocdcta-43 .arrow-desktop { display: none; }

@media (min-width: 769px) {
    #ocdcta-43, #ocdcta-43 .cta-container { text-align: left; align-items: flex-start; }
    #ocdcta-43 .cta-action-area { display: flex; flex-direction: row-reverse; align-items: center; gap: 20px; }
    #ocdcta-43 .arrow-mobile { display: none; }
    #ocdcta-43 .arrow-desktop { display: block; transform: translateY(-10px); }
    #ocdcta-43 .cta-title { font-size: 56px; }
}
@media (max-width: 768px) {
    #ocdcta-43 .cta-title { font-size: 28px; }
    #ocdcta-43 .cta-button { width: 100%; }
    #ocdbanner-46 .block-desc {margin-left: 0% !important;}
}

/* ==========================================================================
   8. БАННЕР #46 (НИЗКИЙ С ЗАТЕМНЕНИЕМ)
   ========================================================================== */
#ocdbanner-46 {
    width: 100vw !important; position: relative !important; left: 50% !important; margin-left: -50vw !important;
    height: 500px !important; min-height: 400px !important; overflow: hidden !important; margin-top: 20px;
}
#ocdbanner-46 .no-link {
    height: 100% !important; width: 100% !important; display: block !important;
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
                      url('/image/cache/webp/catalog/banner/__2-1680x900.webp') !important;
    background-size: cover; background-position: center;
}
#ocdbanner-46 .no-link img { display: none !important; }
#ocdbanner-46 .block-desc {
    position: relative !important; z-index: 5 !important; display: flex !important; flex-direction: column !important;
    justify-content: center !important; height: 100% !important; margin-left: 20% !important; max-width: 650px !important;
}
#ocdbanner-46 .title-banner.html-title {color: #ffffff !important; text-shadow: 2px 2px 10px rgba(0,0,0,0.8) !important; }
.sc-footer {margin-top: 0px !important;}
@media (max-width: 768px) {
    #ocdbanner-46 .block-desc {margin-left: 0% !important; }
}
.ldev-question-about { display: none !important; }
.sc-page-title {padding-bottom: 0px !important; }
.sc-subcategories-item-custom {border-width: 0px !important; padding: 0px !important; }
.ldev-question-child-module span {text-transform: uppercase; font-size: 16px; }
.category-header-title h1 {text-transform: uppercase; font-size: 40px; color: #0a3326; }

.sc-subcategories-item-custom {
    position: relative;
    border-radius: 8px;
    transition: z-index 0.3s ease;
}

.sc-subcategories-item-custom:hover {
    z-index: 20; /* поднимаем весь блок */
}

.sc-subcategories-item-custom img {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: block; /* убирает лишний отступ снизу */
}

.sc-subcategories-item-custom img:hover {
    transform: scale(1.08);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.content-block:hover {
    -webkit-box-shadow: none;
    box-shadow: none;
}
.category-name span {text-transform: uppercase; font-size: 16px !important; }
.category-name {margin-top: 10px; }
.sc-module-price-box {display: none; }
.content-block {border: none; }
.sc-module-cart {width: 50%; background: #0A3326; margin-top: 0px; }
.sc-module-cart:hover {background: #0A3330; }
.sc-module-quantity {display: none !important; }
.sc-module-title:hover {text-decoration: none;}

/************Каталог детских домиков и домиков на деревьях****************/
.catalog-intro__title {
    font-size: 36px;
    font-weight: 700;
    text-transform: uppercase;
    color: #0e3b32;
    line-height: 1.2;
}

.catalog-intro__subtitle {
    margin-top: 20px;
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #5a5a5a;
}

.catalog-intro__divider {
    width: 30px;
    height: 2px;
    background: #0e3b32;
    border: none;
    margin: 20px 0 30px;
}

.catalog-intro__text p {
    margin-bottom: 18px;
    line-height: 1.6;
    color: #333;
    font-size: 14px;
}

.catalog-intro__link {
    color: #c94b3c;
    text-decoration: none;
}

.catalog-intro__link:hover {
    text-decoration: underline;
}
.content-block {padding-left: 0px;}
.sc-module-header {
    color: #0a3326;
    font-size: 33px !important;
    line-height: 1.1;
    font-weight: 700 !important;
}
.layout_pro_row_8506784f3d44d5df13c16ce3704a1c9a {margin-bottom: 80px; margin-top: 80px; }
.dark-text, p, h1, h2, h3, h4, h5 {
    color: #0A3326;
}
.sc-footer a {
    color: #ffffff;
}
/*******форма*****/
/* 1. Главный фон и отступы */
.forming_quick {
    background-color: #062a1e !important;
    padding: 50px 40px !important;
}

/* 2. Делаем .row флекс-контейнером */
.forming_quick .row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important; /* Прижимает кнопку к низу инпутов */
    gap: 15px !important;
}

/* 3. Скрываем лишние элементы Bootstrap, которые разрывают строку */
.forming_quick .clearfix, 
.forming_quick .captcha-module50, 
.forming_quick .input-group-addon,
.forming_quick i.fa {
    display: none !important;
}

/* 4. Заголовок (вставляем сверху) */
.forming_quick .row::before {
    content: "НЕ НАШЛИ НУЖНУЮ МОДЕЛЬ?";
    flex: 0 0 100%; /* На всю ширину */
    color: white;
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 5px;
    order: -3;
}

/* 5. Подзаголовок (текст "Оставьте заявку...") */
.forming_quick .text_person {
    flex: 0 0 100% !important;
    order: -2 !important;
    margin-bottom: 25px !important;
    padding: 0 !important;
}
.forming_quick .text_person p {
    color: rgba(255,255,255,0.8);
    text-transform: uppercase;
    font-size: 13px;
}

/* 6. МАГИЯ: Заставляем инпуты и кнопку быть в одной строке */
/* Находим div, который оборачивает инпуты Имя и Телефон */
.forming_quick .row > div:not([class]) {
    display: contents !important; /* Убирает влияние этого контейнера на сетку */
}

/* Настраиваем ширину колонок с инпутами */
.forming_quick .col-sm-6 {
    flex: 1 !important; /* Инпуты делят свободное место */
    width: auto !important;
    padding: 0 !important;
    order: 1 !important;
}

/* 7. КНОПКА */
.button-cheaper {
    flex: 0 0 auto !important; /* Кнопка занимает только свое место */
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    order: 2 !important;
}

.button-cheaper .btn {
    background-color: #d69e6b !important; /* Тот самый песочный цвет */
    color: white !important;
    border: none !important;
    height: 55px !important;
    padding: 0 35px !important;
    border-radius: 0 !important;
    font-weight: bold !important;
    font-size: 16px !important;
    white-space: nowrap !important;
}

/* Смена текста на кнопке */
.button-cheaper .btn span { font-size: 0; }
.button-cheaper .btn span::before {
    content: "Обсудить проект";
    font-size: 16px;
}

/* 8. Стили полей ввода */
.form-control {
    height: 55px !important;
    border-radius: 0 !important;
    border: none !important;
    padding-left: 15px !important;
    font-size: 15px !important;
}

/* Флаг РФ для телефона */
#input_field2 {
    padding-left: 55px !important;
    background: url('https://flagcdn.com/w20/ru.png') no-repeat 15px center #fff !important;
}

/* 9. Текст политики (внизу) */
.forming_quick::after {
    content: "Нажимая на кнопку, вы соглашаетесь с политикой конфиденциальности";
    flex: 0 0 100%;
    margin-top: 15px;
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    order: 3;
}

/* Адаптивность для мобильных (в столбик) */
@media (max-width: 991px) {
    .forming_quick .col-sm-6, .button-cheaper, .button-cheaper .btn {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
}
/* ==========================================================================
   3. ВИДЕО-БАННЕР (ПЕРВЫЙ ЭКРАН - FULLSCREEN)
   ========================================================================== */
.video-banner {
    width: 100vw; /* Задаем ширину, равную 100% ширины экрана */
    max-width: 100vw; /* Перебиваем возможные ограничения Bootstrap */
    position: relative;
    left: 50%;
    transform: translateX(-50%); /* Сдвигаем влево на половину экрана, чтобы отцентрировать */
}
.video-banner video {
    display: block;
}
/* ==========================================================================
   ХЕДЕР
   ========================================================================== */
/* Десктоп (от xl и выше) */
@media (min-width: 1200px) {
    .container-xxl {
        padding-left: 24px;  /* было ~20px → +20% */
        padding-right: 24px;
    }
    #top {
      height: 56px;
    }
}

/* Можно чуть раньше включить (если нужно) */
@media (min-width: 992px) {
    .container-xxl {
        padding-left: 24px;
        padding-right: 24px;
    }
}
#cheaperForm50 .btn-primary {
  margin-top: 0px;
}
/***********/

/* Если на светлом фоне белый текст будет плохо видно, 
   можно изменить цвет заголовков внутри: */
.cta-title, .cta-subtitle {
    color: #ffffff; 
    text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* Добавляем тень буквам для четкости */
}

/* Стили для кнопки, если она сливается */
.cta-button {
    display: inline-block;
    background-color: #ffffff;
    color: #333;
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
}
.btn-primary {
    margin-top: 0px !important;
}
/**********/
.btn-zombie-discuss {
    /* Основной цвет из примера (темно-бирюзовый) */
    background: #2f5d62 !important;
    color: #ffffff !important;
    
    /* Убираем стандартную рамку кнопки */
    border: none;
    
    /* Скругление углов (в инспекторе было 6px, а в классе br-4) */
    border-radius: 4px;
    
    /* Параметры текста */
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    
    /* Плавность при наведении */
    transition: 0.3s;
    cursor: pointer;
    
    /* Внутренние отступы (у вас в HTML стоит py-3, 
       но добавим для надежности, если классы не сработают) */
    padding: 14px 28px;
    
    /* Убираем лишние отступы */
    margin-top: 0px !important;
}

/* Эффект при наведении (сделаем чуть темнее) */
.btn-zombie-discuss:hover {
    background: #24484c !important;
    color: #ffffff !important;
    text-decoration: none;
}

/* Эффект при клике */
.btn-zombie-discuss:active {
    transform: translateY(1px);
}
.modal-dialog {
    max-width: 550px !important;
}
.modal-content .form-control {
	border: 1px solid #E7E7E7 !important;
}
/* Основной контейнер подложки */
#ocdbanner-46 .banner-desc {
    background-color: rgba(255, 255, 255, 0.05); /* Белый цвет с прозрачностью 20% */
    backdrop-filter: blur(10px); /* Размытие фона за подложкой (очень красиво смотрится) */
    -webkit-backdrop-filter: blur(10px); /* Для поддержки Safari */
    
    padding: 20px; /* Внутренние отступы, чтобы текст не прилипал к краям */
    border-radius: 20px; /* Скругление углов */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Тонкая светлая граница */
    
    max-width: fit-content; /* Подложка подстроится под ширину контента */
    margin: 0 auto; /* Центрирование, если родительский блок позволяет */
    
    /* Если нужно, чтобы подложка была чуть темнее для лучшей читаемости белого текста: */
    /* background-color: rgba(0, 0, 0, 0.3); */
}
/******************************************/
.hero-text {
    background-color: #5B6E78 !important;
    /* Создаем огромную тень, которая имитирует фон */
    box-shadow: 0 0 0 100vmax #5B6E78;
    /* Обрезаем тень сверху и снизу, чтобы она не наползала на другие блоки */
    clip-path: inset(0 -100vmax);
    
    /* Дополнительно: меняем цвет текста на белый для читаемости */
    color: #ffffff !important;
}

/* Если заголовки и описание внутри тоже темные, их нужно высветлить */
.hero-text .hero-title, 
.hero-text .hero-description {
    color: #ffffff !important;
}
/*************/
#cheaperForm50 {
    background-color: #5B6E78 !important;
    /* Создаем огромную тень, которая имитирует фон */
    box-shadow: 0 0 0 100vmax #5B6E78;
    /* Обрезаем тень сверху и снизу, чтобы она не наползала на другие блоки */
    clip-path: inset(0 -100vmax);
    
    /* Дополнительно: меняем цвет текста на белый для читаемости */
    color: #ffffff !important;
}
/*****/
#cheaperForm50 {
    margin-top: -1px !important; /* Сдвигаем блок на 1px вверх */
}

/****Блог***/
.blog-header-block {
    /* Цвет фона (подобрал максимально похожий оливковый) */
    background-color: #D9E1C6 !important;
    
    /* Растягиваем на всю ширину экрана (как в прошлых советах) */
    box-shadow: 0 0 0 100vmax #D9E1C6;
    clip-path: inset(0 -100vmax);
    
    text-align: center;
    padding: 80px 20px; /* Большие отступы сверху и снизу для "воздуха" */
    margin: 40px 0;     /* Отступ от других блоков сайта */
}

/* Верхний мелкий текст */
.blog-header-block .subtitle {
    font-family: sans-serif; /* Или Montserrat, если он есть на сайте */
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3em; /* Тот самый широкий интервал между буквами */
    color: #6B705C;        /* Приглушенный цвет текста */
    margin-bottom: 20px;
    font-weight: 500;
}

/* Основной заголовок */
.blog-header-block .title {
    /* Шрифт с засечками важен для этого стиля */
    font-family: "Playfair Display", "PT Serif", Georgia, serif; 
    font-size: 42px;
    line-height: 1.2;
    color: #4A3B22;        /* Темно-коричневый/землистый цвет */
    font-weight: 700;
    max-width: 900px;
    margin: 0 auto;
}

/* Адаптивность под мобильные устройства */
@media (max-width: 768px) {
    .blog-header-block {
        padding: 50px 15px;
    }
    .blog-header-block .title {
        font-size: 28px;
    }
    .blog-header-block .subtitle {
        font-size: 10px;
        letter-spacing: 0.2em;
    }
}
.blog-header-block {margin-top: 0px; margin-bottom: 0px;}

/*********************/
/* Скрываем белую кнопку внутри блока кнопок формы */
.button-cheaper .btn-white {
    display: none !important;
}

/* Или через основной контейнер формы */
.forming_quick .btn-white {
    display: none !important;
}
/* ==========================================================================
   10. БАННЕР #56 (ДЛЯ БИЗНЕСА - FULLSCREEN)
   ========================================================================== */
#ocdbanner-56 {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    margin-left: -50vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    overflow: hidden !important;
    padding: 0 !important;
}

#ocdbanner-56 .banner-group, #ocdbanner-56 .row, 
#ocdbanner-56 .item-banner, #ocdbanner-56 .no-link {
    height: 100vh !important; width: 100% !important; margin: 0 !important; padding: 0 !important;
}

#ocdbanner-56 .no-link {
    background-image: linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0) 100%), 
                      url('https://dom.shopbuilders.online/image/catalog/biznes/1.jpg') !important;
    background-attachment: fixed !important;
    background-position: center !important;
    background-size: cover !important;
}

#ocdbanner-56 .no-link img { display: none !important; }

#ocdbanner-56 .block-desc {
    display: flex !important; flex-direction: column !important; justify-content: center !important;
    height: 100% !important; margin-left: 25% !important; max-width: 650px !important; text-align: left !important;
}

#ocdbanner-56 .title-banner.html-title {
    font-size: 3rem !important; font-weight: 800 !important; color: #fff !important;
    text-transform: uppercase !important; margin-bottom: 20px !important; text-shadow: 2px 2px 15px rgba(0,0,0,0.5) !important;
}

#ocdbanner-56 .banner-desc {
    font-size: 1.1rem !important; color: #fff !important; line-height: 1.5 !important; text-shadow: 1px 1px 10px rgba(0,0,0,0.5) !important;
}

@media (max-width: 768px) {
    #ocdbanner-56 .no-link { background-attachment: scroll !important; }
    #ocdbanner-56 .block-desc { margin-left: 0 !important; align-items: center !important; text-align: center !important; padding: 0 20px !important; }
    #ocdbanner-56 .title-banner.html-title { font-size: 2rem !important; }
}

/***********кнопка******************/
.show_button {
    background-color: #dca67a !important; /* Песочный цвет как на фото */
    color: #ffffff !important;            /* Белый текст */
    border: none !important;              /* Убираем рамку */
    border-radius: 0 !important;          /* Прямоугольные углы */
    padding: 14px 40px !important;        /* Внутренние отступы */
    font-weight: 700 !important;          /* Жирный шрифт */
    font-size: 16px !important;           /* Размер шрифта */
    line-height: 1.2 !important;
    text-transform: none !important;      /* Текст как в коде */
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.show_button:hover {
    background-color: #cb9669 !important; /* Затемнение при наведении */
    color: #ffffff !important;
}

/* Сброс стандартных теней и обводок Bootstrap */
.show_button:focus, 
.show_button:active {
    outline: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   11. БАННЕР #58 (ДЛЯ БИЗНЕСА - Наши приоритеты - FULLSCREEN)
   ========================================================================== */
/* 1. Растягиваем основной блок на всю ширину окна браузера, игнорируя родительский контейнер */
#ocdbanner-58 {
    width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding: 0 !important;
    overflow: hidden;
}

/* 2. Убираем внешние отступы у ряда (row) */
#ocdbanner-58 .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
}

/* 3. Убираем внутренние отступы у колонок (Bootstrap padding) */
#ocdbanner-58 .item-banner {
    padding: 0 !important;
}

/* 4. Убираем пробел между рядами картинок и заставляем их плотно прилегать */
#ocdbanner-58 .item-banner img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 0 !important; /* Убираем скругления, если они есть */
}

/* 5. Центрируем заголовок обратно в рамки контента (чтобы он не уехал к краю экрана) */
#ocdbanner-58 .title-module {
    max-width: 1200px; /* Укажите ширину вашего сайта */
    margin: 0 auto 20px;
    padding: 0 15px;
    text-align: center;
}
/****/
/* Убираем технический отступ под картинками */
#ocdbanner-58 .item-banner img {
    display: block !important;
    vertical-align: bottom !important;
}

/* Обнуляем межстрочный интервал в контейнере */
#ocdbanner-58 .row {
    line-height: 0 !important;
    font-size: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
}

/* Убираем возможные отступы снизу у блоков с картинками */
#ocdbanner-58 .item-banner, 
#ocdbanner-58 .no-link {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
#ocdbanner-58 .title-module {
    margin-top: 30px;
    font-size: 3rem;
	font-weight: 700;
}
@media (min-width: 1200px) {
    #ocdbanner-58 .title-module {
      margin-top: 30px;
      font-size: 3rem;
      font-weight: 700;
  }
}
@media (max-width: 768px) {
    #ocdbanner-58 .title-module {
      font-size: 1.8rem;
  }
}

/* ==========================================================================
   12. ДЛЯ БИЗНЕСА - ФОРМА
   ========================================================================== */
.option-div60 .text-left {
	display: none;
}
#cheaperForm60 {
	margin-top: 40px;
}.oct_dynamic_stylesheet_end{display: none;}