/* ====== متغیرها و پایه ====== */
:root {
    --c-navy: #001c54;
    --c-teal: #58c5c7;
    --c-purple: #956daf;
    --c-silver: #c7c9cc;
    --c-bg: #f5f6f8;
    --c-text: #0f172a;
    --c-muted: #64748b;
    --radius-lg: 18px;
    --radius-md: 14px;
    --shadow: 0 10px 28px rgba(0,0,0,.10);
    /* پارامترهای شناوری لوگو */
    --brand-float-w: 240px; /* عرض بلوک لوگو */
    --brand-float-h:75px; /* ارتفاع بلوک لوگو */
    --brand-float-inline: 0px; /* فاصله افقی از لبه شروع کانتینر */
    --brand-float-raise:5px; /* میزان بالاکشیدن نسبت به خط منو (منفی یعنی بالاتر) */
    --brand-radius: 0px; /* اگر لوگو گوشه‌گرد لازم دارد، مقدار دهید */
}
.site {
    background: var(--c-bg);
    color: var(--c-text);
    font-family: Vazirmatn, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}


/* ===== نوارهای بالایی ===== */
.site-header {
    background: linear-gradient(180deg, #f2f5f9, #fbfbfc);
    border-bottom: 1px solid rgba(15,23,42,.08);
    backdrop-filter: none;
}

/* برای شناوری لوگو باید محدوده هدر قابل رویت باشد */
.site-header {
    position: relative;
    overflow: visible;
    z-index: 10;
}

/* ===== ساختار داخلی هدر ===== */
.header-inner {
    position: relative; /* مرجع برای لوگوی absolute */
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
}

  

/* ===== لوگوی شناور دقیقاً روی هدر/منو ===== */
.brand.brand-float {
    position: absolute;
    inset-inline-start: var(--brand-float-inline);
    inset-block-start: calc(-1 * var(--brand-float-raise)); /* اگر باید بالاتر از خط منو بیاید، مقدار را افزایش دهید */
    width: var(--brand-float-w);
    height: var(--brand-float-h);
    display: flex;
    align-items: center;
    justify-content: center;
    /* لوگو داخل خود باکس */
    background-image: var(--brand-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
/*    border-radius: var(--brand-radius);
*/    box-shadow: 0 16px 36px rgba(0,0,0,.18);
    z-index: 30;
    /* خنثی‌سازی هر استایل باقی‌مانده از نسخه قبل */
    margin: 0 !important;
    border: none !important;
    transform: none !important;
    overflow: hidden;
}

    .brand.brand-float img {
        display: none;
        /* FIX: allow full fill when img exists */
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
    }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
/* اطمینان از کلیک‌پذیری منو نسبت به لوگو */
.topbar,
.header-inner .nav,
.header-inner .site-nav {
    position: relative;
    z-index: 20;
}

/* در دسکتاپ، منو از کنار لوگوی شناور شروع شود تا هم‌پوشانی نداشته باشد */
@media (min-width: 993px) {
    .header-inner .nav,
    .header-inner .site-nav {
        padding-inline-start: calc(var(--brand-float-w) + 16px);
    }
}

/* ===== سایر اجزای هدر ===== */
.header-inner .nav-toggle {
    justify-self: start;
}

html[dir="ltr"] .header-inner .nav-toggle {
    justify-self: end;
}

.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    position: relative;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.brand-mark {
    width: 14px;
    height: 28px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--c-purple), var(--c-teal));
    box-shadow: 0 8px 18px rgba(88,197,199,.25);
}

.brand-text {
    font-weight: 800;
    letter-spacing: .3px;
    color: var(--c-navy);
}

/* لینک‌های منو */
.nav a,
.site-nav a {
    text-decoration: none;
    color: var(--c-navy);
    padding: 10px 14px;
    font-weight: 600;
    opacity: .92;
}

    .nav a:hover,
    .site-nav a:hover {
        opacity: 1;
    }

.btn-accent {
    background: var(--c-teal);
    border-color: var(--c-teal);
    color: #06202b;
    font-weight: 800;
}

    .btn-accent:hover {
        background: #46b6b8;
        border-color: #46b6b8;
    }

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lang {
    text-decoration: none;
    color: var(--c-muted);
    font-weight: 700;
}

.sep {
    color: rgba(15,23,42,.25);
}

.nav-toggle {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(15,23,42,.14);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

    .nav-toggle span {
        display: block;
        width: 18px;
        height: 2px;
        background: var(--c-navy);
        margin: 5px auto;
        border-radius: 999px;
    }


/* ===== Hero و سکشن‌ها ===== */
/* HERO FULL WIDTH */
.hero-full {
    position: relative;
    width: 100%;
    min-height: 520px;
    display: grid;
    align-items: stretch;
    overflow: hidden;
    background: #0b1220;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}


    

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.10) 100%);
    display: none;
}

html[dir="rtl"] .hero-overlay {
    background: linear-gradient(270deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.10) 100%);
}

/* CONTENT */
.hero-content {
    position: relative;
    z-index: 2;
    padding: 54px 0 18px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

.hero-copy {
    max-width: 680px;
    color: #fff;
}

.hero-kicker {
    font-weight: 800;
    opacity: .9;
    letter-spacing: .2px;
    margin-bottom: 10px;
}

.hero-title {
    font-weight: 900;
    line-height: 1.15;
    margin: 0 0 12px;
    font-size: clamp(1.6rem, 3.2vw, 3rem);
}

.hero-text {
    margin: 0 0 18px;
    opacity: .92;
    line-height: 1.85;
    max-width: 56ch;
}

.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.trust-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.trust-pill {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 800;
    font-size: .92rem;
    backdrop-filter: blur(6px);
}

/* CONTROLS */
.hero-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    align-self: flex-end;
}

.hero-btn {
    height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.10);
    color: #fff;
    font-weight: 800;
}

    .hero-btn:hover {
        background: rgba(255,255,255,.16);
    }

/* DOTS */
.hero-indicators {
    position: relative;
    z-index: 2;
    padding: 0 0 24px;
    display: flex;
    gap: 8px;
}

.hero-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 0;
    background: rgba(255,255,255,.35);
    cursor: pointer;
}

    .hero-dot.is-active {
        background: rgba(255,255,255,.95);
        width: 26px;
    }

/* RESPONSIVE */
@media (max-width: 992px) {
    .hero-full {
        min-height: 460px;
    }

    .hero-content {
        padding: 34px 0 14px;
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-controls {
        align-self: flex-start;
    }
}


/* ===== سکشن‌ها و کارت‌ها ===== */
.section {
    margin-top: 18px;
}

.section-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin: 18px 0 10px;
}

    .section-title h2 {
        margin: 0;
        font-weight: 900;
        color: var(--c-navy);
    }

    .section-title .hint {
        color: var(--c-muted);
    }

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.cardx {
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: 0 10px 22px rgba(0,0,0,.06);
    border: 1px solid rgba(15,23,42,.08);
    padding: 16px;
}

    .cardx .icon {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        background: linear-gradient(180deg, rgba(88,197,199,.25), rgba(149,109,175,.18));
        border: 1px solid rgba(88,197,199,.28);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 12px;
        color: var(--c-navy);
        font-weight: 900;
    }

    .cardx h3 {
        font-weight: 900;
        font-size: 1.05rem;
        margin: 0 0 6px;
        color: var(--c-navy);
    }

    .cardx p {
        margin: 0;
        color: var(--c-muted);
    }

/* ===== RTL / LTR متن ===== */
html[dir="rtl"] body {
    direction: rtl;
}

html[dir="ltr"] body {
    direction: ltr;
}

html[dir="rtl"] .hero,
html[dir="rtl"] .section-title,
html[dir="rtl"] .cardx {
    text-align: right;
}

html[dir="ltr"] .hero,
html[dir="ltr"] .section-title,
html[dir="ltr"] .cardx {
    text-align: left;
}

   FOOTER (FIXED 3 COLS)
   ========================= */

.site-footer {
    padding: 34px 0;
    border-top: 1px solid rgba(15,23,42,.08);
    background: #fff;
}

    /* مهم: چون ممکنه wrapper .site-footer نداشته باشی، هر دو رو می‌زنیم */
    .site-footer .footer-grid,
    .footer-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 24px;
        align-items: start;
        width: 100%;
        box-sizing: border-box;
        padding-inline: 24px;
        /* ستون‌بندی ثابت */
        direction: ltr;
        padding-bottom:20px;
    }

    /* ستون‌ها */
    .site-footer .footer-col,
    .footer-col {
        display: flex;
        flex-direction: column;
        gap: 12px;
        min-width: 0;
        align-items: flex-start; /* جلوی وسط‌چین شدن ناخواسته */
    }

/* به جای grid-column از grid-area استفاده کن (پایدارتر) */
.footer-col-brand {
    grid-area: brand;
}

.footer-col-services {
    grid-area: services;
}

.footer-col-map {
    grid-area: map;
}

/* LTR: برند | خدمات | نقشه */
html[dir="ltr"] .footer-grid {
    grid-template-areas: "brand services map";
}

/* RTL: نقشه | خدمات | برند */
html[dir="rtl"] .footer-grid {
    grid-template-areas: "map services brand";
}

/* RTL فقط متن داخل ستون‌ها */
html[dir="rtl"] .footer-col {
    direction: rtl;
    text-align: right;
}

/* برند */
.footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-logo {
    width: 190px; /* ? ������ ���� */
    height: auto;
    object-fit: contain;
}

.footer-title {
    font-weight: 900;
    color: var(--c-navy);
    margin: 0 0 4px;
}

.footer-link {
    text-decoration: none;
    color: var(--c-muted);
    font-weight: 700;
    line-height: 1.7;
    word-break: break-word;
}

    .footer-link:hover {
        color: var(--c-navy);
    }

/* نقشه */
.footer-map {
    border: 1px solid rgba(15,23,42,.08);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 10px 22px rgba(0,0,0,.06);
    background: #fff;
}
/* نقشه کل ردیف را بگیرد */
.footer-col-map {
    grid-column: 1 / -1;
}

/* و کمی بزرگ‌ترش کنیم */
.map-embed {
    width: 100%;
    height: 420px;
    display: block;
    border: 0;
}


/* ریسپانسیو (هنوز ۳ ستون می‌ماند) */
@media (max-width: 992px) {
    .footer-grid {
        gap: 12px;
        padding-inline: 12px;
    }

    .footer-title {
        font-size: 13px;
    }

    .footer-link, .muted {
        font-size: 12px;
        line-height: 1.6;
    }

    .map-embed {
        height: 190px;
    }
}


html[dir="rtl"] .brand.brand-float {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

@media (max-width: 992px) {
    

    /* ��� ����� ����� ���� ��� (�� drawer) */
    .header-inner .nav,
    .header-inner .site-nav {
        display: flex !important;
        position: static !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    /* �� ��� �� ������: �� ���� ��� ����� ��� ���� */
    .mega {
        position: static !important;
        width: 100% !important;
        margin-top: 8px;
        box-shadow: none !important;
        border: 1px solid rgba(15,23,42,.08);
        border-radius: 12px;
    }
    .brand.brand-float {
        position: static;
        width: auto;
        height: 64px;
        box-shadow: 0 10px 24px rgba(0,0,0,.14);
        margin-inline-start: 0;
        margin-inline-end: auto;
        inset: auto;
    }

        .brand.brand-float img {
            max-height: 40px;
            max-width: 100%;
            /* FIX: allow full fill when img exists */
            width: 100%;
            height: 100%;
            max-width: none;
            max-height: none;
        }

    /* ✅ فوتر همیشه ۳ ستون بماند */
    .footer-grid {
        grid-template-columns: 1fr 1fr 1.2fr;
        gap: 14px;
        direction: ltr;
    }

    html[dir="rtl"] .footer-grid .footer-col {
        direction: rtl;
        text-align: right;
    }

    
}


/* ===== فوتر: همیشه ۳ ستون، بدون اسکرول افقی ===== */
.site-footer .footer-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px;
    align-items: start;
    padding-inline: 16px;
    box-sizing: border-box;
    direction: ltr;
    overflow: hidden; /* جلوگیری از اسکرول افقی */
}

/* اجازه دهید ستون‌ها کوچک شوند */
.site-footer .footer-col,
.site-footer .footer-col-map,
.site-footer .footer-col-services,
.site-footer .footer-col-brand {
    min-width: 0 !important;
}

/* RTL فقط متن داخل ستون‌ها راست‌چین باشد */
html[dir="rtl"] .footer-grid .footer-col {
    direction: rtl;
    text-align: right;
}

/* ترتیب ستون‌ها در RTL */
html[dir="rtl"] .footer-col-map {
    grid-column: 1;
}

html[dir="rtl"] .footer-col-services {
    grid-column: 2;
}

html[dir="rtl"] .footer-col-brand {
    grid-column: 3;
}

/* ترتیب ستون‌ها در LTR */
html[dir="ltr"] .footer-col-brand {
    grid-column: 1;
}

html[dir="ltr"] .footer-col-services {
    grid-column: 2;
}

html[dir="ltr"] .footer-col-map {
    grid-column: 3;
}

/* بهینه‌سازی برای عرض‌های کوچک بدون شکستن ردیف */
@media (max-width: 992px) {
    .site-footer .footer-grid {
        gap: 10px;
        padding-inline: 10px;
    }

    .site-footer .footer-title {
        font-size: 13px;
    }

    .site-footer .footer-link,
    .site-footer .muted {
        font-size: 12.5px;
        line-height: 1.6;
    }

    .site-footer .map-embed {
        height: 200px;
    }
}


/* ============================= */
/* NAV BASE */
/* ============================= */

.header {
    position: relative;
    z-index: 50;
    border-bottom: 1px solid rgba(0,0,0,.08);
    height: 80px; /* ارتفاع بیشتر */
    display: flex;
    align-items: center; /* وسط‌چین عمودی */
    justify-content: flex-end; /* جابجایی به راست */
}

/* =========================
   NAV + MEGA MENU (only)
   ========================= */

.header-inner {
    position: relative;
}

.nav {
    display: flex;
    align-items: center;
    gap: 18px;
}

/* آیتمی که زیرمنو دارد */
.nav-item.has-mega {
    position: relative;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: #001c54;
    font-weight: 700;
    padding: 10px 6px;
}

.header #nav > .nav-item.has-mega > .nav-link {
    gap: 8px;
}

.header #nav > .nav-item.has-mega > .nav-link .nav-caret {
    width: 8px;
    height: 8px;
    display: inline-block;
    flex: 0 0 auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: .75;
    margin-inline-start: 2px;
    transition: transform .2s ease, opacity .2s ease;
}

.header #nav > .nav-item.has-mega:hover > .nav-link .nav-caret,
.header #nav > .nav-item.has-mega.is-current > .nav-link .nav-caret,
.header #nav > .nav-item.has-mega.is-open > .nav-link .nav-caret {
    opacity: 1;
}

.header #nav > .nav-item.has-mega.is-open > .nav-link .nav-caret {
    transform: rotate(-135deg);
}

/* --------- MEGA CONTAINER --------- */
/* نکته مهم: 100vw نذار! باعث overflow میشه */
.mega {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: min(1120px, calc(100vw - 50px)); /* ✅ بدون اسکرول افقی */
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 16px;
    box-shadow: 0 22px 60px rgba(0,0,0,.12);
    padding: 18px;
    display: none;
    z-index: 200;
    box-sizing: border-box;
}

/* نمایش زیرمنو با hover (دسکتاپ) */
.nav-item.has-mega:hover > .mega {
    display: block;
}

/* اگر با JS کلاس open میدی */
.nav-item.has-mega.is-open > .mega {
    display: block;
}

/* --------- INNER GRID --------- */
.mega-inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}

.mega-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 140px;
    padding: 12px;
    border-radius: 12px;
    box-shadow: 0 6px 12px rgba(0,0,0,.1);
    transition: transform 0.2s ease;
    text-decoration: none;
}

    .mega-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 24px rgba(0,0,0,.15);
    }

.mega-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
}

    .mega-icon svg {
        width: 100%;
        height: 100%;
        fill: none;
        stroke: #001c54;
        stroke-width: 2;
    }

.mega-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: #001c54;
}


/* --------- RTL polish --------- */
html[dir="rtl"] .mega {
    /* همان وسط‌چین بماند، فقط متن‌ها RTL */
    direction: rtl;
}

html[dir="rtl"] .mega-label {
    direction: rtl;
}

/* --------- RESPONSIVE BREAKPOINTS --------- */
@media (max-width: 1200px) {
    .mega-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {
    /* زیرمنو تو موبایل بهتره داخل منوی بازشده بیاد */
    .mega {
        position: static;
        left: auto;
        transform: none;
        width: 100%;
        margin-top: 10px;
        border-radius: 14px;
        box-shadow: none;
        padding: 14px;
    }

    

    .mega-card {
        min-height: 110px;
    }

        .mega-card img {
            width: 38px;
            height: 38px;
        }

    .mega-label {
        font-size: .9rem;
    }
}

@media (max-width: 768px) {
    .mega-inner {
        grid-template-columns: 1fr;
    }
}

/* --------- NAV TOGGLE (hamburger) - optional helpers --------- */
.nav-toggle {
    display: none;
}

@media (max-width: 992px) {
    
}
/* ===== HERO: full-width بدون اسکرول افقی ===== */
html, body {
    overflow-x: clip;
}
/* اگر clip ساپورت نبود، hidden بگذار */

.hero-full {
    /* full-bleed بدون اینکه 100vw باعث overflow شود */
    width: 100vw;
    margin-inline-start: calc(50% - 50vw);
    margin-inline-end: calc(50% - 50vw);
    position: relative;
    overflow: hidden;
    /* ارتفاع کمتر */
    height: clamp(320px, 52vh, 460px);
    min-height: 0;
}

/* بکگراندها */
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-bg-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1.02);
    transition: opacity .6s ease, transform 1.2s ease;
}

    .hero-bg-slide.is-active {
        opacity: 1;
        transform: scale(1);
    }

/* هاله مشکی رو حذف/کم کن (الان احتمالاً همین باعث کدر شدن عکس شده) */
.hero-overlay {
    display: none !important; /* اگر کلاً نمیخوای */
    /* یا اگر خیلی کم میخوای:
  display:block;
  background: linear-gradient(90deg, rgba(0,0,0,.12), rgba(0,0,0,.05));
  */
}

/* محتوای روی اسلایدر */
.hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: flex-end;
    padding: 28px 0 18px;
}

/* لوگو: اندازه‌اش مثل یک "تصویر" کامل داخل باکس جا بگیرد */
.brand.brand-float {
    height: 48px;
    width: auto;
}
    .brand.brand-float img {
        width: 100%;
        height: 100%;
        object-fit: contain; /* لوگو کامل دیده شود */
        display: block;
        /* FIX: allow full fill when img exists */
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
    }

/* اگر هنوز یک ذره تکان افقی دیدی، این کمک می‌کند */
.hero-full * {
    max-width: 100%;
    box-sizing: border-box;
}

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

/* ORKIN HERO */
.orkin-hero {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    height: clamp(420px, 62vh, 620px); /* ✅ ارتفاع بیشتر */
    background: #0b1220;
    overflow: hidden;
}

@media (max-width: 992px) {
    
}

.orkin-hero__slides,
.orkin-hero__slide,
.orkin-hero__overlay {
    position: absolute;
    inset: 0;
}

.orkin-hero__slide {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity .8s ease, transform 1.4s ease;
}

    

.orkin-hero__overlay {
    background: linear-gradient( 90deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.06) 55%, rgba(0,0,0,0) 100% );
    z-index: 1;
}


.orkin-hero__content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
}
.orkin-hero__box {
    max-width: 520px;
    color: #0f172a;
    background: #fff;
    backdrop-filter: blur(8px);
    border-radius: 18px;
    padding: 18px;
    transform: translateY(-25vh);
    border: none;
    border-top: 6px solid var(--c-mustard);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}

.orkin-hero__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(0,0,0,.18);
    color: #fff;
    font-size: 26px;
    cursor: pointer;
}


.orkin-hero__dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 3;
}

.orkin-hero__dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.45);
    border: none;
}

    .orkin-hero__dot.is-active {
        width: 26px;
        background: rgba(255,255,255,.95);
    }


/* =========================================
   FIX: Hero full-bleed + not under topbar
   ========================================= */

/* 1) جلوی اسکرول افقی را بگیر */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* 2) اگر parent هایی مثل .container / .site / .main padding دارن،
      اسلایدر نباید ازش تاثیر بگیره */
.orkin-hero {
    width: 100%;
    margin: 0; /* چپ/راست صفر */
    padding: 0; /* چپ/راست صفر */
    left: 0;
    right: 0;
}

/* اگر اسلایدر داخل container افتاده و container پدینگ دارد،
   این خط باعث می‌شود خود اسلایدر full-bleed شود */
.container .orkin-hero,
.site .orkin-hero,
.orkin-hero {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* 3) جلوگیری از اینکه اسلایدر بره زیر topbar/header
   ✅ فقط یکی از دو حالت زیر را نگه دار */

/* --- حالت A: اگر topbar/header شما fixed یا sticky هست --- */
:root {
    --topbar-h: 44px; /* اینو با ارتفاع واقعی topbar خودت ست کن */
    --header-h: 80px; /* اینو با height هدر خودت ست کن */
}
/* وقتی هدر ثابت است، باید به صفحه فاصله بدهیم */
body.has-fixed-header {
    padding-top: calc(var(--topbar-h) + var(--header-h));
}
    /* خود اسلایدر هم دیگه نیاز به margin-top نداره */
    body.has-fixed-header .orkin-hero {
        margin-top: 0;
    }

/* --- حالت B: اگر topbar/header ثابت نیست (normal flow) ---
.orkin-hero { margin-top: 0; }
*/

/* 4) ارتفاع کمتر طبق خواسته (اگر زیاد شد/کم شد اینو تغییر بده) */
.orkin-hero {
    height: 750px !important;
}
/* 5) برای اینکه از چپ/راست هیچ فاصله‌ای نمونه */
.orkin-hero__slides,
.orkin-hero__slide,
.orkin-hero__overlay {
    inset: 0;
}

/* ============================
   ORKIN HERO (FIX ONLY)
   full-bleed + no horiz scroll + not under topbar
   ============================ */

/* جلوگیری از اسکرول افقی (امن) */
html, body {
    overflow-x: hidden;
}

/* مقدار این متغیر را فقط وقتی لازم شد تنظیم کن (اگر هدر/تاپ‌بار fixed هست) */
:root {
    --orkin-top-offset: 0px; /* مثال: 124px = 44(topbar)+80(header) */
}

/* اسلایدر full width واقعی بدون فاصله از چپ/راست */
.orkin-hero {
    position: relative;
    width: 100vw; /* تمام عرض ویوپورت */
    margin-left: calc(50% - 50vw); /* بیرون آمدن از container */
    margin-right: calc(50% - 50vw);
    margin-top: 0 !important;
    padding: 0;
    left: 0;
    right: 0;
    overflow: clip; /* اگر ساپورت نشد، hidden میشه */
    overflow: hidden;
    /* ارتفاع کمتر و قابل کنترل */
    height: clamp(500px, 75vh, 900px) !important;
    background: #0b1220;
}

/* لایه‌ها دقیقاً به لبه‌ها بچسبند */
.orkin-hero__slides,
.orkin-hero__slide,
.orkin-hero__overlay {
    position: absolute;
    inset: 0;
}

/* بک‌گراند اسلاید */
.orkin-hero__slide {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1.03);
    transition: opacity .8s ease, transform 1.4s ease;
    will-change: opacity, transform;
}

    .orkin-hero__slide.is-active {
        opacity: 1;
        transform: scale(1);
    }

/* overlay خیلی کم (اگر عکس تیره میشه، اینو کمتر کن یا 0 کن) */
.orkin-hero__overlay {
    z-index: 1;
    background: linear-gradient( 90deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.06) 55%, rgba(0,0,0,0) 100% );
}

html[dir="rtl"] .orkin-hero__overlay {
    background: linear-gradient( 270deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.06) 55%, rgba(0,0,0,0) 100% );
}

/* محتوا داخل container بمونه ولی خود اسلایدر full width باشه */
.orkin-hero__content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
}

/* فلش‌ها داخل خود اسلایدر و بدون ایجاد overflow */
.orkin-hero__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
}

.orkin-hero__prev {
    left: 16px;
}

.orkin-hero__next {
    right: 16px;
}

html[dir="rtl"] .orkin-hero__prev {
    left: auto;
    right: 16px;
}

html[dir="rtl"] .orkin-hero__next {
    right: auto;
    left: 16px;
}

/* ریسپانسیو ارتفاع */
@media (max-width: 992px) {
    .orkin-hero {
        height: clamp(260px, 42vh, 360px);
    }
}


/* =========================================================
   FINAL OVERRIDES (MUST BE LAST)
   - Fix ORKIN box position: always LEFT even in FA (RTL)
   - Keep Persian text RTL inside the box
   ========================================================= */

/* ORKIN HERO: layout lock */
.orkin-hero__content {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* always left */
}

/* In RTL pages, make the flex-start truly "left" by setting layout direction to LTR */
html[dir="rtl"] .orkin-hero__content {
    direction: ltr !important;
}

/* Keep Persian text correct inside the box */
html[dir="rtl"] .orkin-hero__box {
    direction: rtl !important;
    text-align: right !important;
}

/* Optional: a bit of breathing room from the left edge */
.orkin-hero__box {
    margin-inline-start: 24px !important;
}

/* Mobile: don't stick too hard to edges */
@media (max-width: 992px) {
    .orkin-hero__box {
        margin-inline-start: 16px !important;
        margin-inline-end: 16px !important;
    }
}

.cardx-icon {
    width: 75px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .cardx-icon img {
        width: 75px;
        height: 75px;
        object-fit: contain;
        display: block;
    }


/* =========================
   GLOBAL SECTION SPACING
   ========================= */

/* فاصله عمودی کلی بین سکشن‌ها */
:root {
    --space-1: 18px; /* کوچک */
    --space-2: 32px; /* متوسط */
    --space-3: 64px; /* بزرگ */
    --space-4: 88px; /* خیلی بزرگ */
}

/* 1) فاصله بعد از اسلایدر تا شروع محتوا */
.orkin-hero {
    margin-bottom: var(--space-4);
}

/* 2) فاصله بین سکشن‌های داخل container */
.container > .section,
.container > .cta-band {
    margin-top: var(--space-4);
}

    /* اگر اولین سکشن بعد از اسلایدر خیلی چسبیده بود */
    .container > .section:first-child {
        margin-top: 0;
    }

/* 3) فاصله کارت‌ها/چیزها از عنوان سکشن */
.section-head {
    margin-bottom: var(--space-2);
}

/* 4) فاصله بین گریدهای داخل هر سکشن (کارت‌ها/چیپ‌ها) */
.cards,
.chips {
    margin-top: var(--space-2);
}

/* 5) فاصله قبل از فوتر */
.site-footer {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
}

.cardx-link {
    display: block;
    margin-top: 12px;
}

/* در فارسی (RTL) لینک هم‌جهت متن باشد */
html[dir="rtl"] .cardx-link {
    text-align: right;
}

/* در انگلیسی (LTR) لینک هم‌جهت متن باشد */
html[dir="ltr"] .cardx-link {
    text-align: left;
}
/* =========================
   SERVICE CARD ANIMATION
   ========================= */

.cardx {
    transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease;
    will-change: transform;
    border-top: 6px solid #d4a017 !important;
}

    .cardx:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(218,165,32,.28);
        border-color: var(--rk-gold) !important;
    }

/* آیکن زنده‌تر شود */
.cardx-icon {
    transition: transform .35s ease;
}

.cardx:hover .cardx-icon {
    transform: scale(1.08);
}

.cardx {
    opacity: 0;
    transform: translateY(30px);
}

    .cardx.is-visible {
        opacity: 1;
        transform: translateY(0);
        transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
    }
/* =========================
   FADE سایر کارت‌ها در hover
   ========================= */

/* وقتی روی container کارت‌ها hover میشه */
.cards:hover .cardx {
    opacity: 0.4;
    transform: scale(0.98);
    transition: opacity .3s ease, transform .3s ease;
}

/* کارت فعلی واضح بماند */
.cards .cardx:hover {
    opacity: 1;
    transform: scale(1.03);
    z-index: 2;
}
/* =========================
   FOOTER: همیشه یک سطر (۳ ستون)
   ========================= */
.site-footer .footer-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1.2fr !important; /* همیشه ۳ ستون */
    gap: 16px !important;
    align-items: start;
    direction: ltr; /* ستون‌بندی ثابت */
    width: 100%;
}

/* اجازه بده ستون‌ها کوچک بشن و overflow نسازن */
.site-footer .footer-col,
.site-footer .footer-col * {
    min-width: 0;
}

/* نقشه مهم‌ترین عامل شکستن: کوچیک‌ترش کن */
.site-footer .map-embed {
    width: 100%;
    height: 220px; /* قبلاً 320 بود، باعث سنگینی و شکستن میشه */
    border: 0;
    display: block;
}

/* متن و لینک‌ها روی موبایل جمع‌تر بشن تا تو یک سطر جا بشن */
@media (max-width: 992px) {
    .site-footer .footer-grid {
        gap: 10px !important;
        padding-inline: 10px !important;
    }

    .site-footer .footer-title {
        font-size: 13px;
    }

    .site-footer .footer-link,
    .site-footer .muted {
        font-size: 12px;
        line-height: 1.55;
    }

    .site-footer .map-embed {
        height: 180px;
    }
}
/* =========================
   BLOG (مثل اسکرین‌شات)
   ========================= */

.blog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.blog-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 22px rgba(0,0,0,.06);
    border: 1px solid rgba(15,23,42,.08);
    transition: transform .25s ease, box-shadow .25s ease;
}

    .blog-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 40px rgba(0,0,0,.12);
    }

.blog-card .blog-img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
    background: #eef2f7;
}

.blog-card .blog-card-media-link {
    display: block;
}

.blog-media {
    height: 210px;
    background: #eef2f7;
}

    .blog-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.blog-body {
    padding: 18px 18px 16px;
}

.blog-title {
    margin: 0;
    font-weight: 900;
    color: var(--c-navy);
    line-height: 1.5;
}

.blog-divider {
    height: 1px;
    background: rgba(15,23,42,.10);
    margin: 16px 0 14px;
}

.blog-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--c-muted);
    font-weight: 700;
}

.blog-more {
    color: var(--c-navy);
}

@media (max-width: 992px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }

    .blog-media {
        height: 200px;
    }

    .blog-head {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* =========================
   STEP CARDS (Scroll effect like screenshot)
   ========================= */

.step-section {
    padding: var(--space-4) 0;
}

.step-head {
    max-width: 760px;
    margin: 0 auto var(--space-3);
    text-align: center;
}

.step-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    align-items: start;
}

/* کارت‌ها */
.step-card {
    background: #fff;
    border: 1px solid rgba(15,23,42,.08);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 22px rgba(0,0,0,.06);
    padding: 22px 22px 20px;
    position: relative;
    overflow: hidden;
    transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease, border-color .28s ease, opacity .28s ease;
}

/* نوار رنگی بالا (مثل عکس) */
.step-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: #d4a017;
}

/* آیکن */
.step-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px 0 14px;
    background: rgba(88,197,199,.12);
    border: 1px solid rgba(88,197,199,.22);
    font-size: 26px;
}

/* تیتر و متن */
.step-card h3 {
    margin: 0 0 10px;
    font-weight: 900;
    color: var(--c-navy);
}

.step-card p {
    margin: 0;
    color: var(--c-muted);
    line-height: 1.85;
}

/* پله‌ای شدن کارت‌ها (مثل تصویر) */
.step-card:nth-child(1) {
    margin-top: 0;
}

.step-card:nth-child(2) {
    margin-top: 36px;
}

.step-card:nth-child(3) {
    margin-top: 72px;
}

/* Hover */
.step-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(0,0,0,.12);
    border-color: rgba(88,197,199,.35);
}

/* Fade بقیه کارت‌ها در hover */
.step-grid:hover .step-card {
    opacity: .55;
}

.step-grid .step-card:hover {
    opacity: 1;
}

/* Scroll reveal */
.reveal {
    opacity: 0;
    transform: translateY(22px);
}

    .reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
        transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
        transition-delay: calc(var(--i) * .12s);
    }

/* ریسپانسیو */
@media (max-width: 992px) {
    .step-grid {
        grid-template-columns: 1fr;
    }

    .step-card:nth-child(2),
    .step-card:nth-child(3) {
        margin-top: 0;
    }
    /* در موبایل پله‌ای نکن */
}

/* ===========================
   STATIC PANELS
   =========================== */

.asazist-panels {
    margin: 80px 0;
}

/* دو باکس بالا */
.panel-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 40px;
}

.panel-card {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 20px 40px rgba(0,0,0,.12);
    cursor: pointer;
}

    .panel-card img {
        width: 100%;
        height: 420px;
        object-fit: cover;
        transition: transform 1s ease;
    }

/* باکس متن */
.panel-content {
    position: absolute;
    bottom: 30px;
    right: 30px;
    background: rgba(255,255,255,.95);
    padding: 20px;
    border-radius: 14px;
    max-width: 300px;
    transform: translateY(20px);
    opacity: 0;
    transition: all .5s ease;
    border-top: 6px solid var(--c-mustard); /* ���� ����� ���� */
}

.panel-card:hover .panel-content {
    transform: translateY(0);
    opacity: 1;
}

.panel-content a {
    display: inline-block;
    margin-top: 12px;
    font-weight: 700;
    color: var(--c-navy);
    text-decoration: none;
}

/* پنل بزرگ پایین */

.panel-hero {
    position: relative;
    height: 560px;
    overflow: hidden;
}

    .panel-hero img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 1.2s ease;
    }


.panel-hero-content {
    position: absolute;
    bottom: 60px;
    right: 8%;
    background: rgba(255,255,255,.95);
    padding: 30px;
    border-radius: 18px;
    max-width: 420px;
    box-shadow: 0 20px 50px rgba(0,0,0,.18);
    transform: translateY(30px);
    opacity: 0;
    transition: all .6s ease;
}

.panel-hero:hover .panel-hero-content {
    transform: translateY(0);
    opacity: 1;
}

.panel-hero-content a {
    display: inline-block;
    margin-top: 16px;
    padding: 10px 18px;
    background: var(--c-teal);
    border-radius: 10px;
    font-weight: 800;
    text-decoration: none;
    color: #06202b;
}

/* ریسپانسیو */
@media (max-width: 992px) {
    .panel-row {
        grid-template-columns: 1fr;
    }

    .panel-hero {
        height: 380px;
    }
}
/* Full-bleed section (edge to edge) */
html, body {
    overflow-x: hidden;
}

.asazist-panels--full {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0; /* چسبیدن به لبه‌ها */
}

    /* فاصله داخلی اگر لازم داری (اختیاری)
   اگر می‌خوای کاملاً بچسبه، اینو 0 بذار */
    .asazist-panels--full .panel-row {
        padding: 0;
        gap: 24px; /* فاصله بین دو کارت بالا */
    }

    /* کارت‌ها تمام عرض ستون رو پر کنن */
    .asazist-panels--full .panel-card {
        border-radius: 18px;
    }

    /* پنل پایین تمام عرض */
    .asazist-panels--full .panel-hero {
        width: 100%;
        margin: 0;
        border-radius: 0; /* اگر می‌خوای دقیقاً به لبه بچسبه */
    }

/* اگر دوست داری پنل پایین هم گوشه گرد بمونه، اینو حذف کن
.asazist-panels--full .panel-hero{ border-radius: 18px; overflow:hidden; }
*/
/* عکس کاملاً ثابت */
.panel-card img,
.panel-hero img {
    transform: none !important;
    transition: none !important;
}

/* متن همیشه دیده شود */
.panel-content,
.panel-hero-content {
    opacity: 1;
    transform: none;
    transition: all .35s ease;
}

    /* فقط خود باکس متن hover بگیرد */
    .panel-content:hover,
    .panel-hero-content:hover {
        transform: translateY(-18px) scale(1.05);
        box-shadow: 0 40px 80px rgba(0,0,0,.28);
    }


    /* لینک داخلش کمی زنده‌تر شود */
    .panel-content a:hover,
    .panel-hero-content a:hover {
        color: var(--c-teal);
    }

/* ===== BLOG SECTION FULL WIDTH ===== */

.blog-section {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: #fff;
    padding: 80px 0;
}

/* ===============================
   INDUSTRY SECTORS (ICON CARDS)
   =============================== */

.industry-sectors-section {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 84px 0;
    background:
        radial-gradient(1200px 220px at 50% -90px, rgba(255,255,255,.45), transparent 70%),
        linear-gradient(180deg, #ddb237 0%, #d4a017 58%, #cb990f 100%);
    border-top: 1px solid rgba(0, 28, 84, .1);
    border-bottom: 1px solid rgba(0, 28, 84, .1);
}

.industry-sectors-head {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}

.industry-sectors-hero {
    max-width: 1240px;
    margin: 0 auto 34px;
    padding: 28px 26px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .34);
    background: linear-gradient(180deg, rgba(8, 31, 68, .92) 0%, rgba(11, 40, 79, .9) 100%);
    box-shadow: 0 16px 36px rgba(8, 27, 56, .22);
}

.industry-sectors-head h1,
.industry-sectors-head h2 {
    margin: 0 0 12px;
    color: #fff;
    font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
    font-weight: 800;
}

.industry-sectors-head p {
    margin: 0;
    color: rgba(245, 248, 255, .92);
    line-height: 1.95;
    font-weight: 500;
}

.industry-sectors-tools {
    max-width: 460px;
    margin: 18px auto 0;
}

.industry-sectors-search-label {
    display: block;
    margin: 0 0 8px;
    color: rgba(241, 246, 255, .95);
    font-size: .92rem;
    font-weight: 700;
}

.industry-sectors-search {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, .36);
    border-radius: 12px;
    background: rgba(255, 255, 255, .13);
    color: #fff;
    padding: 10px 14px;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.industry-sectors-search::placeholder {
    color: rgba(229, 237, 250, .82);
}

.industry-sectors-search:focus {
    border-color: rgba(212, 160, 23, .95);
    box-shadow: 0 0 0 3px rgba(212, 160, 23, .22);
    background: rgba(255, 255, 255, .16);
}

.industry-sectors-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    max-width: 1240px;
    margin: 0 auto;
}

.industry-sector-card {
    background: #fff;
    border: 1px solid rgba(0, 28, 84, .12);
    border-radius: 14px;
    min-height: 166px;
    padding: 16px 10px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(13, 41, 66, .08);
    position: relative;
    overflow: hidden;
}

.industry-sector-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--c-mustard, #d4a017);
    border-radius: 14px 14px 0 0;
}

.industry-sector-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 28, 84, .24);
    box-shadow: 0 16px 28px rgba(13, 41, 66, .17);
    background: #fff;
}

.industry-sector-icon {
    width: 82px;
    height: 82px;
    color: #1b2f43;
    margin-bottom: 12px;
    border-radius: 50%;
    background: rgba(212, 160, 23, .14);
    border: 1px solid rgba(0, 28, 84, .08);
    padding: 10px;
}

.industry-sector-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.industry-sector-icon--image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.industry-sector-icon--fallback.is-hidden {
    display: none;
}

.industry-sector-card h3 {
    margin: 0;
    color: var(--c-navy, #001c54);
    font-size: .98rem;
    font-weight: 800;
    line-height: 1.45;
}

.industry-sector-card--more {
    background: linear-gradient(145deg, #001c54 0%, #0d3478 100%);
    border-color: rgba(0, 28, 84, .2);
    box-shadow: 0 14px 24px rgba(0, 28, 84, .28);
}

.industry-sector-card--more .industry-sector-icon,
.industry-sector-card--more h3 {
    color: #fff;
}

.industry-sector-card--more .industry-sector-icon {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .26);
}

.industry-sector-card--more:hover {
    background: linear-gradient(145deg, #05286d 0%, #174a9d 100%);
    border-color: rgba(255, 255, 255, .35);
}

.industry-sector-card--more::before {
    background: rgba(255, 255, 255, .35);
}

.industry-sector-card--toggle {
    cursor: pointer;
}

.industry-sector-extra {
    display: none;
}

.industry-sectors-grid.is-expanded .industry-sector-extra {
    display: block;
}

.industry-sector-card--toggle .industry-sector-icon--toggle-less,
.industry-sector-card--toggle .industry-sector-toggle-less {
    display: none;
}

.industry-sectors-grid.is-expanded .industry-sector-card--toggle .industry-sector-icon--toggle-more,
.industry-sectors-grid.is-expanded .industry-sector-card--toggle .industry-sector-toggle-more {
    display: none;
}

.industry-sectors-grid.is-expanded .industry-sector-card--toggle .industry-sector-icon--toggle-less,
.industry-sectors-grid.is-expanded .industry-sector-card--toggle .industry-sector-toggle-less {
    display: block;
}

.industry-sector-page {
    padding: 48px 0 28px;
}

.industry-sector-page-card {
    background: #fff;
    border: 1px solid #e3e7ec;
    border-radius: 18px;
    box-shadow: 0 16px 34px rgba(13, 41, 66, .08);
    padding: 22px;
}

.industry-sector-page-head h1 {
    margin: 0 0 10px;
    color: #0d2942;
    font-size: clamp(1.35rem, 1.05rem + 1.15vw, 2rem);
    font-weight: 800;
}

.industry-sector-page-head p {
    margin: 0;
    color: #42566b;
    line-height: 2;
}

.industry-sector-page-image-wrap {
    margin-top: 20px;
}

.industry-sector-page-image-wrap img {
    width: 100%;
    max-height: 360px;
    object-fit: contain;
    border: 1px solid #e8edf2;
    border-radius: 14px;
    background: #f8fafc;
}

.industry-sector-page-actions {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 992px) {
    .industry-sectors-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .industry-sectors-section {
        padding: 58px 0;
    }

    .industry-sectors-hero {
        padding: 22px 16px;
        border-radius: 16px;
        margin-bottom: 24px;
    }

    .industry-sectors-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .industry-sector-card {
        min-height: 148px;
        padding: 12px 8px;
    }

    .industry-sector-icon {
        width: 66px;
        height: 66px;
        margin-bottom: 10px;
    }

    .industry-sector-card h3 {
        font-size: .9rem;
    }
}

@media (max-width: 420px) {
    .industry-sectors-grid {
        grid-template-columns: 1fr;
    }
}
/* ===============================
   SECTORS FULL WIDTH BACKGROUND
   =============================== */

.sectors-section {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 90px 0;
    background: linear-gradient( 180deg, #f2f5f9 0%, #e7edf5 100% );
}


/* =========================================================
   FINAL RESPONSIVE OVERRIDES (PUT THIS AT VERY END)
   ========================================================= */

/* 0) Global safety: no horizontal scroll */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* 1) Fluid container behavior (Bootstrap-like) */
.container {
    width: min(1200px, calc(100% - 32px));
    margin-inline: auto;
}

@media (max-width: 992px) {
    .container {
        width: calc(100% - 24px);
    }
}

@media (max-width: 520px) {
    .container {
        width: calc(100% - 16px);
    }
}

/* 2) Fluid typography + spacing */
:root {
    --space-1: clamp(12px, 1.6vw, 18px);
    --space-2: clamp(18px, 2.2vw, 32px);
    --space-3: clamp(28px, 3.2vw, 64px);
    --space-4: clamp(42px, 4.4vw, 88px);
}


.section {
    margin-top: var(--space-3) !important;
}

.section-title {
    margin: var(--space-2) 0 var(--space-1) !important;
}

    .section-title h2 {
        font-size: clamp(1.15rem, 1.2vw + 0.9rem, 1.8rem);
    }

/* 3) Generic responsive images */
img, svg, iframe {
    max-width: 100%;
    height: auto;
}

/* 4) Cards grid: auto-fit everywhere */
.cards {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(12px, 1.6vw, 18px) !important;
}

/* Services on desktop: force 4 in one row */
.cards.four {
    grid-template-columns: repeat(var(--cards-desktop, 4), minmax(0, 1fr)) !important;
}

@media (max-width: 1200px) {
    .cards {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .cards.four {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    .cards {
        grid-template-columns: 1fr !important;
    }

    .cards.four {
        grid-template-columns: 1fr !important;
    }
}

/* 5) Blog grid responsive */
.blog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(14px, 2vw, 22px) !important;
}

@media (max-width: 1200px) {
    .blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    .blog-grid {
        grid-template-columns: 1fr !important;
    }
}

/* 6) Step grid responsive (and remove “stair” on small screens) */
.step-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(14px, 2vw, 22px) !important;
}

@media (max-width: 1200px) {
    .step-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    .step-grid {
        grid-template-columns: 1fr !important;
    }

    .step-card:nth-child(2),
    .step-card:nth-child(3) {
        margin-top: 0 !important;
    }
}

/* 7) Panels responsive */
.panel-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(14px, 2vw, 24px) !important;
}

@media (max-width: 992px) {
    .panel-row {
        grid-template-columns: 1fr !important;
    }

    .panel-card img {
        height: clamp(240px, 40vh, 360px) !important;
    }

    .panel-hero {
        height: clamp(280px, 48vh, 420px) !important;
    }
}

/* ==================================
   Blog Pages (List + Post Details)
   ================================== */

.blog-page {
    padding-top: 28px;
    padding-bottom: 40px;
}

.blog-page .blog-hero {
    background: linear-gradient(145deg, #0f274c 0%, #153768 100%);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 18px;
    padding: clamp(20px, 2.4vw, 32px);
    margin-bottom: 20px;
}

.blog-page .blog-hero h1 {
    margin: 0 0 8px;
    font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2rem);
    font-weight: 800;
    color: #ffffff;
}

.blog-page .blog-hero p {
    margin: 0;
    color: #dbe7ff;
    line-height: 1.85;
}

.blog-page .card {
    border: 1px solid #e8edf3;
    border-radius: 14px;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}

.blog-page .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(22, 50, 79, .10);
    border-color: #dbe6f3;
}

.blog-page .card .card-img-top {
    width: 100%;
    aspect-ratio: 16 / 10;
    height: auto;
    object-fit: contain;
    background: #f4f7fb;
    padding: 8px;
}

.blog-page .card .card-title {
    color: #1d2c3f;
    line-height: 1.9;
    font-weight: 700;
}

.blog-page .card .card-text {
    line-height: 1.9;
}

.blog-post-page {
    padding-top: 24px;
    padding-bottom: 48px;
}

.blog-post-page .breadcrumb {
    margin-bottom: 12px;
}

.blog-post-card {
    background: #fff;
    border: 1px solid #e9edf2;
    border-radius: 18px;
    padding: clamp(16px, 2.2vw, 28px);
    box-shadow: 0 8px 24px rgba(21, 34, 53, .05);
}

.blog-post-header {
    background: linear-gradient(145deg, #0f274c 0%, #153768 100%);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    padding: clamp(14px, 1.8vw, 22px);
    margin-bottom: 16px;
}

.blog-post-header h1 {
    margin: 0 0 10px;
    font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.8;
}

.blog-post-header p {
    margin: 0;
    color: #d9e6ff !important;
    line-height: 1.9;
}

.blog-post-cover {
    margin-bottom: 20px;
}

.blog-post-cover img {
    width: 100%;
    max-height: 520px;
    object-fit: contain;
    border-radius: 14px;
    border: 1px solid #e8edf2;
    background: #f3f6fa;
}

.blog-post-body .content {
    color: #1f3044;
    font-size: 1.03rem;
    line-height: 2.05;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    overflow-wrap: anywhere;
}

.blog-post-body .content h1,
.blog-post-body .content h2,
.blog-post-body .content h3,
.blog-post-body .content h4,
.blog-post-body .content h5,
.blog-post-body .content h6 {
    color: #17314e;
    margin-top: 1.25em;
    margin-bottom: .6em;
    line-height: 1.8;
    font-weight: 800;
}

.blog-post-body .content p {
    margin: 0 0 1em;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.blog-post-body .content ul,
.blog-post-body .content ol {
    margin: 0 0 1em;
    padding-inline-start: 1.5rem;
}

.blog-post-body .content li {
    margin-bottom: .45em;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.blog-post-body .content a {
    color: #0f6ecf;
    text-decoration: none;
}

.blog-post-body .content a:hover {
    text-decoration: underline;
}

.blog-post-body .content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 14px auto;
    border-radius: 12px;
    border: 1px solid #e8edf2;
    background: #f7f9fc;
}

.blog-post-body .content figure {
    margin: 1rem 0;
}

.blog-post-body .content blockquote {
    margin: 1.1rem 0;
    padding: .65rem .95rem;
    border-right: 4px solid #d8e7fb;
    background: #f8fbff;
    color: #3f5165;
    border-radius: 10px;
}

.blog-post-body .content pre,
.blog-post-body .content code {
    direction: ltr;
    unicode-bidi: embed;
}

.blog-post-body .content pre {
    background: #0f172a;
    color: #d9e2ef;
    border-radius: 10px;
    padding: 12px 14px;
    overflow-x: auto;
}

.blog-post-body .content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

.blog-post-body .content th,
.blog-post-body .content td {
    border: 1px solid #e2e8f1;
    padding: .55rem .7rem;
}

.blog-post-footer {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #edf1f6;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 768px) {
    .blog-page {
        padding-top: 16px;
    }

    .blog-page .card .card-img-top {
        aspect-ratio: 16 / 10;
        height: auto;
    }

    .blog-post-card {
        border-radius: 14px;
    }
}

/* 8) Header/nav: prevent overflow + nicer spacing */
.header-inner {
    gap: clamp(10px, 1.4vw, 16px) !important;
}

.nav a, .site-nav a {
    padding: 10px clamp(8px, 1.2vw, 14px) !important;
}

/* 9) Mega menu: responsive grid handled in the main nav block. */

/* 10) HERO/ORKIN: height fluid */
.hero-full {
    height: clamp(300px, 52vh, 520px) !important;
    min-height: 0 !important;
}

.orkin-hero {
    height: calc(95vh - 100px) !important;
}

@media (max-width: 992px) {
    .orkin-hero {
        height: clamp(260px, 42vh, 420px) !important;
    }
}

/* 11) Footer: responsive + map “big column” (NOT full row) */
.site-footer {
    margin-top: var(--space-4) !important;
    padding-top: var(--space-3) !important;
}

    .site-footer .footer-grid {
        grid-template-columns: 1fr 1fr 1.7fr !important; /* ستون نقشه بزرگتر */
        gap: clamp(10px, 1.6vw, 24px) !important;
        padding-inline: clamp(10px, 2vw, 24px) !important;
    }

    .site-footer .footer-col {
        min-width: 0 !important;
    }

    

/* IMPORTANT: اگر قبلاً map را full-row کرده بودی، اینو خنثی کن */
.footer-col-map {
    grid-column: auto !important;
}

/* Footer text sizing on small */
@media (max-width: 768px) {
    .site-footer .footer-title {
        font-size: 13px !important;
    }

    .site-footer .footer-link, .site-footer .muted {
        font-size: 12px !important;
    }

    .site-footer .map-embed {
        height: 260px !important;
    }
}

/* =========================
   MOBILE NAV (HAMBURGER)
   ========================= */

/* =========================
   TOPBAR RESPONSIVE
   ========================= */

.topbar {
    font-size: 13px;
}

.topbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.topbar a,
.topbar span {
    white-space: normal;
}


/* =========================
   FULL RESPONSIVE FOOTER
   ========================= */

.site-footer .footer-grid {
    grid-template-columns: 1fr 1fr 1.7fr;
}

@media (max-width: 992px) {
    .site-footer .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-col-map {
        grid-column: 1 / -1;
    }

    .map-embed {
        height: 300px !important;
    }
}

@media (max-width: 600px) {
    .site-footer .footer-grid {
        grid-template-columns: 1fr;
    }

    .map-embed {
        height: 260px !important;
    }

    .footer-col {
        align-items: flex-start;
    }
}

/* ===== FORCE HAMBURGER VISIBLE ON MOBILE ===== */
.nav-toggle {
    display: none !important;
}

@media (max-width: 992px) {
    .nav-toggle {
        display: flex !important;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        border: 1px solid rgba(0,0,0,.1);
        background: #fff;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 4px;
        z-index: 10001;
    }

    .nav-toggle span {
        width: 20px;
        height: 2px;
        background: #001c54;
        display: block;
        transition: .3s;
    }

    .nav-toggle.is-open span:nth-child(1) {
        transform: rotate(45deg) translateY(6px);
    }

    .nav-toggle.is-open span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle.is-open span:nth-child(3) {
        transform: rotate(-45deg) translateY(-6px);
    }

    #nav a,
    #nav .nav-link {
        display: block;
        width: 100%;
        padding: 12px 14px;
        background: #f3f5f9;
        border-radius: 14px;
        font-weight: 700;
        color: #001c54;
    }

    .brand.brand-float {
        height: 50px !important;
        width: 160px !important;
    }
}



/* =============================
   HAMBURGER 3 LINES
   ============================= */

.nav-toggle {
    display: none;
    position: relative;
    width: 44px;
    height: 44px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 12px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10001;
}

.nav-toggle span {
    position: absolute;
    width: 22px;
    height: 2px;
    background: #001c54;
    border-radius: 2px;
    transition: .3s ease;
}

.nav-toggle span:nth-child(1) {
    top: 14px;
}

.nav-toggle span:nth-child(2) {
    top: 21px;
}

.nav-toggle span:nth-child(3) {
    top: 28px;
}

.nav-toggle.is-open span:nth-child(1) {
    top: 21px;
    transform: rotate(45deg);
}

.nav-toggle.is-open span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.is-open span:nth-child(3) {
    top: 21px;
    transform: rotate(-45deg);
}

@media (max-width: 992px) {
    .nav-toggle {
        display: flex;
    }
}

/* ===========================
   NEW Mobile Drawer Menu (mnav)
   =========================== */

.mnav-toggle {
    display: none;
}

.mnav-burger {
    width: 28px;
    height: 2px;
    display: block;
    position: relative;
    background: currentColor;
}

    .mnav-burger::before,
    .mnav-burger::after {
        content: "";
        position: absolute;
        left: 0;
        width: 28px;
        height: 2px;
        background: currentColor;
        transition: transform .2s ease, top .2s ease, opacity .2s ease;
    }

    .mnav-burger::before {
        top: -8px;
    }

    .mnav-burger::after {
        top: 8px;
    }

.mnav-toggle.is-open .mnav-burger {
    background: transparent;
}

    .mnav-toggle.is-open .mnav-burger::before {
        top: 0;
        transform: rotate(45deg);
    }

    .mnav-toggle.is-open .mnav-burger::after {
        top: 0;
        transform: rotate(-45deg);
    }

.mnav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 5000;
}

.mnav {
    position: fixed;
    top: 0;
    bottom: 0;
    height: 100dvh;
    width: min(92vw, 380px);
    background: #fff;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 86px 14px 18px;
    z-index: 5001;
    transform: translateX(-110%);
    transition: transform .25s ease;
    display: block;
    box-shadow: 0 16px 38px rgba(0,0,0,.20);
}

/* RTL drawer from right */
html[dir="rtl"] .mnav {
    right: 0;
    left: auto;
    transform: translateX(110%);
}

html[dir="ltr"] .mnav {
    left: 0;
    right: auto;
    transform: translateX(-110%);
}

body.mnav-open .mnav {
    transform: translateX(0);
}

body.mnav-open .mnav-backdrop {
    opacity: 1;
    pointer-events: auto;
}

body.mnav-open {
    overflow: hidden;
}

@media (max-width: 1200px) {
    .mnav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        width: 44px;
        height: 44px;
        border: 0;
        background: transparent;
        border-radius: 12px;
    }

    /* ǐ� ���� ���� ���� �Ә�ǁ �� ������ ���� ��� */
    /* #nav{ display:none !important; } */
}

/* Mobile menu structure */
.mnav .mnav-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.mnav .mnav-item > a,
.mnav .mnav-item > button.mnav-acc {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px;
    border-radius: 12px;
    border: 1px solid rgba(15,23,42,.10);
    background: #fff;
    text-decoration: none;
    color: inherit;
    font-weight: 700;
}

.mnav .mnav-item > button.mnav-acc {
    cursor: pointer;
}

.mnav .mnav-chevron {
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .2s ease;
    opacity: .75;
}

/* RTL chevron flip */
html[dir="rtl"] .mnav .mnav-chevron {
    transform: rotate(135deg);
}

.mnav .mnav-sub {
    display: none;
    padding: 8px 10px 10px;
    margin: 6px 0 0;
    border-radius: 12px;
    border: 1px solid rgba(15,23,42,.08);
    background: rgba(15,23,42,.02);
}

    .mnav .mnav-sub a {
        display: block;
        padding: 10px 10px;
        border-radius: 10px;
        text-decoration: none;
        color: inherit;
    }

.mnav .mnav-item.is-open .mnav-sub {
    display: block;
}

.mnav .mnav-item.is-open .mnav-chevron {
    transform: rotate(45deg);
}

html[dir="rtl"] .mnav .mnav-item.is-open .mnav-chevron {
    transform: rotate(225deg);
}

/* Close button inside mobile drawer */
.mnav-close {
    position: absolute;
    top: 18px;
    inset-inline-end: 18px; /* RTL safe */
    width: 42px;
    height: 42px;
    border: 0;
    background: rgba(15,23,42,.06);
    border-radius: 12px;
    font-size: 28px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

    .mnav-close:hover {
        background: rgba(15,23,42,.12);
    }
@media (max-width: 1200px) {
    .brand,
    .brand-float {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
    }
}

@media (max-width: 1200px) and (min-width: 768px) {
    :root {
        --brand-float-raise: 4px; /* ����� 34px ��� */
        --brand-float-w: 190px;
        --brand-float-h: 60px;
    }
}

/* =====================================================
   FORCE Language Switch in Mobile Topbar
   ===================================================== */
/* ? FIX: Show FA / EN in mobile topbar */

/* =========================
   MOBILE TOPBAR � CUSTOM LAYOUT
   ========================= */

/* Legacy desktop mega experiments removed.
   Active desktop mega behavior is centralized in the final locks at the end of this file. */

/* =========================
   MOBILE: mustard hover for menu + mustard close button
   ========================= */
@media (max-width: 992px) {

    :root {
        --c-mustard: #d4a017;
    }
    /* ����� */

    /* ��� ������� ��� (�� ������ ���� ����) */
    #nav a,
    #nav .nav-link {
        transition: background-color .2s ease, color .2s ease, border-color .2s ease;
    }

        /* hover + focus (���� ������) + active (���� ��� ������) */
        #nav a:hover,
        #nav .nav-link:hover,
        #nav a:focus-visible,
        #nav .nav-link:focus-visible,
        #nav a:active,
        #nav .nav-link:active {
            background: var(--c-mustard) !important;
            color: #0b1220 !important;
            border-color: rgba(0,0,0,.10) !important;
        }

    /* ǐ� �������� ���� .mega �� ��� ���� */
    .mega a:hover,
    .mega a:active,
    .mega a:focus-visible {
        background: var(--c-mustard) !important;
        color: #0b1220 !important;
    }

    /* Ϙ�� * (close) ���� ���� ������ (mnav-close) */
    .mnav-close {
        background: var(--c-mustard) !important;
        color: #0b1220 !important;
    }

        .mnav-close:hover {
            filter: brightness(.95);
        }
}

/* =========================
   MOBILE DRAWER SUBMENU COLORS
   ========================= */
:root {
    --c-mustard: #d4a017;
}
/* ����� */

.mnav .mnav-sub a {
    transition: background-color .2s ease, color .2s ease;
    border-radius: 10px; /* ��� ���� 10px ���� */
}

    /* hover / active / focus */
    .mnav .mnav-sub a:hover,
    .mnav .mnav-sub a:active,
    .mnav .mnav-sub a:focus-visible {
        background: var(--c-mustard) !important;
        color: #0b1220 !important;
    }
.mnav .mnav-item.is-open > button.mnav-acc {
    background: var(--c-mustard) !important;
    color: #0b1220 !important;
    border-color: rgba(0,0,0,.12) !important;
}

/* =========================
   TOPBAR: Search + Login as mustard buttons
   (PUT THIS AT VERY END)
   ========================= */
:root {
    --c-mustard: #d4a017;
    --c-mustard-text: #0b1220;
}

/* ���ј: �� a �� button */
.topbar .topbar-search,
.topbar .topbar-login,
.topbar a.topbar-search,
.topbar a.topbar-login,
.topbar button.topbar-search,
.topbar button.topbar-login {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    background: var(--c-mustard) !important;
    color: var(--c-mustard-text) !important;
    border: 1px solid rgba(0,0,0,.12) !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    line-height: 1.1;
    box-shadow: 0 8px 18px rgba(0,0,0,.10);
    transition: filter .2s ease, transform .2s ease, box-shadow .2s ease;
}

    /* hover/focus/active */
    .topbar .topbar-search:hover,
    .topbar .topbar-login:hover,
    .topbar a.topbar-search:hover,
    .topbar a.topbar-login:hover,
    .topbar button.topbar-search:hover,
    .topbar button.topbar-login:hover {
        filter: brightness(.96);
        transform: translateY(-1px);
        box-shadow: 0 12px 26px rgba(0,0,0,.14);
    }

    .topbar .topbar-search:active,
    .topbar .topbar-login:active,
    .topbar a.topbar-search:active,
    .topbar a.topbar-login:active,
    .topbar button.topbar-search:active,
    .topbar button.topbar-login:active {
        transform: translateY(0);
        filter: brightness(.93);
    }

    .topbar .topbar-search:focus-visible,
    .topbar .topbar-login:focus-visible,
    .topbar a.topbar-search:focus-visible,
    .topbar a.topbar-login:focus-visible,
    .topbar button.topbar-search:focus-visible,
    .topbar button.topbar-login:focus-visible {
        outline: 3px solid rgba(212,160,23,.35);
        outline-offset: 2px;
    }

    /* ����� ������� */
    .topbar .topbar-search svg,
    .topbar .topbar-login svg,
    .topbar .topbar-search i,
    .topbar .topbar-login i {
        color: var(--c-mustard-text) !important;
        fill: currentColor !important;
        stroke: currentColor !important;
    }

/* ������: ��� ��ڝ������ */
.orkin-hero__title {
    color: #001c54 !important;
}
/* Hide hero box on mobile + tablet */
@media (max-width: 992px) {
    .orkin-hero__box {
        display: none !important;
    }
}

:root {
    --topbar-h: 44px;
}

.topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    z-index: 9999 !important;
    background: #fff;
    border-bottom: 1px solid rgba(15,23,42,.08);
}

/* ��� fixed �� ����� ���� ���� ���� ���� �� ���� ����� ��� */
body {
    padding-top: var(--topbar-h);
}

.topbar {
    background: #203c64 !important;
    color: #fff;
}

    

.section-head {
    position: relative;
}

    .section-head h2 {
        display: inline-block;
        padding: 7px 16px;
        border-radius: 10px;
        font-weight: 900;
        position: relative;
        top: -6px;
    }
/* =========================
   FIX: Mobile topbar overlap
   ========================= */

/* 1) Topbar stays on top but DOES NOT overlap header */
.topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 10050 !important;
}

/* 2) Header sticks UNDER topbar (optional but recommended) */
:root {
    --topbar-h: 48px; /* ǐ� topbar ������� ���� ����� �� */
}

.site-header,
.header {
    position: sticky !important;
    top: var(--topbar-h) !important;
    z-index: 10040 !important;
}

/* 3) Safety: if any ancestor blocks sticky */
.site, .site-header, header {
    overflow: visible !important;
}

/* =========================
   FIX: remove top gap
   ========================= */
html, body {
    margin: 0 !important;
    padding: 0 !important;
}

/* ONLY TOPBAR STICKY */
:root {
    --topbar-h: 64px; /* ǐ� ������ topbar� ��� ���� ��� ��� �� ����� �� */
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 9999;
}

/* ��� topbar ���� ���� ������ ����� ��� ���� */
.site-header {
    padding-top: var(--topbar-h);
}

/* =========================
   ONLY TOPBAR FIXED (FINAL)
   ========================= */

:root {
    --topbar-h: 64px; /* ǐ� topbar �������/������� ���� ����� �� */
}

/* ��� topbar ��� */
.topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
}

/* ��� � ��� ��� ����� */
.site-header,
.header {
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
}

/* ����� ���� ���� ����� ��� topbar ��� */
body {
    padding-top: var(--topbar-h) !important;
}

/* �� padding ������� �� ���� ����� �� ���� ���� �� ����� */
.site-header {
    padding-top: 0 !important;
}

/* =========================
   MOBILE: push header/logo under fixed topbar
   ========================= */

/* ������ ����� topbar �� ������ ������ */

/* ���� �� ǐ� �� ���� �ϡ ���� �� �흘�� */

/* =========================
   FINAL FIX: mega menu always above hero/slider
   PUT THIS AT THE VERY END
   ========================= */

/* ������� �� ����� �� ��������� ���� ����� */
.hero-full,
.orkin-hero {
    position: relative !important;
    z-index: 0 !important;
}

/* ��� �� ���� ��� � ����� ��� � ���� ���� */
.site-header,
.header,
.header-inner {
    position: relative !important;
    z-index: 60000 !important;
    isolation: isolate; /* ���� ����� ���� ��� ����� stacking context */
}

/* ��� dropdown/mega ������ �� ��� */
.nav-item.has-mega,
.mega {
    position: relative;
    z-index: 70000 !important;
}

/* �� ��� ����� */
.mega {
    position: absolute !important;
    z-index: 80000 !important;
}

/* ǐ� ���� �� overflow ��� �� ������ ��� ������ �흘�� */
.site-header,
.header,
.header-inner,
.nav {
    overflow: visible !important;
}

/* Step cards scroll-reveal (lazy animation) */
.step-card.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
}

    .step-card.reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
        transition-delay: calc(var(--i) * .12s);
    }

/* ���� ��������� �� Reduce Motion ���� */
@media (prefers-reduced-motion: reduce) {
    .step-card.reveal,
    .step-card.reveal.is-visible {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* Desktop stair layout but in ONE ROW */
@media (min-width: 992px) {

    .step-grid {
        grid-template-columns: repeat(3, 1fr);
        align-items: end; /* ���� ���� ?? */
    }

    .step-card:nth-child(1) {
        margin-top: 0;
    }

    .step-card:nth-child(2) {
        margin-top: 40px;
    }

    .step-card:nth-child(3) {
        margin-top: 80px;
    }
}

.service-home-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.service-home-card-link:hover,
.service-home-card-link:focus,
.service-home-card-link:visited {
    text-decoration: none;
    color: inherit;
}
/* Mustard section button */
.section-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #d4a017;
    color: #0b1220;
    min-height: 46px;
    padding: 12px 26px;
    border-radius: 16px;
    font-weight: 900;
    font-size: .96rem;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(0,0,0,.15);
    transition: all .25s ease;
}

.section-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px rgba(0,0,0,.22);
    filter: brightness(.95);
}

.section-btn:active {
    transform: translateY(0);
}

.section-btn--navy {
    background: var(--c-navy);
    color: #fff;
}

.section-head .section-btn {
    min-width: 160px;
}

.section-btn--navy:hover {
    background: #0a2c6e;
    color: #fff;
}

.section-btn--white {
    background: #fff;
    color: var(--c-navy);
    border: 1px solid rgba(11, 31, 64, .14);
    box-shadow: 0 10px 24px rgba(11, 31, 64, .12);
}

.section-btn--white:hover {
    background: #f8faff;
    color: #0a2c6e;
}

.home-video-section {
    --video-min-h: 380px;
    --video-radius: 18px;
    background: linear-gradient(145deg, #0f274c 0%, #12325f 55%, #173e73 100%);
    border-radius: 24px;
    padding: 1.1rem;
    box-shadow: 0 20px 44px rgba(7, 21, 44, .24);
}

.home-video-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 1rem;
    align-items: stretch;
}

.home-video-media video {
    width: 100%;
    height: 100%;
    min-height: var(--video-min-h);
    border-radius: var(--video-radius);
    border: 1px solid rgba(255, 255, 255, .16);
    background: #000;
    object-fit: cover;
}

.home-video-content {
    background: rgba(255, 255, 255, .94);
    border-radius: var(--video-radius);
    padding: 1.1rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .9rem;
    min-height: var(--video-min-h);
}

.home-video-section--reverse .home-video-media {
    order: 2;
}

.home-video-section--reverse .home-video-content {
    order: 1;
}

.home-video-section--light {
    background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
    border: 1px solid #dbe7f8;
    box-shadow: 0 14px 30px rgba(18, 44, 88, .09);
}

.home-video-section--light .home-video-content {
    background: #fff;
}

.home-video-content h2 {
    margin: 0;
    color: #0f2f60;
    font-weight: 900;
}

.home-video-content p {
    margin: 0;
    color: #2f4362;
    line-height: 1.85;
}

@media (max-width: 991.98px) {
    .home-video-grid {
        grid-template-columns: 1fr;
    }
    .home-video-media video,
    .home-video-content {
        min-height: min(300px, var(--video-min-h));
    }
}

/* =========================
   CLIENTS SLIDER
   ========================= */

.client-slider {
    position: relative;
    width: 100%;
    padding: 26px 0;
}

.client-viewport {
    overflow: hidden;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 56px; /* �� ���� ��ԝ�� */
    box-sizing: border-box;
}

.client-track {
    display: flex;
    align-items: center;
    gap: 26px;
    will-change: transform;
    transform: translateX(0);
}

.client-item {
    flex: 0 0 auto;
    width: 200px; /* ��� ���� */
    height: 110px; /* ������ ���� */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 10px 22px rgba(0,0,0,.06);
    text-decoration: none;
}

    .client-item img {
        max-width: 85%;
        max-height: 85%;
        object-fit: contain; /* �� ���� */
        display: block;
        filter: none; /* ���� � ���� ����� */
        opacity: 1;
    }

.client-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(15,23,42,.12);
    background: #fff;
    box-shadow: 0 10px 22px rgba(0,0,0,.10);
    cursor: pointer;
    z-index: 5;
    font-size: 28px;
    line-height: 1;
    display: grid;
    place-items: center;
    user-select: none;
}

    .client-arrow.prev {
        left: 10px;
    }

    .client-arrow.next {
        right: 10px;
    }

    .client-arrow:hover {
        filter: brightness(.97);
    }

    .client-arrow:active {
        transform: translateY(-50%) scale(.98);
    }

/* ������: ���ʝ�� ��� ��ڝ�� */
@media (max-width: 768px) {
    .client-viewport {
        padding: 10px 48px;
    }

    .client-item {
        width: 160px;
        height: 92px;
    }
}
/* Hover effect on client logos */
.client-item {
    transition: transform .3s ease, box-shadow .3s ease;
}

    .client-item:hover {
        transform: scale(1.12); /* ��� ��ѐ��� */
        z-index: 10;
        box-shadow: 0 18px 40px rgba(0,0,0,.18);
    }


/* =========================
   MOBILE: Footer centered + justified
   ========================= */
@media (max-width: 768px) {

    .site-footer .footer-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: justify !important;   /* ��э�� */
        gap: 22px !important;
    }

    .site-footer .footer-col {
        width: 100% !important;
        max-width: 420px; /* �� justify ����� ���� ����� */
        margin: 0 auto;
    }

    

    .site-footer .footer-col ul {
        padding: 0;
    }

    .site-footer .footer-col ul li {
        text-align: justify;
        text-align-last: center;
    }
}

.footer-contact {
    list-style: none;
    padding: 0;
    margin-top: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    color: #6f7f88;
    font-size: 0.95rem;
}

    .footer-contact li {
        display: flex;
        align-items: center;
        gap: 0.6rem;
    }

.footer-icon {
    width: 18px;
    height: 18px;
    fill: currentColor; /* ?? ���� ��� */
    flex-shrink: 0;
}

.footer-contact a {
    color: inherit;
    text-decoration: none;
}

    .footer-contact a:hover {
        text-decoration: underline;
    }

.footer-contact {
    direction: inherit;
    unicode-bidi: plaintext;
}

.phone-number {
    direction: ltr;
    unicode-bidi: embed;
    font-feature-settings: "tnum";
    white-space: nowrap;
}

/* Ș������ ����� */
.mustard-bg {
    background-color: #d6a300; /* ����� ������� */
    padding: 56px 24px;
}


    

/* ���� ���ʝ�� */
.services-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

/* ���� */
.service-card {
    background: #ffffff;
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: all 0.25s ease;
    border: 1px solid rgba(0,0,0,0.08);
}

    .service-card:hover {
        box-shadow: 0 10px 24px rgba(0,0,0,0.15);
        transform: translateY(-3px);
    }

/* ����� */
.service-image {
    padding: 14px;
}

    .service-image img {
        width: 100%;
        height: 150px;
        object-fit: cover;
        border-radius: 2px;
    }

/* ����� ���� */
.service-label {
    padding: 14px 12px 18px;
    font-size: 14px;
    font-weight: 700;
    color: #004d40;
    text-align: center;
}

.pest-highlights-section {
    padding: 34px 0 18px;
    position: relative;
}

.services-wrapper--circles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px 16px;
    align-items: start;
    justify-items: center;
}

.service-card--circle {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(32,60,100,.08);
    border-radius: 24px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
    overflow: visible;
    width: 100%;
    min-width: 0;
    padding: 18px 10px 16px;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background-color .28s ease;
}

.service-card--circle:hover {
    transform: translateY(-8px);
    border-color: #d4a017;
    box-shadow: 0 18px 36px rgba(15, 23, 42, .12);
}

.service-card--circle .service-image {
    padding: 0;
    display: flex;
    justify-content: center;
    transition: transform .3s ease;
}

.service-card--circle .service-image img {
    width: min(145px, 100%);
    aspect-ratio: 1 / 1;
    height: auto;
    border-radius: 50%;
    object-fit: cover;
    border: 6px solid #fff;
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
    background: #fff;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.service-card--circle .service-label {
    padding: 14px 8px 0;
    color: #203c64;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.7;
    transition: color .28s ease;
}

.service-card--circle:hover .service-image {
    transform: scale(1.02);
}

.service-card--circle:hover .service-image img {
    transform: scale(1.06);
    border-color: #f3d46a;
    box-shadow: 0 16px 30px rgba(212,160,23,.25);
}

.service-card--circle:hover .service-label {
    color: #0f172a;
}

.services-grid.mustard-bg .services-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 68px;
    padding: 14px 0;
    background: transparent;
    color: #0b1220;
    border-radius: 0;
    box-shadow: none;
    letter-spacing: -.2px;
}

.services-grid.mustard-bg .services-title::before,
.services-grid.mustard-bg .services-title::after {
    content: none;
}

.pest-library-head {
    margin-bottom: 0;
}

.pest-library-head h2 {
    top: 0;
    position: relative;
    margin: 0;
}

@media (max-width: 1200px) {
    .services-wrapper--circles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .services-wrapper--circles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 14px;
    }

    .service-card--circle .service-image img {
        width: 130px;
        height: 130px;
    }
}
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Ԙ��� container � ������� ����� */
.services-grid.mustard-bg {
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
    background-color: #d6a300;
    min-height: 84px;
    padding: 0;
}

/* Put the yellow band immediately after previous section */
.services-grid.mustard-bg.section {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.services-grid.mustard-bg > .container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.services-grid.mustard-bg .section-head.pest-library-head {
    margin-top: 0 !important;
}

.services-grid.mustard-bg .services-title {
    margin-top: 0 !important;
}


/* ����� */
.services-title {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 32px;
    color: #1e2a32;
}

    .services-title.center {
        text-align: center;
    }

/* ������ ����� �������� */
.services-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px; /* ����� ����� ��� ���� ����� */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

/* =========================
   IRRES footbar
   ========================= */
.site-footbar {
    background: #fff;
    border-top: 1px solid rgba(15,23,42,.10);
    font-size: 14px;
    color: rgba(15,23,42,.70);
}

.site-footbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    position: relative;
    background: #203c64;
    color:white;
}

.site-footbar
 {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    justify-content: center;
    width: 100%;
    text-align: center;
}

.footer-company-link {
    color: #d6a300 !important;
}

.site-footbar__brand {
    font-weight: 800;
    color: rgba(15,23,42,.85);
}

.to-top {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid rgba(15,23,42,.12);
    background: #fff;
    box-shadow: 0 10px 22px rgba(0,0,0,.08);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: all .2s ease;
    font-size: 18px;
    line-height: 1;
    display: grid;
    place-items: center;
}

    

    

/* Mobile */
@media (max-width:768px) {
    .site-footbar__inner {
        flex-direction: column;
        align-items: center;
        text-align: center;

    }

    .site-footbar
     {
        white-space: normal;
        justify-content: center;
        flex-wrap: wrap;
    }

    .to-top {
        position: static;
        transform: none;
        opacity: 1;
        pointer-events: auto;
        margin-top: 8px;
    }

        .to-top:hover {
            transform: scale(1.03);
        }
}

/* =========================
   Bottom copyright bar fix
   ========================= */

.site-footbar,
.footer-bottom,
.footer-copy {
    padding: 10px 0; /* ��� ���� ����� */
    background: #203c64; /* ��� �� ���� */
    color: #fff; /* ��� ���� */
    border-top: none; /* ǐ� �� �ǘ���� ���� ��� */
}

    /* ǐ� ��� ����� ��� */
    .site-footbar a,
    .footer-bottom a,
    .footer-copy a {
        color: #fff;
        font-weight: 600;
    }

        .site-footbar a:hover,
        .footer-bottom a:hover,
        .footer-copy a:hover {
            opacity: .85;
        }

.footer-bottom {
    background: #203c64;
    color: #fff;
}
.site-footbar__inner {
    justify-content: center !important;
}

/* =========================================================
   FOOTER FINAL LAYOUT (2 MAIN COLS)
   Right = Map (single)
   Left  = 2 inner cols (About/Contact + Services)
   MUST BE LAST
   ========================================================= */

.site-footer .footer-grid {
    display: grid !important;
    grid-template-columns: 1.35fr 1fr !important; /* چپ بزرگ‌تر، راست نقشه */
    gap: 32px !important;
    align-items: start !important;
    direction: ltr !important; /* ستون‌بندی ثابت */
}

/* ستون چپ (۲ ستون داخلی) */
.site-footer .footer-col-left {
    grid-column: 1 !important;
}

/* ستون راست (نقشه یکپارچه) */
.site-footer .footer-col-map {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

/* خنثی کردن قانون‌های قبلی که map رو تمام‌ردیف می‌کردند */
.site-footer .footer-col-map {
    grid-column: 2 !important;
}

/* گرید داخلی ستون چپ */
.site-footer .footer-left-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr; /* درباره‌ما کمی پهن‌تر از خدمات */
    gap: 28px;
    width: 100%;
}

/* فارسی داخل ستون‌ها RTL بماند */
html[dir="rtl"] .site-footer .footer-col-left,
html[dir="rtl"] .site-footer .footer-col-map {
    direction: rtl;
    text-align: right;
}

/* نقشه بزرگ‌تر */
.site-footer .map-embed {
    width: 100%;
    height: 420px !important;
    border: 0;
    display: block;
}

/* ریسپانسیو: موبایل تک ستونه */
@media (max-width: 992px) {
    .site-footer .footer-grid {
        grid-template-columns: 1fr !important;
    }

    .site-footer .footer-col-left {
        grid-column: 1 !important;
    }

    .site-footer .footer-col-map {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    .site-footer .footer-left-grid {
        grid-template-columns: 1fr !important; /* داخل ستون چپ هم تک‌ستونه */
    }

    .site-footer .map-embed {
        height: 300px !important;
    }
}

/* =========================
   MAP FULL HEIGHT COLUMN
   ========================= */

.site-footer .footer-grid {
    align-items: stretch !important; /* ستون‌ها هم‌قد شوند */
}

.site-footer .footer-col-map {
    display: flex;
    flex-direction: column;
}

.site-footer .footer-map {
    flex: 1; /* تمام ارتفاع ستون را بگیرد */
    display: flex;
}

.site-footer .map-embed {
    width: 100%;
    height: 100% !important; /* ارتفاع کامل */
    min-height: 100%;
    border: 0;
}

/* =========================
   BIGGER MAP COLUMN
   ========================= */

.site-footer .footer-grid {
    grid-template-columns: 1fr 1.6fr !important;
    /* ستون نقشه بزرگ‌تر */
}

/* بزرگ کردن خود نقشه */
.site-footer .map-embed {
    width: 1000px !important;
    height: 400px !important; /* اینو می‌تونی 650 یا 700 هم بذاری */

    border-radius: 18px;
}
@media (max-width: 992px) {
    .site-footer .map-embed {
        height: 380px !important;
    }
}

/* ===================================
   MOBILE: footer stacked (one per row)
   =================================== */
@media (max-width: 768px) {

    .site-footer .footer-grid {
        grid-template-columns: 1fr !important; /* هر ستون یک سطر */
    }

    .site-footer .footer-col {
        width: 100%;
    }

    .site-footer .map-embed {
        height: 300px !important; /* کنترل ارتفاع نقشه */
    }
}
/* ===================================
   MOBILE: remove right spacing only
   =================================== */
@media (max-width: 768px) {

    .site-footer,
    .site-footer .container,
    .site-footer .footer-grid {
        padding-right: 0 !important;
        margin-right: 0 !important;
    }
}
@media (max-width: 768px) {
    html, body {
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }
}

/* ===============================
   FIXED SCROLL TO TOP (BOTTOM)
   =============================== */

.to-top {
    position: fixed;
    bottom: 30px; /* پایین صفحه */
    right: 30px; /* گوشه راست */
    top: auto !important; /* مهم: وسطی رو حذف می‌کنه */
    transform: none !important; /* اگر translate داشتی حذف می‌کنه */

    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #ffffff;
    color: #203c64;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(0,0,0,.18);
    cursor: pointer;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: .25s ease;
}

    

/* ===============================
   SCROLL TO TOP - GOLD VERSION
   =============================== */

.to-top {
    position: fixed;
    right: 30px;
    width: 50px;
    height: 50px;
    bottom:40px;
    border-radius: 50%;
    background: #d4a017; /* خردلی */
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:40px; /* بزرگ‌تر شدن آیکون */
    font-weight:500;
    line-height: 1; /* جلوگیری از بالا/پایین رفتن */

    border: none;
    box-shadow: 0 10px 25px rgba(0,0,0,.25);
    cursor: pointer;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: .25s ease;
}

    

    .to-top:hover {
        transform: translateY(-4px);
    }


    .to-top svg {
        width: 50px;
        height: 22px;
        top:50px;
    }

.to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    background-color: #d4a017; /* خردلی */
    color: #fff;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0,0,0,.15);
}

.to-top__icon {
    width: 22px;
    height: 22px;
    display: block;
}

/* ============================= */
/* TO TOP BUTTON — FINAL FIX */
/* ============================= */

.to-top {
    position: fixed;
    inset-block-end: 24px;
    inset-inline-end: 24px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: #d4a017;
    color: #fff;
    cursor: pointer;
    font-size: 0; /* kill inline gaps */
    line-height: 0;
    box-shadow: 0 8px 20px rgba(0,0,0,.15);
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease;
}

    .to-top.is-show {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

/* ✅ SVG ایزوله کامل */
.to-top__icon {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
    overflow: visible !important;
}

    .to-top__icon path {
        stroke: currentColor !important;
    }


/* ============================= */
/* FOOTER – TABLET FIX ✅ */
/* ============================= */
@media (min-width: 768px) and (max-width: 1199px) {

    .site-footer .footer-grid {
        grid-template-columns: 1fr 1fr !important;
        grid-template-areas:
            "brand services"
            "map map";
        gap: 20px;
        padding-inline: 20px;
    }

    .footer-col-brand {
        grid-area: brand;
    }

    .footer-col-services {
        grid-area: services;
    }

    .footer-col-map {
        grid-area: map;
    }

    .map-embed {
        height: 260px;
    }
}
/* ============================= */
/* FOOTER – MOBILE FIX ✅ */
/* ============================= */
.topbar .topbar-lang-mobile {
    display: none !important;
}

@media (max-width: 767px) {

    .site-footer .footer-grid {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "brand"
            "services"
            "map";
        gap: 16px;
        padding-inline: 16px;
    }

    .footer-col {
        align-items: stretch;
    }

    .map-embed {
        height: 220px;
    }
}

/* ===================================== */
/* FOOTER – TABLET 2 COLUMNS (FINAL FIX) */
/* ===================================== */
@media (min-width: 768px) and (max-width: 1023px) {

    .site-footer .footer-grid {
        grid-template-columns: 1fr 1fr !important;
        grid-template-areas:
            "brand services"
            "map map" !important;
        gap: 20px !important;
        padding-inline: 20px !important;
        direction: ltr !important;
    }

    .footer-col-brand {
        grid-area: brand !important;
    }

    .footer-col-services {
        grid-area: services !important;
    }

    .footer-col-map {
        grid-area: map !important;
        grid-column: 1 / -1 !important;
    }

    .map-embed {
        height: 260px !important;
    }
}

/* ================================================= */
/* FOOTER – TABLET FORCE 2 COLUMNS (FINAL OVERRIDE) */
/* ================================================= */
@media (min-width: 768px) and (max-width: 1023px) {

  html body .site-footer .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "brand services"
      "map map" !important;
    direction: ltr !important;
    gap: 20px !important;
  }

  html body .site-footer .footer-col-brand {
    grid-area: brand !important;
  }

  html body .site-footer .footer-col-services {
    grid-area: services !important;
  }

  html body .site-footer .footer-col-map {
    grid-area: map !important;
    grid-column: 1 / -1 !important;
  }

  html body .site-footer .map-embed {
    height: 260px !important;
  }
}
/* شماره‌های تماس دو سطری زیر هم */
.topbar-phones {
    display: flex;
    flex-direction: column; /* زیر هم */
    gap: 4px; /* فاصله بین دو خط */
    line-height: 1.2;
}

    .topbar-phones .phone {
        color: #fff; /* اگر topbar تیره است */
        font-weight: 700;
        text-decoration: none;
        white-space: nowrap;
    }

    /* اگر قبلاً شماره‌ها رو hidden می‌کردی */
    .topbar-phones, .topbar-phones .phone {
        opacity: 1;
        visibility: visible;
    }


    


    

.support-toggle {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    background: #203c64;
    color: #fff;
    font-size: 26px;
    box-shadow: 0 15px 35px rgba(0,0,0,.3);
    cursor: pointer;
    z-index: 99999;
    transition: .3s ease;
}

    


/* =========================
   FLOATING SUPPORT WIDGET
   ========================= */

.support-widget {
    left: auto;
    position: fixed;
    bottom: 90px;
    right: 25px;
    width: 280px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0,0,0,.25);
    overflow: hidden;
    transform: translateY(20px);
    opacity: 0;
    pointer-events: none;
    transition: .3s ease;
    z-index: 99999;
}

.support-widget[dir="rtl"] {
    text-align: right;
}

.support-widget[dir="ltr"] {
    left: 25px;
    right: auto;
    text-align: left;
}

    .support-widget.active {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

.support-header {
    background: #d4a017;
    color: #0b1220;
    padding: 14px;
    font-weight: 800;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.support-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.support-widget .support-call {
    display: block;
    text-decoration: none;
    background: #203c64;
    color: #fff;
    padding: 10px;
    border-radius: 12px;
    text-align: start;
    font-weight: 900;
    transition: .25s ease;
}

.support-widget .support-call:hover {
        background: #102c4f;
    }

.support-toggle {
    position: fixed;
    bottom: 80px;
    inset-inline-end: 35px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: none;
    background: #d4a017;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    z-index: 99999;
    transition: .3s ease;
    padding-right:10px;
    padding-top:3px;
}

    .support-toggle:hover {
        transform: scale(1.08);
    }

.support-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
}
/* فقط نمایش/عدم نمایش دکمه تلفن */
.support-toggle {
    display: none;
}

    .support-toggle.is-show {
        display: flex !important;
    }
.support-toggle {
    right: 25px;
    transform: translateX(0);
}



/* =========================
   TOPBAR — FINAL RESPONSIVE OVERRIDE (PUT AT VERY END)
   ========================= */

/* topbar همیشه بالا، ارتفاعش هرچی شد body باهاش هماهنگ میشه */
.topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    background: #203c64 !important;
    color: #fff !important;
}

body {
    padding-top: var(--topbar-h, 64px) !important; /* با JS دقیق میشه */
}

.topbar a, .topbar span {
    color: #fff !important;
}

/* ساختار اصلی */
.topbar .topbar-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px 14px !important;
    flex-wrap: nowrap !important;
}

    /* سه بخش: زبان / پشتیبانی / اکشن‌ها */
    .topbar .topbar-inner > div {
        min-width: 0;
    }

/* جلوگیری از بهم‌ریختگی متن‌ها */
.topbar .support-numbers,
.topbar .topbar-right {
    white-space: nowrap;
}

.topbar .support-numbers {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================
   TABLET (<= 992px)
   - دو ردیف: (اکشن‌ها + زبان) / (پشتیبانی)
   ========================= */

/* =========================
   MOBILE (<= 768px)
   - سه ردیف مرتب و حرفه‌ای
   ========================= */

/* خیلی ریز (<= 420px) دکمه‌ها جمع‌تر */

/* =========================
   TOPBAR FULL RESPONSIVE
   ========================= */

.topbar {
    width: 100%;
    background: #203c64;
    color: #fff;
    font-size: 13px;
}

.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* زبان‌ها همیشه سمت چپ */
.topbar-lang {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* استایل لینک زبان */
.lang-link {
    color: #fff;
    font-weight: 800;
    text-decoration: none;
}

.lang-sep {
    opacity: .6;
}


.topbar .container {
    width: min(1200px, 100% - 32px);
    margin: 0 auto;
}

/* اگر ساختار flex هست */
.topbar .container {
    display: flex;
    align-items: center;
}


/* =========================================
   TOPBAR — TABLET: SAME AS DESKTOP (GRID)
   (768..1024)  PUT THIS AT VERY END
   ========================================= */
@media (min-width: 768px) and (max-width: 1024px) {

    /* یک ردیف مثل دسکتاپ */
    :root {
        --topbar-h: 48px;
    }

    body {
        padding-top: var(--topbar-h) !important;
    }

    /* ظرف اصلی */
    .topbar[dir="ltr"] .topbar-inner {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 6px 12px !important;
        overflow: visible !important;
    }

    .topbar[dir="ltr"] .topbar-lang {
        grid-column: 1 !important;
        justify-self: start !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        white-space: nowrap !important;
    }

    .topbar[dir="ltr"] .support-numbers {
        grid-column: 2 !important;
        justify-self: center !important;
        display: inline-flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        text-align: center !important;
        font-size: 12px !important;
    }

    .topbar[dir="ltr"] .topbar-right {
        grid-column: 3 !important;
        justify-self: end !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        white-space: nowrap !important;
        margin: 0 !important;
    }

    .topbar .tiny-link,
    .topbar .dot {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        line-height: 1 !important;
        font-size: 12px !important;
    }

    /* دکمه‌ها جمع‌وجورتر */
    .topbar .topbar-search,
    .topbar .topbar-login {
        padding: 7px 10px !important;
        border-radius: 11px !important;
        font-size: 12px !important;
    }
}
/* =========================================================
   TOPBAR — MOBILE ONLY (<= 600px)
   Layout:
   Row1: Search/Login
   Row2: Support (center)
   Row3: FA/EN
   PUT THIS AT VERY END OF site.css
   ========================================================= */

@media (max-width: 600px) {

    /* ارتفاع بیشتر چون 3 ردیف میشه */
    :root {
        --topbar-h: 118px;
    }

    body {
        padding-top: var(--topbar-h) !important;
    }

    .topbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 99999 !important;
    }

        .topbar .topbar-inner {
            display: flex !important;
            flex-direction: column !important;
            align-items: stretch !important;
            justify-content: center !important;
            gap: 8px !important;
            padding: 10px 0 !important;
            flex-wrap: nowrap !important;
        }

        /* هر سه بخش تمام عرض */
        .topbar .topbar-lang,
        .topbar .topbar-left,
        .topbar .topbar-right {
            width: 100% !important;
            min-width: 0 !important;
            margin: 0 !important;
        }

        /* Row 1: اکشن‌ها */
        .topbar .topbar-right {
            order: 1 !important;
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
            gap: 10px !important;
            white-space: nowrap !important;
        }

        /* Row 2: پشتیبانی وسط و خوانا */
        .topbar .topbar-left {
            order: 2 !important;
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
        }

        .topbar .support-numbers {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 8px !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            max-width: 100% !important;
            font-size: 12px !important;
        }

        /* Row 3: زبان‌ها پایین */
        .topbar .topbar-lang {
            order: 3 !important;
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
            gap: 6px !important;
            white-space: nowrap !important;
        }

        /* دکمه‌ها جمع‌وجورتر در موبایل */
        .topbar .topbar-search,
        .topbar .topbar-login {
            padding: 7px 10px !important;
            border-radius: 12px !important;
            font-size: 12px !important;
        }
}

/* موبایل خیلی ریز (اختیاری) */
@media (max-width: 360px) {
    :root {
        --topbar-h: 128px;
    }

    .topbar .topbar-search,
    .topbar .topbar-login {
        padding: 6px 8px !important;
    }
}

/* =========================================================
   FIX: Menu/Header must NOT overlap fixed topbar on scroll
   PUT THIS AT VERY END of site.css
   ========================================================= */

:root {
    --topbar-h: 64px; /* اگر ارتفاع واقعی topbarت فرق دارد، همین عدد را تغییر بده */
}

/* 1) Topbar always fixed on top */
.topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100000 !important;
}

/* 2) Push the whole page under the fixed topbar */
body {
    padding-top: var(--topbar-h) !important;
}

/* 3) Header/menu must stay in normal flow (NOT sticky/fixed) */
.site-header,
.header {
    position: relative !important;
    top: auto !important;
    z-index: 10 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 4) Kill any sticky behavior that was added before */
.site-header,
.header,
.header-inner {
    position: relative !important;
}

/* 5) Safety: if any element had scroll offset tricks */
html, body {
    margin: 0 !important;
}

/* =========================================
   FIX: Mobile topbar overlapping header
   ========================================= */

@media (max-width: 600px) {

    /* ارتفاع واقعی topbar موبایل رو تنظیم کن */
    :root {
        --topbar-h: 118px; /* اگر کمتر/بیشتر بود عدد رو تنظیم کن */
    }

    .topbar {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100000 !important;
    }

    /* کل صفحه رو به اندازه topbar پایین ببر */
    body {
        padding-top: var(--topbar-h) !important;
    }

    /* مطمئن شو هدر sticky/fixed نیست */
    .site-header,
    .header {
        position: relative !important;
        top: auto !important;
    }
}

/* =========================================
   SMALL TABLET: reduce support font size only
   (600px..900px)
   ========================================= */
/* =========================================
   SMALL TABLET: move topbar content slightly right
   (600px..900px)
   ========================================= */
/* =========================================
   FIX: Center logo when hamburger is visible
   (small tablet + mobile)
   PUT THIS AT VERY END
   ========================================= */
@media (max-width: 1024px) {

    /* کانتینر هدر */
    .header .container.header-inner {
        position: relative !important;
        min-height: 78px; /* اگر هدر کوتاه/بلند بود اینو تنظیم کن */
    }

    /* همبرگر: ثابت گوشه راست */
    .header .mnav-toggle {
        position: absolute !important;
        right: 14px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 20 !important;
        margin: 0 !important;
    }

    /* لوگو: وسط واقعی صفحه */
    .header a.brand.brand-float {
        position: absolute !important;
        left: 50% !important;
        right: auto !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 15 !important;
        margin: 0 !important;
    }

    /* برای اینکه لوگو زیر همبرگر نره، یه فضای امن بده */
    .header .container.header-inner {
        padding-right: 64px !important;
        padding-left: 16px !important;
    }
}

/* Simple submenu cards with thumbnails */
.header #nav .submenu-link {
    gap: 10px !important;
}

.header #nav .submenu-link-icon {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid #dbe4ef !important;
    background: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.header #nav .submenu-link-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.header #nav .submenu-link-icon-svg {
    width: 100% !important;
    height: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #0f2f53 !important;
}

.header #nav .submenu-link-icon-svg svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
}

.header #nav .submenu-link-icon-fallback {
    width: 100% !important;
    height: 100% !important;
    align-items: center !important;
    justify-content: center !important;
}

.header #nav .submenu-link-icon-fallback svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
}

.header #nav .submenu-icon-fallback {
    width: 100% !important;
    height: 100% !important;
    align-items: center !important;
    justify-content: center !important;
}

.header #nav .submenu-link-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.services-grid.mustard-bg {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

    .services-grid.mustard-bg > * {
        max-width: 1200px;
        margin: 0 auto;
        padding-left: 30px;
        padding-right: 30px;
    }
.header .container.header-inner {
    height: 72px !important;
    min-height: 72px !important;
}

.site-header,
.header,
.header-inner {
    margin-top: 0 !important;
}

/* =========================
   FINAL: remove the gap under topbar
   (PUT THIS AT VERY END)
   ========================= */

:root {
    --topbar-h: 44px !important;
}
/* اگر topbarت 48 بود، همینو 48 کن */

.topbar {
    height: var(--topbar-h) !important;
}

    .topbar .topbar-inner {
        height: 100% !important;
    }

body {
    padding-top: var(--topbar-h) !important;
}

.site-header {
    padding-top: 0 !important;
}
/* این قبلاً هم باید صفر باشه */

/* =========================
   SMALL MOBILE FIX (<=480px)
   ========================= */
@media (max-width:480px) {

    .topbar-inner {
        flex-wrap: wrap;
        row-gap: 6px;
    }

    .topbar-left {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .topbar-lang {
        width: 100%;
        justify-content: center;
    }

    .topbar-item.support-numbers {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 8px;
    }

    .support-label {
        display: block;
        width: 100%;
        text-align: center;
        font-size: 12px;
    }

    .support-link {
        font-size: 12px;
        white-space: nowrap;
    }
}
/* =========================================
   SMALL MOBILE TOPBAR FIX
   ========================================= */
@media (max-width: 576px) {
    .topbar {
        position: relative !important;
        inset: auto !important;
        height: auto !important;
        overflow: visible !important;
        z-index: 30 !important;
    }

    body {
        padding-top: 0 !important;
    }

    .topbar-inner {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px 10px !important;
        padding: 8px 12px !important;
    }

    .topbar-left,
    .topbar-lang,
    .topbar-item.support-numbers {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 4px 8px !important;
    }

    .support-label {
        width: 100% !important;
        text-align: center !important;
        font-size: 12px !important;
    }

    .support-link {
        white-space: nowrap !important;
        font-size: 12px !important;
    }

    .header,
    .site-header,
    .header-inner {
        position: relative !important;
        z-index: 20 !important;
    }
}

@media (max-width: 767px) {
    html body .topbar {
        height: auto !important;
        min-height: 76px !important;
        overflow: visible !important;
    }

    html body .topbar .topbar-inner {
        display: grid !important;
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        align-items: center !important;
        row-gap: 4px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    html body .topbar .topbar-right.topbar-quick {
        order: 1 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px 8px !important;
    }

    html body .topbar .topbar-lang {
        order: 2 !important;
        display: none !important;
    }

    html body .topbar .topbar-left,
    html body .topbar .topbar-item.support-numbers {
        display: none !important;
    }

    html body .topbar .topbar-lang .tiny-link,
    html body .topbar .topbar-lang .dot {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #fff !important;
    }

    html body .topbar .topbar-lang-mobile {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        white-space: nowrap !important;
        margin-top: 2px !important;
    }

    html body .topbar .topbar-lang-mobile .tiny-link,
    html body .topbar .topbar-lang-mobile .dot {
        display: inline-flex !important;
        color: #fff !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        text-decoration: none !important;
    }
}

@media (max-width:576px) {
    .topbar .topbar-left {
        display: flex !important;
        width: 100% !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

.support-widget .support-call {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.support-widget .support-call svg {
        flex-shrink: 0;
    }

.support-widget[dir="rtl"] .support-call {
    flex-direction: row-reverse;
}

.support-widget[dir="ltr"] .support-call {
    flex-direction: row;
}

/* =========================================
   FINAL HEADER/TOPBAR BEHAVIOR
   - Header stays pinned on top (all sizes)
   - Topbar is normal flow (not fixed)
   ========================================= */

:root {
    --header-sticky-z: 12000;
}

.topbar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    inset: auto !important;
    z-index: 20 !important;
}

body {
    padding-top: 0 !important;
}

.header {
    position: sticky !important;
    top: 0 !important;
    z-index: var(--header-sticky-z) !important;
}

/* =========================================
   PEST LIBRARY PAGE
   ========================================= */

.pest-library-page {
    padding-top: 28px;
    padding-bottom: 36px;
    direction: inherit;
}

.pest-library-hero {
    background: linear-gradient(135deg, #f8f4dd 0%, #fff5cc 100%);
    border: 1px solid #f0e0a6;
    border-radius: 20px;
    padding: clamp(18px, 3vw, 28px);
    margin-bottom: 18px;
}

.pest-library-hero h1 {
    margin: 0 0 10px;
    color: #1f2a34;
    font-size: clamp(24px, 3.8vw, 38px);
    font-weight: 800;
}

.pest-library-hero p {
    margin: 0;
    color: #475569;
    line-height: 1.85;
}

.pest-library-actions {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pest-search {
    margin: 12px 0 16px;
}

.pest-search input {
    width: 100%;
    height: 46px;
    border-radius: 14px;
    border: 1px solid #d9dee6;
    background: #fff;
    padding: 0 14px;
    font-size: 14px;
    text-align: start;
    direction: inherit;
}

.pest-search input:focus {
    outline: none;
    border-color: #d9af32;
    box-shadow: 0 0 0 3px rgba(217, 175, 50, .18);
}

.pest-list-section {
    margin-top: 20px;
}

.pest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
}

.pest-card {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e8ebf0;
    background: #fff;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.pest-card:hover {
    transform: translateY(-3px);
    border-color: #e4be55;
    box-shadow: 0 12px 24px rgba(15, 23, 42, .08);
}

.pest-card a {
    color: inherit;
    text-decoration: none;
    display: block;
    height: 100%;
}

.pest-thumb {
    aspect-ratio: 1 / 1;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.pest-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pest-meta {
    padding: 12px;
    text-align: start;
}

.pest-meta h3 {
    margin: 0;
    font-size: 15px;
    color: #1f2937;
    line-height: 1.5;
}

.pest-en {
    margin-top: 5px;
    color: #64748b;
    font-size: 12px;
    direction: ltr;
    text-align: left;
}

html[dir="rtl"] .pest-en {
    text-align: right;
    direction: ltr;
    unicode-bidi: plaintext;
}

.pest-scientific {
    margin-top: 6px;
    font-size: 12px;
    color: #0f766e;
    line-height: 1.5;
}

.pest-scientific span {
    color: #475569;
    margin-inline-end: 4px;
}

@media (max-width: 576px) {
    .pest-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .pest-meta {
        padding: 10px;
    }

    .pest-meta h3 {
        font-size: 14px;
    }
}

/* =========================================
   PEST DETAILS PAGE
   ========================================= */

.pest-details-page {
    padding-top: 28px;
    padding-bottom: 36px;
    direction: inherit;
}

.pest-details-breadcrumb .breadcrumb {
    margin: 0;
    background: transparent;
    padding: 0;
}

.pest-details-breadcrumb .breadcrumb a {
    color: #64748b;
    text-decoration: none;
}

.pest-details-breadcrumb .breadcrumb a:hover {
    color: #d9af32;
}

.pest-details-card {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #e8ebf0;
    overflow: hidden;
    box-shadow: 0 12px 24px rgba(15, 23, 42, .06);
}

.pest-details-header {
    padding: 14px 16px;
    border-bottom: 1px solid #eef2f7;
    background: linear-gradient(135deg, #f8f4dd 0%, #fff5cc 100%);
}

.pest-details-header .back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #475569;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.pest-details-header .back-link:hover {
    color: #d9af32;
}

.pest-details-content {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 18px;
    padding: 18px;
}

.pest-details-image {
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: #f8fafc;
    border: 1px solid #eef2f7;
}

.pest-details-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pest-details-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: start;
}

.pest-details-info h1 {
    margin: 0;
    color: #1f2a34;
    font-size: clamp(20px, 2.4vw, 30px);
    font-weight: 900;
}

.pest-details-info h2 {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    direction: ltr;
    unicode-bidi: plaintext;
}

.pest-scientific-name {
    border: 1px solid #e6f4f1;
    background: #f0fdfa;
    border-radius: 14px;
    padding: 12px 14px;
}

.pest-scientific-name .label {
    display: block;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}

.pest-scientific-name .value {
    display: block;
    color: #0f766e;
    font-size: 14px;
    font-style: italic;
    margin-top: 2px;
}

.pest-description {
    border: 1px solid #eef2f7;
    background: #fff;
    border-radius: 14px;
    padding: 12px 14px;
}

.pest-description h3 {
    margin: 0 0 10px;
    color: #1f2937;
    font-size: 14px;
    font-weight: 800;
}

.pest-description p {
    margin: 0;
    color: #475569;
    line-height: 1.9;
    white-space: pre-line;
}

.pest-source {
    border: 1px solid #eef2f7;
    background: #f8fafc;
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.pest-source .label {
    font-size: 12px;
    color: #475569;
    font-weight: 800;
}

.pest-source a {
    font-size: 13px;
    color: #0f766e;
    text-decoration: none;
    font-weight: 700;
}

.pest-source a:hover {
    text-decoration: underline;
}

.pest-details-footer {
    margin-top: auto;
}

.pest-details-footer .btn {
    width: 100%;
}

@media (max-width: 768px) {
    .pest-details-content {
        grid-template-columns: 1fr;
        padding: 14px;
    }
}

header {
    transition: background 0.35s ease, box-shadow 0.35s ease;
}

    /* حالت اسکرول */
    header.scrolled {
        background: #203c64 !important;
        background-image: none !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    }

        header.scrolled .brand.brand-float {
            background-color: #ffffff !important;
            border-radius: 12px !important;
            padding: 6px 10px !important;
            box-shadow: 0 14px 30px rgba(0,0,0,.2);
        }

        /* لینک‌های منو */
        header.scrolled a {
            color: #ffffff !important;
        }
        /* منوی موبایل داخل header باید رنگ تیره بمونه */
        header.scrolled .mnav a,
        header.scrolled .mnav .mnav-item > a,
        header.scrolled .mnav .mnav-sub a,
        header.scrolled .mnav .mnav-item > button.mnav-acc {
            color: #0f172a !important;
        }

        /* ============================= */
        /* تغییر رنگ آیکون همبرگری */
        /* ============================= */

        /* اگر با span ساخته شده باشد */
        header.scrolled .nav-toggle span,
        header.scrolled .menu-toggle span,
        header.scrolled .hamburger span {
            background: #ffffff !important;
        }

        /* اگر با before/after ساخته شده باشد */
        header.scrolled .nav-toggle::before,
        header.scrolled .nav-toggle::after,
        header.scrolled .menu-toggle::before,
        header.scrolled .menu-toggle::after,
        header.scrolled .hamburger::before,
        header.scrolled .hamburger::after {
            background: #ffffff !important;
        }

        /* اگر با border ساخته شده باشد */
        header.scrolled .nav-toggle,
        header.scrolled .menu-toggle,
        header.scrolled .hamburger {
            border-color: #ffffff !important;
            color: #ffffff !important;
        }

        /* سفید شدن آیکون همبرگری هنگام اسکرول */

        header.scrolled .mnav-burger,
        header.scrolled .mnav-burger::before,
        header.scrolled .mnav-burger::after {
            background-color: #ffffff !important;
        }
@media (max-width:768px) {

    .mega-card .mega-icon {
        display: none !important;
    }
}

/* =========================================
   MOBILE FIX: support-toggle smaller & lower
   ========================================= */
@media (max-width: 992px) {
    .support-toggle {
        width: 40px !important;
        height: 40px !important;
        bottom: 12px !important;
        inset-inline-end: 14px !important;
        right: 14px !important;
        font-size: 18px !important;
        padding: 0 !important;
        display: none;
    }
    .support-toggle.is-show {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    .support-toggle svg {
        width: 18px !important;
        height: 18px !important;
    }
    .to-top {
        width: 40px !important;
        height: 40px !important;
        bottom: 12px !important;
        inset-inline-end: 60px !important;
        right: 60px !important;
    }
    .to-top__icon {
        width: 18px !important;
        height: 18px !important;
    }
    .support-widget {
        bottom: 10px !important;
        right: 14px !important;
        width: 250px !important;
        border-radius: 14px !important;
        box-shadow: 0 10px 30px rgba(0,0,0,.20) !important;
    }
    .support-widget .support-header {
        padding: 10px 12px !important;
        font-size: 14px !important;
    }
    .support-widget .support-body {
        padding: 12px !important;
        gap: 10px !important;
    }
    .support-widget .support-body p {
        font-size: 13px !important;
        margin: 0 !important;
    }
    .support-widget .support-call {
        padding: 8px 10px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
    }
    .support-widget .support-call svg {
        width: 16px !important;
        height: 16px !important;
    }
    .support-widget .support-close {
        font-size: 18px !important;
    }
}

/* =========================================
   MOBILE FIX: mnav drawer above sticky header
   ========================================= */
.mnav {
    z-index: 13000 !important;
}
.mnav-backdrop {
    z-index: 12500 !important;
}
.mnav-toggle {
    z-index: 12100 !important;
    position: relative;
}

/* =========================================
   NAV DESKTOP REBUILD (single source of truth)
   ========================================= */
@media (min-width: 1201px) {
    .header .mnav-toggle,
    .header .mnav,
    .header .mnav-backdrop {
        display: none !important;
    }

    .header #nav {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: clamp(10px, 1.2vw, 18px) !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .header #nav > .nav-link,
    .header #nav > .nav-item {
        display: inline-flex !important;
        align-items: center !important;
        min-width: 0 !important;
        flex: 0 1 auto !important;
    }

    .header #nav > .nav-link,
    .header #nav > .nav-item > .nav-link {
        padding: 10px 8px !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
    }

    .header #nav > .nav-item.has-mega {
        position: relative !important;
    }

    .header #nav > .nav-item.has-mega > .submenu-panel {
        position: absolute !important;
        top: calc(100% + 10px) !important;
        inset-inline-start: 0 !important;
        inset-inline-end: auto !important;
        transform: none !important;
        margin: 0 !important;
        padding: 14px !important;
        border-radius: 16px !important;
        display: none !important;
        z-index: 80000 !important;
    }

    /* Keep submenu anchored exactly under its own parent item in both directions. */
    .header[dir="ltr"] #nav > .nav-item.has-mega > .submenu-panel {
        left: 0 !important;
        right: auto !important;
    }

    .header[dir="rtl"] #nav > .nav-item.has-mega > .submenu-panel {
        right: 0 !important;
        left: auto !important;
    }

    /* Hover-only rendering causes overlap when mega panels intersect; keep JS state as source of truth. */
    html.nav-js-ready .header #nav > .nav-item.has-mega:hover > .mega {
        display: none !important;
    }

    html.nav-js-ready .header #nav > .nav-item.has-mega.is-open > .mega {
        display: block !important;
    }

    .header #nav .submenu-panel {
        background: #fff !important;
        border: 1px solid rgba(15, 23, 42, .09) !important;
        box-shadow: 0 22px 50px rgba(15, 23, 42, .16) !important;
    }

    .header #nav .submenu-panel--mega .submenu-grid {
        display: grid !important;
        grid-template-columns: repeat(var(--submenu-columns, 3), minmax(0, 1fr)) !important;
        gap: 12px !important;
        align-items: stretch !important;
        justify-items: stretch !important;
    }

    .header #nav .submenu-panel--mega {
        width: min(var(--submenu-panel-max-width, 820px), calc(100vw - 56px)) !important;
        max-width: min(var(--submenu-panel-max-width, 820px), calc(100vw - 56px)) !important;
    }

    .header #nav .submenu-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 112px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 14px 12px !important;
        text-align: center !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
        text-decoration: none !important;
        color: #193a63 !important;
        background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%) !important;
        border: 1px solid rgba(25, 58, 99, .10) !important;
        box-shadow: 0 8px 18px rgba(15, 23, 42, .08) !important;
        transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
    }

    .header #nav .submenu-item:hover,
    .header #nav .submenu-item:focus-visible {
        transform: translateY(-3px) !important;
        border-color: rgba(212, 160, 23, .42) !important;
        box-shadow: 0 14px 24px rgba(15, 23, 42, .14) !important;
    }

    .header #nav .submenu-icon {
        width: 42px !important;
        height: 42px !important;
        margin-bottom: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 12px !important;
        background: #eef3f9 !important;
        color: #0f2f53 !important;
    }

    .header #nav .submenu-icon svg,
    .header #nav .submenu-icon img {
        width: 22px !important;
        height: 22px !important;
    }

    .header #nav .submenu-title {
        display: block !important;
        width: 100% !important;
        line-height: 1.5 !important;
        text-align: center !important;
        font-size: .95rem !important;
        font-weight: 700 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }

    .header #nav .submenu-panel--simple {
        width: min(var(--submenu-panel-max-width, 820px), calc(100vw - 56px)) !important;
        max-width: min(var(--submenu-panel-max-width, 820px), calc(100vw - 56px)) !important;
        padding: 12px !important;
    }

    .header #nav .submenu-list {
        display: grid !important;
        grid-template-columns: repeat(var(--submenu-columns, 3), minmax(0, 1fr)) !important;
        gap: 12px !important;
        align-items: stretch !important;
    }

    .header #nav .submenu-link {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        min-height: 112px !important;
        border-radius: 14px !important;
        text-decoration: none !important;
        font-weight: 700 !important;
        padding: 14px 10px !important;
        white-space: normal !important;
        color: #193a63 !important;
        background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%) !important;
        border: 1px solid rgba(25, 58, 99, .10) !important;
        box-shadow: 0 8px 18px rgba(15, 23, 42, .08) !important;
        text-align: center !important;
    }

    .header #nav .submenu-link:hover,
    .header #nav .submenu-link:focus-visible {
        transform: translateY(-3px) !important;
        border-color: rgba(212, 160, 23, .42) !important;
        box-shadow: 0 14px 24px rgba(15, 23, 42, .14) !important;
        color: #102b4b !important;
    }

    .header #nav .submenu-link-text {
        display: block !important;
        line-height: 1.4 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        text-align: center !important;
    }

    .header #nav .submenu-link-icon {
        width: 42px !important;
        height: 42px !important;
        flex: 0 0 42px !important;
        border-radius: 12px !important;
        margin-bottom: 2px !important;
    }

    .header #nav .submenu-link-icon img,
    .header #nav .submenu-link-icon-svg svg,
    .header #nav .submenu-link-icon-fallback svg {
        width: 22px !important;
        height: 22px !important;
        object-fit: contain !important;
    }
}

/* ========================================
   ABSOLUTE FINAL MOBILE/TABLET OVERRIDE
   Keep support number visible + prevent horizontal scroll
   ======================================== */
@media (max-width: 992px) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .topbar,
    .header,
    .container,
    .topbar-inner,
    .header-inner {
        max-width: 100vw !important;
        overflow-x: clip !important;
        box-sizing: border-box !important;
    }

    /* Keep support block visible on mobile/tablet */
    .topbar .topbar-left,
    .topbar .topbar-item.support-numbers,
    .topbar .support-numbers,
    .topbar .support-label,
    .topbar .support-link {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .topbar .topbar-left {
        flex: 0 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Slightly smaller support box for tablet/mobile */
    .topbar .topbar-item.support-numbers,
    .topbar .support-numbers {
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 1px 6px !important;
        gap: 2px 6px !important;
        font-size: 10px !important;
        line-height: 1.45 !important;
        white-space: normal !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        text-align: center !important;
        border-radius: 10px !important;
    }

    .topbar .support-label {
        font-size: 10px !important;
        margin: 0 !important;
    }

    .topbar .support-numbers .dot {
        display: none !important;
    }

    .topbar .support-link {
        display: inline !important;
        font-size: 10px !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        max-width: 100% !important;
    }

    /* Mobile menu overflow hardening */
    .mnav,
    #mnav {
        width: min(86vw, 340px) !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    .mnav .mnav-list,
    .mnav .mnav-item,
    .mnav .mnav-sub,
    .mnav .mnav-item > a,
    .mnav .mnav-item > button.mnav-acc,
    .mnav .mnav-sub a {
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }
}

@media (max-width: 480px) {
    .topbar .topbar-item.support-numbers,
    .topbar .support-numbers,
    .topbar .support-label,
    .topbar .support-link {
        font-size: 9.5px !important;
    }
}

/* ========================================
   SUPPORT WIDGET: always visible at bottom (all sizes)
   ======================================== */
.support-widget,
.support-widget.active {
    position: fixed !important;
    bottom: 14px !important;
    inset-inline-end: 14px !important;
    right: 14px !important;
    left: auto !important;
    z-index: 99999 !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    display: block !important;
}

.support-widget[dir="ltr"],
.support-widget[dir="ltr"].active {
    left: 14px !important;
    right: auto !important;
}

@media (min-width: 768px) and (max-width: 1200px) {
    .support-widget,
    .support-widget.active {
        width: min(320px, calc(100vw - 28px)) !important;
        bottom: 14px !important;
    }
}

/* ========================================
   ALWAYS SHOW SUPPORT BOX (Desktop/Tablet/Mobile)
   ======================================== */
.topbar .topbar-left,
.topbar .topbar-item.support-numbers,
.topbar .support-numbers {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

@media (min-width: 993px) and (max-width: 1200px) {
    .topbar .topbar-left {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        justify-content: center !important;
    }

    .topbar .topbar-item.support-numbers,
    .topbar .support-numbers {
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 4px 8px !important;
    }
}

/* ========================================
   FINAL MOBILE FIX: Keep Support Number + No Horizontal Scroll
   ======================================== */
@media (max-width: 992px) {
    html,
    body,
    .topbar,
    .header,
    .container,
    .header-inner,
    .topbar-inner {
        max-width: 100vw !important;
        overflow-x: clip !important;
        box-sizing: border-box !important;
    }

    .topbar .topbar-left,
    .topbar .topbar-item.support-numbers,
    .topbar .support-numbers,
    .topbar .support-label,
    .topbar .support-link {
        display: inline-flex !important;
        visibility: visible !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .topbar .topbar-left {
        min-width: 0 !important;
        flex: 0 1 100% !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .topbar .support-numbers {
        min-width: 0 !important;
        max-width: 100% !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 4px 8px !important;
        white-space: normal !important;
        text-align: center !important;
        line-height: 1.5 !important;
    }

    .topbar .support-numbers .dot {
        display: none !important;
    }

    .topbar .support-numbers .support-link {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        max-width: 100% !important;
        font-size: 11px !important;
    }

    .header #mnav,
    .mnav {
        width: min(90vw, 360px) !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    .mnav .mnav-list,
    .mnav .mnav-item,
    .mnav .mnav-sub {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .mnav .mnav-item > a,
    .mnav .mnav-item > button.mnav-acc,
    .mnav .mnav-sub a {
        min-width: 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        text-align: start !important;
    }
}

/* ========================================
   MOBILE OVERFLOW GUARD (Support Numbers)
   ======================================== */
@media (max-width: 768px) {
    html,
    body {
        overflow-x: hidden !important;
    }

    img,
    video,
    canvas,
    iframe,
    svg {
        max-width: 100%;
    }

    .topbar[dir="rtl"] .topbar-left,
    .topbar[dir="ltr"] .topbar-left {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .topbar .topbar-item.support-numbers,
    .topbar .support-numbers {
        max-width: 100% !important;
        min-width: 0 !important;
        white-space: normal !important;
        flex-wrap: wrap !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        text-align: center !important;
        row-gap: 2px !important;
    }

    .topbar .support-numbers a,
    .topbar .support-numbers .tiny-link,
    .topbar .support-numbers span {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    .contact-page-section .contact-info-card a[dir="ltr"] {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        font-size: .94rem !important;
        line-height: 1.75 !important;
    }
}

/* Contact page layout */
.contact-page-section {
    --contact-primary: #123b6b;
    --contact-primary-2: #1f568c;
    --contact-accent: #d4a017;
    --contact-ink: #102e52;
    --contact-surface: #f8fbff;
    --contact-surface-2: #ffffff;
    border-radius: 22px;
    padding: 1.1rem;
    background:
        radial-gradient(1200px 360px at 88% -12%, rgba(212, 160, 23, 0.18), transparent 60%),
        radial-gradient(900px 300px at -8% 118%, rgba(18, 59, 107, 0.14), transparent 62%),
        linear-gradient(180deg, #fcfeff 0%, var(--contact-surface) 100%);
    border: 1px solid rgba(18, 59, 107, 0.08);
    box-shadow: 0 14px 34px rgba(10, 36, 68, 0.08);
}

.contact-page-section .section-head h2 {
    color: #0f2f55;
    margin-bottom: 0.4rem;
    position: relative;
    padding-bottom: 0.55rem;
}

.contact-page-section .section-head h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 86px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--contact-accent), rgba(212, 160, 23, 0.18));
}

.contact-page-section .contact-two-col {
    display: grid;
    grid-template-columns: minmax(360px, 1.2fr) minmax(360px, 0.9fr);
    gap: 1.35rem;
    direction: ltr;
    align-items: stretch;
}

.contact-page-section .contact-map-col,
.contact-page-section .contact-info-col {
    min-width: 0;
}

.contact-page-section .contact-map-shell {
    position: relative;
    height: 100%;
}

.contact-page-section .contact-map-title {
    position: absolute;
    left: 50%;
    top: 14px;
    transform: translateX(-50%);
    margin: 0;
    z-index: 2;
    color: var(--contact-ink);
    font-weight: 800;
    font-size: 1.02rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(18, 59, 107, 0.16);
    border-radius: 999px;
    padding: 0.42rem 1rem;
    box-shadow: 0 10px 22px rgba(16, 32, 64, 0.10);
}

.contact-page-section .contact-map-open-btn {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 2;
    border-radius: 999px;
    padding: 0.45rem 0.85rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 251, 255, 0.95) 100%);
    border: 1px solid rgba(18, 59, 107, 0.18);
    color: var(--contact-primary);
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none;
    box-shadow: 0 10px 18px rgba(16, 32, 64, 0.12);
    transition: transform 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}

.contact-page-section .contact-map-open-btn:hover {
    transform: translateY(-2px);
    background: #ffffff;
    box-shadow: 0 12px 22px rgba(16, 32, 64, 0.16);
}

.contact-page-section .contact-map-frame {
    width: 100%;
    height: 100%;
    min-height: 540px;
    border: 1px solid rgba(18, 59, 107, 0.14);
    border-radius: 16px;
    box-shadow: 0 16px 32px rgba(16, 32, 64, 0.12);
    background: var(--contact-surface-2);
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.contact-page-section .contact-info-col {
    display: grid;
    gap: 1rem;
    align-content: start;
}

.contact-page-section .contact-animate {
    opacity: 0;
    transform: translateY(16px);
    animation: contactFadeInUp 620ms ease forwards;
}

.contact-page-section .contact-animate--map {
    animation-delay: 90ms;
}

.contact-page-section .contact-animate--item:nth-of-type(1) {
    animation-delay: 140ms;
}

.contact-page-section .contact-animate--item:nth-of-type(2) {
    animation-delay: 220ms;
}

.contact-page-section .contact-animate--item:nth-of-type(3) {
    animation-delay: 300ms;
}

.contact-page-section .contact-animate--item:nth-of-type(4) {
    animation-delay: 380ms;
}

.contact-page-section .contact-animate--item:nth-of-type(5) {
    animation-delay: 460ms;
}

@keyframes contactFadeInUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .contact-page-section .contact-animate {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

.contact-page-section .contact-info-intro {
    margin: 0;
    border: 1px solid rgba(212, 160, 23, 0.42);
    background:
        radial-gradient(700px 240px at 92% -30%, rgba(212, 160, 23, 0.36), transparent 58%),
        linear-gradient(138deg, #0f2f55 0%, #154370 62%, #1e5488 100%);
    color: #f7fbff;
    border-radius: 18px;
    padding: 1.1rem 1.3rem;
    text-align: right;
    box-shadow: 0 14px 28px rgba(16, 32, 64, 0.14);
}

.contact-page-section .contact-info-intro p {
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.95;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
}

.contact-page-section .contact-quick-actions {
    margin-top: 0.95rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.contact-page-section .contact-quick-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 999px;
    padding: 0.52rem 0.92rem;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 200ms ease, box-shadow 200ms ease, background-color 200ms ease, color 200ms ease;
}

.contact-page-section .contact-quick-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.contact-page-section .contact-quick-icon svg {
    width: 18px;
    height: 18px;
}

.contact-page-section .contact-quick-btn--wa {
    background: linear-gradient(140deg, #1fb95d 0%, #19a54f 100%);
    color: #fff;
    box-shadow: 0 10px 20px rgba(20, 95, 55, 0.28);
}

.contact-page-section .contact-quick-btn--call {
    background: rgba(212, 160, 23, 0.17);
    color: #f8fbff;
    border: 1px solid rgba(212, 160, 23, 0.45);
}

.contact-page-section .contact-quick-btn:hover {
    transform: translateY(-2px);
}

.contact-page-section .contact-quick-btn--wa:hover {
    box-shadow: 0 14px 24px rgba(20, 95, 55, 0.32);
}

.contact-page-section .contact-quick-btn--call:hover {
    background: rgba(212, 160, 23, 0.28);
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(16, 32, 64, 0.18);
}

.contact-page-section .contact-info-card {
    margin: 0;
    border: 1px solid rgba(18, 59, 107, 0.18);
    border-radius: 18px;
    padding: 1.05rem 1.2rem;
    min-height: 128px;
    background:
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.contact-page-section .contact-info-card h3 {
    margin-bottom: 0.6rem;
    color: #0f2f55;
    font-size: 1.05rem;
}

.contact-page-section .contact-card-heading {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.contact-page-section .contact-card-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(212, 160, 23, 0.22) 0%, rgba(212, 160, 23, 0.12) 100%);
    color: #8a6304;
    border: 1px solid rgba(212, 160, 23, 0.40);
    flex: 0 0 30px;
}

.contact-page-section .contact-card-icon svg {
    width: 16px;
    height: 16px;
}

.contact-page-section .contact-info-card p {
    margin-bottom: 0.45rem;
    font-size: 1rem;
    line-height: 1.85;
    color: #173a63;
}

.contact-page-section .contact-info-card a {
    color: #0f2f55;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px dashed rgba(15, 47, 85, 0.28);
    transition: color 180ms ease, border-color 180ms ease;
}

.contact-page-section .contact-info-card a:hover {
    color: #8a6304;
    border-bottom-color: rgba(138, 99, 4, 0.55);
}

.contact-page-section .contact-info-card a[dir="ltr"] {
    direction: ltr;
    unicode-bidi: plaintext;
    letter-spacing: 0.2px;
}

.contact-page-section .contact-map-col:hover .contact-map-frame {
    transform: translateY(-3px);
    border-color: rgba(18, 59, 107, 0.24);
    box-shadow: 0 20px 36px rgba(16, 32, 64, 0.16);
}

.contact-page-section .contact-info-card:hover {
    transform: translateY(-3px);
    border-color: rgba(212, 160, 23, 0.52);
    box-shadow: 0 16px 30px rgba(15, 47, 85, 0.16);
}

.contact-page-section .contact-info-col > .contact-info-card:nth-of-type(2),
.contact-page-section .contact-info-col > .contact-info-card:nth-of-type(3) {
    position: relative;
    background:
        radial-gradient(280px 90px at 92% -24%, rgba(212, 160, 23, 0.16), transparent 58%),
        linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    border-color: rgba(18, 59, 107, 0.24);
}

.contact-page-section .contact-info-col > .contact-info-card:nth-of-type(2)::before,
.contact-page-section .contact-info-col > .contact-info-card:nth-of-type(3)::before {
    content: "";
    position: absolute;
    right: 14px;
    top: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d4a017;
    box-shadow: 0 0 0 4px rgba(212, 160, 23, 0.20);
}

.contact-page-section .contact-info-col > .contact-info-card:nth-of-type(2) .contact-card-icon,
.contact-page-section .contact-info-col > .contact-info-card:nth-of-type(3) .contact-card-icon {
    background: linear-gradient(145deg, rgba(15, 47, 85, 0.12) 0%, rgba(212, 160, 23, 0.18) 100%);
    border-color: rgba(212, 160, 23, 0.42);
    color: #0f2f55;
}

@media (hover: none) and (pointer: coarse) {
    .contact-page-section .contact-map-col:hover .contact-map-frame,
    .contact-page-section .contact-info-card:hover {
        transform: none;
        border-color: inherit;
        box-shadow: inherit;
    }

    .contact-page-section .contact-quick-btn:hover {
        transform: none;
    }

    .contact-page-section .contact-map-open-btn:hover {
        transform: none;
    }

    .contact-page-section .contact-map-col:active .contact-map-frame,
    .contact-page-section .contact-info-card:active {
        transform: translateY(-1px);
        box-shadow: 0 12px 24px rgba(16, 32, 64, 0.12);
    }
}

@media (max-width: 992px) {
    .contact-page-section {
        padding: 0.85rem;
    }

    .contact-page-section .contact-two-col {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .contact-page-section .contact-map-frame {
        min-height: 360px;
    }

    .contact-page-section .contact-map-title {
        font-size: 0.95rem;
        top: 10px;
        padding: 0.35rem 0.8rem;
    }

    .contact-page-section .contact-info-intro p {
        font-size: 1.03rem;
        line-height: 1.85;
    }
}

@media (prefers-reduced-motion: reduce) {
    .contact-page-section .contact-map-frame,
    .contact-page-section .contact-info-card,
    .contact-page-section .contact-quick-btn,
    .contact-page-section .contact-map-open-btn {
        transition: none;
    }

    .contact-page-section .contact-map-col:hover .contact-map-frame,
    .contact-page-section .contact-info-card:hover {
        transform: none;
        box-shadow: 0 16px 32px rgba(16, 32, 64, 0.12);
    }
}

@media (max-width: 1200px) {
    .header #nav {
        display: none !important;
    }

    .header .mnav-toggle {
        display: inline-flex !important;
    }

    .header .mnav {
        display: block !important;
    }

    .header .mnav-backdrop {
        display: block !important;
    }
}

/* =========================
   Services catalog page
   ========================= */
.services-catalog-page {
    padding-bottom: 32px;
}

.services-catalog-hero {
    margin-top: 24px;
    border-radius: 22px;
    background: linear-gradient(135deg, #203c64 0%, #0f2a4a 62%, #0b223d 100%);
    color: #f8fbff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 16px 34px rgba(32, 60, 100, .24);
}

.services-catalog-hero::before {
    content: "";
    position: absolute;
    inset-inline-end: -90px;
    top: -70px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(214, 163, 0, .30) 0%, rgba(214, 163, 0, .07) 55%, rgba(214, 163, 0, 0) 75%);
}

.services-catalog-hero__content {
    position: relative;
    z-index: 1;
    padding: 26px 28px;
}

.services-catalog-hero__content h2 {
    color: #fff;
    margin: 0;
    font-size: clamp(1.35rem, 1.2rem + .7vw, 1.95rem);
    font-weight: 900;
}

.services-catalog-hero__content p {
    margin: 10px 0 0;
    color: rgba(245, 249, 255, .92);
    max-width: 720px;
    line-height: 1.9;
}

.services-catalog-hero__stats {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.services-catalog-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid rgba(214, 163, 0, .34);
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: .88rem;
    font-weight: 700;
    padding: 6px 14px;
}

.services-catalog-filter-card {
    margin-top: 16px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    padding: 16px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
}

.services-catalog-jump {
    margin-bottom: 18px;
    padding: 10px 12px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, .08);
}

.services-catalog-jump__label {
    font-size: .86rem;
    font-weight: 700;
    color: #44526a;
    margin-bottom: 8px;
}

.services-catalog-jump__items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.services-catalog-chip {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: rgba(214, 163, 0, .12);
    border: 1px solid rgba(214, 163, 0, .24);
    color: #0f2a4a;
    padding: 6px 12px;
    font-size: .86rem;
    font-weight: 700;
    transition: all .2s ease;
}

.services-catalog-chip:hover {
    background: rgba(214, 163, 0, .22);
    color: #0d223a;
}

.services-catalog-block {
    margin-bottom: 24px;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border: 1px solid rgba(15, 23, 42, .08);
    padding: 14px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}

.services-catalog-block__head {
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.services-catalog-block__head h3 {
    margin: 0;
    color: #203c64;
    font-weight: 900;
    font-size: 1.1rem;
}

.services-catalog-count {
    border-radius: 999px;
    background: rgba(214, 163, 0, .13);
    color: #0f2a4a;
    border: 1px solid rgba(214, 163, 0, .24);
    font-size: .78rem;
    font-weight: 800;
    padding: 4px 10px;
    white-space: nowrap;
}

.services-catalog-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.services-catalog-card {
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .07);
    transition: transform .2s ease, box-shadow .2s ease;
}

.services-catalog-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 24px rgba(15, 23, 42, .12);
}

.services-catalog-card__image {
    display: block;
    text-decoration: none;
}

.services-catalog-card__image img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    background: #eef2f7;
}

.services-catalog-card__body {
    padding: 12px;
}

.services-catalog-card__body h4 {
    margin: 0;
    font-size: .98rem;
    font-weight: 800;
    color: #172b46;
    min-height: 2.8em;
    line-height: 1.45;
}

.services-catalog-card__link {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #203c64;
    color: #fff;
    border: 1px solid #203c64;
    font-size: .84rem;
    font-weight: 800;
    min-height: 34px;
    text-decoration: none;
    padding: 0 14px;
}

.services-catalog-card__link:hover {
    background: #193354;
    border-color: #193354;
    color: #fff;
}

.services-catalog-card__image.is-disabled,
.services-catalog-card__link.is-disabled {
    opacity: .65;
    cursor: not-allowed;
    pointer-events: none;
}

.services-catalog-empty {
    border-radius: 14px;
    background: #fff;
}

@media (max-width: 1199px) {
    .services-catalog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .services-catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .services-catalog-hero__content {
        padding: 22px 18px;
    }

    .services-catalog-filter-card {
        padding: 14px;
    }
}

@media (max-width: 575px) {
    .services-catalog-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .services-catalog-card__image img {
        height: 188px;
    }

    .services-catalog-block {
        padding: 12px;
    }
}

.product-gallery-thumbs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.product-desktop-card {
    background: #fff;
    border: 1px solid #d9dde5;
    border-radius: 14px;
    padding: 22px;
}

.product-desktop-card__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.product-desktop-main-image {
    width: 100%;
    max-height: 340px;
    object-fit: contain;
    border-radius: 10px;
    background: #fff;
}

.product-desktop-thumbs {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.product-desktop-summary {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.product-desktop-title {
    margin: 0;
    font-size: clamp(1.5rem, 2.2vw, 2.15rem);
    color: #0f172a;
    line-height: 1.35;
}

.product-desktop-price {
    color: #244875;
    font-size: clamp(1.8rem, 3.1vw, 2.7rem);
    font-weight: 800;
    line-height: 1.15;
}

.product-desktop-meta {
    border-top: 1px solid #d8deea;
    border-bottom: 1px solid #d8deea;
    padding: 10px 0;
}

.product-desktop-meta__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid #edf1f7;
    color: #475569;
    font-size: .95rem;
}

.product-desktop-meta__row:last-child {
    border-bottom: 0;
}

.product-desktop-meta__row strong {
    color: #1e293b;
}

.product-desktop-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.product-desktop-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    background: #244875;
    color: #fff;
    border-radius: 4px;
    padding: 0 18px;
    text-decoration: none;
    font-weight: 700;
}

.product-desktop-cta:hover {
    background: #1b3a61;
    color: #fff;
}

.product-desktop-cta.is-disabled {
    pointer-events: none;
    opacity: .55;
}

.product-desktop-qty {
    width: 76px;
    min-height: 40px;
    border: 1px solid #c8d0dc;
    border-radius: 4px;
    text-align: center;
    background: #fff;
}

.product-desktop-tabs {
    margin-top: 28px;
    border-bottom: 1px solid #e1e7f0;
    display: flex;
    gap: 16px;
}

.product-tab-btn {
    border: 0;
    background: transparent;
    color: #64748b;
    padding: 8px 0 10px;
    font-weight: 700;
    border-bottom: 2px solid transparent;
}

.product-tab-btn.is-active {
    color: #0f172a;
    border-color: #244875;
}

.product-tab-content {
    display: none;
    padding-top: 18px;
    color: #334155;
    line-height: 1.9;
}

.product-tab-content.is-active {
    display: block;
}

.home-products-section .section-head,
.home-services-section .section-head {
    padding: 0 4px;
}

.home-products-section .cards.four {
    gap: 20px;
}

.home-products-section .blog-card {
    border: 1px solid #dde3ee;
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
    overflow: hidden;
    background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
}

.home-products-section .blog-card .blog-body {
    padding: 16px 16px 14px;
}

.home-products-section .blog-card h3 {
    font-size: 1.02rem;
    line-height: 1.7;
    color: #0f2647;
    margin-bottom: 8px;
}

.home-products-section .blog-card p {
    color: #5b677a;
    font-size: .9rem;
    line-height: 1.9;
    margin-bottom: 0;
}

.home-products-section {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 18px;
    margin-bottom: 24px;
    padding: 18px 14px 20px;
    border-radius: 18px;
    border: 1px solid #dbe4f2;
    background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
    box-shadow: 0 14px 30px rgba(19, 45, 86, .10);
}

.home-products-section > .section-head,
.home-products-section > .cards.four {
    width: min(1200px, calc(100% - 28px));
    margin-left: auto;
    margin-right: auto;
}

.home-services-section {
    margin-top: 26px;
    margin-bottom: 78px;
    padding: 18px 14px 20px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: linear-gradient(180deg, #1f3f68 0%, #173457 100%);
    box-shadow: 0 18px 36px rgba(11, 25, 44, .24);
}

.home-services-section .section-head h2 {
    color: #f8fbff;
}

.home-services-section .section-head {
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    padding-bottom: 10px;
    margin-bottom: 14px;
}

.home-services-section .section-head .section-btn {
    color: #0b1220;
    border: 1px solid #d4a017;
    background: #d4a017;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .24);
}

.home-services-section .section-head .section-btn:hover {
    background: #e1b44b;
    color: #0b1220;
    border-color: #e1b44b;
}

.home-services-section + .services-grid.mustard-bg.section {
    margin-top: 22px;
}

.home-services-section .services-home-grid {
    gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-services-section .service-home-card {
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 10px 24px rgba(9, 25, 47, .22);
    overflow: hidden;
}

.home-services-section .service-home-card .blog-img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.home-services-section .service-home-card .blog-body {
    padding: 14px 14px 12px;
}

.home-services-section .service-home-card h3 {
    font-size: .98rem;
    line-height: 1.75;
    color: #102a45;
    margin-bottom: 10px;
}

.home-services-section .service-home-card p {
    color: #4e6075;
    margin-bottom: 10px;
}

.home-services-section .service-home-card .cardx-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid #1f3f68;
    color: #ffffff;
    font-weight: 700;
    background: #1f3f68;
}

.home-services-section .service-home-card .cardx-link:hover {
    background: #d4a017;
    color: #0b1220;
    border-color: #d4a017;
}

.home-faq-section {
    margin-top: 34px;
}

.home-faq-section--standalone {
    margin-top: 42px;
    padding: 22px 18px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    background: linear-gradient(180deg, #1f3f68 0%, #173457 100%);
    box-shadow: 0 18px 36px rgba(11, 25, 44, .28);
}

.home-faq-section--standalone .section-head h2,
.home-faq-section--standalone .section-head .muted {
    color: #f8fbff;
}

.home-faq-shell {
    margin-top: 8px;
}

.home-faq-list {
    display: grid;
    gap: 10px;
}

.home-faq-item {
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 12px;
    background: rgba(255, 255, 255, .96);
    overflow: hidden;
}

.home-faq-question {
    width: 100%;
    border: 0;
    background: rgba(255, 255, 255, .96);
    text-align: start;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    color: var(--c-navy);
    font-weight: 800;
}

.home-faq-icon {
    font-size: 1.2rem;
    color: #d4a017;
    line-height: 1;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0, 28, 84, .1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.home-faq-answer {
    padding: 0 16px 14px;
    color: #4a5a71;
    line-height: 1.95;
}

.home-faq-answer p {
    margin: 0;
}

.home-faq-answer-short {
    font-weight: 700;
    color: var(--c-navy);
    margin-bottom: 6px;
}

.home-faq-answer-long {
    color: #4f5f75;
}

.home-faq-more-toggle {
    border: 1px solid rgba(0, 28, 84, .18);
    background: rgba(0, 28, 84, .06);
    color: var(--c-navy);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    margin: 4px 0 8px;
    border-radius: 999px;
}

.home-faq-more-toggle:hover {
    background: var(--c-navy);
    color: #fff;
    border-color: var(--c-navy);
}

.home-faq-more-icon {
    font-size: 1rem;
    line-height: 1;
}

.product-card-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 6px 0 8px;
}

.product-card-meta span {
    display: block;
    font-size: .82rem;
    color: #475569;
    line-height: 1.5;
}

.product-card-gallery {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 2px;
}

.product-card-gallery img {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    object-fit: cover;
    background: #fff;
}

.product-card-gallery__count {
    font-size: .75rem;
    color: #334155;
    background: #e2e8f0;
    border-radius: 999px;
    padding: 2px 7px;
}

.products-filter-panel {
    display: grid;
    gap: 8px;
}

.products-filter-panel__row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.products-filter-panel__field .form-label {
    margin-bottom: 4px;
    font-size: .85rem;
    color: #334155;
}

.products-filter-panel__result {
    font-size: .88rem;
    color: #0f172a;
}

.product-details-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
}

.product-details-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.product-meta-list {
    display: grid;
    gap: 8px;
    margin: 6px 0 8px;
}

.product-meta-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f8fafc;
}

.product-meta-item span {
    color: #475569;
    font-size: .92rem;
}

.product-meta-item strong {
    color: #0f172a;
    font-weight: 700;
}

.product-specs-list {
    margin: 0;
    padding-inline-start: 18px;
}

.product-specs-list li {
    margin-bottom: 6px;
}

.product-empty-note {
    font-size: .92rem;
    color: #64748b;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    padding: 10px 12px;
}

.product-album-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.product-album-item {
    border: 1px solid #d1d5db;
    background: #fff;
    border-radius: 8px;
    padding: 3px;
    cursor: pointer;
}

.product-album-item img {
    width: 100%;
    height: 92px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

.product-gallery-thumb {
    border: 1px solid #d1d5db;
    background: #fff;
    padding: 2px;
    border-radius: 8px;
    cursor: pointer;
}

.product-gallery-thumb img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

.product-gallery-thumb.is-active {
    border-color: #0f766e;
    box-shadow: 0 0 0 2px rgba(15, 118, 110, .15);
}

.product-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .86);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    padding: 24px;
}

.product-lightbox.is-open {
    display: flex;
}

.product-lightbox img {
    max-width: min(90vw, 1100px);
    max-height: 88vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}

.product-lightbox__close,
.product-lightbox__nav {
    position: absolute;
    border: 0;
    color: #fff;
    background: rgba(0, 0, 0, .35);
}

.product-lightbox__close {
    top: 16px;
    right: 18px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 28px;
    line-height: 1;
}

.product-lightbox__nav {
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 64px;
    border-radius: 12px;
    font-size: 34px;
}

.product-lightbox__nav.prev {
    left: 16px;
}

.product-lightbox__nav.next {
    right: 16px;
}

@media (max-width: 991px) {
    .product-desktop-card__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .product-desktop-main-image {
        max-height: 280px;
    }

    .product-desktop-actions {
        flex-wrap: wrap;
    }

    .home-services-section {
        margin-bottom: 52px;
        padding: 14px 10px;
    }

    .home-services-section .services-home-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-services-section .section-head {
        gap: 10px;
    }

    .home-services-section .section-head .section-btn {
        width: 100%;
        text-align: center;
    }

    .home-services-section .service-home-card .cardx-link {
        width: 100%;
        min-height: 38px;
    }

    .home-faq-question {
        padding: 12px 14px;
        font-size: .95rem;
    }

    .home-faq-section--standalone {
        padding: 14px 10px;
    }

    .products-filter-panel__row {
        grid-template-columns: minmax(0, 1fr);
    }

    .product-details-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .product-album-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .home-services-section .services-home-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-services-section .service-home-card .blog-body {
        padding: 12px;
    }

    .product-album-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =========================================
   FINAL LANGUAGE DIRECTION LOCK (Topbar + Header)
   ========================================= */
.topbar[dir="rtl"] .topbar-inner,
.header[dir="rtl"] .header-inner,
.header[dir="rtl"] #nav,
.header[dir="rtl"] #mnav {
    direction: rtl !important;
}

.topbar[dir="ltr"] .topbar-inner,
.header[dir="ltr"] .header-inner,
.header[dir="ltr"] #nav,
.header[dir="ltr"] #mnav {
    direction: ltr !important;
}

.topbar[dir="rtl"] .topbar-lang {
    order: 3 !important;
    margin-inline-start: auto !important;
    margin-inline-end: 0 !important;
}

.topbar[dir="rtl"] .topbar-left {
    order: 2 !important;
}

.topbar[dir="rtl"] .topbar-right {
    order: 1 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
}

.topbar[dir="ltr"] .topbar-lang {
    order: 1 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: auto !important;
}

.topbar[dir="ltr"] .topbar-left {
    order: 2 !important;
}

.topbar[dir="ltr"] .topbar-right {
    order: 3 !important;
}

.header[dir="rtl"] #nav > a,
.header[dir="rtl"] #nav > .nav-item > .nav-link,
.header[dir="rtl"] #mnav .mnav-item > a,
.header[dir="rtl"] #mnav .mnav-item > .mnav-acc {
    text-align: right !important;
}

.header[dir="ltr"] #nav > a,
.header[dir="ltr"] #nav > .nav-item > .nav-link,
.header[dir="ltr"] #mnav .mnav-item > a,
.header[dir="ltr"] #mnav .mnav-item > .mnav-acc {
    text-align: left !important;
}



/* ==========================================================================
   TOPBAR — FULL RESPONSIVE  (نسخه نهایی یکپارچه)
   Desktop > 1024px  |  Tablet 769-1024px  |  Small Tablet 481-768px  |  Mobile ≤ 480px
   RTL (fa/ar) + LTR (en) — هر دو کاملاً handle شده
   ========================================================================== */

/* ── BASE: topbar normal-flow، header sticky ── */
.topbar {
    position: relative !important;
    inset: auto !important;
    z-index: 20 !important;
    width: 100% !important;
    background: #203c64 !important;
    color: #fff !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
}

body { padding-top: 0 !important; }

.header {
    position: sticky !important;
    top: 0 !important;
    z-index: 12000 !important;
}

/* ── container داخلی ── */
.topbar .container,
.topbar-inner {
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    height: 40px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px !important;
}

/* ── رنگ و تایپوگرافی ── */
.topbar a,
.topbar .tiny-link,
.topbar .dot,
.topbar span {
    color: #fff !important;
    text-decoration: none !important;
    font-size: 13px !important;
}
.topbar .tiny-link { opacity: 0.8 !important; }
.topbar .tiny-link.fw-bold { opacity: 1 !important; font-weight: 700 !important; }
.topbar .tiny-link:hover { opacity: 1 !important; text-decoration: underline !important; }

/* ── شماره تلفن ── */
.topbar .support-numbers {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
    font-size: 13px !important;
}
.topbar .support-numbers .icon {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}
.topbar .support-numbers .icon svg {
    width: 15px !important; height: 15px !important;
    stroke: #fff !important; fill: none !important; stroke-width: 1.8 !important;
}

/* ── دکمه‌های جستجو / ورود ── */
.topbar .topbar-search,
.topbar .topbar-login,
.topbar a.topbar-search,
.topbar a.topbar-login,
.topbar button.topbar-search,
.topbar button.topbar-login {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 13px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
    background: rgba(255,255,255,0.1) !important;
    color: #fff !important;
    font-size: 13px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    text-decoration: none !important;
    transition: background .2s, border-color .2s !important;
}
.topbar .topbar-search:hover,
.topbar .topbar-login:hover {
    background: rgba(255,255,255,0.2) !important;
    border-color: rgba(255,255,255,0.7) !important;
}
.topbar .topbar-search .icon svg,
.topbar .topbar-login .icon svg {
    width: 14px !important; height: 14px !important;
    stroke: #fff !important; fill: none !important; stroke-width: 1.8 !important;
}

/* ══════════════════════════════════════════════════
   DESKTOP (> 1024px) — یک ردیف افقی
   RTL: [دکمه‌ها] [تلفن‌ وسط] [زبان‌ها]
   LTR: [زبان‌ها] [تلفن وسط] [دکمه‌ها]
   ══════════════════════════════════════════════════ */

/* RTL desktop */
.topbar[dir="rtl"] .topbar-inner {
    flex-wrap: nowrap !important;
}
.topbar[dir="rtl"] .topbar-right {
    order: 1 !important; flex-shrink: 0 !important;
    display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important;
}
.topbar[dir="rtl"] .topbar-left {
    order: 2 !important; flex: 1 1 auto !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
}
.topbar[dir="rtl"] .topbar-lang {
    order: 3 !important; flex-shrink: 0 !important;
    display: flex !important; align-items: center !important; gap: 6px !important;
    margin-inline-start: auto !important; margin-inline-end: 0 !important;
}

/* LTR desktop */
.topbar[dir="ltr"] .topbar-inner {
    flex-wrap: nowrap !important;
}
.topbar[dir="ltr"] .topbar-lang {
    order: 1 !important; flex-shrink: 0 !important;
    display: flex !important; align-items: center !important; gap: 6px !important;
    margin-inline-end: auto !important; margin-inline-start: 0 !important;
}
.topbar[dir="ltr"] .topbar-left {
    order: 2 !important; flex: 1 1 auto !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
}
.topbar[dir="ltr"] .topbar-right {
    order: 3 !important; flex-shrink: 0 !important;
    display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important;
}

/* ══════════════════════════════════════════════════
   TABLET (769px – 1024px) — یک ردیف فشرده‌تر
   ══════════════════════════════════════════════════ */
@media (max-width: 1024px) and (min-width: 769px) {
    .topbar .container,
    .topbar-inner {
        padding: 0 14px !important;
        height: 38px !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }
    .topbar a,
    .topbar .tiny-link,
    .topbar span,
    .topbar .support-numbers { font-size: 12px !important; }

    .topbar .topbar-search,
    .topbar .topbar-login { padding: 3px 10px !important; font-size: 12px !important; }

    .topbar .support-numbers .icon svg { width: 14px !important; height: 14px !important; }

    /* RTL tablet: همان ترتیب desktop */
    .topbar[dir="rtl"] .topbar-inner { flex-wrap: nowrap !important; }
    .topbar[dir="ltr"] .topbar-inner { flex-wrap: nowrap !important; }
}

/* ══════════════════════════════════════════════════
   SMALL TABLET (481px – 768px) — دو ردیف
   ردیف ۱: دکمه‌ها + زبان‌ها  |  ردیف ۲: تلفن وسط
   ══════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════
   MOBILE (≤ 480px) — سه ردیف عمودی
   ردیف ۱: دکمه‌ها  |  ردیف ۲: تلفن  |  ردیف ۳: زبان‌ها
   ══════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .topbar .container,
    .topbar-inner {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        height: auto !important;
        padding: 6px 10px !important;
        gap: 4px !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    .topbar[dir="rtl"] .topbar-right,
    .topbar[dir="ltr"] .topbar-right {
        order: 1 !important; flex: none !important; width: 100% !important;
        display: flex !important; justify-content: center !important;
        align-items: center !important; gap: 8px !important; margin: 0 !important;
    }
    .topbar[dir="rtl"] .topbar-left,
    .topbar[dir="ltr"] .topbar-left {
        order: 2 !important; flex: none !important; width: 100% !important;
        display: flex !important; justify-content: center !important; align-items: center !important;
    }
    .topbar[dir="rtl"] .topbar-lang,
    .topbar[dir="ltr"] .topbar-lang {
        order: 3 !important; flex: none !important; width: 100% !important;
        display: flex !important; justify-content: center !important;
        align-items: center !important; gap: 6px !important; margin: 0 !important;
    }

    .topbar .support-numbers {
        font-size: 11px !important; justify-content: center !important; gap: 4px !important; flex-wrap: nowrap !important;
    }
    .topbar .support-label { display: none !important; }
    .topbar a, .topbar .tiny-link, .topbar span { font-size: 11px !important; }
    .topbar .topbar-search,
    .topbar .topbar-login { padding: 4px 11px !important; font-size: 11px !important; border-radius: 16px !important; }
}

/* ══════════════════════════════════════════════════
   VERY SMALL MOBILE (≤ 360px)
   ══════════════════════════════════════════════════ */
@media (max-width: 360px) {
    .topbar .container,
    .topbar-inner { padding: 5px 8px !important; gap: 3px !important; }
    .topbar .topbar-search,
    .topbar .topbar-login { padding: 3px 8px !important; font-size: 10px !important; }
    .topbar .support-numbers { font-size: 10px !important; }
    .topbar a, .topbar .tiny-link, .topbar span { font-size: 10px !important; }
}


/* ==========================================================================
   TOPBAR FIX — 481px تا 768px  (override قطعی)
   ========================================================================== */

/* ==========================================================================
   TOPBAR — 481px تا 768px  (بلوک نهایی یکپارچه)
   ردیف ۱: [دکمه‌ها]  [زبان‌ها]
   ردیف ۲: [شماره تلفن — تمام عرض — وسط]
   ========================================================================== */
@media (max-width: 768px) and (min-width: 481px) {

    .topbar .container,
    .topbar-inner,
    .topbar[dir="rtl"] .topbar-inner,
    .topbar[dir="ltr"] .topbar-inner {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        align-content: center !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 5px 14px !important;
        gap: 3px 8px !important;
        box-sizing: border-box !important;
    }

    /* دکمه‌های جستجو/ورود — ردیف ۱ */
    .topbar[dir="rtl"] .topbar-right,
    .topbar[dir="ltr"] .topbar-right {
        order: 1 !important;
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* زبان‌ها — ردیف ۱ */
    .topbar[dir="rtl"] .topbar-lang,
    .topbar[dir="ltr"] .topbar-lang {
        order: 2 !important;
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* شماره تلفن — ردیف ۲، تمام عرض */
    .topbar[dir="rtl"] .topbar-left,
    .topbar[dir="ltr"] .topbar-left {
        order: 3 !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 2px 0 !important;
    }

    .topbar .topbar-item.support-numbers,
    .topbar .support-numbers {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .topbar .support-label { display: none !important; }

    .topbar .tiny-link,
    .topbar .dot,
    .topbar a { font-size: 11px !important; }

    .topbar .topbar-search,
    .topbar .topbar-login,
    .topbar button.topbar-search,
    .topbar button.topbar-login,
    .topbar a.topbar-search,
    .topbar a.topbar-login {
        display: inline-flex !important;
        padding: 3px 10px !important;
        font-size: 11px !important;
        border-radius: 14px !important;
    }
}


/* =========================
   About page
   ========================= */
.about-company-page {
    padding: 22px 0 36px;
}

.about-company-hero {
    border-radius: 22px;
    background: linear-gradient(130deg, #203c64 0%, #0f2a4a 62%, #0a213d 100%);
    color: #f9fbff;
    padding: 22px;
    box-shadow: 0 16px 34px rgba(32, 60, 100, .24);
    position: relative;
    overflow: hidden;
}

.about-company-hero::before {
    content: "";
    position: absolute;
    inset-inline-end: -95px;
    inset-block-start: -70px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(214, 163, 0, .29) 0%, rgba(214, 163, 0, .08) 58%, rgba(214, 163, 0, 0) 76%);
}

.about-company-hero__content {
    position: relative;
    z-index: 1;
}

.about-company-hero__badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    border-radius: 999px;
    border: 1px solid rgba(214, 163, 0, .35);
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: .82rem;
    font-weight: 800;
    padding: 0 14px;
}

.about-company-hero__content h1 {
    margin: 12px 0 0;
    color: #fff;
    font-size: clamp(1.35rem, 1.16rem + .85vw, 2.05rem);
    font-weight: 900;
    line-height: 1.5;
}

.about-company-hero__content p {
    margin: 12px 0 0;
    color: rgba(244, 249, 255, .93);
    line-height: 2;
    max-width: 760px;
}

.about-company-main {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
    gap: 16px;
    align-items: stretch;
}

.about-company-main__media {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .1);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
    min-height: 100%;
    height: 100%;
    margin: 0;
}

.about-company-main__media img {
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    display: block;
}

.about-company-content {
    margin-top: 18px;
}

.about-company-content__head {
    margin-bottom: 12px;
}

.about-company-content__head h2 {
    margin: 0;
    color: #203c64;
    font-size: clamp(1.14rem, 1.05rem + .45vw, 1.5rem);
    font-weight: 900;
}

.about-company-content__head span {
    margin-top: 6px;
    display: inline-flex;
    color: #5f6f87;
    font-size: .9rem;
    font-weight: 700;
}

.about-company-content__card {
    border-radius: 18px;
    background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
    border: 1px solid rgba(15, 23, 42, .1);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .07);
    padding: 18px 18px 8px;
}

.about-company-paragraph {
    color: #1f2f46;
    line-height: 2.1;
    margin: 0 0 14px;
    font-size: .98rem;
}

@media (max-width: 991px) {
    .about-company-hero {
        padding: 16px;
    }

    .about-company-main {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .about-company-content__card {
        padding: 15px 14px 6px;
    }

    .about-company-main__media,
    .about-company-main__media img {
        min-height: 220px;
    }

    .about-company-main__media {
        height: auto;
    }
}

/* ============================================
   FOOTER RESPONSIVE - FINAL STANDARD OVERRIDE
   ============================================ */
html body .site-footer {
    width: 100%;
    overflow: hidden;
}

html body .site-footer .footer-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr) !important;
    grid-template-areas: "left map" !important;
    align-items: stretch !important;
    gap: 20px !important;
    padding: 0 16px 20px !important;
    width: 100% !important;
    max-width: 1320px;
    margin: 0 auto;
    box-sizing: border-box !important;
}

html body .site-footer .footer-col-left {
    grid-area: left !important;
    min-width: 0 !important;
}

html body .site-footer .footer-col-map {
    grid-area: map !important;
    min-width: 0 !important;
    grid-column: auto !important;
}

html body .site-footer .footer-left-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: start !important;
}

html body .site-footer .footer-about,
html body .site-footer .footer-services,
html body .site-footer .footer-col-brand,
html body .site-footer .footer-col-map {
    min-width: 0 !important;
}

html body .site-footer .footer-logo {
    width: clamp(120px, 16vw, 190px) !important;
    height: auto !important;
}

html body .site-footer .footer-link,
html body .site-footer .muted,
html body .site-footer .footer-contact a,
html body .site-footer .footer-contact span {
    overflow-wrap: anywhere;
    word-break: break-word;
}

html body .site-footer .footer-contact {
    margin: 0;
    padding: 0;
    list-style: none;
}

html body .site-footer .footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

html body .site-footer .footer-map,
html body .site-footer .map-embed {
    width: 100% !important;
}

html body .site-footer .map-embed {
    border: 0;
    height: clamp(220px, 30vw, 340px) !important;
    display: block;
}

html body .site-footer .footer-map-toggle {
    display: none;
    border: 1px solid rgba(15, 23, 42, .14);
    background: #ffffff;
    color: #15355b;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    min-height: 34px;
    padding: 0 14px;
    margin: 8px 0 10px;
}

/* Desktop fine-tune */
@media (min-width: 1200px) {
    html body .site-footer {
        padding-inline: 24px;
        box-sizing: border-box;
    }

    html body .site-footer .footer-grid {
        grid-template-columns: minmax(0, 1.25fr) minmax(380px, 0.75fr) !important;
        gap: 24px !important;
        padding-inline: 28px !important;
    }

    html body .site-footer .footer-left-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 20px !important;
    }

    html body .site-footer .footer-col-map {
        align-self: stretch;
    }

    html body .site-footer .footer-map {
        height: 100%;
        min-height: 320px;
    }

    html body .site-footer .map-embed {
        height: 100% !important;
        min-height: 320px;
    }

    html body .site-footer .footer-title {
        margin-bottom: 8px;
    }

    html body .site-footer .site-footbar__inner {
        max-width: 1320px;
        margin-inline: auto;
        padding-inline: 28px;
        box-sizing: border-box;
    }
}

html[dir="rtl"] body .site-footer .footer-col,
html[dir="rtl"] body .site-footer .footer-col-left,
html[dir="rtl"] body .site-footer .footer-col-map,
html[dir="rtl"] body .site-footer .footer-about,
html[dir="rtl"] body .site-footer .footer-services {
    text-align: right;
    direction: rtl;
}

html[dir="ltr"] body .site-footer .footer-col,
html[dir="ltr"] body .site-footer .footer-col-left,
html[dir="ltr"] body .site-footer .footer-col-map,
html[dir="ltr"] body .site-footer .footer-about,
html[dir="ltr"] body .site-footer .footer-services {
    text-align: left;
    direction: ltr;
}

/* Large tablet / small laptop */
@media (max-width: 1199px) {
    html body .site-footer .footer-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "left"
            "map" !important;
        gap: 16px !important;
        padding-inline: 14px !important;
    }

    html body .site-footer .footer-left-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 14px !important;
    }

    html body .site-footer .map-embed {
        height: 260px !important;
    }
}

/* Tablet portrait */
@media (max-width: 991px) {
    html body .site-footer .footer-left-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body .site-footer .footer-grid {
        gap: 14px !important;
        padding-inline: 12px !important;
    }

    html body .site-footer .footer-title {
        font-size: 14px !important;
    }

    html body .site-footer .footer-link,
    html body .site-footer .muted,
    html body .site-footer .footer-contact a,
    html body .site-footer .footer-contact span {
        font-size: 13px !important;
        line-height: 1.75 !important;
    }

    html body .site-footer .map-embed {
        height: 230px !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    html body .site-footer {
        padding-top: 24px !important;
    }

    html body .site-footer .footer-grid {
        padding-inline: 10px !important;
        gap: 12px !important;
    }

    html body .site-footer .footer-col,
    html body .site-footer .footer-about,
    html body .site-footer .footer-services,
    html body .site-footer .footer-col-map {
        width: 100% !important;
    }

    html body .site-footer .footer-logo {
        width: clamp(105px, 32vw, 145px) !important;
    }

    html body .site-footer .map-embed {
        height: 205px !important;
    }

    html body .site-footer .site-footbar,
    html body .site-footer .site-footbar__inner {
        text-align: center;
        line-height: 1.8;
        padding-inline: 8px;
    }
}

/* Mobile compact mode */
@media (max-width: 575px) {
    html body .site-footer {
        padding-top: 18px !important;
        padding-bottom: 10px !important;
    }

    html body .site-footer .footer-grid {
        gap: 10px !important;
        padding-inline: 8px !important;
        padding-bottom: 10px !important;
    }

    html body .site-footer .footer-title {
        margin-bottom: 2px !important;
        font-size: 13px !important;
    }

    html body .site-footer .footer-link,
    html body .site-footer .muted,
    html body .site-footer .footer-contact a,
    html body .site-footer .footer-contact span {
        font-size: 12px !important;
        line-height: 1.6 !important;
    }

    html body .site-footer .footer-contact {
        gap: 4px !important;
    }

    html body .site-footer .footer-contact li {
        gap: 6px !important;
        margin-bottom: 2px;
    }

    html body .site-footer .footer-icon {
        width: 12px !important;
        min-width: 12px !important;
        margin-top: 3px;
    }

    html body .site-footer .footer-logo {
        width: clamp(92px, 30vw, 125px) !important;
    }

    html body .site-footer .map-embed {
        height: 180px !important;
    }

    html body .site-footer .footer-map-toggle {
        display: none !important;
    }

    html body .site-footer .footer-map {
        max-height: none;
        opacity: 1;
        overflow: visible;
        border-width: 1px;
        box-shadow: 0 10px 22px rgba(0,0,0,.06);
    }

    html body .site-footer .footer-map.is-open {
        max-height: none;
        opacity: 1;
        border-width: 1px;
    }

    html body .site-footer .site-footbar,
    html body .site-footer .site-footbar__inner {
        font-size: 11px !important;
        line-height: 1.7 !important;
        padding-inline: 6px !important;
    }
}

/* ========================================
   FOOTER FINAL LAYOUT (3 COLS, MAP LARGE)
   ======================================== */
html body .site-footer .footer-grid {
    max-width: 1320px;
    margin-inline: auto;
    box-sizing: border-box;
}

@media (min-width: 1200px) {
    html body .site-footer {
        padding-inline: 22px;
        box-sizing: border-box;
    }

    html body .site-footer .footer-grid {
        display: grid !important;
        grid-template-columns: minmax(0, .82fr) minmax(0, .82fr) minmax(0, calc(.78 * var(--footer-map-scale, 2))) !important;
        grid-template-areas: "brand services map" !important;
        gap: 34px !important;
        align-items: stretch !important;
        padding-inline: 26px !important;
    }

    html[dir="rtl"] body .site-footer .footer-grid {
        grid-template-areas: "map services brand" !important;
    }

    html body .site-footer .footer-col-brand {
        grid-area: brand !important;
        min-width: 0;
    }

    html body .site-footer .footer-col-services {
        grid-area: services !important;
        min-width: 0;
    }

    html body .site-footer .footer-col-map {
        grid-area: map !important;
        min-width: 0;
        grid-column: auto !important;
        align-self: stretch;
    }

    html body .site-footer .footer-map {
        height: 100%;
        min-height: 330px;
    }

    html body .site-footer .map-embed {
        height: 100% !important;
        min-height: 330px;
    }

    html body .site-footer .site-footbar__inner {
        width: 100%;
        max-width: none;
        margin-inline: 0;
        padding-inline: 26px;
        box-sizing: border-box;
    }
}

@media (max-width: 1199px) {
    html body .site-footer .footer-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "brand"
            "services"
            "map" !important;
    }

    html body .site-footer .footer-col-brand { grid-area: brand !important; }
    html body .site-footer .footer-col-services { grid-area: services !important; }
    html body .site-footer .footer-col-map { grid-area: map !important; }
}

/* ========================================
   Small Tablet Topbar Fix (577px - 900px)
   Keep topbar compact so it doesn't overlap header/hamburger.
   ======================================== */
@media (min-width: 577px) and (max-width: 900px) {
    .topbar {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        z-index: 1200 !important;
    }

    body {
        padding-top: 0 !important;
    }

    .topbar .container.topbar-inner,
    .topbar .topbar-inner {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        align-items: center !important;
        gap: 8px !important;
        min-height: 40px !important;
        height: auto !important;
        padding: 6px 12px !important;
        overflow: hidden !important;
    }

    .topbar .topbar-lang {
        white-space: nowrap !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }

    .topbar .topbar-left {
        justify-self: center !important;
        min-width: 0 !important;
    }

    .topbar .support-numbers {
        display: inline-flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 11px !important;
        gap: 6px !important;
    }

    .topbar .support-label,
    .topbar .support-numbers .dot,
    .topbar .support-numbers .support-link:last-of-type {
        display: none !important;
    }

    .topbar .topbar-right {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        white-space: nowrap !important;
    }

    /* Keep the same visual order for both RTL and LTR:
       languages left, action buttons right */
    .topbar .topbar-lang { justify-self: start !important; text-align: left !important; }
    .topbar .topbar-right { justify-self: end !important; text-align: right !important; }

    .topbar .topbar-search,
    .topbar .topbar-login,
    .topbar a.topbar-search,
    .topbar a.topbar-login {
        padding: 4px 9px !important;
        font-size: 11px !important;
        border-radius: 16px !important;
    }
}

/* Hide support numbers on mobile + small tablet */
@media (max-width: 900px) {
    .topbar .topbar-left,
    .topbar .topbar-item.support-numbers,
    .topbar .support-numbers {
        display: none !important;
    }
}

/* ========================================
   FINAL OVERRIDE: hide support numbers
   on mobile + small tablet
   ======================================== */
@media (max-width: 992px) {
    html body .topbar .topbar-left,
    html body .topbar .topbar-item.support-numbers,
    html body .topbar .support-numbers,
    html body .topbar .support-label,
    html body .topbar .support-link {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
}

/* ========================================
   LTR Header/Menu Final Fix
   ======================================== */
html[dir="ltr"] .header[dir="ltr"] .header-inner {
    direction: ltr !important;
}

html[dir="ltr"] .header[dir="ltr"] #nav,
html[dir="ltr"] .header[dir="ltr"] #nav > a,
html[dir="ltr"] .header[dir="ltr"] #nav > .nav-item > .nav-link,
html[dir="ltr"] .header[dir="ltr"] #mnav .mnav-item > a,
html[dir="ltr"] .header[dir="ltr"] #mnav .mnav-item > .mnav-acc,
html[dir="ltr"] .header[dir="ltr"] #mnav .mnav-sub a {
    text-align: left !important;
}

@media (min-width: 1201px) {
    html[dir="ltr"] .header[dir="ltr"] .container.header-inner {
        position: relative !important;
    }

    html[dir="ltr"] .header[dir="ltr"] a.brand.brand-float {
        left: 0 !important;
        right: auto !important;
        inset-inline-start: 0 !important;
        inset-inline-end: auto !important;
        transform: none !important;
        z-index: 25 !important;
    }

    html[dir="ltr"] .header[dir="ltr"] #nav {
        justify-content: flex-start !important;
        margin-left: 0 !important;
        /* Keep desktop LTR nav clear of floating logo */
        padding-left: calc(var(--brand-float-w) + 24px) !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    html[dir="ltr"] .header[dir="ltr"] #nav > a,
    html[dir="ltr"] .header[dir="ltr"] #nav > .nav-item {
        flex-shrink: 0 !important;
    }
}

@media (max-width: 1200px) {
    html[dir="ltr"] .header[dir="ltr"] .container.header-inner {
        position: relative !important;
        min-height: 74px !important;
    }

    html[dir="ltr"] .header[dir="ltr"] .mnav-toggle {
        position: absolute !important;
        left: 14px !important;
        right: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 22 !important;
    }

    html[dir="ltr"] .header[dir="ltr"] a.brand.brand-float {
        position: absolute !important;
        left: 50% !important;
        right: auto !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        z-index: 18 !important;
    }

    html[dir="rtl"] .header[dir="rtl"] .container.header-inner {
        position: relative !important;
        min-height: 74px !important;
    }

    html[dir="rtl"] .header[dir="rtl"] .mnav-toggle {
        position: absolute !important;
        right: 14px !important;
        left: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 22 !important;
    }

    html[dir="rtl"] .header[dir="rtl"] a.brand.brand-float {
        position: absolute !important;
        left: 50% !important;
        right: auto !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        z-index: 18 !important;
    }
}

/* ========================================
   Large Tablet Topbar Alignment (901px - 1200px)
   Languages: left | Buttons: right
   ======================================== */
@media (min-width: 901px) and (max-width: 1200px) {
    .topbar .container.topbar-inner,
    .topbar .topbar-inner {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .topbar .topbar-lang {
        order: 1 !important;
        justify-self: start !important;
        text-align: left !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    .topbar .topbar-left {
        order: 2 !important;
        justify-self: center !important;
        min-width: 0 !important;
    }

    .topbar .topbar-right {
        order: 3 !important;
        justify-self: end !important;
        text-align: right !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }
}

/* ========================================
   FINAL Tablet Topbar Lock (768px - 1200px)
   Languages left | Buttons right
   ======================================== */
@media (min-width: 768px) and (max-width: 1200px) {
    .topbar .topbar-left,
    .topbar .topbar-item.support-numbers,
    .topbar .support-numbers {
        display: none !important;
    }

    .topbar .container.topbar-inner,
    .topbar .topbar-inner {
        display: grid !important;
        grid-template-columns: auto auto !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px 14px !important;
        min-height: 40px !important;
        padding: 6px 12px !important;
    }

    .topbar .topbar-lang {
        order: 1 !important;
        justify-self: start !important;
        text-align: left !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    .topbar .topbar-right {
        order: 2 !important;
        justify-self: end !important;
        text-align: right !important;
        margin: 0 !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .topbar .topbar-search,
    .topbar .topbar-login {
        padding: 4px 10px !important;
        font-size: 12px !important;
    }
}

/* ========================================
   ULTIMATE TABLET TOPBAR (non-mobile / non-desktop)
   Range: 577px - 1200px
   ======================================== */
@media (min-width: 577px) and (max-width: 1200px) {
    .topbar .topbar-left,
    .topbar .topbar-item.support-numbers,
    .topbar .support-numbers {
        display: none !important;
    }

    .topbar .container.topbar-inner,
    .topbar .topbar-inner {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas: "lang actions" !important;
        align-items: center !important;
        gap: 8px 12px !important;
        padding: 6px 12px !important;
        min-height: 40px !important;
    }

    .topbar .topbar-lang {
        grid-area: lang !important;
        justify-self: start !important;
        text-align: start !important;
        margin: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .topbar .topbar-right {
        grid-area: actions !important;
        justify-self: end !important;
        display: inline-flex !important;
        align-items: center !important;
        min-width: 0 !important;
        max-width: 100% !important;
        gap: 8px !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    .topbar .topbar-search,
    .topbar .topbar-login,
    .topbar a.topbar-search,
    .topbar a.topbar-login,
    .topbar button.topbar-search,
    .topbar button.topbar-login {
        padding: 4px 10px !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
    }
}

/* ========================================
   Tablet Topbar Direction Lock (LTR/RTL)
   ======================================== */
@media (min-width: 577px) and (max-width: 1200px) {
    /* LTR: languages left, buttons right */
    .topbar[dir="ltr"] .topbar-lang {
        justify-self: start !important;
        text-align: left !important;
    }
    .topbar[dir="ltr"] .topbar-right {
        justify-self: end !important;
        text-align: right !important;
    }

    /* RTL: mirror layout based on Persian direction */
    .topbar[dir="rtl"] .topbar-lang {
        justify-self: end !important;
        text-align: right !important;
    }
    .topbar[dir="rtl"] .topbar-right {
        justify-self: start !important;
        text-align: left !important;
    }
}

/* ========================================
   Large Tablet RTL Topbar Overflow Fix
   ======================================== */
@media (min-width: 901px) and (max-width: 1200px) {
    .topbar[dir="rtl"] .container.topbar-inner,
    .topbar[dir="rtl"] .topbar-inner {
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas: "actions lang" !important;
        gap: 6px 10px !important;
    }

    .topbar[dir="rtl"] .topbar-right {
        grid-area: actions !important;
        justify-self: start !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 5px 6px !important;
        white-space: normal !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .topbar[dir="rtl"] .topbar-lang {
        grid-area: lang !important;
        justify-self: end !important;
        white-space: nowrap !important;
    }

    .topbar[dir="rtl"] .topbar-search,
    .topbar[dir="rtl"] .topbar-login,
    .topbar[dir="rtl"] a.topbar-search,
    .topbar[dir="rtl"] a.topbar-login,
    .topbar[dir="rtl"] button.topbar-search,
    .topbar[dir="rtl"] button.topbar-login {
        padding: 3px 8px !important;
        font-size: 11px !important;
    }
}

/* ========================================
   DESKTOP UNIFIED SUBMENUS (like About)
   ======================================== */
@media (min-width: 1201px) {
    .header #nav > .nav-item.has-mega > .submenu-panel--mega {
        width: min(var(--submenu-panel-max-width, 820px), calc(100vw - 56px)) !important;
        max-width: min(var(--submenu-panel-max-width, 820px), calc(100vw - 56px)) !important;
    }

    .header #nav > .nav-item.has-mega > .submenu-panel--mega .submenu-grid {
        grid-template-columns: repeat(var(--submenu-columns, 3), minmax(0, 1fr)) !important;
    }

    .header #nav > .nav-item.has-mega > .submenu-panel--simple {
        width: min(var(--submenu-panel-max-width, 820px), calc(100vw - 56px)) !important;
        max-width: min(var(--submenu-panel-max-width, 820px), calc(100vw - 56px)) !important;
    }

    .header #nav > .nav-item.has-mega > .submenu-panel--simple .submenu-list {
        display: grid !important;
        grid-template-columns: repeat(var(--submenu-columns, 3), minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
}

/* ========================================
   FINAL OVERRIDE (must stay last): support visible on tablet too
   ======================================== */
@media (min-width: 577px) and (max-width: 1200px) {
    .topbar .topbar-left,
    .topbar .topbar-item.support-numbers,
    .topbar .support-numbers {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .topbar .container.topbar-inner,
    .topbar .topbar-inner {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 6px 10px !important;
        overflow: hidden !important;
    }

    .topbar .topbar-left {
        justify-self: center !important;
        min-width: 0 !important;
    }

    .topbar .support-numbers {
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 2px 6px !important;
        font-size: 10px !important;
        line-height: 1.45 !important;
    }

    .topbar .support-numbers .dot {
        display: none !important;
    }

    .topbar .support-link {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        font-size: 10px !important;
    }
}

/* ========================================
   MOBILE: always show language switcher in topbar
   ======================================== */
@media (max-width: 576px) {
    html body .topbar .topbar-lang {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        min-width: max-content !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        white-space: nowrap !important;
        margin: 0 auto !important;
    }
}

/* ========================================
   FINAL WIDGET/TO-TOP STATE FIX (single source of truth)
   ======================================== */
html body #supportWidget.support-widget:not(.active) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(16px) !important;
}

html body #supportWidget.support-widget.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

html body #supportToggle.support-toggle {
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2147483400 !important;
}

html body #supportToggle.support-toggle.is-show {
    display: flex !important;
}

html body .to-top {
    display: flex !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 2147483300 !important;
}

html body .to-top.is-show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

@media (min-width: 577px) and (max-width: 1200px) {
    html body #supportWidget.support-widget.active {
        position: fixed !important;
        bottom: max(20px, env(safe-area-inset-bottom)) !important;
        right: 25px !important;
        left: auto !important;
        width: 280px !important;
    }

    html[dir="ltr"] body #supportWidget.support-widget.active {
        left: 25px !important;
        right: auto !important;
    }

    html body #supportToggle.support-toggle {
        bottom: 24px !important;
        right: 25px !important;
    }

    html[dir="ltr"] body #supportToggle.support-toggle {
        left: 25px !important;
        right: auto !important;
    }
}

@media (max-width: 576px) {
    html body #supportWidget.support-widget.active {
        bottom: max(14px, env(safe-area-inset-bottom)) !important;
        width: 232px !important;
    }
}

@media (min-width: 1201px) {
    html body #supportWidget.support-widget.active {
        bottom: max(22px, env(safe-area-inset-bottom)) !important;
    }
}

html body #supportWidget.support-widget .support-header {
    padding-top: 18px !important;
}

html body .to-top {
    bottom: 274px !important;
}

@media (max-width: 992px) {
    html body .to-top {
        bottom: 256px !important;
    }
}

@media (min-width: 1201px) {
    html body.support-closed #supportToggle.support-toggle.is-show {
        bottom: 24px !important;
        right: 24px !important;
        left: auto !important;
    }

    html[dir="ltr"] body.support-closed #supportToggle.support-toggle.is-show {
        left: 24px !important;
        right: auto !important;
    }

    html body.support-closed .to-top {
        bottom: 24px !important;
        right: 78px !important;
        left: auto !important;
    }

    html[dir="ltr"] body.support-closed .to-top {
        left: 78px !important;
        right: auto !important;
    }
}

@media (max-width: 576px) {
    :root {
        --topbar-h: 76px !important;
    }

    html body .topbar {
        height: auto !important;
        min-height: 76px !important;
        overflow: visible !important;
    }

    html body .topbar .topbar-inner {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        row-gap: 4px !important;
        min-height: 76px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    html body .topbar .topbar-right.topbar-quick {
        order: 1 !important;
    }

    html body .topbar .topbar-lang {
        order: 2 !important;
        flex: 0 0 100% !important;
        margin-top: 2px !important;
    }

    html body .topbar .topbar-left {
        order: 3 !important;
        flex: 0 0 100% !important;
        display: none !important;
    }

    html body .topbar .topbar-lang {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
        width: auto !important;
        min-width: max-content !important;
        margin: 0 !important;
        gap: 6px !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        z-index: 2 !important;
    }

    html body .topbar .topbar-lang a,
    html body .topbar .topbar-lang button,
    html body .topbar .topbar-lang .lang-item {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #fff !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        text-decoration: none !important;
    }

    html body .topbar .topbar-lang .tiny-link {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    html body .topbar .topbar-lang .dot {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: rgba(255,255,255,.8) !important;
        font-size: 11px !important;
    }

    html body:not(.support-closed) .to-top {
        right: 14px !important;
        left: auto !important;
        bottom: 226px !important;
    }

    html[dir="ltr"] body:not(.support-closed) .to-top {
        left: 14px !important;
        right: auto !important;
    }

    html body.support-closed #supportToggle.support-toggle.is-show {
        bottom: 14px !important;
        right: 14px !important;
        left: auto !important;
    }

    html[dir="ltr"] body.support-closed #supportToggle.support-toggle.is-show {
        left: 14px !important;
        right: auto !important;
    }

    html body.support-closed .to-top {
        bottom: 14px !important;
        right: 62px !important;
        left: auto !important;
    }

    html[dir="ltr"] body.support-closed .to-top {
        left: 62px !important;
        right: auto !important;
    }
}

/* ========================================
   FINAL MOBILE TOPBAR LAYOUT (authoritative)
   ======================================== */
@media (max-width: 767px) {
    html body .topbar .topbar-inner {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        row-gap: 4px !important;
        column-gap: 8px !important;
        padding: 6px 10px !important;
    }

    html body .topbar .topbar-right.topbar-quick {
        order: 1 !important;
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        margin: 0 auto !important;
        inset-inline: 0 !important;
    }

    html body .topbar[dir="rtl"] .topbar-right.topbar-quick,
    html body .topbar[dir="ltr"] .topbar-right.topbar-quick {
        justify-content: center !important;
        margin-inline: auto !important;
    }

    html body .topbar .topbar-right.topbar-quick .topbar-search-wrap,
    html body .topbar .topbar-right.topbar-quick .topbar-login {
        display: inline-flex !important;
        align-items: center !important;
    }

    html body .topbar .topbar-right.topbar-quick .topbar-search-wrap .topbar-search,
    html body .topbar .topbar-right.topbar-quick .topbar-login {
        min-width: 94px !important;
        height: 34px !important;
        justify-content: center !important;
        padding: 0 12px !important;
        font-size: 13px !important;
        line-height: 1 !important;
    }

    html body .topbar .topbar-left,
    html body .topbar .topbar-lang {
        display: none !important;
    }

    html body .topbar .topbar-lang-mobile {
        order: 2 !important;
        width: 100% !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        margin-top: 1px !important;
        white-space: nowrap !important;
    }

    html body .topbar .topbar-lang-mobile .tiny-link,
    html body .topbar .topbar-lang-mobile .dot {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #fff !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        text-decoration: none !important;
    }
}

/* ========================================
   FINAL SEARCH MODAL OVERRIDE
   ======================================== */
html body .topbar-search-modal .topbar-search-dialog {
    width: min(660px, calc(100vw - 24px)) !important;
    min-height: 270px !important;
    background: #ffffff !important;
    border: 1px solid rgba(16,44,79,.16) !important;
    border-radius: 22px !important;
    box-shadow: 0 24px 56px rgba(16,44,79,.28) !important;
    padding: 20px !important;
}

html body .topbar-search-modal .topbar-search-dialog::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    height: 6px !important;
    background: linear-gradient(90deg, #0f2c4f 0%, #1f4e81 44%, #d4a017 100%) !important;
}

html body .topbar-search-modal .topbar-search-head {
    margin-bottom: 18px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(16,44,79,.12) !important;
}

html body .topbar-search-modal .topbar-search-head h3 {
    color: #102c4f !important;
    font-size: 1.12rem !important;
    font-weight: 900 !important;
}

html body .topbar-search-modal .topbar-search-form-modal {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: linear-gradient(180deg, #fbfdff 0%, #f6f9fd 100%) !important;
    border: 1px solid rgba(16,44,79,.10) !important;
    border-radius: 16px !important;
    padding: 9px !important;
}

html body .topbar-search-modal .topbar-search-input {
    height: 46px !important;
    border: 1px solid rgba(16,44,79,.16) !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.65) !important;
}

html[dir="rtl"] body .topbar-search-modal .topbar-search-input {
    padding-right: 42px !important;
}

html[dir="ltr"] body .topbar-search-modal .topbar-search-input {
    padding-left: 42px !important;
}

html body .topbar-search-modal .topbar-search-submit {
    width: 48px !important;
    min-width: 48px !important;
    height: 46px !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    border: 1px solid rgba(16,44,79,.28) !important;
    box-shadow: 0 8px 16px rgba(16,44,79,.14) !important;
}

html body .topbar-search-modal .topbar-search-submit svg {
    width: 18px !important;
    height: 18px !important;
    stroke: #102c4f !important;
}

html body .topbar-search-modal .topbar-search-submit:hover {
    background: #f3f7fc !important;
    border-color: #102c4f !important;
    box-shadow: 0 10px 18px rgba(16,44,79,.22) !important;
}

@media (max-width: 768px) {
    html body .topbar-search-modal .topbar-search-dialog {
        width: calc(100vw - 20px) !important;
        min-height: 250px !important;
        border-radius: 16px !important;
        padding: 12px !important;
    }

    html body .topbar-search-modal .topbar-search-form-modal {
        flex-wrap: wrap !important;
    }

    html body .topbar-search-modal .topbar-search-input-wrap,
    html body .topbar-search-modal .topbar-search-input,
    html body .topbar-search-modal .topbar-search-submit {
        width: 100% !important;
    }

    html body .topbar-search-modal .topbar-search-input {
        height: 44px !important;
    }

    html body .topbar-search-modal .topbar-search-submit {
        height: 44px !important;
        min-width: 100% !important;
        border-radius: 12px !important;
    }
}

/* ========================================
   FINAL MOBILE BUTTON SYSTEM (main site)
   ======================================== */
@media (max-width: 576px) {
    .section-btn,
    .section-head .section-btn,
    .pest-library-head .section-btn,
    .home-services-section .section-head .section-btn {
        min-height: 40px !important;
        padding: 8px 14px !important;
        border-radius: 12px !important;
        font-size: .82rem !important;
        min-width: 124px !important;
        width: auto !important;
        white-space: nowrap !important;
    }

    .section-head h2 {
        font-size: 1.18rem !important;
        line-height: 1.35 !important;
    }

    .section h3,
    .cardx h3,
    .pest-meta h3 {
        font-size: 1rem !important;
        line-height: 1.35 !important;
    }

    html body:not(.customer-body) .site-main .btn,
    html body:not(.customer-body) .site-main button.btn,
    html body:not(.customer-body) .site-main a.btn,
    html body:not(.customer-body) .site-main .hero-btn {
        min-height: 38px !important;
        padding: 7px 10px !important;
        font-size: .82rem !important;
        line-height: 1.25 !important;
        border-radius: 10px !important;
        min-width: 96px !important;
        width: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        text-align: center !important;
        word-break: normal !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body:not(.customer-body) .site-main .btn.w-100,
    html body:not(.customer-body) .site-main button.w-100,
    html body:not(.customer-body) .site-main a.w-100 {
        width: 100% !important;
    }

    html body:not(.customer-body) .site-main .orkin-hero__actions,
    html body:not(.customer-body) .site-main .contact-quick-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    html body:not(.customer-body) .site-main .orkin-hero__actions > *,
    html body:not(.customer-body) .site-main .contact-quick-actions > * {
        flex: 1 1 calc(50% - 4px) !important;
        min-width: 100px !important;
    }
}

/* ========================================
   MOBILE H2 SINGLE-LINE FIX
   ======================================== */
@media (max-width: 576px) {
    html body .site-main h2,
    html body .site-main .section h2,
    html body .site-main .section-head h2 {
        font-size: 1.12rem !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }
}

@media (max-width: 360px) {
    html body .site-main h2,
    html body .site-main .section h2,
    html body .site-main .section-head h2 {
        font-size: 1.02rem !important;
    }
}

@media (max-width: 360px) {
    html body:not(.customer-body) .site-main .btn,
    html body:not(.customer-body) .site-main button.btn,
    html body:not(.customer-body) .site-main a.btn,
    html body:not(.customer-body) .site-main .hero-btn {
        min-height: 34px !important;
        padding: 5px 8px !important;
        font-size: .76rem !important;
        min-width: 88px !important;
    }

    html body:not(.customer-body) .site-main .orkin-hero__actions > *,
    html body:not(.customer-body) .site-main .contact-quick-actions > * {
        flex: 1 1 100% !important;
    }
}

/* ========================================
   FINAL MOBILE HERO FULL-RESPONSIVE FIX
   ======================================== */
@media (max-width: 768px) {
    html body .container .orkin-hero,
    html body .site .orkin-hero,
    html body .orkin-hero {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: auto !important;
        right: auto !important;
    }

    html body .orkin-hero {
        height: auto !important;
        min-height: 460px !important;
        max-height: none !important;
        overflow: hidden !important;
    }

    html body .orkin-hero__content {
        min-height: 460px !important;
        align-items: flex-end !important;
        padding-bottom: 54px !important;
    }

    html body .orkin-hero__box {
        width: calc(100% - 24px) !important;
        max-width: none !important;
        margin-inline: 12px !important;
        padding: 14px 12px !important;
        border-radius: 14px !important;
    }

    html body .orkin-hero__title {
        font-size: 1.04rem !important;
        line-height: 1.35 !important;
        margin-bottom: 8px !important;
    }

    html body .orkin-hero__subtitle {
        font-size: .88rem !important;
        line-height: 1.55 !important;
        margin-bottom: 10px !important;
    }

    html body .orkin-hero__arrow {
        width: 34px !important;
        height: 34px !important;
        font-size: 24px !important;
    }

    html body .orkin-hero__dots {
        bottom: 14px !important;
    }
}

@media (max-width: 420px) {
    html body .orkin-hero {
        min-height: 500px !important;
    }

    html body .orkin-hero__content {
        min-height: 500px !important;
        padding-bottom: 52px !important;
    }
}

@media (min-width: 769px) and (max-width: 992px) {
    html body .container .orkin-hero,
    html body .site .orkin-hero,
    html body .orkin-hero {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: auto !important;
        right: auto !important;
        min-height: 480px !important;
        height: auto !important;
    }

    html body .orkin-hero__content {
        min-height: 480px !important;
        align-items: flex-end !important;
        padding-bottom: 56px !important;
    }

    html body .orkin-hero__box {
        width: calc(100% - 36px) !important;
        margin-inline: 18px !important;
        max-width: 720px !important;
    }
}

/* LTR: keep to-top directly above support widget when open */
html[dir="ltr"] body:not(.support-closed) .to-top {
    left: 25px !important;
    right: auto !important;
}

@media (max-width: 576px) {
    html[dir="ltr"] body:not(.support-closed) .to-top {
        left: 14px !important;
        right: auto !important;
    }
}

/* ========================================
   ORKIN HERO AUTHORITATIVE LAYOUT
   single source of truth across breakpoints
   ======================================== */
html body .orkin-hero {
    position: relative !important;
    overflow: hidden !important;
    background: #0b1220 !important;
}

html body .orkin-hero__slides,
html body .orkin-hero__slide,
html body .orkin-hero__overlay {
    position: absolute !important;
    inset: 0 !important;
}

html body .orkin-hero__content {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    justify-content: flex-start !important;
}

html body .orkin-hero__box {
    box-sizing: border-box !important;
}

@media (min-width: 993px) {
    html body .container .orkin-hero,
    html body .site .orkin-hero,
    html body .orkin-hero {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        height: clamp(520px, 75vh, 900px) !important;
    }

    html body .orkin-hero__content {
        height: 100% !important;
        align-items: center !important;
    }

    html body .orkin-hero__box {
        max-width: 560px !important;
        margin-inline-start: 24px !important;
        margin-inline-end: 0 !important;
        margin-top: 100px !important;
    }
}

@media (max-width: 992px) {
    html body .container .orkin-hero,
    html body .site .orkin-hero,
    html body .orkin-hero {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: auto !important;
        right: auto !important;
        height: auto !important;
        max-height: none !important;
    }

    html body .orkin-hero__content {
        align-items: flex-end !important;
        min-height: 480px !important;
        padding-bottom: 54px !important;
    }

    html body .orkin-hero__box {
        width: calc(100% - 24px) !important;
        max-width: none !important;
        margin-inline: 12px !important;
        padding: 14px 12px !important;
        border-radius: 14px !important;
    }
}

@media (max-width: 420px) {
    html body .orkin-hero__content {
        min-height: 500px !important;
    }
}

/* ========================================
   FINAL HERO WIDTH FIX (mobile + tablet)
   Prevent half-visible slider on narrow viewports
   ======================================== */
@media (max-width: 992px) {
    html body .site-main .orkin-hero,
    html body .container .orkin-hero,
    html body .site .orkin-hero,
    html body .orkin-hero {
        position: relative !important;
        width: 100dvw !important;
        max-width: 100dvw !important;
        margin-left: calc(50% - 50dvw) !important;
        margin-right: calc(50% - 50dvw) !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        overflow: hidden !important;
    }

    html body .orkin-hero__slides,
    html body .orkin-hero__slide,
    html body .orkin-hero__overlay {
        width: 100% !important;
        max-width: 100% !important;
    }

    html body .orkin-hero__slide {
        background-size: cover !important;
        background-position: center center !important;
    }

    /* Keep hero content visible on tablet; mobile handled below */
    html body .orkin-hero__box {
        display: block !important;
    }
}

@media (max-width: 768px) {
    /* User request: hide slider content box on mobile */
    html body .orkin-hero__box {
        display: none !important;
    }
}

/* Footer full-bleed alignment */
html body .site-footer,
html body .site-footbar,
html body .site-footbar__inner {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
}

html body .site-footer {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

html body .site-footer .footer-grid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}