/**
 * PGP brand skin over Maxbizz Corporate — keep default theme components.
 * Fonts + Signal Teal / OT navy only. Do not strip Maxbizz chrome.
 */

:root {
  --pgp-paper: #f7f9fa;
  --pgp-white: #ffffff;
  --pgp-ink: #121212;
  --pgp-slate: #5a616c;
  --pgp-rule: #d2d5db;
  --pgp-ot-navy: #0f2433;
  --pgp-wash: rgba(15, 36, 51, 0.72);
  --pgp-accent: #1f6b68;
  --pgp-accent-hover: #2a8a86;
  --pgp-accent-ink: #ffffff;
  --pgp-font-display: 'Estedad', 'Vazirmatn', IRANSans, Tahoma, sans-serif;
  --pgp-font-body: 'Vazirmatn', IRANSans, Tahoma, sans-serif;
  --pgp-radius: 5px;
  --pgp-header-h: 80px;
  --pgp-grid-max: 1200px;
}

/* pgp-catalog2 — dark category-grouped product catalog (products page) */
.pgp-catalog2-page {
  background: var(--pgp-ot-navy) !important;
  padding: 56px 0 90px;
}
.pgp-catalog2-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.pgp-catalog2-title {
  font-family: var(--pgp-font-display);
  font-weight: 700;
  font-size: 34px;
  color: #fff !important;
  margin: 0 0 10px;
}
.pgp-catalog2-lede {
  font-size: 16px;
  color: rgba(255,255,255,.65) !important;
  max-width: 640px;
  margin: 0 0 44px;
  line-height: 1.9;
}
.pgp-catalog2-group { margin-bottom: 56px; }
.pgp-catalog2-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.pgp-catalog2-group-head h2 {
  margin: 0;
  font-family: var(--pgp-font-display);
  font-weight: 700;
  font-size: 18px;
  white-space: nowrap;
  color: #fff !important;
}
.pgp-catalog2-group-rule {
  flex: 1;
  height: 3px;
  background: var(--pgp-accent-hover);
}
.pgp-catalog2-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) {
  .pgp-catalog2-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .pgp-catalog2-grid { grid-template-columns: 1fr; }
}
a.pgp-catalog2-card {
  background: #12181c;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  transition: border-color .15s ease, transform .15s ease;
}
a.pgp-catalog2-card:hover {
  border-color: rgba(79,184,179,.55);
  transform: translateY(-2px);
}
.pgp-catalog2-card-media {
  width: 100%;
  aspect-ratio: 1/1;
  background: #fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.pgp-catalog2-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pgp-catalog2-card-media.is-empty {
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.04), rgba(255,255,255,.04) 10px, rgba(255,255,255,.08) 10px, rgba(255,255,255,.08) 20px);
}
.pgp-catalog2-card-media.is-empty span {
  font-family: monospace;
  font-size: 12px;
  color: rgba(255,255,255,.55);
  background: rgba(0,0,0,.4);
  padding: 4px 8px;
  border-radius: 4px;
}
.pgp-catalog2-card-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pgp-catalog2-card-tag {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  color: #4fb8b3 !important;
  background: rgba(79,184,179,.12);
  padding: 3px 10px;
  border-radius: 100px;
}
.pgp-catalog2-card-title {
  margin: 0;
  font-family: var(--pgp-font-display);
  font-size: 16px;
  font-weight: 700;
  color: #fff !important;
}
.pgp-catalog2-card-blurb {
  margin: 0;
  font-size: 13px;
  color: rgba(255,255,255,.6) !important;
  line-height: 1.7;
}
.pgp-catalog2-card-cta {
  font-size: 12.5px;
  font-weight: 700;
  color: #4fb8b3 !important;
  margin-top: 4px;
}

.elementor-kit-6 {
  --e-global-color-primary: #1f6b68 !important;
  --e-global-color-secondary: #0f2433 !important;
  --e-global-color-text: #5a616c !important;
  --e-global-color-accent: #1f6b68 !important;
  --e-global-typography-primary-font-family: 'Estedad' !important;
  --e-global-typography-secondary-font-family: 'Vazirmatn' !important;
  --e-global-typography-text-font-family: 'Vazirmatn' !important;
  --e-global-typography-accent-font-family: 'Estedad' !important;
}

html {
  scroll-behavior: smooth;
}

body,
body.pgp-hybrid-h {
  color: var(--pgp-ink);
  font-family: var(--pgp-font-body) !important;
  direction: rtl;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6,
.elementor-heading-title,
.logo-text,
.main-navigation a,
.ot-heading .main-head,
.title-box,
.octf-btn,
.elementor-button {
  font-family: var(--pgp-font-display) !important;
}

a {
  color: var(--pgp-accent);
}

a:hover {
  color: var(--pgp-accent-hover);
}

/* Accent buttons — keep Maxbizz shape, recolor only */
.btn,
.octf-btn,
button[type='submit'],
.wpcf7-submit,
a.octf-btn,
.elementor-button,
.elementor-button-link,
.search-btn,
.btn-details {
  background-color: var(--pgp-accent) !important;
  border-color: var(--pgp-accent) !important;
  color: var(--pgp-accent-ink) !important;
  fill: var(--pgp-accent-ink);
}

.btn:hover,
.octf-btn:hover,
.elementor-button:hover,
.elementor-button-link:hover,
button[type='submit']:hover,
.wpcf7-submit:hover {
  background-color: var(--pgp-accent-hover) !important;
  border-color: var(--pgp-accent-hover) !important;
}

.primary-color,
.text-primary,
i.accent,
.octf-icon,
.elementor-icon {
  color: var(--pgp-accent) !important;
  fill: var(--pgp-accent) !important;
  border-color: var(--pgp-accent) !important;
}

/* Maxbizz .hl-text — teal text only, never a solid green block over Persian glyphs */
.ot-heading .main-head .hl-text,
.main-head .hl-text,
span.hl-text {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  color: var(--pgp-accent) !important;
  font-weight: 800 !important;
  font-family: var(--pgp-font-display) !important;
  -webkit-text-fill-color: var(--pgp-accent) !important;
  position: static !important;
  display: inline !important;
  line-height: inherit !important;
}

.ot-heading .main-head .hl-text::before,
.ot-heading .main-head .hl-text::after,
span.hl-text::before,
span.hl-text::after {
  content: none !important;
  display: none !important;
}

.ot-heading > span.is_line:before,
.bline-yes .icon-box-1:after,
.bline-yes .icon-box-2 .content-box:after {
  background: var(--pgp-accent) !important;
}

.elementor-view-stacked .elementor-icon {
  background-color: var(--pgp-accent) !important;
  color: var(--pgp-accent-ink) !important;
}

/* Nav — Maxbizz default dropdown (li:before bar + white sub-menu) */
html {
  overflow-x: hidden;
  overflow-y: scroll !important;
}

body {
  /* theme normalize sets overflow:hidden which can clip absolute menus */
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

#site-header,
.site-header,
.header-desktop,
.elementor-217,
.elementor-217 .elementor-section,
.elementor-217 .elementor-column,
.elementor-217 .elementor-widget-wrap,
.elementor-217 .elementor-element-36d15d3,
.elementor-217 .elementor-element-b62b09b,
.elementor-217 .elementor-element-d943b8e,
.elementor-217 .elementor-element-d943b8e .elementor-widget-container,
#site-navigation,
.main-navigation,
.main-navigation > ul,
.main-navigation > ul > li {
  overflow: visible !important;
}

#site-header,
.site-header {
  position: relative;
  z-index: 10050 !important;
  border-bottom: none !important;
}

/* Header Layout - Full Width & Sleek (Teltonika Style) */
#site-header .elementor-217,
.site-header .header-desktop {
  background-color: transparent !important;
  width: 100% !important;
  max-width: 100% !important;
}

#site-header .elementor-section,
.site-header .elementor-section,
.elementor-217 .elementor-section {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Hide duplicate static header section (e7c1045) that creates a double header issue */
.site-header .elementor-element-e7c1045 {
  display: none !important;
}

#site-header .elementor-container,
.site-header .elementor-container,
.elementor-217 .elementor-container,
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: 1350px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

/* Main Navigation Bar - Full Width White Bar */
#site-header .elementor-217 .elementor-element-36d15d3,
.site-header .elementor-element-36d15d3 {
  background-color: #ffffff !important;
  border-radius: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 2px 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  border-bottom: 1px solid #eaeaea !important;
}

/* Compact header padding & logo size */
.header-desktop img,
.elementor-217 img {
  max-height: 48px !important;
  width: auto !important;
}

/* Sticky bar must stay above hero / plexus when is-stuck (theme default is z-index:99) */
#site-header .is-fixed,
#site-header section.is-stuck,
.elementor-217 .elementor-element-36d15d3.is-stuck,
.elementor-217 .elementor-element-36d15d3.is-fixed {
  z-index: 10050 !important;
  overflow: visible !important;
}

.main-navigation ul li a,
.octf-menu > li > a {
  color: var(--pgp-ink) !important;
  font-weight: 500 !important;
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a,
.main-navigation > ul > li:hover > a,
.main-navigation > ul > li.sfHover > a,
.octf-menu > li > a:hover,
.octf-menu > li.current-menu-item > a,
.main-navigation ul > li.menu-item-has-children:hover > a,
.main-navigation ul > li.menu-item-has-children.sfHover > a,
.main-navigation ul > li.menu-item-has-children:hover > a:after,
.main-navigation ul > li.menu-item-has-children.sfHover > a:after {
  color: var(--pgp-accent) !important;
}

/* Maxbizz accent bar under item (theme default bar opener) */
.main-navigation > ul > li:before {
  background: var(--pgp-accent) !important;
}

.main-navigation > ul > li:hover:before,
.main-navigation > ul > li.sfHover:before {
  opacity: 1 !important;
}

.main-navigation ul ul.sub-menu {
  display: block !important;
  background: #fff !important;
  border-radius: 5px !important;
  box-shadow: 8px 8px 30px 0 rgba(0, 0, 0, 0.12) !important;
  min-width: 280px !important;
  z-index: 10060 !important;
  left: auto !important;
  right: -32px !important;
  /* taller hover bridge so mouse can reach panel */
  padding-top: 0 !important;
}

.main-navigation ul ul.sub-menu:before {
  height: 20px !important;
  top: -20px !important;
}

.main-navigation ul ul.sub-menu:after {
  background: #fff !important;
  left: auto !important;
  right: 50px !important;
}

.main-navigation ul li:hover > ul.sub-menu,
.main-navigation ul > li:hover > ul.sub-menu,
.main-navigation ul li.sfHover > ul.sub-menu,
.main-navigation ul > li.sfHover > ul.sub-menu {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  -webkit-transform: translateY(12px) !important;
  -ms-transform: translateY(12px) !important;
  transform: translateY(12px) !important;
}

.main-navigation ul li li a {
  text-align: right !important;
  color: var(--pgp-ink) !important;
  font-family: var(--pgp-font-display) !important;
  border-bottom: 1px solid #f5f5f5 !important;
  white-space: normal !important;
}

.main-navigation ul li li:last-child > a {
  border-bottom: none !important;
}

.main-navigation ul li li a:hover {
  color: var(--pgp-accent) !important;
  background: #f5f5f5 !important;
}

/* Logo */
.logo img,
.site-logo img,
#site-logo img,
.custom-logo {
  max-height: 48px !important;
  width: auto !important;
}

#royal_preloader {
  display: none !important;
}

/* Footer navy */
#site-footer,
.site-footer,
footer {
  background: var(--pgp-ot-navy) !important;
}

#site-footer a,
.site-footer a {
  color: rgba(255, 255, 255, 0.88);
}

#site-footer a:hover {
  color: var(--pgp-accent-hover);
}

/* Forms RTL */
.wpcf7 input:not(.wpcf7-submit),
.wpcf7 textarea,
.wpcf7 select {
  direction: rtl;
  text-align: right;
}

/* Contact page (/contact-pgp/) form card wrapper */
.pgp-contact-card {
  margin-bottom: 30px;
  padding: 32px;
}

.pgp-contact-card h2 {
  margin-top: 0;
  margin-bottom: 8px;
}

.pgp-contact-card .pgp-page-lede {
  margin-bottom: 24px;
}

/* PGP contact form (name/company, email/phone, request-type, message) —
   real 2-col grid instead of the old team-form flex layout, which only
   worked for exactly 2 short text inputs and broke (overlapping fields)
   once the form grew to 6 mixed field types. */
.pgp-contact-form .pgp-cf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.pgp-contact-form .pgp-cf-full {
  margin-bottom: 16px;
}

.pgp-contact-form .pgp-cf-actions {
  display: flex;
  justify-content: flex-start;
}

.pgp-contact-form span.wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

.pgp-contact-form .pgp-cf-field label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #0f2433;
  margin-bottom: 6px;
  text-align: right;
}

.pgp-contact-form input[type="text"],
.pgp-contact-form input[type="email"],
.pgp-contact-form input[type="tel"],
.pgp-contact-form select,
.pgp-contact-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  border: 1px solid #e2e6ea;
  border-radius: 6px;
  background: #f4f7f9;
  font-size: 15px;
}

.pgp-contact-form input[type="text"]:focus,
.pgp-contact-form input[type="email"]:focus,
.pgp-contact-form input[type="tel"]:focus,
.pgp-contact-form select:focus,
.pgp-contact-form textarea:focus {
  background: #fff;
  border-color: #1f6b68;
  outline: none;
}

.pgp-contact-form textarea {
  min-height: 120px;
  resize: vertical;
}

.pgp-contact-form .octf-btn {
  display: inline-block;
  cursor: pointer;
}

@media (max-width: 680px) {
  .pgp-contact-form .pgp-cf-row {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
   Home hero — Unsplash + plexus nodes (content stays Maxbizz widgets)
   ============================================================================= */

.elementor-page-2313 .elementor-element-39dfd74,
.elementor-2313 .elementor-element-39dfd74 {
  position: relative !important;
  min-height: 78vh !important;
  background-color: var(--pgp-ot-navy) !important;
  background-image:
    url('/wp-content/uploads/2026/08/background-pgp.avif') !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  overflow: hidden !important;
}

.elementor-page-2313 .elementor-element-39dfd74 > .elementor-background-overlay {
  background-color: var(--pgp-wash) !important;
  opacity: 1 !important;
  z-index: 0 !important;
}

.hero-plexus-canvas {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  /* don't steal hover from header dropdown over the hero edge */
  pointer-events: none !important;
}

.elementor-page-2313 .elementor-element-39dfd74 > .elementor-container {
  position: relative;
  z-index: 3;
}

.elementor-page-2313 .elementor-element-39dfd74 .elementor-heading-title {
  color: #fff !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
}

.elementor-page-2313 .elementor-element-39dfd74 .elementor-widget-text-editor,
.elementor-page-2313 .elementor-element-39dfd74 .elementor-widget-text-editor p {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* Hero content: center the whole block (badge/heading/subtext/CTA row)
   within the hero, matching the reference layout — background image and
   wash stay exactly as-is, this only repositions the text/button. */
.elementor-page-2313 .elementor-element-39dfd74 .elementor-widget-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 640px !important;
  margin: 0 auto !important;
  min-height: 100%;
}

.elementor-page-2313 .elementor-element-39dfd74 .elementor-widget-wrap > .elementor-element {
  width: 100% !important;
  text-align: center !important;
}

.elementor-page-2313 .elementor-element-39dfd74 .elementor-heading-title,
.elementor-page-2313 .elementor-element-39dfd74 .elementor-widget-text-editor p {
  text-align: center !important;
}

/* The phone-icon + CTA button pair: center as a row under the subtext. */
.elementor-page-2313 .elementor-element-39dfd74 .elementor-widget-wrap > .elementor-element-0c4fd2e,
.elementor-page-2313 .elementor-element-39dfd74 .elementor-widget-wrap > .elementor-element-e3d0287 {
  width: auto !important;
  display: inline-flex !important;
}

.elementor-page-2313 .elementor-element-39dfd74 .elementor-element-0c4fd2e,
.elementor-page-2313 .elementor-element-39dfd74 .elementor-element-e3d0287 {
  display: inline-flex !important;
}

/* Product icon boxes under hero — Maxbizz bline bar */
.elementor-page-2313 .bline-yes .icon-box-2 .content-box:after,
.elementor-page-2313 .bline-yes .icon-box-1:after {
  background: var(--pgp-accent) !important;
}

/* Company overview panel — solid OT navy (no photo bg) */
.elementor-page-2313 .elementor-element-pgpovrl {
  background-color: var(--pgp-ot-navy) !important;
  background-image: none !important;
}

.elementor-page-2313 .elementor-element-pgpovrl > .elementor-background-overlay {
  display: none !important;
}

.elementor-page-2313 .elementor-element-pgpovrl .ot-heading .main-head,
.elementor-page-2313 .elementor-element-pgpovrl .ot-heading > span,
.elementor-page-2313 .elementor-element-pgpovrl .elementor-widget-text-editor,
.elementor-page-2313 .elementor-element-pgpovrl .elementor-widget-text-editor p,
.elementor-page-2313 .elementor-element-pgpovrl .elementor-heading-title {
  color: #fff !important;
}

.elementor-page-2313 .elementor-element-pgpovrl .ot-heading > span.is_line:before {
  background: var(--pgp-accent) !important;
}

/* =============================================================================
   Inner PGP pages (kept content) — optional Hybrid shells
   ============================================================================= */

body.pgp-hybrid-h:not(.home) .page-header {
  display: none !important;
}

body.pgp-hybrid-h:not(.home) #content,
body.pgp-hybrid-h:not(.home) .site-content,
body.pgp-hybrid-h:not(.home) .content-area {
  padding-top: 0 !important;
}

.pgp-page {
  direction: rtl;
  color: var(--pgp-ink);
  background: var(--pgp-paper);
}

.pgp-page-hero {
  position: relative;
  min-height: clamp(280px, 42vh, 480px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--pgp-ot-navy);
}

.pgp-page-hero-media {
  position: absolute;
  inset: 0;
}

.pgp-page-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pgp-page-hero-wash {
  position: absolute;
  inset: 0;
  background: var(--pgp-wash);
}

.pgp-page-hero-wash--solid {
  background: var(--pgp-ot-navy);
}

.pgp-page-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--pgp-grid-max);
  margin: 0 auto;
  padding: 2.5rem 20px 2.75rem;
  color: #fff;
}

.pgp-kicker {
  color: var(--pgp-accent) !important;
  font-weight: 600;
  margin: 0 0 0.5rem !important;
}

.pgp-page-title {
  color: #fff !important;
  font-family: var(--pgp-font-display) !important;
  font-size: clamp(1.75rem, 3vw, 2.4rem) !important;
  margin: 0 0 0.75rem !important;
}

.pgp-page-lede {
  color: rgba(255, 255, 255, 0.9) !important;
  max-width: 40rem;
  margin: 0 0 1.25rem !important;
}

.pgp-page-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 !important;
}

.pgp-btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: var(--pgp-radius);
  text-decoration: none !important;
  font-family: var(--pgp-font-display) !important;
  font-weight: 600;
}

.pgp-btn-primary {
  background: var(--pgp-accent) !important;
  color: #fff !important;
}

.pgp-btn-ghost {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.45);
}

.pgp-page-body {
  max-width: var(--pgp-grid-max);
  margin: 0 auto;
  padding: 2.5rem 20px 3.5rem;
}

.pgp-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 1.5rem 0;
}

@media (max-width: 700px) {
  .pgp-cards {
    grid-template-columns: 1fr;
  }
}

.pgp-card {
  background: #fff;
  border: 1px solid var(--pgp-rule);
  border-radius: var(--pgp-radius);
  padding: 20px;
}

.pgp-card h3 {
  font-family: var(--pgp-font-display) !important;
  font-size: 1.1rem !important;
  margin: 0 0 8px !important;
}

.pgp-card p {
  margin: 0;
  color: var(--pgp-slate);
}

.pgp-sku {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.8rem;
  color: var(--pgp-accent);
  margin: 0 0 6px !important;
}

.pgp-meta {
  color: var(--pgp-accent) !important;
  font-weight: 600;
  margin-bottom: 6px !important;
}

.pgp-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 800px) {
  .pgp-grid-2 {
    grid-template-columns: 1fr;
  }
}

.pgp-figure {
  margin: 0;
  border-radius: var(--pgp-radius);
  overflow: hidden;
  border: 1px solid var(--pgp-rule);
}

.pgp-figure img {
  width: 100%;
  height: auto;
  display: block;
}

.pgp-figure--wide {
  margin-top: 2rem;
}

.pgp-client-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  margin-top: 2rem;
  padding: 20px 0;
  border-top: 1px solid var(--pgp-rule);
}

.pgp-client-strip img {
  max-height: 44px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.7;
}

/* Home: clients slider (Elementor OT Client Logos data, custom frontend) */
.elementor-element-pgpclhd1 .elementor-heading-title {
  font-family: Estedad, Vazirmatn, sans-serif !important;
  margin-bottom: 0.35rem;
}

.elementor-element-09444b6.elementor-widget-iclogos {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

/* --- Abshar.co-style client slider section wrapper ------------------- */
.elementor-element-261751b {
  background: #fff !important;
  padding-top: 50px !important;
  padding-bottom: 50px !important;
}

/* Inject title ABOVE the slider — target the block widget-container, not the flex row */
.elementor-element-09444b6 > .elementor-widget-container {
  padding: 0 !important;
  background: transparent !important;
  display: block !important;
}

.elementor-element-09444b6 > .elementor-widget-container::before {
  content: "برخی از مشتریان";
  display: block;
  width: 100%;
  text-align: center;
  font-family: Estedad, Vazirmatn, "IRANSans", sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--pgp-accent, #1f6b68);
  margin-bottom: 28px;
  letter-spacing: 0.01em;
  direction: rtl;
}


.pgp-clients-slider {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin: 0.5rem 0 1rem;
}

.pgp-clients-slider__viewport {
  flex: 1 1 auto;
  overflow: hidden;
  direction: ltr;
  background: transparent;
  border-radius: 0;
  padding: 10px 0;
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}

.pgp-clients-slider__track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.pgp-clients-slider__list {
  list-style: none;
  margin: 0;
  padding: 0 8px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 32px;
  flex-shrink: 0;
}

.pgp-clients-slider__item {
  flex: 0 0 auto;
  width: 200px;
}

.pgp-clients-slider__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0;
  min-height: 140px;
  padding: 16px 12px 14px;
  background: transparent;
  border-radius: 0;
  box-sizing: border-box;
  transition: transform 0.25s ease;
}

.pgp-clients-slider__card img {
  display: block;
  max-width: 180px;
  max-height: 110px;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  filter: grayscale(100%) opacity(0.75);
  transition: filter 0.3s ease, transform 0.25s ease;
}

.pgp-clients-slider__card:hover img {
  filter: grayscale(0%) opacity(1);
  transform: scale(1.06);
}

/* Underline accent below each logo (Abshar style) */
.pgp-clients-slider__card::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, #1f6b68, #2ecc71);
  border-radius: 2px;
  opacity: 0.5;
  transition: opacity 0.3s ease, width 0.3s ease;
}

.pgp-clients-slider__card:hover::after {
  opacity: 1;
  width: 90px;
}

.pgp-clients-slider__caption {
  margin: 0;
  width: 100%;
  font-family: Estedad, Vazirmatn, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  color: #555;
  text-align: center;
  direction: rtl;
}

.pgp-clients-slider__btn {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1.5px solid rgba(31, 107, 104, 0.4);
  border-radius: 50%;
  background: #fff;
  color: var(--pgp-accent, #1f6b68);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pgp-clients-slider__btn:hover {
  background: var(--pgp-accent, #1f6b68);
  color: #fff;
  border-color: var(--pgp-accent, #1f6b68);
}

.pgp-clients-slider__btn:focus-visible {
  outline: 2px solid var(--pgp-accent, #1f6b68);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .pgp-clients-slider__viewport {
    mask-image: none;
    -webkit-mask-image: none;
  }

  .pgp-clients-slider__track {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    transform: none !important;
  }

  .pgp-clients-slider__list[aria-hidden="true"] {
    display: none;
  }

  .pgp-clients-slider__list {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .pgp-clients-slider {
    gap: 6px;
  }

  .pgp-clients-slider__viewport {
    padding: 8px 0;
    border-radius: 0;
  }

  .pgp-clients-slider__item {
    width: 150px;
  }

  .pgp-clients-slider__card {
    min-height: 100px;
    padding: 10px 8px;
  }

  .pgp-clients-slider__card img {
    max-width: 130px;
    max-height: 80px;
  }

  .pgp-clients-slider__caption {
    font-size: 0.68rem;
  }

  .pgp-clients-slider__btn {
    width: 32px;
    height: 32px;
    font-size: 20px;
  }
}

.pgp-section-lede {
  color: var(--pgp-slate);
  margin: 0.35rem 0 1.25rem !important;
  max-width: 46rem;
}

/* Licenses — each org paired with its certificate thumb */
.pgp-seal-mat {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 2rem;
  list-style: none;
  padding: 0;
}

@media (max-width: 900px) {
  .pgp-seal-mat {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .pgp-seal-mat {
    grid-template-columns: 1fr;
  }
}

a.pgp-seal,
.pgp-seal {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none !important;
  color: inherit !important;
  background: #fff;
  border: 1px solid var(--pgp-rule);
  border-radius: var(--pgp-radius);
  padding: 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

a.pgp-seal:hover,
.pgp-seal:hover {
  border-color: var(--pgp-accent);
  box-shadow: 0 10px 28px rgba(15, 36, 51, 0.1);
  transform: translateY(-2px);
}

.pgp-seal-media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 4px;
  background: #f3f5f6;
  border: 1px solid rgba(15, 36, 51, 0.06);
}

.pgp-seal-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.pgp-seal-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 4px 4px;
}

.pgp-seal-body strong {
  font-family: var(--pgp-font-display) !important;
  font-size: 0.98rem;
  color: var(--pgp-ot-navy);
  line-height: 1.45;
}

.pgp-seal-body span {
  font-size: 0.86rem;
  color: var(--pgp-slate);
  line-height: 1.5;
}

.pgp-list {
  padding-right: 1.2rem;
  margin: 0.75rem 0 1.25rem;
}

/* Maxbizz accordion — licenses dropdown bar */
.pgp-license-section {
  margin: 2rem 0 1rem;
  scroll-margin-top: 120px; /* clear sticky header on #licenses jump */
}

.pgp-ot-accordions .acc-item .acc-toggle {
  font-family: var(--pgp-font-display) !important;
  font-weight: 700 !important;
  color: var(--pgp-ot-navy) !important;
  background: #f5f7f8 !important;
  border-color: rgba(15, 36, 51, 0.12) !important;
  padding: 14px 20px !important;
  direction: rtl;
  text-align: right;
}

.pgp-ot-accordions .acc-item .acc-toggle i {
  float: left !important;
  color: var(--pgp-accent);
  transition: transform 0.25s ease;
}

.pgp-ot-accordions .acc-item.current .acc-toggle {
  background: var(--pgp-accent) !important;
  border-color: var(--pgp-accent) !important;
  color: #fff !important;
}

.pgp-ot-accordions .acc-item.current .acc-toggle i {
  color: #fff !important;
  transform: rotate(-90deg);
}

.pgp-ot-accordions .acc-content {
  padding: 18px 4px 8px !important;
  line-height: 1.7 !important;
}

.pgp-ot-accordions .acc-content .pgp-section-lede {
  margin-top: 0 !important;
}

/* Full-bleed PGP pages: hide Maxbizz sidebar chrome */
body.pgp-hybrid-h:not(.home) #primary-sidebar,
body.pgp-hybrid-h:not(.home) .primary-sidebar {
  display: none !important;
}

body.pgp-hybrid-h:not(.home) #primary.content-area,
body.pgp-hybrid-h:not(.home) .content-area {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

/* ==========================================================================
   PGP Catalog Showcase Component (UI/UX Enhanced)
   ========================================================================== */
.pgp-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 24px;
  margin: 28px 0 40px;
}

.pgp-catalog-card {
  background: #ffffff;
  border: 1px solid rgba(15, 36, 51, 0.1);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 16px rgba(15, 36, 51, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  position: relative;
  overflow: hidden;
}

.pgp-catalog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(15, 36, 51, 0.1);
  border-color: rgba(255, 114, 0, 0.4);
}

.pgp-catalog-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 100%;
  background: var(--pgp-accent, #ff7200);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.pgp-catalog-card:hover::before {
  opacity: 1;
}

.pgp-catalog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.pgp-catalog-badge {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--pgp-ot-navy, #0f2433);
  background: #f0f4f7;
  padding: 4px 10px;
  border-radius: 20px;
}

.pgp-catalog-size {
  font-size: 0.75rem;
  color: #718096;
  font-weight: 500;
}

.pgp-catalog-card h3 {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--pgp-ot-navy, #0f2433) !important;
  margin: 8px 0 10px !important;
  line-height: 1.4 !important;
}

.pgp-catalog-card p {
  font-size: 0.9rem;
  color: #4a5568;
  line-height: 1.6;
  margin-bottom: 20px;
  flex-grow: 1;
}

.pgp-catalog-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 18px;
  background: var(--pgp-ot-navy, #0f2433);
  color: #ffffff !important;
  font-weight: 600;
  font-size: 0.88rem;
  border-radius: 8px;
  text-decoration: none !important;
  transition: background 0.25s ease, transform 0.15s ease;
}

.pgp-catalog-btn:hover {
  background: var(--pgp-accent, #ff7200) !important;
  color: #ffffff !important;
}

#primary-menu .current-menu-item > a,
#menu-pgp-primary .current-menu-item > a {
  color: var(--pgp-accent) !important;
}

/* ==========================================================================
   PGP Customer Showcase Section (Abshar.co Style)
   ========================================================================== */
.pgp-clients-section {
  margin: 50px 0 40px;
  text-align: center;
}

.pgp-clients-title {
  font-family: var(--pgp-font-display, inherit) !important;
  font-size: 1.65rem !important;
  font-weight: 700 !important;
  color: #800000 !important; /* Dark red matching abshar style or PGP brand */
  text-align: center !important;
  margin-bottom: 30px !important;
  position: relative;
  display: inline-block;
}

.pgp-clients-title::after {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  background: var(--pgp-accent, #ff7200);
  margin: 8px auto 0;
  border-radius: 2px;
}

.pgp-clients-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px 40px;
  padding: 30px 20px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid rgba(15, 36, 51, 0.08);
  box-shadow: 0 4px 20px rgba(15, 36, 51, 0.04);
}

.pgp-client-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-radius: 12px;
  background: #fdfdfd;
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  min-width: 140px;
  min-height: 90px;
}

.pgp-client-item:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 8px 20px rgba(15, 36, 51, 0.08);
  border-color: rgba(255, 114, 0, 0.3);
}

.pgp-client-logo {
  max-height: 80px !important;
  max-width: 150px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  filter: grayscale(20%);
  opacity: 0.9;
  transition: filter 0.25s ease, opacity 0.25s ease;
}

.pgp-client-item:hover .pgp-client-logo {
  filter: grayscale(0%);
  opacity: 1;
}

/* ==========================================================================
   Homepage Client Slider Styling (Abshar.co Style)
   ========================================================================== */
body.home .client-carousel,
body.home .ot-clients,
body.home .clients-slider,
body.home .elementor-widget-image-carousel,
.client-carousel,
.ot-clients {
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 30px 20px !important;
  border: 1px solid rgba(15, 36, 51, 0.08) !important;
  box-shadow: 0 4px 20px rgba(15, 36, 51, 0.04) !important;
}

body.home .client-carousel img,
body.home .ot-clients img,
body.home .clients-slider img,
body.home .elementor-image-carousel img,
.client-carousel img,
.ot-clients img {
  max-height: 95px !important;
  height: auto !important;
  width: auto !important;
  max-width: 170px !important;
  object-fit: contain !important;
  filter: grayscale(10%) !important;
  opacity: 0.95 !important;
  transition: transform 0.25s ease, filter 0.25s ease !important;
}

body.home .client-carousel img:hover,
body.home .ot-clients img:hover,
body.home .clients-slider img:hover,
body.home .elementor-image-carousel img:hover,
.client-carousel img:hover,
.ot-clients img:hover {
  transform: scale(1.08) !important;
  filter: grayscale(0%) !important;
  opacity: 1 !important;
}


/* =============================================================================
   Targeted Inline SVG Constraint (Icons & Content SVGs Only)
   ============================================================================= */
p svg,
.elementor-widget-text-editor svg,
.elementor-widget-icon-list svg,
.elementor-widget-icon-box svg,
.elementor-icon svg,
.octf-icon svg,
.icon-main svg,
.icon-container svg {
  max-width: 56px !important;
  max-height: 56px !important;
  width: auto;
  height: auto;
  object-fit: contain;
  display: inline-block;
}

.elementor-icon-list-icon svg,
.header-top svg {
  max-width: 18px !important;
  max-height: 18px !important;
}

.elementor-social-icon svg {
  max-width: 16px !important;
  max-height: 16px !important;
}

/* Exclude slider, background, and banner SVGs from size caps */
.rev_slider svg,
.tp-caption svg,
.sr7-layer svg,
.elementor-background-overlay svg,
.elementor-background-slideshow svg {
  max-width: none !important;
  max-height: none !important;
}


/* "خدمات تخصصی پرمون" services-grid heading: the .ot-heading widget box
   shrink-wraps to its text content width instead of filling the column,
   so its own text-align:center only centers text inside that narrow box
   while the box itself hugs the right edge (RTL block flow) — leaving all
   the empty space on the left. Force the box to full width + margin auto
   so text-align:center actually centers it within the section. */
.elementor-element-ed99099 .ot-heading,
.elementor-element-ed99099 .elementor-widget-container,
.elementor-element-ed99099 .elementor-widget-iheading {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* "خدمات تخصصی پرمون" heading sits as the top-center grid cell and floats
   mid-column (vertically centered against the tall feature card next to it).
   Lift it to the top of its cell so it aligns with the card title, and give
   the Persian kicker ("خدمات ما") teal accent + spacing. */
.elementor-element-ed99099 .elementor-element-7b3b0bf {
  align-self: flex-start !important;
  margin-top: -24px !important;
}
.elementor-element-ed99099 .elementor-element-7b3b0bf .ot-heading > span,
.elementor-element-ed99099 .elementor-element-7b3b0bf .sub-head,
.elementor-element-ed99099 .elementor-element-7b3b0bf .top-sub {
  color: var(--pgp-accent) !important;
  letter-spacing: 0.08em;
  font-weight: 700 !important;
}

/* Homepage CTA form ("آماده شروع هستید؟"): the ictf7 widget wraps the
   form in .wpcf7-placeholder-light (a Maxbizz class meant for dark
   backgrounds — white text/border). This section has a light/white
   background, so the inputs were invisible (white-on-white). Scope the
   override to this specific section only, so any legitimate dark-bg use
   of .wpcf7-placeholder-light elsewhere is untouched. */
.elementor-element-828d27d .wpcf7-placeholder-light .wpcf7-form-control {
  color: #121212 !important;
  border-color: #d2d5db !important;
  background: #fff !important;
}
.elementor-element-828d27d .wpcf7-placeholder-light .wpcf7-form-control::placeholder {
  color: #8a8f98 !important;
}
.elementor-element-828d27d .wpcf7-not-valid-tip {
  color: #c0392b !important;
}

/* Hero kicker (8f5fe55): sits above the H1 on the dark datacenter hero.
   The widget carried a leftover white background (rendered as an empty
   white pill over the dark hero) — strip it so only the teal eyebrow shows. */
.elementor-2313 .elementor-element.elementor-element-8f5fe55 > .elementor-widget-container {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}
.elementor-2313 .elementor-element.elementor-element-8f5fe55 .elementor-heading-title {
    color: var(--pgp-accent-hover, #2a8a86) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    margin-bottom: 8px !important;
    text-shadow: none !important;
}

/* ==========================================================================
   PGP DESIGN SYSTEM TOKENS & COMPONENT LIBRARY (Phase 1)
   ========================================================================== */

:root {
  /* Color System */
  --pgp-c-primary: #0F6E68;
  --pgp-c-dark: #052C34;
  --pgp-c-accent: #29D3C2;
  --pgp-c-bg: #F8FAFB;
  --pgp-c-text: #1A1A1A;
  --pgp-c-muted: #64748B;
  --pgp-c-border: rgba(5, 44, 52, 0.08);

  /* Typography Scale */
  --pgp-fs-h1: 56px;
  --pgp-fs-h2: 42px;
  --pgp-fs-h3: 28px;
  --pgp-fs-h4: 22px;
  --pgp-fs-body-lg: 18px;
  --pgp-fs-body: 16px;
  --pgp-fs-small: 14px;
  --pgp-fs-caption: 12px;

  /* Spacing System */
  --pgp-space-section: 90px;
  --pgp-container-max: 1280px;
  --pgp-card-gap: 24px;
  --pgp-elem-gap: 16px;
}

/* Base Utility Classes */
.pgp-section-padded {
  padding-top: var(--pgp-space-section) !important;
  padding-bottom: var(--pgp-space-section) !important;
}

.pgp-container {
  width: 100%;
  max-width: var(--pgp-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* Component 6: Standard Section Header */
.pgp-comp-header {
  text-align: center;
  margin-bottom: 50px;
  direction: rtl;
}

.pgp-comp-header__badge {
  display: inline-block;
  font-size: var(--pgp-fs-small);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--pgp-c-primary);
  background: rgba(15, 110, 104, 0.08);
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 12px;
}

.pgp-comp-header__title {
  font-size: var(--pgp-fs-h2) !important;
  font-weight: 800 !important;
  color: var(--pgp-c-dark) !important;
  line-height: 1.25 !important;
  margin: 0 0 14px 0 !important;
}

.pgp-comp-header__sub {
  font-size: var(--pgp-fs-body-lg) !important;
  color: var(--pgp-c-muted) !important;
  max-width: 720px;
  margin: 0 auto !important;
  line-height: 1.6;
}

/* Component 1: Enterprise Mega Product Card (Option 7) */
.pgp-comp-product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--pgp-card-gap);
  direction: rtl;
}

@media (max-width: 991px) {
  .pgp-comp-product-grid {
    grid-template-columns: 1fr;
  }
}

.pgp-comp-product-card {
  background: linear-gradient(135deg, var(--pgp-c-dark) 0%, #0B424A 100%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(5, 44, 52, 0.25);
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  min-height: 300px;
  display: flex;
}

.pgp-comp-product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(5, 44, 52, 0.4);
  border-color: var(--pgp-c-accent);
}

.pgp-comp-product-card__inner {
  display: flex;
  width: 100%;
  padding: 32px;
  justify-content: space-between;
  position: relative;
}

.pgp-comp-product-card__left {
  flex: 1 1 60%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pgp-comp-product-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.pgp-comp-product-card__title {
  margin: 0 !important;
  display: flex;
  flex-direction: column;
}

.pgp-comp-product-card__title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pgp-comp-product-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pgp-c-accent);
}

.pgp-comp-product-card__en {
  font-size: 1.4rem;
  font-weight: 800;
  color: #FFFFFF !important;
  letter-spacing: 0.5px;
}

.pgp-comp-product-card__fa {
  font-size: var(--pgp-fs-small);
  color: rgba(255, 255, 255, 0.7) !important;
  font-weight: 500;
}

.pgp-comp-product-card__count {
  font-size: var(--pgp-fs-caption);
  font-weight: 700;
  color: var(--pgp-c-accent);
  background: rgba(41, 211, 194, 0.12);
  border: 1px solid rgba(41, 211, 194, 0.3);
  padding: 4px 12px;
  border-radius: 20px;
}

.pgp-comp-product-card__desc {
  font-size: var(--pgp-fs-small) !important;
  color: #E2E8F0 !important;
  line-height: 1.5;
  margin: 12px 0 18px 0 !important;
}

.pgp-comp-product-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #FFFFFF;
  color: var(--pgp-c-dark) !important;
  font-weight: 700;
  font-size: var(--pgp-fs-small);
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none !important;
  transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.pgp-comp-product-card:hover .pgp-comp-product-card__btn {
  background: var(--pgp-c-accent) !important;
  color: var(--pgp-c-dark) !important;
}

.pgp-comp-product-card__right {
  flex: 0 0 35%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pgp-comp-product-card__media-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
}

.pgp-comp-product-card__media-wrap img {
  max-width: 100px !important;
  max-height: 100px !important;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
  transition: transform 0.35s ease;
}

.pgp-comp-product-card:hover .pgp-comp-product-card__media-wrap img {
  transform: scale(1.12) rotate(-3deg);
}

/* Component 5: CTA Banner */
.pgp-comp-cta {
  background: linear-gradient(135deg, var(--pgp-c-dark) 0%, var(--pgp-c-primary) 100%);
  border-radius: 20px;
  padding: 56px 40px;
  color: #FFFFFF;
  text-align: center;
  box-shadow: 0 16px 40px rgba(5, 44, 52, 0.25);
  margin: 60px auto;
  max-width: var(--pgp-container-max);
  direction: rtl;
}

.pgp-comp-cta__title {
  font-size: var(--pgp-fs-h2) !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin: 0 0 12px 0 !important;
}

.pgp-comp-cta__desc {
  font-size: var(--pgp-fs-body-lg) !important;
  color: #E2E8F0 !important;
  margin: 0 0 28px 0 !important;
}

.pgp-comp-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--pgp-c-accent);
  color: var(--pgp-c-dark) !important;
  font-weight: 800;
  font-size: var(--pgp-fs-body);
  padding: 16px 36px;
  border-radius: 10px;
  text-decoration: none !important;
  box-shadow: 0 8px 24px rgba(41, 211, 194, 0.3);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pgp-comp-cta__btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(41, 211, 194, 0.5);
}

/**
 * Product card — "1a photo-forward minimal" (design_handoff_product_cards, 2026-08-08).
 * Used on /products/: top catalog grid + PM-22X family sub-grid.
 */
.pgp-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

.pgp-photo-card {
  background: #fff;
  border: 1px solid #e3e1db;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.pgp-photo-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(18, 18, 18, 0.08);
  border-color: #1f6b68;
}

.pgp-photo-card-media {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #fff;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.pgp-photo-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pgp-photo-card-media--placeholder {
  background-image: repeating-linear-gradient(45deg, #f4f3ef, #f4f3ef 10px, #ebe9e4 10px, #ebe9e4 20px);
  padding: 0;
}

.pgp-photo-card-media--placeholder span {
  font-family: monospace;
  font-size: 12px;
  color: #8a8a8a;
  background: #fff;
  padding: 4px 8px;
  border-radius: 4px;
}

.pgp-photo-card-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pgp-photo-card-tag {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  color: #1f6b68;
  background: rgba(31, 107, 104, 0.09);
  padding: 3px 10px;
  border-radius: 100px;
}

.pgp-photo-card-title {
  margin: 0;
  font-family: 'Estedad', 'Vazirmatn', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #121212;
}

.pgp-photo-card-blurb {
  margin: 0;
  font-family: 'Vazirmatn', sans-serif;
  font-size: 13px;
  color: #5a616c;
  line-height: 1.7;
}

.pgp-photo-card-cta {
  font-size: 12.5px;
  font-weight: 700;
  color: #1f6b68;
  margin-top: 4px;
}

.pgp-family-intro {
  margin: 48px 0 20px;
}

.pgp-family-intro h3 {
  font-family: 'Estedad', 'Vazirmatn', sans-serif;
  margin-bottom: 4px;
}

/* Category-grouped catalog layout (light theme, existing colors —
   just the "group heading + teal rule + card grid" structure). */
.pgp-catalog-groups { margin: 8px 0 0; }
.pgp-catalog-group { margin-bottom: 48px; }
.pgp-catalog-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}
.pgp-catalog-group-head h2 {
  margin: 0;
  font-family: 'Estedad', 'Vazirmatn', sans-serif;
  font-weight: 700;
  font-size: 18px;
  white-space: nowrap;
  color: #121212;
}
.pgp-catalog-group-rule {
  flex: 1;
  height: 3px;
  background: #1f6b68;
}

/* PM-22xx comparison strip (under the 3 modem cards) */
.pgp-compare-strip {
  margin-top: 18px;
  background: #fff;
  border: 1px solid #e3e1db;
  border-radius: 10px;
  overflow: hidden;
}
.pgp-compare-row {
  display: grid;
  grid-template-columns: 140px repeat(3, 1fr);
  border-bottom: 1px solid #eee;
}
.pgp-compare-row:last-child { border-bottom: none; }
.pgp-compare-row:first-child {
  background: #f7f9fa;
}
.pgp-compare-cell {
  padding: 10px 14px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #5a616c;
  border-inline-start: 1px solid #eee;
}
.pgp-compare-cell:first-child { border-inline-start: none; }
.pgp-compare-row:first-child .pgp-compare-cell {
  font-family: 'Estedad', 'Vazirmatn', sans-serif;
  font-weight: 700;
  color: #121212;
  font-size: 12px;
}
.pgp-compare-label {
  font-weight: 700;
  color: #121212;
  background: #f7f9fa;
}
@media (max-width: 700px) {
  .pgp-compare-row { grid-template-columns: 100px repeat(3, 1fr); }
  .pgp-compare-cell { padding: 8px 8px; font-size: 11px; }
}

/* Corner badge for software/document cards (PDF or SW) */
.pgp-photo-card { position: relative; }
.pgp-card-badge {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  z-index: 2;
  font-family: 'Estedad', 'Vazirmatn', sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .03em;
  color: #fff;
  background: #0f2433;
  padding: 3px 9px;
  border-radius: 100px;
}
.pgp-card-badge--pdf { background: #8a4b1f; }
.pgp-card-badge--sw { background: #1f6b68; }

/* Product detail sections: hidden by default, revealed only when their
   catalog card is clicked (URL hash matches the section's id). No JS. */
.pgp-reveal {
  display: none;
  scroll-margin-top: 100px;
}

/* ==========================================================================
   Product detail page — gallery + specs (products/pm-2202, pm-2208, etc.)
   Restored to the repo after being lost to sync-to-local.sh (was
   previously written directly to the live theme file only).
   ========================================================================== */
.pgp-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  width: 100%;
  max-width: 100%;
}
@media (max-width: 900px) {
  .pgp-detail-grid { grid-template-columns: minmax(0, 1fr); }
}

.pgp-detail-gallery,
.pgp-detail-info {
  min-width: 0;
  max-width: 100%;
}

.pgp-spec-row {
  min-width: 0;
}
.pgp-spec-value {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.pgp-page-body.container {
  overflow-x: hidden;
}

.pgp-detail-gallery { display: flex; flex-direction: column; gap: 14px; }

.pgp-gallery-main {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 1px solid var(--pgp-rule, #d2d5db);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pgp-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pgp-gallery-thumbs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.pgp-gallery-thumb {
  width: 64px;
  height: 64px;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  flex-shrink: 0;
  border: 2px solid transparent;
  transition: border-color 0.15s ease;
}
.pgp-gallery-thumb.is-active,
.pgp-gallery-thumb:hover {
  border-color: var(--pgp-accent, #1f6b68);
}
.pgp-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pgp-detail-info,
.pgp-product-detail-box,
.pgp-product-box,
.pgp-specs-wrap {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.pgp-spec-table {
  border-top: 1px solid var(--pgp-rule, #d2d5db) !important;
  margin: 16px 0 20px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* RTL spec table: label on the right, value right after it. Row shrinks to
   fit its own content (not the full column) so the divider line never
   crosses into blank space past the text. */
.pgp-spec-row {
  display: flex !important;
  gap: 16px !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--pgp-rule, #d2d5db) !important;
  align-items: baseline !important;
  width: fit-content !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.pgp-spec-label {
  width: 140px;
  flex-shrink: 0;
  font-size: 13px;
  color: var(--pgp-slate, #5a616c);
  font-weight: 600;
  text-align: right;
}
.pgp-spec-value {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--pgp-ink, #121212);
  direction: rtl;
  text-align: right;
}

.pgp-detail-photo-empty {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background-color: #f4f3ef;
  background-image: repeating-linear-gradient(45deg, #f4f3ef, #f4f3ef 12px, #ebe9e4 12px, #ebe9e4 24px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pgp-feature-list {
  list-style: none;
  margin: 4px 0 24px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.pgp-feature-list li {
  position: relative;
  padding-inline-start: 26px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--pgp-ink, #121212);
}
.pgp-feature-list li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  color: var(--pgp-accent, #1f6b68);
  font-weight: 700;
}
.pgp-detail-photo-empty span {
  font-family: monospace;
  font-size: 13px;
  color: #8a8a8a;
  background: #fff;
  padding: 5px 10px;
  border-radius: 4px;
}

.pgp-reveal:target {
  display: block;
}

.pgp-reveal-note {
  font-size: 12.5px;
  color: #8a8a8a;
  margin: -8px 0 20px;
}

.pgp-reveal-note a {
  font-weight: 700;
}

/* Detail-page title/blurb — deliberately separate from .pgp-page-title /
   .pgp-page-lede, which are white (styled for the dark hero-image banners
   on /about-pgp/ and /products/). These pages have a plain white
   background, so they need their own dark-ink variants. */
.pgp-detail-title {
  font-family: 'Estedad', 'Vazirmatn', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #121212 !important;
  margin: 14px 0 12px;
}

.pgp-detail-blurb {
  font-size: 15px;
  color: #5a616c !important;
  line-height: 1.9;
  margin: 0 0 24px;
}

/* =============================================================================
   Home feature-card strip (SEC2 cbfbdeb): 3 product cards under the hero.
   Were floating on the white page with transparent bg (only a faint shadow)
   and a large empty gap before "توانمندی‌ها". Pull the strip up so the cards
   straddle the dark hero edge (classic feature strip), give them a solid white
   surface so they pop, and trim the following section's top padding.
   ============================================================================= */
.elementor-page-2313 .elementor-element-cbfbdeb {
  margin-top: -120px !important;
  position: relative !important;
  z-index: 5 !important;
}
/* Card row was full-width (~1890px) while the hero content and every other
   section use a 1350px centered column — so the cards sprawled off-axis.
   Constrain the row to the same centered content width. */
.elementor-page-2313 .elementor-element-cbfbdeb > .elementor-container {
  max-width: 1350px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
}
.elementor-page-2313 .elementor-element-cbfbdeb > .elementor-container > .elementor-column {
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: none !important;
  display: flex !important;
}
.elementor-page-2313 .elementor-element-cbfbdeb .elementor-widget-wrap {
  width: 100% !important;
  height: 100% !important;
}
.elementor-page-2313 .elementor-element-cbfbdeb .elementor-widget-container {
  background: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 18px 40px rgba(15, 36, 51, 0.16) !important;
}
/* tighten the gap to the next section (was padding-top:175px, margin-top:-75px) */
.elementor-page-2313 .elementor-element-043c467 {
  margin-top: 0 !important;
  padding-top: 70px !important;
}

/* Feature cards (SEC2) live on a WHITE surface, but the widgets carry
   Maxbizz per-widget hover colors meant for dark cards (title -> white,
   text -> light blue-grey) — so on hover the text faded out. Pin the
   hover colors to the normal dark palette for these three white cards. */
.elementor-2313 .elementor-element-cbfbdeb .icon-box:hover .title-box,
.elementor-2313 .elementor-element-cbfbdeb .icon-box:hover .title-box a {
  color: var(--pgp-ink) !important;
}
.elementor-2313 .elementor-element-cbfbdeb .icon-box:hover p {
  color: var(--pgp-slate) !important;
}

/* Product-page unified downloads (.pgp-downloads): catalog, app-note,
   standards, certs, DWG — one professional card grid beside the CTA. */
.pgp-detail-actions { margin: 6px 0 24px; }
.pgp-btn-lg { padding: 13px 32px !important; font-size: 15px !important; }

.pgp-downloads { margin: 4px 0 8px !important; width: 100% !important; max-width: 100% !important; overflow: hidden !important; box-sizing: border-box !important; }
.pgp-downloads-title {
  font-family: 'Estedad', 'Vazirmatn', sans-serif !important;
  font-size: 14px !important; font-weight: 700 !important; color: var(--pgp-slate, #5a616c) !important;
  letter-spacing: .02em !important; margin: 0 0 14px !important;
  display: flex !important; align-items: center !important; gap: 12px !important;
  width: 100% !important; max-width: 100% !important; overflow: hidden !important; box-sizing: border-box !important;
}
.pgp-downloads-title::after {
  content: "" !important; flex: 1 1 auto !important; min-width: 0 !important; max-width: 100% !important; height: 1px !important; background: var(--pgp-rule, #d2d5db) !important;
}
.pgp-download-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 600px) { .pgp-download-grid { grid-template-columns: 1fr; } }
/* a lone final card (odd count) spans both columns so the grid ends flush
   instead of leaving a ragged empty cell */
.pgp-download-grid .pgp-dl-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pgp-dl-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--pgp-rule, #d2d5db);
  border-radius: 10px; background: #fff;
  text-decoration: none !important; color: #121212 !important;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.pgp-dl-card:hover {
  border-color: var(--pgp-accent, #1f6b68);
  box-shadow: 0 8px 20px rgba(15, 36, 51, .09);
  transform: translateY(-2px);
}
.pgp-dl-ico {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(31, 107, 104, .10); color: var(--pgp-accent, #1f6b68);
}
.pgp-dl-ico svg { width: 20px !important; height: 20px !important; max-width:20px !important; max-height:20px !important; }
.pgp-dl-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pgp-dl-name {
  font-family: 'Estedad', 'Vazirmatn', sans-serif;
  font-size: 13.5px; font-weight: 700; line-height: 1.45; color: #121212;
}
.pgp-dl-meta { display: flex; align-items: center; gap: 8px; }
.pgp-dl-type {
  font-size: 10px; font-weight: 800; letter-spacing: .04em;
  color: #fff; padding: 2px 8px; border-radius: 100px; white-space: nowrap;
}
.pgp-dl-type--pdf { background: #8a4b1f; }
.pgp-dl-type--img { background: #1f6b68; }
.pgp-dl-type--dwg { background: #0f2433; }
.pgp-dl-size { font-size: 11.5px; color: var(--pgp-slate, #5a616c); }

/* =============================================================================
   Services page (/services-cyber/, post 2353) — .pgp-svc-* card grid.
   This markup existed in post_content with NO matching CSS at all (hence
   giant unstyled default SVG icons with no cards/columns) — this is the
   first styling it has ever had. 3-column group layout matching the
   reference: each group has a thin top rule + icon + title, then a
   vertical stack of bordered service cards underneath.
   ============================================================================= */
.pgp-svc-groups {
  max-width: var(--pgp-grid-max);
  margin: 0 auto;
  padding: 56px 20px 80px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  direction: rtl;
}

@media (max-width: 900px) {
  .pgp-svc-groups {
    grid-template-columns: 1fr;
  }
}

.pgp-svc-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pgp-svc-group-rule {
  height: 3px;
  width: 64px;
  background: var(--pgp-accent);
  margin-bottom: 22px;
}

.pgp-svc-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}

.pgp-svc-group-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  color: var(--pgp-accent);
}

.pgp-svc-group-icon svg {
  width: 24px;
  height: 24px;
}

.pgp-svc-group-head h2 {
  font-family: var(--pgp-font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--pgp-ink);
  margin: 0;
}

.pgp-svc-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pgp-svc-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--pgp-rule);
  border-radius: var(--pgp-radius);
  padding: 18px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pgp-svc-card:hover {
  border-color: var(--pgp-accent);
  box-shadow: 0 8px 24px rgba(15, 36, 51, 0.08);
}

.pgp-svc-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: var(--pgp-accent);
  margin-top: 2px;
}

.pgp-svc-card-icon svg {
  width: 20px;
  height: 20px;
}

.pgp-svc-card-body h3 {
  font-family: var(--pgp-font-display);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--pgp-ink);
  margin: 0 0 6px;
}

.pgp-svc-card-body p {
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--pgp-slate);
  margin: 0;
}