/* =============================================================
   SHOHRAH THEME LAYER  —  loaded LAST, after responsive.css
   1) Arabic font (Cairo)
   2) Brand recolour (teal #154d5a + orange #f37231) over Nuvia
   3) RTL direction fixes for the Bootstrap-4 / float-based template
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900&display=swap');

/* -------------------------------------------------------------
   1) FONT — force Cairo everywhere (overrides Figtree + Sora)
   ------------------------------------------------------------- */
/* Body / UI text -> Tajawal (clean modern Arabic sans) */
body,
p, a, span, li, input, textarea, select, button,
.special-text, .special-text2, .figtree-font,
.nav-link, .btn, .breadcrumb, .dropdown-item,
.primary_btn, .secondary_btn, .elementary_btn, .contact-btn,
h4, h5, h6 {
    font-family: 'Thmanyah Sans', 'Cairo', sans-serif !important;
}
/* Display / headings -> Thmanyah Serif Display (luxury Arabic serif) */
h1, h2, h3,
h1 span, h2 span, h3 span,
.special-h1, .special-h1 span,
.special-heading1,
.banner-heading-con h1, .banner-heading-con h1 span,
.cta-inner-con .special-h1, .cta-inner-con .special-h1 span,
.heading-title-con h2, .heading-title-con h2 span,
.footer-wordmark, .team-group-title h3 {
    font-family: 'Thmanyah Serif Display', 'Cairo', serif !important;
}

/* -------------------------------------------------------------
   1b) TYPOGRAPHY SCALE — the template uses huge English display sizes
   (h1:144px, h2:74px, eyebrow:54px, footer wordmark:170px). Arabic
   sentences are longer than English words, so we rescale to a
   readable, responsive Arabic scale with looser line-height.
   ------------------------------------------------------------- */
h1, span.special-h1 {
    font-size: clamp(31px, 4vw, 52px) !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    margin-bottom: 20px;
}
h1 span, span.special-h1 span { line-height: 1.35 !important; }
span.special-heading1 { font-size: clamp(31px, 3.5vw, 44px) !important; line-height: 1.2 !important; }
h2 { font-size: clamp(25px, 3vw, 40px) !important; line-height: 1.4 !important; }
h3 { font-size: clamp(20px, 2.2vw, 28px) !important; line-height: 1.55 !important; }
h4 { font-size: clamp(18px, 1.8vw, 24px) !important; line-height: 1.55 !important; }
h5 { font-size: clamp(16px, 1.4vw, 20px) !important; line-height: 1.55 !important; }
h6 { font-size: clamp(15px, 1.25vw, 17px) !important; line-height: 1.6 !important; }
p { font-size: 15px; }

/* Banner hero heading + eyebrow */
.banner-con .banner-inner-con .banner-heading-con h1 { font-size: clamp(34px, 4.5vw, 62px) !important; }
.banner-con .banner-inner-con .banner-heading-con .expert-driven {
    font-size: clamp(16px, 1.6vw, 21px) !important;
    line-height: 1.4 !important;
    padding-left: 0 !important;
    padding-right: 52px !important;
    margin-bottom: 16px;
}
/* CTA giant display heading */
.cta-con .cta-inner-con .special-h1 { font-size: clamp(34px, 4.5vw, 58px) !important; }

/* ---- COMPACTING: smaller stats, tighter section spacing ---- */
.user-detail-box span { font-size: clamp(32px, 3.4vw, 44px) !important; }
.banner-con .user-box .user-text span.counter,
.banner-con .user-box .user-text sup,
.banner-con .user-box .user-text span.alphabet { font-size: 17px !important; }
.padding-top { padding-top: 78px !important; }
.padding-bottom { padding-bottom: 78px !important; }
.padding-top150 { padding-top: 92px !important; }
.padding-bottom140 { padding-bottom: 84px !important; }
.heading-title-con { margin-bottom: 44px !important; }
.services-content-con h4, .service-detail-content h2 { margin-bottom: 14px; }
/* heading highlight chip padding so descenders aren't clipped */
h1 .bg-accent, h2 .bg-accent, .special-heading1 .bg-accent { padding: 2px 14px; line-height: 1.35; }

/* -------------------------------------------------------------
   2) BRAND COLOURS — recolour via the template's CSS variables
   Nuvia lime  #c2ff83  ->  SHOHRAH orange  #f37231  (accent pop)
   Nuvia black #000000  ->  SHOHRAH teal    #154d5a  (dark brand)
   ------------------------------------------------------------- */
:root {
    --primary--color: #154d5a;   /* teal — buttons, borders, dark UI     */
    --secondary--color: #ffffff;
    --accent--color: #f37231;    /* orange — chips, CTAs, active nav, etc */
    --text--color: #4b4b4b;
    --text--color2: #6a6a6a;
    --yellow--color: #f5a623;    /* star rating gold                      */
    --black--color: #154d5a;     /* teal — dark sections, headings, footer*/
    --bg--color: #f6f9fa;        /* light grey-teal band                  */
    --border--color: #e1e7e9;
    --white--family--color: #cdd6d8;
    --white--family--color2: #dfe6e8;
    --accent--family--color: #fdeee5; /* pale orange (testimonial icon bg) */
}

/* Deeper teal for the big dark bands so headings/orange pop harder */
.bg-black { background-color: #123f4a !important; }

/* Orange is darker than the original lime, so text sitting ON the accent
   must go white for contrast (heading highlight chips, active nav, CTA). */
h1 .bg-accent, h2 .bg-accent, h3 .bg-accent,
.special-heading1 .bg-accent, .special-h1 .bg-accent,
.heading-title-con .bg-accent,
.sub-banner-con h1 .bg-accent {
    color: #ffffff !important;
}
.header-con .navbar-light .navbar-nav .nav-link.active { color: #ffffff !important; }

/* Eyebrow labels: keep orange but a touch deeper for legibility on white */
.special-text { color: #e85f22 !important; }

/* Newsletter band (was lime, now orange): force readable dark/white text */
.newsletter-con.bg-accent h2,
.newsletter-con.bg-accent .special-text,
.newsletter-con.bg-accent .special-text2,
.newsletter-con.bg-accent p { color: #ffffff !important; }
.newsletter-con.bg-accent h2 .bg-accent { background-color: #123f4a !important; color:#fff !important; }

/* -------------------------------------------------------------
   3) BRAND — logo sizing (SHOHRAH square logo in the Nuvia header)
   ------------------------------------------------------------- */
.header-con .navbar-brand img { height: 54px; width: auto; }
.footer-con .footer-logo { opacity: .9; }
/* white Arabic wordmark used in the footer left-con */
.footer-con .left-con .special-heading1 { font-weight: 800; letter-spacing: 0; }

/* =============================================================
   4) RTL  —  the site is 100% right-to-left (dir="rtl" on <html>)
   BS4 .row/.col are flexbox and mirror automatically; below we flip
   the template's custom float / text-align / offset / absolute rules.
   ============================================================= */

body { text-align: right; }

/* decorative banner shape was positioned for LTR heading; hide to avoid overlap */
.banner-con figure.vector1 { display: none; }

/* banner eyebrow: drop the decorative dash (it sat at left:0 and crossed the RTL text) */
.banner-con .banner-inner-con .banner-heading-con .expert-driven::before { display: none !important; }
.banner-con .banner-inner-con .banner-heading-con .expert-driven { padding-right: 0 !important; }

/* ---- navbar: menu hugs the right, dropdown carets/menus mirror ---- */
.header-con .navbar-nav { margin-right: auto !important; margin-left: 0 !important; }
.header-con .dropdown-menu { text-align: right; left: auto; right: 0; }
.header-con .navbar-nav .nav-link { text-align: right; }

/* ---- inline icon spacing after button text (was margin-left) ---- */
.ml-2 { margin-left: 0 !important; margin-right: .5rem !important; }
.mr-2 { margin-right: 0 !important; margin-left: .5rem !important; }
/* arrows that follow text should point/space to the LEFT in RTL */
.secondary_btn img, .elementary_btn img, .contact-btn img,
.article-inner-content .secondary_btn img { margin-left: 0 !important; margin-right: .5rem !important; }

/* ---- generic float utilities that carry meaning ---- */
.float-right { float: left !important; }
/* keep the ubiquitous `float-left w-100` wrappers as-is (full width) */

/* ---- section-specific float / text-align flips (from style.css) ---- */
.about-us-inner-con { float: left; }
.users-details-con { text-align: right; }
.our-work-btn { text-align: left; }
.portfolio-con .portfolio-box.right-img { float: left; }
.portfolio-con .portfolio-box.left-img { float: right; }
.faq-con .accordian-inner .accordion-card .btn,
.faq-con .accordion-card .btn-link { text-align: right; }
.contact-info-con form ul li { float: right; }
.newsletter-con .email-form button { float: left; right: auto; left: 9px; }

/* ---- padding / margin pairs: mirror left <-> right ---- */
.special-text2 { padding-left: 0; padding-right: 52px; }
.special-text2::after { left: auto; right: 0; }
.footer-con .left-con { padding-left: 0; padding-right: 148px; }
.footer-linking-con { margin-left: 0; margin-right: 0; }
.banner-content-con { padding-left: 0; padding-right: 0; }
.who-we-are-content-con { padding-left: 0; padding-right: 30px; }
.testimonial-box p { padding-right: 0; padding-left: 60px; }
.services-content-con { padding-left: 62px; padding-right: 0; }
.services-content-con.content-left { padding-left: 0; padding-right: 62px; }
.expert-driven { padding-left: 0; padding-right: 85px; }
.user-detail-box { padding-left: 0; padding-right: 50px; }

/* services bullet list: bullet dot moves to the right ---- */
.services-content-con ul li { padding-left: 0; padding-right: 25px; }
.services-content-con ul li i { left: auto; right: 0; }

/* ---- footer contact (right-con): smaller, with a left-side divider + gaps ---- */
.footer-con .right-con a { font-size: 20px !important; padding: 0 !important; margin: 0 0 30px !important; border: 0 !important; }
.footer-con .right-con a:first-of-type { padding-left: 22px !important; margin-left: 22px !important; border-left: 1px solid rgb(255 255 255 / 30%) !important; }
.footer-con .right-con p.address { font-size: 20px !important; }
/* ---- footer links: flip divider to the right ---- */
.footer-links li { border-left: 0; border-right: 1px solid rgba(255,255,255,.25); padding-left: 0; padding-right: 14px; }
.footer-links li.border-left-0, .footer-links li:first-child { border-right: 0; padding-right: 0; }

/* ---- Primary pill button (redesigned "ابدأ الآن" / "تواصل معنا") ---- */
.talk-with-us-elipse {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: auto !important; height: auto !important; min-width: 0 !important; max-width: none !important;
    border-radius: 50px !important; padding: 0 !important; margin: 0 !important;
    background: var(--accent--color) !important; overflow: hidden !important;
    box-shadow: 0 12px 30px rgba(243,114,49,.30); transition: .35s cubic-bezier(.2,.7,.2,1);
}
.talk-with-us-elipse::before, .talk-with-us-elipse::after { content: none !important; display: none !important; }
.talk-with-us-elipse, .talk-with-us-elipse span { color: #fff !important; }
.talk-with-us-elipse span {
    display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 12px;
    padding: 8px 8px 8px 26px !important; font-size: 15px !important; font-weight: 800 !important;
    line-height: 1 !important; white-space: nowrap;
}
.talk-with-us-elipse span br { display: none !important; }
.talk-with-us-elipse span a {
    width: 34px; height: 34px; min-width: 34px; border-radius: 50% !important; background: #fff;
    display: inline-flex !important; align-items: center; justify-content: center; margin: 0 !important; transition: .35s;
}
.talk-with-us-elipse span a img { width: 11px !important; height: auto; filter: none; }
.talk-with-us-elipse:hover { transform: translateY(-3px); background-color: #123f4a !important; box-shadow: 0 16px 34px rgba(18,63,74,.34); }
.talk-with-us-elipse:hover span a { background: var(--accent--color); }
.talk-with-us-elipse:hover span a img { filter: brightness(0) invert(1); }
/* place the pill in normal flow (it was absolutely-positioned as a circle) */
.banner-content-con .talk-with-us-elipse { position: relative !important; margin-top: 22px !important; }
.cta-con .talk-with-us-elipse {
    position: relative !important; left: auto !important; right: auto !important; bottom: auto !important;
    margin-top: 30px !important;
}

/* ---- newsletter checkbox: mirror the custom circle to the RIGHT (RTL) ---- */
.newsletter-con .email-form .check-box { padding-left: 0 !important; padding-right: 34px !important; }
.newsletter-con .email-form .check-box label:before { margin-right: 0 !important; margin-left: 10px !important; position: absolute !important; right: -34px; top: 2px; }
.newsletter-con .email-form .check-box label:after { right: -27px !important; left: auto !important; }

/* =============================================================
   REDESIGNED FOOTER — balanced multi-column (teal + orange)
   ============================================================= */
.shohrah-footer { background: #123f4a; padding: 70px 0 0; float: left; width: 100%; }
.shohrah-footer .footer-top { padding-bottom: 44px; }
.shohrah-footer .footer-wordmark { color: #fff !important; font-weight: 800; display: inline-block; }
.shohrah-footer .footer-brand > p { color: rgba(255,255,255,.62); margin: 16px 0 22px; max-width: 320px; font-size: 15px; line-height: 1.9; }
.shohrah-footer .footer-social { list-style: none; padding: 0; margin: 0; }
.shohrah-footer .footer-social li { display: inline-block; margin: 0 0 0 8px; }
.shohrah-footer .footer-social a { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.09); color: #fff; display: flex; align-items: center; justify-content: center; transition: .3s; text-decoration: none; }
.shohrah-footer .footer-social a:hover { background: var(--accent--color); transform: translateY(-3px); }
.shohrah-footer .footer-col h6 { color: #fff; font-weight: 700; margin-bottom: 22px; font-size: 18px; }
.shohrah-footer .footer-col > ul { list-style: none; padding: 0; margin: 0; }
.shohrah-footer .footer-col > ul > li { margin-bottom: 13px; }
.shohrah-footer .footer-col > ul > li a { color: rgba(255,255,255,.62); text-decoration: none; transition: .25s; font-size: 15px; }
.shohrah-footer .footer-col > ul > li a:hover { color: var(--accent--color); padding-right: 6px; }
.shohrah-footer .footer-contact li { display: flex; gap: 12px; color: rgba(255,255,255,.62); margin-bottom: 15px; font-size: 15px; line-height: 1.7; }
.shohrah-footer .footer-contact li i { color: var(--accent--color); margin-top: 5px; flex: 0 0 16px; }
.shohrah-footer .footer-contact li a { color: rgba(255,255,255,.62); text-decoration: none; }
.shohrah-footer .footer-contact li a:hover { color: var(--accent--color); }
.shohrah-footer .footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 22px 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.shohrah-footer .footer-bottom p { color: rgba(255,255,255,.55); margin: 0; font-size: 14px; }
.shohrah-footer .footer-bottom ul { list-style: none; padding: 0; margin: 0; }
.shohrah-footer .footer-bottom ul li { display: inline-block; margin-right: 22px; }
.shohrah-footer .footer-bottom ul li:first-child { margin-right: 0; }
.shohrah-footer .footer-bottom ul li a { color: rgba(255,255,255,.55); text-decoration: none; font-size: 14px; }
.shohrah-footer .footer-bottom ul li a:hover { color: var(--accent--color); }
@media (max-width: 767px){ .shohrah-footer .footer-bottom { justify-content: center; text-align: center; } .shohrah-footer .footer-col { margin-bottom: 30px; } }

/* ---- sub-banner decorative object is a gray placeholder — hide it ---- */
.sub-banner-con .sub-banner-img { display: none; }

/* ---- functional absolutes: mirror to the correct side ---- */
/* back-to-top sits ABOVE the chat launcher (both bottom-left) so they don't overlap */
#button { right: auto !important; left: 25px !important; bottom: 104px !important; width: 56px; height: 56px; z-index: 999; }
body.sha-open #button { opacity: 0 !important; visibility: hidden !important; pointer-events: none; }
.faq-con .accordion-card .btn-link::before,
.faq-con .accordion-card .btn-link::after { right: auto; left: 0; }
.breadcrumb-item + .breadcrumb-item { padding-left: 0; padding-right: .5rem; }
.breadcrumb-item + .breadcrumb-item::before { padding-right: 0; padding-left: .5rem; float: right; }
.testimonial-con .owl-carousel .owl-dots { right: auto; left: 0; }

/* counter number + suffix must read LTR ("100+" / "10K", not "+100") */
.users-details-con .user-detail-box { direction: ltr; text-align: right; }
.users-details-con .user-detail-box p { direction: rtl; }
/* stat dividers: one clean line between boxes, RTL-correct */
.users-details-con .user-detail-box { border: 0 !important; padding: 0 32px !important; }
.users-details-con .user-detail-box:not(:last-child) { border-left: 1px solid rgb(255 255 255 / 22%) !important; }
.users-details-con .user-detail-box:first-child { padding-right: 0 !important; }
.users-details-con .user-detail-box:last-child { padding-left: 0 !important; }
.banner-imgz-con .user-box .user-text { direction: ltr; text-align: right; }
.banner-imgz-con .user-box .user-text .span-text { direction: rtl; }

/* social icon spacing in footer / team */
.social-icons li.ml-0 > a, .team-box ul li a.ml-0 { margin-left: .5rem !important; }

/* keep decorative side-ellipses symmetric-friendly (no harm in RTL) */
.our-work-outer-box { padding: 10px 0 10px 40px; padding-left: 0; padding-right: 0; }

/* =============================================================
   5) CUSTOM COMPONENTS (no Nuvia equivalent)
   ============================================================= */

/* ---- Pricing / packages card (quote-based, no numeric price) ---- */
.package-box {
    background: #fff;
    border: 1px solid var(--border--color);
    border-radius: 22px;
    padding: 42px 34px;
    transition: .35s ease;
    display: flex;
    flex-direction: column;
}
.package-box:hover,
.package-box.featured { border-color: var(--accent--color); box-shadow: 0 30px 60px rgba(21,77,90,.10); }
.package-box .package-head { border-bottom: 1px solid var(--border--color); padding-bottom: 22px; margin-bottom: 26px; }
.package-label {
    display: inline-block; background: var(--accent--family--color); color: #b8480a;
    font-weight: 700; font-size: 14px; padding: 6px 18px; border-radius: 20px; margin-bottom: 16px;
}
.package-box h4 { color: var(--black--color); font-weight: 800; margin: 0; font-size: 24px; }
.package-features { margin: 0 0 30px; }
.package-features li { position: relative; padding-right: 30px; margin-bottom: 14px; color: var(--text--color); line-height: 1.7; }
.package-features li i { position: absolute; right: 0; top: 7px; color: var(--accent--color); font-size: 15px; }
.package-box .elementary_btn { margin-top: auto; }
.package-box.featured { background: var(--black--color); border-color: var(--black--color); }
.package-box.featured .package-head { border-color: rgba(255,255,255,.18); }
.package-box.featured h4,
.package-box.featured .package-features li { color: #fff; }
.package-box.featured .package-label { background: rgba(255,255,255,.14); color: #fff; }
.package-box.featured .elementary_btn { border-color: var(--accent--color); background: var(--accent--color); color:#fff; }
.package-box.featured .elementary_btn img { filter: invert(100%); }

/* ---- Service grid card (used where a simple 3-up services grid is wanted) ---- */
.service-card {
    display: block; background: #fff; border: 1px solid var(--border--color);
    border-radius: 20px; padding: 36px 32px; transition: .35s ease; position: relative; height: 100%;
}
.service-card:hover { background: var(--black--color); border-color: var(--black--color); transform: translateY(-6px); }
.service-card figure {
    width: 74px; height: 74px; border-radius: 16px; background: var(--accent--family--color);
    display: flex; align-items: center; justify-content: center; margin-bottom: 24px;
}
.service-card figure img { max-width: 40px; height: auto; }
.service-card h5 { color: var(--black--color); font-weight: 800; margin-bottom: 12px; font-size: 21px; }
.service-card p { color: var(--text--color); margin: 0; }
.service-card:hover h5, .service-card:hover p { color: #fff; }

/* ---- Team page group heading ---- */
.team-group-title { text-align: center; margin-bottom: 50px; }
.team-group-title h3 { color: var(--black--color); font-weight: 800; display: inline-block; position: relative; padding-bottom: 14px; }
.team-group-title h3::after { content:''; position:absolute; right:50%; bottom:0; transform:translateX(50%); width:60px; height:3px; background: var(--accent--color); border-radius:3px; }

/* ---- Service-detail page (body + sidebar + steps) ---- */
.service-detail-content > figure { margin-bottom: 30px; }
.service-detail-content > figure img { width: 100%; border-radius: 20px; }
.service-detail-content .intro { font-size: 18px; color: var(--text--color); margin-bottom: 30px; line-height: 1.9; }
.service-detail-content h3 { color: var(--black--color); font-weight: 800; margin: 34px 0 16px; font-size: 26px; }
.service-detail-content p { color: var(--text--color); line-height: 1.9; }
/* NOTE: .service-steps / .num / .service-sidebar are fully defined in Section 27
   (numbered flex cards + sticky sidebar). The old absolute-positioned rules that
   used to live here were removed — they leaked `position:absolute` into the new
   flex cards and clipped the step text. */
.sidebar-box { background: var(--bg--color); border: 1px solid var(--border--color); border-radius: 20px; padding: 30px 28px; margin-bottom: 30px; }
.sidebar-box h5 { color: var(--black--color); font-weight: 800; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border--color); }
.service-list { padding: 0; list-style: none; margin: 0; }
.service-list li { margin-bottom: 10px; }
.service-list li a {
    display: flex; align-items: center; justify-content: space-between; text-decoration: none;
    background: #fff; border: 1px solid var(--border--color); border-radius: 12px; padding: 14px 18px;
    color: var(--black--color); font-weight: 600; transition: .3s; font-size: 15px;
}
.service-list li a::after { content: "\f104"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--accent--color); }
.service-list li a:hover, .service-list li a.active { background: var(--black--color); border-color: var(--black--color); color: #fff; }
.service-list li a:hover::after, .service-list li a.active::after { color: #fff; }
.sidebar-cta { background: var(--black--color); border-radius: 20px; padding: 34px 28px; text-align: center; }
.sidebar-cta h4 { color: #fff; font-weight: 800; margin-bottom: 12px; }
.sidebar-cta p { color: rgba(255,255,255,.75); margin-bottom: 22px; }
.sidebar-cta .elementary_btn { border-color: var(--accent--color); background: var(--accent--color); color: #fff; }
.sidebar-cta .elementary_btn img { filter: invert(100%); }

/* ---- Contact info column ---- */
.contact-info-box { background: var(--bg--color); border: 1px solid var(--border--color); border-radius: 20px; padding: 40px 34px; height: 100%; }
.contact-info-box .info-item { display: flex; align-items: flex-start; margin-bottom: 28px; }
.contact-info-box .info-item:last-child { margin-bottom: 0; }
.contact-info-box .info-icon { flex: 0 0 54px; width: 54px; height: 54px; border-radius: 14px; background: var(--accent--family--color); color: #e85f22; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-left: 18px; }
.contact-info-box .info-text h6 { color: var(--black--color); font-weight: 700; margin-bottom: 6px; }
.contact-info-box .info-text p, .contact-info-box .info-text a { color: var(--text--color); margin: 0; text-decoration: none; line-height: 1.7; }
.contact-info-box .info-text a:hover { color: var(--accent--color); }

/* ---- Blog listing card (RTL-safe, theme-controlled) ---- */
.post-card { background:#fff; border:1px solid var(--border--color); border-radius:18px; overflow:hidden; height:100%; transition:.35s ease; display:flex; flex-direction:column; }
.post-card:hover { box-shadow:0 24px 50px rgba(21,77,90,.10); transform:translateY(-5px); border-color:#d5dde0; }
.post-card > a.post-thumb { display:block; overflow:hidden; }
.post-card figure { margin:0; overflow:hidden; }
.post-card figure img { width:100%; height:220px; object-fit:cover; transition:.5s ease; display:block; }
.post-card:hover figure img { transform:scale(1.06); }
.post-card .post-body { padding:26px 24px; display:flex; flex-direction:column; flex:1; }
.post-card .post-cat { display:inline-block; background:var(--accent--family--color); color:#b8480a; font-size:13px; font-weight:700; padding:5px 14px; border-radius:20px; margin-bottom:14px; align-self:flex-start; }
.post-card .post-meta { color:var(--text--color2); font-size:13px; margin-bottom:12px; }
.post-card .post-meta i { color:var(--accent--color); margin-left:6px; }
.post-card h5 { margin-bottom:12px; }
.post-card h5 a { color:var(--black--color); text-decoration:none; }
.post-card h5 a:hover { color:var(--accent--color); }
.post-card p { color:var(--text--color); margin-bottom:18px; font-size:15px; }
.post-card .read-link { color:var(--accent--strong); font-weight:700; text-decoration:none; margin-top:auto; align-self:flex-start; }
.post-card .read-link i { font-size:12px; margin-right:6px; }

/* ---- Single article + sidebar ---- */
/* Cover both the hero <figure> image and markdown-authored body images,
   which markdown renders as <p><img> (or a bare <img>). */
.blog-article > figure img,
.blog-article p img,
.blog-article > img { width:100%; border-radius:18px; margin-bottom:14px; }
.blog-article p:has(> img) { margin-bottom:0; }
.blog-article blockquote p { margin:0; }
.blog-article ul, .blog-article ol { color:var(--text--color); line-height:1.95; margin:0 0 16px; padding-right:1.4em; }
.blog-article li { margin-bottom:8px; }
.blog-article .post-meta { color:var(--text--color2); font-size:14px; margin-bottom:18px; }
.blog-article .post-meta i { color:var(--accent--color); margin-left:6px; }
.blog-article h2, .blog-article h3 { color:var(--black--color); font-weight:800; margin:30px 0 14px; }
.blog-article p { color:var(--text--color); line-height:1.95; margin-bottom:16px; }
.blog-article blockquote { background:var(--bg--color); border:1px solid var(--border--color); padding:26px 30px; border-radius:16px; margin:26px 0; color:var(--black--color); font-weight:600; font-size:17px; }
.blog-article .article-tags a { display:inline-block; background:#fff; border:1px solid var(--border--color); border-radius:8px; padding:6px 14px; margin:0 0 8px 8px; color:var(--text--color); text-decoration:none; font-size:14px; }
.blog-article .article-tags a:hover { background:var(--accent--color); color:#fff; border-color:var(--accent--color); }
.blog-sidebar { position:sticky; top:30px; }
.blog-sidebar .sidebar-widget { background:var(--bg--color); border:1px solid var(--border--color); border-radius:18px; padding:26px 24px; margin-bottom:26px; }
.blog-sidebar h5 { color:var(--black--color); font-weight:800; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--border--color); }
.blog-sidebar .search-box { display:flex; }
.blog-sidebar .search-box input { flex:1; border:1px solid var(--border--color); border-radius:12px 0 0 12px; padding:12px 16px; background:#fff; }
.blog-sidebar .search-box button { border:0; background:var(--black--color); color:#fff; border-radius:0 12px 12px 0; padding:0 18px; }
.recent-post { display:flex; gap:14px; margin-bottom:18px; align-items:center; }
.recent-post img { width:74px; height:74px; border-radius:12px; object-fit:cover; flex:0 0 74px; }
.recent-post .rp-text span { color:var(--text--color2); font-size:12px; display:block; margin-bottom:4px; }
.recent-post .rp-text a { color:var(--black--color); font-weight:700; text-decoration:none; font-size:14px; line-height:1.5; }
.recent-post .rp-text a:hover { color:var(--accent--color); }
.cat-list { list-style:none; padding:0; margin:0; }
.cat-list li a { display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--border--color); color:var(--text--color); text-decoration:none; }
.cat-list li:last-child a { border-bottom:0; }
.cat-list li a:hover { color:var(--accent--color); }
.tag-list a { display:inline-block; background:#fff; border:1px solid var(--border--color); border-radius:8px; padding:6px 14px; margin:0 0 8px 8px; color:var(--text--color); text-decoration:none; font-size:14px; }
.tag-list a:hover { background:var(--accent--color); color:#fff; border-color:var(--accent--color); }

/* ---- Legal (privacy/terms) body ---- */
.legal-content-con h2 { color: var(--black--color); font-weight: 800; margin: 34px 0 16px; font-size: 26px; }
.legal-content-con h4 { color: var(--black--color); font-weight: 700; margin: 26px 0 12px; font-size: 20px; }
.legal-content-con p, .legal-content-con li { color: var(--text--color); line-height: 1.9; }
.legal-content-con ul { padding-right: 20px; }
.legal-content-con ul li { margin-bottom: 8px; }

/* =============================================================
   USER-FEEDBACK FIXES: nav active, contact form, team cards
   ============================================================= */

/* ---- NAV active state: clean underline (was a clipping orange chip on p-0 links) ---- */
.header-con .navbar-light .navbar-nav .nav-link.active,
.header-con .navbar-light .navbar-nav .nav-link.dropdown-toggle.active {
    background-color: transparent !important;
    color: var(--accent--color) !important;
    font-weight: 700 !important;
    position: relative;
}
.header-con .navbar-light .navbar-nav .nav-link.active::after {
    content: ''; position: absolute; right: 0; left: 0; bottom: -7px;
    height: 3px; width: 22px; margin: 0 auto; background: var(--accent--color); border-radius: 3px;
}

/* ---- CONTACT form: modern boxed inputs (were bare underlines) ---- */
.send-msg-con { background: #fff; border: 1px solid var(--border--color); border-radius: 22px; padding: 42px 38px; }
.contact-info-con form ul li { width: 100% !important; max-width: 100% !important; float: none !important; display: block !important; margin: 0 0 16px !important; padding: 0 !important; }
.contact-info-con form ul li input,
.contact-info-con form ul li textarea {
    border: 1px solid var(--border--color) !important; border-radius: 12px !important;
    background: var(--bg--color) !important; padding: 14px 18px !important; width: 100% !important;
    transition: .25s;
}
.contact-info-con form ul li input:focus,
.contact-info-con form ul li textarea:focus { border-color: var(--accent--color) !important; background: #fff !important; }
.contact-info-con form ul li input::placeholder,
.contact-info-con form ul li textarea::placeholder { color: var(--text--color2); }

/* ---- TEAM cards: my section uses .team-con (Nuvia CSS targets .our-team-con) ---- */
.team-con .team-box { background: #fff; border: 1px solid var(--border--color); border-radius: 20px; padding: 16px 16px 24px; transition: .35s ease; height: 100%; }
.team-con .team-box:hover { box-shadow: 0 24px 50px rgba(21,77,90,.10); transform: translateY(-6px); border-color: #d5dde0; }
.team-con .team-box figure { margin: 0 0 18px; overflow: hidden; border-radius: 14px; }
.team-con .team-box figure img { width: 100%; height: 290px; object-fit: cover; object-position: top center; border-radius: 14px; transition: .5s ease; }
.team-con .team-box:hover figure img { transform: scale(1.05); }
.team-con .team-box h6 { color: var(--black--color); font-weight: 700; margin-bottom: 4px; }
.team-con .team-box .designation { color: var(--accent--color) !important; font-size: 14px; margin-bottom: 16px; }
.team-con .team-box ul { padding: 0; margin: 0; }
.team-con .team-box ul li { display: inline-block; margin: 0 3px; }
.team-con .team-box ul li a { width: 38px; height: 38px; border-radius: 50%; background: var(--bg--color); color: var(--black--color); display: inline-flex; align-items: center; justify-content: center; transition: .3s; text-decoration: none; font-size: 14px; }
.team-con .team-box ul li a:hover { background: var(--accent--color); color: #fff; transform: translateY(-3px); }
.team-group-title h3 { font-size: clamp(21px,2.4vw,28px) !important; }

/* =============================================================
   6) LUXURY UPGRADE LAYER
   Bundles: Luxury type (Thmanyah) · Motion & interaction · New sections
   ============================================================= */

/* ---- Thmanyah Serif Display (headings) — self-hosted woff2 ---- */
@font-face{font-family:'Thmanyah Serif Display';src:url('../fonts/thmanyah/thmanyahserifdisplay-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'Thmanyah Serif Display';src:url('../fonts/thmanyah/thmanyahserifdisplay-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Thmanyah Serif Display';src:url('../fonts/thmanyah/thmanyahserifdisplay-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Thmanyah Serif Display';src:url('../fonts/thmanyah/thmanyahserifdisplay-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Thmanyah Serif Display';src:url('../fonts/thmanyah/thmanyahserifdisplay-Black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap;}
/* ---- Thmanyah Serif Text (refined pull-quotes) ---- */
@font-face{font-family:'Thmanyah Serif Text';src:url('../fonts/thmanyah/thmanyahseriftext-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Thmanyah Serif Text';src:url('../fonts/thmanyah/thmanyahseriftext-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}

/* heading weights tuned for the serif display */
h1, .special-h1, .banner-heading-con h1, .cta-inner-con .special-h1, .footer-wordmark { font-weight: 900 !important; }
h2, .heading-title-con h2, h3 { font-weight: 700 !important; letter-spacing: -.2px; }
.special-heading1 { font-weight: 800 !important; }

/* ---- Ghost section numerals (Arabic-Indic) behind headings ---- */
.heading-title-con[data-num]{ position:relative; z-index:1; }
.heading-title-con[data-num]::before{
  content:attr(data-num); position:absolute; left:50%; top:50%;
  transform:translate(-50%,-64%); font-family:'Thmanyah Serif Display',serif; font-weight:900;
  font-size:clamp(84px,12vw,158px); line-height:1; color:rgba(21,77,90,.055);
  z-index:-1; pointer-events:none; white-space:nowrap; letter-spacing:8px;
}
.bg-black .heading-title-con[data-num]::before{ color:rgba(255,255,255,.06); }

/* ---- Scroll progress bar (grows from the right, RTL) ---- */
#lux-progress{ position:fixed; top:0; right:0; left:0; height:3px;
  background:linear-gradient(90deg,#ffa671,var(--accent--color)); z-index:99997; transform:scaleX(0); transform-origin:right; will-change:transform; }

/* ---- Custom cursor (precise pointers only) ---- */
#lux-cursor,#lux-cursor-follow{ display:none; }
@media (hover:hover) and (pointer:fine){
  body.lux-cursor-on, body.lux-cursor-on a, body.lux-cursor-on button,
  body.lux-cursor-on .service-card,
  body.lux-cursor-on input, body.lux-cursor-on textarea { cursor:none !important; }
  body.lux-cursor-on #lux-cursor{ display:block; position:fixed; top:0; left:0; width:8px; height:8px; border-radius:50%;
    background:var(--accent--color); z-index:99999; pointer-events:none; transform:translate(-50%,-50%);
    transition:transform .25s ease, opacity .25s ease; }
  body.lux-cursor-on #lux-cursor-follow{ display:flex; align-items:center; justify-content:center; position:fixed; top:0; left:0;
    width:42px; height:42px; border:1.5px solid rgba(21,77,90,.35); border-radius:50%; z-index:99998;
    pointer-events:none; transform:translate(-50%,-50%);
    transition:transform .3s ease,border-color .3s,background .3s,opacity .3s; }
  #lux-cursor-follow .lux-cursor-label{ font-size:12px; font-weight:800; color:#fff; opacity:0; transition:.25s; font-family:'Thmanyah Sans',sans-serif; }
  body.cursor-hover #lux-cursor{ transform:translate(-50%,-50%) scale(0); }
  body.cursor-hover #lux-cursor-follow{ transform:translate(-50%,-50%) scale(1.45); border-color:var(--accent--color); background:rgba(243,114,49,.10); }
  body.cursor-view #lux-cursor{ opacity:0; }
  body.cursor-view #lux-cursor-follow{ transform:translate(-50%,-50%) scale(2.1); background:var(--accent--color); border-color:var(--accent--color); }
  body.cursor-view #lux-cursor-follow .lux-cursor-label{ opacity:1; transform:scale(.48); }
}

/* ---- Branded CREATIVE preloader: shimmer wordmark + sweep bar + Sadu base ---- */
.loader-mask{ background-color:#123f4a !important; z-index:100000 !important; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  transition:opacity .6s ease, visibility .6s ease; }
.loader-mask.is-done{ opacity:0; visibility:hidden; }
/* wordmark */
.loader-mask::before{ content:'\0634\064F\0647\0631\0629'; font-family:'Thmanyah Serif Display',serif; font-weight:900;
  font-size:clamp(40px,6vw,62px); letter-spacing:1px; line-height:1; color:#fff; opacity:.9; }
/* thin progress track + accent fill (JS drives width, RTL: fills from the right) */
.loader-mask .loader{ position:relative; top:auto; left:auto; margin:0; width:min(260px,64vw); height:2px;
  background:rgba(255,255,255,.15); border-radius:4px; overflow:hidden; text-indent:0; color:transparent; }
.loader-mask .loader div{ position:absolute; top:0; bottom:0; right:0; left:0; width:auto; height:auto; opacity:1;
  background:var(--accent--color); border:0; border-radius:4px; animation:none;
  transform:scaleX(0); transform-origin:right center; transition:transform .18s cubic-bezier(.4,0,.2,1); }
.loader-mask .loader div:last-child{ display:none; }
/* big count-up percentage (JS injected) */
.loader-pct{ font-family:'Thmanyah Serif Display',serif; font-weight:900; line-height:1; direction:rtl;
  font-size:clamp(44px,7vw,72px); color:#fff; letter-spacing:1px; font-variant-numeric:tabular-nums; }
.loader-pct .u{ font-size:.5em; color:var(--accent--color); margin-inline-start:2px; vertical-align:.06em; }
.loader-mask::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:16px; background-repeat:repeat-x; background-size:auto 16px;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='48'%20height='16'%3E%3Crect%20width='48'%20height='16'%20fill='%23123f4a'/%3E%3Cpath%20d='M0,16L12,0L24,16Z'%20fill='%23f37231'/%3E%3Cpath%20d='M24,16L36,0L48,16Z'%20fill='%23f37231'/%3E%3Cpath%20d='M12,0L24,16L36,0Z'%20fill='%23fdeee5'/%3E%3C/svg%3E"); opacity:.85; }

/* ---- Reveal-on-scroll for new luxury sections ---- */
.lux-js .lux-reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1); }
.lux-js .lux-reveal.is-in{ opacity:1; transform:none; }

/* ---- Sticky "book a consultation" call pill (global) ---- */
.lux-call-pill{ position:fixed; bottom:26px; right:26px; z-index:9990; display:inline-flex; align-items:center; gap:11px;
  background:var(--accent--color); color:#fff !important; padding:11px 22px 11px 12px; border-radius:50px;
  box-shadow:0 14px 34px rgba(243,114,49,.42); text-decoration:none; font-weight:700; transition:.35s; }
.lux-call-pill:hover{ background:#123f4a; transform:translateY(-3px); }
.lux-call-pill .pill-ico{ width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.18);
  display:inline-flex; align-items:center; justify-content:center; font-size:16px; }
.lux-call-pill .pill-txt{ font-size:15px; }
@media (max-width:575px){ .lux-call-pill{ padding:12px; bottom:20px; right:16px; } .lux-call-pill .pill-txt{ display:none; } }

/* ---- Infinite marquee ribbon (trusted keywords) ---- */
.lux-marquee{ overflow:hidden; background:#123f4a; padding:20px 0; position:relative; }
.lux-marquee::before,.lux-marquee::after{ content:''; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none; }
.lux-marquee::before{ right:0; background:linear-gradient(to left,#123f4a,transparent); }
.lux-marquee::after{ left:0; background:linear-gradient(to right,#123f4a,transparent); }
.lux-marquee .lux-track{ display:inline-flex; align-items:center; gap:52px; white-space:nowrap; will-change:transform; animation:luxMarquee 34s linear infinite; }
.lux-marquee:hover .lux-track{ animation-play-state:paused; }
.lux-marquee .lux-track span{ font-family:'Thmanyah Serif Display',serif; font-weight:700; font-size:clamp(19px,2.2vw,28px); color:rgba(255,255,255,.82); }
.lux-marquee .lux-track span.dot{ width:8px; height:8px; border-radius:50%; background:var(--accent--color); display:inline-block; flex:0 0 8px; }
@keyframes luxMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* (process now uses .lux-timeline in section 10 — old .lux-step removed) */

/* ---- Awards / credibility strip ---- */
.lux-awards .lux-award{ padding:16px 10px; }
.lux-awards .lux-award i{ font-size:34px; color:var(--accent--color); margin-bottom:14px; display:block; }
.lux-awards .lux-award h6{ color:var(--black--color); font-weight:800; margin-bottom:4px; font-family:'Thmanyah Serif Display',serif; }
.lux-awards .lux-award span{ color:var(--text--color2); font-size:13.5px; display:block; }

/* refined pull-quote in serif text */
.blog-article blockquote{ font-family:'Thmanyah Serif Text','Cairo',serif; }

/* =============================================================
   7) THMANYAH SANS (body/UI) + BUTTON SYSTEM + NAVBAR + CTA/TESTIMONIALS
   ============================================================= */

/* ---- Thmanyah Sans (body/UI) — self-hosted woff2 ---- */
@font-face{font-family:'Thmanyah Sans';src:url('../fonts/thmanyah/thmanyahsans-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'Thmanyah Sans';src:url('../fonts/thmanyah/thmanyahsans-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Thmanyah Sans';src:url('../fonts/thmanyah/thmanyahsans-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Thmanyah Sans';src:url('../fonts/thmanyah/thmanyahsans-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Thmanyah Sans';src:url('../fonts/thmanyah/thmanyahsans-Black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap;}

/* ---- unified button system (modern pills) ---- */
.contact-btn, .secondary_btn, .elementary_btn, .primary_btn {
  display:inline-flex !important; align-items:center; justify-content:center; gap:10px;
  border-radius:50px !important; font-weight:800 !important; font-size:15px !important;
  padding:13px 26px !important; line-height:1 !important; text-decoration:none !important;
  border:1.6px solid transparent !important; transition:.35s cubic-bezier(.2,.7,.2,1) !important; white-space:nowrap;
}
.contact-btn img, .secondary_btn img, .elementary_btn img { width:13px !important; height:auto; transition:.35s; margin:0 !important; }
.contact-btn, .elementary_btn { background:var(--accent--color) !important; color:#fff !important; box-shadow:0 10px 24px rgba(243,114,49,.26) !important; }
.contact-btn:hover, .elementary_btn:hover { background:#123f4a !important; transform:translateY(-3px); box-shadow:0 14px 30px rgba(18,63,74,.3) !important; }
.contact-btn img, .elementary_btn img { filter:brightness(0) invert(1); }
.secondary_btn { background:transparent !important; color:var(--black--color) !important; border-color:var(--border--color) !important; }
.secondary_btn:hover { background:var(--black--color) !important; color:#fff !important; border-color:var(--black--color) !important; transform:translateY(-3px); }
.secondary_btn img { filter:none; }
.secondary_btn:hover img { filter:brightness(0) invert(1); }
.bg-black .secondary_btn, .about-us-con .secondary_btn { color:#fff !important; border-color:rgba(255,255,255,.32) !important; }
.bg-black .secondary_btn img, .about-us-con .secondary_btn img { filter:brightness(0) invert(1); }
.bg-black .secondary_btn:hover, .about-us-con .secondary_btn:hover { background:var(--accent--color) !important; border-color:var(--accent--color) !important; }

/* ---- modern floating navbar: glass pill, centered links, sticky reveal ---- */
.header-con { padding-top: 22px; }
.header-con .navbar {
  background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(21,77,90,.08); border-radius: 54px;
  padding: 9px 16px 9px 26px !important; box-shadow: 0 14px 44px rgba(21,77,90,.12);
}
.header-con .navbar-brand { margin: 0; }
.header-con .navbar-collapse { flex-grow: 1; }
/* centre the links between the logo (right) and the CTA (left) */
.header-con .navbar-nav { margin: 0 auto !important; align-items: center; }
.header-con .navbar-nav .nav-link { position:relative; padding:8px 2px !important; margin:0 15px; font-weight:600; white-space:nowrap; }
.header-con .navbar-nav .nav-link::after { content:''; position:absolute; right:0; left:0; bottom:0; height:2px; background:var(--accent--color); border:0 !important; border-radius:2px; transform:scaleX(0); transform-origin:right; transition:transform .3s cubic-bezier(.16,1,.3,1); }
/* dropdown caret: clean chevron (replaces Bootstrap's border-triangle that collided with the underline) */
.header-con .navbar-nav .dropdown-toggle::after { display:none !important; }
.header-con .navbar-nav .nav-caret { font-size:10px; margin-right:7px; vertical-align:middle; opacity:.7; transition:transform .3s ease, opacity .3s ease; display:inline-block; }
.header-con .navbar-nav .dropdown.show .nav-caret,
.header-con .navbar-nav .nav-link:hover .nav-caret { opacity:1; }
.header-con .navbar-nav .dropdown.show .nav-caret { transform:rotate(180deg); }
.header-con .navbar-nav .nav-link:hover::after { transform:scaleX(1); }
.header-con .navbar-nav .nav-link:hover { color:var(--accent--color) !important; }
.header-con .header-contact { flex: 0 0 auto; }
.header-con .dropdown-menu { border:0; border-radius:16px; box-shadow:0 24px 54px rgba(21,77,90,.16); padding:10px; margin-top:18px; min-width:250px; }
.header-con .dropdown-item { border-radius:10px; padding:10px 14px; font-weight:600; transition:.2s; }
.header-con .dropdown-item:hover { background:var(--accent--family--color); color:#e85f22; padding-right:20px; }
.header-con.lux-stuck { position:fixed; top:0; left:0; right:0; z-index:9500; background:transparent; padding-top:12px; animation:navDrop .45s ease; }
.header-con.lux-stuck .navbar { box-shadow:0 16px 44px rgba(21,77,90,.16); }
.header-con.lux-stuck .navbar-brand img { height:48px; }
@keyframes navDrop{ from{ transform:translateY(-120%);} to{ transform:translateY(0);} }
@media (max-width: 991px){
  .header-con .navbar { border-radius:20px; padding:12px 18px !important; }
  .header-con .navbar-nav { margin: 12px 0 !important; align-items: flex-start; }
}

/* ---- CTA centered ---- */
.cta-con .row{ justify-content:center; }
.cta-con .cta-inner-con{ text-align:center; }
.cta-con .cta-inner-con .talk-with-us-elipse{ margin-left:auto !important; margin-right:auto !important; }

/* ---- Testimonials: centered, image-free, luxury quote ---- */
.testimonial-con .testimonial-row{ justify-content:center; }
.testimonial-con .testimonial-box{ text-align:center; max-width:860px; margin:0 auto; }
.testimonial-con .testimonial-box::before{ content:'\201D'; display:block; font-family:'Thmanyah Serif Display',serif; font-weight:900; font-size:104px; line-height:.7; color:var(--accent--family--color); margin-bottom:8px; }
.testimonial-con .testimonial-box p.text-size-18{ font-family:'Thmanyah Serif Text','Cairo',serif; font-size:clamp(20px,2.3vw,28px) !important; line-height:1.85; color:var(--black--color); padding:0 !important; margin-bottom:22px; }
.testimonial-con .testimonial-box .testi-stars{ display:flex; justify-content:center; gap:5px; margin:0 0 14px; padding:0; }
.testimonial-con .testimonial-box .testi-stars li i{ color:var(--yellow--color); font-size:16px; }
.testimonial-con .testimonial-box .name{ color:var(--black--color); font-weight:800; font-family:'Thmanyah Serif Display',serif; margin-bottom:2px; font-size:20px; }
.testimonial-con .testimonial-box .testi-role{ color:var(--accent--strong); font-size:14px; margin:0; }
.testimonial-con .owl-carousel .owl-dots{ position:relative; left:0; right:0; text-align:center; margin-top:26px; }

/* ---- partners strip logo text (Salla / Zid) ---- */
.lux-awards .lux-award-logo{ font-family:'Thmanyah Serif Display',serif; font-weight:900; font-size:32px; color:var(--accent--color); display:block; margin-bottom:12px; line-height:1; }

/* =============================================================
   10) "كيف نعمل" — ANIMATED TIMELINE (draws in + staggered nodes)
   ============================================================= */
.lux-timeline{ position:relative; padding-top:10px; }
.lux-tl-line{ position:absolute; top:44px; right:0; left:0; height:3px; background:var(--border--color); border-radius:3px; overflow:hidden; z-index:0; }
.lux-tl-line span{ position:absolute; inset:0; background:linear-gradient(90deg,#ffa671,var(--accent--color)); transform:scaleX(0); transform-origin:right; transition:transform 1.3s cubic-bezier(.2,.7,.2,1) .15s; }
.lux-timeline.is-in .lux-tl-line span{ transform:scaleX(1); }
.lux-tl-steps{ display:flex; gap:24px; position:relative; z-index:1; }
.lux-tl-step{ flex:1; text-align:center; }
.lux-tl-node{ width:68px; height:68px; margin:0 auto 24px; border-radius:50%; background:#fff; border:3px solid var(--border--color);
  display:flex; align-items:center; justify-content:center; font-family:'Thmanyah Serif Display',serif; font-weight:900; font-size:24px; color:var(--accent--color);
  box-shadow:0 8px 22px rgba(21,77,90,.08); opacity:0; transform:scale(.3);
  transition:transform .55s cubic-bezier(.16,1,.3,1), opacity .5s, border-color .5s, background .5s; }
.lux-timeline.is-in .lux-tl-node{ opacity:1; transform:scale(1); border-color:var(--accent--color); }
.lux-tl-step:hover .lux-tl-node{ background:var(--accent--color); color:#fff; }
.lux-tl-card{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.lux-timeline.is-in .lux-tl-card{ opacity:1; transform:none; }
.lux-tl-card h5{ color:var(--black--color); font-weight:800; font-size:18px; margin-bottom:8px; }
.lux-tl-card p{ color:var(--text--color); font-size:14px; line-height:1.75; margin:0; padding:0 8px; }
/* sequential reveal (RTL: nth-child(1) is the rightmost) */
.lux-timeline.is-in .lux-tl-step:nth-child(1) .lux-tl-node{ transition-delay:.20s; }
.lux-timeline.is-in .lux-tl-step:nth-child(1) .lux-tl-card{ transition-delay:.30s; }
.lux-timeline.is-in .lux-tl-step:nth-child(2) .lux-tl-node{ transition-delay:.45s; }
.lux-timeline.is-in .lux-tl-step:nth-child(2) .lux-tl-card{ transition-delay:.55s; }
.lux-timeline.is-in .lux-tl-step:nth-child(3) .lux-tl-node{ transition-delay:.70s; }
.lux-timeline.is-in .lux-tl-step:nth-child(3) .lux-tl-card{ transition-delay:.80s; }
.lux-timeline.is-in .lux-tl-step:nth-child(4) .lux-tl-node{ transition-delay:.95s; }
.lux-timeline.is-in .lux-tl-step:nth-child(4) .lux-tl-card{ transition-delay:1.05s; }
/* mobile -> vertical timeline */
@media (max-width: 767px){
  .lux-tl-line{ top:0; bottom:0; right:34px; left:auto; width:3px; height:auto; }
  .lux-tl-line span{ transform:scaleY(0); transform-origin:top; }
  .lux-timeline.is-in .lux-tl-line span{ transform:scaleY(1); }
  .lux-tl-steps{ flex-direction:column; gap:30px; }
  .lux-tl-step{ display:flex; gap:20px; text-align:right; align-items:flex-start; }
  .lux-tl-node{ margin:0; flex:0 0 68px; }
  .lux-tl-card p{ padding:0; }
}

/* =============================================================
   11) MODERN HERO + SAUDI CULTURE (Sadu band · made in KSA)
   ============================================================= */
/* --- modern hero: aurora glow, badge eyebrow, elevated image collage --- */
.banner-con{ position:relative; overflow:hidden; }
.banner-con::before{ content:''; position:absolute; top:-160px; right:-120px; width:540px; height:540px; border-radius:50%; background:radial-gradient(circle, rgba(243,114,49,.16), transparent 62%); pointer-events:none; z-index:0; }
.banner-con::after{ content:''; position:absolute; bottom:-180px; left:-140px; width:600px; height:600px; border-radius:50%; background:radial-gradient(circle, rgba(21,77,90,.13), transparent 62%); pointer-events:none; z-index:0; }
.banner-con .main-container{ position:relative; z-index:1; }
.banner-con .banner-inner-con .banner-heading-con .expert-driven{ display:inline-block !important; background:var(--accent--family--color); color:#e85f22 !important; padding:8px 20px !important; border-radius:30px; font-size:14px !important; font-weight:700 !important; margin-bottom:22px !important; line-height:1.7 !important; }
.banner-imgz-con figure{ margin:0; }
.banner-imgz-con figure img{ border-radius:22px !important; border:5px solid #fff; box-shadow:0 24px 54px rgba(21,77,90,.16); }
.banner-imgz-con figure:nth-child(2) img{ transform:translateY(-22px); }
.banner-imgz-con .user-box{ background:#fff !important; box-shadow:0 20px 46px rgba(21,77,90,.18) !important; border-radius:50px !important; }

/* --- Sadu heritage band (نقش السدو) — CSS/SVG, brand-coloured --- */
.sadu-band{ height:20px; width:100%; float:left; background-repeat:repeat-x; background-size:auto 20px;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='48'%20height='20'%3E%3Crect%20width='48'%20height='20'%20fill='%23123f4a'/%3E%3Cpath%20d='M0,20L12,0L24,20Z'%20fill='%23f37231'/%3E%3Cpath%20d='M24,20L36,0L48,20Z'%20fill='%23f37231'/%3E%3Cpath%20d='M12,0L24,20L36,0Z'%20fill='%23fdeee5'/%3E%3C/svg%3E"); }

/* --- "made in KSA" pride line --- */
.shohrah-footer .made-in-ksa{ color:rgba(255,255,255,.72); font-size:13.5px; display:inline-flex; align-items:center; gap:8px; }

/* =============================================================
   12) BOLD EDITORIAL REDESIGN — hero · about · services · CTA
   ============================================================= */
.hero-accent{ color:var(--accent--color) !important; }

/* --- HERO --- */
.hero-ed{ padding:44px 0 74px; overflow:hidden; }
.hero-ed-glow{ position:absolute; border-radius:50%; pointer-events:none; z-index:0; }
.hero-ed-glow.g1{ top:-140px; right:-90px; width:500px; height:500px; background:radial-gradient(circle, rgba(243,114,49,.18), transparent 62%); }
.hero-ed-glow.g2{ bottom:-170px; left:-130px; width:560px; height:560px; background:radial-gradient(circle, rgba(21,77,90,.12), transparent 62%); }
.hero-ed .main-container{ position:relative; z-index:1; }
.hero-ed-eyebrow{ display:inline-block; background:#fff; border:1px solid var(--border--color); color:var(--black--color); font-weight:700; font-size:14px; padding:9px 20px; border-radius:30px; box-shadow:0 8px 22px rgba(21,77,90,.06); margin-bottom:26px; }
.hero-ed-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center; margin-bottom:56px; }
.hero-ed-title{ font-family:'Thmanyah Serif Display',serif !important; font-weight:900 !important; font-size:clamp(38px,5.2vw,74px) !important; line-height:1.08 !important; letter-spacing:-1px; margin:0 0 24px !important; color:var(--black--color); }
.hero-ed-sub{ font-size:18px; line-height:1.9; color:var(--text--color); margin:0 0 32px; max-width:520px; }
.hero-ed-cta{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.hero-ed-visual{ position:relative; }
.hero-img-main{ margin:0; border-radius:26px; overflow:hidden; box-shadow:0 30px 70px rgba(21,77,90,.20); }
.hero-img-main img{ width:100%; height:480px; object-fit:cover; display:block; }
.hero-float-card{ position:absolute; bottom:-26px; right:-18px; background:#fff; border-radius:18px; padding:14px 20px; box-shadow:0 20px 44px rgba(21,77,90,.18); display:flex; align-items:center; gap:14px; }
.hfc-avatars{ display:flex; }
.hfc-avatars img{ width:38px; height:38px; border-radius:50%; border:2px solid #fff; margin-right:-12px; object-fit:cover; }
.hfc-text strong{ display:block; font-family:'Thmanyah Serif Display',serif; font-weight:900; color:var(--black--color); font-size:20px; line-height:1; direction:ltr; }
.hfc-text span{ font-size:12px; color:var(--text--color2); }
.hero-badge-rating{ position:absolute; top:-16px; left:-16px; background:var(--black--color); color:#fff; border-radius:14px; padding:10px 16px; font-weight:800; box-shadow:0 16px 34px rgba(18,63,74,.28); font-size:15px; direction:ltr; }
.hero-badge-rating i{ color:var(--yellow--color); margin-left:4px; }
.hero-badge-rating span{ display:block; font-size:11px; font-weight:500; opacity:.8; }
.hero-ed-stats{ display:flex; justify-content:space-between; gap:24px; border-top:1px solid var(--border--color); padding-top:38px; flex-wrap:wrap; }
.hes-item{ flex:1; min-width:120px; }
.hes-num{ font-family:'Thmanyah Serif Display',serif; font-weight:900; font-size:clamp(34px,4vw,52px); color:var(--black--color); line-height:1; direction:ltr; text-align:right; }
.hes-num .counter{ color:var(--accent--color); }
.hes-item p{ margin:8px 0 0; color:var(--text--color); font-size:15px; }

/* hero / editorial buttons */
.btn-hero-primary{ display:inline-flex; align-items:center; gap:12px; background:var(--accent--color); color:#fff !important; font-weight:800; padding:13px 16px 13px 30px; border-radius:50px; text-decoration:none; box-shadow:0 14px 32px rgba(243,114,49,.30); transition:.35s cubic-bezier(.2,.7,.2,1); white-space:nowrap; }
.btn-hero-primary .ico{ width:36px; height:36px; border-radius:50%; background:#fff; color:var(--accent--color); display:inline-flex; align-items:center; justify-content:center; transition:.35s; font-size:13px; }
.btn-hero-primary:hover{ background:#123f4a; transform:translateY(-3px); color:#fff !important; }
.btn-hero-primary:hover .ico{ background:var(--accent--color); color:#fff; }
.btn-hero-ghost{ display:inline-flex; align-items:center; gap:10px; color:var(--black--color) !important; font-weight:800; padding:13px 24px; border-radius:50px; text-decoration:none; border:1.6px solid var(--border--color); transition:.35s; white-space:nowrap; }
.btn-hero-ghost:hover{ border-color:var(--black--color); background:var(--black--color); color:#fff !important; transform:translateY(-3px); }
.btn-hero-ghost-light{ display:inline-flex; align-items:center; gap:10px; color:#fff !important; font-weight:800; padding:13px 26px; border-radius:50px; text-decoration:none; border:1.6px solid rgba(255,255,255,.3); transition:.35s; white-space:nowrap; }
.btn-hero-ghost-light:hover{ background:#fff; color:var(--black--color) !important; border-color:#fff; transform:translateY(-3px); }

/* --- ABOUT editorial --- */
.about-ed-visual{ position:relative; z-index:1; }
.about-ed-visual figure{ margin:0; border-radius:26px; overflow:hidden; box-shadow:0 30px 66px rgba(21,77,90,.18); }
.about-ed-visual figure img{ width:100%; height:470px; object-fit:cover; display:block; }
.about-ed-ghost{ position:absolute; top:-48px; right:-8px; font-family:'Thmanyah Serif Display',serif; font-weight:900; font-size:clamp(80px,10vw,150px); color:rgba(21,77,90,.06); z-index:-1; line-height:1; }
.about-ed-badge{ position:absolute; bottom:-24px; left:-20px; background:var(--accent--color); color:#fff; border-radius:18px; padding:18px 24px; box-shadow:0 20px 44px rgba(243,114,49,.3); text-align:center; }
.about-ed-badge strong{ font-family:'Thmanyah Serif Display',serif; font-weight:900; font-size:34px; display:block; line-height:1; direction:ltr; }
.about-ed-badge span{ font-size:13px; }
.about-ed-content{ padding-right:20px; }
.about-ed-content h2{ font-size:clamp(28px,3.6vw,46px) !important; margin:12px 0 20px; line-height:1.25; }
.about-ed-content > p{ font-size:17px; line-height:1.95; color:var(--text--color); margin-bottom:22px; }
.about-ed-points{ list-style:none; padding:0; margin:0 0 30px; }
.about-ed-points li{ display:flex; align-items:center; gap:12px; margin-bottom:14px; color:var(--black--color); font-weight:600; }
.about-ed-points li i{ width:26px; height:26px; border-radius:50%; background:var(--accent--family--color); color:#e85f22; display:inline-flex; align-items:center; justify-content:center; font-size:12px; flex:0 0 26px; }

/* --- SERVICES editorial (numbered, curtain-fill) --- */
/* Bootstrap 4 rows carry a 30px horizontal gutter and NO vertical one, so the
   second row of cards sat flush against the first. Widen both so each card
   reads as its own object — and leave room for the -8px hover lift. */
.services-ed .row{ margin-inline:-19px; row-gap:38px; }
.services-ed .row > [class*="col-"]{ padding-inline:19px; }
.svc-ed-card{ display:block; position:relative; background:#fff; border:1px solid var(--border--color); border-radius:22px; padding:40px 34px 66px; height:100%; text-decoration:none; overflow:hidden; transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .4s; }
.svc-ed-card::before{ content:''; position:absolute; inset:0; background:var(--black--color); transform:translateY(101%); transition:transform .45s cubic-bezier(.2,.7,.2,1); z-index:0; }
.svc-ed-card:hover{ transform:translateY(-8px); border-color:transparent; box-shadow:0 30px 60px rgba(21,77,90,.14); }
.svc-ed-card:hover::before{ transform:translateY(0); }
.svc-ed-card > *{ position:relative; z-index:1; }
.svc-ed-num{ font-family:'Thmanyah Serif Display',serif; font-weight:900; font-size:44px; color:var(--accent--family--color); line-height:1; display:block; margin-bottom:18px; transition:color .4s; }
.svc-ed-card:hover .svc-ed-num{ color:rgba(255,255,255,.22); }
.svc-ed-card h5{ font-family:'Thmanyah Serif Display',serif; font-weight:700; color:var(--black--color); font-size:22px; margin-bottom:12px; transition:color .4s; }
.svc-ed-card p{ color:var(--text--color); margin:0; line-height:1.8; transition:color .4s; }
.svc-ed-card:hover h5{ color:#fff; }
.svc-ed-card:hover p{ color:rgba(255,255,255,.8); }
.svc-ed-arrow{ position:absolute; bottom:28px; right:34px; width:44px; height:44px; border-radius:50%; background:var(--accent--family--color); color:#e85f22; display:flex; align-items:center; justify-content:center; transition:.4s; z-index:1; }
.svc-ed-card:hover .svc-ed-arrow{ background:var(--accent--color); color:#fff; }

/* --- CTA editorial --- */
.cta-ed{ overflow:hidden; }
.cta-ed-glow{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:720px; height:720px; border-radius:50%; background:radial-gradient(circle, rgba(243,114,49,.14), transparent 60%); pointer-events:none; }
.cta-ed .main-container{ position:relative; z-index:1; }
.cta-ed-inner{ max-width:820px; margin:0 auto; }
.cta-ed-eyebrow{ display:inline-block; color:var(--accent--strong); font-weight:800; letter-spacing:1px; margin-bottom:16px; font-size:15px; }
.cta-ed-title{ font-family:'Thmanyah Serif Display',serif !important; font-weight:900 !important; font-size:clamp(34px,5vw,68px) !important; line-height:1.1 !important; color:#fff !important; margin:0 0 20px !important; }
.cta-ed-inner p{ color:rgba(255,255,255,.8); font-size:18px; line-height:1.9; margin-bottom:32px; }
.cta-ed-btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* responsive */
/* ---- responsive + mobile off-canvas drawer ---- */
@media (max-width:991px){
  .hero-ed-grid{ grid-template-columns:1fr; gap:38px; }
  .hero-ed-visual{ order:2; }
  .hero-img-main img{ height:340px; }
  .about-ed-content{ padding-right:0; margin-top:54px; }
  .hero-ed-stats{ gap:16px; }
  .hes-item{ min-width:45%; flex:1 1 45%; }

  .header-con{ padding-top:16px; }
  .header-con .navbar{ border-radius:18px; padding:12px 16px !important; justify-content:space-between; flex-wrap:nowrap; background:#fff !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  .header-con .header-contact{ display:none; }
  .header-con .navbar-toggler{ display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; z-index:9700; border:0; padding:0; background:transparent; outline:none; box-shadow:none;top:15px}
  .header-con .navbar-toggler .navbar-toggler-icon{ display:block; width:26px; height:2px; background:var(--black--color) !important; background-image:none !important; border-radius:2px; margin:5px 0; transition:transform .3s, opacity .3s; }
  body.nav-open .header-con .navbar-toggler .navbar-toggler-icon:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  body.nav-open .header-con .navbar-toggler .navbar-toggler-icon:nth-child(2){ opacity:0; }
  body.nav-open .header-con .navbar-toggler .navbar-toggler-icon:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  /* side drawer */
  .header-con .navbar-collapse{ position:fixed; top:0; right:0; height:100vh; height:100dvh; width:min(86vw,330px); background:#fff; z-index:19600;
    transform:translateX(105%); transition:transform .42s cubic-bezier(.2,.7,.2,1); display:block !important; visibility:visible; padding:88px 26px 30px; overflow-y:auto; box-shadow:-24px 0 60px rgba(21,77,90,.16); }
  body.nav-open .header-con .navbar-collapse{ transform:translateX(0); }
  .header-con .navbar-collapse .navbar-nav{ margin:0 !important; align-items:stretch; flex-direction:column; }
  .header-con .navbar-nav .nav-link{ margin:0 !important; padding:15px 4px !important; border-bottom:1px solid var(--border--color); font-size:17px; white-space:normal; text-align:center; }
  .header-con .navbar-nav .nav-link.dropdown-toggle{ display:flex; align-items:center; justify-content:center; gap:8px; }
  .header-con .navbar-nav .nav-link::after{ display:none !important; }
  .header-con .navbar-nav .nav-caret{ float:none; margin:0; }
  .header-con .dropdown-menu{ position:static !important; float:none; box-shadow:none; border:0; padding:4px 0 10px; margin:0; min-width:0; background:transparent; }
  .header-con .dropdown-item{ padding:10px 16px; font-size:15px; }
}
.lux-nav-backdrop{ position:fixed; inset:0; background:rgba(18,63,74,.5); opacity:0; visibility:hidden; transition:opacity .35s, visibility .35s; z-index:9550; }
body.nav-open .lux-nav-backdrop{ opacity:1; visibility:visible; }
body.nav-open{ overflow:hidden; }
body.nav-open #button{ display:none !important; }
/* release the drawer from ancestor stacking contexts (.header-con z:5 / wrappers)
   so it paints above the root-level backdrop instead of being trapped below it */
body.nav-open .main-box.position-relative{ z-index:auto !important; }

/* =============================================================
   14) POLISH PASS — de-slop numerals · a11y focus · reduced motion
   ============================================================= */
/* remove cross-section numeral scaffolding (numbers kept only where they carry
   real sequence: the process timeline nodes + the numbered services grid) */
.heading-title-con[data-num]::before,
.bg-black .heading-title-con[data-num]::before{ content:none !important; display:none !important; }

/* balanced heading wrapping */
h1, h2, h3, .hero-ed-title, .cta-ed-title, .heading-title-con h2, .about-ed-content h2{ text-wrap:balance; }

/* visible keyboard focus (never remove an outline without a replacement) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible,
.svc-ed-card:focus-visible, .post-card a:focus-visible, .talk-with-us-elipse:focus-visible{
  outline:3px solid rgba(243,114,49,.6) !important; outline-offset:3px; border-radius:8px;
}

/* respect reduced-motion everywhere (keep content visible, calm the motion) */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .lux-marquee .lux-track,
  .loader-mask::before, .loader-mask .loader div{ animation:none !important; }
  .lux-js .lux-reveal{ opacity:1 !important; transform:none !important; }
}

/* =============================================================
   SECTION 15 — CRITIQUE FIXES (2026-07-12)
   Conversion + contrast + warmth pass. Loaded last, wins cascade.
   ============================================================= */
:root{
  --accent--strong:#d1550e;   /* deep action orange — AA-safe for WHITE button text (~4.2:1) */
}

/* --- Contrast: white-on-orange buttons use the deeper action orange --- */
.btn-hero-primary{ background:var(--accent--strong) !important; box-shadow:0 14px 32px rgba(209,85,14,.34) !important; }
.btn-hero-primary:hover{ background:#123f4a !important; }
.contact-btn, .elementary_btn{ background:var(--accent--strong) !important; box-shadow:0 10px 24px rgba(209,85,14,.28) !important; }
.lux-call-pill{ background:var(--accent--strong); box-shadow:0 14px 34px rgba(209,85,14,.42); }
.lux-call-pill:hover{ background:#123f4a; }

/* --- Eyebrows -> teal (Weight-Not-Color rule; ~10:1 on white) --- */
.special-text{ color:var(--black--color) !important; }

/* --- Nav: warm solid white instead of cold glass (matches "majlis" brief) --- */
.header-con .navbar{
  background:#ffffff !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  box-shadow:0 14px 44px rgba(21,77,90,.12);
}

/* --- Hero: risk-reversal assurance line under the primary CTA --- */
.hero-ed-assure{ display:flex; align-items:center; gap:9px; margin-top:18px; color:var(--text--color); font-size:14px; font-weight:600; }
.hero-ed-assure i{ color:var(--accent--strong); font-size:13px; }
.hero-ed-cta{ flex-wrap:wrap; }

/* --- Hero trust strip: real partner logos (replaces the fake-stats block) --- */
.hero-trust{ display:flex; align-items:center; gap:30px; flex-wrap:wrap; border-top:1px solid var(--border--color); margin-top:44px; padding-top:28px; }
.hero-trust .ht-label{ color:var(--text--color2); font-size:14px; font-weight:700; white-space:nowrap; }
.hero-trust .ht-logos{ display:flex; align-items:center; gap:34px; flex-wrap:wrap; }
.hero-trust .ht-logos span{ font-family:'Thmanyah Serif Display',serif; font-weight:900; font-size:22px; color:var(--black--color); opacity:.72; line-height:1; }
.hero-trust .ht-logos i{ font-size:25px; color:var(--black--color); opacity:.68; }
@media (max-width:767px){ .hero-trust{ gap:18px; margin-top:34px; padding-top:22px; } .hero-trust .ht-logos{ gap:24px; } }

/* --- "Why SHOHRAH / one roof" band (replaces the redundant awards grid) --- */
.why-ed{ }
.why-ed .heading-title-con h2{ color:#fff !important; }
.why-ed .heading-title-con .special-text{ color:var(--accent--color) !important; }
.why-ed .heading-title-con .bg-accent{ background-color:var(--accent--strong) !important; color:#fff !important; }
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:16px; }
.why-item{ padding:30px 28px; border:1px solid rgba(255,255,255,.12); border-radius:20px; background:rgba(255,255,255,.03); transition:.4s cubic-bezier(.2,.7,.2,1); }
.why-item:hover{ background:rgba(255,255,255,.06); transform:translateY(-6px); border-color:rgba(243,114,49,.4); }
.why-item .wi-ic{ display:inline-flex; align-items:center; justify-content:center; width:60px; height:60px; border-radius:16px; background:rgba(243,114,49,.14); color:var(--accent--color); font-size:24px; margin-bottom:20px; }
.why-item h5{ font-family:'Thmanyah Serif Display',serif; color:#fff; font-weight:700; font-size:22px; margin-bottom:11px; }
.why-item p{ color:rgba(255,255,255,.74); line-height:1.9; margin:0; font-size:15.5px; }
@media (max-width:991px){ .why-grid{ grid-template-columns:1fr; gap:18px; } }

/* =============================================================
   SECTION 16 — MOBILE REFINEMENT + MOTION (2026-07-12)
   overflow fix · orbit/header/cards/breadcrumb/sidebar mobile ·
   staggered scroll reveals · scroll-driven parallax
   ============================================================= */

/* --- Kill horizontal overflow (off-canvas drawer sits at translateX(105%)) --- */
html, body{ overflow-x:hidden; max-width:100%; }

/* --- Smooth scroll (motion-safe) --- */
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }

/* --- Motion: richer staggered reveals for grids/rows --- */
.lux-js .lux-reveal.stagger > *{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.lux-js .lux-reveal.stagger.is-in > *{ opacity:1; transform:none; }
.lux-js .lux-reveal.stagger.is-in > *:nth-child(1){ transition-delay:.05s; }
.lux-js .lux-reveal.stagger.is-in > *:nth-child(2){ transition-delay:.14s; }
.lux-js .lux-reveal.stagger.is-in > *:nth-child(3){ transition-delay:.23s; }
.lux-js .lux-reveal.stagger.is-in > *:nth-child(4){ transition-delay:.32s; }
.lux-js .lux-reveal.stagger.is-in > *:nth-child(5){ transition-delay:.41s; }
.lux-js .lux-reveal.stagger.is-in > *:nth-child(6){ transition-delay:.50s; }
/* hero trust logos drift up on load */
.hero-trust .ht-logos{ animation:luxRise .8s .3s both cubic-bezier(.2,.7,.2,1); }
@keyframes luxRise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

/* --- Scroll-driven parallax on hero glows + about ghost (progressive; ignored where unsupported) --- */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: scroll()){
    .hero-ed-glow.g1{ animation:luxDriftUp linear both; animation-timeline:scroll(root); }
    .hero-ed-glow.g2{ animation:luxDriftDown linear both; animation-timeline:scroll(root); }
    .about-ed-ghost{ animation:luxDriftSide linear both; animation-timeline:view(); animation-range:entry 0% cover 60%; }
  }
}
@keyframes luxDriftUp{ to{ transform:translateY(-90px); } }
@keyframes luxDriftDown{ to{ transform:translateY(70px); } }
@keyframes luxDriftSide{ from{ transform:translateX(20px); } to{ transform:translateX(-24px); } }

/* -------------------------------------------------------------
   MOBILE REFINEMENTS  (<=767 tablet/phone, <=575 small phone)
   ------------------------------------------------------------- */
@media (max-width:767px){
  /* tighter section rhythm on phones */
  .padding-top{ padding-top:64px !important; }
  .padding-bottom{ padding-bottom:64px !important; }
  .hero-ed{ padding:24px 0 56px; }
  .hero-ed-grid{ gap:30px; margin-bottom:38px; }
  .hero-ed-eyebrow{ font-size:12.5px; padding:8px 16px; margin-bottom:20px; }
  .hero-ed-sub{ font-size:16px; margin-bottom:26px; }
  .hero-ed-cta{ gap:11px; }
  .hero-ed-cta .btn-hero-primary, .hero-ed-cta .btn-hero-ghost{ flex:1 1 100%; justify-content:center; }
  .hero-ed-assure{ font-size:13px; }

  /* ORBIT: contained + calmer on phones */

  /* HERO TRUST strip: wrap centered */
  .hero-trust{ flex-direction:column; align-items:flex-start; gap:14px; }
  .hero-trust .ht-logos{ gap:22px; }
  .hero-trust .ht-logos span{ font-size:20px; }
  .hero-trust .ht-logos i{ font-size:22px; }

  /* SERVICE cards: comfortable padding, arrow doesn't crowd text */
  .services-ed .row{ margin-inline:-11px; row-gap:22px; }
  .services-ed .row > [class*="col-"]{ padding-inline:11px; }
  .svc-ed-card{ padding:26px 22px 62px !important; }
  .svc-ed-num{ font-size:34px; }
  .svc-ed-card h5{ font-size:19px; }
  .svc-ed-arrow{ bottom:20px; right:22px; width:38px; height:38px; }

  /* WHY band: comfortable */
  .why-item{ padding:24px 22px; }
  .why-item h5{ font-size:20px; }

  /* CTA band tighter */
  .cta-ed{ padding-top:70px !important; padding-bottom:70px !important; }
  .cta-ed-btns .btn-hero-primary, .cta-ed-btns .btn-hero-ghost-light{ flex:1 1 100%; justify-content:center; }

  /* BREADCRUMB / inner-page banner: shorter, wraps, readable */
  .sub-banner-con{ padding:34px 0 !important; text-align:center; }
  .sub-banner-con h1{ font-size:clamp(26px,7vw,38px) !important; line-height:1.2; }
  .breadcrumb-con{ margin-top:12px; }
  .breadcrumb{ flex-wrap:wrap; justify-content:center; gap:2px 4px; font-size:13px; padding:0; }
  .breadcrumb-item{ white-space:nowrap; }

  /* SIDEBAR (blog / service detail): stacks below content with breathing room */
  .blog-sidebar{ margin-top:44px; }
  .sidebar-widget{ margin-bottom:26px; border-radius:18px; }
}

@media (max-width:575px){
  .why-grid{ gap:14px; }
  .lux-call-pill{ padding:11px; }
}

/* =============================================================
   SECTION 17 — HERO BENTO (replaces the orbit)
   "everything under one roof" — the disciplines collected in one frame
   ============================================================= */
.hero-bento{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; max-width:490px; margin:0 auto; }
.hb-tile{ background:#fff; border:1px solid var(--border--color); border-radius:20px; padding:22px 20px; display:flex; flex-direction:column; gap:14px; box-shadow:0 10px 26px rgba(21,77,90,.07); transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .4s; text-decoration:none; min-height:124px; }
.hb-tile:hover{ transform:translateY(-5px); box-shadow:0 22px 44px rgba(21,77,90,.14); border-color:rgba(243,114,49,.35); }
.hb-ic{ width:48px; height:48px; border-radius:14px; background:var(--accent--family--color); color:var(--accent--strong); display:inline-flex; align-items:center; justify-content:center; font-size:20px; flex:0 0 auto; }
.hb-lbl{ font-family:'Thmanyah Serif Display',serif; font-weight:700; color:var(--black--color); font-size:16px; line-height:1.35; margin-top:auto; }

.hb-lead{ grid-column:span 2; background:linear-gradient(150deg,#1b5a68,#0f363f); border:0; color:#fff; padding:28px 26px; position:relative; overflow:hidden; min-height:150px; justify-content:center; gap:9px; }
.hb-lead::after{ content:''; position:absolute; top:-60px; left:-40px; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle, rgba(243,114,49,.28), transparent 68%); pointer-events:none; }
.hb-lead .hb-k{ color:var(--accent--color); font-weight:800; font-size:13px; letter-spacing:.5px; position:relative; z-index:1; }
.hb-lead strong{ font-family:'Thmanyah Serif Display',serif; font-weight:900; font-size:23px; line-height:1.32; color:#fff; position:relative; z-index:1; max-width:78%; }
.hb-lead .hb-go{ position:absolute; bottom:22px; left:26px; width:46px; height:46px; border-radius:50%; background:var(--accent--strong); color:#fff; display:flex; align-items:center; justify-content:center; transition:.35s cubic-bezier(.2,.7,.2,1); z-index:1; box-shadow:0 12px 28px rgba(209,85,14,.4); }
.hb-lead:hover{ transform:translateY(-5px); box-shadow:0 26px 54px rgba(18,63,74,.32); }
.hb-lead:hover .hb-go{ transform:translateX(-5px); background:#fff; color:var(--accent--strong); }

/* extend reveal stagger to cover all 7 bento cells */
.lux-js .lux-reveal.stagger.is-in > *:nth-child(7){ transition-delay:.59s; }

@media (max-width:575px){
  .hero-bento{ gap:11px; max-width:400px; }
  .hb-tile{ padding:16px 15px; min-height:104px; border-radius:16px; gap:11px; }
  .hb-ic{ width:42px; height:42px; font-size:18px; border-radius:12px; }
  .hb-lbl{ font-size:14px; }
  .hb-lead{ padding:22px 20px; min-height:128px; }
  .hb-lead strong{ font-size:19px; max-width:100%; }
  .hb-lead .hb-go{ bottom:18px; left:18px; width:40px; height:40px; }
}

/* =============================================================
   SECTION 18 — CENTERED SAAS HERO
   headline block centered on top · bento showcase below · trust centered
   ============================================================= */
.hero-centered{ padding-top:60px; text-align:center; }
.hero-centered .hero-ed-content{ max-width:820px; margin:0 auto; }
.hero-centered .hero-ed-title{ margin-inline:auto; }
.hero-centered .hero-ed-sub{ margin:0 auto 32px; max-width:640px; }
.hero-centered .hero-ed-cta{ justify-content:center; }
.hero-centered .hero-ed-assure{ justify-content:center; }

.hero-ed-showcase{ margin-top:56px; }
.hero-centered .hero-bento{ grid-template-columns:repeat(3,1fr); max-width:880px; text-align:right; }
.hero-centered .hb-lead{ grid-column:span 3; min-height:132px; padding:28px 30px; }
.hero-centered .hb-lead strong{ max-width:62%; font-size:24px; }

.hero-trust--center{ justify-content:center; text-align:center; margin-top:40px; padding-top:30px; }
.hero-trust--center .ht-logos{ justify-content:center; }

@media (max-width:991px){
  .hero-centered .hero-bento{ grid-template-columns:repeat(2,1fr); max-width:540px; }
  .hero-centered .hb-lead{ grid-column:span 2; }
}
@media (max-width:767px){
  .hero-centered{ padding-top:20px; }
  .hero-ed-showcase{ margin-top:40px; }
  .hero-centered .hb-lead{ flex-direction:column; align-items:flex-start; gap:12px; }
  .hero-trust--center{ align-items:center; }
}

/* =============================================================
   SECTION 19 — MODERN NAVBAR + MOBILE DRAWER (global, all pages)
   ============================================================= */

/* ---------- Desktop navbar: refined floating bar with pill links ---------- */
.header-con .navbar{
  padding:10px 14px 10px 22px !important;
  border-radius:60px;
  border:1px solid rgba(21,77,90,.06);
  box-shadow:0 10px 40px rgba(21,77,90,.10);
}
.header-con.lux-stuck .navbar{ box-shadow:0 14px 44px rgba(21,77,90,.18); }

/* links become soft pills; kill the old underline */
.header-con .navbar-nav .nav-link::after{ display:none !important; }
.header-con .navbar-nav .nav-link{
  position:relative; padding:9px 15px !important; margin:0 1px;
  border-radius:40px; font-weight:600; color:var(--black--color) !important;
  transition:background .25s ease, color .25s ease;
}
.header-con .navbar-nav .nav-link:hover{ background:rgba(21,77,90,.07); color:var(--black--color) !important; }
.header-con .navbar-nav .nav-link.active{ background:var(--accent--strong); color:#fff !important; box-shadow:0 8px 20px rgba(209,85,14,.28); }
.header-con .navbar-nav .nav-link.active .nav-caret{ color:#fff; opacity:1; }

/* modern services dropdown */
.header-con .dropdown-menu{
  border:0; border-radius:18px; padding:10px; margin-top:14px; min-width:238px;
  box-shadow:0 22px 54px rgba(21,77,90,.18); background:#fff;
  animation:navDropIn .28s cubic-bezier(.2,.7,.2,1);
}
@keyframes navDropIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.header-con .dropdown-item{
  border-radius:12px; padding:11px 14px; font-weight:600; color:var(--text--color);
  transition:background .2s, color .2s, transform .2s;
}
.header-con .dropdown-item:hover{ background:var(--accent--family--color); color:var(--accent--strong); transform:translateX(-6px); }

/* CTA in the bar */
.header-con .contact-btn{ border-radius:40px; padding:11px 22px !important; font-weight:800; }

/* ---------- Mobile drawer: modern branded panel ---------- */
@media (max-width:991px){
  .header-con .navbar-collapse{
    width:min(88vw,344px) !important; padding:30px 22px 32px !important;
    background:linear-gradient(180deg,#ffffff 0%, #f6f9fa 100%) !important;
    border-top-left-radius:26px; border-bottom-left-radius:26px;
    box-shadow:-30px 0 80px rgba(18,63,74,.24) !important;
  }
  /* drawer title */
  .header-con .navbar-collapse::before{
    content:'القائمة'; display:block; font-family:'Thmanyah Serif Display',serif; font-weight:900;
    color:var(--black--color); font-size:22px; margin-bottom:20px; padding-bottom:16px;
    border-bottom:1px solid var(--border--color);
  }
  /* modern link rows (drop old centered/bordered style) */
  .header-con .navbar-nav .nav-link{
    text-align:right !important; border-bottom:0 !important; margin:2px 0 !important;
    padding:13px 16px !important; border-radius:14px; font-size:16px; font-weight:600;
    display:flex; align-items:center; gap:10px;
  }
  .header-con .navbar-nav .nav-link.dropdown-toggle{ justify-content:space-between; }
  .header-con .navbar-nav .nav-link:hover,
  .header-con .navbar-nav .nav-link.active{ background:var(--accent--family--color); color:var(--accent--strong) !important; box-shadow:none; }
  .header-con .navbar-nav .nav-link.active .nav-caret{ color:var(--accent--strong); }
  .header-con .dropdown-menu{ box-shadow:none; padding:2px 6px 8px; margin:0; }
  .header-con .dropdown-item{ padding:10px 14px; }

  /* staggered link entrance when the drawer opens */
  .header-con .navbar-collapse .nav-item{ opacity:0; transform:translateX(22px); transition:opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1); }
  body.nav-open .header-con .navbar-collapse .nav-item{ opacity:1; transform:none; }
  body.nav-open .header-con .navbar-nav .nav-item:nth-child(1){ transition-delay:.10s; }
  body.nav-open .header-con .navbar-nav .nav-item:nth-child(2){ transition-delay:.16s; }
  body.nav-open .header-con .navbar-nav .nav-item:nth-child(3){ transition-delay:.22s; }
  body.nav-open .header-con .navbar-nav .nav-item:nth-child(4){ transition-delay:.28s; }
  body.nav-open .header-con .navbar-nav .nav-item:nth-child(5){ transition-delay:.34s; }
  body.nav-open .header-con .navbar-nav .nav-item:nth-child(6){ transition-delay:.40s; }
  body.nav-open .header-con .navbar-nav .nav-item:nth-child(7){ transition-delay:.46s; }
  body.nav-open .header-con .navbar-nav .nav-item:nth-child(8){ transition-delay:.52s; }
  @media (prefers-reduced-motion:reduce){ .header-con .navbar-collapse .nav-item{ opacity:1 !important; transform:none !important; } }
}

/* nav active state (desktop): subtle teal pill + accent text, so it doesn't clash with the orange CTA */
@media (min-width:992px){
  .header-con .navbar-light .navbar-nav .nav-link.active{ background:rgba(21,77,90,.09) !important; color:var(--accent--strong) !important; font-weight:700; box-shadow:none !important; }
  .header-con .navbar-light .navbar-nav .nav-link.active::after{ display:none !important; }
}

/* =============================================================
   SECTION 20 — NAV CENTERING + HEADER/HERO SEAM FIX
   ============================================================= */
/* Deterministic 3-zone navbar: brand (right) · links (center) · CTA (left) */
@media (min-width:992px){
  .header-con .navbar{ display:grid !important; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; }
  .header-con .navbar-collapse{ display:flex !important; justify-content:center; flex:0 1 auto; }
  .header-con .navbar-nav{ margin:0 !important; }
  .header-con .header-contact{ justify-self:start; }
}

/* Kill the header/hero seam: continuous background, no hard glow clip at the top.
   The header sits ON the hero band instead of on a separate white slab. */
.home_banner_outer{ background:transparent; }
.hero-ed{ margin-top:-1px; }
.hero-ed::before{
  content:''; position:absolute; inset:-120px 0 auto 0; height:340px; z-index:0; pointer-events:none;
  background:radial-gradient(120% 100% at 78% 0%, rgba(243,114,49,.10), transparent 60%),
             radial-gradient(120% 100% at 12% 8%, rgba(21,77,90,.07), transparent 62%);
}

/* =============================================================
   SECTION 21 — NAV CENTER (absolute) + SEAMLESS HERO BG (override 20)
   ============================================================= */
@media (min-width:992px){
  .header-con .navbar{ display:flex !important; position:relative; align-items:center; justify-content:space-between; }
  .header-con .navbar-collapse{
    position:absolute !important; left:0; right:0; top:50%; transform:translateY(-50%);
    margin:0 auto; width:max-content; max-width:66%;
    display:flex !important; justify-content:center;
  }
  .header-con .navbar-nav{ margin:0 !important; }
  .header-con .navbar-brand,
  .header-con .header-contact{ position:relative; z-index:2; }
}

/* Seamless top: one continuous ambient background behind header + hero (no clipped band) */
.hero-ed::before{ display:none !important; }
.hero-ed{ margin-top:0; }
.hero-centered .hero-ed-glow{ display:none; }
.home_banner_outer{
  background:
    radial-gradient(58% 46% at 82% -6%, rgba(243,114,49,.12), transparent 60%),
    radial-gradient(52% 52% at 12% 16%, rgba(21,77,90,.06), transparent 62%),
    #ffffff !important;
}

/* =============================================================
   SECTION 22 — NAV: equal side zones so links sit dead-center
   (overrides the absolute approach in Section 21)
   ============================================================= */
@media (min-width:992px){
  .header-con .navbar{ display:flex !important; align-items:center; position:static; flex-wrap:nowrap; }
  .header-con .navbar-brand{ flex:1 1 0; order:0; }
  .header-con .navbar-collapse{
    position:static !important; transform:none !important; inset:auto !important;
    left:auto !important; right:auto !important; top:auto !important;
    flex:0 1 auto !important; width:auto !important; max-width:none !important; margin:0 !important;
    display:flex !important; justify-content:center; order:0;
  }
  .header-con .navbar-nav{ margin:0 !important; flex-wrap:nowrap; }
  .header-con .header-contact{ flex:1 1 0; display:flex !important; justify-content:flex-end; order:0; margin:0 !important; }
  .header-con .header-contact ul{ margin:0 !important; }
}

/* =============================================================
   SECTION 23 — DRAWER FOOTER (about+social+contact) + TOGGLER CENTERING
   ============================================================= */
.lux-drawer-foot{ display:none; }

@media (max-width:991px){
  /* toggler: perfectly centered bars, vertically aligned in the bar */
  .header-con .navbar{ align-items:center !important; }
  .header-con .navbar-toggler{ display:inline-flex !important; flex-direction:column; align-items:center !important; justify-content:center !important; padding:0 !important; }
  .header-con .navbar-toggler .navbar-toggler-icon{ display:block; width:24px; height:2px; margin:3px auto !important; }

  /* drawer becomes a column so the footer can sit at the bottom (no empty white space) */
  .header-con .navbar-collapse{ display:flex !important; flex-direction:column; }
  .header-con .navbar-collapse .navbar-nav{ flex:0 0 auto; width:100%; }

  .lux-drawer-foot{ display:block; margin-top:auto; padding-top:22px; border-top:1px solid var(--border--color); }
  .lux-drawer-foot .ldf-title{ display:block; font-family:'Thmanyah Serif Display',serif; font-weight:900; color:var(--black--color); font-size:19px; margin-bottom:6px; }
  .lux-drawer-foot .ldf-about{ color:var(--text--color); font-size:13.5px; line-height:1.8; margin:0 0 16px; }
  .lux-drawer-foot .ldf-social{ display:flex; gap:9px; margin-bottom:18px; }
  .lux-drawer-foot .ldf-social a{ width:40px; height:40px; border-radius:50%; background:var(--bg--color); color:var(--black--color); display:flex; align-items:center; justify-content:center; transition:.25s; text-decoration:none; font-size:15px; }
  .lux-drawer-foot .ldf-social a:hover{ background:var(--accent--strong); color:#fff; transform:translateY(-2px); }
  .lux-drawer-foot .ldf-cta{ display:flex; align-items:center; justify-content:center; gap:9px; background:var(--accent--strong); color:#fff; padding:13px 16px; border-radius:40px; font-weight:800; font-size:15px; text-decoration:none; margin-bottom:12px; box-shadow:0 12px 28px rgba(209,85,14,.30); }
  .lux-drawer-foot .ldf-tel{ display:block; text-align:center; color:var(--black--color); font-weight:800; text-decoration:none; direction:ltr; }
  /* footer fades in with the drawer */
  .header-con .navbar-collapse .lux-drawer-foot{ opacity:0; transform:translateY(10px); transition:opacity .5s ease .3s, transform .5s cubic-bezier(.2,.7,.2,1) .3s; }
  body.nav-open .header-con .navbar-collapse .lux-drawer-foot{ opacity:1; transform:none; }
  @media (prefers-reduced-motion:reduce){ .header-con .navbar-collapse .lux-drawer-foot{ opacity:1 !important; transform:none !important; } }
}

/* =============================================================
   SECTION 24 — DARK-BAND CONTRAST FIX + STAT POLISH (global)
   headings on teal bands were teal-on-teal (invisible)
   ============================================================= */
.bg-black h1, .bg-black h2, .bg-black h3, .bg-black h4, .bg-black h5,
.bg-black .heading-title-con h2, .about-us-con h2{ color:#fff !important; }
.bg-black .accent-text, .about-us-con .accent-text{ color:var(--accent--color) !important; }
.bg-black .special-text, .bg-black .special-text2,
.about-us-con .special-text, .about-us-con .special-text2{ color:var(--accent--color) !important; }
.bg-black p, .about-us-con .heading-title-con + *{ }

/* stat counters on the dark band */
.users-details-con .user-detail-box .counter,
.users-details-con .user-detail-box span{ color:#fff !important; }
.users-details-con .user-detail-box .alphabet{ color:var(--accent--color) !important; }
.users-details-con .user-detail-box p{ color:rgba(255,255,255,.72) !important; }
.users-details-con .user-detail-box:not(:last-child){ border-left:1px solid rgba(255,255,255,.2) !important; }

/* =============================================================
   SECTION 25 — AUDIT FIXES: chip/label contrast on light tints
   ============================================================= */
/* blog category pill: was #e85f22 on #fdeee5 (~3:1) -> darker burnt orange (~6.8:1) */
.post-cat{ color:#9a3d0a !important; }
/* single-blog inline post-cat (hardcoded) — same fix via attribute-independent rule */
.post-card .post-cat, .blog-article .post-cat, span.post-cat{ color:#9a3d0a !important; }

/* =============================================================
   SECTION 26 — ABOUT PAGE VISUAL ENHANCEMENT
   framed imagery + floating badge + icon value-list + stat cards
   ============================================================= */
/* framed image with ghost wordmark + floating experience badge */
.about-visual-x{ position:relative; display:inline-block; max-width:100%; }
.about-visual-x figure{ margin:0; border-radius:26px; overflow:hidden; box-shadow:0 34px 74px rgba(21,77,90,.20); position:relative; z-index:1; }
.about-visual-x figure img{ border-radius:26px; display:block; width:100%; }
.about-visual-x .avx-ghost{ position:absolute; top:-48px; right:-12px; font-family:'Thmanyah Serif Display',serif; font-weight:900; font-size:clamp(70px,9vw,132px); color:rgba(21,77,90,.06); z-index:0; line-height:1; pointer-events:none; }
.about-visual-x .avx-badge{ position:absolute; bottom:-22px; left:-18px; z-index:2; background:linear-gradient(150deg,#1b5a68,#0f363f); color:#fff; border-radius:18px; padding:16px 22px; box-shadow:0 20px 44px rgba(18,63,74,.32); display:flex; flex-direction:column; }
.about-visual-x .avx-badge strong{ font-family:'Thmanyah Serif Display',serif; font-weight:900; font-size:34px; line-height:1; direction:ltr; }
.about-visual-x .avx-badge span{ font-size:13px; color:rgba(255,255,255,.82); margin-top:4px; }

/* general framing for the other about images */
.services-con .who-we-are-img-con figure{ border-radius:24px; overflow:hidden; box-shadow:0 30px 66px rgba(21,77,90,.16); }
.services-con .who-we-are-img-con figure img{ border-radius:24px; display:block; width:100%; }

/* icon value-list (was bare fa-circle bullets) */
.services-content-con ul.list-unstyled li{ position:relative; padding:2px 38px 2px 0; margin-bottom:15px; color:var(--text--color); line-height:1.85; }
.services-content-con ul.list-unstyled li i.fa-circle{ position:absolute; right:0; top:4px; width:24px; height:24px; font-size:7px; color:var(--accent--strong); background:var(--accent--family--color); border-radius:8px; display:flex; align-items:center; justify-content:center; }

/* section heading sizes on about */
.services-content-con h4{ font-family:'Thmanyah Serif Display',serif; font-weight:900; color:var(--black--color); font-size:clamp(26px,3vw,34px); line-height:1.25; margin-bottom:18px; }

/* stat "cards" on the dark band */
.about-us-con .users-details-con{ gap:16px; }
.about-us-con .users-details-con .user-detail-box{ background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.1) !important; border-radius:18px; padding:26px 18px !important; text-align:center; flex:1 1 160px; transition:.4s cubic-bezier(.2,.7,.2,1); }
.about-us-con .users-details-con .user-detail-box:hover{ background:rgba(243,114,49,.1); border-color:rgba(243,114,49,.4) !important; transform:translateY(-5px); }
.about-us-con .users-details-con .user-detail-box:not(:last-child){ border-left:1px solid rgba(255,255,255,.1) !important; }
@media (max-width:575px){ .about-visual-x .avx-badge{ left:auto; right:12px; bottom:-18px; padding:12px 16px; } .about-visual-x .avx-badge strong{ font-size:26px; } }

/* =============================================================
   SECTION 27 — SERVICE-DETAIL PAGE VISUAL ENHANCEMENT (6 pages)
   ============================================================= */
.service-detail-content figure{ margin:0 0 28px; border-radius:22px; overflow:hidden; box-shadow:0 28px 60px rgba(21,77,90,.16); }
.service-detail-content figure img{ width:100%; display:block; border-radius:22px; }
.service-detail-content h2{ font-family:'Thmanyah Serif Display',serif !important; font-size:clamp(28px,3.2vw,40px) !important; font-weight:900 !important; }
.service-detail-content .intro{ font-size:19px; line-height:1.95; color:var(--black--color); font-weight:500; margin-bottom:28px; }
.service-detail-content h3{ font-family:'Thmanyah Serif Display',serif; font-weight:800; color:var(--black--color); font-size:24px; margin:36px 0 14px; position:relative; padding-right:18px; }
.service-detail-content h3::before{ content:''; position:absolute; right:0; top:5px; bottom:5px; width:5px; border-radius:3px; background:var(--accent--strong); }

/* numbered step cards */
.service-steps{ list-style:none; padding:0; margin:26px 0; }
.service-steps li{ position:relative; display:flex; gap:16px; align-items:flex-start; padding:18px 20px; margin-bottom:12px; background:#fff; border:1px solid var(--border--color); border-radius:16px; box-shadow:0 8px 22px rgba(21,77,90,.06); color:var(--text--color); line-height:1.85; transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s; }
.service-steps li:hover{ transform:translateX(-5px); border-color:rgba(243,114,49,.4); box-shadow:0 16px 36px rgba(21,77,90,.1); }
.service-steps li .num{ flex:0 0 42px; width:42px; height:42px; border-radius:12px; background:var(--accent--family--color); color:var(--accent--strong); font-family:'Thmanyah Serif Display',serif; font-weight:900; font-size:19px; display:flex; align-items:center; justify-content:center; }

/* modern sidebar */
@media (min-width:992px){ .service-sidebar{ position:sticky; top:100px; } }
.service-sidebar .sidebar-box{ background:#fff; border:1px solid var(--border--color); border-radius:20px; padding:26px 24px; box-shadow:0 12px 30px rgba(21,77,90,.07); margin-bottom:22px; }
.service-sidebar .sidebar-box h5{ font-family:'Thmanyah Serif Display',serif; font-weight:800; color:var(--black--color); font-size:20px; margin-bottom:16px; }
.service-sidebar .service-list{ list-style:none; padding:0; margin:0; }
.service-sidebar .service-list li{ margin-bottom:7px; border:0 !important; }
.service-sidebar .service-list li a{ display:flex !important; align-items:center; justify-content:space-between; padding:12px 15px; border-radius:12px; color:var(--text--color); text-decoration:none; font-weight:600; transition:.25s; border:0 !important; }
.service-sidebar .service-list li a::after{ content:"\f104"; font-family:"Font Awesome 6 Free"; font-weight:900; color:var(--accent--strong); opacity:.55; transition:.25s; }
.service-sidebar .service-list li a:hover{ background:var(--accent--family--color); color:var(--accent--strong); }
.service-sidebar .service-list li a:hover::after{ transform:translateX(-4px); opacity:1; }
.service-sidebar .service-list li a.active{ background:var(--black--color); color:#fff; }
.service-sidebar .service-list li a.active::after{ color:#fff; opacity:1; }
.service-sidebar .sidebar-cta{ background:linear-gradient(150deg,#1b5a68,#0f363f); border-radius:20px; padding:28px 24px; text-align:center; box-shadow:0 20px 44px rgba(18,63,74,.24); }
.service-sidebar .sidebar-cta h4{ font-family:'Thmanyah Serif Display',serif; color:#fff !important; font-weight:900; font-size:22px; margin-bottom:10px; }
.service-sidebar .sidebar-cta p{ color:rgba(255,255,255,.8); margin-bottom:18px; line-height:1.8; }
.service-sidebar .sidebar-cta .elementary_btn{ background:var(--accent--strong) !important; }

/* =====================================================================
   SECTION 28 — ABOUT PAGE, bespoke editorial redesign
   Components here (.abt-*) are unique to about.html so the page reads
   as designed rather than reusing the shared template sections.
   ===================================================================== */

/* ---- shared rhythm ---- */
.abt-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-weight:800; font-size:14px; letter-spacing:.02em;
  color:var(--accent--strong); margin-bottom:18px; }
.abt-eyebrow::before{ content:''; width:26px; height:2px; border-radius:2px; background:var(--accent--color); }

/* ---- 1. MANIFESTO / STORY ---- */
.abt-manifesto{ position:relative; overflow:hidden; }
.abt-manifesto .row{ align-items:center; }
.abt-mf-copy{ max-width:640px; }
.abt-mf-copy h2{ font-family:'Thmanyah Serif Display',serif; font-weight:900; color:var(--black--color);
  font-size:clamp(30px,4vw,52px); line-height:1.18; letter-spacing:-.02em; margin:0 0 22px; text-wrap:balance; }
.abt-mf-copy h2 .u{ position:relative; white-space:nowrap; }
.abt-mf-copy h2 .u::after{ content:''; position:absolute; right:0; left:0; bottom:.06em; height:.34em;
  background:rgba(243,114,49,.28); border-radius:3px; z-index:-1; }
.abt-mf-copy p{ color:#3f4b4e; font-size:18px; line-height:1.95; margin:0 0 16px; max-width:60ch; }
.abt-mf-sign{ display:flex; align-items:center; gap:14px; margin-top:26px; padding-top:22px; border-top:1px solid var(--border--color); }
.abt-mf-sign .sig{ font-family:'Thmanyah Serif Display',serif; font-weight:800; font-size:26px; color:var(--black--color); line-height:1; }
.abt-mf-sign .who{ font-size:14px; color:var(--text--color2); line-height:1.5; }
.abt-mf-sign .who b{ color:var(--black--color); display:block; font-weight:800; }

.abt-mf-visual{ position:relative; padding:26px 26px 0; }
.abt-mf-visual .frame{ position:relative; border-radius:26px; overflow:hidden; box-shadow:0 34px 70px rgba(21,77,90,.20);
  aspect-ratio:4/5; z-index:2; }
.abt-mf-visual .frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.abt-mf-ghost{ position:absolute; top:-8px; left:-6px; font-family:'Thmanyah Serif Display',serif; font-weight:900;
  font-size:clamp(90px,12vw,150px); color:rgba(21,77,90,.06); line-height:.8; z-index:1; pointer-events:none; user-select:none; }
.abt-mf-chip{ position:absolute; z-index:3; background:#fff; border-radius:18px; padding:16px 20px;
  box-shadow:0 20px 44px rgba(21,77,90,.16); display:flex; align-items:center; gap:14px; }
.abt-mf-chip.one{ bottom:34px; right:-14px; }
.abt-mf-chip .n{ font-family:'Thmanyah Serif Display',serif; font-weight:900; font-size:34px; line-height:1; color:var(--accent--strong); }
.abt-mf-chip .l{ font-size:13px; color:var(--text--color); line-height:1.4; font-weight:600; }

/* ---- 1b. MANIFESTO · centered (no image) ---- */
.abt-manifesto--center{ text-align:center; }
.abt-manifesto--center .abt-mf-ghost{ top:6px; right:auto; left:50%; transform:translateX(-50%); }
.abt-mf-copy--center{ max-width:820px; margin:0 auto; position:relative; z-index:2; }
.abt-mf-copy--center .abt-eyebrow{ justify-content:center; }
.abt-mf-copy--center p{ margin-left:auto; margin-right:auto; }
.abt-mf-sign--center{ justify-content:center; text-align:right; }

/* ---- 1c. CREATIVE · "under one roof" convergence ---- */
.abt-unite{ position:relative; z-index:2; max-width:760px; margin:56px auto 0;
  display:flex; flex-direction:column; align-items:center; }
.abt-unite-hub{ display:inline-flex; align-items:center; gap:12px; padding:14px 26px; border-radius:44px;
  background:var(--black--color); color:#fff; font-weight:800; font-size:17px; line-height:1;
  box-shadow:0 20px 44px rgba(21,77,90,.22); position:relative; z-index:2; }
.abt-unite-hub i{ color:var(--accent--color); font-size:19px; }
.abt-unite-bus{ position:relative; width:min(560px,86%); height:2px; margin:26px 0 0; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--accent--color) 18%, var(--accent--color) 82%, transparent); }
.abt-unite-bus::before{ content:''; position:absolute; top:-24px; left:50%; transform:translateX(-50%);
  width:2px; height:24px; background:linear-gradient(var(--black--color), var(--accent--color)); }
.abt-unite-bus .pulse{ position:absolute; top:50%; width:9px; height:9px; border-radius:50%;
  background:var(--accent--strong); box-shadow:0 0 0 5px rgba(243,114,49,.16);
  transform:translate(-50%,-50%); animation:abtBus 3.6s ease-in-out infinite; }
@keyframes abtBus{ 0%{ left:7%; } 50%{ left:93%; } 100%{ left:7%; } }
.abt-unite-spokes{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; width:100%; margin-top:26px; }
.abt-spoke{ position:relative; display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:22px 12px 20px; background:#fff; border:1px solid var(--border--color); border-radius:20px;
  box-shadow:0 14px 34px rgba(21,77,90,.08); transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.abt-spoke::before{ content:''; position:absolute; top:-26px; right:50%; transform:translateX(50%);
  width:2px; height:26px; background:linear-gradient(var(--accent--color), rgba(243,114,49,.25)); }
.abt-spoke:hover{ transform:translateY(-6px); border-color:rgba(243,114,49,.4); box-shadow:0 22px 46px rgba(21,77,90,.16); }
.abt-spoke .ic{ width:52px; height:52px; border-radius:15px; display:flex; align-items:center; justify-content:center;
  background:rgba(243,114,49,.10); color:var(--accent--strong); font-size:21px; }
.abt-spoke b{ font-weight:800; font-size:16px; color:var(--black--color); }

@media(max-width:767px){
  .abt-unite-spokes{ grid-template-columns:repeat(2,1fr); }
  .abt-manifesto--center .abt-mf-ghost{ font-size:clamp(72px,22vw,110px); }
}

/* ---- 2. MISSION & VISION — teal drenched ---- */
.abt-mv{ position:relative; overflow:hidden; background:var(--black--color); }
.abt-mv::before{ content:''; position:absolute; top:-30%; right:-10%; width:60%; height:150%;
  background:radial-gradient(closest-side, rgba(243,114,49,.16), transparent 70%); pointer-events:none; }
.abt-mv .abt-mv-grid{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0; }
.abt-mv-cell{ padding:14px 46px; }
.abt-mv-cell:first-child{ border-left:1px solid rgba(255,255,255,.14); padding-right:0; }
.abt-mv-cell:last-child{ padding-left:0; }
.abt-mv-ic{ width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); color:var(--accent--color); font-size:22px; margin-bottom:20px; }
.abt-mv-cell .lbl{ display:block; color:var(--accent--color); font-weight:800; font-size:15px; margin-bottom:12px; }
.abt-mv-cell h3{ font-family:'Thmanyah Serif Display',serif; color:#fff; font-weight:800; font-size:clamp(22px,2.4vw,30px);
  line-height:1.4; margin:0; }
.abt-mv-cell h3 em{ font-style:normal; color:var(--accent--color); }
@media(max-width:767px){
  .abt-mv .abt-mv-grid{ grid-template-columns:1fr; gap:34px; }
  .abt-mv-cell{ padding:0 !important; }
  .abt-mv-cell:first-child{ border-left:0; border-bottom:1px solid rgba(255,255,255,.14); padding-bottom:34px !important; }
}

/* ---- 3. VALUES — editorial numbered rows ---- */
.abt-values-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 60px; margin-top:22px; }
.abt-value{ position:relative; display:flex; gap:22px; padding:30px 0; border-top:1px solid var(--border--color); }
.abt-value .idx{ font-family:'Thmanyah Serif Display',serif; font-weight:900; font-size:40px; line-height:1;
  color:var(--border--color); flex:0 0 auto; transition:color .4s ease; }
.abt-value h4{ font-family:'Thmanyah Serif Display',serif; font-weight:800; color:var(--black--color); font-size:22px; margin:0 0 8px; }
.abt-value p{ color:var(--text--color); line-height:1.8; margin:0; font-size:15.5px; }
.abt-value:hover .idx{ color:var(--accent--strong); }
@media(max-width:767px){ .abt-values-grid{ grid-template-columns:1fr; gap:0; } }

/* ---- 4. DIFFERENTIATORS — icon rows beside image ---- */
.abt-diff .row{ align-items:center; }
.abt-diff-list{ list-style:none; padding:0; margin:22px 0 0; }
.abt-diff-list li{ display:flex; gap:18px; align-items:flex-start; padding:18px 0; border-bottom:1px dashed var(--border--color); }
.abt-diff-list li:last-child{ border-bottom:0; }
.abt-diff-list .di{ flex:0 0 48px; width:48px; height:48px; border-radius:14px; background:var(--accent--family--color);
  color:var(--accent--strong); display:flex; align-items:center; justify-content:center; font-size:19px; }
.abt-diff-list .dt{ font-weight:800; color:var(--black--color); display:block; margin-bottom:3px; font-size:17px; }
.abt-diff-list .dd{ color:var(--text--color); line-height:1.75; font-size:15px; }
.abt-diff-visual{ position:relative; border-radius:24px; overflow:hidden; box-shadow:0 30px 62px rgba(21,77,90,.18); }
.abt-diff-visual img{ width:100%; display:block; }
.abt-diff-visual .tag{ position:absolute; inset:auto 22px 22px auto; background:rgba(21,77,90,.92); color:#fff;
  font-weight:700; font-size:14px; padding:11px 18px; border-radius:12px; backdrop-filter:blur(4px); }

/* ---- 5. STATS — restyled dark strip ---- */
.abt-stats{ position:relative; overflow:hidden; background:var(--black--color); }
.abt-stats::before{ content:''; position:absolute; inset:0; background:
  radial-gradient(closest-side at 15% 20%, rgba(243,114,49,.14), transparent 60%),
  radial-gradient(closest-side at 85% 90%, rgba(255,255,255,.05), transparent 60%); pointer-events:none; }
.abt-stats-grid{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:0; text-align:center; }
.abt-stat{ padding:14px 20px; border-left:1px solid rgba(255,255,255,.12); }
.abt-stat:last-child{ border-left:0; }
.abt-stat .big{ font-family:'Thmanyah Serif Display',serif; font-weight:900; color:#fff; font-size:clamp(40px,5vw,62px); line-height:1; }
.abt-stat .big .counter{ font:inherit; color:inherit; }
.abt-stat .plus{ color:var(--accent--color); }
.abt-stat p{ color:rgba(255,255,255,.82); margin:12px 0 0; font-weight:600; font-size:15px; }
@media(max-width:767px){
  .abt-stats-grid{ grid-template-columns:1fr 1fr; gap:30px 0; }
  .abt-stat{ border-left:0; }
  .abt-stat:nth-child(odd){ border-left:1px solid rgba(255,255,255,.12); }
}

/* =====================================================================
   SECTION 29 — TEAM cards, creative hover-reveal treatment
   Photo-led card; teal scrim + social icons reveal over the image on
   hover; clean name/role body with an expanding accent underline.
   Cascades to the team preview on about.html / index.html too.
   ===================================================================== */
.team-con .team-box{ position:relative; padding:0; border:1px solid var(--border--color); border-radius:22px;
  overflow:hidden; background:#fff; box-shadow:0 10px 30px rgba(21,77,90,.06);
  transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .4s; }
.team-con .team-box:hover{ transform:translateY(-8px); box-shadow:0 30px 60px rgba(21,77,90,.16); border-color:#d5dde0; }
.team-con .team-box figure{ position:relative; margin:0 !important; border-radius:0; overflow:hidden; }
.team-con .team-box figure img{ width:100%; height:320px; object-fit:cover; object-position:top center;
  border-radius:0; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.team-con .team-box:hover figure img{ transform:scale(1.06); }
.team-con .team-box figure::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(15,54,63,.9), rgba(15,54,63,.12) 46%, transparent 66%);
  opacity:0; transition:opacity .45s ease; }
.team-con .team-box:hover figure::after{ opacity:1; }

/* social row — revealed over the bottom of the photo on hover */
.team-con .team-box ul{ position:absolute; left:16px; right:16px; top:0; height:320px; margin:0; padding:0 0 22px;
  display:flex; align-items:flex-end; justify-content:center; gap:10px; z-index:3;
  opacity:0; transform:translateY(12px); transition:opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1);
  pointer-events:none; }
.team-con .team-box:hover ul{ opacity:1; transform:none; pointer-events:auto; }
.team-con .team-box ul li{ display:inline-block; margin:0 !important; }
.team-con .team-box ul li a{ width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.4); color:#fff; backdrop-filter:blur(6px);
  display:inline-flex; align-items:center; justify-content:center; font-size:15px; text-decoration:none;
  transition:.3s; }
.team-con .team-box ul li a:hover{ background:var(--accent--color); border-color:var(--accent--color); color:#fff; transform:translateY(-3px); }

/* name / role body */
.team-con .team-box h6{ margin:22px 18px 0; color:var(--black--color); font-family:'Thmanyah Serif Display',serif;
  font-weight:800; font-size:19px; position:relative; display:block; }
.team-con .team-box h6::after{ content:''; display:block; width:52px; height:3px; border-radius:3px;
  background:var(--accent--color); margin:10px auto 0; transform:scaleX(.5); transform-origin:center; transition:transform .4s ease; }
.team-con .team-box:hover h6::after{ transform:scaleX(1); }
.team-con .team-box .designation{ display:block; margin:8px 18px 22px !important; color:var(--text--color2) !important;
  font-size:14px; font-weight:600; }

/* touch devices: no hover — keep the photo clean and drop icons into the body */
@media (hover:none){
  .team-con .team-box figure::after{ opacity:0; }
  .team-con .team-box ul{ position:static; height:auto; opacity:1; transform:none; pointer-events:auto;
    padding:0 0 22px; }
  .team-con .team-box ul li a{ background:var(--bg--color); border:0; color:var(--black--color); backdrop-filter:none; width:38px; height:38px; }
  .team-con .team-box ul li a:hover{ background:var(--accent--color); color:#fff; }
}

/* editorial group heading */
.team-group-title{ text-align:center; margin-bottom:44px; }
.team-group-title h3{ font-family:'Thmanyah Serif Display',serif; }

/* =====================================================================
   SECTION 30 — PORTFOLIO filter + PROJECT-DETAIL pages
   ===================================================================== */

/* ---- filter chips ---- */
.pf-filter{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:6px 0 44px; }
.pf-chip{ appearance:none; border:1px solid var(--border--color); background:#fff; color:var(--black--color);
  font-family:inherit; font-weight:700; font-size:15px; padding:11px 22px; border-radius:999px; cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.7,.2,1), background .25s, color .25s, border-color .25s, box-shadow .25s; }
.pf-chip:hover{ border-color:var(--accent--color); color:var(--accent--strong); transform:translateY(-2px); }
.pf-chip.is-active{ background:var(--black--color); border-color:var(--black--color); color:#fff; box-shadow:0 12px 26px rgba(21,77,90,.2); }

/* filtered-out cards */
.pf-grid .pf-item{ transition:opacity .4s ease, transform .4s cubic-bezier(.2,.7,.2,1); }
.pf-grid .pf-item.is-hidden{ display:none; }
.pf-empty{ text-align:center; color:var(--text--color2); font-weight:600; padding:40px 0; }

/* =====================================================================
   SECTION 31 — PACKAGES page UI enhancement
   Package icon + value subtitle, check-chip bullets, and a genuinely
   elevated featured card with a floating "الأكثر طلبًا" ribbon.
   ===================================================================== */
.packages-con .package-box{ position:relative; overflow:visible; }
.packages-con .package-box:hover{ transform:translateY(-8px); }

/* icon + subtitle */
.package-box .pkg-ic{ width:60px; height:60px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background:var(--accent--family--color); color:var(--accent--strong); font-size:24px; margin-bottom:20px; }
.package-box .pkg-sub{ color:var(--text--color2); font-size:15px; line-height:1.7; margin:12px 0 0; }
.package-box .package-head{ display:flex; flex-direction:column; align-items:flex-start; }
.package-box .package-label{ order:-1; }

/* check-chip bullets */
.package-features li{ padding-right:34px; }
.package-features li i{ right:0; top:3px; width:21px; height:21px; border-radius:50%;
  background:var(--accent--family--color); color:var(--accent--strong); font-size:11px;
  display:flex !important; align-items:center; justify-content:center; }

/* featured elevation + ribbon + glow */
.packages-con .package-box.featured{ transform:translateY(-16px); box-shadow:0 42px 84px rgba(15,54,63,.30); z-index:2; }
.packages-con .package-box.featured:hover{ transform:translateY(-22px); }
@media (min-width:992px){
  .packages-con .package-box.featured{ transform:translateY(-16px) scale(1.03); }
  .packages-con .package-box.featured:hover{ transform:translateY(-22px) scale(1.03); }
}
.package-box.featured::before{ content:''; position:absolute; inset:0; border-radius:22px; z-index:0; pointer-events:none;
  background:radial-gradient(120% 55% at 50% 0%, rgba(243,114,49,.22), transparent 62%); }
.package-box.featured > *{ position:relative; z-index:1; }
.package-box.featured .pkg-ribbon{ position:absolute; top:-15px; right:50%; left:auto; transform:translateX(50%); width:auto; z-index:5; white-space:nowrap;
  background:var(--accent--strong); color:#fff; font-weight:800; font-size:13px; letter-spacing:.02em;
  padding:9px 24px; border-radius:999px; box-shadow:0 14px 30px rgba(209,85,14,.42); }
.package-box.featured .pkg-ic{ background:rgba(255,255,255,.12); color:var(--accent--color); }
.package-box.featured .pkg-sub{ color:rgba(255,255,255,.74); }
.package-box.featured .package-features li i{ background:rgba(255,255,255,.15); color:var(--accent--color); }

@media (max-width:991px){
  .packages-con .package-box.featured,
  .packages-con .package-box.featured:hover{ transform:translateY(-8px); }
}

/* =====================================================================
   SECTION 32 — مساعد شُهرة  (SHOHRAH assistant chat widget)
   Floating scripted assistant: quick-reply flows, project-brief wizard,
   book-a-call, WhatsApp handoff. DOM injected by shohrah-assistant.js.
   ===================================================================== */
.sha-launch{ position:fixed; left:24px; bottom:26px; z-index:1000; width:62px; height:62px; border:0; border-radius:50%;
  background:linear-gradient(150deg,#1e6472 0%,#124049 55%,#0d323b 100%); color:#fff; font-size:24px; cursor:pointer;
  box-shadow:0 10px 22px rgba(15,54,63,.26), 0 20px 46px rgba(15,54,63,.30), 0 0 0 1px rgba(243,114,49,.10); display:flex; align-items:center; justify-content:center;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
.sha-launch:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 16px 30px rgba(15,54,63,.30), 0 28px 58px rgba(15,54,63,.34), 0 0 0 1px rgba(243,114,49,.18); }
.sha-launch .fa-xmark{ display:none; }
body.sha-open .sha-launch .fa-comment-dots{ display:none; }
body.sha-open .sha-launch .fa-xmark{ display:inline-block; }
.sha-launch::after{ content:''; position:absolute; inset:0; border-radius:50%; border:1.5px solid rgba(243,114,49,.45);
  animation:shaPulse 3.2s cubic-bezier(.22,.61,.36,1) infinite; }
body.sha-open .sha-launch::after{ display:none; }
@keyframes shaPulse{ 0%{ transform:scale(1); opacity:.5 } 70%{ opacity:0 } 100%{ transform:scale(1.85); opacity:0 } }
.sha-launch .sha-dot{ position:absolute; top:2px; right:2px; width:14px; height:14px; border-radius:50%;
  background:var(--accent--strong); border:2px solid #fff; }

.sha-panel{ position:fixed; left:24px; bottom:100px; z-index:1001; width:374px; max-width:calc(100vw - 32px);
  height:560px; max-height:calc(100vh - 130px); background:#fff; border-radius:22px; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:0 12px 28px rgba(15,54,63,.14), 0 40px 90px rgba(15,54,63,.30); border:1px solid var(--border--color);
  opacity:0; transform:translateY(16px) scale(.98); pointer-events:none;
  transition:opacity .34s ease, transform .42s cubic-bezier(.16,1,.3,1); }
body.sha-open .sha-panel{ opacity:1; transform:none; pointer-events:auto; }

.sha-head{ background:linear-gradient(135deg,#1e6a78 0%,#134450 60%,#0f363f 100%); color:#fff; padding:15px 18px; display:flex; align-items:center; gap:11px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 6px 18px rgba(15,54,63,.10); }
.sha-head .av{ width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; font-size:19px; flex:0 0 auto; }
.sha-head .meta{ flex:1 1 auto; min-width:0; }
.sha-head .nm{ font-family:'Thmanyah Serif Display',serif; font-weight:800; font-size:17px; line-height:1.2; }
.sha-head .st{ font-size:12px; color:rgba(255,255,255,.8); display:flex; align-items:center; gap:6px; margin-top:2px; }
.sha-head .st::before{ content:''; width:8px; height:8px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 3px rgba(74,222,128,.25); }
.sha-head .x{ background:rgba(255,255,255,.12); border:0; color:#fff; width:34px; height:34px; border-radius:10px; cursor:pointer; font-size:15px; transition:.25s; }
.sha-head .x:hover{ background:rgba(255,255,255,.25); }

.sha-body{ flex:1 1 auto; overflow-y:auto; padding:20px 16px 8px; background:var(--bg--color);
  scrollbar-width:thin; scrollbar-color:rgba(21,77,90,.24) transparent; }
.sha-body::-webkit-scrollbar{ width:6px; }
.sha-body::-webkit-scrollbar-track{ background:transparent; }
.sha-body::-webkit-scrollbar-thumb{ background:rgba(21,77,90,.22); border-radius:6px; }
.sha-body::-webkit-scrollbar-thumb:hover{ background:rgba(21,77,90,.38); }
.sha-row{ display:flex; margin-bottom:12px; }
.sha-row.bot{ justify-content:flex-start; } .sha-row.user{ justify-content:flex-end; }
.sha-msg{ max-width:82%; padding:12px 16px; border-radius:18px; font-size:14.5px; line-height:1.75; white-space:pre-wrap; }
.sha-row.bot .sha-msg{ background:#fff; color:#2c3a3d; border:1px solid var(--border--color); border-top-right-radius:6px; box-shadow:0 4px 16px rgba(21,77,90,.07); }
.sha-row.user .sha-msg{ background:linear-gradient(160deg,#1a5966,#154d5a); color:#fff; border:1px solid rgba(255,255,255,.06); border-top-left-radius:6px; box-shadow:0 6px 16px rgba(21,77,90,.18); }
.sha-msg a{ color:var(--accent--strong); font-weight:700; text-decoration:none; }
.sha-summary{ background:#fff; border:1px dashed var(--accent--color); border-radius:14px; padding:12px 14px; font-size:13.5px; line-height:1.9; color:#2c3a3d; }
.sha-summary b{ color:var(--black--color); }
/* secondary aside inside a bot bubble (e.g. "or call us directly on …") */
.sha-note{ display:inline-block; margin-top:6px; font-size:12.5px; color:var(--text--color2); }

.sha-typing{ display:inline-flex; gap:4px; padding:14px 16px; }
.sha-typing span{ width:7px; height:7px; border-radius:50%; background:rgba(21,77,90,.38); animation:shaBlink 1.2s infinite; }
.sha-typing span:nth-child(2){ animation-delay:.2s } .sha-typing span:nth-child(3){ animation-delay:.4s }
@keyframes shaBlink{ 0%,60%,100%{ opacity:.3; transform:translateY(0) } 30%{ opacity:1; transform:translateY(-3px) } }

.sha-quick{ display:flex; flex-wrap:wrap; gap:8px; padding:2px 2px 14px; }
.sha-chip{ appearance:none; border:1px solid var(--border--color); background:#fff; color:var(--black--color);
  font-family:inherit; font-weight:700; font-size:13.5px; padding:9px 15px; border-radius:999px; cursor:pointer;
  box-shadow:0 1px 2px rgba(21,77,90,.05);
  transition:transform .2s, background .2s, color .2s, border-color .2s, box-shadow .2s; }
.sha-chip:hover{ background:var(--accent--family--color); color:var(--accent--strong); border-color:var(--accent--color); transform:translateY(-2px); box-shadow:0 8px 18px rgba(243,114,49,.16); }
.sha-chip:active{ transform:translateY(0); box-shadow:0 2px 6px rgba(21,77,90,.12); }
.sha-chip.primary{ background:var(--accent--strong); color:#fff; border-color:var(--accent--strong); box-shadow:0 6px 16px rgba(209,85,14,.24); }
.sha-chip.primary:hover{ filter:brightness(1.06); color:#fff; box-shadow:0 10px 22px rgba(209,85,14,.30); }
.sha-chip.primary:active{ transform:translateY(0); box-shadow:0 3px 10px rgba(209,85,14,.26); }

.sha-foot{ display:flex; align-items:center; gap:8px; padding:12px 14px; border-top:1px solid var(--border--color); background:#fff; }
.sha-foot input{ flex:1 1 auto; border:1px solid var(--border--color); border-radius:999px; padding:11px 16px; font-family:inherit;
  font-size:14px; outline:none; transition:border-color .25s, box-shadow .25s, background .25s; background:var(--bg--color); color:#2c3a3d; }
.sha-foot input:focus{ border-color:var(--accent--color); background:#fff; box-shadow:0 0 0 3px rgba(243,114,49,.14); }
.sha-foot button{ flex:0 0 auto; width:42px; height:42px; border:0; border-radius:50%; background:var(--accent--strong); color:#fff;
  cursor:pointer; font-size:15px; box-shadow:0 6px 16px rgba(209,85,14,.28); transition:transform .2s, filter .2s, box-shadow .2s; display:flex; align-items:center; justify-content:center; }
.sha-foot button:hover{ transform:scale(1.06); filter:brightness(1.06); box-shadow:0 10px 22px rgba(209,85,14,.34); }
.sha-foot button:active{ transform:scale(.98); box-shadow:0 4px 12px rgba(209,85,14,.26); }

@media (max-width:480px){
  .sha-panel{ left:8px; right:8px; width:auto; bottom:92px;
    height:calc(100vh - 120px); height:calc(100dvh - 120px); max-height:none; }
  .sha-launch{ left:16px; bottom:18px; }
}
@media (prefers-reduced-motion: reduce){
  .sha-launch::after{ animation:none; display:none; }
  .sha-panel, .sha-launch, .sha-chip, .sha-foot button, .sha-foot input{ transition:opacity .2s ease; }
  .sha-typing span{ animation:none; }
}

/* =====================================================================
   SECTION 33 — navbar even spacing (desktop)
   Inter-item spacing driven by a single flex `gap` (always whitespace),
   symmetric pill padding, and a tightened dropdown caret so every item
   is evenly spaced regardless of text width or active/hover background.
   ===================================================================== */
@media (min-width:992px){
  .header-con .navbar-nav{ display:flex !important; align-items:center; gap:4px; }
  .header-con .navbar-nav .nav-item{ margin:0 !important; }
  .header-con .navbar-nav .nav-link{ margin:0 !important; padding:9px 16px !important; }
  .header-con .navbar-nav .nav-caret{ margin-right:6px !important; }
}

/* =====================================================================
   SECTION 34 — PORTFOLIO + BLOG: even grid, working filter, creative cards
   Both grids use the .pf-* filter machinery (shared JS). Fixes the filter
   (Bootstrap .d-flex !important was overriding display:none) and replaces
   float/col spacing with a real CSS grid gap.
   ===================================================================== */
.pf-grid{ display:grid !important; grid-template-columns:repeat(3,1fr); gap:28px; margin:0 0 6px; }
.pf-grid > .pf-item{ display:flex !important; width:auto !important; max-width:none !important;
  flex:0 1 auto !important; padding:0 !important; margin:0 !important;
  animation:pfIn .55s cubic-bezier(.2,.7,.2,1) both; }
.pf-grid > .pf-item.is-hidden{ display:none !important; }
@keyframes pfIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
@media (max-width:991px){ .pf-grid{ grid-template-columns:repeat(2,1fr); gap:22px; } }
@media (max-width:575px){ .pf-grid{ grid-template-columns:1fr; gap:20px; } }

/* filter bar polish (portfolio + blog) */
.pf-filter{ margin-bottom:40px; }
.pf-chip{ box-shadow:0 4px 14px rgba(21,77,90,.05); }

/* --- blog post card: richer, with an accent top rule on hover --- */
.pf-grid .post-card{ border-radius:22px; position:relative; }
.pf-grid .post-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; z-index:4;
  background:linear-gradient(90deg,var(--accent--color),var(--accent--strong));
  transform:scaleX(0); transform-origin:right; transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.pf-grid .post-card:hover::before{ transform:scaleX(1); }
.pf-grid .post-card figure img{ height:230px; }
.pf-grid .post-card .post-body{ padding:24px 24px 26px; }
.pf-grid .post-card h5{ font-family:'Thmanyah Serif Display',serif; font-weight:800; line-height:1.5; margin:0 0 10px; }
.pf-grid .post-card h5 a{ color:var(--black--color); text-decoration:none; transition:color .25s; }
.pf-grid .post-card:hover h5 a{ color:var(--accent--strong); }
.pf-grid .post-card .read-link{ margin-top:auto; align-self:flex-start; color:var(--accent--strong); font-weight:800; text-decoration:none; display:inline-flex; align-items:center; gap:8px; }
.pf-grid .post-card .read-link i{ transition:transform .3s ease; }
.pf-grid .post-card:hover .read-link i{ transform:translateX(-5px); }

/* =====================================================================
   SECTION 36 — شهير : mascot assistant (right corner) + expression stickers
   Moves the assistant to the RIGHT corner as an avatar launcher with a
   greeting bubble + voice, and relocates the call pill to the LEFT so the
   two floating actions never collide.
   ===================================================================== */

/* --- relocate the call pill to the LEFT (Shaheer now owns the right) --- */
.lux-call-pill{ right:auto !important; left:26px !important; }
@media (max-width:575px){ .lux-call-pill{ right:auto !important; left:16px !important; } }

/* --- launcher → right corner, avatar face --- */
.sha-launch{ left:auto !important; right:24px; width:66px; height:66px; padding:0; overflow:visible;
  border:2px solid #fff; }
.sha-launch .sha-av-img{ width:100%; height:100%; border-radius:50%; object-fit:cover; object-position:50% 18%;
  display:block; }
body.sha-open .sha-launch .sha-av-img{ display:none; }
body.sha-open .sha-launch{ background:linear-gradient(150deg,#1b5a68,#0f363f); }
@media (max-width:480px){ .sha-launch{ left:auto !important; right:16px; } }

/* --- panel opens above the launcher on the right (desktop); mobile stays full-width --- */
@media (min-width:481px){ .sha-panel{ left:auto; right:24px; } }

/* --- greeting bubble: pops in to the LEFT of the launcher --- */
.sha-hello{ position:fixed; right:94px; bottom:34px; z-index:1000; max-width:244px;
  display:flex; align-items:center; gap:11px; background:#fff; border:1px solid var(--border--color);
  border-radius:18px; padding:11px 13px; box-shadow:0 8px 20px rgba(15,54,63,.12), 0 22px 48px rgba(15,54,63,.22);
  opacity:0; transform:translateX(14px) scale(.92); transform-origin:100% 100%; pointer-events:none;
  transition:opacity .38s ease, transform .38s cubic-bezier(.2,.7,.2,1); }
body.sha-hello-on .sha-hello{ opacity:1; transform:none; pointer-events:auto; }
body.sha-open .sha-hello{ opacity:0 !important; pointer-events:none !important; }
.sha-hello > img{ width:48px; height:48px; border-radius:50%; object-fit:cover; object-position:50% 18%;
  flex:0 0 auto; background:var(--accent--family--color); }
.sha-hello .tx{ font-size:13.5px; line-height:1.55; color:var(--black--color); font-weight:600; }
.sha-hello .tx b{ color:var(--accent--strong); }
.sha-hello .hx{ position:absolute; top:-9px; left:-9px; width:23px; height:23px; border-radius:50%; border:0;
  background:var(--black--color); color:#fff; cursor:pointer; font-size:15px; line-height:1; padding:0;
  box-shadow:0 5px 12px rgba(0,0,0,.24); }
.sha-hello::after{ content:''; position:absolute; right:-7px; bottom:18px; width:14px; height:14px; background:#fff;
  border-right:1px solid var(--border--color); border-top:1px solid var(--border--color); transform:rotate(45deg); }
@media (max-width:420px){ .sha-hello{ right:86px; max-width:200px; } }

/* --- header avatar + mute button --- */
.sha-head .av{ overflow:hidden; padding:0; background:rgba(255,255,255,.16); }
.sha-head .av img{ width:100%; height:100%; object-fit:cover; object-position:50% 18%; border-radius:50%; display:block; }
.sha-head .mute{ background:rgba(255,255,255,.12); border:0; color:#fff; width:34px; height:34px; border-radius:10px;
  cursor:pointer; font-size:14px; transition:.25s; flex:0 0 auto; }
.sha-head .mute:hover{ background:rgba(255,255,255,.25); }

/* --- Shaheer avatar beside each bot message --- */
.sha-row.bot{ align-items:flex-end; gap:8px; }
.sha-rav{ width:30px; height:30px; border-radius:50%; object-fit:cover; object-position:50% 20%; flex:0 0 auto;
  background:var(--accent--family--color); border:1px solid var(--border--color); }

/* --- expression stickers (full-body reactions) --- */
.sha-row.sha-stk{ margin-bottom:6px; }
.sha-stk img{ width:118px; height:auto; filter:drop-shadow(0 10px 18px rgba(15,54,63,.18));
  animation:shaPop .42s cubic-bezier(.2,.7,.2,1) both; }
@keyframes shaPop{ from{ opacity:0; transform:translateY(12px) scale(.82); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  .sha-hello{ transition:opacity .2s ease; }
  .sha-stk img{ animation:none; }
}

/* =====================================================================
   SECTION 35 — navbar vertical alignment fix
   The brand <figure> kept its default top margin (mb-0 only zeroes the
   bottom), pushing the logo down while the toggler centered higher — so
   they read as misaligned on mobile. Force both to true center.
   ===================================================================== */
.header-con .navbar{ align-items:center !important; }
.header-con .navbar-brand{ display:flex !important; align-items:center; margin:0 !important; }
.header-con .navbar-brand figure{ margin:0 !important; line-height:0; }
@media (max-width:991px){
  .header-con .navbar-toggler{ align-self:center !important; margin:0 !important; }
}

/* =============================================================
   19) TRUST + LEAD — impact stats · client strip · lead magnet · reviews · blog search
   ============================================================= */
.impact-band{ background:#123f4a; }
.impact-stat{ text-align:center; padding:16px 10px; }
.impact-stat .num{ font-family:'Thmanyah Serif Display',serif; font-weight:900; font-size:clamp(38px,4.6vw,60px); color:#fff; line-height:1; direction:ltr; }
.impact-stat .num .counter{ color:var(--accent--color); }
.impact-stat p{ color:rgba(255,255,255,.72); margin:10px 0 0; font-size:15px; }
@media (max-width:575px){ .impact-stat{ padding:14px 6px; } }

.client-strip .cs-label{ text-align:center; color:var(--text--color2); font-weight:700; font-size:14px; letter-spacing:.3px; margin-bottom:26px; }
.client-strip .cs-logos{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:20px 46px; }
.client-strip .cs-logos span{ font-family:'Thmanyah Serif Display',serif; font-weight:900; font-size:clamp(20px,2.4vw,30px); color:var(--black--color); opacity:.4; transition:opacity .3s, color .3s; }
.client-strip .cs-logos span:hover{ opacity:1; color:var(--accent--color); }

.lead-magnet-inner{ position:relative; overflow:hidden; border-radius:28px; padding:clamp(34px,5vw,60px);
  background:linear-gradient(135deg,#175561,#0f363f); box-shadow:0 34px 74px rgba(15,54,63,.28); }
.lead-magnet-inner::before{ content:''; position:absolute; top:-120px; left:-80px; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(243,114,49,.28), transparent 62%); pointer-events:none; }
.lm-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; }
.lm-badge{ display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.12); color:#fff; font-weight:700; font-size:13px; padding:7px 16px; border-radius:30px; margin-bottom:18px; }
.lead-magnet h2{ font-family:'Thmanyah Serif Display',serif !important; font-weight:900 !important; color:#fff !important; font-size:clamp(26px,3.2vw,40px) !important; line-height:1.25; margin:0 0 14px; }
.lead-magnet .lm-sub{ color:rgba(255,255,255,.82); font-size:16px; line-height:1.9; margin:0 0 18px; }
.lm-points{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.lm-points li{ color:#fff; display:flex; align-items:center; gap:10px; font-weight:600; font-size:15px; }
.lm-points li i{ color:var(--accent--color); }
.lm-form{ background:#fff; border-radius:20px; padding:26px 24px; }
.lm-form h4{ font-weight:800; color:var(--black--color); font-size:18px; margin:0 0 14px; }
.lm-form input{ width:100%; border:1px solid var(--border--color); border-radius:12px; background:var(--bg--color); padding:13px 16px; margin-bottom:12px; font-size:15px; transition:.25s; }
.lm-form input:focus{ border-color:var(--accent--color); background:#fff; outline:none; }
.lm-form button{ width:100%; border:0; background:var(--accent--color); color:#fff; font-weight:800; font-size:15px; padding:14px; border-radius:50px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:10px; transition:.3s; box-shadow:0 12px 28px rgba(243,114,49,.3); }
.lm-form button:hover{ background:#123f4a; transform:translateY(-2px); }
.lm-note{ display:block; text-align:center; color:var(--text--color2); font-size:12px; margin-top:12px; }
@media (max-width:767px){ .lm-grid{ grid-template-columns:1fr; gap:28px; } }

.testimonial-box .testi-avatar{ width:66px; height:66px; border-radius:50%; object-fit:cover; object-position:top center; display:block; margin:0 auto 18px; border:3px solid var(--accent--family--color); box-shadow:0 10px 24px rgba(21,77,90,.14); }

.pf-search{ max-width:520px; margin:0 auto 30px; position:relative; }
.pf-search input{ width:100%; border:1px solid var(--border--color); border-radius:50px; padding:14px 52px 14px 22px; background:#fff; font-size:15px; transition:.25s; }
.pf-search input:focus{ border-color:var(--accent--color); outline:none; box-shadow:0 0 0 4px rgba(243,114,49,.12); }
.pf-search i{ position:absolute; right:20px; top:50%; transform:translateY(-50%); color:var(--accent--color); pointer-events:none; }