/* ==========================================================================
   پالت رنگ سایت شهرداری موسیان
   --------------------------------------------------------------------------
   پالت قبلی قالب، فیروزه‌ای مایل به آبی (#078586) بود که در کنار زردهای
   فسفری (#fcf831 / #faf86d) و آبی‌های سرد (#003f7f) ترکیب ناهمگون و
   خسته‌کننده‌ای می‌ساخت.
   پالت جدید روی سه رنگ بسته شده است:

     ۱) سبز شهری عمیق  #0F7A50  → رنگ اصلی (دکمه‌ها، لینک‌ها، هدر بخش‌ها)
     ۲) طلایی گرم      #D9A62E  → رنگ تأکید (جای زردهای فسفری)
     ۳) زغالی آرام     #1B2A33  → عنوان‌ها، فوتر، متن تیره

   رنگ اصلی و رنگ تأکید از پنل مدیریت («تنظیمات شهر») قابل تغییر است و
   بدون دست‌زدن به کد، کل سایت با رنگ جدید هم‌راستا می‌شود.
   ========================================================================== */

:root {
    /* --- رنگ اصلی (سبز شهری) --- */
    --mosian-primary: #0F7A50;
    --mosian-primary-dark: #0B5E3D;
    --mosian-primary-soft: #2E9E6B;
    --mosian-primary-tint: #E9F6EF;
    --mosian-primary-border: #A9DCC1;

    /* --- رنگ تأکید (طلایی گرم) --- */
    --mosian-accent: #D9A62E;
    --mosian-accent-dark: #B8871C;
    --mosian-accent-tint: #FDF6E6;
    --mosian-accent-border: #E5D6B4;

    /* --- زغالی / متن --- */
    --mosian-ink: #1B2A33;
    --mosian-ink-deep: #12222B;
    --mosian-muted: #5B6B72;

    /* --- سطوح --- */
    --mosian-surface: #F7F9F8;
    --mosian-line: #E4EAE7;

    /* --- بازنویسی متغیرهای خود قالب (color-switcher) --- */
    --primary-color-one: var(--mosian-primary);
    --menu-active-color: var(--mosian-primary);
    --primary-color-two: var(--mosian-ink);
    --heading-dark: var(--mosian-ink);
    --link-color-dark: var(--mosian-ink);
    --menu-color: var(--mosian-ink);
    --menu-dropdown-color: var(--mosian-ink);
}

/* --------------------------------------------------------------------------
   نوار منو: زرد فسفری قالب → کرم گرم با خط طلایی زیرین
   -------------------------------------------------------------------------- */
.navbar_outer.get_sticky_header {
    background: linear-gradient(180deg, #FFFCF4 0%, var(--mosian-accent-tint) 100%) !important;
    border-bottom: 3px solid var(--mosian-accent);
    box-shadow: 0 3px 16px rgba(27, 42, 51, .08);
}

.navbar_nav > li > a,
.navbar_nav > li > a span {
    color: var(--mosian-ink) !important;
    transition: color .2s ease;
}

.navbar_nav > li > a:hover span,
.navbar_nav > li.active > a span {
    color: var(--mosian-primary) !important;
}

.navbar_nav .dropdown-menu {
    background: linear-gradient(160deg, var(--mosian-primary) 0%, var(--mosian-primary-dark) 100%) !important;
    border: 0;
    border-top: 3px solid var(--mosian-accent);
    box-shadow: 0 18px 38px -16px rgba(11, 94, 61, .45);
    border-radius: 0 0 12px 12px;
    padding: 8px 6px;
    overflow: hidden;
}

/* متن آیتم‌های بازشو همیشه سفید است — روی پس‌زمینهٔ سبز */
.navbar_nav .dropdown-menu .dropdown-item,
.navbar_nav .dropdown-menu .dropdown-item span,
.navbar_nav .dropdown-menu .span-box,
.navbar_nav .dropdown-menu a {
    color: #ffffff !important;
}

.navbar_nav .dropdown-menu li {
    border-radius: 8px;
    transition: background .18s ease;
}

.navbar_nav .dropdown-menu li:hover,
.navbar_nav .dropdown-menu li#li-box1:hover {
    background-color: var(--mosian-accent) !important;
}

.navbar_nav .dropdown-menu li:hover .span-box,
.navbar_nav .dropdown-menu li:hover .dropdown-item span,
.navbar_nav .dropdown-menu li:hover a {
    color: var(--mosian-ink) !important;
    font-weight: 700;
}

/* استایل hover خود قالب که آبی روشن بود */
.navbar_nav .dropdown-menu .span-box:hover {
    background-color: transparent !important;
    color: var(--mosian-ink) !important;
}

.navbar_nav .dropdown-menu hr {
    color: rgba(255, 255, 255, .22) !important;
    border-color: rgba(255, 255, 255, .22) !important;
    opacity: 1;
    margin: 2px 10px !important;
}

/* --------------------------------------------------------------------------
   نوار بالای هدر
   -------------------------------------------------------------------------- */
.header_top {
    background: linear-gradient(90deg, var(--mosian-primary-dark) 0%, var(--mosian-primary) 100%) !important;
}

.header_top,
.header_top a,
.header_top p,
.header_top li,
.header_top span {
    color: #F2FAF6 !important;
}

.header_top .get_a_quote {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

.header_top a:hover {
    color: var(--mosian-accent) !important;
}

/* --------------------------------------------------------------------------
   دکمه‌ها و لینک‌های عمومی قالب
   -------------------------------------------------------------------------- */
.default-btn,
.btn-one,
.theme-btn,
button.default-btn {
    background: var(--mosian-primary) !important;
    border-color: var(--mosian-primary) !important;
    color: #ffffff !important;
}

.default-btn:hover,
.btn-one:hover,
.theme-btn:hover {
    background: var(--mosian-primary-dark) !important;
    border-color: var(--mosian-primary-dark) !important;
}

a {
    color: var(--mosian-primary);
}

a:hover {
    color: var(--mosian-primary-dark);
}

/* --------------------------------------------------------------------------
   عنوان بخش‌ها
   -------------------------------------------------------------------------- */
.section-title h2,
.section-title h4,
.section_title h2 {
    color: var(--mosian-ink);
}

.line-subTitle,
.sub_title,
.section-title h5 {
    color: var(--mosian-primary) !important;
}

/* --------------------------------------------------------------------------
   فوتر
   -------------------------------------------------------------------------- */
.site-footer {
    background: var(--mosian-ink-deep) !important;
}

.site-footer .footer-title {
    color: var(--mosian-accent) !important;
}

.site-footer a:hover {
    color: var(--mosian-accent) !important;
}

/* --------------------------------------------------------------------------
   اسکرول‌بار و انتخاب متن
   -------------------------------------------------------------------------- */
::selection {
    background: var(--mosian-primary);
    color: #fff;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--mosian-surface);
}

::-webkit-scrollbar-thumb {
    background: var(--mosian-primary-border);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--mosian-primary);
}

/* --------------------------------------------------------------------------
   اسلایدر صفحهٔ اصلی — واکنش‌گرا روی موبایل
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .banner_sction .slider_content h1,
    .banner_sction h1 {
        font-size: 26px !important;
        line-height: 1.6 !important;
    }
    .banner_sction .slider_content h6 {
        font-size: 14px !important;
    }
}

@media (max-width: 575px) {
    .banner_sction .slider_content h1,
    .banner_sction h1 {
        font-size: 20px !important;
    }
}

/* --------------------------------------------------------------------------
   منوی موبایل — لینک‌های قالب رنگ سفید اینلاین دارند و روی پنل سفید
   موبایل دیده نمی‌شوند؛ فقط داخل منوی موبایل رنگ را اصلاح می‌کنیم.
   -------------------------------------------------------------------------- */
.crt_mobile_menu,
.mobile_menu_wrapper {
    background: #ffffff;
}

.crt_mobile_menu a,
.crt_mobile_menu a span,
.crt_mobile_menu li > a,
.mobile_menu_wrapper a,
.mobile_menu_wrapper a span {
    color: var(--mosian-ink) !important;
}

.crt_mobile_menu a:hover,
.crt_mobile_menu a:hover span,
.mobile_menu_wrapper a:hover span {
    color: var(--mosian-primary) !important;
}

.crt_mobile_menu .dropdown-menu,
.mobile_menu_wrapper .dropdown-menu {
    background: var(--mosian-primary-tint) !important;
    border: 0;
    box-shadow: none;
    border-radius: 10px;
}

.crt_mobile_menu .dropdown-menu a,
.crt_mobile_menu .dropdown-menu span,
.crt_mobile_menu .dropdown-menu .span-box,
.mobile_menu_wrapper .dropdown-menu a,
.mobile_menu_wrapper .dropdown-menu span,
.mobile_menu_wrapper .dropdown-menu .span-box {
    color: var(--mosian-ink) !important;
}

.crt_mobile_menu .dropdown-menu li:hover,
.mobile_menu_wrapper .dropdown-menu li:hover {
    background-color: rgba(15, 122, 80, .10) !important;
}

.crt_mobile_menu .dropdown-menu li:hover a,
.crt_mobile_menu .dropdown-menu li:hover span,
.mobile_menu_wrapper .dropdown-menu li:hover span {
    color: var(--mosian-primary-dark) !important;
}

.crt_mobile_menu .dropdown-menu hr,
.mobile_menu_wrapper .dropdown-menu hr {
    border-color: rgba(27, 42, 51, .12) !important;
    color: rgba(27, 42, 51, .12) !important;
}

.crt_mobile_menu hr {
    color: var(--mosian-line) !important;
}

/* دکمهٔ همبرگری روی نوار کرم‌رنگ */
.navbar_togglers .line {
    background: var(--mosian-ink) !important;
}

/* --------------------------------------------------------------------------
   تصویر اسلایدر روی موبایل کامل دیده شود
   -------------------------------------------------------------------------- */
.slider .image-layer,
.banner_carousel .image-layer {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

@media (max-width: 767px) {
    .slider .image-layer,
    .banner_carousel .image-layer {
        height: 300px !important;
    }
    .banner_carousel .slider_content h1,
    .banner_carousel .slider_content h6 {
        top: -60px !important;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .slider .image-layer,
    .banner_carousel .image-layer {
        height: 400px !important;
    }
}

/* روی موبایل، حاشیهٔ منفی بخش خدمات فاصلهٔ خالی می‌سازد */
@media (max-width: 991px) {
    .service-section-one {
        margin-top: 24px !important;
    }
    .services-section .services-grid {
        margin-top: 8px !important;
    }
}

/* --------------------------------------------------------------------------
   نوارهای تزئینی زیرِ عنوان بخش‌ها در قالب با عرض ثابت (۱۱۰۰ تا ۱۲۳۰ پیکسل)
   نوشته شده‌اند؛ روی نمایشگرهای کوچک باعث سرریز افقی و فاصلهٔ خالی می‌شدند.
   اینجا فقط عرض و جابه‌جایی‌شان واکنش‌گرا می‌شود؛ ظاهرشان تغییری نمی‌کند.
   -------------------------------------------------------------------------- */
.title_sections.left.text1,
.title_all_box .title_sections > div[style*="width: 1110px"],
.title_all_box .title_sections > div[style*="width:1110px"],
.title_all_box .title_sections > div[style*="width: 1230px"],
.title_all_box .title_sections > div[style*="width:1230px"] {
    max-width: 100%;
}

@media (max-width: 1399px) {
    .title_sections.left.text1 {
        width: auto !important;
        margin-right: 0 !important;
    }
    .title_all_box .title_sections > div[style*="width: 1110px"],
    .title_all_box .title_sections > div[style*="width:1110px"],
    .title_all_box .title_sections > div[style*="width: 1230px"],
    .title_all_box .title_sections > div[style*="width:1230px"] {
        width: 100% !important;
        left: 0 !important;
        position: relative !important;
    }
}

@media (max-width: 767px) {
    .title_sections.left.text1 > .title,
    .services-section + .pd_bottom_ ~ * .title {
        width: auto !important;
        min-width: 0;
    }
    .service-section-one .title_sections .title {
        width: 100% !important;
    }
}

/* جلوگیری از اسکرول افقی در کل سایت */
body, #page, #wrapper_full {
    overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   ارتفاع اسلاید در قالب روی min-height: 750px و padding سنگین تنظیم شده؛
   روی موبایل زیر تصویر فضای خالی می‌ساخت. اینجا با ارتفاع تصویر هماهنگ می‌شود.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .banner_carousel .slide-item {
        min-height: 300px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        display: flex;
        align-items: center;
    }
    .banner_carousel .medium-container {
        width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .banner_carousel .slide-item {
        min-height: 400px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        display: flex;
        align-items: center;
    }
}

/* --------------------------------------------------------------------------
   کارت‌های تیرهٔ قالب، با طیف سبز شهری جان می‌گیرند
   -------------------------------------------------------------------------- */
.service-box,
.service-card,
.news_box.type_one .content_box,
.service_box.type_one,
.box-card {
    background: linear-gradient(150deg, var(--mosian-primary) 0%, var(--mosian-primary-dark) 100%) !important;
    border: 0 !important;
}

.service-box:hover,
.service-card:hover {
    background: linear-gradient(150deg, var(--mosian-primary-soft) 0%, var(--mosian-primary) 100%) !important;
    transform: translateY(-4px);
    box-shadow: 0 16px 30px -18px rgba(11, 94, 61, .6) !important;
}

/* فوتر: سبز بسیار تیره به‌جای زغالی */
.site-footer {
    background: linear-gradient(180deg, #0B4A32 0%, #083826 100%) !important;
}

/* بخش نظرات و پیشنهادات صفحهٔ اصلی */
.contact-section.bg_op_1 {
    background: linear-gradient(135deg, var(--mosian-primary-dark) 0%, var(--mosian-primary) 100%) !important;
}

/* بخش اعضای شورا */
.service-section.bg_dark_1 {
    background: linear-gradient(135deg, #0B4A32 0%, var(--mosian-primary-dark) 100%) !important;
}