/*
Theme Name: Pejvak Rayaneh
Author: ThemesCamp
Author URI: http://themeforest.net/user/themescamp
Theme URI: https://themeforest.net/item/iteck-software-technology-wordpress-theme/38682639
Template: iteck
Description: Custom child theme for Pejvak Rayaneh based on Iteck.
Version: 1.0.0
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: iteck-child
Tags: one-column, two-columns, right-sidebar, custom-colors, featured-images
*/

/* =========================================================
   0. PEJVAK DESIGN SYSTEM TOKENS
   Central reference for the brand palette. The parent theme's
   own --color-main/-primary/-secondary/-ternary variables
   (set via Redux, see section 72) remain the actual mechanism
   driving most of the site's default styling - these tokens
   are for new child-theme CSS going forward, so colors are
   named once instead of repeating raw hex throughout the file.
   ========================================================= */

:root {
    --pejvak-primary: #233A7A;
    --pejvak-secondary: #29AAE1;
    --pejvak-dark: #162653;
    --pejvak-mid: #36549A;

    --pejvak-light-blue: #DDF3FC;
    --pejvak-ultra-light: #F2FAFD;

    --pejvak-white: #FFFFFF;
    --pejvak-ice: #F7FAFC;
    --pejvak-mist: #F1F5F9;
    --pejvak-cloud: #E6ECF3;
    --pejvak-silver: #C8D5E1;

    --pejvak-slate-400: #94A3B8;
    --pejvak-slate-600: #475569;
    --pejvak-slate-700: #334155;
    --pejvak-slate-900: #0F172A;

    --pejvak-success: #16A34A;
    --pejvak-warning: #D97706;
    --pejvak-error: #DC2626;
    --pejvak-info: #0284C7;
}


/* =========================================================
   PEJVAK RAYANEH
   GLOBAL PINAR TYPOGRAPHY SYSTEM
   ========================================================= */


/* =========================================================
   01. FONT VARIABLES + PINAR FONT-FACE (root-cause fix)

   ROOT CAUSE FOUND DURING PERFORMANCE AUDIT: every text selector
   in this file already requests "Pinar VF"/"Pinar FD VF" via
   var(--pejvak-font), and both variable-font files already exist
   at wp-content/uploads/fonts/ - but no @font-face declaration
   defining those two family names existed anywhere in either
   theme, any plugin, or the database (confirmed by a full-project
   search). With no @font-face, "Pinar VF" cannot match any font
   the browser knows about, so every visitor has always silently
   fallen through the whole stack to the final generic
   "sans-serif" - the site has never actually rendered in Pinar on
   any real visitor's screen. This adds the missing declarations
   only; it does not change the font stack, add a different font,
   or touch any of the existing font-family rules that already
   reference these exact two names.

   font-weight:100 900 exposes the full variable-weight axis from
   one file each (these are true variable fonts), so no separate
   per-weight files are needed - one request per family covers
   every weight already used in the CSS. font-display:swap avoids
   blocking text rendering on the font request (text paints
   immediately in the fallback, then swaps to Pinar once loaded),
   and the primary family is preloaded (see wp_head preload in
   inc/pejvak-performance.php) since it is needed for the very
   first paint of visible text.
   ========================================================= */

@font-face {
    font-family: "Pinar VF";
    src: url("/wp-content/uploads/fonts/Pinar-VFwght-KSHD-DSTY.woff2") format("woff2-variations"),
         url("/wp-content/uploads/fonts/Pinar-VFwght-KSHD-DSTY.woff2") format("woff2"),
         url("/wp-content/uploads/fonts/Pinar-VFwght-KSHD-DSTY.ttf") format("truetype-variations"),
         url("/wp-content/uploads/fonts/Pinar-VFwght-KSHD-DSTY.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Pinar FD VF";
    src: url("/wp-content/uploads/fonts/Pinar-FD-VFwght-KSHD-DSTY.woff2") format("woff2-variations"),
         url("/wp-content/uploads/fonts/Pinar-FD-VFwght-KSHD-DSTY.woff2") format("woff2"),
         url("/wp-content/uploads/fonts/Pinar-FD-VFwght-KSHD-DSTY.ttf") format("truetype-variations"),
         url("/wp-content/uploads/fonts/Pinar-FD-VFwght-KSHD-DSTY.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --pejvak-font:
        "Pinar VF",
        "Pinar FD VF",
        sans-serif;
}


/* =========================================================
   02. GLOBAL DOCUMENT
   ========================================================= */

html,
body {
    font-family: var(--pejvak-font) !important;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* =========================================================
   02a. STICKY FOOTER (PASS 22 - corrected)

   Two earlier attempts (Pass 19, Pass 20) on this exact issue were
   both reverted: Pass 19 made the content wrapper (.blank-builder)
   flex:1, which left blank space INSIDE it, above the footer
   (wrong place, same root cause). Pass 20 tried to cascade that
   flex onto the wrapper's direct children - but on an Elementor
   page, .blank-builder's real direct child is a plain, non-
   stretching div Elementor always prints
   (<div class="elementor elementor-{id}">), with the actual
   colored section ANOTHER level deeper. Stretching that
   intermediate div just moved the blank space one level in,
   still above the footer - confirmed by inspecting the real DOM
   nesting (.blank-builder > div.elementor.elementor-2622 >
   section.elementor-top-section), not guessed this time.

   Fix: give that intermediate div `display:contents` so it
   generates NO box of its own - its child (the real, colored
   top-level section) becomes a genuine direct flex item of
   .blank-builder and can legitimately stretch, extending its own
   background all the way to the footer with zero gap on either
   side. `display:contents` does not change which selectors match
   (the DOM tree for CSS purposes is unchanged) - only removes
   that one div from the render/box tree. No negative margins, no
   fixed positioning, no overflow tricks. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

body > .blank-builder,
body > .content.blog-wrapper,
body > .pj-services {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}

body > .blank-builder > .elementor,
body > .content.blog-wrapper > .elementor,
body > .pj-services > .elementor {
    display: contents;
}

body > .blank-builder > .elementor > .elementor-top-section,
body > .content.blog-wrapper > .elementor > .elementor-top-section,
body > .pj-services > .elementor > .elementor-top-section {
    flex: 1 0 auto;
}

/* =========================================================
   02b. GLOBAL OVERFLOW / SIZING GUARDRAILS
   Site-wide safety net: no element may exceed viewport width.
   Applies everywhere (header, content, footer, Elementor
   widgets) without touching any specific widget's own CSS.
   ========================================================= */

* {
    box-sizing: border-box;
}

/* Removed 2026-10-10: html,body{overflow-x:clip} was a blanket mask,
   not a fix - repeatedly flagged as something to stop relying on.
   The specific sources found so far (homepage hero absolute image
   b0159f2, which Elementor itself already clips via its own parent
   overflow:hidden; oversized hero/section padding on 396280b and
   4d3e83f) are fixed at their own element in sections 92/92b above.
   If a real-browser pass later finds a remaining overflow source, it
   should be fixed at that element, not re-added here as a sitewide
   net. */

img,
video,
svg,
iframe {
    max-width: 100%;
    height: auto;
}

/* =========================================================
   02c. GLOBAL RESPONSIVE TOKENS
   clamp()-based spacing/type scale so sizing stays consistent
   across phone/tablet/laptop/large-monitor instead of jumping
   at fixed breakpoints. Opt-in via the utility classes below;
   does not override any existing Elementor/widget sizing.
   ========================================================= */

:root {
    --pejvak-container-max: 1200px;
    --pejvak-container-wide: 1320px;
    --pejvak-container-narrow: 800px;
    --pejvak-container-pad: clamp(12px, 4vw, 24px);

    --pejvak-space-xs: clamp(6px, 1vw, 10px);
    --pejvak-space-sm: clamp(10px, 1.5vw, 16px);
    --pejvak-space-md: clamp(16px, 2.5vw, 28px);
    --pejvak-space-lg: clamp(24px, 4vw, 48px);
    --pejvak-space-xl: clamp(32px, 6vw, 72px);

    --pejvak-fs-sm: clamp(0.8rem, 0.75rem + 0.2vw, 0.9rem);
    --pejvak-fs-base: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
    --pejvak-fs-h6: clamp(0.9rem, 0.85rem + 0.2vw, 1rem);
    --pejvak-fs-h5: clamp(1rem, 0.92rem + 0.3vw, 1.1rem);
    --pejvak-fs-h4: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
    --pejvak-fs-h3: clamp(1.15rem, 1rem + 0.8vw, 1.5rem);
    --pejvak-fs-h2: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem);
    --pejvak-fs-h1: clamp(1.7rem, 1.3rem + 2vw, 2.6rem);

    /* PASS 14: radius scale - referenced by the new Gutenberg/classic
       content defaults further down, and available for future use. */
    --pejvak-radius-sm: 8px;
    --pejvak-radius-md: 12px;
    --pejvak-radius-lg: 16px;

    /* PASS 5: card padding/gap tokens, added now that a real card
       component (services page) needs them. Values match the
       design-system brief's own suggested ranges (16-24px padding,
       12-20px gap). NOT used for the services page's own compact
       cards - see --pejvak-card-padding-compact below - these two
       stay available for a FUTURE, visually roomier card
       (reserved, matches no selector today). */
    --pejvak-card-padding: clamp(16px, 2vw, 24px);
    --pejvak-card-gap: clamp(12px, 1.5vw, 20px);

    /* PASS 5 CORRECTION: the services page's existing cards
       (.pjs-service-link etc.) were already compact (12px/10-12px
       fixed) before Pass 5 touched them. Applying the roomier
       tokens above by mistake INCREASED their padding/gap instead
       of reducing it, the opposite of this pass's goal. This
       dedicated, smaller token keeps the same ~12px floor the
       cards already had and only grows to 16px on the widest
       screens, so the computed value at every width is <= the
       original fixed value plus at most 4px - a mild, genuinely
       compact responsive upgrade instead of an increase. */
    --pejvak-card-padding-compact: clamp(12px, 1vw, 16px);
    --pejvak-card-gap-compact: clamp(12px, 1vw, 16px);
}


/* =========================================================
   02d. REUSABLE CONTAINER + SPACING UTILITIES (PASS 2)
   Opt-in only: none of these selectors match any existing
   markup today, so nothing currently on the site changes.
   They exist so a FUTURE Elementor page/section/widget can
   adopt the same tokens from 02c above by adding one of these
   class names via Elementor's own Advanced > CSS Classes
   field - the same opt-in convention this project already
   uses for the mega-menu system (see CLAUDE.md, "nav-mega").

   Containers: three fixed-token widths (default/wide/narrow,
   Phase 3 of the design-system brief) instead of arbitrary
   per-page max-widths. All three are centered, fluid below
   their cap, and carry their own safe side padding so content
   never touches the viewport edge.

   Spacing: xs/sm/md/lg/xl margin + padding + gap helpers bound
   to the same clamp() tokens as the containers, so anything
   using them automatically scales between phone and large
   monitor with no extra media queries.

   Nothing here touches .elementor-section, .elementor-column,
   or any id-based selector from earlier sections - existing
   pages, the mega menu, the header/footer and section 90's
   site-wide compaction are all unaffected.
   ========================================================= */

.pejvak-container,
.pejvak-container-wide,
.pejvak-container-narrow {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--pejvak-container-pad);
    box-sizing: border-box;
}

.pejvak-container {
    max-width: var(--pejvak-container-max);
}

.pejvak-container-wide {
    max-width: var(--pejvak-container-wide);
}

.pejvak-container-narrow {
    max-width: var(--pejvak-container-narrow);
}

/* Margin / padding / gap helpers, one axis each so they can be
   combined (e.g. class="pejvak-mt-lg pejvak-mb-md") without an
   explosion of fixed combinations. */

.pejvak-mt-xs { margin-top: var(--pejvak-space-xs) !important; }
.pejvak-mt-sm { margin-top: var(--pejvak-space-sm) !important; }
.pejvak-mt-md { margin-top: var(--pejvak-space-md) !important; }
.pejvak-mt-lg { margin-top: var(--pejvak-space-lg) !important; }
.pejvak-mt-xl { margin-top: var(--pejvak-space-xl) !important; }

.pejvak-mb-xs { margin-bottom: var(--pejvak-space-xs) !important; }
.pejvak-mb-sm { margin-bottom: var(--pejvak-space-sm) !important; }
.pejvak-mb-md { margin-bottom: var(--pejvak-space-md) !important; }
.pejvak-mb-lg { margin-bottom: var(--pejvak-space-lg) !important; }
.pejvak-mb-xl { margin-bottom: var(--pejvak-space-xl) !important; }

.pejvak-pt-xs { padding-top: var(--pejvak-space-xs) !important; }
.pejvak-pt-sm { padding-top: var(--pejvak-space-sm) !important; }
.pejvak-pt-md { padding-top: var(--pejvak-space-md) !important; }
.pejvak-pt-lg { padding-top: var(--pejvak-space-lg) !important; }
.pejvak-pt-xl { padding-top: var(--pejvak-space-xl) !important; }

.pejvak-pb-xs { padding-bottom: var(--pejvak-space-xs) !important; }
.pejvak-pb-sm { padding-bottom: var(--pejvak-space-sm) !important; }
.pejvak-pb-md { padding-bottom: var(--pejvak-space-md) !important; }
.pejvak-pb-lg { padding-bottom: var(--pejvak-space-lg) !important; }
.pejvak-pb-xl { padding-bottom: var(--pejvak-space-xl) !important; }

/* Gap helpers for a flex/grid container (e.g. an Elementor
   Container in flex mode, or a widget's own wrapping element) -
   matches the card-gap range (12-20px) up through the larger
   section-gap range, all from the same token scale. */
.pejvak-gap-xs { gap: var(--pejvak-space-xs) !important; }
.pejvak-gap-sm { gap: var(--pejvak-space-sm) !important; }
.pejvak-gap-md { gap: var(--pejvak-space-md) !important; }
.pejvak-gap-lg { gap: var(--pejvak-space-lg) !important; }
.pejvak-gap-xl { gap: var(--pejvak-space-xl) !important; }

/* Elementor's own Container/Section element already sets
   box-sizing + width via its own CSS; the rules above only add
   max-width/padding/margin on top when one of these classes is
   present, so wrapping an Elementor Container in e.g.
   "pejvak-container-narrow" narrows it for reading content
   (long-form service/blog text) without breaking Elementor's
   own flex/grid layout controls inside it. */


/* =========================================================
   03. BASIC TEXT
   ========================================================= */

p,
span,
a,
strong,
b,
em,
small,
mark,
del,
ins,
sub,
sup,
abbr,
cite,
q,
time,
address,
figcaption,
caption,
summary,
details {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   04. HEADINGS
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   05. LISTS
   ========================================================= */

ul,
ol,
li,
dl,
dt,
dd {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   06. LINKS
   ========================================================= */

a,
a:link,
a:visited,
a:hover,
a:focus,
a:active {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   07. FORMS
   ========================================================= */

form,
fieldset,
legend,
label,
input,
textarea,
select,
option,
optgroup,
button {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   08. INPUT TYPES
   ========================================================= */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="submit"],
input[type="button"],
input[type="reset"] {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   09. PLACEHOLDERS
   ========================================================= */

input::placeholder,
textarea::placeholder,
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
input::-moz-placeholder,
textarea::-moz-placeholder {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   10. BUTTONS
   ========================================================= */

button,
.button,
.btn,
input[type="submit"],
input[type="button"],
input[type="reset"],
.wp-block-button,
.wp-block-button__link {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   11. TABLES
   ========================================================= */

table,
thead,
tbody,
tfoot,
tr,
th,
td,
caption {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   12. QUOTES
   ========================================================= */

blockquote,
blockquote p,
blockquote span,
q {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   13. WORDPRESS CONTENT
   ========================================================= */

.entry-content,
.entry-content p,
.entry-content span,
.entry-content a,
.entry-content li,
.entry-content strong,

.post-content,
.post-content p,
.post-content span,
.post-content a,
.post-content li,

.page-content,
.page-content p,
.page-content span,
.page-content a,

.site-content,
.site-main {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   14. WORDPRESS TITLES
   ========================================================= */

.entry-title,
.page-title,
.post-title,
.site-title,
.site-description,
.widget-title,
.archive-title,
.search-title {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   14b. GENERIC CONTENT TYPOGRAPHY DEFAULTS - GUTENBERG/CLASSIC
   (PASS 14 - site-wide design system)

   Sections 13/14 above only ever forced font-family on these
   selectors - no size, line-height or spacing default existed for
   them. In practice this meant ANY page not built in Elementor
   (a Classic/Block-Editor page, a future blog post, a manually
   created page) fell back entirely to the parent theme's own
   demo-era sizing, with none of the --pejvak-* compact system
   applied. This is purely additive - new rules on selectors that
   previously had no size/spacing rule at all, so no existing
   Elementor-rendered page (which uses its own widget classes, not
   these content-wrapper selectors) is affected.
   ========================================================= */

.entry-content h1, .page-content h1, .wp-block-post-content h1 { font-size: var(--pejvak-fs-h1); margin: 0 0 var(--pejvak-space-md); line-height: 1.3; }
.entry-content h2, .page-content h2, .wp-block-post-content h2 { font-size: var(--pejvak-fs-h2); margin: var(--pejvak-space-lg) 0 var(--pejvak-space-sm); line-height: 1.3; }
.entry-content h3, .page-content h3, .wp-block-post-content h3 { font-size: var(--pejvak-fs-h3); margin: var(--pejvak-space-md) 0 var(--pejvak-space-sm); line-height: 1.4; }
.entry-content h4, .page-content h4, .wp-block-post-content h4 { font-size: var(--pejvak-fs-h4); margin: var(--pejvak-space-md) 0 var(--pejvak-space-xs); line-height: 1.4; }
.entry-content h5, .page-content h5, .wp-block-post-content h5 { font-size: var(--pejvak-fs-h5); margin: var(--pejvak-space-sm) 0 var(--pejvak-space-xs); line-height: 1.5; }
.entry-content h6, .page-content h6, .wp-block-post-content h6 { font-size: var(--pejvak-fs-h6); margin: var(--pejvak-space-sm) 0 var(--pejvak-space-xs); line-height: 1.5; }

.entry-content p, .page-content p, .wp-block-post-content p {
    font-size: var(--pejvak-fs-base);
    line-height: 1.8;
    margin: 0 0 var(--pejvak-space-sm);
}

.entry-content img, .page-content img, .wp-block-post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--pejvak-radius-sm);
}

/* Gutenberg's own button block only - WooCommerce/.button are
   intentionally NOT targeted here to avoid touching an unrelated,
   already-styled component. */
.entry-content .wp-block-button__link,
.page-content .wp-block-button__link {
    padding: 10px 20px;
    border-radius: var(--pejvak-radius-sm);
    background: var(--pejvak-primary);
    color: #fff;
    transition: background-color 0.2s ease;
}
.entry-content .wp-block-button__link:hover,
.page-content .wp-block-button__link:hover {
    background: var(--pejvak-secondary);
}

.entry-content .wp-block-group,
.entry-content .wp-block-columns,
.page-content .wp-block-group,
.page-content .wp-block-columns {
    margin-bottom: var(--pejvak-space-md);
}


/* =========================================================
   15. WORDPRESS WIDGETS
   ========================================================= */

.widget,
.widget p,
.widget span,
.widget a,
.widget li,

.sidebar,
.sidebar p,
.sidebar span,
.sidebar a,
.sidebar li,

.widget-area,
.widget-area p,
.widget-area span,
.widget-area a,
.widget-area li {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   16. HEADER
   ========================================================= */

header,
header p,
header span,
header a,
header li,

.site-header,
.site-header p,
.site-header span,
.site-header a,
.site-header li,

.header,
.header p,
.header span,
.header a,
.header li,

.header-area,
.header-area p,
.header-area span,
.header-area a,
.header-area li {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   17. NAVIGATION
   ========================================================= */

nav,
nav a,
nav span,
nav li,

.navbar,
.navbar a,
.navbar span,
.navbar li,

.navigation,
.navigation a,
.navigation span,
.navigation li,

.main-navigation,
.main-navigation a,
.main-navigation span,
.main-navigation li {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   18. MAIN MENU
   ========================================================= */

.menu,
.menu a,
.menu span,
.menu li,

.menu-item,
.menu-item a,
.menu-item span,

.current-menu-item,
.current-menu-item a,

.current-menu-parent,
.current-menu-parent a,

.current_page_item,
.current_page_item a {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   19. DROPDOWN MENU
   ========================================================= */

.sub-menu,
.sub-menu a,
.sub-menu span,
.sub-menu li,

.dropdown-menu,
.dropdown-menu a,
.dropdown-menu span,
.dropdown-menu li {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   20. MOBILE MENU
   ========================================================= */

.mobile-menu,
.mobile-menu a,
.mobile-menu span,
.mobile-menu li,

.mobile-nav,
.mobile-nav a,
.mobile-nav span,
.mobile-nav li,

.navbar-collapse,
.navbar-collapse a,
.navbar-collapse span,
.navbar-collapse li,

.navbar-nav,
.navbar-nav a,
.navbar-nav span,
.navbar-nav li,

.offcanvas,
.offcanvas a,
.offcanvas span,
.offcanvas li,

.offcanvas-menu,
.offcanvas-menu a,
.offcanvas-menu span,
.offcanvas-menu li {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   21. FOOTER
   ========================================================= */

footer,
footer p,
footer span,
footer a,
footer li,
footer strong,

.site-footer,
.site-footer p,
.site-footer span,
.site-footer a,
.site-footer li,

.footer,
.footer p,
.footer span,
.footer a,
.footer li,

.footer-area,
.footer-area p,
.footer-area span,
.footer-area a,
.footer-area li {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   22. ELEMENTOR GLOBAL
   ========================================================= */

.elementor,
.elementor-widget,
.elementor-widget-container {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   23. ELEMENTOR HEADINGS
   ========================================================= */

.elementor-heading-title,
.elementor-widget-heading,
.elementor-widget-heading .elementor-heading-title,

.elementor-widget-heading h1,
.elementor-widget-heading h2,
.elementor-widget-heading h3,
.elementor-widget-heading h4,
.elementor-widget-heading h5,
.elementor-widget-heading h6 {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   24. ELEMENTOR TEXT EDITOR
   ========================================================= */

.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor span,
.elementor-widget-text-editor a,
.elementor-widget-text-editor li,
.elementor-widget-text-editor strong,
.elementor-widget-text-editor b {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   25. ELEMENTOR BUTTON
   ========================================================= */

.elementor-button,
.elementor-button-text,
.elementor-widget-button,
.elementor-widget-button a,
.elementor-widget-button span {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   26. ELEMENTOR ICON LIST - TEXT ONLY
   ========================================================= */

.elementor-icon-list-items,
.elementor-icon-list-item,
.elementor-icon-list-text {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   27. ELEMENTOR TABS
   ========================================================= */

.elementor-tabs,
.elementor-tab-title,
.elementor-tab-content,
.elementor-tab-content p,
.elementor-tab-content span {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   28. ELEMENTOR ACCORDION
   ========================================================= */

.elementor-accordion,
.elementor-accordion-item,
.elementor-accordion-title,
.elementor-accordion .elementor-tab-title,
.elementor-accordion .elementor-tab-content,
.elementor-accordion .elementor-tab-content p {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   29. ELEMENTOR TOGGLE
   ========================================================= */

.elementor-toggle,
.elementor-toggle-item,
.elementor-toggle-title,
.elementor-toggle .elementor-tab-title,
.elementor-toggle .elementor-tab-content {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   30. ELEMENTOR COUNTER
   ========================================================= */

.elementor-counter,
.elementor-counter-number-wrapper,
.elementor-counter-number,
.elementor-counter-title {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   31. ELEMENTOR PROGRESS BAR
   ========================================================= */

.elementor-progress-wrapper,
.elementor-progress-text,
.elementor-progress-percentage,
.elementor-title {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   32. ELEMENTOR TESTIMONIAL
   ========================================================= */

.elementor-testimonial-wrapper,
.elementor-testimonial-content,
.elementor-testimonial-name,
.elementor-testimonial-job {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   33. ELEMENTOR FORMS
   ========================================================= */

.elementor-form,
.elementor-field,
.elementor-field-label,
.elementor-field-option,
.elementor-field-group,
.elementor-field-group label,
.elementor-field-group input,
.elementor-field-group textarea,
.elementor-field-group select {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   34. ELEMENTOR SEARCH
   ========================================================= */

.elementor-search-form,
.elementor-search-form input,
.elementor-search-form button,
.elementor-search-form__input {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   35. ELEMENTOR POSTS
   ========================================================= */

.elementor-post,
.elementor-post__title,
.elementor-post__excerpt,
.elementor-post__excerpt p,
.elementor-post__meta-data,
.elementor-post__read-more {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   36. ITECK HEADINGS
   ========================================================= */

.iteck-heading,
.iteck-heading-title,

.iteck-heading h1,
.iteck-heading h2,
.iteck-heading h3,
.iteck-heading h4,
.iteck-heading h5,
.iteck-heading h6,

.iteck-heading p,
.iteck-heading span,
.iteck-heading a {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   37. ITECK TITLES
   ========================================================= */

.iteck-title,
.iteck-title p,
.iteck-title span,

.section-title,
.section-title p,
.section-title span,

.section-head,
.section-head p,
.section-head span {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   38. ITECK TEXTUAL WIDGETS
   Do not force font on icon elements
   ========================================================= */

[class*="iteck-"] p,
[class*="iteck-"] a,
[class*="iteck-"] li,
[class*="iteck-"] label,
[class*="iteck-"] button,

[class*="iteck-"] h1,
[class*="iteck-"] h2,
[class*="iteck-"] h3,
[class*="iteck-"] h4,
[class*="iteck-"] h5,
[class*="iteck-"] h6 {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   39. HERO / BANNER
   ========================================================= */

.hero p,
.hero span,
.hero a,
.hero button,
.hero h1,
.hero h2,
.hero h3,

.hero-section p,
.hero-section span,
.hero-section a,

.hero-content p,
.hero-content span,
.hero-content a,

.banner p,
.banner span,
.banner a,
.banner button,
.banner h1,
.banner h2,
.banner h3,

.banner-content p,
.banner-content span {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   40. SLIDER / SWIPER TEXT
   ========================================================= */

.slider p,
.slider span,
.slider a,
.slider button,

.slider-content p,
.slider-content span,

.swiper-slide p,
.swiper-slide span,
.swiper-slide a,
.swiper-slide h1,
.swiper-slide h2,
.swiper-slide h3 {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   41. SERVICES
   ========================================================= */

.services p,
.services span,
.services a,
.services li,

.service p,
.service span,
.service a,

.service-item p,
.service-item span,
.service-item a,

.services-item p,
.services-item span,
.services-item a {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   42. CARDS
   ========================================================= */

.card p,
.card span,
.card a,

.service-card p,
.service-card span,
.service-card a,

.services-card p,
.services-card span,
.services-card a,

.project-card p,
.project-card span,
.project-card a,

.blog-card p,
.blog-card span,
.blog-card a {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   43. PROJECT / PORTFOLIO
   ========================================================= */

.project p,
.project span,
.project a,

.projects p,
.projects span,
.projects a,

.portfolio p,
.portfolio span,
.portfolio a,

.portfolio-item p,
.portfolio-item span,
.portfolio-item a {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   44. BLOG
   ========================================================= */

.blog p,
.blog span,
.blog a,

.post p,
.post span,
.post a,

.post-meta,
.post-meta span,
.post-meta a,

.post-info,
.post-info span,
.post-info a,

.author,
.author p,
.author span,
.author a {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   45. BREADCRUMB
   ========================================================= */

.breadcrumb,
.breadcrumb a,
.breadcrumb span,
.breadcrumb li,

.breadcrumbs,
.breadcrumbs a,
.breadcrumbs span,
.breadcrumbs li {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   46. PAGE HEADER
   ========================================================= */

.page-header p,
.page-header span,
.page-header a,
.page-header h1,
.page-header h2 {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   47. PAGINATION
   ========================================================= */

.pagination,
.pagination a,
.pagination span,

.page-numbers,
.nav-links,
.nav-links a,
.nav-links span {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   48. SEARCH
   ========================================================= */

.search-form,
.search-field,
.search-submit,

.search-results p,
.search-results span,
.search-results a {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   49. COMMENTS
   ========================================================= */

.comments-area,
.comments-area p,
.comments-area span,
.comments-area a,

.comment,
.comment p,
.comment span,
.comment a,

.comment-list,

.comment-form,
.comment-form input,
.comment-form textarea,
.comment-form label,
.comment-form button {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   50. POPUPS / MODALS
   ========================================================= */

.modal p,
.modal span,
.modal a,
.modal button,

.popup p,
.popup span,
.popup a,
.popup button,

.dialog-widget p,
.dialog-widget span,
.dialog-widget a,
.dialog-widget button {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   51. TOOLTIPS
   ========================================================= */

.tooltip,
.tooltip-inner,
.tippy-box,
.tippy-content {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   52. CONTACT FORM 7
   ========================================================= */

.wpcf7,
.wpcf7 p,
.wpcf7 span,
.wpcf7 label,
.wpcf7 input,
.wpcf7 textarea,
.wpcf7 select,
.wpcf7 button,
.wpcf7-form {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   53. WPFORMS
   ========================================================= */

.wpforms-container,
.wpforms-container p,
.wpforms-container span,
.wpforms-container label,
.wpforms-container input,
.wpforms-container textarea,
.wpforms-container select,
.wpforms-container button {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   54. GRAVITY FORMS
   ========================================================= */

.gform_wrapper,
.gform_wrapper p,
.gform_wrapper span,
.gform_wrapper label,
.gform_wrapper input,
.gform_wrapper textarea,
.gform_wrapper select,
.gform_wrapper button {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   55. FAQ / CTA / TEAM / PRICING / TESTIMONIAL
   ========================================================= */

.faq p,
.faq span,
.faq a,
.faq button,

.faq-item p,
.faq-item span,

.cta p,
.cta span,
.cta a,
.cta button,
.cta h1,
.cta h2,
.cta h3,

.team p,
.team span,
.team a,

.team-member p,
.team-member span,
.team-member a,

.testimonial p,
.testimonial span,
.testimonial a,

.testimonials p,
.testimonials span,
.testimonials a,

.pricing p,
.pricing span,
.pricing a,
.pricing button,

.pricing-table p,
.pricing-table span,
.pricing-table a {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   56. WOOCOMMERCE
   Future compatibility
   ========================================================= */

.woocommerce,
.woocommerce p,
.woocommerce span,
.woocommerce a,
.woocommerce li,
.woocommerce label,

.woocommerce-page,
.woocommerce-page p,
.woocommerce-page span,
.woocommerce-page a,

.woocommerce-cart,
.woocommerce-checkout,
.woocommerce-account,

.woocommerce .product_title,
.woocommerce-loop-product__title,
.woocommerce .price,
.woocommerce .amount,
.woocommerce-product-details__short-description {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   57. WOOCOMMERCE FORMS / BUTTONS
   ========================================================= */

.woocommerce button,
.woocommerce .button,
.woocommerce a.button,
.woocommerce input.button,

.woocommerce input,
.woocommerce textarea,
.woocommerce select,
.woocommerce option,
.woocommerce label {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   58. TABLET
   ========================================================= */

@media screen and (min-width: 768px) and (max-width: 1024px) {

    body,
    p,
    a,
    button,
    input,
    textarea,
    select,
    label,

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,

    .elementor-heading-title,
    .iteck-heading,
    .elementor-widget-text-editor,
    .elementor-button-text,

    header a,
    header span,

    .navbar a,
    .navbar span,

    .menu a,
    .menu span,

    .sub-menu a,
    .sub-menu span,

    footer a,
    footer span,
    footer p {
        font-family: var(--pejvak-font) !important;
    }
}


/* =========================================================
   59. MOBILE
   ========================================================= */

/* PASS 7: parent theme's base body text is 15px/line-height:1.8
   (iteck style.css) at every width, below the 16-18px mobile
   readability target. Desktop/tablet (already 15px, not flagged
   as a problem) are left untouched - this raises only the mobile
   floor, keeping the already-compliant line-height unchanged. */
@media screen and (max-width: 767px) {
    body {
        font-size: 16px;
    }
}

@media screen and (max-width: 767px) {

    body,
    p,
    a,
    button,
    input,
    textarea,
    select,
    label,

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,

    .elementor-heading-title,
    .iteck-heading,
    .elementor-widget-text-editor,
    .elementor-button,
    .elementor-button-text,

    header a,
    header span,

    nav a,
    nav span,

    .navbar a,
    .navbar span,

    .menu a,
    .menu span,

    .sub-menu a,
    .sub-menu span,

    .mobile-menu a,
    .mobile-menu span,

    .mobile-nav a,
    .mobile-nav span,

    .offcanvas a,
    .offcanvas span,

    footer a,
    footer span,
    footer p {
        font-family: var(--pejvak-font) !important;
    }
}


/* =========================================================
   60. SAFARI / iPHONE / iPAD
   ========================================================= */

@supports (-webkit-touch-callout: none) {

    body,
    p,
    a,
    button,
    input,
    textarea,
    select,
    label,

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,

    .elementor-heading-title,
    .iteck-heading,
    .elementor-widget-text-editor,
    .elementor-button,
    .elementor-button-text,

    header a,
    header span,

    nav a,
    nav span,

    footer a,
    footer span,
    footer p {
        font-family: var(--pejvak-font) !important;
    }

    /* Homepage "خدمات شرکت" section (elementor-element-678e11e)
       uses background-attachment:fixed for a desktop parallax
       effect. Fixed backgrounds are a well-documented WebKit/
       iOS limitation - Safari on iPhone/iPad does not render
       them reliably (image can fail to display, jump, or
       repaint incorrectly on scroll). Scoped to this one
       section and this one engine only; desktop and Android
       keep the existing fixed effect unchanged. !important is
       required here because Elementor's own generated rule
       (.elementor-2064 .elementor-element.elementor-element-
       678e11e:not(.elementor-motion-effects-element-type-
       background)) matches this selector at equal specificity
       and loads after this stylesheet, so a plain override
       would not win. */
    .elementor-2064 .elementor-element.elementor-element-678e11e:not(.elementor-motion-effects-element-type-background) {
        background-attachment: scroll !important;
    }
}


/* =========================================================
   61. FINAL ITECK / ELEMENTOR OVERRIDE
   ========================================================= */

body .elementor .iteck-heading,
body .elementor-widget-iteck-heading .iteck-heading,

body .elementor .elementor-heading-title,
body .elementor-widget-heading .elementor-heading-title,

body .elementor-widget-text-editor,
body .elementor-widget-text-editor p,
body .elementor-widget-text-editor span,
body .elementor-widget-text-editor a,

body .elementor-button,
body .elementor-button-text {
    font-family: var(--pejvak-font) !important;
}


/* =========================================================
   62. PROTECT FONT AWESOME
   ========================================================= */

.fa,
.fas,
.far,
.fal,
.fab,
.fa::before,
.fas::before,
.far::before,
.fal::before,
.fab::before {
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands" !important;
}


/* =========================================================
   63. PROTECT ELEMENTOR / ITECK ICONS
   ========================================================= */

.elementor-icon i,
.elementor-icon i::before,
.elementor-icon-list-icon i,
.elementor-icon-list-icon i::before {
    font-family: inherit;
}


/* SVG icons do not need Pinar */

svg,
svg *,
path,
use {
    font-family: initial !important;
}


/* =========================================================
   64. WORDPRESS ADMIN TOOLBAR
   IMPORTANT: PINAR MUST NOT BE APPLIED HERE
   ========================================================= */

#wpadminbar,
#wpadminbar *,
#wpadminbar a,
#wpadminbar span,
#wpadminbar div,
#wpadminbar li {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif !important;
}


/* =========================================================
   65. RESTORE WORDPRESS DASHICONS
   ========================================================= */

#wpadminbar .ab-icon,
#wpadminbar .ab-icon::before,
#wpadminbar .ab-item::before,
#wpadminbar .ab-node::before {
    font-family: dashicons !important;
}


/* =========================================================
   66. MAIN MENU - KEEP TOP-LEVEL ITEMS IN A SINGLE ROW
   Item spacing and column widths are controlled via the
   Elementor header widget settings (Header It template,
   post 1671 - menu widget's own horizontal padding control,
   plus the menu/search-button column width split). The one
   thing not exposed as a widget setting is preventing the
   inline-block menu items from wrapping to a second line,
   handled here. Scoped to the desktop menu only
   (#menu-main-menu, visible >=992px per the theme's own
   responsive breakpoint) so mobile/tablet nav is untouched.
   ========================================================= */

@media (min-width: 992px) {
    #menu-main-menu.navigation {
        white-space: nowrap;
    }
}


/* =========================================================
   67. HEADER LOGO - WHITE VERSION FOR CONTRAST
   The Pejvak logo file (logo-1-01.svg) uses a dark navy
   wordmark (#0f265c), which has poor contrast against this
   transparent header's dark/blue hero backgrounds. No white
   logo asset exists in the Media Library, so this converts
   the displayed logo to solid white via a CSS filter, scoped
   only to this header widget instance
   (.elementor-element-9f47f13) - the original file, other
   logo usages, and the Media Library asset are untouched.
   ========================================================= */

.elementor-element-9f47f13 .custom-logo img {
    filter: brightness(0) invert(1);
}


/* =========================================================
   68. REUSABLE MEGA MENU SYSTEM (Main Menu submenus)
   Permanent system per CLAUDE.md "Submenu / Mega Menu Design
   System" - NOT specific to خدمات. Any Main Menu item that
   needs a multi-column dropdown gets it by adding two WP menu
   item CSS classes (Appearance > Menus > item > CSS Classes),
   nothing here is tied to a menu-item ID:

     nav-mega              marks the item as a grid submenu
     nav-mega-cols-N        N = 1, 2, 3 or 4 (choose the tier
                            below based on current child count,
                            max ~6 items per column):
                              1-6 items  -> nav-mega-cols-1
                              7-12 items -> nav-mega-cols-2
                              13-18 items -> nav-mega-cols-3
                              19-24 items -> nav-mega-cols-4

   Small submenus (a handful of items) should NOT get these
   classes - they keep the theme's normal compact dropdown.

   The parent theme ships its own .mega-menu/.col2/.col3
   system, but it is built for CATEGORY columns (each direct
   li becomes one 25%/33% column with its own nested list) -
   not for laying out a flat list of leaf links evenly across
   columns - so it is not reused directly here. This instead
   reuses the same proven hover-reveal technique the theme's
   own .mega-menu already uses (opacity/visibility/transform,
   see style.css ~line 23731), applied generically via CSS
   Grid. Pure CSS - no JS added; hovering into the panel keeps
   it open because the panel is a descendant of the hovered li.

   Currently applied to: خدمات (nav-mega nav-mega-cols-3, 17
   items). To add another (e.g. پروژه‌ها or دانلودها) once it
   has enough children, just set its menu item's CSS Classes -
   no new CSS is needed here.
   ========================================================= */

@media (min-width: 992px) {
    .menu-item-has-children.nav-mega {
        position: relative;
    }

    .menu-item-has-children.nav-mega > ul.sub-menu {
        display: grid;
        grid-template-rows: repeat(6, auto);
        grid-auto-flow: column;
        column-gap: 28px;
        row-gap: 4px;

        position: absolute;
        top: 100%;
        right: 0;
        left: auto;
        max-width: calc(100vw - 40px);

        margin: 0;
        padding: 20px 24px;
        list-style: none;

        background: #ffffff;
        border-radius: 10px;
        border: 1px solid rgba(0, 0, 0, 0.06);
        box-shadow: 0 16px 40px rgba(15, 38, 92, 0.14);

        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
        z-index: 999;
        direction: rtl;
        text-align: right;
    }

    .menu-item-has-children.nav-mega:hover > ul.sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .menu-item-has-children.nav-mega > ul.sub-menu > li {
        width: auto;
        float: none;
        margin: 0;
        padding: 0;
        border: none;
        background: transparent;
    }

    .menu-item-has-children.nav-mega > ul.sub-menu > li > a {
        display: flex;
        align-items: center;
        min-height: 38px;
        padding: 6px 10px;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: none;
        text-align: right;
        color: #0F172A;
        white-space: normal;
        line-height: 1.4;
        transition: background-color 0.15s ease, color 0.15s ease;
    }

    .menu-item-has-children.nav-mega > ul.sub-menu > li > a:hover {
        background-color: #F2FAFD;
        color: #233A7A;
        opacity: 1;
    }

    /* Column-count tiers: panel width scales with column count */
    .nav-mega.nav-mega-cols-1 > ul.sub-menu {
        grid-template-columns: minmax(0, 1fr);
        width: 240px;
    }
    .nav-mega.nav-mega-cols-2 > ul.sub-menu {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 480px;
    }
    .nav-mega.nav-mega-cols-3 > ul.sub-menu {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 720px;
    }
    .nav-mega.nav-mega-cols-4 > ul.sub-menu {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        width: 960px;
    }

    /* 68b. Third level (category -> sub-services) flyout.
       Added for the خدمات services-architecture update: a grid cell
       that itself has children (a category with sub-services) gets a
       small flyout panel opening further into the panel on hover,
       reusing the exact same white-panel/shadow/hover-reveal pattern
       as the top-level panel above - no new visual language. Grid
       cells with no children (still the common case) are completely
       unaffected. RTL-correct: flyout opens toward the left (further
       into reading direction), matching this panel's own right-to-left
       flow. */
    .nav-mega.nav-mega-cols-1 > ul.sub-menu > li,
    .nav-mega.nav-mega-cols-2 > ul.sub-menu > li,
    .nav-mega.nav-mega-cols-3 > ul.sub-menu > li,
    .nav-mega.nav-mega-cols-4 > ul.sub-menu > li {
        position: relative;
    }

    .nav-mega > ul.sub-menu > li.menu-item-has-children > a::after {
        content: "\2039";
        margin-inline-start: auto;
        padding-inline-start: 8px;
        font-size: 16px;
        line-height: 1;
        color: #94A3B8;
    }

    .nav-mega > ul.sub-menu > li.menu-item-has-children > ul.sub-menu {
        display: block;
        position: absolute;
        top: -12px;
        left: 100%;
        right: auto;
        margin: 0;
        padding: 12px;
        list-style: none;
        min-width: 220px;
        max-width: 280px;

        background: #ffffff;
        border-radius: 10px;
        border: 1px solid rgba(0, 0, 0, 0.06);
        box-shadow: 0 16px 40px rgba(15, 38, 92, 0.14);

        opacity: 0;
        visibility: hidden;
        transform: translateX(8px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
        z-index: 1000;
    }

    .nav-mega > ul.sub-menu > li.menu-item-has-children:hover > ul.sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }

    .nav-mega > ul.sub-menu > li.menu-item-has-children > ul.sub-menu > li > a {
        display: flex;
        align-items: center;
        min-height: 36px;
        padding: 6px 10px;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 400;
        color: #0F172A;
        white-space: normal;
        line-height: 1.4;
        transition: background-color 0.15s ease, color 0.15s ease;
    }

    .nav-mega > ul.sub-menu > li.menu-item-has-children > ul.sub-menu > li > a:hover {
        background-color: #F2FAFD;
        color: #233A7A;
    }

    /* Non-clickable items (no href attribute - see inc/class/menu-walker.php
       and WP core's own default walker, both only print href when the
       item's url is non-empty) still need a legible, non-interactive
       appearance instead of inheriting the default link color/cursor. */
    .nav-mega > ul.sub-menu a:not([href]) {
        cursor: default;
        color: #64748B;
    }
    .nav-mega > ul.sub-menu a:not([href]):hover {
        background-color: transparent;
        color: #64748B;
    }
}


/* =========================================================
   69. HEADER CTA + SEARCH GROUP - ONE-ROW ALIGNMENT
   (revised 2026-10-10 - real root cause of the "تماس با ما"/CRM
   overlap)

   The three header columns (9fb65e6 logo, c4d60b8 nav, eb36404
   CRM+consultation+search) are Elementor columns with FIXED
   percentage widths (20/54/26). The old fix here only forced
   nowrap + a flat 380px min-width on eb36404 - sized for 2
   buttons + a 42px icon. Adding the always-visible search box
   (section 97, ~140-180px, replacing that 42px icon) made
   eb36404's real content wider than both its 26% column AND the
   old 380px floor, and because nowrap prevents it from wrapping
   internally, the overflow spilled past the column's own
   boundary into the adjacent nav column - exactly the "تماس با
   ما overlaps CRM" symptom (the overlap is nav's own last item,
   sitting at the edge nearest eb36404 in this RTL layout).

   FIX: stop using fixed percentages for this row entirely.
   Logo and nav are given their real content width (flex: 0 0
   auto) so nav NEVER shrinks or wraps (the task's own
   requirement) - eb36404 absorbs whatever space remains
   (flex: 1 1 auto; min-width: 0) and, as the one remaining
   degree of freedom, is now allowed to wrap internally again
   (removed the old forced nowrap) so in the tightest widths the
   search box/buttons drop to a second line INSIDE eb36404's own
   box rather than ever spilling into nav - a guaranteed
   non-overlap outcome. Section 97 separately shrinks the search
   box itself at 1025-1439px so this wrap is rarely needed in
   practice.
   ========================================================= */

@media (min-width: 1025px) {
    .elementor-element-9c078f4 > .elementor-container {
        flex-wrap: nowrap;
    }

    .elementor-element-9fb65e6 {
        flex: 0 0 auto;
    }

    .elementor-element-c4d60b8 {
        flex: 0 0 auto;
    }

    .elementor-element-eb36404 {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* 2026-10-10 revision: the deliberate internal wrap above was
       itself the reported bug ("search appears below the CTA
       buttons") - it wrapped every time eb36404's own content
       (CRM + Consultation + search) got even slightly tight, which
       in practice was most laptop widths. Switched to nowrap and
       instead tightened the search box and gaps (below) so the
       group fits on one line without needing to fall back to
       wrapping; nav (c4d60b8) still never shrinks/wraps per its own
       flex:0 0 auto rule above, so this group is the only part that
       had any slack to give. */
    .elementor-element-eb36404 > .elementor-widget-wrap {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-end;
        align-items: center;
        column-gap: 10px;
    }

    .elementor-element-a17c9e3,
    .elementor-element-4b5946e {
        flex-shrink: 0;
    }

    .elementor-element-a17c9e3 .iteck-button,
    .elementor-element-4b5946e .iteck-button {
        white-space: nowrap;
        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }
}

/* Tightest laptop tier: logo+nav (fixed content width, never
   shrink) leaves the least room for CRM+Consultation+search here.
   Gaps are reduced first, as required, before anything would be
   forced to wrap - the search box itself already shrinks via its
   own clamp() in section 97. */
@media (min-width: 1025px) and (max-width: 1199px) {
    .elementor-element-eb36404 > .elementor-widget-wrap {
        column-gap: 8px;
    }

    .elementor-element-eb36404 .elementor-element-a17c9e3 > .elementor-widget-container {
        margin: 0 0 0 8px;
    }

    .elementor-element-a17c9e3 .iteck-button,
    .elementor-element-4b5946e .iteck-button {
        padding: 8px 12px;
    }
}


/* =========================================================
   APPROVED PEJVAK FOOTER BASELINE - DO NOT REVERT
   Approved 2026-09-20. Post ID 436 (custom post type "footer",
   rendered via iteck_footer_set=custom / iteck_footer_set_list=436)
   holds the current, user-approved 4-column corporate footer:
   Pejvak white logo, "پژواک رایانه" / "خدمات پرکاربرد" /
   "پشتیبانی مشتریان" columns, a CRM CTA card, and the exact
   Pejvak copyright line. This is the ONLY correct footer content.

   If the old Iteck/demo footer (Iteck logo, "contact@Itecksolution.com",
   Iteck/Tehran demo address, ThemesCamp social links, demo copyright,
   "© 2023 ... ژاکت") is ever seen again on the live site, it is a
   REGRESSION, not a new design - most likely caused by a demo-import
   tool (e.g. One Click Demo Import, now deactivated) or by editing
   post 436 without also clearing its _elementor_css and
   _elementor_element_cache postmeta. Do not "fix" this by restoring
   an older backup; restore THIS approved footer content instead.
   ========================================================= */

/* =========================================================
   70. FOOTER LOGO - WHITE VERSION (same technique as header)
   (2nd revision - footer rebuilt as a proper 4-column corporate
   footer on 2026-09-20; the logo widget was recreated from
   scratch as part of that rebuild, so it has a new element id -
   60d70cd no longer exists anywhere in the footer content.)

   The Pejvak logo file (logo-1-01.svg, Media ID 2413) is the
   same colored asset used in the header; it appears white
   there via a scoped CSS filter (section 67), not a separate
   white file. Reusing that exact technique here, scoped only
   to the footer's current logo widget instance
   (.elementor-element-78fb09e) - the original file and the
   header logo are untouched.
   ========================================================= */

.elementor-element-78fb09e img {
    filter: brightness(0) invert(1);
}


/* =========================================================
   71. FOOTER SOCIAL ICONS - FIXED CIRCLE + HOVER LIFT
   (currently unused - see rebuild note below)

   The iteck-social-icons widget has no native fixed-size
   control (circle diameter is derived from icon font-size +
   padding) and no native hover-border-color control, so both
   were added here, scoped only to the footer's social widget
   instance (.elementor-element-0687e29).

   As of the 2026-09-20 footer rebuild, the footer no longer
   includes a social-icons widget at all: no verified real
   Pejvak social-media URLs exist anywhere in this WordPress
   installation (confirmed by searching every option/post/
   postmeta table) - the previous icons only ever pointed at
   demo ThemesCamp links, which must not be shown. Per the
   explicit instruction to hide an icon rather than invent a
   destination, the widget was removed rather than kept with
   dead links. This rule is left in place, inert, rather than
   deleted, so that if real social URLs are supplied later and
   the same widget/id convention is reused, the sizing/hover
   styling is already there - it matches nothing right now and
   has no effect on the current page.
   ========================================================= */

.elementor-element-0687e29 .iteck-social-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.elementor-element-0687e29 .iteck-social-icon:hover {
    border-color: #233A7A;
    transform: translateY(-2px);
}


/* =========================================================
   72. BRAND COLOR MIGRATION - PHASE 1 (GLOBAL)
   The parent theme's --color-main/-primary/-secondary/-ternary
   variables are now correctly set to Pejvak colors via the
   Redux theme option (iteck_theme_setting), which the theme
   injects into :root itself - no CSS needed for those 4.
   The variables below are NOT exposed via any Redux option
   (hard-coded defaults in parent style.css line ~58-70), so
   they are redefined here instead. Because CSS custom
   properties cascade normally, redefining them on :root in
   the child theme (loaded after the parent) overrides the
   parent's hard-coded defaults everywhere var(--color-blue5)
   etc. is used (27+ rules), with no per-selector overrides
   and no !important needed.
   ========================================================= */

:root {
    --color-blue5: #29AAE1;
    --color-lightBlue: #29AAE1;
    --color-darkBlue: #162653;
    --color-gray: #F2FAFD;
    --color-blue2: #36549A;
    --color-blue4: #36549A;
    --color-blue6: #36549A;
    --color-main-grad: linear-gradient(to right, #233A7A 0%, #29AAE1 100%);
}

/* This one utility class hard-codes the same demo gradient with
   vendor-prefixed fallbacks instead of using --color-main-grad;
   overriding the modern (unprefixed) declaration is enough since
   it is the last one applied and wins at equal specificity. */
.iteck-button.animated-gradient-bg::before {
    background: linear-gradient(to right, #233A7A 10%, #29AAE1 45%, #29AAE1, #233A7A);
}

/* =========================================================
   73. WOOCOMMERCE - REPLACE DECORATIVE CORAL ACCENT
   #F96152/#F73312 were the parent theme's decorative accent
   color applied to WooCommerce (Add to Cart button, prices,
   sale badges, wishlist "active" state, account link hovers,
   loading spinner) - inspected individually and confirmed
   NONE represent an error/warning/semantic state, so they are
   replaced with the Pejvak primary brand color. Genuine
   WooCommerce semantic colors (stock/notices/validation) are
   left untouched.
   ========================================================= */

.woocommerce span.onsale,
.iteck-product .products .product-card .label.sale-off,
.iteck-single-product .related.products .product .label.sale-off {
    background-color: #233A7A;
}

.woocommerce div.product form.cart .button,
.woocommerce .button:hover {
    background-color: #233A7A !important;
    border-color: #233A7A !important;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.iteck-product .products .product-card .price .price-sale,
.iteck-single-product .related.products .product .price ins {
    color: #233A7A;
}

.woocommerce-info a,
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-account .woocommerce .woocommerce-MyAccount-content a,
.iteck-product .products .tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-product-in-list,
.iteck-single-product.woocommerce .tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-product-in-list,
.iteck-product .products .product-card .fav-btn.active,
.iteck-single-product .related.products .product .fav-btn.active {
    color: #233A7A;
    border-color: #233A7A;
}

.woocommerce table td.product-remove a:hover,
.port-inner .port-dbox a span svg:hover {
    color: #233A7A !important;
    stroke: #233A7A;
}


/* =========================================================
   74. WOOCOMMERCE - PHASE 9 REMAINING HARD-CODED COLORS
   Found beyond the Phase 1 pass: checkout/shipping table text
   and pagination hover/current state (dark grays, no semantic
   meaning), and star-rating color (kept as a recognizable
   gold/amber star convention, aligned to the Pejvak Warning
   token instead of the arbitrary demo amber). The review
   meta "dash" separator (decorative punctuation, not a link
   or status) is muted rather than accented.
   ========================================================= */

.woocommerce-checkout .woocommerce-checkout-review-order table tr td strong,
.woocommerce table tr.shipping td label,
.woocommerce table tr.shipping td label span {
    color: #334155;
}

.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
    background: #233A7A;
}

.iteck-product .products .product-card .info .stars span,
.iteck-single-product .related.products .star-rating span {
    color: #D97706;
}

.woocommerce-Reviews .commentlist .review .comment_container .comment-text .meta .woocommerce-review__dash {
    color: #475569;
}

/* Notices (message/info/error) use identical neutral black in
   the parent theme with no color differentiation between
   states at all - left semantically neutral as-is (not
   recolored red/green/blue) per instruction not to introduce
   new semantic color-coding; only softened pure black to the
   same Slate 900 used for text/borders everywhere else. */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
    border-color: #0F172A;
    color: #0F172A;
}


/* =========================================================
   75. FORMS - FOCUS STATE (PHASE 10)
   Form input/textarea focus already resolves to Pejvak Navy
   via var(--color-main) fixed in Phase 1 (form input:focus,
   form textarea:focus, .comment-respond form input/textarea).
   Per the brand system's explicit recommendation, focus state
   uses the distinct Secondary Blue instead, so it reads as an
   "active/interactive" indicator separate from the Navy used
   for buttons/borders elsewhere. Contact Form 7's own
   validation-error styling (a third-party plugin default) is
   left untouched - it is not an Iteck legacy color.
   ========================================================= */

form input:focus,
form textarea:focus,
.comment-respond form input:focus,
.comment-respond form textarea:focus {
    border-color: #29AAE1;
}


/* =========================================================
   77. HOMEPAGE HERO -> خدمات شرکت SEAM FIX (homepage only)
   The visible boundary above خدمات شرکت was NOT a background
   mismatch between two sections' own colors - it was a large
   decorative image (header_2.png, an absolutely-positioned
   "network iceberg" illustration inside the Hero section,
   widget id b0159f2) whose network nodes/lines are baked into
   the SAME raster image as its own solid rectangular
   blue-gradient fill. They cannot be separated without
   destructively re-editing the source file, which was not
   done. Instead this fades the image's hard bottom edge to
   transparent via a CSS mask, so it dissolves into the
   section behind it instead of presenting a visible rectangle
   - the network nodes stay fully visible in the image's upper
   portion. Paired with the Hero's own gradient end-color now
   matching the Services section's overlay start-color exactly
   (#233A7A, set via Elementor settings, not CSS), the two
   sections meet at the identical color with no seam.
   Scoped to this one widget ID - only exists on the homepage.
   ========================================================= */

.elementor-element-b0159f2 .elementor-image img {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 22%, #000 32%, #000 55%, transparent 92%);
    mask-image: linear-gradient(to bottom, transparent 0, transparent 22%, #000 32%, #000 55%, transparent 92%);
}


/* =========================================================
   78. HEADER LIGHT/DARK COLOR MODE (context-aware, structure
   unchanged) - CORRECTED SPECIFICITY
   ROOT ISSUE: the header (post 1671) is one shared Elementor
   template rendered transparently over every page's own top
   section. Its nav/search/Consultation-button colors are
   hard-coded WHITE, which only reads correctly when the page
   behind it is the homepage's dark hero.

   BUG FOUND AND FIXED IN THIS REVISION: the original override
   selectors below omitted two classes that Elementor's own
   generated CSS always includes - ".elementor-1671" and the
   generic ".elementor-element" (in addition to the specific
   ".elementor-element-XXXXX"). Elementor's actual white-color
   rule is e.g.:
     .elementor-1671 .elementor-element.elementor-element-fd7e414
     .iteck-nav .navigation > li a{color:#FFFFFF}
   = 5 classes + 2 type selectors.
   The previous override here was:
     body:not(.home) .elementor-element-fd7e414 .iteck-nav
     .navigation > li a
   = only 4 classes + 3 type selectors.
   CSS specificity compares the CLASS column before the TYPE
   column, so 4 classes always loses to 5 classes regardless of
   how many extra type selectors (body, li, a) are added - the
   override never actually won, which is why the text stayed
   white despite the rule being "correct" in every other way.
   FIXED by including the full class chain Elementor generates,
   so body:not(.home) is now added on top of an already-equal
   selector, guaranteeing a win with no !important needed.

   FIX: WordPress core already adds a "home" body class only on
   the front page (no new class, no template change, no PHP) -
   used here as the light/dark switch.

   Untouched (already correct, no adaptation needed):
   - CRM button: solid navy bg + white text, unaffected by
     what is behind it.
   - Mega-menu / small dropdowns: always render on their own
     white panel already (dark text, #29AAE1 hover), so page
     background is irrelevant to them.
   - Logo file (logo-1-01.svg) is a dark-navy/blue-gradient
     mark - section 67's filter turns it white for the dark
     homepage; here it is simply switched OFF on light pages,
     revealing the logo's own real colors. No new/edited asset
     needed.
   ========================================================= */

/* Logo: reveal its real dark-navy colors on light pages
   instead of the white filter used on the dark homepage */
body:not(.home):not(.pejvak-solid-header) .elementor-element-9f47f13 .custom-logo img {
    filter: none;
    transition: filter 0.25s ease;
}

/* PASS 18: the rule above was unconditional on every internal page,
   so the logo stayed its real dark-navy color even once the header
   itself turns solid #233A7A on scroll (.is-sticky, see the sticky
   section below) - a dark logo on a dark navy background, exactly
   the low/zero-contrast gap this task reports. Reuses the SAME
   white-filter technique already proven on the homepage (section
   67) rather than a new asset or a second logo file - only wins
   during .is-sticky, via higher specificity (one more class) than
   the plain body:not(.home) rule above; the top-of-page state is
   untouched. */
body:not(.home) .is-sticky .elementor-element-9f47f13 .custom-logo img {
    filter: brightness(0) invert(1);
}

/* Main navigation text */
body:not(.home):not(.pejvak-solid-header) .elementor-1671 .elementor-element.elementor-element-fd7e414 .iteck-nav .navigation > li a {
    color: #162653;
}

/* Hover + active/current menu item */
body:not(.home):not(.pejvak-solid-header) .elementor-1671 .elementor-element.elementor-element-fd7e414 .iteck-nav .navigation > li a:hover,
body:not(.home):not(.pejvak-solid-header) .elementor-1671 .elementor-element.elementor-element-fd7e414 .iteck-nav .navigation > li.current-menu-item > a {
    color: #29AAE1;
}

/* Dropdown/caret indicator on items with a submenu */
body:not(.home):not(.pejvak-solid-header) .elementor-1671 .elementor-element.elementor-element-fd7e414 .iteck-nav .navigation > li a::after {
    color: #233A7A;
}

/* Submenu (پروژه‌ها / مقالات small dropdowns) text + hover */
body:not(.home) .elementor-1671 .elementor-element.elementor-element-fd7e414 .iteck-nav .menu-wrapper ul li ul li a {
    color: #162653;
}

body:not(.home) .elementor-1671 .elementor-element.elementor-element-fd7e414 .iteck-nav .menu-wrapper ul li ul li a:hover {
    color: #29AAE1;
}

/* Header search icon */
body:not(.home):not(.pejvak-solid-header) .elementor-1671 .elementor-element.elementor-element-6622e81 .itech-search-icon .search-icon-header a i {
    color: #233A7A;
}

body:not(.home):not(.pejvak-solid-header) .elementor-1671 .elementor-element.elementor-element-6622e81 .itech-search-icon .search-icon-header a svg {
    fill: #233A7A;
}

body:not(.home):not(.pejvak-solid-header) .elementor-1671 .elementor-element.elementor-element-6622e81 .itech-search-icon .search-icon-header a:hover i {
    color: #29AAE1;
}

/* Consultation Request button - normal (non-hover) state only;
   its existing hover (navy bg + white text) is already correct
   for both light and dark pages, so it is left untouched */
body:not(.home):not(.pejvak-solid-header) .elementor-1671 .elementor-element.elementor-element-4b5946e .iteck-button {
    color: #233A7A;
    border-color: #233A7A;
}

/* Pre-existing bug, independent of page/light-dark: the
   expandable search FORM popup always has a white background
   (.iteck-search-field .searchform{background-color:#FFFFFF}
   is unconditional), but its submit icon was hard-coded white
   too, making it invisible on its own white popup on every
   page including the homepage. Fixed universally, not gated
   by body:not(.home). Also had the same missing-class
   specificity bug as the rules above (original selector
   includes .elementor-1671 and .elementor-element, which this
   selector previously omitted) - corrected here too. */
.elementor-1671 .elementor-element.elementor-element-6622e81 .iteck-search-field .searchform .searchsubmit {
    color: #233A7A;
}

.elementor-1671 .elementor-element.elementor-element-6622e81 .iteck-search-field .searchform .searchsubmit svg {
    fill: #233A7A;
}

/* =========================================================
   STICKY HEADER - GLASSMORPHISM (2026-10-10, corrected same day)
   ROOT CAUSE of the invisible glass effect, found by reading the
   live rendered DOM and tracing the actual JS: ".is-sticky" was
   NEVER added to anything on this site. jquery.sticky.js (the
   plugin the theme already loads, handle "jquery-sticky") adds
   className "is-sticky" to the STICKY ELEMENT'S PARENT when it
   activates - but it only activates on elements that already
   have class "stuck-nav", and the parent theme's own trigger for
   that (scripts.js: $('.elementor-section:has(.custom-sticky)')
   .addClass('stuck-nav...')) matches nothing, because no element
   anywhere in the rendered page has a "custom-sticky" class
   (confirmed by grepping the full live homepage HTML - zero
   matches). So $(".stuck-nav").sticky(...) always ran on an
   empty selection, .is-sticky never appeared, and every rule
   scoped under it - including the previous glass background -
   was 100% inert the entire time. Not a specificity or
   backdrop-filter-support problem; the trigger that would ever
   add ".is-sticky" simply never fired.

   FIX: assets/js/pejvak-sticky-header.js now calls the SAME
   already-loaded $.fn.sticky plugin directly on the real header
   (.custom-absolute-menu), with no parent-theme file edited and
   no second sticky library added. Because the plugin adds
   "is-sticky" to the sticky element's PARENT (the wrapper it
   creates), the correct selector is ".is-sticky .custom-absolute-menu"
   - not ".custom-absolute-menu .is-sticky" as before, which had
   the nesting direction backwards in addition to targeting a
   class that was never applied.

   Colors: the parent theme's own ".is-sticky .stuck-nav{background:#fff}"
   rule (style.css ~line 8328) assumed a white sticky background,
   so the menu/search colors it pairs with are dark navy - wrong
   for our translucent navy glass, updated here to light/white to
   match, same as before. Transparency is applied only to the
   background; text/icon/logo opacity is untouched. Falls back to
   solid navy with no blur when backdrop-filter isn't supported.
   ========================================================= */

.is-sticky .custom-absolute-menu {
    background: #233A7A !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 8px 28px rgba(10, 20, 50, 0.16);
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

/* PASS 9: the 58%-opacity override that used to live here (for
   browsers supporting backdrop-filter - effectively all of them) is
   exactly why scrolled-under text/images showed through the sticky
   header ("overlays text while scrolling"). Removed: the sticky
   header now stays the solid, fully opaque #233A7A set above at
   every width/browser, with no blur. The .fat-nav containing-block
   bug this @supports block used to guard against never applied to
   the solid rule anyway (it only affects backdrop-filter itself,
   which was never re-added here). */

@media (prefers-reduced-motion: reduce) {
    .is-sticky .custom-absolute-menu,
    body.home .custom-absolute-menu {
        transition: none;
    }
}

.is-sticky .custom-absolute-menu .elementor-element-fd7e414 .iteck-nav .navigation > li a {
    color: #FFFFFF !important;
}

.is-sticky .custom-absolute-menu .elementor-element-fd7e414 .iteck-nav .navigation > li a:hover,
.is-sticky .custom-absolute-menu .elementor-element-fd7e414 .iteck-nav .navigation > li.current-menu-item > a {
    color: #29AAE1 !important;
}

.is-sticky .custom-absolute-menu .elementor-element-fd7e414 .iteck-nav .navigation > li a::after {
    color: #29AAE1 !important;
}

.is-sticky .custom-absolute-menu .elementor-element-6622e81 .itech-search-icon .search-icon-header a i {
    color: #FFFFFF !important;
}

.is-sticky .custom-absolute-menu .elementor-element-6622e81 .itech-search-icon .search-icon-header a svg {
    fill: #FFFFFF !important;
}

/* Button 4b5946e already renders white text/border by default
   (post-1671.css) - no sticky override needed now that the
   sticky background is navy again instead of white. */

/* Pre-existing parent-theme effect for the "current section"
   nav item (style.css ~line 23856): a translucent WHITE overlay
   + light-blue underline, meant for a dark header. It only
   activates on pages that are descendants of a menu item (e.g.
   خدمات gets .current-menu-ancestor on every service page such
   as /network-design/) - exactly the internal pages now using
   dark text, where a white overlay reads as a glitch rather
   than a highlight. Neutralized for light pages only; the
   effect is untouched on the dark homepage (it never applies
   there anyway, since the homepage is never a menu descendant). */
body:not(.home) .iteck-nav .slide-up > .menu-item.current-menu-ancestor {
    border-bottom-color: transparent;
}

body:not(.home) .iteck-nav .slide-up > .menu-item.current-menu-ancestor::before {
    background-color: transparent;
}


/* =========================================================
   79. LIGHT INTERNAL PAGE HEADER - LOGO SIZE + SPACING
   Same header template/widget as the homepage (post 1671,
   widget 9f47f13) - only its rendered size differs here,
   scoped to body:not(.home) so the homepage's own 120/100/88px
   sizing (set via the widget's own settings) is untouched.
   Existing base rule uses !important (elementor-uploads/css/
   post-1671.css: "width:120px;height:67px !important"), so
   matching !important is required to win, not a stylistic
   choice. Width targets are exact per the requested 125-145px
   (desktop)/115-125px (tablet)/100-115px (mobile) ranges;
   heights are computed from the logo's real aspect ratio
   (248.6:138.49) so it never stretches.
   Column padding is trimmed slightly (15px->10px) to keep the
   header height controlled at ~95px despite the larger logo,
   instead of letting the row grow taller.
   ========================================================= */

body:not(.home) .elementor-element-9f47f13 .custom-logo a img {
    width: 135px !important;
    height: 75px !important;
}

body:not(.home) .elementor-element-9fb65e6 > .elementor-element-populated {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Breathing room between the logo and the navigation that
   follows it (RTL: logo column is rightmost, nav starts to
   its left), per the requested 32-48px logo->nav gap */
body:not(.home) .elementor-element-9fb65e6 {
    margin-left: 24px;
}

@media (max-width: 1024px) {
    body:not(.home) .elementor-element-9f47f13 .custom-logo a img {
        width: 120px !important;
        height: 67px !important;
    }
}

@media (max-width: 767px) {
    body:not(.home) .elementor-element-9f47f13 .custom-logo a img {
        width: 108px !important;
        height: 60px !important;
    }
}


/* =========================================================
   80. INTERNAL PAGES - HEADER TO CONTENT SPACING
   (3rd revision - replaces the rejected "guess a bigger
   clearance number" approach with the same natural-flow fix
   already approved for the homepage)

   WHY THE PREVIOUS REVISION WAS REJECTED: it kept the header
   position:absolute on internal pages and tried to compensate
   by inflating .content.blog-wrapper / .blank-builder's own
   padding-top to 250/230/210/195px, guessing at the header's
   real height. Real-device testing showed this produced
   exactly what guessing a height always risks - a huge gap
   that has nothing to do with the header's actual size.

   THE FIX: give internal pages the exact same treatment
   already approved for the homepage - .custom-absolute-menu
   switched to position:relative at <=1024px, so the header
   becomes a normal in-flow element and the content that
   follows it is pushed down by exactly its real height,
   automatically, with no guessed number anywhere. Internal
   pages need no extra background-color override the way the
   homepage did: the homepage's header only ever looked navy by
   overlaying the Hero's dark background while absolutely
   positioned, so removing that overlay needed an explicit
   navy background to replace it - but internal-page headers
   never had a background of their own to begin with (confirmed
   in section 78 - only text/icon colors are set there for
   light pages), they have only ever shown the plain white page
   background underneath. Switching to normal flow does not
   change that; it stays exactly the same white it already was.

   .content.blog-wrapper's own padding-top values are restored
   to a small, normal content gap instead of header-clearance
   sizing - the header no longer needs "clearing", only a
   reasonable breathing gap remains. Desktop's 150px is
   untouched (header height never changed there). The
   .blank-builder rule from the rejected revision is removed
   entirely: those pages (About, Contact) already carry their
   own per-page Elementor top padding for normal content
   spacing, which is enough once the header is in normal flow
   and no longer needs compensating for.
   ========================================================= */

/* 2026-10-31 SHARED INTERNAL HEADER = IN NORMAL FLOW AT EVERY WIDTH (all pages except the homepage).
   The parent theme makes .custom-absolute-menu position:absolute above 1024px, i.e. it occupies no space and
   every page had to clear it by its own padding or by the sticky wrapper's JS-measured height; a page that did
   neither (Services, Downloads after they lost the navy header) started under it. In flow, the header always
   occupies its real height (wrapped menus, late fonts, admin bar), so content starts exactly below it.
   Same mechanism as body.home (rule below): jquery.sticky switches the element to fixed when stuck, and its
   wrapper keeps the space (.pejvak-sticky-wrap, height = the measured natural height). The header has no
   background of its own here (white page behind it); the navy appears only in the .is-sticky state. */
body:not(.home) .custom-absolute-menu {
    position: relative;
}

/* The parent adds margin-top:32px for an absolutely positioned header; an in-flow header already sits below
   the html margin WordPress adds for the admin bar. */
body:not(.home).admin-bar .custom-absolute-menu {
    margin-top: 0;
}

/* PASS 8: real desktop header height recalculated from its own
   current rules (>1024px, header stays position:absolute here,
   so content genuinely must clear it): logo column
   (.elementor-element-9fb65e6) is section 79's own 10px+10px
   padding plus its own 75px-tall logo image = 95px, the tallest
   item in the header row (nav/CTA are shorter) - so ~95px is the
   real total header height, not a guess. 150px left ~55px of
   pure dead space above every internal page's content. Reduced
   to 95px + a 16px breathing gap = 111px; tablet/mobile (40px/
   32px, below) were already correct plain breathing-room values
   since the header is in normal flow there, not clearance - left
   untouched. */
.content.blog-wrapper {
    padding-top: 40px; /* a plain gap: the in-flow header above already occupies its own height */
}

@media (max-width: 767px) {
    .content.blog-wrapper {
        padding-top: 32px;
    }
}


/* =========================================================
   80b. HAMBURGER ICON COLOR (root-cause fix, all pages)

   ROOT CAUSE OF THE "MISSING HAMBURGER": the theme's own
   .hamburger__icon (the 3 bars) has no color in the case that
   actually applies to this header. Checked the parent theme's
   compiled style.css directly (not just its SASS source, which
   does not always match 1:1): the only rules that give it a
   background-color are scoped to ".header .hamburger__icon"
   and ".white-header .hamburger__icon" - this site's header
   uses neither of those ancestor classes (confirmed against
   the live markup: the nav is "iteck-custom-header ...
   custom-absolute-menu", never plain ".header" or
   ".white-header"), and Elementor's own per-widget color
   control for it (mobile_menu_color) has no value set in
   _elementor_data either. So the bars have always rendered
   with no explicit color at all - on the dark homepage header
   this was invisible-but-unnoticed until now; on a light
   internal page it is just as invisible, which is what made it
   look "missing" there. This was never page-specific - it
   affects every page equally, now fixed everywhere.
   ========================================================= */

body.home .hamburger__icon,
body.home .hamburger__icon::before,
body.home .hamburger__icon::after {
    background-color: #FFFFFF;
}

body:not(.home):not(.pejvak-solid-header) .hamburger__icon,
body:not(.home):not(.pejvak-solid-header) .hamburger__icon::before,
body:not(.home):not(.pejvak-solid-header) .hamburger__icon::after {
    background-color: #233A7A;
}

/* Close (X) state, all pages: the parent theme hardcodes the X
   strokes to #000 (jquery.fatNav.css ".hamburger.active
   .hamburger__icon:before/:after"). Once open, the hamburger sits
   against the navy sticky/floating-glass header, so a black X was
   reported as invisible ("black X icon"). This selector is more
   specific than both rules above, so it wins without !important,
   in every state (normal/hover/focus/active) since none of them
   set a separate X color. */
.hamburger.active .hamburger__icon::before,
.hamburger.active .hamburger__icon::after {
    background-color: #FFFFFF;
}


/* =========================================================
   81. SIDEBAR CARD COLORS (Pejvak palette alignment)
   Sidebar widget spacing (60px between widgets, parent theme
   style.css ~line 5115) was already within/above the requested
   24-32px range, so left unchanged - only recoloring headings
   and links which currently inherit the sitewide h2 (#0F172A)
   and link (#475569) colors instead of the sidebar-specific
   tones requested here. Scoped to .sidebar so this does not
   affect headings/links elsewhere on the page.
   ========================================================= */

.sidebar .widget h2 {
    color: #162653;
}

.sidebar .widget a {
    color: #36549A;
}

.sidebar .widget a:hover {
    color: #29AAE1;
}


/* =========================================================
   82. HEADER CRM + CONSULTATION + SEARCH - TABLET/MOBILE
   (2nd revision - see history below)

   ROOT CAUSE, unchanged since the original fix: the column
   holding these three widgets (.elementor-element-eb36404) has
   Elementor's own advanced "Responsive Visibility" set to
   hidden_tablet + hidden_mobile, so CRM Support, Consultation
   and Search are absent below 1025px unless overridden.

   REVISION HISTORY:
   - Rev 1 restored visibility only and let Elementor's default
     flex-wrap drop the column to an unstyled second line.
   - Rev 2 tried a real single-row attempt for 900-1024px via
     flex-basis sizing, keeping 768-899px as a separate compact
     two-row block. Visual testing in the WordPress Customizer
     showed the Rev-2 mobile/narrow-tablet action row (CRM +
     Consultation + Search) still broke onto a THIRD row:
     row-2's own side padding (16px x2) + column-gap (10px x2)
     + button padding (16px x2 each) added up to roughly 300px
     of chrome around content that a real 12/14-character
     Persian button label needs (~75-100px each), which does
     not fit inside a 320-360px screen's ~290-330px usable
     width once that padding is subtracted - Search, being last
     in source order, was the one pushed to its own line.

   THIS REVISION fixes that directly (tightened the same
   row's padding/gaps/button-padding/icon-size so the row's
   total width need drops to roughly 270-300px, safely inside
   even a 320px screen) and, per this task's own instruction to
   not force a desktop layout "merely because the viewport is
   technically tablet," DROPS the Rev-2 900-1024px single-row
   attempt: the same measurement shows upper-tablet (900-1024)
   needs roughly 950-1020px for the full 7-item nav plus both
   button labels plus search, which does not comfortably clear
   1024px either. So the compact two-row header (hamburger row
   + action row) now applies uniformly across the whole
   <=1024px range instead of two different behaviors - simpler,
   and consistent with the "same compact design language" this
   task asks for at both 768-899px and 900-1024px.

   flex-wrap:wrap is still kept (not switched to nowrap) as a
   safety net for the row - it should never actually trigger
   given the width budget above, but if some extreme case (very
   large accessibility font scaling, unusual browser zoom)
   still doesn't fit, wrapping is a smaller failure than clipped
   or overflowing content.
   ========================================================= */

@media screen and (max-width: 1024px) {
    .elementor-element.elementor-element-eb36404.elementor-hidden-tablet,
    .elementor-element.elementor-element-eb36404.elementor-hidden-mobile {
        display: flex;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .elementor-element-eb36404 > .elementor-widget-wrap {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        column-gap: 8px;
        row-gap: 6px;
        padding: 8px 16px;
        box-sizing: border-box;
        max-width: 100%;
    }

    .elementor-element-eb36404 .elementor-element-a17c9e3,
    .elementor-element-eb36404 .elementor-element-4b5946e,
    .elementor-element-eb36404 .elementor-element-6622e81 {
        flex-shrink: 0;
    }

    /* CRM's own widget container carries an unconditional 10px
       LEFT margin at every breakpoint (post-1671.css:
       .elementor-element-a17c9e3 > .elementor-widget-container
       {margin:0 0 0 10px}) - sized for its desktop neighbor,
       the search icon, which sat to its physical left there.
       In this centered, wrapped mobile/tablet row it just
       pushes the whole 2-button group off-center toward the
       overflow edge, which is what let Consultation approach
       the viewport edge on a narrow phone. Zeroed here only;
       desktop's own >1024px row (section 69) is untouched. */
    .elementor-element-eb36404 .elementor-element-a17c9e3 > .elementor-widget-container {
        margin: 0;
    }

    .elementor-element-eb36404 .elementor-element-a17c9e3 .iteck-button,
    .elementor-element-eb36404 .elementor-element-4b5946e .iteck-button {
        padding: 8px 10px;
        white-space: nowrap;
        max-width: 100%;
    }

    .elementor-element-eb36404 .elementor-element-6622e81 .search-icon-header a.search {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
    }

    /* Elementor bakes in a fixed 16px/5px margin around the
       search icon at every breakpoint (post-1671.css); it is
       not exposed as a widget control, so within this compact
       row it is zeroed the same way section 78 already
       overrides other unavoidable per-post rules. Matching
       specificity (post id + element + element id = 3 classes)
       still loses to Elementor because Elementor's own
       stylesheet loads after this one, so !important is
       required here and documented rather than left silent. */
    .elementor-1671 .elementor-element.elementor-element-6622e81 > .elementor-widget-container {
        margin: 0 !important;
    }
}

/* Row 1 (Logo + hamburger): across the whole tablet range the
   full desktop nav (7 top-level items) does not fit next to
   the CTA group even compacted (see measurement above), so
   this swaps in the theme's own existing hamburger/fat-nav
   overlay (Iteck_Menu widget's own markup, already used below
   768px) instead of inventing a new nav system - only the
   768-1024px slice needs the explicit swap; below 768px
   Bootstrap's own d-md-* utility classes already do this.
   Bootstrap's d-block/d-md-none ship with their own
   !important, so matching !important is required to swap
   which one is visible. */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .elementor-element-fd7e414 .iteck-nav .main-menu.menu-wrapper {
        display: none !important;
    }

    .elementor-element-fd7e414 .iteck-nav .mobile-wrapper {
        display: block !important;
    }
}

/* =========================================================
   82b. HEADER ROW 1 - LOGO + HAMBURGER SAME ROW
   (final mobile/tablet header polish - approved architecture,
   this fixes only the first row's layout)

   ROOT CAUSE: the logo column (9fb65e6) and the nav/hamburger
   column (c4d60b8) are sibling flex items inside the same
   Elementor row (.elementor-element-9c078f4 > .elementor-
   container), which - like every Elementor container - carries
   the same unconditional core default already root-caused in
   section 69 (Elementor's frontend.min.css: ".elementor-
   container{flex-wrap:wrap}"). Elementor's own generated
   post-1671.css gives these two columns percentage widths that
   are only ever an exact 100% split (20%/80% at 768-1024px,
   50%/50% at <=767px) with zero spare margin - the same
   category of "combined width leaves no room" bug already
   diagnosed in section 69 for the CTA row, just one level up
   (between columns here, instead of between widgets inside one
   column there). Any sub-pixel rounding or the nav column's
   default content-based minimum width (flex items are not
   allowed to shrink below their own content's intrinsic size
   unless min-width:0 is set) is enough to push the combined
   width fractionally past 100%, which is all flex-wrap:wrap
   needs to drop the second column onto its own line - exactly
   the vertically-stacked, centered result seen on the real
   device.

   FIX: stop relying on percentage math that has no safety
   margin. Give both columns their natural content width
   (flex:0 0 auto) instead of a fixed percentage, which makes
   their combined width a small fraction of the row regardless
   of viewport, so they can never overflow into a wrap - then
   use justify-content:space-between on the shared row so they
   sit at opposite ends (logo at the RTL start/right via normal
   DOM order, hamburger at the RTL end/left) with the flexible
   empty space between them, instead of the removed percentage
   widths' incidental spreading effect. This also makes the old
   768-1024px ".elementor-element-c4d60b8{flex:0 0 max-content}"
   rule above redundant (same intent, weaker/inconsistent
   result) - consolidated into this one rule instead of keeping
   both.

   Matches Elementor's own generated selector chain exactly so
   !important is not fighting a losing specificity battle
   silently - Elementor's post-1671.css sets these widths with
   the same 3-class specificity and loads after this stylesheet,
   so !important is required and documented, as already done for
   this same situation in section 82 above.
   ========================================================= */

@media screen and (max-width: 1024px) {
    .elementor-element-9c078f4 > .elementor-container {
        justify-content: space-between;
        align-items: center;
    }

    .elementor-1671 .elementor-element.elementor-element-9fb65e6,
    .elementor-1671 .elementor-element.elementor-element-c4d60b8 {
        width: auto !important;
        max-width: 60% !important;
        flex: 0 0 auto !important;
        min-width: 0 !important;
    }

    .elementor-element-c4d60b8 {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    /* Hamburger touch target: keep the clickable area comfortable
       (>=44x44px) without changing the visual icon size that was
       already approved. */
    .elementor-element-c4d60b8 .hamburger {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }
}


/* =========================================================
   83. HOMEPAGE HERO - RESPONSIVE HEADLINE (root-cause fix,
   not a redesign)

   Both issues below were confirmed directly from post-2064's
   own Elementor data/generated CSS for the main hero headline
   (widget elementor-element-21088c9, .iteck-heading) - not
   guessed:

   1) TABLET (768-1024px): the widget's own "Font Size Tablet"
      control exists but was left EMPTY, so at tablet widths it
      silently falls back to the full desktop value of 91px
      fixed pixels - a "giant heading" that risks awkward
      wrapping on a 768-1024px column. Filled with 72px, a
      value proportioned the same way the widget's own author
      already scaled desktop -> mobile (91px -> 10vw, i.e.
      ~76-77px in the 768-820px range) - so 72px continues that
      existing curve smoothly into the tablet band and stays
      safely under the 91px desktop size, instead of inventing
      an unrelated new scale.

   2) MOBILE (<=767px): the same widget's own mobile override
      sets letter-spacing:30px, found nowhere else on the whole
      site (grep-verified) and contradicting the widget's own
      desktop value of letter-spacing:0px. 30px of tracking on
      joined Persian script both breaks glyph joining and adds
      real width across every character, compounding the
      already-large 10vw mobile size into exactly the "awkward
      wrapping" failure mode the audit looks for. Reset to 0px
      to match the value already chosen (and left unquestioned)
      for desktop - not a new value invented here.

   Both are pure font-size/letter-spacing adjustments inside
   the existing Elementor tablet/mobile breakpoints for this
   one headline only; no text, color, layout or desktop change.
   Selector repeats every class Elementor's own generated rule
   uses (post id + element id + widget classes) so specificity
   (0,6,0) safely exceeds Elementor's own (0,4,0) rule without
   needing !important.
   ========================================================= */

/* REVISED (fluid-container pass): the old 72px tablet-only value was
   larger than the stored desktop size (60px) and jumped 30px -> 72px
   at 767/768 and 72px -> 60px at 1024/1025. One continuous clamp()
   replaces it across every width: 30px at the smallest phones, ~42px
   at 767, ~50px at 1024, reaching the 60px desktop size near 1325px
   and never growing past it. rem keeps it tied to the user's font
   preference. Letter-spacing stays 0 at all widths. */
.elementor-2064 .elementor-element.elementor-element-21088c9.elementor-widget.elementor-widget-iteck-heading .iteck-heading {
    font-size: clamp(1.875rem, 1.1rem + 3.2vw, 3.75rem);
    letter-spacing: 0;
}


/* =========================================================
   84. HEADER SEARCH - DEDICATED INLINE FORM ON TABLET/MOBILE
   (<=1024px) - 3rd revision, replaces the reverted attempt
   that repurposed the fullscreen overlay's own markup.

   WHY THE PREVIOUS ATTEMPT BROKE THE HEADER: it restyled the
   overlay's internal .black-search-block/.black-search-table*
   structure in place AND switched .custom-absolute-menu from
   position:absolute to relative. That wrapper has no
   background of its own - on every breakpoint it has only ever
   looked navy because it overlays the Hero section's own dark
   background while absolutely positioned. Switching it to
   relative moved it out of that overlay role and into normal
   flow BEFORE the Hero, so it lost its only source of a dark
   backdrop and rendered against the page's plain background -
   this is what produced the "white header" and made
   white-styled controls (logo, hamburger, the outlined
   Consultation button) disappear against it. This revision
   does not touch .custom-absolute-menu's positioning at all.

   THIS REVISION: the old icon+overlay widget
   (elementor-element-6622e81) is left completely untouched
   internally - only hidden at this width, which does not
   affect layout (a flex sibling simply disappears, the row
   reflows normally; this alone was never the cause of the
   earlier regression). A separate, dedicated, always-visible
   inline form (markup in inc/pejvak-mobile-header-search.php,
   moved into the header's own DOM by assets/js/pejvak-mobile-
   header-search.js) provides the real search field. It is a
   normal in-flow block inside the same already-absolutely-
   positioned header column, not a new absolutely-positioned
   element of its own.
   ========================================================= */

@media screen and (max-width: 1024px) {
    .elementor-element-6622e81 {
        display: none;
    }

    /* PASS 10: moved into the nav/hamburger column (c4d60b8, already a
       tight single-line flex box per section 82b) as a normal in-flow
       flex sibling of the hamburger - guaranteed same line, no wrap
       risk from the wider logo+nav+CTA row. Only the dropdown PANEL
       stays out of flow (position:absolute below), per the
       requirement that opening it must never push layout. */
    .elementor-element-c4d60b8 {
        gap: 8px;
    }

    #pejvak-mobile-header-search {
        position: relative;
        order: 2;
        flex-shrink: 0;
        width: auto;
        box-sizing: border-box;
        padding: 0;
        z-index: 20;
    }

    #pejvak-mobile-header-search[hidden] {
        display: none;
    }

    /* 44px touch target, matching the hamburger's own min-height/width
       in section 82b, per the requirement that every control in this
       row meet the 44px minimum. */
    .pejvak-mobile-search-trigger {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        margin: 0;
        background: #FFFFFF;
        border: none;
        border-radius: 50%;
        color: #233A7A;
        cursor: pointer;
    }

    .pejvak-mobile-search-trigger svg {
        width: 18px;
        height: 18px;
        stroke: currentColor;
        color: currentColor;
    }

    /* Dropdown panel, anchored below the trigger - an overlay, not an
       in-flow row, so opening it never pushes the header row taller
       or creates an empty reserved row when collapsed. */
    .pejvak-mobile-search-form {
        display: flex;
        align-items: center;
        position: absolute;
        top: calc(100% + 10px);
        inset-inline-end: 0;
        width: min(280px, calc(100vw - 32px));
        max-width: 100%;
        box-sizing: border-box;
        height: 48px;
        background: #FFFFFF;
        border-radius: 12px;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
        overflow: hidden;
    }

    .pejvak-mobile-search-form[hidden] {
        display: none;
    }

    .pejvak-mobile-search-field {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        background: transparent;
        border: none;
        outline: none;
        padding: 0 14px;
        font-size: 14px;
        line-height: 48px;
        color: #17202A;
    }

    .pejvak-mobile-search-field::placeholder {
        color: #64748B;
    }

    .pejvak-mobile-search-submit {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 100%;
        margin: 0;
        padding: 0;
        background: #29AAE1;
        border: none;
        color: #FFFFFF;
        cursor: pointer;
    }

    .pejvak-mobile-search-submit svg {
        width: 18px;
        height: 18px;
        fill: #FFFFFF;
    }
}


/* =========================================================
   85. HEADER/HERO SEPARATION - NORMAL DOCUMENT FLOW ON THE
   HOMEPAGE AT <=1024px (4th revision - replaces the JS-height-
   matching workaround, which is no longer needed)

   WHY THE JS-HEIGHT WORKAROUND EXISTED: .custom-absolute-menu
   (parent theme, position:absolute) does not push the Hero
   down on its own, so the previous revision measured its real
   height in JS and fed it to the Hero's padding-top as a CSS
   variable. That worked but was a workaround, not a fix, and
   this task asked to prefer normal flow if it can be done
   safely - it can, once the ROOT CAUSE of the earlier failed
   attempt (see section 84's own history note) is actually
   addressed instead of retried as-is: .custom-absolute-menu
   has no background of its own and has only ever looked navy
   by overlaying the Hero's own dark background while
   absolutely positioned. Simply flipping it to position:
   relative (tried before) removes that overlay relationship
   and leaves it with no backdrop at all - hence the white
   header regression. The fix is to restore BOTH at once: give
   it its own explicit navy background AND switch it to normal
   flow, so it no longer depends on what happens to be
   underneath it.

   SCOPE: homepage only (body.home). Internal pages keep
   .custom-absolute-menu exactly as it was (still absolute) -
   they were not part of this task, they already have their own
   separately-approved header-to-content spacing (section 80)
   built around the absolute model, and this header template is
   shared sitewide, so an unscoped change here would alter pages
   nobody asked to touch. On the homepage, once positioned
   normally, the header's own three rows (logo+hamburger,
   CRM+Consultation, inline search) determine its real height
   and the Hero (an ordinary sibling section right after it)
   is pushed down by exactly that amount - no padding value,
   guessed or measured, is needed anywhere. >1024px is
   completely untouched; desktop keeps position:absolute with
   no background, exactly as before.
   ========================================================= */

/* =========================================================
   85b. HEADER/HERO OVERLAP - EXTENDED TO ALL WIDTHS (2026-10-10)
   Section 85 above fixed this at <=1024px only, leaving >1024px
   on the old position:absolute model, which depends on the
   Hero's own top padding being large enough to clear the
   header's real height. That padding value has drifted between
   sessions more than once (observed at 140px, then 32px), each
   time silently reopening the exact overlap this task reports -
   a fragile, one-way dependency. Applying the SAME already-
   proven fix (explicit background + normal flow) at every width
   removes the dependency entirely: the header becomes an
   ordinary sibling before the Hero everywhere, so no Hero
   padding value, large or small, can ever cause an overlap
   again. The explicit background doubles as the Phase 3 "normal
   state" glass effect instead of a second, separate rule.
   ========================================================= */

body.home .custom-absolute-menu {
    position: relative;
    background: #233A7A;
    transition: background 0.25s ease;
}

/* PASS 14 (2026-10-29): the homepage header is fully opaque #233A7A in the
   normal AND sticky states. The 94% alpha of Pass 13 (here and in the
   sticky rule below) let scrolled content show through the sticky header,
   and it also overrode the opaque .is-sticky rule of section 82 through
   its !important. The header template's inner Elementor sections/columns
   (post 1671) set no backgrounds of their own, so this nav element is the
   only layer that paints the header. Scoped to the homepage (body.home). */
body.home .is-sticky .custom-absolute-menu {
    background: #233A7A !important;
}

/* The parent theme's .admin-bar .custom-absolute-menu { margin-top: 32px }
   was written for the old position:absolute header (to clear the admin bar).
   The homepage header is in normal flow, below the html margin WordPress
   already adds for the admin bar, so that margin only added a 32px gap and,
   once sticky (position:fixed; top = admin bar height), pushed the header
   down to 64px and exposed content above it. */
body.home.admin-bar .custom-absolute-menu {
    margin-top: 0;
}

/* jquery.sticky copies the header's height into its wrapper (inline), only
   at init and on scroll. pejvak-sticky-header.js now publishes the header's
   natural (un-stuck) height as --pejvak-sticky-h and adds this class, so the
   reserved space always equals the real header height - after fonts load,
   on resize and when the menu wraps - and activating sticky never changes
   the page height or pulls the hero upward. */
.pejvak-sticky-wrap {
    height: var(--pejvak-sticky-h) !important;
}

/* PASS 12 (superseded by Pass 13 above for the color value only -
   this paragraph's reasoning about removing the old 65%
   backdrop-filter "glass" effect still applies): the translucent/
   backdrop-filter override that used to live here (65% opacity at
   page top, previously made opaque only once scrolled/stuck in Pass
   9) is removed per explicit instruction that the homepage header
   must be solid navy at every scroll position, not just while stuck
   - the base rule above
   (background:#233A7A, no alpha) now applies unconditionally, with
   no blur, at the top of the page and scrolled alike. */


/* =========================================================
   86. NETWORK DESIGN PAGE - HORIZONTAL OVERFLOW GUARD
   (page 745 only, https://newversion.pejvakrayane.com/network-design/)

   This page's hero and contact sections carry several decorative
   image widgets inherited from the original Iteck demo layout,
   positioned with Elementor's "absolute position + offset" motion
   controls (negative offsets down to -150px on the contact
   section's two corner images). Those offsets are intentional
   (they place the accents just outside the visible content edge),
   but on some viewport widths they can push the element's own box
   past the page edge and force a horizontal scrollbar even though
   nothing is visibly cut off. Scoped strictly to this one page's
   body class - no other page, and no element's actual position,
   size or offset is touched - this only clips anything that
   crosses the page boundary, satisfying the "no horizontal
   scrolling" requirement without guessing at each widget's exact
   pixel math.
   ========================================================= */

body.page-id-745 {
    overflow-x: hidden;
}


/* =========================================================
   87. HOMEPAGE "چرا پژواک رایانه؟" SECTION (Elementor inner section,
   class .pejvak-why-section). Content lives in Elementor widgets;
   this only fixes the shared image area and text rhythm so the
   four columns stay aligned when images are added/replaced.
   ========================================================= */

.pejvak-why-img {
    min-height: 140px;
    margin-bottom: 24px;
}

.pejvak-why-img img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 140px;
    margin: 0 auto;
    object-fit: contain;
}

.pejvak-why-title .elementor-heading-title {
    margin: 0 0 16px;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.6;
}

.pejvak-why-text p {
    margin: 0;
    /* PASS 4: fixed 1rem swapped for the existing --pejvak-fs-base
       token (clamp(0.95rem, 0.9rem+0.25vw, 1.05rem)) - computed
       value stays within 0.05rem (~0.8px) of the original at every
       viewport, now fluid and sharing the sitewide base-text scale
       instead of a standalone fixed value. */
    font-size: var(--pejvak-fs-base);
    line-height: 1.9;
}

@media (min-width: 1025px) {
    .pejvak-why-title .elementor-heading-title {
        min-height: 3.2em;
    }
}

@media (min-width: 1025px) {
    .pejvak-why-row .pejvak-why-col:not(:last-child)::after {
        content: "";
        position: absolute;
        inset-inline-end: 0;
        top: 50%;
        width: 1px;
        height: 68%;
        transform: translateY(-50%);
        background: linear-gradient(to bottom, rgba(41, 170, 225, 0), rgba(41, 170, 225, 0.4) 50%, rgba(41, 170, 225, 0));
        pointer-events: none;
    }
}

@media (max-width: 767px) {
    .pejvak-why-section {
        margin-top: 60px !important;
    }
}


/* =========================================================
   88. PROJECTS PAGE - CLIENT CERTIFICATES CAROUSEL
   (page "پروژه‌ها", .pejvak-cert-carousel - the CSS Class set
   on the Iteck Clients Carousel widget's Advanced tab)

   Scoped only to this one widget instance. The widget always
   wraps each slide in an <a>, and forces object-fit:cover via
   its own "Image height" control - neither is configurable from
   its own Elementor controls, so both are adjusted here instead
   of editing the plugin:
   - object-fit:contain replaces cover so a certificate's full
     image (including any text/seal near the edges) is never
     cropped, matching the "no destructive cropping" requirement.
   - a white card background + border shows around the contained
     image so different certificate aspect ratios still look like
     consistent, equal-size cards.
   - pointer-events:none (plus cursor:default) removes the click
     target and the hand cursor entirely - the widget has no
     "disable link" switch, so this is the least invasive way to
     make clicking do nothing without an href="#" and without a
     lightbox (this widget never adds one to begin with).
   Hover (1.18 scale, brought forward) is likewise not a control
   this widget exposes, so it is added here, scoped, with a
   prefers-reduced-motion guard matching the rest of this file.

   REVISION (single-slide 1.18 hover): the swiper-container/
   swiper-wrapper Swiper gives every carousel are overflow:hidden
   by Swiper's own core CSS (wp-content/plugins/iteck_plugin/
   assets/css/swiper.min.css) - not this widget's own markup - so
   a slide scaled past 100% would be clipped at the container's
   edge without the overflow:visible override below. That override
   is scoped to .pejvak-cert-carousel only, so every other Swiper
   carousel on the site (homepage clients strip, portfolio, etc.)
   keeps its own default clipping. The dimmed/scaled-down resting
   state and the 1.18 hover are both confined to
   (min-width:1025px) and (hover:hover) and (pointer:fine) so
   touch devices (which cannot hover) always show every
   certificate at its normal, fully visible, fully sized state -
   never dimmed, never enlarged.
   ========================================================= */

.pejvak-cert-carousel .iteck-clients-carousel .img {
    background-color: #FFFFFF;
}

.pejvak-cert-carousel .iteck-clients-carousel .img img {
    object-fit: contain !important;
}

.pejvak-cert-carousel .iteck-clients-carousel .swiper-slide a.img {
    pointer-events: none;
    cursor: default;
}

@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
    .pejvak-cert-carousel .iteck-clients-carousel .swiper-container,
    .pejvak-cert-carousel .iteck-clients-carousel .swiper-wrapper {
        overflow: visible;
    }

    .pejvak-cert-carousel .iteck-clients-carousel .swiper-slide {
        overflow: visible;
    }

    .pejvak-cert-carousel .iteck-clients-carousel .img {
        opacity: 0.82;
        transform: scale(0.96);
        transition: transform 300ms ease, opacity 300ms ease, box-shadow 300ms ease;
        position: relative;
        z-index: 1;
    }

    .pejvak-cert-carousel .iteck-clients-carousel .swiper-slide:hover .img {
        opacity: 1;
        transform: scale(1.18);
        box-shadow: var(--pejvak-shadow-md, 0 12px 28px rgba(35, 58, 122, 0.12));
        z-index: 2;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pejvak-cert-carousel .iteck-clients-carousel .img,
    .pejvak-cert-carousel .iteck-clients-carousel .swiper-slide:hover .img {
        transition: none;
        transform: none;
        opacity: 1;
    }
}


/* =========================================================
   89. HOMEPAGE CLIENT LOGO ROW - COMPACT MOBILE GRID (PASS 6
   CORRECTION)
   Elementor's legacy 5-column row (.pejvak-logo-row, each column
   20% wide) stacks every column to 100% width on mobile by
   default, i.e. 5 full-width rows ("vertically stacked logos").
   Scoped to this one row's own class only - no other Elementor
   row on the site uses flex-wrap columns. Preserves every logo
   (none removed) and its own aspect ratio (object-fit:contain,
   no stretching). The one column with a decorative negative
   margin (5c339b3, designed for the single desktop row) is
   neutralized at this width only so it does not overlap its
   grid neighbors; desktop/tablet are untouched.
   ========================================================= */

@media (max-width: 767px) {
    .pejvak-logo-row > .elementor-container {
        flex-wrap: wrap;
    }

    .pejvak-logo-row > .elementor-container > .elementor-column {
        width: 33.333% !important;
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
        margin: 0 !important;
    }

    .pejvak-logo-row .elementor-widget-image img {
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }
}

/* =========================================================
   89b. ABOUT PAGE - 12 SPECIALTY ITEMS, COMPACT 2-COLUMN GRID
   (PASS 9) - same technique as 89 above. 3 rows x 4 columns
   (25% each) stack to 12 full-width rows on mobile by default
   (~1938px measured). Wrapped to 2 columns (50% each) instead -
   icon/heading/text inside each column are untouched (no
   max-height/no-wrap added), so they keep wrapping naturally
   with no clipping; only the column width changes.
   ========================================================= */

@media (max-width: 767px) {
    .pejvak-specialty-row > .elementor-container {
        flex-wrap: wrap;
    }

    .pejvak-specialty-row > .elementor-container > .elementor-column {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .pejvak-specialty-row .elementor-widget-image img,
    .pejvak-specialty-row .elementor-widget-icon img {
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }
}


/* =========================================================
   90. SITE-WIDE SPACING COMPACTION + FOOTER HEIGHT REDUCTION
   Generic, non-destructive tightening: scales down Elementor's
   own per-section/column/widget spacing (set via its own
   --padding-top/-right/-bottom/-left and --widgets-spacing
   custom properties, which this file never defined) with a
   single multiplier instead of hard-coding new px values -
   large source values shrink proportionally, small ones stay
   usable. No content, color or structure is touched, and no
   specific widget id is targeted, so this applies everywhere
   including the approved footer (section APPROVED PEJVAK
   FOOTER BASELINE, .iteck-custom-footer) without altering its
   content. Footer gets an extra, slightly stronger reduction
   since it was reported disproportionately tall.
   ========================================================= */

.elementor-section {
    /* Re-tuned 2026-10-10 to the requested compact-but-not-cramped
       range: ~20px mobile up to ~52px desktop (was capped at 36px,
       slightly tighter than the current 40-56px desktop target). */
    --padding-top: clamp(1.25rem, 3.2vw, 3.25rem) !important;
    --padding-bottom: clamp(1.25rem, 3.2vw, 3.25rem) !important;
}

.elementor-column > .elementor-widget-wrap {
    /* Card/widget gap target ~12px mobile - ~24px desktop. */
    --widgets-spacing: clamp(0.75rem, 1.4vw, 1.5rem) !important;
}

.iteck-custom-footer .elementor-section {
    --padding-top: clamp(0.5rem, 1vw, 1rem) !important;
    --padding-bottom: clamp(0.5rem, 1vw, 1rem) !important;
}

.iteck-custom-footer .elementor-column > .elementor-widget-wrap {
    --widgets-spacing: clamp(0.3rem, 0.6vw, 0.5rem) !important;
}

.iteck-custom-footer .elementor-widget:last-child {
    margin-bottom: 0 !important;
}

/* =========================================================
   91. FOOTER - SYNCED TO ELEMENTOR NATIVE DATA (2026-10-10)
   The ~25 literal !important overrides that used to live here
   (section padding, column gutters, logo width per breakpoint,
   all heading/link margins, copyright color) have been removed
   and transferred into Elementor's own stored settings for post
   436 instead (via patch_sync_footer.php, run through wp
   eval-file). One of them was a real bug, not just duplication:
   the logo width override forced 100px at EVERY width including
   tablet with no media guard, silently overriding Elementor's
   own tablet value (130px) the whole time - now set correctly
   per breakpoint (100/90/80) in Elementor's own responsive
   width controls instead.
   ========================================================= */

/* =========================================================
   92. AGGRESSIVE HERO/BANNER COMPACTION (literal overrides)
   Same situation as the footer: these hero/CTA sections (home,
   contact, two service-style pages, projects grid) use
   Elementor's literal padding/min-height, found via grep of
   wp-content/uploads/elementor/css/*.css (padding:100px/90px,
   min-height:100vh). Height now comes from content, not a
   forced viewport/fixed value.
   ========================================================= */

/* =========================================================
   92b/96. SYNCED TO ELEMENTOR NATIVE DATA (2026-10-10)
   This whole block of CSS overrides (hero 396280b min-height +
   padding, hero heading 21088c9 font-size/letter-spacing, and
   678e11e/d44be78's padding) has been REMOVED and transferred
   into Elementor's own stored settings instead (via
   patch_sync_homepage.php, run through wp eval-file - same
   json_decode/edit/encode/update_post_meta path as all other
   data patches this project uses, not a raw SQL replace).
   Reason: Elementor's panel was still showing the old numbers
   (185px/91px/16-32 clamp vs the actual CSS-forced values),
   which is exactly the editor/frontend mismatch this task was
   about. 678e11e/d44be78 in particular had an ACTIVE CONFLICT -
   this old clamp(16-32) CSS rule (!important) was silently
   overriding the more precise 40/28/24 values already set
   natively in the previous session, so the frontend was
   rendering the OLDER, less precise padding the whole time
   without anyone noticing. Removing this block fixes that.
   ========================================================= */

/* PASS 3 CONSOLIDATION: the clamp(16px, 3vw, 32px) vertical value
   below was repeated identically across all 3 selectors. Named
   here as one custom property so it is defined once and reused -
   the computed value is unchanged, so nothing renders differently.
   No existing --pejvak-space-* token has this exact value (closest
   is --pejvak-space-md at clamp(16px,2.5vw,28px)), so a NEW token
   was introduced rather than quietly swapping to a non-identical
   one, which would have shifted real padding on these 4 approved
   hero/CTA sections without a browser available to verify. */
:root {
    --pejvak-hero-compact-pad: clamp(16px, 3vw, 32px);
}

.elementor-745.elementor-745 .elementor-element-7439feef,
.elementor-718.elementor-718 .elementor-element-67416f8 {
    padding: var(--pejvak-hero-compact-pad) 15px !important;
}

.elementor-745.elementor-745 .elementor-element-479633df > .elementor-element-populated {
    padding-top: 16px !important;
}

/* ABOUT (page 969): the forced hero padding that used to be here
   (16-32px !important) is removed - spacing now comes from
   Elementor's own native section settings (40/32/24px). It was also
   the cause of the header overlap: above 1024px non-home headers
   are position:absolute (out of flow, ~95px tall), so a 16-32px
   hero top padding started the hero UNDER the header. Same
   in-flow fix already used for body.home: the header becomes a
   normal block above the content, so no padding guess is needed;
   the sticky behaviour (jquery-sticky) is unaffected. */

.elementor-969.elementor-969 .elementor-element-abwhyimg img {
    max-height: 340px;
    width: auto;
    margin-inline: auto;
}

.elementor-2622.elementor-2622 .elementor-element-prjsec01 {
    padding: var(--pejvak-hero-compact-pad) 0 !important;
}

/* =========================================================
   93. MINIMAL GLOBAL FOOTER - SYNCED TO NATIVE (2026-10-10)
   The display:none + copyright-bar styling that used to live
   here has been moved into Elementor's own native controls:
   the two upper sections now use Elementor's own Advanced >
   Responsive "Hide on Desktop/Tablet/Mobile" switches
   (hide_desktop/hide_tablet/hide_mobile) instead of CSS
   display:none - toggling them back on is now a checkbox in
   the Elementor panel, not a CSS edit. The copyright bar's
   background/padding/border and the copyright text's color
   are now the section/widget's own native settings (post 436,
   via patch_sync_footer.php). Copyright text itself was never
   changed - already matched the target wording exactly.
   ========================================================= */

/* =========================================================
   94. HOMEPAGE HERO HEADING - MOVED TO NATIVE (2026-10-10)
   The font-size clamp() + letter-spacing override that used to
   live here has been removed - transferred into Elementor's own
   responsive typography controls for widget 21088c9 instead
   (desktop 48px, tablet 36px, mobile 28px, letter-spacing 0 on
   mobile), via patch_sync_homepage.php. See section 92b/96's
   comment above for why.
   ========================================================= */

/* =========================================================
   95. HOMEPAGE "به مشاوره نیاز دارید" / GLOBE CONTACT SECTION
   (2026-10-10, restored same day per follow-up request)
   Confirmed via Elementor data (wp post meta _elementor_data,
   post 2064): section 4d3e83f is homepage Elementor CONTENT,
   not the global footer template (post 436, separate post) -
   it directly contains heading bca0579 ("به مشاوره نیاز
   دارید!"), phone numbers 1bb39a2, address ba6d95a, CTA
   buttons e0527a8/b7695f8, and decorative rotating globe image
   45d7db9. Was briefly hidden via display:none; now restored -
   the user wants it kept, just more compact. The real excess
   spacing here was Elementor's own per-widget settings (three
   stacked text widgets each had _margin-bottom:70px = 210px of
   pure gap, and the section's tablet/mobile padding was
   50px/150px) - those were fixed directly in Elementor's own
   stored data (see patch_4d3e83f.php, run once via wp eval-file,
   backed up first to elementor_data_2064_before_step2.json),
   not papered over with more CSS here. No CSS override needed
   for this section as a result.
   ========================================================= */

/* =========================================================
   96. HOMEPAGE STATISTICS COUNTERS SHOWING "NaN" (2026-10-10)
   Elementor's own stored values (post meta _elementor_data,
   widgets 3dc44f7/e2573f6/c1f59cf) are correct: 10, 300, 20 -
   confirmed present and rendered correctly in the server-side
   HTML before any JS runs. The animation is started by
   jquery.counterup.min.js, enqueued TWICE from two different
   paths (iteck theme AND iteck_plugin, byte-identical files)
   via scripts.js's $(window).on('load', ...) handler, which
   calls .countUp() through jQuery Waypoints. The duplicate
   wiring and the animation's own text-mutation approach are a
   plausible source of the reported NaN, but it cannot be
   reproduced or root-caused further without a real browser (not
   available in this environment). Per the brief's own fallback
   instruction, rather than invent a timing-based patch that
   cannot be verified, the animation is disabled outright for
   just these three widgets: removing the "counter" class before
   window-load stops scripts.js's $('.counter') selector from
   ever matching them, so the original, correct server-rendered
   number is left untouched and permanently visible. The actual
   fix (a small inline script removing the "counter" class) is
   registered in functions.php, not here - this comment block
   documents the reasoning next to the Elementor IDs it refers
   to.
   ========================================================= */

/* =========================================================
   97. DESKTOP HEADER SEARCH - COMPACT GLASS ICON + POPOVER
   (2026-10-13 redesign - replaces the previous full-width
   second-row search entirely, obsolete row-2 rules removed
   rather than overridden)

   ROW 1 (logo + nav + CRM + Consultation, section 69) is
   untouched except that assets/js/pejvak-desktop-header-search.js
   now inserts this small icon as the FIRST item inside
   ".elementor-element-eb36404"'s own widget-wrap - i.e. directly
   next to the nav, in front of the CRM button - so RTL reading
   order is nav -> search icon -> CRM -> Consultation. Hovering,
   clicking, or focusing into it opens a floating glass panel
   directly below, containing the same reused WordPress search
   form (markup: inc/pejvak-desktop-header-search.php).
   ========================================================= */

.elementor-element-6622e81 {
    display: none !important;
}

#pejvak-desktop-header-search {
    display: none;
}

@media screen and (min-width: 1025px) {
    #pejvak-desktop-header-search[hidden] {
        display: none;
    }

    #pejvak-desktop-header-search:not([hidden]) {
        display: inline-flex;
        position: relative;
    }

    .pejvak-desktop-search-trigger {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        margin: 0;
        background: #FFFFFF;
        border: none;
        border-radius: 50%;
        color: var(--pejvak-primary);
        cursor: pointer;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .pejvak-desktop-search-trigger:hover,
    .pejvak-desktop-search-trigger[aria-expanded="true"] {
        background: var(--pejvak-secondary);
        color: #FFFFFF;
    }

    .pejvak-desktop-search-trigger svg {
        width: 19px;
        height: 19px;
        stroke: currentColor;
        color: currentColor;
    }

    .pejvak-desktop-search-trigger:focus-visible {
        outline: 2px solid var(--pejvak-secondary);
        outline-offset: 2px;
    }

    /* Floating glass panel, anchored below the icon. RTL: the
       trigger is near the start of the CTA group, so the panel is
       right-aligned to the trigger and allowed to sit flush with
       the viewport edge via max-width/clamping rather than a fixed
       left offset, keeping it inside the viewport at every width
       this header supports (>=1025px). */
    .pejvak-desktop-search-panel {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        width: 260px;
        max-width: min(260px, calc(100vw - 24px));
        box-sizing: border-box;
        padding: 14px;
        border-radius: 16px;
        background: rgba(35, 58, 122, 0.94);
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
        border: 1px solid rgba(255, 255, 255, 0.18);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.20);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
        z-index: 100;
    }

    #pejvak-desktop-header-search.is-open .pejvak-desktop-search-panel {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    }

    .pejvak-desktop-search-form {
        display: flex;
        align-items: center;
        width: 100%;
        height: 44px;
        box-sizing: border-box;
        background: rgba(255, 255, 255, 0.10);
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: 12px;
        padding: 0 14px;
        direction: rtl;
        transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .pejvak-desktop-search-form:hover {
        border-color: rgba(255, 255, 255, 0.4);
    }

    .pejvak-desktop-search-form:has(.pejvak-desktop-search-field:focus) {
        background: rgba(255, 255, 255, 0.16);
        border-color: var(--pejvak-secondary);
        box-shadow: 0 0 0 3px rgba(41, 170, 225, 0.25);
    }

    .pejvak-desktop-search-field {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
        height: 100%;
        background: transparent;
        border: none;
        outline: none;
        padding: 0;
        margin: 0 0 0 10px;
        font-family: var(--pejvak-font);
        font-size: 14px;
        color: #FFFFFF;
        text-align: right;
        direction: rtl;
    }

    .pejvak-desktop-search-field::placeholder {
        color: rgba(255, 255, 255, 0.70);
    }

    .pejvak-desktop-search-submit {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        margin: 0;
        padding: 0;
        background: transparent;
        border: none;
        color: #FFFFFF;
        cursor: pointer;
    }

    .pejvak-desktop-search-submit svg {
        width: 17px;
        height: 17px;
        fill: #FFFFFF;
    }

    .pejvak-desktop-search-field:focus-visible {
        outline: none;
    }

    .pejvak-desktop-search-submit:focus-visible {
        outline: 2px solid var(--pejvak-secondary);
        outline-offset: 2px;
        border-radius: 4px;
    }
}

@supports not selector(:has(a)) {
    @media screen and (min-width: 1025px) {
        .pejvak-desktop-search-field:focus {
            background: transparent;
        }

        .pejvak-desktop-search-form:focus-within {
            background: rgba(255, 255, 255, 0.16);
            border-color: var(--pejvak-secondary);
            box-shadow: 0 0 0 3px rgba(41, 170, 225, 0.25);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .pejvak-desktop-search-panel,
    #pejvak-desktop-header-search.is-open .pejvak-desktop-search-panel {
        transition: none;
    }
}

/* =========================================================
   98. FLOATING GLASS MOBILE/TABLET NAV (2026-10-10)

   EXISTING MECHANISM (unchanged, reused, not duplicated):
   .mobile-wrapper > .hamburger + .fat-nav is the parent theme's
   own fatNav plugin (assets/css/jquery.fatNav.css). It already
   shows on mobile (<768px, Bootstrap d-md-none) AND tablet
   (768-1024px, this child theme's own section 81 swap) - one
   panel for both, matching this task's "mobile and tablet" scope
   with no new nav system. Opening/closing is still triggered by
   the EXISTING scripts.js handler (hamburger click -> toggleClass
   'active' + fadeToggle); nothing here binds a second listener
   for that. What IS replaced: the panel's own default look
   (position:fixed, 100%x100%, opaque white #fff, zero radius,
   scale(1.4)->scale(1) only) and its reliance on jQuery's
   fadeToggle for opacity/display, which is why it felt abrupt -
   a jQuery-driven opacity fade and a CSS-driven scale transform
   were running at the same time with different timing. Using
   !important on opacity/display ties BOTH properties to the
   same ".active" class jQuery already toggles, so one single
   CSS transition now drives the whole entrance/exit - jQuery's
   own fadeToggle inline styles are simply overridden every
   frame rather than fought over.

   SUBMENU SCOPE: the accordion open/close TIMING itself
   (scripts.js's slideToggle('fast') on .sub-menu/.children) is
   NOT rewritten - doing so would mean unbinding or duplicating
   the parent theme's own click handler, which cannot be verified
   safely without a real browser in this environment and risks
   exactly the "broken nested categories" this task warns against.
   Only the submenu panel's OWN visual chrome (rounded corners,
   background, spacing) is restyled here, independent of however
   fast/slow the height animation itself runs.
   ========================================================= */

:root {
    --pejvak-header-h: 64px;
}

.fat-nav {
    top: calc(var(--pejvak-header-h) + 10px) !important;
    right: 12px !important;
    left: 12px !important;
    /* No "bottom" offset here on purpose (2026-10-10): a fixed box
       with BOTH top and bottom set stretches to fill that whole
       span regardless of "height: auto" - that was the real cause
       of the huge empty area below the last menu item ("تماس با
       ما"). Height is now driven purely by content, capped by
       max-height so it can never exceed the viewport. */
    width: auto !important;
    height: auto !important;
    max-height: calc(100vh - var(--pejvak-header-h) - 22px - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - var(--pejvak-header-h) - 22px - env(safe-area-inset-bottom, 0px));
    background: var(--pejvak-primary) !important;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 22px !important;
    box-shadow: 0 14px 40px rgba(10, 20, 50, 0.22);
    opacity: 0 !important;
    transform: translateY(-10px) scale(0.985) !important;
    transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s linear 0.25s;
    visibility: hidden !important;
    pointer-events: none !important;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .fat-nav {
        background: rgba(35, 58, 122, 0.92) !important;
        -webkit-backdrop-filter: blur(18px) saturate(140%);
        backdrop-filter: blur(18px) saturate(140%);
    }
}

.fat-nav.active {
    display: block !important;
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .fat-nav {
        right: 16px !important;
        left: 16px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fat-nav,
    .fat-nav.active {
        transition: opacity 0.01s linear !important;
        transform: none !important;
    }
}

.fat-nav__wrapper {
    /* Parent theme sets display:table + height:100% here (jquery.
       fatNav.css), which stretches this wrapper - and therefore
       forced .fat-nav itself to look full-height - to fill 100% of
       whatever box it's in regardless of actual menu content.
       Overridden to a normal block that only takes the height its
       content needs, which is what let removing .fat-nav's own
       "bottom" offset (above) actually take effect. */
    display: block !important;
    height: auto !important;
    padding: 20px 16px 16px 16px !important;
}

/* Submenu panels: visual chrome only, see note above - the
   show/hide timing itself is still scripts.js's slideToggle. */
.fat-nav .sub-menu {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    margin: 6px 0 10px 0 !important;
    padding: 4px 8px !important;
    overflow: hidden;
}

/* Menu items: comfortable touch target, rounded hover/active,
   no change to text, links or hierarchy. */
.fat-nav li > a {
    display: flex !important;
    align-items: center;
    min-height: 44px;
    padding: 10px 14px !important;
    margin-bottom: 2px !important;
    border-radius: 12px !important;
    border-top: none !important;
    border-bottom: none !important;
    color: #FFFFFF !important;
    font-weight: 500;
    letter-spacing: 0 !important;
    text-transform: none !important;
    transition: background-color 0.2s ease;
}

.fat-nav li > a:hover,
.fat-nav li > a:focus-visible {
    background: rgba(41, 170, 225, 0.14);
}

.fat-nav li.current-menu-item > a,
.fat-nav li.current-menu-ancestor > a {
    background: rgba(41, 170, 225, 0.18);
    color: #FFFFFF !important;
}

.fat-nav li > a:focus-visible {
    outline: 2px solid var(--pejvak-secondary);
    outline-offset: -2px;
}

.fat-nav .menu-item-icon {
    color: #FFFFFF;
}

/* Existing dedicated mobile/tablet search field (always visible
   in the header row, independent of this panel - not duplicated
   here) restyled to match the same rounded-glass language. */
#pejvak-mobile-header-search .pejvak-mobile-search-form {
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.10) !important;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

#pejvak-mobile-header-search .pejvak-mobile-search-field {
    color: #FFFFFF;
}

#pejvak-mobile-header-search .pejvak-mobile-search-field::placeholder {
    color: rgba(255, 255, 255, 0.70);
}

#pejvak-mobile-header-search .pejvak-mobile-search-submit {
    background: transparent !important;
    border-radius: 0 12px 12px 0 !important;
}

#pejvak-mobile-header-search .pejvak-mobile-search-form:has(.pejvak-mobile-search-field:focus) {
    border-color: var(--pejvak-secondary);
    box-shadow: 0 0 0 3px rgba(41, 170, 225, 0.25);
}

/* =========================================================
   98. SHARED FLUID CONTAINER, MEASURE AND MOTION RULES
   (responsive-layout pass, 2026-10-22)

   One systemic layer instead of per-page patches. Everything
   here reacts to viewport width in CSS pixels only - no device
   names, no resolution, no devicePixelRatio - so browser zoom and
   OS display scaling just change the effective viewport and the
   layout reflows. Written with :where() (zero specificity)
   wherever possible so Elementor's own per-section settings still
   win when an editor sets them; nothing here uses !important.

   NOT browser-verified: this environment has no usable browser
   (see the validation notes delivered with this change).
   ========================================================= */

:root {
    /* Comfortable paragraph line length, narrower than any
       container. ch follows the active font and user text size. */
    --pejvak-measure: 72ch;
}

/* Full-width Elementor sections keep their full-bleed background,
   but their CONTENT stops at the wide token (1320px) and stays
   centered (Elementor's own .elementor-container already has
   margin-inline:auto). Excluded: the homepage hero (396280b),
   whose artwork is a full-bleed opaque image - it is bounded by
   its own rule below instead. A max-width stored on a section in
   Elementor (e.g. 1170px) still wins because this rule has zero
   specificity beyond the .elementor-container class. */
:where(.blank-builder .elementor-top-section.elementor-section-full_width:not(.elementor-element-396280b)) > .elementor-container {
    max-width: var(--pejvak-container-wide);
}

/* Side gutters for every top-level Elementor section. Elementor's
   boxed sections have no gutter of their own beyond the 10px
   column padding, so content sat ~10px from the screen edge on
   phones. This adds 4-16px (fluid) on top, giving ~14-26px in
   total. Hero excluded for the same artwork reason as above. */
:where(.blank-builder .elementor-top-section:not(.elementor-element-396280b)) > .elementor-container {
    padding-inline: clamp(4px, 2vw, 16px);
}

/* Columns may shrink below their content's intrinsic width, and
   long words/URLs wrap instead of forcing horizontal scroll. */
.elementor-column {
    min-width: 0;
}

.blank-builder,
.blog-wrapper,
.pj-services {
    overflow-wrap: break-word;
}

/* Readable line length for running text. Start-aligned text sits
   against the start edge (right in RTL); centered widgets stay
   centered. */
.blank-builder .elementor-widget-text-editor p,
.blog-wrapper .entry-content p,
.blog-wrapper .blog-post > p {
    max-width: var(--pejvak-measure);
}

.blank-builder .elementor-align-center p,
.blank-builder .elementor-widget-text-editor[style*="center"] p {
    margin-inline: auto;
}

/* HOMEPAGE HERO TEXT COLUMN (post 2064, column 66949ba).
   Elementor stores 15% of the section width as side padding at
   desktop, which let the text column grow to ~70% of the viewport
   (2400px on an ultrawide monitor). This keeps the same 15% until
   that column would exceed 900px, then holds it at 900px. At 1024px
   and below Elementor's own 15px value applies unchanged. */
@media (min-width: 1025px) {
    .elementor-2064.elementor-2064 .elementor-element.elementor-element-66949ba > .elementor-element-populated {
        padding-inline: max(15%, calc((100% - 900px) / 2));
    }
}

/* HOMEPAGE HERO ARTWORK (widget b0159f2, the iceberg image).
   Previously 110% of the section's width at every size, so on
   large monitors it grew to 2800px+ tall and the 340px bottom
   offset pushed the visible area onto empty dark water. Now: same
   110% on narrower screens, capped at 1800px and centered beyond
   that, with an explicit proportional box (no stretching).
   object-fit keeps the mobile 100%-height rule from squeezing the
   image sideways; it crops instead. */
/* Three .elementor-2064 classes: must outrank Elementor's
   body.rtl .elementor-2064 ...{right:-5%} offset rule. */
/* HERO TEXT ABOVE THE PEAK: the artwork used to be anchored by its
   bottom edge (-340px), so its peak (33% down the image) wandered with
   the viewport width and sat behind the title on desktop and across
   the slogan on tablet/mobile. It is now anchored by its PEAK: the top
   offset places the peak a fluid gap below the name + slogan, using the
   same clamp() as the h1 (section 83) and the image's own aspect
   (1478x1486, peak at 33%). The image's sky is faded out above the peak
   (mask, section 77) so the text sits on the plain Hero gradient. */
.elementor-2064 .elementor-element.elementor-element-b0159f2 {
    --pejvak-hero-fs: clamp(1.875rem, 1.1rem + 3.2vw, 3.75rem);
    --pejvak-hero-text-bottom: calc(1.4 * var(--pejvak-hero-fs) + 1.3em + clamp(20px, 4vw, 56px));
    --pejvak-hero-img-h: calc(min(110vw, 1800px) * 1.0054);
}

body .elementor-2064.elementor-2064.elementor-2064 .elementor-element.elementor-element-b0159f2 {
    inset-inline: 0;
    margin-inline: auto;
    width: min(110%, 1800px);
    bottom: auto;
    height: auto;
    top: calc(var(--pejvak-hero-text-bottom) - 0.33 * var(--pejvak-hero-img-h));
}

.elementor-2064.elementor-2064 .elementor-element.elementor-element-b0159f2 .elementor-widget-container {
    height: auto;
}

/* Slogan directly under the name: drop the empty lines the widget
   text wraps its <b> in (<br><b>..</b><br>) - text itself unchanged. */
.elementor-2064 .elementor-element.elementor-element-288d2e6 .iteck-heading br {
    display: none;
}

.elementor-2064.elementor-2064 .elementor-element.elementor-element-b0159f2 img {
    width: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 50% 60%;
}

/* Beyond the 1800px cap (viewport > ~1636px) the artwork has
   visible left/right edges against the hero gradient: fade them. */
@media (min-width: 1637px) {
    .elementor-2064.elementor-2064 .elementor-element.elementor-element-b0159f2 img {
        /* keeps section 77's bottom fade and adds the side fade */
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0, transparent 22%, #000 32%, #000 55%, transparent 92%);
        mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0, transparent 22%, #000 32%, #000 55%, transparent 92%);
        -webkit-mask-composite: source-in;
        mask-composite: intersect;
    }
}

/* Projects-page certificate carousel: the desktop hover effect
   (section 88) deliberately lets slides overflow their carousel.
   Clip that overflow at the section instead of letting off-screen
   slides widen the document. Horizontal only (overflow-y stays
   visible, so the hover enlargement is never cut vertically), and
   clip - unlike hidden - does not create a scroll container. */
.elementor-top-section:has(.pejvak-cert-carousel) {
    overflow-x: clip;
}

/* Decorative infinite animations (hero wave, rotating globe, other
   iteck-image animations). Reduced-motion users get none; everyone
   else can pause them with the button added by
   assets/js/pejvak-motion-toggle.js. */
@media (prefers-reduced-motion: reduce) {
    [class*="iteck-image-animation-"] {
        animation: none;
    }
}

.pejvak-motion-paused [class*="iteck-image-animation-"] {
    animation-play-state: paused;
}

.pejvak-motion-toggle {
    position: fixed;
    left: 16px;
    bottom: 90px;
    z-index: 999;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    background: var(--pejvak-primary);
    color: #FFFFFF;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
}

.pejvak-motion-toggle[hidden] {
    display: none;
}

.pejvak-motion-toggle:hover {
    background: var(--pejvak-dark);
}

.pejvak-motion-toggle:focus-visible {
    outline: 3px solid var(--pejvak-secondary);
    outline-offset: 2px;
}

.pejvak-motion-toggle svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* =========================================================
   END
   ========================================================= */

/* (2026-10-31) The "solid navy header" body class for Services/Downloads was removed: every internal page now uses
   the same header as /projects/ (white at the top, navy when sticky). Only body.home has its own header treatment. */


/* =========================================================
   CUSTOM MOUSE CURSOR - REPAIR (2026-10-29)
   The effect (parent theme, Theme Options > cursor effect: .cursor-outer
   ring + .cursor-inner dot, same colours/sizes/transitions) is KEPT; this
   fixes why it "disappeared" or behaved inconsistently. Logic lives in
   assets/js/pejvak-cursor.js (loaded only while the option is on).

   Root causes and where they are fixed:
   1. The parent printed body { cursor: none !important } unconditionally, so
      the native cursor was gone even where the follower could not render
      (<= 767px, where the parent hides it; before the script runs; if it
      fails; inside top-layer <dialog>s, which paint above any z-index; over
      iframes). The native cursor is now the default, and it is hidden only
      while the script has confirmed the custom cursor is live
      (html.pejvak-cursor-active) and switched back on over dialogs, iframes,
      disabled controls, with touch input and below 768px.
   2. cursor:none was only on <body>, so links, buttons and inputs kept the
      native cursor while "a"-without-href items (مقالات) did not. One rule
      set now hides it on every element except editable fields (I-beam kept).
   3. Hover state / stacking: handled in the script (state recomputed from
      the element under the pointer; followers are fixed, pointer-events:none,
      z-index 10000000+, i.e. above the header, mega-menu and overlays).
   ========================================================= */

/* Fail-safe default: native cursor. Beats the parent's body rule by specificity. */
html body {
    cursor: auto !important;
}

/* Followers show only once the script is running and the pointer is over the page. */
html .mouse-cursor {
    visibility: hidden !important;
}
html.pejvak-cursor-active:not(.pejvak-cursor-native):not(.pejvak-cursor-away) .mouse-cursor.pejvak-cursor-live {
    visibility: visible !important;
}
/* Over editable fields the native I-beam is the cursor. */
html.pejvak-cursor-text .mouse-cursor {
    opacity: 0 !important;
}

/* WINDOWS-STYLE ARROW (2026-11-03). The main pointer is now a real (native) cursor: a local white SVG arrow
   with a dark outline, hotspot at the tip (1,1). The decorative follower (.cursor-outer/.cursor-inner) stays
   separate and pointer-events:none; the native cursor is always painted above it, so it can never hide the arrow.
   The cursor is set once on <body> and inherited; it is NOT forced with a universal selector, so the native
   pointer (links, buttons), I-beam (editable fields), grab/grabbing (carousels), zoom, resize etc. set by the
   browser or by the rules of those components keep working. If the SVG cannot load, the "default" keyword after
   it is the native arrow. Touch / coarse pointers are untouched (media query). */
@media (hover: hover) and (pointer: fine) {
    html body {
        cursor: url("assets/cursors/arrow.svg") 1 1, default !important;
    }
    /* Selectable running text keeps the I-beam (a custom image would otherwise replace the automatic one). */
    html body :where(p, h1, h2, h3, h4, h5, h6, blockquote, pre, dd, dt, figcaption, address, .elementor-text-editor li, .entry-content li):not(:where(a, button, summary, label, [role="button"], [role="menuitem"], [role="tab"], [aria-haspopup], [onclick], .cursor-pointer, .swiper, .swiper-container, .slick-slider, .owl-carousel, .pejvak-cg) *) {
        cursor: text;
    }
    /* Non-link controls that act like links. */
    html body :where([role="button"], [role="menuitem"], [role="tab"], [aria-haspopup], [onclick], .cursor-pointer, .hamburger, .search-icon-header, .slick-arrow, .swiper-button-next, .swiper-button-prev, .swiper-pagination-bullet, label[for]):not([aria-disabled="true"], :disabled) {
        cursor: pointer;
    }
}

/* Reduced motion: the follower still follows, without trailing/grow transitions. */
@media (prefers-reduced-motion: reduce) {
    .cursor-inner,
    .cursor-outer {
        transition: none !important;
    }
}

/* Native-cursor states (dialogs, iframes, touch, narrow viewports, effect off). */
button:not(:disabled):not([aria-disabled="true"]),
input[type="button"]:not(:disabled),
input[type="submit"]:not(:disabled),
input[type="reset"]:not(:disabled),
input[type="image"]:not(:disabled),
[role="button"]:not([aria-disabled="true"]),
summary {
    cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
[aria-disabled="true"] {
    cursor: not-allowed;
}

/* Decorative homepage globe (post 2064, widget 45d7db9): link-free, must not capture the pointer. */
.elementor-element-45d7db9 {
    pointer-events: none;
}

/* =========================================================
   TEMPORARILY DISABLED MENU LINKS (2026-10-31)
   Menu items with the CSS class pejvak-link-disabled are rendered as <a aria-disabled="true"> without an href
   (inc/pejvak-disabled-menu-links.php): visible in place, muted, default cursor, not interactive.
   ========================================================= */
.menu-item.pejvak-link-disabled > a.pejvak-link-disabled-label {
    cursor: default;
    opacity: 0.6;
    pointer-events: none;
}

/* =========================================================
   SHARED FOOTER - CONTACT + eNAMAD (compact)
   Content lives in Elementor footer post 436, section .pj-footer-contact
   (address/email, phones, eNAMAD HTML widget). Only presentation here.
   Container width follows the site token (--pejvak-container-wide).
   ========================================================= */
.iteck-custom-footer .pj-footer-contact > .elementor-container {
    max-width: var(--pejvak-container-wide);
    padding-inline: var(--pejvak-container-pad);
    column-gap: 0;
}
.iteck-custom-footer .pj-fc-col > .elementor-widget-wrap { padding: 0; }
.iteck-custom-footer .pj-fc-col p,
.iteck-custom-footer .pj-fc-col ul { margin: 0; padding: 0; list-style: none; }
.iteck-custom-footer .pj-fc-label {
    font-size: 12px; font-weight: 700; line-height: 1.5; margin-bottom: 4px !important;
    color: #29AAE1; letter-spacing: 0;
}
.iteck-custom-footer .pj-fc-line { display: flex; align-items: baseline; gap: 8px; padding: 2px 0; line-height: 1.75; }
.iteck-custom-footer .pj-fc-k { flex: 0 0 auto; min-width: 58px; color: #B9C6E3; font-size: 12.5px; }
.iteck-custom-footer .pj-fc-v { min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 1280px) {
    /* address stays on one line where the (widest) column has room; narrower screens wrap naturally */
    .iteck-custom-footer .pj-fc-addr { white-space: nowrap; overflow-wrap: normal; }
}
.iteck-custom-footer .pj-fc-ltr {
    direction: ltr; unicode-bidi: isolate; display: inline-block;
}
.iteck-custom-footer .pj-footer-contact a {
    color: #fff; text-decoration: none; border-bottom: 1px solid transparent;
    transition: color .15s, border-color .15s;
}
.iteck-custom-footer .pj-footer-contact a:hover { color: #29AAE1; border-bottom-color: #29AAE1; }
.iteck-custom-footer .pj-footer-contact a:focus-visible,
.iteck-custom-footer .pj-enamad a:focus-visible {
    outline: 2px solid #29AAE1; outline-offset: 3px; border-radius: 3px;
}
.iteck-custom-footer .pj-fc-phones li {
    display: flex; align-items: baseline; gap: 10px; padding: 2px 0; line-height: 1.75;
}
.iteck-custom-footer .pj-fc-city { min-width: 46px; color: #B9C6E3; font-size: 12.5px; }
.iteck-custom-footer .pj-enamad { display: flex; justify-content: flex-start; }
.iteck-custom-footer .pj-enamad a {
    display: inline-block; background: #fff; padding: 6px; border-radius: 6px; line-height: 0; border-bottom: 0;
}
.iteck-custom-footer .pj-enamad img {
    display: block; width: 90px; max-width: 100%; height: auto; margin: 0;
    /* a failed load shows only the alt text inside the small white tile */
    font-size: 11px; line-height: 1.4; color: #233A7A; filter: none !important;
}
@media (max-width: 1024px) {
    .iteck-custom-footer .pj-fc-col { margin-bottom: 14px; }
    .iteck-custom-footer .pj-fc-col:last-child { margin-bottom: 0; }
}
@media (max-width: 767px) {
    .iteck-custom-footer .pj-footer-contact { padding-block: 18px !important; }
}