/* Shared typography: website, admin and page preview. */
@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");
:root {
 --primary-font: "Rubik", "Cairo", sans-serif !important;
 --secondary-font: "Rubik", "Cairo", sans-serif !important;
 --bs-font-sans-serif: "Rubik", "Cairo", sans-serif;
 --bs-body-font-family: "Rubik", "Cairo", sans-serif;
}
html, body, button, input, textarea, select, h1, h2, h3, h4, h5, h6,
p, a, label, th, td, .font-sans, .ck-content, .ql-editor,
.cs-primary_font, .cs-secondary_font,
[class^="cs-"], [class*=" cs-"], [class^="yoo-"], [class*=" yoo-"] {
 font-family: "Rubik", "Cairo", sans-serif !important;
}

/* Clear, LTR contact numbers in every language. */
.cs-menu_widget a[href^="https://wa.me/"] { display: inline-block; line-height: 1.6; }
.cs-menu_widget a[href^="https://wa.me/"] span { font-weight: 500; font-size: .92em; }
.cs-menu_widget a[href^="https://wa.me/"] bdi { display: inline-block; direction: ltr; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Keep the hero subtitle directly beneath its title. */
.cs-hero.cs-style7.mena-local-hero {
    justify-content: flex-start;
    gap: 24px;
}
.cs-hero.cs-style7.mena-local-hero .cs-hero_text_in {
    align-items: flex-start;
    flex-direction: column;
    gap: 24px;
    text-align: left;
}
.cs-hero.cs-style7.mena-local-hero .cs-hero_subtitle {
    margin: 0;
}
@media (max-width: 991px) {
    .cs-hero.cs-style7.mena-local-hero .cs-hero_text_in {
        align-items: center;
        text-align: center;
    }
}

/* Prominent consultation CTA, limited to the homepage hero. */
.cs-hero.cs-style7.mena-local-hero .cs-hero_btn .cs-text_btn {
 display: inline-flex; align-items: center; justify-content: center; gap: 14px;
 min-height: 68px; padding: 19px 30px; border-radius: 14px;
 background: #d90819; border: 1px solid #ff4a58; color: #fff;
 font-size: 20px; font-weight: 700; line-height: 1.4; text-decoration: none;
 box-shadow: 0 8px 28px rgba(220,8,25,.3);
 animation: mena-consultation-pulse 3s ease-in-out infinite;
 transition: background .2s ease, transform .2s ease;
}
.cs-hero.cs-style7.mena-local-hero .cs-hero_btn .cs-text_btn::before {
 content: "☎"; display: inline-flex; align-items:center; justify-content:center;
 width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.16);
 font-family: sans-serif; font-size: 23px; flex-shrink: 0;
}
.cs-hero.cs-style7.mena-local-hero .cs-hero_btn .cs-text_btn span { position:static; }
.cs-hero.cs-style7.mena-local-hero .cs-hero_btn .cs-text_btn span::before,
.cs-hero.cs-style7.mena-local-hero .cs-hero_btn .cs-text_btn span::after { display:none; }
.cs-hero.cs-style7.mena-local-hero .cs-hero_btn .cs-text_btn:hover {
 background:#f0172a; transform:translateY(-2px); animation:none;
}
.cs-hero.cs-style7.mena-local-hero .cs-hero_btn .cs-text_btn:focus-visible {
 outline:3px solid #fff; outline-offset:5px; animation:none;
}
@keyframes mena-consultation-pulse {
 0%,100% { box-shadow:0 8px 28px rgba(220,8,25,.3),0 0 0 0 rgba(255,52,70,.2); }
 50% { box-shadow:0 10px 36px rgba(220,8,25,.45),0 0 0 8px rgba(255,52,70,0); }
}
@media(max-width:575px) {
 .cs-hero.cs-style7.mena-local-hero .cs-hero_btn { width:100%; }
 .cs-hero.cs-style7.mena-local-hero .cs-hero_btn .cs-text_btn {
  width:100%; min-height:64px; font-size:17px; padding:17px 20px; gap:10px;
 }
}
@media(prefers-reduced-motion:reduce) {
 .cs-hero.cs-style7.mena-local-hero .cs-hero_btn .cs-text_btn { animation:none; transition:none; }
}

/* Consultation CTA aligned with MENA Core's red/black visual identity. */
.cs-hero.cs-style7.mena-local-hero .cs-hero_btn .cs-text_btn {
 background: var(--accent, #d90016); border: 1px solid var(--accent, #d90016);
 border-radius: 5px; min-height: 66px; padding: 18px 28px;
 font-size: 19px; gap: 16px; box-shadow: none; animation: none;
 transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.cs-hero.cs-style7.mena-local-hero .cs-hero_btn .cs-text_btn::before { display:none; }
.cs-hero.cs-style7.mena-local-hero .cs-hero_btn .cs-text_btn svg {
 width: 24px; height:24px; transition: transform .25s ease;
 animation: mena-cta-arrow 4s ease-in-out infinite;
}
.cs-hero.cs-style7.mena-local-hero .cs-hero_btn .cs-text_btn:hover {
 background: #111; border-color: var(--accent, #d90016);
 transform: translateY(-2px); box-shadow:none;
}
.cs-hero.cs-style7.mena-local-hero .cs-hero_btn .cs-text_btn:hover svg {
 animation:none; transform:translateX(4px);
}
@keyframes mena-cta-arrow {
 0%,75%,100% { transform:translateX(0); }
 85% { transform:translateX(4px); }
}
@media(max-width:575px) {
 .cs-hero.cs-style7.mena-local-hero .cs-hero_btn .cs-text_btn {font-size:17px;padding:17px 20px;}
}
@media(prefers-reduced-motion:reduce) {
 .cs-hero.cs-style7.mena-local-hero .cs-hero_btn .cs-text_btn svg {animation:none;transition:none;}
}

/* Soft transition from the 3D scene into the following charcoal section. */
#home.cs-hero.cs-style7.mena-local-hero::after {
 background:
  linear-gradient(to bottom, rgba(24,24,24,0) 60%, rgba(24,24,24,.12) 70%, rgba(24,24,24,.5) 83%, rgba(24,24,24,.88) 94%, #181818 100%),
  linear-gradient(90deg, rgba(0,0,0,.5), transparent 75%);
}
@media(max-width:767px) {
 #home.cs-hero.cs-style7.mena-local-hero::after {
  background:
   linear-gradient(to bottom, rgba(24,24,24,0) 55%, rgba(24,24,24,.18) 70%, rgba(24,24,24,.65) 86%, #181818 100%),
   linear-gradient(90deg, rgba(0,0,0,.5), transparent 75%);
 }
}

/* Shared decorative shape: supplied MENA Core red hexagon. */
.cs-shape_wrap_4 .cs-shape_4,
.cs-shape_4 {
 background-color: transparent !important;
 background-image: url('/images/mena-red-hexagon.png');
 background-repeat: no-repeat;
 background-position: center;
 background-size: contain;
 border-radius: 0 !important;
 pointer-events: none;
}

/* Local glossy black hexagon in the side header. */
.cs-side_header .cs-side_header_shape::before {
 background: transparent url('/images/mena-black-hexagon.png') center / contain no-repeat;
 border-radius: 0;
}