/*
Theme Name:     Consultax Child
Theme URI:      http://wpdemo.oceanthemes.net/consultax/
Description:    Make your modifications to [Parent Theme] in this child theme.
Author:         Oceanthemes
Author URI:     http://oceanthemes.net/
Version:        1.0
Template:       consultax
*/

@import url("../consultax/style.css");
 
/* =Theme customization starts here
------------------------------------------------------- */

.background-banner {display: flex; align-items: flex-end; justify-content: center; min-height: 107vh!important;}
.header-transparent .header-topbar, .main-header {background-color: rgba(43,44,50,0.23);}
.header-style-1 .main-header .main-header-bottom, a#back-to-top.show, .popup-block .ays-popup-hrs-default, #site-logo img, .mobile_logo img {display: none!important;}
.header-style-1 ul.info-list li {color:#fff;}
.text-offer-parent {position: relative; top: 50%; transform: translate(0, -50%);}
.text-offer {
    font-size: 3.5em;
    color:#fff;  
    position: fixed; 
    text-align: center; 
    max-width: 1200px; 
    text-shadow: 3px 1px black; 
    line-height: 1em;
}
#site-logo {font-size: 36px;}
#site-logo a {color:#fff;}
#top-bar-text {font-size:15px; text-shadow: 1px 1px black;}
.header-style-1 ul.info-list li {font-size:16px;}
.header-style-1 ul.info-list li:nth-child(2) {font-size:14px; line-height: 18px; text-shadow: 1px 1px black;}
.header-style-1 ul.info-list li:first-child {text-shadow: 1px 1px black;}
ul.info-list li i {font-size: 15px; margin-top:-3px;}
.mobile-header-dark .header_mobile .mlogo_wrapper {background-color: #0a0607;}
#mmenu-info-list-header {position: relative; color:#fff; float: right; width: 50%; height: auto;}
.info-list-header-mobile {list-style: none; padding: 0; margin:0;}
.info-list-header-mobile i {color:#ff8a00; margin-right:7px;}
.popup-block p {text-transform:uppercase;}
.popup-block .ays_content_box {padding:0!important;}
.fm-message {background-color:#57e31c;}
#site-logo a::after, .mobile_logo a::after {content:"Шкаф дома"; text-transform:uppercase; color: #875919; background-image: linear-gradient(0deg, #875919 , #a87732 , #dbaa64 , #f0c588 ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
#site-logo a::after {font-size:30px;}
.mobile_logo a::after {font-size:20px; }
.info-list.info_on_right_side.fright img {width: 13px; margin-right: 7px; margin-top: -3px;}
.info-list-header-mobile img {width: 15px; margin-right: 7px; margin-top: -3px;}
.footer-phone {list-style: none; padding: 0;}
.footer-phone img {width: 13px; margin-right: 7px; margin-top: -2px;}
.footer-details {text-align:center; color:#fff;}

/* КНОПКА*/
.box-3 {background-color:#423433;}
.box-3 .btn {height: 50px; text-align: center; width: 200px; cursor: pointer; border:none;}
.btn-three {color: #FFF; transition: all 0.5s; position: relative;}
.btn-three::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.1); transition: all 0.3s;}
.btn-three:hover::before {opacity: 0 ; transform: scale(0.5,0.5);}
.btn-three::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; transition: all 0.3s; border: 1px solid rgba(255,255,255,0.5); transform: scale(1.2,1.2);}
.btn-three:hover::after {opacity: 1; transform: scale(1,1);}
.background-banner-mobile-2 .box-3 {background-color:inherit; display: flex; justify-content: center;}
.background-banner-mobile-2 .box-3 .btn {line-height: 25px;}

/* ПЛИТКИ */
.three-item {display: flex;  justify-content: space-between;  align-items: center;  width: 100%;  max-width: 1200px;  margin: 50px auto;}
.three-item .subblock {display: flex;  width: 32%;  background-color: rgb(0 0 0 / 50%);  justify-content: center;  align-items: center;  padding: 20px;}
.three-item .block {display: flex; justify-content: flex-start;  align-items: center;  padding: 5px;}
.three-item .text { display: flex; justify-content: flex-start; width: 80%; font-size:18px; text-transform:uppercase; color:#fff;}
.three-item .image-1,.three-item .image-3,.three-item .image-5 {width: 20%;  display: flex; justify-content: flex-start;}
.three-item img {width: 100%;  height: auto; filter: brightness(0) saturate(100%) invert(56%) sepia(72%) saturate(342%) hue-rotate(357deg) brightness(89%) contrast(86%);}

/* СПИСОК */
.benefits-list {list-style: none; padding: 0;}
.benefit-item {position: relative; padding-left: 20px; padding-top:10px;}
li.benefit-item {color:#fff; font-size:18px;}
.benefit-item::before {content: ""; position: absolute; left: 0; top: 0; width: 10px; height: 10px; background-color: #be7d1a; border-radius: 50%; /* transform: translateY(-50%); padding-top: 31px; */ margin-top: 20px;}

/*Плитки 2 вариант*/
.container-123 {display: flex; justify-content: space-between; width: 100%; max-width: 1200px; margin: 0 auto;}
.block-123 {width: 30%; height: auto; display: flex; justify-content: flex-start; align-items: flex-start; background-color: rgb(0 0 0 / 30%); padding-left: 15px; text-shadow: 1px 1px black;}
.container-125 {display: flex; justify-content: space-between; width: 100%; max-width: 1200px; margin:-80px auto 0;}
.block-125 {width: 30%; height: auto; display: flex; justify-content: flex-start; align-items: flex-start; background-color: rgb(0 0 0 / 30%); padding-left: 15px;}

/* АДАПТИВ */
@media screen and (max-width: 990px) {
	.container-123, .background-banner, #mmenu_toggle {display:none;}
	.container-125 {flex-direction: column;}
	.block-125 {width: 100%; background-color:transparent;}
	li.benefit-item {color:#000;}
	.benefits-list {margin:0;}
	 section.background-banner-mobile {background-position: 30% -90px!important;}
		.background-banner-mobile {align-items: flex-start; min-height: 100vh!important}
	 .header_mobile .mlogo_wrapper .mobile_logo {width: 45%;}
}	

@media (min-width: 991px) and (max-width: 1229px) {
	.header-style-1 ul.info-list li {padding-right: 25px; padding-left: 40px;}
}
@media screen and (min-width: 990px) {
	.background-banner-mobile, .background-banner-mobile-2 {display:none;}
}
@media only screen and (max-width: 767px) {
.header_mobile .mlogo_wrapper {padding: 10px 5px 10px 15px!important;}
}
@media (min-width: 600px) and (max-width: 1229px) {
	.info-list-header-mobile {display: flex; justify-content: space-evenly;}
	#mmenu-info-list-header {width: 55%;}
}
/* ОСНОВНОЙ КОНТЕЙНЕР ВЕРХНЕЙ ПАНЕЛИ */
#header_topbar {
    height: 30px !important;
    min-height: 30px !important;
    /* Убрали display: flex - теперь это обычный блок */
    background: rgba(43,44,50,0.23) !important;
    position: relative; /* Для корректного позиционирования */
    overflow: hidden; /* Скрываем всё что выходит за границы */
}

/* КОНТЕЙНЕР ВНУТРИ ВЕРХНЕЙ ПАНЕЛИ - теперь он flex-контейнер */
#header_topbar .container {
    display: flex; /* Включаем flexbox */
    align-items: center; /* Вертикальное выравнивание по центру */
    justify-content: center; /* Горизонтальное выравнивание по центру */
    height: 100%; /* Занимает всю высоту родителя */
    width: 100%; /* Занимает всю ширину родителя */
}

/* ЦЕНТРИРУЕМ ТЕКСТ ВНУТРИ */
.topbar-text {
    text-align: center !important;
    width: 100% !important;
}

/* СТИЛИ ДЛЯ ОСНОВНОЙ ШАПКИ САЙТА */
.main-header-top {
    height: 70px !important; /* Фиксированная высота основной шапки */
    min-height: 70px !important; /* Минимальная высота */
    max-height: 70px !important; /* Максимальная высота */
    display: flex; /* Flexbox для выравнивания содержимого */
    align-items: center; /* Вертикальное центрирование */
}
/* ========== ОБЩИЕ СТИЛИ ДЛЯ ВСЕХ УСТРОЙСТВ ========== */
.text-offer-parent {
    position: relative;
    width: 100%;
    z-index: 9999;
}

.dynamic-headline {
    font-size: 2.1em; /* 40% меньше чем 3.5em (3.5 * 0.6 = 2.1) */
    color: #fff;
    text-align: left; /* Выравнивание по левому краю */
    width: 100%;
    max-width: 1200px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    margin: 0 auto 5px;
    padding: 0 30px; /* Такие же отступы как у офера */
    font-weight: 400; /* Нормальная жирность (не жирный) */
    line-height: 1.2;
    font-family: inherit; /* Такой же шрифт как у офера */
}

.text-offer {
    font-size: 3.5em;
    color: #fff;
    position: fixed;
    text-align: center;
    max-width: 1200px;
    text-shadow: 3px 1px black;
    line-height: 1em;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}

/* ========== ТОЛЬКО ДЛЯ МОБИЛЬНЫХ (ширина до 990px) ========== */
@media screen and (max-width: 990px) {
    .text-offer {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        font-size: 2.2em;
        text-align: center;
        width: 100%;
        margin: 0 auto;
    }
    
    .text-offer-parent {
        position: absolute !important;
        top: 25% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 100% !important;
        text-align: left; /* Выравнивание по левому краю */
    }
    
    .dynamic-headline {
        font-size: 1.3em !important; /* 40% меньше чем 2.2em (2.2 * 0.6 = 1.32) */
        text-align: left !important; /* Выравнивание по левому краю */
        margin-bottom: 5px !important;
        padding: 0 20px !important; /* Отступы для мобильных */
    }
}

/* ========== ТОЛЬКО ДЛЯ ПК (ширина больше 990px) ========== */
@media screen and (min-width: 991px) {
    .text-offer-parent {
        position: fixed !important;
        top: 130px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 100% !important;
        text-align: left; /* Выравнивание по левому краю */
    }
    
    .dynamic-headline {
        text-align: left !important; /* Выравнивание по левому краю */
    }
}