/* ==========================================================================
   N.A Law Firm & Consultations — brand + modern theme layer
   Palette: maroon #7A1E2B / #4E1420  ·  gold #C2A24E / #D8C48A  ·  ink #2A0E13
   Loaded AFTER style.css so these rules (and re-defined keyframes) win.
   ========================================================================== */

/* ==========================================================================
   Tajawal — self-hosted, with metric overrides on the LATIN faces so the
   glyphs sit vertically centred in their line-box (Tajawal's native
   winAscent 101.6% + 20% line-gap made Latin text ride high in the template's
   fixed line-heights). Arabic faces keep native metrics (marks need the room).
   ascent 82% / descent 37% / line-gap 0%  ->  A-D = 45% centres the ink band.
   ========================================================================== */
@font-face{
  font-family:'Tajawal'; font-style:normal; font-weight:200; font-display:swap;
  src:url('../fonts/tajawal/tajawal-200-latin.woff2') format('woff2');
  ascent-override:82%; descent-override:37%; line-gap-override:0%;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Tajawal'; font-style:normal; font-weight:200; font-display:swap;
  src:url('../fonts/tajawal/tajawal-200-arabic.woff2') format('woff2');
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face{
  font-family:'Tajawal'; font-style:normal; font-weight:300; font-display:swap;
  src:url('../fonts/tajawal/tajawal-300-latin.woff2') format('woff2');
  ascent-override:82%; descent-override:37%; line-gap-override:0%;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Tajawal'; font-style:normal; font-weight:300; font-display:swap;
  src:url('../fonts/tajawal/tajawal-300-arabic.woff2') format('woff2');
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face{
  font-family:'Tajawal'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/tajawal/tajawal-400-latin.woff2') format('woff2');
  ascent-override:82%; descent-override:37%; line-gap-override:0%;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Tajawal'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/tajawal/tajawal-400-arabic.woff2') format('woff2');
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face{
  font-family:'Tajawal'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/tajawal/tajawal-500-latin.woff2') format('woff2');
  ascent-override:82%; descent-override:37%; line-gap-override:0%;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Tajawal'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/tajawal/tajawal-500-arabic.woff2') format('woff2');
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face{
  font-family:'Tajawal'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/tajawal/tajawal-700-latin.woff2') format('woff2');
  ascent-override:82%; descent-override:37%; line-gap-override:0%;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Tajawal'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/tajawal/tajawal-700-arabic.woff2') format('woff2');
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face{
  font-family:'Tajawal'; font-style:normal; font-weight:800; font-display:swap;
  src:url('../fonts/tajawal/tajawal-800-latin.woff2') format('woff2');
  ascent-override:82%; descent-override:37%; line-gap-override:0%;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Tajawal'; font-style:normal; font-weight:800; font-display:swap;
  src:url('../fonts/tajawal/tajawal-800-arabic.woff2') format('woff2');
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face{
  font-family:'Tajawal'; font-style:normal; font-weight:900; font-display:swap;
  src:url('../fonts/tajawal/tajawal-900-latin.woff2') format('woff2');
  ascent-override:82%; descent-override:37%; line-gap-override:0%;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Tajawal'; font-style:normal; font-weight:900; font-display:swap;
  src:url('../fonts/tajawal/tajawal-900-arabic.woff2') format('woff2');
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

:root{
    --maroon:      #7A1E2B;
    --maroon-deep: #4E1420;
    --maroon-ink:  #2A0E13;
    --gold:        #C2A24E;
    --gold-soft:   #D8C48A;
    --radius-card: 18px;
    --radius-img:  14px;
    --radius-btn:  10px;
    --ease:        cubic-bezier(.22,.61,.36,1);
}

/* --- Brand lockup: NA monogram (Logo Kit) + Cinzel/Amiri wordmark -------- */
.brand-logo{
    display:inline-flex;
    align-items:center;
    gap:12px;
    line-height:1;
    text-decoration:none !important;
    white-space:nowrap;
}
.brand-logo .brand-symbol{
    width:64px; height:64px; flex:none; display:block; object-fit:contain;
    transition:transform .4s var(--ease);
}
.brand-logo:hover .brand-symbol{ transform:scale(1.06); }
/* Footer sits on maroon — the mark rides a cream badge so the maroon ring reads.
   The mark's bbox includes the hanging column, so centering the bbox leaves the
   RING sitting high; extra top padding drops it to the badge's true centre. */
.brand-logo--reversed .brand-symbol{
    width:62px; height:62px; padding:8.5px 6px 3.5px; box-sizing:border-box;
    background:#F3E9DB; border-radius:50%; overflow:hidden;
    box-shadow:0 5px 16px rgba(0,0,0,.18);
}
/* Wordmark is one vector traced from the master artwork — Arabic + English
   together, as the source logo. Sized by height; width flows from its aspect
   ratio (~3.9:1), so the compact block fits even on narrow phones. */
.brand-logo .brand-wordmark{ height:72px; width:auto; flex:none; display:block; }
.header-upper .logo-box .brand-logo{ padding:8px 0; }
.sticky-header .logo .brand-logo{ padding:5px 0; }
.sticky-header .brand-logo .brand-symbol{ width:48px; height:48px; }
.sticky-header .brand-logo .brand-wordmark{ height:52px; }
/* Footer sits on maroon: the wordmark is whitened so it reads on the dark bg. */
.brand-logo--reversed .brand-wordmark{ filter:brightness(0) invert(1); }
.main-footer .brand-logo .brand-wordmark{ height:62px; }
.main-footer .logo-widget .brand-logo{ margin-bottom:8px; }
/* Justify the brief company blurb so its right (LTR) / left (RTL) edge lines up
   with the widget block instead of running ragged. Last line stays start-aligned.
   Hyphenation lets long Cinzel words break rather than stretching a 4-word line
   into rivers of whitespace on narrow columns. (Arabic doesn't hyphenate; Amiri
   justifies cleanly on its own.) */
.main-footer .logo-widget .text{
    text-align:justify;
    -webkit-hyphens:auto; hyphens:auto;
}
.mobile-menu .nav-logo{ padding:14px 20px; }
/* Responsive: scale the whole lockup down on smaller viewports. */
@media (max-width:1199px){ .brand-logo .brand-wordmark{ height:62px; } }
@media (max-width:991px){
    .brand-logo .brand-symbol{ width:54px; height:54px; }
    .brand-logo .brand-wordmark{ height:56px; }
}
@media (max-width:575px){
    .brand-logo{ gap:9px; }
    .brand-logo .brand-symbol{ width:46px; height:46px; }
    .brand-logo .brand-wordmark{ height:46px; }
}

/* --- Buttons: maroon base, gold slide on hover, softly rounded ------------ */
.btn-style-one,
.btn-style-two{
    background-color:var(--maroon) !important;
    border-radius:var(--radius-btn) !important;
    transition:transform .3s var(--ease), box-shadow .3s ease, color .3s ease;
}
.btn-style-one:before,
.btn-style-two:before{ background-color:var(--gold) !important; }
.btn-style-one:hover,
.btn-style-two:hover{
    color:var(--maroon-ink) !important;
    transform:translateY(-2px);
    box-shadow:0 12px 26px rgba(122,30,43,.28);
}
.btn-style-one .arrow,
.btn-style-two .arrow{ color:inherit; }

/* --- Rounded, modern cards with a lift-and-shadow on hover ---------------- */
.case-block-two .inner-box{
    border-radius:var(--radius-card);
    overflow:hidden;
    box-shadow:0 12px 32px rgba(46,14,20,.08);
    transition:transform .4s var(--ease), box-shadow .4s ease;
}
.case-block-two .inner-box:hover{
    transform:translateY(-10px);
    box-shadow:0 28px 54px rgba(46,14,20,.20);
}
.case-block-two .image-box{ overflow:hidden; }
.case-block-two .image-box img{
    width:100%;
    transition:transform .6s var(--ease);
}
.case-block-two .inner-box:hover .image-box img{ transform:scale(1.07); }

/* Team cards */
.team-block .inner-box{
    border-radius:var(--radius-card);
    overflow:hidden;
    box-shadow:0 12px 30px rgba(46,14,20,.08);
    transition:transform .4s var(--ease), box-shadow .4s ease;
}
.team-block .inner-box:hover{
    transform:translateY(-8px);
    box-shadow:0 26px 48px rgba(46,14,20,.18);
}
.team-block .image{ overflow:hidden; }
.team-block .image img{ width:100%; transition:transform .6s var(--ease); }
.team-block .inner-box:hover .image img{ transform:scale(1.06); }
/* Drop the theme's amber ripple flash on hover (a gold .image:before circle that
   the "circle" keyframes expand). The image zoom above is the only hover effect. */
.team-block .inner-box .image:before{ display:none; content:none; }
.team-block .inner-box:hover .image:before{ animation:none; }

/* --- Rounded imagery + panels throughout --------------------------------- */
.case-section .image img,
.recruitment-technology .image-box img,
.services-detail-section .image img,
.services-detail-section .inner-container,
.welcome-section .image img,
.fluid-section-two .image-column,
.contact-info-section .info-block .inner-box,
.map-boxed,
.map-outer,
.map-outer iframe{
    border-radius:var(--radius-img);
    overflow:hidden;
}
/* Home leads with the chairman card. About's layout pulls this card up 180px so
   it overlaps the page-title banner above it; Home has no banner, so that pull
   yanks the portrait up under the header and clips its top. Cancel the pull and
   give the card real breathing room below the header instead, so the framed,
   rounded portrait matches the one on /about. */
.case-first{ padding-top:80px; }
.case-first .inner-container{ margin-top:0; }
.case-first:before{ top:0; }

.contact-info-section .info-block .inner-box{
    transition:transform .35s var(--ease), box-shadow .35s ease;
}
.contact-info-section .info-block .inner-box:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px rgba(46,14,20,.12);
}

/* Form controls */
.contact-form .form-group input,
.contact-form .form-group textarea,
.newsletter-form input,
.newsletter-form .form-group{
    border-radius:var(--radius-btn);
}

/* --- Modern scroll-reveal motion (redefine the template's keyframes) ------ */
.wow{ visibility:hidden; }
.animated{
    animation-duration:1s !important;
    animation-timing-function:var(--ease) !important;
    animation-fill-mode:both;
}
@keyframes fadeInUp{
    from{ opacity:0; transform:translate3d(0, 44px, 0) scale(.985); }
    to  { opacity:1; transform:translate3d(0, 0, 0) scale(1); }
}
@keyframes fadeInLeft{
    from{ opacity:0; transform:translate3d(-48px, 0, 0); }
    to  { opacity:1; transform:translate3d(0, 0, 0); }
}
@keyframes fadeInRight{
    from{ opacity:0; transform:translate3d(48px, 0, 0); }
    to  { opacity:1; transform:translate3d(0, 0, 0); }
}
@keyframes fadeIn{
    from{ opacity:0; }
    to  { opacity:1; }
}

/* ==========================================================================
   Hero: paint before Owl initialises.
   owl.css sets `.owl-carousel{display:none}` and only reveals the slider once
   its JS has added `.owl-loaded`. That made the hero — the largest element on
   the page, and so the LCP element — wait for jQuery and owl.js to execute,
   and its late appearance shoved the rest of the page down (CLS ≈ 0.55).
   Showing the first slide from the first paint costs nothing: Owl replaces this
   markup with its own stage on init, at the same height. The sibling rule hides
   slides 2..n, which would otherwise stack vertically until Owl collapsed them.
   ========================================================================== */
.banner-carousel:not(.owl-loaded){ display:block; }
.banner-carousel:not(.owl-loaded) .slide-item ~ .slide-item{ display:none; }

/* ==========================================================================
   Hero slider redesign — branded maroon gradient (no photo), gold glow,
   animated gold underline, modern navigation. Distinct from the template.
   ========================================================================== */
.banner-section.style-three .banner-carousel .slide-item .image-layer{
    background-image:
        radial-gradient(900px 520px at 82% 18%, rgba(216,196,138,.20), transparent 60%),
        radial-gradient(760px 760px at 6% 96%, rgba(122,30,43,.55), transparent 62%),
        linear-gradient(125deg, #240B10 0%, #4E1420 46%, #7A1E2B 100%) !important;
    transform:none !important;            /* drop the Ken-Burns zoom (no photo now) */
    background-size:cover !important;
}
.banner-section.style-three .banner-carousel .active .slide-item .image-layer{ transform:none !important; }

/* Directional wash for text contrast instead of a flat dark veil */
.banner-section.style-three .slide-item:before{
    background:linear-gradient(90deg, rgba(36,11,16,.72) 0%, rgba(36,11,16,.40) 52%, rgba(122,30,43,.06) 100%) !important;
    opacity:1 !important;
}
/* Thin gold hairline framing the hero */
.banner-section.style-three:after{
    content:'';
    position:absolute;
    inset:26px;
    border:1px solid rgba(216,196,138,.22);
    pointer-events:none;
    z-index:2;
}
/* Keep the decorative shape PNGs as faint texture only */
.banner-section.style-three .slide-item .pattern-layer{ opacity:.12; }

/* Mobile & tablet (<992px, where the content column is full-width — the offset-lg-2
   + centered container only kick in at lg): the hero text sits only 15px from the
   section edge and was spilling ~11px past the 26px gold frame on both sides. Pad it
   inward so it stays inside the frame with a ~19px gutter (frame stays at 26px; text
   now starts ~45px in). Symmetric, so RTL is covered too. */
@media (max-width:991px){
    .banner-section.style-three .content-column .inner-column{
        padding-left:30px; padding-right:30px;
    }
}

/* Animated gold underline that draws in under the headline */
.banner-section.style-three .content-column h1:after{
    content:'';
    display:block;
    width:0;
    height:3px;
    margin-top:26px;
    background:linear-gradient(90deg, var(--gold), var(--gold-soft));
    border-radius:3px;
    transition:width 900ms var(--ease) 850ms;
}
.banner-section.style-three .active .content-column h1:after{ width:130px; }

/* Modern dot navigation: slim gold pills */
.banner-section .owl-dots{ z-index:3; }
.banner-section .owl-dots .owl-dot span{
    width:26px; height:4px; border-radius:4px;
    background:rgba(255,255,255,.35);
    transition:background .3s ease, width .3s var(--ease);
}
.banner-section .owl-dots .owl-dot.active span,
.banner-section .owl-dots .owl-dot:hover span{
    background:var(--gold);
    width:40px;
}
/* Refined prev/next controls */
.banner-section .owl-nav .owl-prev,
.banner-section .owl-nav .owl-next{
    border-radius:50% !important;
    border:1px solid rgba(216,196,138,.4) !important;
    color:var(--gold-soft) !important;
    transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.banner-section .owl-nav .owl-prev:hover,
.banner-section .owl-nav .owl-next:hover{
    background:var(--gold) !important;
    color:var(--maroon-ink) !important;
    border-color:var(--gold) !important;
}

/* --- Language switcher: flag icon ---------------------------------------- */
.navigation li.lang-switch > a,
.lang-switch-box > a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    text-decoration:none;
}
.lang-flag{
    width:26px;
    height:18px;
    object-fit:cover;
    border-radius:3px;
    box-shadow:0 0 0 1px rgba(0,0,0,.12);
    display:inline-block;
    vertical-align:middle;
    transition:transform .3s var(--ease);
}
.navigation li.lang-switch > a:hover .lang-flag,
.lang-switch-box > a:hover .lang-flag{ transform:translateY(-1px) scale(1.05); }
.lang-switch .lang-label,
.lang-switch-box .lang-label{ font-size:14px; }
/* Mobile menu panel is white — keep the label readable on it */
.mobile-menu .lang-switch .lang-label{ color:var(--maroon-deep); }

/* Language switch relocated next to the CTA on DESKTOP (user request). It stays
   inside the nav on mobile (off-canvas menu), so on desktop hide the in-menu copy
   and show the .lang-switch-box that lives in the header's actions/outer-box. */
.lang-switch-box{ display:none; }
.lang-switch-box .lang-label{ color:var(--maroon-deep); transition:color .3s ease; }
.lang-switch-box > a:hover .lang-label{ color:var(--gold); }
.sticky-header .lang-switch-box .lang-label{ color:#444444; }
@media (min-width:768px){
    .navigation li.lang-switch{ display:none; }
    .lang-switch-box{ display:inline-flex; align-items:center; }
    .header-upper .outer-box,
    .sticky-header .outer-box{ gap:22px; }
}

/* --- Floating WhatsApp chat button --------------------------------------- */
.wa-float{
    position:fixed;
    right:26px;
    bottom:26px;
    width:58px;
    height:58px;
    border-radius:50%;
    background:#25D366;
    color:#ffffff !important;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    line-height:1;
    z-index:9999;
    text-decoration:none;
    box-shadow:0 8px 22px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,.55);
    animation:waPulse 2.4s ease-out infinite;
    transition:transform .3s var(--ease);
}
.wa-float:hover{ color:#ffffff !important; transform:translateY(-3px) scale(1.06); }
.wa-float .fa{ margin-top:2px; }
html[dir="rtl"] .wa-float{ right:auto; left:26px; }
@keyframes waPulse{
    0%   { box-shadow:0 8px 22px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,.5); }
    70%  { box-shadow:0 8px 22px rgba(37,211,102,.45), 0 0 0 18px rgba(37,211,102,0); }
    100% { box-shadow:0 8px 22px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,0); }
}
@media (max-width:575px){
    .wa-float{ width:52px; height:52px; font-size:27px; right:18px; bottom:18px; }
    html[dir="rtl"] .wa-float{ right:auto; left:18px; }
}
@media (prefers-reduced-motion: reduce){ .wa-float{ animation:none; } }

/* --- Scroll-to-top: locale-aware side, stacked above the WhatsApp button -- */
.scroll-to-top{ right:35px !important; left:auto !important; bottom:98px !important; }
html[dir="rtl"] .scroll-to-top{ right:auto !important; left:35px !important; }
@media (max-width:575px){
    .scroll-to-top{ right:24px !important; bottom:80px !important; }
    html[dir="rtl"] .scroll-to-top{ right:auto !important; left:24px !important; }
}

/* --- Flash message (contact / subscribe) --------------------------------- */
.flash-message{ border-radius:var(--radius-btn); }

/* --- Footer: mini map + compact contact form (replaces the newsletter) ------ */
.footer-map{
    border-radius:var(--radius-img);
    overflow:hidden;
    margin-bottom:18px;
    box-shadow:0 8px 22px rgba(0,0,0,.22);
    filter:saturate(.92);
}
.footer-map iframe{ display:block; width:100%; }
.footer-contact-form .form-row{ display:flex; gap:12px; }
.footer-contact-form .form-row .form-group{ flex:1 1 0; min-width:0; }
.footer-contact-form .form-group{ margin-bottom:12px; }
.footer-contact-form input,
.footer-contact-form textarea{
    width:100%;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(216,196,138,.35);
    border-radius:var(--radius-btn);
    color:#f4ece0;
    padding:11px 14px;
    font-size:14px;
    line-height:1.4;
    transition:border-color .3s ease, background .3s ease;
}
.footer-contact-form textarea{ resize:vertical; min-height:64px; }
.footer-contact-form input::placeholder,
.footer-contact-form textarea::placeholder{ color:rgba(244,236,224,.6); }
.footer-contact-form input:focus,
.footer-contact-form textarea:focus{
    outline:none;
    border-color:var(--gold);
    background:rgba(255,255,255,.14);
}
/* gold CTA reads better than a maroon button on the maroon footer */
.footer-contact-form .theme-btn.btn-style-one{
    background-color:var(--gold) !important;
    color:var(--maroon-ink) !important;
    width:100%;
}
.footer-contact-form .theme-btn.btn-style-one:before{ background-color:#ffffff !important; }
.footer-contact-form .theme-btn .txt{ justify-content:center; width:100%; }

/* --- Motion & a11y floor ------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
    *, .animated{ animation:none !important; transition:none !important; }
    .wow{ visibility:visible !important; }
    .case-block-two .inner-box:hover,
    .team-block .inner-box:hover,
    .contact-info-section .info-block .inner-box:hover{ transform:none; }
}

/* ==========================================================================
   Typography: brand-kit fonts — Cinzel (Latin display) + Amiri (Arabic).
   Loaded from Google Fonts in <head> (see resources/views/layouts/app.blade.php).
   English uses Cinzel throughout; the Arabic locale switches to Amiri below.
   ========================================================================== */
/* Base font inherited everywhere (icons keep their own .fa/.flaticon font). */
body{ font-family:'Cinzel', 'Times New Roman', serif; }
/* Override elements the template pins to Bellefair/Oswald/Open Sans. */
h1, h2, h3, h4, h5, h6,
p, .text, .designation, .lang-label, .copyright,
.sec-title h2, .sec-title h3,
.banner-section .content-column .title,
.banner-section .content-column h1,
.slide-item .title, .slide-item h1,
.main-menu .navigation > li > a,
.theme-btn, .theme-btn .txt,
.page-title h1, .page-breadcrumb,
.footer-widget h5, .footer-list a,
input, select, textarea, button{
    font-family:'Cinzel', 'Times New Roman', serif !important;
}
/* Arabic locale → Amiri across the whole site. Every Latin selector above is
   mirrored here with an html[lang="ar"] prefix so it OUT-SPECIFIES the Cinzel
   rules — Cinzel carries no Arabic glyphs, so without the higher-specificity
   override the browser silently falls back to a default serif on AR headings
   and slider titles instead of Amiri. Icons are re-asserted below. */
html[lang="ar"] body,
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6,
html[lang="ar"] p, html[lang="ar"] a, html[lang="ar"] li,
html[lang="ar"] span, html[lang="ar"] div, html[lang="ar"] td, html[lang="ar"] th,
html[lang="ar"] .text, html[lang="ar"] .designation, html[lang="ar"] .lang-label,
html[lang="ar"] label, html[lang="ar"] .copyright,
html[lang="ar"] .sec-title h2, html[lang="ar"] .sec-title h3,
html[lang="ar"] .banner-section .content-column .title,
html[lang="ar"] .banner-section .content-column h1,
html[lang="ar"] .slide-item .title, html[lang="ar"] .slide-item h1,
html[lang="ar"] .main-menu .navigation > li > a,
html[lang="ar"] .theme-btn, html[lang="ar"] .theme-btn .txt,
html[lang="ar"] .page-title h1, html[lang="ar"] .page-breadcrumb,
html[lang="ar"] .footer-widget h5, html[lang="ar"] .footer-list a,
html[lang="ar"] input, html[lang="ar"] select, html[lang="ar"] textarea, html[lang="ar"] button{
    font-family:'Amiri', 'Times New Roman', serif !important;
}
/* Never let the text override touch icon glyph fonts. */
.fa, [class^="flaticon-"], [class*=" flaticon-"]{ font-family:inherit; }
.fa{ font-family:'FontAwesome' !important; }
[class^="flaticon-"], [class*=" flaticon-"]{ font-family:'Flaticon' !important; }
html[lang="ar"] .fa{ font-family:'FontAwesome' !important; }
html[lang="ar"] [class^="flaticon-"], html[lang="ar"] [class*=" flaticon-"]{ font-family:'Flaticon' !important; }

/* Desktop: vertically center the logo + contact button with the nav links
   (nav link box is ~86px tall; the two-line logo was taller, sitting lower and
   making the nav look shifted up). */
@media (min-width:768px){
    .header-style-two .header-upper .logo-box{
        padding:0; min-height:108px; display:flex; align-items:center;
    }
    /* Breathing room so the wordmark isn't crammed against the header edges. */
    .header-upper .logo-box .brand-logo{ padding:0; }
    .header-style-two .header-upper .outer-box{
        padding:0; min-height:108px; display:flex; align-items:center;
    }
}

/* ==========================================================================
   RTL: mirror the header/navbar (the template floats it LTR; bootstrap-rtl
   doesn't flip these custom/utility floats). Content grid already mirrors.
   ========================================================================== */
html[dir="rtl"] .header-top .top-left.pull-left{ float:right; }
/* info bar items mirror their spacing */
html[dir="rtl"] .header-style-two .header-top .info-box li{
    margin-right:0; margin-left:15px; padding:0 28px 0 21px;
}
html[dir="rtl"] .header-style-two .header-top .info-box li:last-child{ margin-left:0; }
/* The phone/email icons are position:absolute; top:0, so they hugged the top of
   the line-box while the (now metric-corrected) text centres — center the icon on
   the text line too so glyph + label align. RTL: icon flips to the right edge. */
.header-style-two .header-top .info-box li i{ top:50%; transform:translateY(-50%); }
html[dir="rtl"] .header-style-two .header-top .info-box li i{ left:auto; right:0; }
/* Phone numbers read left-to-right even inside an RTL line. Without isolation the
   bidi algorithm reorders the "+974 5555 1234" groups (rendered "1234 5555 974+").
   Isolate + force LTR so the number always displays in its natural order. */
a[href^="tel:"]{ direction:ltr; unicode-bidi:isolate; }
/* Same isolation for email addresses. The Flaticon icon glyph is a Private-Use-Area
   char with bidi class L, and the Latin address is L too — un-isolated they merge
   into ONE left-to-right run, so on the RTL footer the envelope rendered to the LEFT
   of the address while the phone/pin icons sat correctly on the right (start) edge.
   Isolating the link keeps the icon its own run, so it stays at the line start. */
a[href^="mailto:"]{ direction:ltr; unicode-bidi:isolate; }
/* Phone inputs: the browser forces direction:ltr on type="tel" (so digits type
   left-to-right). On an RTL page that left-anchors the field — its placeholder and
   value hugged the left edge while the sibling name/email inputs sat at the right.
   Keep the LTR direction for the digits but right-align the field so it lines up
   with its siblings. LTR pages already align left, so scope this to RTL. */
html[dir="rtl"] .contact-form input[type="tel"],
html[dir="rtl"] .footer-contact-form input[type="tel"]{ text-align:right; }
/* Cinzel is a titling face with no true lowercase — lowercase input renders as
   small caps, so the email address read as shouty all-caps (INFO@NALAWFIRM-QA.COM).
   In the EN locale render email addresses in the normal serif fallback so they
   show as typed. Applies to the top contact bar and the footer contact list.
   (AR uses Amiri, which has real lowercase, so it's left untouched.) */
html[lang="en"] a[href^="mailto:"]{ font-family:'Times New Roman', serif; text-transform:none; }

/* Footer social icons: the template pins the row with float:left and spaces the
   items with a physical margin-right — neither mirrors, so on the Arabic footer
   the row sat at the END (left) edge instead of the start, and the first icon was
   pushed 6px off the right edge. Mirror both. The icon ORDER already reverses on
   its own (inline-block items follow the RTL inline axis), so it isn't touched. */
html[dir="rtl"] .main-footer .logo-widget .social-nav{ float:right; }
html[dir="rtl"] .main-footer .logo-widget .social-nav li{ margin-right:0; margin-left:6px; }

/* Footer "Pages" list bullets. The template's ::before pointed at
   images/icons/logo-small-icon.png, which doesn't ship with this build (404), so
   every link kept a blank 22px gutter where the bullet should have been. Replace
   it with a small gold diamond — echoing the ◆ divider in the wordmark — and use
   logical properties (padding-inline-start / inset-inline-start) so the bullet and
   its padding sit on the correct side in both LTR and RTL. */
/* The Pages column reuses the .contact-widget class, so the template's
   `.contact-widget ul li{padding-left:35px}` — a gutter reserving room for the
   absolutely-positioned .icon in the CONTACT list — also indented this list, which
   has no icons. It's a physical padding, so the dead gap showed in LTR only. Drop it;
   the anchor's own padding-inline-start below is what makes room for the bullet. */
.main-footer .contact-widget .footer-list li{ padding-left:0; padding-right:0; }
.main-footer .footer-list li a{
    padding-left:0; padding-right:0; padding-inline-start:18px;
}
.main-footer .footer-list li a:before{
    content:''; background:none;
    left:auto; right:auto; inset-inline-start:2px;
    top:50%; width:7px; height:7px;
    background-color:var(--gold);
    transform:translateY(-50%) rotate(45deg);
    transition:background-color .3s ease, transform .3s var(--ease);
}
.main-footer .footer-list li a:hover:before{
    background-color:var(--gold-soft);
    transform:translateY(-50%) rotate(45deg) scale(1.25);
}

/* Desktop nav mirroring ONLY (>= md). Below md the template's mobile toggler
   + off-canvas menu take over, so these floats must not apply (they overlapped
   and blocked the hamburger). */
@media (min-width:768px){
    html[dir="rtl"] .main-header .header-upper .logo-box.pull-left{ float:right; }
    html[dir="rtl"] .main-header .nav-outer{ float:left; }
    html[dir="rtl"] .main-header .outer-box{ float:left; margin-left:0; margin-right:20px; }
    html[dir="rtl"] .main-header .main-menu{ float:right; }
    html[dir="rtl"] .main-menu .navigation > li{ float:right; margin-right:0; margin-left:25px; }
    html[dir="rtl"] .main-menu .navigation > li:last-child{ margin-left:0; }
    html[dir="rtl"] .main-header .btn-box{ margin-left:0; margin-right:0; }
    /* sticky header row (desktop-only feature) */
    html[dir="rtl"] .sticky-header .logo.pull-left{ float:right; }
    html[dir="rtl"] .sticky-header .pull-right{ float:left; }
    html[dir="rtl"] .sticky-header .outer-box{ float:left; }
}

/* ==========================================================================
   Desktop nav: centre the menu in the middle of the screen (both the upper
   header and the sticky header, LTR + RTL). The template floats logo one way
   and nav+button the other, bunching the links to one side. Flex the header row
   into three zones — [logo] [centred menu] [actions] — with equal-grow side
   zones so the menu lands at the true horizontal centre. `display:contents`
   lifts .nav-outer / .pull-right's children (menu + button) into the flex row.
   Direction (RTL mirroring) is handled by flexbox automatically. Desktop only;
   the mobile hamburger layout above is untouched.
   ========================================================================== */
@media (min-width:768px){
    .header-upper .auto-container,
    .sticky-header .auto-container{ display:flex !important; align-items:center; }

    .header-upper .logo-box,
    .sticky-header .logo{ float:none !important; flex:1 1 0; min-width:0; }

    .header-upper .nav-outer,
    .sticky-header .pull-right{ float:none !important; display:contents; }

    .header-upper .main-menu,
    .sticky-header .main-menu{ float:none !important; margin:0; }
    .main-menu .navbar-collapse{ float:none !important; }
    .main-menu .navigation{ display:flex; align-items:center; justify-content:center; }
    .main-menu .navigation > li{ float:none !important; }

    .header-upper .outer-box,
    .sticky-header .outer-box{
        float:none !important; margin:0 !important;
        flex:1 1 0; display:flex; align-items:center; justify-content:flex-end;
    }
    /* Every header container we flexed above still carries the template's .clearfix,
       whose ::after (display:block) becomes a phantom flex item at the end of the row.
       On .outer-box that combined with gap:22px to shove the CTA 22px left of the true
       edge; on .auto-container / .navigation it's currently harmless but would bite the
       moment a gap is added. The inner floats are already neutralised (float:none), so
       there is nothing left to clear — drop the pseudo on all of them. */
    .header-upper .auto-container::after,
    .sticky-header .auto-container::after,
    .header-upper .outer-box::after,
    .sticky-header .outer-box::after,
    .main-menu .navigation::after{ display:none; }

    /* The flex row already separates the lang switch and CTA with gap:22px. The
       template's leftover btn-box margin-left:20px (a float-era margin) stacks on
       top of that gap — but only in LTR, since RTL already zeroes it — leaving the
       EN gap 20px wider than the AR one. Drop it so both rely on the gap alone. */
    .header-upper .btn-box,
    .sticky-header .btn-box{ margin-left:0; }
}
/* Mobile (< md): mirror the hamburger + contact button sides for RTL.
   LTR default = toggler right, button absolute left. RTL = toggler left, button right. */
@media (max-width:767px){
    html[dir="rtl"] .nav-outer .mobile-nav-toggler{ float:left; margin-left:0; margin-right:20px; }
    html[dir="rtl"] .main-header .outer-box{ left:auto; right:0; }
    /* Sticky header (shows on scroll): logo floats right (below), so the toggler's
       absolutely-positioned outer-box must sit on the LEFT — otherwise it overlaps
       the logo on the right. */
    html[dir="rtl"] .main-header .sticky-header .outer-box{ right:auto; left:0; }
    html[dir="rtl"] .main-header .sticky-header .mobile-nav-toggler{ float:left; }
    /* The logo is NOT mirrored on mobile by the template, so in RTL it stayed on
       the left — the same side the hamburger toggler mirrors to — and floated on
       top of it (logo-box has z-index:12). Send the logo to the start (right) edge
       so the toggler sits alone on the left. */
    html[dir="rtl"] .main-header .header-upper .logo-box{ float:right; text-align:right; }
    html[dir="rtl"] .sticky-header .logo.pull-left{ float:right; }
}

/* Mobile (< md): the template floats the logo (padded lower) and the hamburger
   (pinned to the top) separately, so their vertical centres never lined up. Flex
   each header row and vertically-centre it. The toggler is buried in wrapper divs
   (.nav-outer, and for sticky .pull-right > .outer-box) that stretch across the
   row, so `display:contents` collapses those wrappers — the hamburger becomes a
   direct flex child of the row, and `margin-inline-start:auto` pins it to the end
   edge (right in LTR, left in RTL). The hidden desktop nav / actions carry no box.
   Clearfix pseudos are disabled so they can't act as phantom flex items. */
@media (max-width:767px){
    .header-upper .auto-container,
    .sticky-header .auto-container{
        display:flex !important; align-items:center;
    }
    .header-upper .auto-container::after,
    .sticky-header .auto-container::after,
    .header-upper .auto-container::before,
    .sticky-header .auto-container::before{ display:none !important; }

    .header-upper .logo-box,
    .sticky-header .logo.pull-left{
        float:none !important; flex:0 1 auto; min-width:0;
        padding-top:12px; padding-bottom:12px;
    }
    /* Keep the full icon+wordmark lockup on mobile but let it shrink to fit the
       space left beside the toggler. The logo box may shrink (flex:0 1 auto +
       min-width:0); inside it the wordmark is driven by MAX height + MAX width
       with both dimensions auto, so on the narrowest phones it scales down
       proportionally (height follows the aspect ratio as flex trims its width)
       instead of overflowing the row or squashing. */
    .header-upper .logo-box .brand-logo,
    .sticky-header .logo.pull-left .brand-logo{ max-width:100%; min-width:0; }
    .header-upper .logo-box .brand-wordmark,
    .sticky-header .logo.pull-left .brand-wordmark{
        height:auto !important; width:auto; max-height:48px; max-width:100%; min-width:0;
    }
    /* Collapse the wrapper boxes so the hamburger is a direct flex child. */
    .header-upper .nav-outer,
    .sticky-header .pull-right,
    .sticky-header .pull-right .outer-box{ display:contents !important; float:none !important; }
    /* Everything in those wrappers except the hamburger is off-canvas / hidden on
       mobile — make sure it carries no box so only the toggler remains. */
    .header-upper .nav-outer .main-menu,
    .sticky-header .pull-right .main-menu,
    .sticky-header .outer-box .lang-switch-box,
    .sticky-header .outer-box .btn-box{ display:none !important; }
    /* The hamburger: a normal-flow flex child pinned to the row's end edge. */
    .header-upper .mobile-nav-toggler,
    .sticky-header .mobile-nav-toggler{
        float:none !important; position:static !important; margin:0 0 0 auto !important;
    }
    html[dir="rtl"] .header-upper .mobile-nav-toggler,
    html[dir="rtl"] .sticky-header .mobile-nav-toggler{ margin:0 auto 0 0 !important; }
}

/* Active page highlighted bold gold — desktop nav, sticky nav, and the mobile
   off-canvas menu (all share the .navigation > li.current hook). */
.main-menu .navigation > li.current > a,
.sticky-header .main-menu .navigation > li.current > a,
.mobile-menu .navigation li.current > a{
    color:var(--gold) !important;
    font-weight:700;
}

/* Off-canvas menu scrim: swap the template's flat black for a deep maroon-ink
   (--maroon-ink) tint so the dimmed backdrop reads as part of the brand instead
   of generic black. Applies to both directions; the RTL rules below only touch
   position/transform, so this wins by load order. */
.mobile-menu .menu-backdrop{ background:rgba(42,14,19,.92); }

/* ==========================================================================
   RTL: mirror the off-canvas mobile menu to the LEFT edge. The template pins the
   whole panel (container, sliding box, backdrop, close button, logo) to the right
   and never flips it, so on the Arabic site it kept opening from the right. Mirror
   every side-specific property so it slides in from the left, matching RTL reading
   direction. (dir="rtl" is on <html>; .mobile-menu-visible is on <body>.)
   ========================================================================== */
html[dir="rtl"] .mobile-menu{ right:auto; left:0; padding-right:0; padding-left:30px; }
html[dir="rtl"] .mobile-menu .menu-backdrop{ right:auto; left:0; transform:translateX(-101%); }
/* The base rule above carries [dir="rtl"] → specificity (0,3,1), which outranks the
   template's visible rule (0,3,0); without this the backdrop stays parked off-screen
   left and the black fade never shows in AR. Flip it back on open, matching or beating
   that specificity. */
html[dir="rtl"] .mobile-menu-visible .mobile-menu .menu-backdrop{ transform:translateX(0%); }
html[dir="rtl"] .mobile-menu .menu-box{ right:auto; left:-400px; }
html[dir="rtl"] .mobile-menu-visible .mobile-menu .menu-box{ left:0; right:auto; }
html[dir="rtl"] .mobile-menu .close-btn{ right:auto; left:15px; }
html[dir="rtl"] .mobile-menu .nav-logo{ text-align:right; }

/* ==========================================================================
   Mobile hamburger — a filled maroon rounded button with three gold bars that
   morph into an X while the off-canvas menu is open (replaces the flat flaticon
   glyph). Scoped to <=1023px, the template's toggler breakpoint, so desktop keeps
   its display:none and nothing leaks up. .main-header … beats responsive.css's
   .nav-outer/.sticky-header toggler rules (same specificity, loaded later).
   ========================================================================== */
@media (max-width:1023px){
    .main-header .mobile-nav-toggler{
        display:flex; align-items:center; justify-content:center;
        width:46px; height:40px; padding:0;
        background:var(--maroon); border-radius:11px;
        box-shadow:0 6px 16px rgba(122,30,43,.28);
        font-size:0; line-height:0; color:transparent;
        cursor:pointer; -webkit-tap-highlight-color:transparent;
        transition:box-shadow .3s ease, transform .15s var(--ease);
    }
    .main-header .mobile-nav-toggler:active{ transform:scale(.94); }

    /* three gold bars: .burger is the middle bar, ::before/::after the outer two */
    .main-header .mobile-nav-toggler .burger{ position:relative; }
    .main-header .mobile-nav-toggler .burger,
    .main-header .mobile-nav-toggler .burger::before,
    .main-header .mobile-nav-toggler .burger::after{
        display:block; width:20px; height:2px; border-radius:2px;
        background:var(--gold);
        transition:transform .3s var(--ease), opacity .2s ease, top .3s var(--ease);
    }
    .main-header .mobile-nav-toggler .burger::before,
    .main-header .mobile-nav-toggler .burger::after{ content:""; position:absolute; left:0; }
    .main-header .mobile-nav-toggler .burger::before{ top:-6px; }
    .main-header .mobile-nav-toggler .burger::after { top: 6px; }

    /* morph to X while the menu is open (body carries .mobile-menu-visible) */
    .mobile-menu-visible .main-header .mobile-nav-toggler .burger{ background:transparent; }
    .mobile-menu-visible .main-header .mobile-nav-toggler .burger::before{ top:0; transform:rotate(45deg); }
    .mobile-menu-visible .main-header .mobile-nav-toggler .burger::after { top:0; transform:rotate(-45deg); }
}

/* social nav in the hero mirrors to the right edge (matching the 50px LTR inset) */
html[dir="rtl"] .banner-section .social-nav{ left:auto; right:50px; }

/* Hero subtitle accent dash: the template hard-codes it after the text for LTR
   (`.title{ padding-right:70px }` + `.title:before{ right:0 }`), so in RTL it stayed
   on the right = BEFORE the Arabic text. Mirror it to the left so it trails the
   subtitle (after it) in RTL reading order. */
html[dir="rtl"] .banner-section .content-column .title{ padding-right:0; padding-left:70px; }
html[dir="rtl"] .banner-section .content-column .title:before{ right:auto; left:0; }
/* Tajawal sits high in a fixed line-box; center button labels so there's no
   extra space below the text. */
.theme-btn{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    line-height:1.1 !important;
}
.theme-btn .txt{ display:inline-flex; align-items:center; line-height:1.1; }
/* Normalise Tajawal line metrics on card headings/text so blocks don't gain
   an extra bottom gap. */
.case-block-two .lower-content h4,
.case-block-two .lower-content h4 a{ line-height:1.3; }
.case-block-two .lower-content .text p{ line-height:1.6; margin-bottom:0; }
.team-block .lower-box h5{ line-height:1.3; }
.team-block .lower-box .designation{ line-height:1.45; }
.sec-title h2{ line-height:1.25; }
/* RTL: gold accent bars under headings are hard-coded left:0, so on a right-aligned
   Arabic title they sat under the LEFT (end) of the text. Mirror them to the right
   (start). The .sec-title .centered variant is symmetric (left:50%) so it's excluded.
   Covers: section headings, the service-detail title, and the About "our approach"
   card titles. */
html[dir="rtl"] .sec-title:not(.centered) h2:before,
html[dir="rtl"] .services-detail-section .lower-content h2:before,
html[dir="rtl"] .services-block-three .inner-box .content-column h2:before{
    left:auto;
    right:0;
}

/* Equal-height cards: vertically centre the text block so shorter cards don't
   look top-shifted (more noticeable after the Tajawal switch). */
.case-style-three .case-block{ display:flex; }
.case-style-three .case-block-two{ width:100%; }
.case-style-three .case-block-two .inner-box{ display:flex; flex-direction:column; width:100%; }
.case-style-three .case-block-two .inner-box .lower-content{
    flex:1 1 auto; display:flex; flex-direction:column; justify-content:center;
}
.team-section .team-block{ display:flex; }
.team-section .team-block .inner-box{ display:flex; flex-direction:column; width:100%; }
.team-section .team-block .inner-box .lower-box{
    flex:1 1 auto; display:flex; flex-direction:column; justify-content:center;
    padding-top:22px; padding-bottom:22px;
}

/* space between a button label and its arrow */
.theme-btn .arrow{ display:inline-block; margin-left:10px; }
/* button arrows point left in RTL (they read "forward" = leftward) + mirror the gap */
html[dir="rtl"] .theme-btn .arrow,
html[dir="rtl"] .btns-box .arrow{ display:inline-block; transform:scaleX(-1); margin-left:0; margin-right:10px; }

/* --- Uniform framing for admin-editable pictures -------------------------
   Photos uploaded from the admin panel arrive in arbitrary dimensions. Left
   unconstrained, one odd-shaped upload stretches its card taller than its
   neighbours and knocks a grid row out of alignment (e.g. mismatched team
   cards). Pin each image slot to the aspect ratio of the original theme
   artwork and crop the overflow with object-fit:cover, so every card matches
   regardless of the uploaded file's real size. object-position keeps faces in
   frame on the portrait (team / member) crops. */
.team-block .image img,
.welcome-section .image img{            /* team cards + member portrait (1240x1692) */
    width:100%;
    height:auto;
    aspect-ratio:1240 / 1692;
    object-fit:cover;
    object-position:center top;
}
.case-block-two .image-box img{         /* service cards, home + services (720x489) */
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:720 / 489;
    object-fit:cover;
}
.case-section .image img{               /* "Message of the chairman", home + about (1292x2043) */
    width:100%;
    height:auto;
    aspect-ratio:1292 / 2043;
    object-fit:cover;
}
.fluid-section-two .image-box img{      /* Why-choose-us figure (1440x1090) */
    width:100%;
    height:auto;
    aspect-ratio:1440 / 1090;
    object-fit:cover;
}
.services-page-section .image img{      /* About: our-approach blocks (750x591) */
    width:100%;
    height:auto;
    aspect-ratio:750 / 591;
    object-fit:cover;
}
.services-detail-section .image img{    /* Service-detail banner (1545x878) */
    width:100%;
    height:auto;
    aspect-ratio:1545 / 878;
    object-fit:cover;
}

/* ==========================================================================
   Insights — the article index and detail page reuse the service card and
   detail markup, so they inherit that framing. Only the date line and the
   empty state are new.
   ========================================================================== */
.post-date{
    font-size:13px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:10px;
}
.services-detail-section .post-date{ margin-bottom:16px; }

.insights-empty{
    text-align:center;
    padding:80px 20px;
    color:var(--maroon-deep);
    font-size:18px;
    letter-spacing:.04em;
}

/* ==========================================================================
   Breadcrumb separator. The theme drew the mark between crumbs with a
   background image (images/icons/logo-small-icon.png) this project never
   shipped, so it was invisible. Draw a small gold diamond instead — on brand,
   crisp at any DPI, nothing to 404. Logical properties keep it on the correct
   side in Arabic (RTL); the theme's physical right-spacing is neutralised.
   ========================================================================== */
.page-breadcrumb li{
    /* Neutralise the theme's physical spacing so the gap is defined once, in the
       inline (writing) direction — otherwise RTL inherits the LTR right-padding. */
    margin-right:0;
    padding-right:0;
    margin-inline-end:0;
    padding-inline-end:34px;
}
.page-breadcrumb li:after{
    content:"";
    position:absolute;
    /* The theme set right:-2px, which in RTL survives as a stray physical anchor
       and pins the diamond to the first crumb. Clear both, then place the diamond
       centered in the 34px gap using the logical end side (correct in LTR and RTL). */
    right:auto;
    left:auto;
    inset-inline-end:14px;
    top:50%;
    width:6px;
    height:6px;
    margin-top:-3px;
    background:linear-gradient(135deg, var(--gold-soft), var(--gold));
    transform:rotate(45deg);
    border-radius:1px;
}
.page-breadcrumb li:last-child{
    padding-inline-end:0;
}
.page-breadcrumb li:last-child:after{ display:none; }

/* ==========================================================================
   Contact info cards are a centered stack: icon → label → value. A long value
   pasted into the rich editor can carry its own text-align (e.g. "end"), which
   breaks the centered rhythm — the address hugged the card's edge while the icon
   and label above it stayed centered. Keep the value centered like the others.
   ========================================================================== */
.contact-info-section .info-block .inner-box .text,
.contact-info-section .info-block .inner-box .text > *{
    text-align:center !important;
}

/* ==========================================================================
   Flash + validation alerts (contact form / newsletter feedback) and inline
   field errors. Logical properties (border-inline-start, padding-inline-start)
   keep the accent bar and list indent on the correct side under RTL.
   ========================================================================== */
.site-alert-wrap{ padding-top:24px; }
.site-alert{
    display:flex; align-items:flex-start; gap:14px;
    padding:15px 18px; border-radius:14px;
    background:#fff; box-shadow:0 14px 34px rgba(46,14,20,.12);
    border:1px solid rgba(46,14,20,.06); border-inline-start:4px solid;
    font-family:'Tajawal', sans-serif; font-size:15px; line-height:1.5;
    animation:site-alert-in .35s var(--ease) both;
}
.site-alert + .site-alert{ margin-top:12px; }
.site-alert.is-hiding{ opacity:0; transform:translateY(-8px); transition:opacity .3s ease, transform .3s var(--ease); }
.site-alert__icon{
    flex:0 0 auto; width:34px; height:34px; border-radius:50%;
    display:grid; place-items:center; color:#fff; font-size:15px; margin-top:1px;
}
.site-alert__body{ flex:1 1 auto; color:#3a2a2d; }
.site-alert__body strong{ display:block; margin-bottom:2px; }
.site-alert__list{ margin:6px 0 0; padding-inline-start:18px; }
.site-alert__list li{ margin:2px 0; }
.site-alert__close{
    flex:0 0 auto; background:none; border:0; cursor:pointer;
    font-size:22px; line-height:1; color:#b0a0a3; padding:0 2px; transition:color .2s ease;
}
.site-alert__close:hover{ color:#3a2a2d; }
.site-alert--success{ border-inline-start-color:#1f7a4d; }
.site-alert--success .site-alert__icon{ background:#1f7a4d; }
.site-alert--error{ border-inline-start-color:var(--maroon, #7A1E2B); }
.site-alert--error .site-alert__icon{ background:var(--maroon, #7A1E2B); }
.site-alert--error .site-alert__body strong{ color:var(--maroon, #7A1E2B); }
@keyframes site-alert-in{ from{ opacity:0; transform:translateY(-10px); } to{ opacity:1; transform:translateY(0); } }

/* Inline per-field errors on the contact form */
.field-error{
    display:block; margin-top:6px; color:var(--maroon, #7A1E2B);
    font-family:'Tajawal', sans-serif; font-size:13px; line-height:1.4;
}
.contact-form .form-group.has-error input,
.contact-form .form-group.has-error textarea{
    border-color:var(--maroon, #7A1E2B);
    box-shadow:0 0 0 1px var(--maroon, #7A1E2B);
}

/* ==========================================================================
   Opening hours. On the contact card each row stacks the day-range over its
   time so nothing wraps awkwardly in the narrow column; in the footer the day
   and time share one line beside the clock icon.
   ========================================================================== */
.contact-info-section .info-block .hours-list li{
    display:flex;
    flex-direction:column;
    line-height:1.5;
}
.contact-info-section .info-block .hours-list li + li{ margin-top:8px; }
.contact-info-section .info-block .hours-list .days{ font-weight:600; }
.contact-info-section .info-block .hours-list .time{ opacity:.85; }
.main-footer .hours-line{ color:inherit; }