.page-id-14951 .porto-html-block.porto-block-html-banner, .postid-16049 .porto-html-block.porto-block-html-banner, .postid-16285 .porto-html-block.porto-block-html-banner, .page-id-16579 .porto-html-block.porto-block-html-banner, .page-id-17011 .porto-html-block.porto-block-html-banner, .postid-16739 .porto-html-block.porto-block-html-banner, .postid-17407 .porto-html-block.porto-block-html-banner, .postid-17700 .porto-html-block.porto-block-html-banner, .postid-17755 .porto-html-block.porto-block-html-banner, .postid-17782 .porto-html-block.porto-block-html-banner, .page-id-13 .porto-html-block.porto-block-html-banner, .page-id-1644 .porto-html-block.porto-block-html-banner {
display:none;
}
#footer .widget-title {
font-size: 1.125rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0;
color: white;
}
#header .logo .standard-logo ,.textwidget p a img {
max-width: 150px !important;
}
/*.page-id-7527 .porto-block-html-banner, .page-id-7563 .porto-block-html-banner, .page-id-7602 .porto-block-html-banner, .home .porto-block-html-banner {
display: none;
}
*/
.page-id-7527 #header a, .page-id-7527 #header li {
color: #fff !important;
}
.page-id-7527 #header, .page-id-7563 #header, .page-id-13 #header, .page-id-1644 #header {
border: none !important;
}
.portfolio-item {
cursor: pointer;
}
#nav-panel .accordion-menu li.menu-item.active>a , #nav-panel .accordion-menu li.menu-item.active>.arrow {
color:#432663 !important;
}
p {
font-display: swap;
}
.page-id-14417 .breadcrumb,
.page-id-14417 h1,
.page-id-14417 .page-title,
.page-id-14417 .elementor-page-title {
display: none !important;
}
#header.sticky-header .header-main {
background-color: rgba(255, 255, 255, 0);
border: none !important;
box-shadow: none !important;
}
/* Chatbot CSS */
[id*="chatbot-widget"] button {
background: #EE5945 !important;
}
#main {
position: relative;
margin-left: auto;
margin-right: auto;
}
article.post h2 a, article.post h4 a{
color:#fff !important
}
h2 {
font: var(--porto-h2-fst, normal) var(--porto-h2-fw, 700) var(--porto-h2-fs, 2.2em) / var(--porto-h2-lh, 40px) var(--porto-h2-ff, var(--porto-body-ff)), sans-serif;
color: #fff !important;
letter-spacing: var(--porto-h2-ls, -0.05em)
--porto-h2-ls is not defined
;
margin-bottom: 32px;
}
article.post .btn-readmore {
color: #f16e5e !important;
}
.widget .widget-title {
color: #ffff !important;
}
p{
color:whitesmoke;
}
.widget_recent_entries > ul li > a {
color:whitesmoke !important;
}
.widget .rss-date, .widget .post-date, .widget .comment-author-link, .wp-block-latest-posts__list time, .wp-block-latest-posts__list .wp-block-latest-posts__post-excerpt {
color:#F56E28 !important;
}
.widget_archive li>a, .widget_categories li>a, .widget_meta li>a, .widget_nav_menu li>a, .widget_pages li>a, .widget_recent_comments li>a, .widget_recent_entries li>a, .widget_rss li>a, .wp-block-archives-list li>a, .wp-block-categories-list li>a, .wp-block-latest-posts:not(.wp-block-latest-posts__list) li>a {
color: whitesmoke !important;
}
.widget_recent_entries li, .widget_recent_comments li, .widget_pages li, .widget_meta li, .widget_nav_menu li, .widget_archive li, .widget_categories li, .widget_rss li, .wp-block-latest-posts__list.wp-block-latest-posts li, .wp-block-latest-posts__list.wp-block-latest-posts li a {
color: whitesmoke !important;
}
header,
.header-main,
.header-wrapper,
#header {
border-bottom: none !important;
box-shadow: none !important;
}
@media (max-width: 991px){
#header .header-main,
#header .header-main .header-left,
#header .header-main .header-center,
#header .header-main .header-right,
.header-builder-p .header-main:not(.e-con) {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
min-height: auto !important;
}}
li {
line-height: var(--porto-body-lh);
color: whitesmoke;
}
.post-content{
color:white;
}
body.blog #main {
padding-top: 80px;
}
/* ================================================
APPLE GLASS NAVBAR — WebbingStone Header
================================================ */
/* ── Outer floating pill wrapper: add side padding so
the pill doesn't stretch full-width ─────────── */
.elementor-element-0508be4,
.elementor-element-7210f7f {
padding-left: 24px !important;
padding-right: 24px !important;
margin-top: 16px !important;
}
/* ── The glass pill itself ───────────────────────── */
.elementor-element-be8cdb5,
.elementor-element-4ef52b4 {
background: rgba(15, 15, 20, 0.45) !important;
-webkit-backdrop-filter: saturate(180%) blur(24px) !important;
backdrop-filter: saturate(180%) blur(24px) !important;
border: 1px solid rgba(255, 255, 255, 0.14) !important;
border-radius: 50px !important;
box-shadow:
0 2px 24px rgba(0, 0, 0, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.18),
inset 0 -1px 0 rgba(0, 0, 0, 0.12) !important;
min-height: 56px !important;
padding-left: 12px !important;
padding-right: 12px !important;
}
/* ── Nav menu links: Apple-style weight & spacing ── */
.elementor-element-c0a8108 .eael-simple-menu > li > a,
.elementor-element-c0a8108 .eael-simple-menu li > a {
font-size: 14px !important;
font-weight: 500 !important;
letter-spacing: 0.01em !important;
color: rgba(255, 255, 255, 0.88) !important;
padding-left: 14px !important;
padding-right: 14px !important;
transition: color 0.2s ease !important;
}
/* ── Prevent the flash: set explicit height immediately ─ */
#header .elementor-element-0508be4 {
min-height: 56px !important;
}
/* ── Logo: transparent bg so no gray box bleeds through ─ */
.elementor-element-37d0231 img,
.elementor-element-37d0231 .elementor-widget-container {
background: transparent !important;
}
/* ================================================
FOOTER — Remove extra space
================================================ */
/* Footer main — keep top padding, reduce bottom */
#footer .footer-main > .container {
padding-top: 40px !important;
padding-bottom: 10px !important;
}
/* Footer main — columns align to top, not stretch */
#footer .footer-main .row {
align-items: flex-start !important;
}
/* Footer bottom — strip Porto's 22px padding, keep it compact */
#footer .footer-bottom {
padding: 0 !important;
}
#footer .footer-bottom .container {
padding-top: 14px !important;
padding-bottom: 14px !important;
}
/* ================================================
FOOTER — Logos in one line (GoodFirms, Meta, Top Firms)
Widget: #custom_html-2
================================================ */
#custom_html-2 .textwidget,
#custom_html-2 .widget-text {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 16px !important;
}
/* ================================================
FOOTER STATUS BAR — Convenient 3-column layout
Left: Copyright | Center: (empty) | Right: Phone
================================================ */
/* Make the footer-bottom container a flex row */
#footer .footer-bottom .container {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: wrap !important;
gap: 8px !important;
padding-top: 14px !important;
padding-bottom: 14px !important;
}
/* Copyright — left side */
#footer .footer-bottom .footer-center {
flex: 1 !important;
text-align: start !important;
padding: 0 !important;
margin: 0 !important;
}
/* On mobile — stack vertically */
@media (max-width: 767px) {
#footer .footer-bottom .container {
flex-direction: column !important;
text-align: center !important;
}
#footer .footer-bottom .footer-center {
text-align: center !important;
}
}
/* English Menu Hover & Active Color Fix - Match Arabic Menu */
:root { --e-global-color-dae52a5: #EE5946; }
.elementor-element-c0a8108 .eael-simple-menu-container .eael-simple-menu li:hover > a,
.elementor-element-c0a8108 .eael-simple-menu li:hover > a,
.elementor-element-c0a8108 .eael-simple-menu > li > a:hover,
.elementor-element-c0a8108 .eael-simple-menu > li > a:focus,
.eael-simple-menu-container .eael-simple-menu li:hover > a {
color: #EE5946 !important;
}
.elementor-element-c0a8108 .eael-simple-menu li > a.eael-item-active,
.elementor-element-c0a8108 .eael-simple-menu li.current-menu-item > a,
.elementor-element-c0a8108 .eael-simple-menu li.current-menu-ancestor > a {
color: #EE5946 !important;
}
/* ── WS Fix: Active dropdown menu item highlight ── */
.elementor-nav-menu .sub-menu .current-menu-item > a,
.elementor-nav-menu .sub-menu .current-page-item > a,
.elementor-nav-menu .sub-menu .current-menu-ancestor > a,
.eael-simple-menu .sub-menu .current-menu-item > a,
.eael-simple-menu .sub-menu .current-page-item > a,
.eael-simple-menu .sub-menu .current-menu-ancestor > a,
header .sub-menu .current-menu-item > a,
header .sub-menu .current-page-item > a {
background-color: transparent !important;
background: transparent !important;
color: #EE5946 !important;
font-weight: 600 !important;
}
/* Parent item highlight when on a child page */
.elementor-nav-menu .current-menu-ancestor > a,
.eael-simple-menu .current-menu-ancestor > a,
header .current-menu-ancestor > a {
color: #EE5946 !important;
}
/* ── WS Fix: Header wrapper - no visible height, fixed header handles visibility ── */
.header-wrapper,
#header.header-builder,
.elementor-location-header {
min-height: 0 !important;
height: 0 !important;
overflow: visible !important;
}
/* ── WS Fix: Force desktop header fixed above all content on hover ── */
.elementor-element-0508be4 {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 99999 !important;
}
/* ── WS Fix: Prevent page sections creating stacking contexts above header ── */
#ws-main-content .elementor-section,
#ws-main-content .e-con.e-parent {
z-index: auto !important;
}
/* ================================================
MOBILE NAV FIX — widget b0970e1 in header 7210f7f
================================================ */
@media (max-width: 767px) {
/* Mobile header z-index above everything */
[data-id="7210f7f"] {
z-index: 999999 !important;
}
/* Glass pill must allow dropdown overflow */
[data-id="4ef52b4"] {
overflow: visible !important;
justify-content: space-between !important;
}
/* Nav widget container needs relative for dropdown positioning */
.elementor-element-b0970e1 .elementor-widget-container {
position: relative !important;
}
/* Also change positioning to absolute instead of fixed */
[data-id="b0970e1"] nav.elementor-nav-menu--dropdown {
position: absolute !important;
top: 100% !important;
left: -20px !important;
right: -20px !important;
width: auto !important;
background: rgba(15, 15, 20, 0.96) !important;
-webkit-backdrop-filter: saturate(180%) blur(20px) !important;
backdrop-filter: saturate(180%) blur(20px) !important;
border: 1px solid rgba(255,255,255,0.1) !important;
border-radius: 0 0 16px 16px !important;
z-index: 999999 !important;
max-height: 75vh !important;
overflow-y: auto !important;
padding: 8px 0 !important;
box-shadow: 0 16px 48px rgba(0,0,0,0.5) !important;
}
/* Menu items */
[data-id="b0970e1"] nav.elementor-nav-menu--dropdown li a {
color: rgba(255,255,255,0.9) !important;
padding: 13px 20px !important;
border-bottom: 1px solid rgba(255,255,255,0.06) !important;
font-size: 15px !important;
}
[data-id="b0970e1"] nav.elementor-nav-menu--dropdown li a:active {
color: #EE5946 !important;
}
/* Sub-menu items indented */
[data-id="b0970e1"] nav.elementor-nav-menu--dropdown .sub-menu {
background: rgba(255,255,255,0.03) !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
}
[data-id="b0970e1"] nav.elementor-nav-menu--dropdown .sub-menu li a {
padding-left: 36px !important;
font-size: 13px !important;
color: rgba(255,255,255,0.7) !important;
}
/* Toggle button ensure visible and tappable */
[data-id="b0970e1"] .elementor-menu-toggle {
min-width: 36px !important;
min-height: 36px !important;
}
}
/* ================================================
FIX 1: Hero heading visible + spacing (widget 27259c9)
================================================ */
.elementor-element-27259c9 .elementor-heading-title {
display: block !important;
}
.elementor-element-a18d7ce {
animation: none !important;
transform: none !important;
opacity: 1 !important;
visibility: visible !important;
}
/* ================================================
FIX 2: Mobile header — single row, burger right
Glass pill 4ef52b4, containers 9133f55 + aa6e608
================================================ */
@media (max-width: 767px) {
/* Push content below fixed header */
body .elementor-location-header + *,
body [data-elementor-type="header"] + * {
padding-top: 120px !important;
}
/* Mobile header z-index */
[data-id="7210f7f"] {
z-index: 99999 !important;
}
/* Glass pill: single row, compact, overflow visible */
[data-id="4ef52b4"] {
overflow: visible !important;
min-height: auto !important;
padding: 4px 12px !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 0 !important;
}
/* Left container (logo + language): row, no wrap */
[data-id="9133f55"] {
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
flex: 1 !important;
min-width: 0 !important;
gap: 8px !important;
padding: 0 !important;
width: auto !important;
}
/* Right container (nav/burger): shrink to burger */
[data-id="aa6e608"] {
flex: 0 0 auto !important;
width: auto !important;
min-width: auto !important;
padding: 0 !important;
}
/* Logo compact */
[data-id="7210f7f"] [data-id="f95df04"] img {
height: 28px !important;
width: auto !important;
}
/* Language switcher compact */
[data-id="1276fef"] {
flex: 0 0 auto !important;
}
[data-id="1276fef"] .elementor-shortcode ul {
display: flex !important;
gap: 4px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
[data-id="1276fef"] .elementor-shortcode ul li a {
font-size: 13px !important;
padding: 2px 4px !important;
}
/* Nav widget: only burger visible, pushed right */
[data-id="b0970e1"] {
flex: 0 0 auto !important;
width: auto !important;
min-width: auto !important;
}
[data-id="b0970e1"] nav.elementor-nav-menu__container,
[data-id="b0970e1"] .elementor-nav-menu--main {
display: none !important;
}
[data-id="b0970e1"] .elementor-menu-toggle {
min-width: 36px !important;
min-height: 36px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 4px !important;
font-size: 18px !important;
background: transparent !important;
border: none !important;
color: #fff !important;
}
/* Dropdown nav when opened */
[data-id="b0970e1"] nav.elementor-nav-menu--dropdown {
position: fixed !important;
top: 100% !important;
left: -12px !important;
right: -12px !important;
width: auto !important;
background: rgba(15,15,20,0.96) !important;
-webkit-backdrop-filter: saturate(180%) blur(24px) !important;
backdrop-filter: saturate(180%) blur(24px) !important;
border: 1px solid rgba(255,255,255,0.1) !important;
border-radius: 16px !important;
z-index: 99999 !important;
max-height: 70vh !important;
overflow-y: auto !important;
padding: 8px 0 !important;
box-shadow: 0 16px 40px rgba(0,0,0,0.6) !important;
}
[data-id="b0970e1"] nav.elementor-nav-menu--dropdown li {
width: 100% !important;
}
[data-id="b0970e1"] nav.elementor-nav-menu--dropdown li a {
color: rgba(255,255,255,0.9) !important;
padding: 14px 20px !important;
border-bottom: 1px solid rgba(255,255,255,0.05) !important;
font-size: 15px !important;
white-space: normal !important;
display: block !important;
width: 100% !important;
}
[data-id="b0970e1"] nav.elementor-nav-menu--dropdown li a:active {
color: #EE5946 !important;
}
[data-id="b0970e1"] nav.elementor-nav-menu--dropdown .sub-menu {
padding-left: 0 !important;
}
[data-id="b0970e1"] nav.elementor-nav-menu--dropdown .sub-menu li a {
padding-left: 36px !important;
font-size: 14px !important;
color: rgba(255,255,255,0.65) !important;
}
}
/* ========================================================
* Hide empty WSC component mount points
* Fixes black gap above floating header on pages where
* the wsc-* JS components don't render content.
* Added: 2026-05-02
* ======================================================== */
body > div[id^="wsc-"]:empty {
display: none !important;
}
/* ========================================================
* Site-wide footer color: dark (match service pages)
* Source-of-truth is now Porto theme option (#02010a),
* but this override stays as a safety net in case any
* cached dynamic_style.css ever serves a stale purple.
* Added: 2026-05-02
* ======================================================== */
#footer.footer,
#footer.footer.footer-1,
#footer.footer.footer-2,
#footer.footer.footer-3 {
background-color: #02010a !important;
}
/* ========================================================
* Footer Bottom Trust Badges Row
* Uniform 30px height for all logos
* Updated: 2026-05-12
* ======================================================== */
#footer .footer-bottom .ws-footer-badges {
display: inline-flex !important;
align-items: center !important;
gap: 24px !important;
flex-wrap: wrap !important;
vertical-align: middle;
}
#footer .footer-bottom .ws-footer-badges img,
#footer .footer-bottom #custom_html-3 img {
height: 30px !important;
width: auto !important;
max-width: 120px !important;
object-fit: contain !important;
display: inline-block !important;
vertical-align: middle;
}
#footer .footer-bottom .ws-footer-badges a {
display: inline-flex !important;
align-items: center !important;
}
/* ========================================================
* Social Media Marketing service page â Editorial design
* Pages: postid-16049 (EN), postid-16285 (AR)
* Replaces the temporary 140px padding-top patch.
* Added: 2026-05-02
* ======================================================== */
/* Load Fraunces + Inter Tight from Google Fonts */
/* CSS variables scoped to the page wrapper */
body.postid-16049 .sm-page,
body.postid-16285 .sm-page {
--sm-bg: #0a0814;
--sm-bg-elev: #11101e;
--sm-bg-card: rgba(255, 255, 255, 0.025);
--sm-border: rgba(255, 255, 255, 0.08);
--sm-border-strong: rgba(255, 255, 255, 0.16);
--sm-text: #f5f3f0;
--sm-text-soft: rgba(245, 243, 240, 0.65);
--sm-text-faint: rgba(245, 243, 240, 0.4);
--sm-accent: #EE5946;
--sm-purple: #442764;
--sm-serif: 'Fraunces', 'Times New Roman', serif;
--sm-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
--sm-maxw: 1200px;
background: var(--sm-bg);
color: var(--sm-text);
font-family: var(--sm-sans);
font-size: 17px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
position: relative;
margin: 0 auto;
padding: 0;
overflow-x: hidden;
}
/* === TABLET PRICING === */
@media (min-width: 901px) and (max-width: 1100px) {
body.postid-16049 .sm-pricing-grid,
body.postid-16285 .sm-pricing-grid {
grid-template-columns: 1fr;
}
}
/* === MOBILE === */
@media (max-width: 900px) {
body.postid-16049 .sm-page > section,
body.postid-16285 .sm-page > section {
padding-left: 24px;
padding-right: 24px;
}
}
/* Hide canvas on mobile (perf) and reduced motion */
@media (max-width: 767px) {
body.postid-16049 .sm-hero-canvas,
body.postid-16285 .sm-hero-canvas { display: none; }
}
@media (prefers-reduced-motion: reduce) {
body.postid-16049 .sm-hero-canvas,
body.postid-16285 .sm-hero-canvas { display: none; }
}
/* === Work tile media (Vimeo iframes + WebP images) === */
body.postid-16049 .sm-work-media,
body.postid-16285 .sm-work-media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 1;
}
/* === Lazy-loaded video grid (2 videos, 16:9) === */
body.postid-16049 .sm-work-grid.sm-work-videos,
body.postid-16285 .sm-work-grid.sm-work-videos {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
margin-top: 80px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
body.postid-16049 .sm-video-poster.is-loaded::before,
body.postid-16285 .sm-video-poster.is-loaded::before {
opacity: 0;
}
body.postid-16049 .sm-video-poster.is-loaded .sm-play-icon,
body.postid-16285 .sm-video-poster.is-loaded .sm-play-icon {
opacity: 0;
pointer-events: none;
}
body.postid-16049 .sm-video-frame .sm-video-poster.is-loaded::before,
body.postid-16285 .sm-video-frame .sm-video-poster.is-loaded::before {
opacity: 0;
transition: opacity 0.6s ease;
}
/* Mobile */
@media (max-width: 767px) {
body.postid-16049 .sm-seo-cards,
body.postid-16285 .sm-seo-cards {
grid-template-columns: 1fr;
gap: 16px;
}
}
/* === sm-hero full-width (EN + AR) === */
/* Allow hero to break out of sm-page's overflow clip */
body.postid-16049 .sm-page,
body.postid-16285 .sm-page {
overflow-x: visible !important;
}
/* Inner content stays at readable width, centered */
body.postid-16049 .sm-hero > .sm-eyebrow,
body.postid-16049 .sm-hero > .sm-h1,
body.postid-16049 .sm-hero > .sm-lede,
body.postid-16049 .sm-hero > .sm-ctas,
body.postid-16285 .sm-hero > .sm-eyebrow,
body.postid-16285 .sm-hero > .sm-h1,
body.postid-16285 .sm-hero > .sm-lede,
body.postid-16285 .sm-hero > .sm-ctas {
max-width: 1100px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 40px !important;
}
/* Keep the Three.js canvas at full hero width (already inset:0, just ensure no max-width kicks in) */
body.postid-16049 .sm-hero-canvas,
body.postid-16285 .sm-hero-canvas {
max-width: none !important;
width: 100% !important;
}
/* === Contact page (page-id-13): reorder sections so form comes after hero === */
body.page-id-13 #ws-page-wrap {
display: flex !important;
flex-direction: column !important;
}
body.page-id-13 #ws-page-wrap > * { order: 99; }
body.page-id-13 #ws-hero { order: 1 !important; }
body.page-id-13 #ws-contact { order: 2 !important; }
body.page-id-13 #ws-stats { order: 3 !important; }
body.page-id-13 .ws-social-links { order: 4 !important; }
body.page-id-13 #ws-contact .ws-section-label,
body.page-id-13 #ws-contact .ws-section-title {
display: none !important;
}
/* Stack form first, contact info below (applies on all screen sizes) */
body.page-id-13 .ws-contact-grid {
display: flex !important;
flex-direction: column !important;
grid-template-columns: 1fr !important;
align-items: center !important;
gap: 60px !important;
max-width: 900px !important;
margin-left: auto !important;
margin-right: auto !important;
}
body.page-id-13 .ws-contact-grid > .ws-form-wrap {
order: 1 !important;
width: 100% !important;
max-width: 720px !important;
}
body.page-id-13 .ws-contact-grid > *:not(.ws-form-wrap) {
order: 2 !important;
width: 100% !important;
text-align: center !important;
}
/* Mobile: shrink hero so form is reachable, hide scroll-down hint */
@media (max-width: 768px) {
body.page-id-13 #ws-hero {
height: auto !important;
min-height: auto !important;
padding: 100px 5vw 30px !important;
}
body.page-id-13 #ws-hero .ws-hero-title {
font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
line-height: 1.05 !important;
}
body.page-id-13 #ws-hero .ws-hero-sub {
font-size: 0.95rem !important;
}
body.page-id-13 #ws-hero .ws-scroll-hint {
display: none !important;
}
}
/* Change Fraunces to Poppins on Social Media Marketing page */
body.postid-16049 .sm-page {
--sm-serif: 'Poppins', 'Montserrat', sans-serif !important;
}
/* Stack form first, contact info below (applies on all screen sizes) */
body.page-id-1644 .ws-contact-grid {
display: flex !important;
flex-direction: column !important;
grid-template-columns: 1fr !important;
align-items: center !important;
gap: 60px !important;
max-width: 900px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Mobile: shrink hero so form is reachable, hide scroll-down hint */
@media (max-width: 768px) {
body.page-id-1644 #ws-hero {
height: auto !important;
min-height: auto !important;
padding: 100px 5vw 30px !important;
}
}
/* English nav menu active/current item - orange highlight matching homepage */
.elementor-element-535d8e6 .elementor-nav-menu--main li.current-menu-item > a.elementor-item,
.elementor-element-535d8e6 .elementor-nav-menu--main li.current-menu-ancestor > a.elementor-item,
.elementor-element-535d8e6 .elementor-nav-menu--main li.current_page_item > a.elementor-item,
.elementor-element-535d8e6 .elementor-nav-menu--main li.current_page_ancestor > a.elementor-item {
color: #EE5946 !important;
}
/* Arabic homepage (page-id-17702) - force full width layout */
.page-id-17702 #main,
.page-id-17702 .main-content,
.page-id-17702 .row.main-content-wrap,
.page-id-17702 #main .container {
max-width: 100% !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Fix: restore full-bleed hero background + text overlay (missing base positioning) */
body.postid-16049 .sm-hero,
body.postid-16285 .sm-hero {
position: relative;
overflow: hidden;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
box-sizing: border-box;
}
body.postid-16049 .sm-hero-canvas,
body.postid-16285 .sm-hero-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
}
body.postid-16049 .sm-hero > .sm-eyebrow,
body.postid-16049 .sm-hero > .sm-h1,
body.postid-16049 .sm-hero > .sm-lede,
body.postid-16049 .sm-hero > .sm-ctas,
body.postid-16285 .sm-hero > .sm-eyebrow,
body.postid-16285 .sm-hero > .sm-h1,
body.postid-16285 .sm-hero > .sm-lede,
body.postid-16285 .sm-hero > .sm-ctas {
position: relative;
z-index: 1;
}
/* ============================================
Full section redesign for Social Media Marketing service page
(postid-16049 / postid-16285) - sm-page component system
Added 2026-07-19
============================================ */
body.postid-16049 .sm-page,
body.postid-16285 .sm-page {
font-family: Poppins, Montserrat, sans-serif;
color: #f5f3f0;
}
body.postid-16049 .sm-section,
body.postid-16285 .sm-section {
max-width: none;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
box-sizing: border-box;
padding: 90px 60px;
}
body.postid-16049 .sm-closing,
body.postid-16285 .sm-closing {
max-width: 900px;
margin: 0 auto;
padding: 100px 24px 120px;
text-align: center;
}
body.postid-16049 .sm-section-eyebrow,
body.postid-16285 .sm-section-eyebrow {
color: #ee5946;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 13px;
font-weight: 600;
margin-bottom: 12px;
display: block;
}
body.postid-16049 .sm-h2,
body.postid-16285 .sm-h2 {
font-size: 36px;
line-height: 1.25;
font-weight: 700;
color: #fff;
margin-bottom: 20px;
}
body.postid-16049 .sm-h2 em,
body.postid-16285 .sm-h2 em {
color: #ee5946;
font-style: italic;
}
body.postid-16049 .sm-intro,
body.postid-16285 .sm-intro {
font-size: 17px;
line-height: 1.7;
color: #b7b4b0;
max-width: 680px;
margin-bottom: 40px;
}
body.postid-16049 .sm-intro a,
body.postid-16285 .sm-intro a {
color: #ee5946;
text-decoration: underline;
}
body.postid-16049 .sm-btn,
body.postid-16285 .sm-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
border-radius: 50px;
font-weight: 600;
font-size: 15px;
text-decoration: none;
transition: all .25s ease;
cursor: pointer;
}
body.postid-16049 .sm-btn-primary,
body.postid-16285 .sm-btn-primary {
background: #ee5946;
color: #fff !important;
}
body.postid-16049 .sm-btn-primary:hover,
body.postid-16285 .sm-btn-primary:hover {
background: #d6462f;
}
body.postid-16049 .sm-btn-ghost,
body.postid-16285 .sm-btn-ghost {
background: transparent;
color: #fff !important;
border: 1px solid rgba(255,255,255,.35);
}
body.postid-16049 .sm-btn-ghost:hover,
body.postid-16285 .sm-btn-ghost:hover {
border-color: #ee5946;
color: #ee5946 !important;
}
body.postid-16049 .sm-btn-block,
body.postid-16285 .sm-btn-block {
width: 100%;
justify-content: center;
}
body.postid-16049 .sm-arrow,
body.postid-16285 .sm-arrow {
display: inline-block;
transition: transform .2s ease;
}
body.postid-16049 .sm-btn:hover .sm-arrow,
body.postid-16285 .sm-btn:hover .sm-arrow {
transform: translateX(4px);
}
body.postid-16049 .sm-ctas,
body.postid-16285 .sm-ctas {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 32px;
}
body.postid-16049 .sm-ctas-center,
body.postid-16285 .sm-ctas-center {
justify-content: center;
}
body.postid-16049 .sm-section-cols,
body.postid-16285 .sm-section-cols {
display: flex;
align-items: center;
gap: 60px;
flex-wrap: wrap;
}
body.postid-16049 .sm-section-text,
body.postid-16285 .sm-section-text {
flex: 1 1 480px;
min-width: 300px;
}
body.postid-16049 .sm-section-video,
body.postid-16285 .sm-section-video {
flex: 0 1 300px;
min-width: 240px;
display: flex;
justify-content: center;
}
body.postid-16049 .sm-section-video-right,
body.postid-16285 .sm-section-video-right {
order: 2;
}
body.postid-16049 .sm-video-frame,
body.postid-16285 .sm-video-frame {
position: relative;
width: 100%;
max-width: 280px;
aspect-ratio: 9/16;
border-radius: 22px;
overflow: hidden;
background: linear-gradient(160deg, #2a2a2a, #121212);
box-shadow: 0 25px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.07);
}
body.postid-16049 .sm-video-poster,
body.postid-16285 .sm-video-poster,
body.postid-16049 .sm-video-iframe,
body.postid-16285 .sm-video-iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
body.postid-16049 .sm-seo-cards,
body.postid-16285 .sm-seo-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin: 28px 0;
}
body.postid-16049 .sm-seo-card,
body.postid-16285 .sm-seo-card {
background: #262626;
border: 1px solid rgba(255,255,255,.06);
border-radius: 14px;
padding: 24px;
position: relative;
}
body.postid-16049 .sm-seo-card-num,
body.postid-16285 .sm-seo-card-num {
font-size: 13px;
font-weight: 700;
color: #ee5946;
margin-bottom: 8px;
display: block;
}
body.postid-16049 .sm-seo-card-mark,
body.postid-16285 .sm-seo-card-mark {
width: 36px;
height: 36px;
border-radius: 8px;
display: block;
margin-bottom: 8px;
}
body.postid-16049 .sm-seo-card-title,
body.postid-16285 .sm-seo-card-title {
font-size: 17px;
font-weight: 700;
color: #fff;
margin: 8px 0;
}
body.postid-16049 .sm-seo-card-text,
body.postid-16285 .sm-seo-card-text {
font-size: 14px;
line-height: 1.6;
color: #a8a5a1;
}
body.postid-16049 .sm-seo-closing,
body.postid-16285 .sm-seo-closing {
margin-top: 24px;
font-size: 15px;
color: #d8d5d1;
}
body.postid-16049 .sm-services,
body.postid-16285 .sm-services {
display: flex;
flex-direction: column;
margin-top: 36px;
}
body.postid-16049 .sm-service,
body.postid-16285 .sm-service {
display: flex;
align-items: flex-start;
gap: 24px;
padding: 28px 0;
border-bottom: 1px solid rgba(255,255,255,.1);
position: relative;
}
body.postid-16049 .sm-service-num,
body.postid-16285 .sm-service-num {
font-size: 22px;
font-weight: 700;
color: #ee5946;
min-width: 48px;
display: inline-block;
}
body.postid-16049 .sm-service-body,
body.postid-16285 .sm-service-body {
flex: 1;
}
body.postid-16049 .sm-service-title,
body.postid-16285 .sm-service-title {
font-size: 20px;
font-weight: 700;
color: #fff;
margin-bottom: 8px;
}
body.postid-16049 .sm-service-desc,
body.postid-16285 .sm-service-desc {
font-size: 15px;
line-height: 1.6;
color: #a8a5a1;
max-width: 640px;
}
body.postid-16049 .sm-service-arrow,
body.postid-16285 .sm-service-arrow {
font-size: 20px;
color: #666;
transition: color .2s ease, transform .2s ease;
}
body.postid-16049 .sm-service:hover .sm-service-arrow,
body.postid-16285 .sm-service:hover .sm-service-arrow {
color: #ee5946;
transform: translateX(4px);
}
body.postid-16049 .sm-why-grid,
body.postid-16285 .sm-why-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin: 32px 0;
}
body.postid-16049 .sm-why-card,
body.postid-16285 .sm-why-card {
background: #262626;
border-radius: 14px;
padding: 24px;
border: 1px solid rgba(255,255,255,.06);
}
body.postid-16049 .sm-why-card > p,
body.postid-16285 .sm-why-card > p {
font-size: 14px;
font-weight: 700;
color: #ee5946;
margin-bottom: 10px;
}
body.postid-16049 .sm-why-title,
body.postid-16285 .sm-why-title {
font-size: 17px;
font-weight: 700;
color: #fff;
line-height: 1.4;
}
body.postid-16049 .sm-inline-portfolio-link,
body.postid-16285 .sm-inline-portfolio-link {
margin-top: 20px;
}
body.postid-16049 .sm-inline-portfolio-link a,
body.postid-16285 .sm-inline-portfolio-link a {
color: #ee5946;
font-weight: 600;
text-decoration: none;
}
body.postid-16049 .sm-pricing-grid,
body.postid-16285 .sm-pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 40px;
align-items: stretch;
}
body.postid-16049 .sm-tier,
body.postid-16285 .sm-tier {
background: #262626;
border: 1px solid rgba(255,255,255,.08);
border-radius: 18px;
padding: 32px 28px;
display: flex;
flex-direction: column;
position: relative;
}
body.postid-16049 .sm-tier-featured,
body.postid-16285 .sm-tier-featured {
background: #2c2420;
border-color: #ee5946;
transform: scale(1.03);
box-shadow: 0 20px 50px rgba(238,89,70,.15);
}
body.postid-16049 .sm-tier-badge,
body.postid-16285 .sm-tier-badge {
position: absolute;
top: -14px;
left: 28px;
background: #ee5946;
color: #fff;
font-size: 12px;
font-weight: 700;
padding: 5px 14px;
border-radius: 50px;
text-transform: uppercase;
letter-spacing: 1px;
}
body.postid-16049 .sm-tier-name,
body.postid-16285 .sm-tier-name {
font-size: 22px;
font-weight: 700;
color: #fff;
margin-bottom: 6px;
}
body.postid-16049 .sm-tier-tag,
body.postid-16285 .sm-tier-tag {
font-size: 14px;
color: #a8a5a1;
margin-bottom: 20px;
}
body.postid-16049 .sm-tier-price,
body.postid-16285 .sm-tier-price {
font-size: 30px;
font-weight: 700;
color: #ee5946;
margin-bottom: 20px;
}
body.postid-16049 .sm-tier-period,
body.postid-16285 .sm-tier-period {
font-size: 14px;
font-weight: 400;
color: #a8a5a1;
}
body.postid-16049 .sm-tier-divider,
body.postid-16285 .sm-tier-divider {
height: 1px;
background: rgba(255,255,255,.1);
margin-bottom: 20px;
}
body.postid-16049 .sm-tier-features,
body.postid-16285 .sm-tier-features {
list-style: none;
margin: 0 0 28px;
padding: 0;
flex: 1;
}
body.postid-16049 .sm-tier-features li,
body.postid-16285 .sm-tier-features li {
font-size: 14px;
color: #d8d5d1;
padding: 8px 0 8px 24px;
position: relative;
line-height: 1.5;
}
body.postid-16049 .sm-tier-features li::before,
body.postid-16285 .sm-tier-features li::before {
content: "\2713";
position: absolute;
left: 0;
color: #ee5946;
font-weight: 700;
}
body.postid-16049 .sm-closing-title,
body.postid-16285 .sm-closing-title {
font-size: 34px;
font-weight: 700;
color: #fff;
line-height: 1.3;
margin-bottom: 20px;
}
body.postid-16049 .sm-closing-title em,
body.postid-16285 .sm-closing-title em {
color: #ee5946;
font-style: italic;
}
body.postid-16049 .sm-closing-lede,
body.postid-16285 .sm-closing-lede {
font-size: 17px;
color: #b7b4b0;
line-height: 1.7;
max-width: 640px;
margin: 0 auto 12px;
}
@media (max-width: 900px) {
body.postid-16049 .sm-pricing-grid,
body.postid-16285 .sm-pricing-grid {
grid-template-columns: 1fr;
}
body.postid-16049 .sm-tier-featured,
body.postid-16285 .sm-tier-featured {
transform: none;
}
body.postid-16049 .sm-seo-cards,
body.postid-16285 .sm-seo-cards,
body.postid-16049 .sm-why-grid,
body.postid-16285 .sm-why-grid {
grid-template-columns: 1fr;
}
body.postid-16049 .sm-section-video-right,
body.postid-16285 .sm-section-video-right {
order: 0;
}
}
/* Visual depth: alternate section backgrounds (full-bleed) */
body.postid-16049 .sm-section,
body.postid-16285 .sm-section {
position: relative;
isolation: isolate;
}
body.postid-16049 .sm-section:nth-of-type(even)::before,
body.postid-16285 .sm-section:nth-of-type(even)::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 100vw;
transform: translateX(-50%);
background: #181818;
z-index: -1;
}
/* Fill-the-screen fix v2: sticky doesn't work on this site (html/body have
overflow:hidden auto which breaks position:sticky sitewide), so instead we
enlarge the video card and add soft glow accents behind it to fill the
empty vertical space next to the taller text/cards column nicely */
body.postid-16049 .sm-section-video,
body.postid-16285 .sm-section-video {
flex: 0 1 400px;
min-width: 300px;
position: relative;
padding: 40px 0;
}
body.postid-16049 .sm-video-frame,
body.postid-16285 .sm-video-frame {
max-width: 400px;
z-index: 1;
}
body.postid-16049 .sm-section-video::before,
body.postid-16285 .sm-section-video::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 260px;
height: 260px;
transform: translateX(-50%);
background: radial-gradient(circle, rgba(238,89,70,.35), rgba(238,89,70,0) 70%);
filter: blur(10px);
z-index: 0;
pointer-events: none;
}
body.postid-16049 .sm-section-video::after,
body.postid-16285 .sm-section-video::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 220px;
height: 220px;
transform: translateX(-50%);
background: radial-gradient(circle, rgba(120,90,255,.28), rgba(120,90,255,0) 70%);
filter: blur(10px);
z-index: 0;
pointer-events: none;
}
/* Align first video (why-work-with-us) near the top of its row, next to the
section title, instead of centered in the very tall text/cards column */
body.postid-16049 .sm-seo-section .sm-section-cols,
body.postid-16285 .sm-seo-section .sm-section-cols {
align-items: flex-start;
}
body.postid-16049 .sm-seo-section .sm-section-video,
body.postid-16285 .sm-seo-section .sm-section-video {
padding-top: 0;
}
/* Make the pricing section full width (edge-to-edge like the hero) instead
of boxed at 1140px, so the 3 pricing cards use the full available space */
body.postid-16049 section:has(.sm-pricing-grid),
body.postid-16285 section:has(.sm-pricing-grid) {
max-width: none;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
box-sizing: border-box;
padding-left: 60px;
padding-right: 60px;
}
body.postid-16049 section:has(.sm-pricing-grid) .sm-pricing-grid,
body.postid-16285 section:has(.sm-pricing-grid) .sm-pricing-grid {
max-width: 1400px;
margin-left: auto;
margin-right: auto;
}
/* Cap the inner content width of full-width sections so text/cards/columns
don't stretch edge-to-edge on wide screens, while the section background
itself still spans the full browser width */
body.postid-16049 .sm-section-cols,
body.postid-16285 .sm-section-cols,
body.postid-16049 .sm-services,
body.postid-16285 .sm-services {
max-width: 1400px;
margin-left: auto;
margin-right: auto;
}
/* === Arabic Contact page (page-id-1644): match English section order (form after hero) === */
body.page-id-1644 #ws-page-wrap { display: flex !important; flex-direction: column !important; }
body.page-id-1644 #ws-page-wrap > * { order: 99; }
body.page-id-1644 #ws-hero { order: 1 !important; }
body.page-id-1644 #ws-contact { order: 2 !important; }
body.page-id-1644 #ws-stats { order: 3 !important; }
body.page-id-1644 .ws-social-links { order: 4 !important; }
body.page-id-1644 #ws-contact .ws-section-label,
body.page-id-1644 #ws-contact .ws-section-title { display: none !important; }
body.page-id-1644 .ws-contact-grid > .ws-form-wrap { order: 1 !important; width: 100% !important; max-width: 720px !important; }
body.page-id-1644 .ws-contact-grid > *:not(.ws-form-wrap) { order: 2 !important; width: 100% !important; text-align: center !important; }
/* === Arabic Contact page LTR fix for English text (phones + addresses read correctly in RTL layout) === */
body.page-id-1644 #ws-contact .ws-office-addr {
direction: ltr !important;
unicode-bidi: embed !important;
}
body.page-id-1644 #ws-contact .ws-info-block-value,
body.page-id-1644 #ws-contact .ws-info-block-value a {
direction: ltr !important;
unicode-bidi: embed !important;
}